/* ==========================================================================
   Federal Credit West Union - Dark Grey Theme
   --------------------------------------------------------------------------
   Loaded LAST on every entry point (header.php, login.php, register.php,
   forgot-password.php, dashboard/header.php) so it wins over Bootstrap 4,
   style.css / customstyle.css and the Tailwind CDN runtime.

   Palette : charcoal greys with a muted gold accent taken from the crest.
   ========================================================================== */

:root {
    /* charcoal ramp -------------------------------------------------- */
    --fcwu-950: #101318;
    --fcwu-900: #14171c;
    --fcwu-850: #181c22;
    --fcwu-800: #1c2027;
    --fcwu-750: #22262e;
    --fcwu-700: #282d36;
    --fcwu-600: #333a45;
    --fcwu-500: #454e5b;
    --fcwu-400: #6b7480;
    --fcwu-300: #98a2b0;
    --fcwu-200: #c3cad4;
    --fcwu-100: #e4e8ee;
    --fcwu-50: #f2f4f7;

    /* accent (crest gold) -------------------------------------------- */
    --fcwu-gold: #c8a45c;
    --fcwu-gold-soft: #ddc188;

    /* status ---------------------------------------------------------- */
    --fcwu-success: #5fbf8b;
    --fcwu-danger: #e2727b;
    --fcwu-warning: #e0b64f;
    --fcwu-info: #7fa8d4;

    /* surfaces -------------------------------------------------------- */
    --fcwu-page: #14171c;
    --fcwu-surface: #1c2027;
    --fcwu-surface-2: #22262e;
    --fcwu-surface-3: #2a2f38;
    --fcwu-border: #2c323b;
    --fcwu-border-strong: #3a424e;
    --fcwu-text: #c3cad4;
    --fcwu-text-muted: #98a2b0;
    --fcwu-text-dim: #6b7480;
    --fcwu-heading: #e9edf2;
    --fcwu-shadow: 0 2px 18px -4px rgba(0, 0, 0, .65);
    --fcwu-shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
    background-color: var(--fcwu-page);
}

body,
body.bg-gray-50 {
    background-color: var(--fcwu-page) !important;
    color: var(--fcwu-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fcwu-heading);
}

p, li, dd, dt, label, legend {
    color: var(--fcwu-text);
}

strong, b {
    color: var(--fcwu-100);
}

a {
    color: #9fb0c6;
}

a:hover, a:focus {
    color: #ffffff;
}

hr {
    border-color: var(--fcwu-border);
}

::selection {
    background: rgba(200, 164, 92, .35);
}

/* ==========================================================================
   2. Brand lockup (public navbar)
   ========================================================================== */

.fcwu-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.fcwu-brand-mark {
    height: 52px;
    width: auto;
    border-radius: 13px;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .8);
    flex-shrink: 0;
}

.fcwu-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
    text-transform: uppercase;
}

.fcwu-brand-text .fcwu-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .05em;
    color: #ffffff;
}

.fcwu-brand-text .fcwu-brand-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: .66rem;
    letter-spacing: .22em;
    color: var(--fcwu-gold);
}

@media (max-width: 575.98px) {
    .fcwu-brand-text {
        display: none;
    }

    .fcwu-brand-mark {
        height: 44px;
    }
}

/* ==========================================================================
   3. Public site - surfaces
   ========================================================================== */

.white-bg,
.white-bg-50,
.bg-white {
    background-color: var(--fcwu-page) !important;
}

.gray-light-bg,
.bg-light {
    background-color: var(--fcwu-850) !important;
}

.primary-bg {
    background: var(--fcwu-800) !important;
}

.bg-gray-100,
.bg-gray-200,
.bg-gray-300 {
    background-color: var(--fcwu-surface-2) !important;
}

/* ==========================================================================
   4. Public site - gradients -> charcoal
   ========================================================================== */

.gradient-bg {
    background: linear-gradient(75deg, #1c2027 0%, #3b434f 55%, #23282f 100%) !important;
}

.gradient-overly-right-color:before,
.gradient-overly-right-color::before {
    background: linear-gradient(to right, rgba(16, 19, 24, .96) 0%, rgba(16, 19, 24, .88) 35%, rgba(16, 19, 24, .18) 100%) !important;
}

.gradient-overly-left:before,
.gradient-overly-left::before {
    background: linear-gradient(to left, rgba(16, 19, 24, .96) 0%, rgba(16, 19, 24, .88) 35%, rgba(16, 19, 24, .18) 100%) !important;
}

.gradient-overly-bottom:before,
.gradient-overly-bottom::before {
    background: linear-gradient(to bottom, rgba(16, 19, 24, .92) 0%, rgba(16, 19, 24, .25) 100%) !important;
}

.gradient-overly-top:before,
.gradient-overly-top::before {
    background: linear-gradient(to top, rgba(16, 19, 24, .92) 0%, rgba(16, 19, 24, .25) 100%) !important;
}

.gradient-overlay:before,
.gradient-overlay::before {
    background: rgba(16, 19, 24, .82) !important;
}

.hero-section,
.hero-equal-height {
    background-color: var(--fcwu-900) !important;
}

.hero-section h1,
.hero-equal-height h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   5. Public site - buttons
   ========================================================================== */

.secondary-solid-btn,
.primary-solid-btn,
.solid-white-btn {
    color: #ffffff !important;
    background: linear-gradient(to bottom, #454e5b, #2a2f38) !important;
    border: 1px solid var(--fcwu-border-strong) !important;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .7) !important;
}

.secondary-solid-btn:hover,
.primary-solid-btn:hover,
.solid-white-btn:hover {
    background: linear-gradient(to bottom, #525c6a, #333a45) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .85) !important;
}

.secondary-outline-btn,
.outline-btn {
    color: var(--fcwu-100) !important;
    border: 1px solid var(--fcwu-border-strong) !important;
}

.secondary-outline-btn:hover,
.outline-btn:hover {
    background: var(--fcwu-600) !important;
    color: #ffffff !important;
}

.outline-white-btn {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .7) !important;
}

.outline-white-btn:hover {
    background: #ffffff !important;
    color: var(--fcwu-900) !important;
    border-color: #ffffff !important;
}

/* Bootstrap buttons ------------------------------------------------ */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--fcwu-600) !important;
    border-color: var(--fcwu-500) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: var(--fcwu-500) !important;
    border-color: var(--fcwu-400) !important;
}

.btn-outline-primary,
.btn-outline-primary:focus {
    color: var(--fcwu-100) !important;
    border-color: var(--fcwu-400) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--fcwu-600) !important;
    border-color: var(--fcwu-400) !important;
    color: #ffffff !important;
}

.navbar-nav .nav-link:hover {
    color: var(--fcwu-gold) !important;
}

/* ==========================================================================
   6. Public site - accent colours
   ========================================================================== */

.color-secondary {
    color: var(--fcwu-gold) !important;
}

.color-primary {
    color: var(--fcwu-gold) !important;
}

.cah2 {
    color: var(--fcwu-100) !important;
}

.cah2::after {
    background: var(--fcwu-gold) !important;
}

.section-heading h2,
.page-header-content h1 {
    color: var(--fcwu-heading) !important;
}

/* ==========================================================================
   7. Cards, tables, forms
   ========================================================================== */

.card,
.single-blog-card,
.single-promo-card,
.single-pricing-pack,
.feature-feature-list,
.promo-block-content,
.contact-us-form,
.testimonial-card,
.single-client,
.panel,
.modal-content {
    background-color: var(--fcwu-surface) !important;
    border-color: var(--fcwu-border) !important;
    color: var(--fcwu-text) !important;
    box-shadow: var(--fcwu-shadow) !important;
}

.card-header,
.card-footer {
    background-color: var(--fcwu-surface-2) !important;
    border-color: var(--fcwu-border) !important;
    color: var(--fcwu-100) !important;
}

.card-body {
    color: var(--fcwu-text) !important;
}

.shadow,
.shadow-sm {
    box-shadow: var(--fcwu-shadow) !important;
}

.table,
.table td,
.table th {
    color: var(--fcwu-text) !important;
    border-color: var(--fcwu-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .022) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(200, 164, 92, .07) !important;
}

.table thead th {
    background-color: var(--fcwu-surface-2) !important;
    color: var(--fcwu-100) !important;
}

.form-control,
.form-control:focus,
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background-color: var(--fcwu-750) !important;
    border-color: var(--fcwu-border-strong) !important;
    color: var(--fcwu-100) !important;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--fcwu-700) !important;
    border-color: var(--fcwu-gold) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .2rem rgba(200, 164, 92, .16) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--fcwu-text-dim) !important;
}

label,
.form-label {
    color: var(--fcwu-200) !important;
}

.form-text,
.help-block {
    color: var(--fcwu-text-dim) !important;
}

.breadcrumb {
    background: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--fcwu-200) !important;
}

.breadcrumb-item.active {
    color: var(--fcwu-gold) !important;
}

/* ==========================================================================
   8. Accordion / FAQ
   ========================================================================== */

.accordion-faq.accordion>.card,
.accordion.accordion-faq>.card {
    background-color: var(--fcwu-surface) !important;
    border-color: var(--fcwu-border) !important;
}

.accordion-faq.accordion .card-header,
.accordion-faq .card-header {
    background: var(--fcwu-surface-2) !important;
    color: var(--fcwu-100) !important;
    border-color: var(--fcwu-border) !important;
}

.accordion-faq.accordion .card-body,
.accordion-faq .card-body {
    background-color: var(--fcwu-surface) !important;
    color: var(--fcwu-text) !important;
}

.accordion-faq .card-header h6 {
    color: var(--fcwu-100) !important;
}

/* ==========================================================================
   9. Pricing tables
   ========================================================================== */

.pricing .pricing-table .pricing-header {
    background: linear-gradient(140deg, #333a45, #1c2027) !important;
    border: 1px solid var(--fcwu-border-strong) !important;
}

.pricing .pricing-table .pricing-list,
.pricing-table .pricing-list {
    background-color: var(--fcwu-surface) !important;
    border: 1px solid var(--fcwu-border) !important;
}

.single-pricing-pack .card-body {
    color: var(--fcwu-text) !important;
}

.pricing-rate {
    color: var(--fcwu-100) !important;
}

.pricing-rate span {
    color: var(--fcwu-text-dim) !important;
}

.pricing .pricing-table .pricing-header .pricing-title,
.pricing .pricing-table .pricing-header .pricing-rate {
    color: #ffffff !important;
}

.pricing .pricing-table .pricing-list ul li {
    color: var(--fcwu-text) !important;
    border-color: var(--fcwu-border) !important;
}

.pricing .pricing-list ul li span {
    color: #ffffff !important;
}

/* ==========================================================================
   10. Misc public components
   ========================================================================== */

.client-img {
    filter: grayscale(1) brightness(1.45) contrast(.9);
    opacity: .55;
    transition: opacity .25s ease-in-out;
}

.single-client:hover .client-img {
    opacity: .95;
}

.scroll-top {
    background: var(--fcwu-600) !important;
    color: #ffffff !important;
}

.scroll-top:hover {
    background: var(--fcwu-500) !important;
}

.ti-check-box {
    color: var(--fcwu-gold) !important;
}

.call-to-action .btn,
.cta .btn {
    border-radius: 4px;
}

.footer-section {
    background: var(--fcwu-950);
    border-top: 1px solid var(--fcwu-border);
}

.footer-nav-wrap .nav-link,
.footer-bottom .nav-link {
    color: var(--fcwu-300) !important;
}

.footer-nav-wrap .nav-link:hover {
    color: var(--fcwu-gold) !important;
}

.loader1 {
    background-color: var(--fcwu-page) !important;
}


/* ==========================================================================
   11. Tailwind overrides - dashboard, login, register
   --------------------------------------------------------------------------
   The app uses the Tailwind CDN with hard-coded `bg-white` / `text-gray-900`
   utilities. Re-mapping the neutrals to charcoal is what gives the dashboard
   its dark grey surface. `!important` is required because the Tailwind CDN
   injects its stylesheet at runtime.
   ========================================================================== */

/* --- backgrounds --------------------------------------------------- */
.bg-white                 { background-color: #1c2027 !important; }
.bg-gray-50               { background-color: #14171c !important; }
.bg-gray-100              { background-color: #1c2027 !important; }
.bg-gray-200              { background-color: #22262e !important; }
.bg-gray-300              { background-color: #2a2f38 !important; }
.bg-gray-400              { background-color: #333a45 !important; }
.bg-gray-500              { background-color: #454e5b !important; }
.bg-gray-600              { background-color: #6b7480 !important; }
.bg-gray-700              { background-color: #98a2b0 !important; }
.bg-gray-800              { background-color: #c3cad4 !important; }
.bg-gray-900              { background-color: #101318 !important; }
.bg-black                 { background-color: #0b0d10 !important; }
.bg-transparent           { background-color: transparent !important; }

/* --- text ----------------------------------------------------------- */
.text-white               { color: #ffffff !important; }
.text-black               { color: #e4e8ee !important; }
.text-gray-50             { color: #14171c !important; }
.text-gray-100            { color: #e4e8ee !important; }
.text-gray-200            { color: #d4dae2 !important; }
.text-gray-300            { color: #b3bcc7 !important; }
.text-gray-400            { color: #8a94a1 !important; }
.text-gray-500            { color: #a2acb9 !important; }
.text-gray-600            { color: #b8c0cb !important; }
.text-gray-700            { color: #d2d8e0 !important; }
.text-gray-800            { color: #e4e8ee !important; }
.text-gray-900            { color: #f0f3f7 !important; }

/* --- brand text (must read light on charcoal) ----------------------- */
.text-primary-400         { color: #98a2b0 !important; }
.text-primary-500         { color: #a7b0bd !important; }
.text-primary-600         { color: #b9c2ce !important; }
.text-primary-700         { color: #d4dae2 !important; }
.text-primary-800         { color: #e4e8ee !important; }
.text-primary-900         { color: #f2f4f7 !important; }
.text-secondary-600       { color: #ddc188 !important; }
.text-secondary-700       { color: #e6d2a6 !important; }




/* --- status text --------------------------------------------------- */
.text-red-500             { color: #ef8b93 !important; }
.text-red-600             { color: #ea8189 !important; }
.text-red-700             { color: #e2727b !important; }
.text-red-800             { color: #f0a0a7 !important; }
.text-red-900             { color: #f6bcc1 !important; }
.text-green-500           { color: #78d3a4 !important; }
.text-green-600           { color: #6bcd9c !important; }
.text-green-700           { color: #5fbf8b !important; }
.text-green-800           { color: #93e0ba !important; }
.text-yellow-500          { color: #e8c469 !important; }
.text-yellow-600          { color: #e0b64f !important; }
.text-yellow-700          { color: #dcb45e !important; }
.text-yellow-800          { color: #e8ca80 !important; }
.text-yellow-900          { color: #f0d79a !important; }
.text-amber-500           { color: #e8c469 !important; }
.text-amber-600           { color: #e0b64f !important; }
.text-amber-800           { color: #e8ca80 !important; }
.text-blue-500            { color: #8fb5d9 !important; }
.text-blue-600            { color: #7fa8d4 !important; }
.text-blue-700            { color: #9dbcdd !important; }
.text-blue-800            { color: #bcd2e6 !important; }
.text-cyan-600            { color: #7ec2c9 !important; }
.text-indigo-600          { color: #9aa7e0 !important; }
.text-purple-600          { color: #a892e0 !important; }
.text-purple-700          { color: #b9a6ea !important; }
.text-pink-600            { color: #e08fc0 !important; }
.text-accent-600          { color: #e08fc0 !important; }

/* --- borders & dividers -------------------------------------------- */
.border-white             { border-color: #f0f3f7 !important; }
.border-black             { border-color: #0b0d10 !important; }
.border-transparent       { border-color: transparent !important; }
.border-gray-100          { border-color: #22262e !important; }
.border-gray-200          { border-color: #2c323b !important; }
.border-gray-300          { border-color: #3a424e !important; }
.border-gray-400          { border-color: #4a535f !important; }
.border-gray-500          { border-color: #5d6673 !important; }
.divide-gray-100          { border-color: #22262e !important; }
.divide-gray-200          { border-color: #2c323b !important; }
.divide-gray-300          { border-color: #3a424e !important; }
.divide-white             { border-color: #f0f3f7 !important; }

/* --- status badges -------------------------------------------------- */
.bg-red-50                 { background-color: #2a1c1f !important; }
.bg-red-100                { background-color: #352226 !important; }
.bg-green-50               { background-color: #16241c !important; }
.bg-green-100              { background-color: #1c2f24 !important; }
.bg-yellow-50              { background-color: #26231a !important; }
.bg-yellow-100             { background-color: #332f21 !important; }
.bg-amber-50               { background-color: #26231a !important; }
.bg-amber-100              { background-color: #332f21 !important; }
.bg-blue-50                { background-color: #17202a !important; }
.bg-blue-100               { background-color: #1e2a37 !important; }
.bg-cyan-100               { background-color: #16262a !important; }
.bg-indigo-100             { background-color: #1e2130 !important; }
.bg-purple-50              { background-color: #1b1a24 !important; }
.bg-purple-100             { background-color: #221f2e !important; }
.bg-pink-100               { background-color: #2b1f27 !important; }

.border-red-100            { border-color: #4a2b31 !important; }
.border-red-200            { border-color: #5c353c !important; }
.border-red-300            { border-color: #7a4249 !important; }
.border-green-100          { border-color: #234230 !important; }
.border-green-200          { border-color: #2c523c !important; }
.border-green-300          { border-color: #3a6b4f !important; }
.border-yellow-100         { border-color: #453f26 !important; }
.border-yellow-200         { border-color: #584f2f !important; }
.border-blue-100           { border-color: #22303f !important; }
.border-blue-200           { border-color: #2c3d50 !important; }
.border-purple-100         { border-color: #2d2940 !important; }
.border-purple-200         { border-color: #3a3450 !important; }
.border-red-500            { border-color: #e2727b !important; }
.border-green-500          { border-color: #5fbf8b !important; }
.border-yellow-400         { border-color: #e0b64f !important; }

/* --- brand surfaces & outlines -------------------------------------- */
.bg-primary-50             { background-color: #22262e !important; }
.bg-primary-100            { background-color: #2a2f38 !important; }
.bg-primary-200            { background-color: #333a45 !important; }
.bg-primary-300            { background-color: #454e5b !important; }
.bg-primary-400            { background-color: #525c6a !important; }
.bg-primary-500            { background-color: #4d5560 !important; }
.bg-primary-600            { background-color: #59616d !important; }
.bg-primary-700            { background-color: #6b7480 !important; }
.bg-primary-800            { background-color: #8b95a3 !important; }
.bg-primary-900            { background-color: #aab3c0 !important; }

.border-primary-100        { border-color: #2a2f38 !important; }
.border-primary-200        { border-color: #333a45 !important; }
.border-primary-300        { border-color: #454e5b !important; }
.border-primary-500        { border-color: #8b95a3 !important; }
.border-primary-600        { border-color: #aab3c0 !important; }

.ring-primary-200          { --tw-ring-color: #525c6a !important; }
.ring-primary-500          { --tw-ring-color: #8b95a3 !important; }
.ring-red-500              { --tw-ring-color: #e2727b !important; }
.ring-secondary-200        { --tw-ring-color: #8a7333 !important; }
.ring-white                { --tw-ring-color: #f0f3f7 !important; }

/* --- gradient stops -------------------------------------------------- */
.from-gray-50, .from-white  { --tw-gradient-from: #1c2027 !important; }
.from-gray-100              { --tw-gradient-from: #22262e !important; }
.from-gray-900              { --tw-gradient-from: #101318 !important; }
.from-primary-50            { --tw-gradient-from: #22262e !important; }
.from-primary-100           { --tw-gradient-from: #2a2f38 !important; }
.from-primary-500           { --tw-gradient-from: #454e5b !important; }
.from-primary-600           { --tw-gradient-from: #4d5560 !important; }
.from-primary-700           { --tw-gradient-from: #59616d !important; }
.from-primary-800           { --tw-gradient-from: #6b7480 !important; }
.from-red-50                { --tw-gradient-from: #2a1c1f !important; }
.from-green-50              { --tw-gradient-from: #16241c !important; }
.from-green-100             { --tw-gradient-from: #1c2f24 !important; }
.from-blue-50               { --tw-gradient-from: #17202a !important; }
.from-purple-50             { --tw-gradient-from: #1b1a24 !important; }
.from-purple-100            { --tw-gradient-from: #221f2e !important; }
.from-accent-50             { --tw-gradient-from: #2b1f27 !important; }
.from-accent-100            { --tw-gradient-from: #352530 !important; }
.from-secondary-50          { --tw-gradient-from: #26231a !important; }
.from-secondary-100         { --tw-gradient-from: #332f21 !important; }

.to-gray-100, .to-white     { --tw-gradient-to: #22262e !important; }
.to-gray-200                { --tw-gradient-to: #2a2f38 !important; }
.to-gray-800                { --tw-gradient-to: #c3cad4 !important; }
.to-primary-50              { --tw-gradient-to: #22262e !important; }
.to-primary-100             { --tw-gradient-to: #2a2f38 !important; }
.to-primary-200             { --tw-gradient-to: #333a45 !important; }
.to-primary-500             { --tw-gradient-to: #454e5b !important; }
.to-primary-600             { --tw-gradient-to: #4d5560 !important; }
.to-primary-700             { --tw-gradient-to: #59616d !important; }
.to-primary-800             { --tw-gradient-to: #6b7480 !important; }
.to-primary-900             { --tw-gradient-to: #8b95a3 !important; }
.to-green-100              { --tw-gradient-to: #1c2f24 !important; }
.to-green-200              { --tw-gradient-to: #234230 !important; }
.to-purple-100             { --tw-gradient-to: #221f2e !important; }
.to-purple-200             { --tw-gradient-to: #2d2940 !important; }
.to-accent-100             { --tw-gradient-to: #2b1f27 !important; }
.to-accent-200             { --tw-gradient-to: #352530 !important; }
.to-secondary-100          { --tw-gradient-to: #332f21 !important; }
.to-secondary-200          { --tw-gradient-to: #453f26 !important; }

.via-primary-100            { --tw-gradient-via: #2a2f38 !important; }
.via-primary-600            { --tw-gradient-via: #4d5560 !important; }
.via-primary-700            { --tw-gradient-via: #59616d !important; }


/* --- interaction states --------------------------------------------- */
[class~="hover:bg-white"]:hover         { background-color: #22262e !important; }
[class~="hover:bg-gray-50"]:hover       { background-color: #1c2027 !important; }
[class~="hover:bg-gray-100"]:hover      { background-color: #2a2f38 !important; }
[class~="hover:bg-gray-200"]:hover      { background-color: #333a45 !important; }
[class~="hover:bg-red-50"]:hover        { background-color: #352226 !important; }
[class~="hover:bg-red-100"]:hover       { background-color: #3f272b !important; }
[class~="hover:bg-yellow-50"]:hover     { background-color: #332f21 !important; }
[class~="hover:bg-primary-50"]:hover    { background-color: #2a2f38 !important; }
[class~="hover:bg-primary-100"]:hover   { background-color: #333a45 !important; }
[class~="hover:bg-primary-200"]:hover   { background-color: #454e5b !important; }
[class~="hover:bg-primary-700"]:hover   { background-color: #7c8693 !important; }
[class~="hover:bg-primary-800"]:hover   { background-color: #8b95a3 !important; }
[class~="hover:bg-blue-600"]:hover      { background-color: #6b7480 !important; }

[class~="hover:text-gray-500"]:hover    { color: #c2cad4 !important; }
[class~="hover:text-gray-600"]:hover    { color: #d2d8e0 !important; }
[class~="hover:text-gray-700"]:hover    { color: #e4e8ee !important; }
[class~="hover:text-primary-500"]:hover { color: #c3cad4 !important; }
[class~="hover:text-primary-600"]:hover { color: #d4dae2 !important; }
[class~="hover:text-primary-700"]:hover { color: #e4e8ee !important; }
[class~="hover:text-primary-800"]:hover { color: #f0f3f7 !important; }
[class~="hover:text-red-700"]:hover     { color: #ef8b93 !important; }
[class~="hover:text-red-800"]:hover     { color: #f6bcc1 !important; }
[class~="hover:text-green-700"]:hover   { color: #93e0ba !important; }
[class~="hover:text-blue-700"]:hover    { color: #bcd2e6 !important; }
[class~="hover:text-yellow-900"]:hover  { color: #f7e6b8 !important; }
[class~="hover:text-white"]:hover       { color: #ffffff !important; }

[class~="hover:border-primary-100"]:hover { border-color: #333a45 !important; }
[class~="hover:border-primary-300"]:hover { border-color: #525c6a !important; }
[class~="hover:border-primary-500"]:hover { border-color: #8b95a3 !important; }
[class~="hover:border-gray-100"]:hover    { border-color: #2a2f38 !important; }
[class~="hover:border-gray-200"]:hover    { border-color: #3a424e !important; }
[class~="hover:border-gray-300"]:hover    { border-color: #4a535f !important; }

[class~="hover:from-primary-100"]:hover   { --tw-gradient-from: #333a45 !important; }
[class~="hover:from-gray-100"]:hover      { --tw-gradient-from: #2a2f38 !important; }
[class~="hover:from-green-100"]:hover     { --tw-gradient-from: #234230 !important; }
[class~="hover:from-purple-100"]:hover    { --tw-gradient-from: #2d2940 !important; }
[class~="hover:from-secondary-100"]:hover { --tw-gradient-from: #453f26 !important; }
[class~="hover:from-accent-100"]:hover    { --tw-gradient-from: #352530 !important; }
[class~="hover:to-primary-200"]:hover     { --tw-gradient-to: #454e5b !important; }
[class~="hover:to-gray-200"]:hover        { --tw-gradient-to: #333a45 !important; }
[class~="hover:to-green-200"]:hover       { --tw-gradient-to: #2c523c !important; }
[class~="hover:to-purple-200"]:hover      { --tw-gradient-to: #2d2940 !important; }
[class~="hover:to-secondary-200"]:hover   { --tw-gradient-to: #453f26 !important; }
[class~="hover:to-accent-200"]:hover      { --tw-gradient-to: #352530 !important; }

[class~="focus:border-primary-500"]:focus  { border-color: #8b95a3 !important; }
[class~="focus:border-primary-300"]:focus  { border-color: #525c6a !important; }
[class~="focus:ring-primary-500"]:focus    { --tw-ring-color: #8b95a3 !important; }
[class~="focus:ring-primary-200"]:focus    { --tw-ring-color: #525c6a !important; }
[class~="focus:ring-red-500"]:focus        { --tw-ring-color: #e2727b !important; }
[class~="focus:ring-offset-2"]:focus       { --tw-ring-offset-color: #14171c !important; }

/* --- shadows, scrollbars, misc --------------------------------------- */
.shadow-sm    { box-shadow: var(--fcwu-shadow) !important; }
.shadow       { box-shadow: var(--fcwu-shadow) !important; }
.shadow-md    { box-shadow: var(--fcwu-shadow) !important; }
.shadow-lg    { box-shadow: var(--fcwu-shadow-lg) !important; }
.shadow-soft  { box-shadow: var(--fcwu-shadow) !important; }

.placeholder-gray-400::placeholder { color: #6b7480 !important; }
.placeholder-gray-500::placeholder { color: #5d6673 !important; }

::-webkit-scrollbar           { width: 10px; height: 10px; }
::-webkit-scrollbar-track     { background: #101318; }
::-webkit-scrollbar-thumb     { background: #3a424e; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4a535f; }

.page-loading { background-color: #14171c !important; }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(.75);
}

/* ==========================================================================
   12. Dashboard shell
   ========================================================================== */

.fcwu-app {
    background-color: var(--fcwu-page) !important;
}

.fcwu-app .loading-animation .core {
    box-shadow: 0 0 15px rgba(200, 164, 92, .45);
}

.fcwu-app .page-loading .text {
    background: linear-gradient(90deg, var(--fcwu-gold), #f0dcae, var(--fcwu-gold));
    background-size: 200% auto;
}

/* ==========================================================================
   13. Reduced-motion / print
   ========================================================================== */

@media print {
    body, .bg-white, .bg-gray-50 {
        background: #ffffff !important;
        color: #111111 !important;
    }

    h1, h2, h3, h4, h5, h6, p, td, th, .text-gray-900, .text-black {
        color: #111111 !important;
    }
}


/* ==========================================================================
   14. Bootstrap components (public site)
   ========================================================================== */

.text-muted {
    color: var(--fcwu-text-muted) !important;
}

.badge-primary { background-color: var(--fcwu-600) !important; }
.badge-secondary { background-color: var(--fcwu-500) !important; }
.badge-success { background-color: #2f6b4f !important; color: #ffffff !important; }
.badge-info { background-color: #24445e !important; color: #bcd2e6 !important; }
.badge-warning { background-color: #7a6428 !important; color: #ffffff !important; }
.badge-danger { background-color: #7d3a40 !important; color: #ffffff !important; }

.alert {
    border-radius: 4px;
}

.alert-success { background-color: #16241c !important; border-color: #234230 !important; color: #93e0ba !important; }
.alert-info    { background-color: #17202a !important; border-color: #22303f !important; color: #bcd2e6 !important; }
.alert-warning { background-color: #26231a !important; border-color: #453f26 !important; color: #e8ca80 !important; }
.alert-danger  { background-color: #2a1c1f !important; border-color: #4a2b31 !important; color: #f0a0a7 !important; }

.list-group-item {
    background-color: var(--fcwu-surface) !important;
    border-color: var(--fcwu-border) !important;
    color: var(--fcwu-text) !important;
}

.list-group-item:hover {
    background-color: var(--fcwu-surface-2) !important;
}

.pagination .page-link,
.page-link {
    background-color: var(--fcwu-surface) !important;
    border-color: var(--fcwu-border) !important;
    color: var(--fcwu-200) !important;
}

.page-item.active .page-link {
    background-color: var(--fcwu-600) !important;
    border-color: var(--fcwu-600) !important;
    color: #ffffff !important;
}

.page-item.disabled .page-link {
    background-color: var(--fcwu-850) !important;
    border-color: var(--fcwu-border) !important;
    color: var(--fcwu-text-dim) !important;
}

.modal-content {
    background-color: var(--fcwu-surface) !important;
    border: 1px solid var(--fcwu-border-strong) !important;
    color: var(--fcwu-text) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--fcwu-border) !important;
}

.dropdown-menu {
    background-color: var(--fcwu-surface-2) !important;
    border-color: var(--fcwu-border-strong) !important;
}

.dropdown-item {
    color: var(--fcwu-200) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fcwu-600) !important;
    color: #ffffff !important;
}

.nav-tabs {
    border-color: var(--fcwu-border) !important;
}

.nav-tabs .nav-link {
    color: var(--fcwu-300) !important;
    border: 1px solid transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--fcwu-heading) !important;
    background-color: var(--fcwu-surface) !important;
    border-color: var(--fcwu-border-strong) !important;
    border-bottom-color: transparent !important;
}

.progress {
    background-color: var(--fcwu-700) !important;
}

.progress-bar {
    background-color: var(--fcwu-500) !important;
    color: #ffffff !important;
}

.tooltip-inner {
    background-color: var(--fcwu-600) !important;
    color: #ffffff !important;
}

/* feature tabs on the about page */
.feature-tabs .nav-link {
    color: var(--fcwu-300) !important;
}

.feature-tabs .nav-link.active h6,
.feature-tabs .nav-link.active {
    color: var(--fcwu-gold) !important;
}

.feature-tab-content p {
    color: var(--fcwu-text) !important;
}

/* hero slider dots + clients carousel */
.custom-dot.owl-theme .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot span {
    background: rgba(255, 255, 255, .35);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--fcwu-gold);
}

.single-client .client-img {
    opacity: .5;
}

/* footer bottom text */
.footer-bottom .copyright-text,
.footer-bottom a {
    color: var(--fcwu-300) !important;
}

.footer-bottom .social-list li a {
    background: var(--fcwu-700) !important;
    color: var(--fcwu-200) !important;
}

.footer-bottom .social-list li a:hover {
    background: var(--fcwu-gold) !important;
    color: #14171c !important;
}

.border-amber-400          { border-color: #e0b64f !important; }