/* ============================================
   SERVICE - WHITE BLUE
============================================ */

:root {
    /* Blue Palette */
    --color-blue-50: #EFF6FF;
    --color-blue-100: #DBEAFE;
    --color-blue-200: #BFDBFE;
    --color-blue-300: #93C5FD;
    --color-blue-400: #60A5FA;
    --color-blue-500: #3B82F6;
    --color-blue-600: #2563EB;
    --color-blue-700: #1D4ED8;
    --color-blue-800: #1E40AF;
    --color-blue-900: #1E3A8A;
    --color-blue-950: #172554;
    --color-blue-975: #0D1B35;
    /* Brand Palette */
    --color-primary-darkest: var(--color-blue-975);
    --color-primary-dark: var(--color-blue-900);
    --color-primary: var(--color-blue-600);
    --color-primary-light: var(--color-blue-400);
    --color-primary-soft: var(--color-blue-50);
    --primary-foreground: #FFFFFF;
    --color-primary-alpha-20: rgba(45, 107, 228, 0.2);
    /* Accent Palette (Blue-aligned) */
    --color-accent: #3B82F6;
    --color-accent-hover: #1D4ED8;
    /* Neutral Scale */
    --clr-neutral-100: #FFFFFF;
    --clr-neutral-150: #F8FAFC;
    --clr-neutral-175: #F1F5F9;
    --clr-neutral-200: #E2E8F0;
    --clr-neutral-300: #CBD5E1;
    --clr-neutral-500: #64748B;
    --clr-neutral-600: #475569;
    --clr-neutral-700: #334155;
    --clr-neutral-750: #1E293B;
    --clr-neutral-800: #0F172A;
    --clr-neutral-900: #020617;
    /* General UI */
    --clr-body: var(--clr-neutral-150);
    --clr-text-display: var(--clr-neutral-600);
    --clr-surface-page: var(--clr-neutral-100);
    --clr-border: var(--clr-neutral-200);
    --clr-surface-gray: #F8FAFC;
    --clr-surface-gray-dark: #1E293B;
    --clr-link: #2563EB;
    --color-white-alpha-5: rgba(255, 255, 255, 0.05);
    --color-border-white: rgba(255, 255, 255, 0.1);
    --color-yellow: #FDC700;
}

/* ============================================
   NAVBAR - MENU
============================================ */
.menu-container {
    background-color: var(--color-primary-dark);
}

.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
    color: var(--clr-neutral-150) !important;
}


.nav.navbar-nav > li.menu-cta-item > a.menu-cta-link.menu-cta-link {
    border-color: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    color: var(--clr-neutral-100) !important;
}

    .nav.navbar-nav > li.menu-cta-item > a.menu-cta-link.menu-cta-link:hover,
    .nav.navbar-nav > li.menu-cta-item > a.menu-cta-link.menu-cta-link:active,
    .nav.navbar-nav > li.menu-cta-item > a.menu-cta-link.menu-cta-link:focus {
        border-color: hsl(var(--color-primary)) !important;
        background-color: hsl(var(--color-primary)) !important;
        color: var(--clr-neutral-100) !important;
    }

.navbar-default {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);

}


    .navbar-default > li:hover {
        color: rgb(var(--primary-foreground));
        background-color: rgba(var(--primary-foreground), 0.1);
    }

    .navbar-default .navbar-brand {
        color: var(--clr-text-display);
    }

    /* Base text color */
    .navbar-default .navbar-brand,
    .navbar-default .navbar-nav > li > a {
        color: #fff;
    }

        /* Dropdown toggle hover */
        .navbar-default .navbar-nav > li > a.menu-heading.dropdown-toggle:hover {
            color: #fff;
        }

    /* Menu heading interaction states */
    .navbar-default a.menu-heading:hover,
    .navbar-default a.menu-heading:focus,
    .navbar-default a.menu-heading:active {
        color: #fff;
        background-color: #ffffff1a !important;
    }

    /* Nav link hover + focus */
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
        color: #fff;
        background-color: #ffffff1a !important;
    }

    /* Direct li hover */
    .navbar-default > li:hover {
        color: #fff;
        background-color: #ffffff1a !important;
    }

    /* Active state */
    .navbar-default .navbar-nav > .active > a {
        color: #fff;
        background-color: transparent;
    }

        .navbar-default .navbar-nav > .active > a:hover,
        .navbar-default .navbar-nav > .active > a:focus {
            color: #fff;
            background-color: #ffffff1a !important;
        }



    /* MOBILE */
    .navbar-default .navbar-toggle {
        border-color: #fff;
    }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #fff;
        }

@media(min-width: 768px) {
    .navbar-nav > li > .dropdown-menu {
        border-color: var(--clr-border);
    }
}

/* ============================================
   BANNER
============================================ */
.banner-layout-container {
    background-color: transparent;
}



.banner-links-bar {
    background: none;
    border-color: #ffffff60;
}

.banner-container {
    background-color: var(--color-primary-dark);
}

.banner-links-bar a,
a.banner-link {
    color: var(--clr-neutral-100);
}

.banner-link {
    color: var(--clr-neutral-100);
}

/* ============================================
   BACKGROUNDS
============================================ */
.bg-background,
.bg-background .container {
    background-color: #F0F4FB;
    background-color: var(--clr-neutral-175) !important;
}

.bg-prim,
.bg-prim .container {
    background-color: var(--color-primary-dark) !important;
    color: #fff !important;
}

    .bg-prim h2,
    .bg-prim span.eyebrow {
        color: #fff !important;
    }

/* ============================================
   TYPOGRAPHY
============================================ */
h1.accent-color1,
h2.accent-color1,
h3.accent-color1,
h4.accent-color1,
h5.accent-color1,
h6.accent-color1 {
    color: var(--clr-text-display) !important;
}
.accent-color {
    color: hsl(var(--color-accent));
}
.prim-accent-color {
    color: #005ccc;
}

h1 span {
    color: #aad0ff!important;
}

h2 {
    color: var(--color-primary-darkest);
}

span.eyebrow {
    color: var(--color-primary);
}

/* ============================================
MODEL 
============================================ */
.modal-content .modal-header.navbar-default,
.modal-content .modal-body.palette-bg2,
.modal-content .modal-footer.navbar-default {
    background-color: var(--clr-surface-page) !important;
}

/* ============================================
FORM 
============================================ */
.form-submit button[type="submit"] {
    background-color: var(--clr-primary-300);
    border-color: var(--clr-primary-300);
    color: var(--clr-neutral-100);
}

    .form-submit button[type="submit"]:hover,
    .form-submit button[type="submit"]:focus,
    .form-submit button[type="submit"]:active {
        background-color: var(--clr-primary-400);
        border-color: var(--clr-primary-400);
        color: var(--clr-neutral-100);
    }

.sub-text a {
    color: var(--clr-text-display);
}

/* ============================================
FOOTER
============================================ */
div[role="navigation"]:has(.footer-container) {
    background-color: var(--clr-surface-gray-dark);
}


div .footer-container {
    border-color: #666 !important;
    background-color: var(--clr-surface-gray-dark);
}

.footer-layout-container {
    background-color: var(--clr-surface-gray-dark);
}

.page-bottom {
    background-color: var(--clr-surface-gray-dark) !important;
}

    .page-bottom .container {
        background-color: var(--clr-surface-gray-dark);
    }

.footer-container a,
a, footer-link {
    color: #ffffff80;
}

.footer-links-heading {
    color: #fff;
}

.bottom-links a,
.bottom-links,
.bottom-links span {
    color: #ffffff80 !important;
}

/* ============================================
INVENTORY LIST - HOMEPAGE TB DELETED
============================================ */
.inv-badge {
    color: hsl(var(--color-accent)) !important;
}

.palette-bg2.inventory.inventory {
    background-color: transparent;
}

.ford-price .pricelabel.yousave,
.ford-price .yousavevalue.accent-color2 {
    color: #005ccc !important;
}

a.infinite-list-load-more {
    border-color: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    color: var(--clr-body) !important;
}

    a.infinite-list-load-more:hover,
    a.infinite-list-load-more:active,
    a.infinite-list-load-more:focus {
        border-color: #2b6cd8 !important;
        background-color: #2b6cd8 !important;
        color: var(--clr-body) !important;
    }

/* Price
*************************************/
.ford-price .inventory-price-container.palette-bg1 {
background-color: transparent !important;
}
/* title
*************************************/

.ford-title .vehicle-label a.accent-color1 {
color: var(--clr-neutral-800) !important;
}
/* card
*************************************/

.inventory-list-container .inventory-panel:has(.ford-thumbnail) {
background-color: #fff;
}


/* ============================================
THEME STYLES - QUICKLINKS
============================================ */
/* --- Variant 1: Primary Blue - white/blue --- */
.btn-prim,
.quicklinkbutton.buttoncolor-white_blue {
    background-color: var(--clr-neutral-100) !important;
    color: var(--color-primary-dark);
    border-color: var(--clr-neutral-100) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-prim:hover {
        background-color: #1e40af;
    }

    .btn-prim:active {
        background-color: #1e3a8a;
    }


/* --- Variant 3: White Button --- */
.btn-white,
.quicklinkbutton.buttoncolor-white_lightblue {
    background-color: var(--clr-neutral-100) !important;
    color: var(--color-primary-dark);
    border-color: var(--clr-neutral-100) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
    /* hover */
    .btn-white:hover,
    .quicklinkbutton.buttoncolor-white_lightblue:hover {
        background-color: var(--clr-neutral-200) !important;
        color: var(--color-primary-dark)!important;
        border-color: var(--clr-neutral-200) !important;
    }

        .quicklinkbutton.buttoncolor-white_lightblue:hover .quicklinkbutton-label {
            color: var(--color-primary-dark) !important;
        }

    /* active */
    .btn-white:active,
    .quicklinkbutton.buttoncolor-white_lightblue:active {
        background-color: var(--clr-neutral-200) !important;
        color: var(--color-primary-dark) !important;
        border-color: var(--clr-neutral-200) !important;
    }

        .quicklinkbutton.buttoncolor-white_lightblue:active .quicklinkbutton-label {
            color: var(--color-primary-dark) !important;
        }



/* =========================
Colors (separate section)
========================= */
/* Background color */
.custom-banner {
background-color: hsl(var(--color-primary-dark));
}
/* Text color */
.banner-text {
color: #ffffffcc;
}
/* Icon color */
.banner-link i,
.banner-right i {
color: #ffffffcc;
}

/* ============================================
GENERAL
============================================ */

.page-content .container,
.page-content .container-fluid {
background-color: var(--clr-surface-page);
}

body {
color: var(--clr-text-display);
}

body.main-body {
    background-color: var(--clr-surface-page);
}


/* ============================================
THEME STYLES - HERO
============================================ */
.hero-row .first-column:before {
background: linear-gradient(0deg, rgba(28, 61, 122, 0.95) 0%, rgba(28, 61, 122, 0.50) 50%, rgba(28, 61, 122, 0.15) 100%);
}

.hero-row .second-column:before {
background: linear-gradient(0deg, rgba(13, 27, 53, 0.90) 0%, rgba(13, 27, 53, 0.40) 50%, rgba(13, 27, 53, 0.10) 100%);
}

/* ===============================
THEME STYLES - BROWSE INVENTORY
================================= */
.browse-inventory-price a {
background-color: var(--clr-neutral-150);
border-color: var(--clr-neutral-200);
color: var(--color-primary-darkest);
}
.browse-inventory-price a:hover {
background-color: var(--clr-neutral-175);
}

.browse-inventory-price a::before {
    color: var(--color-primary);
}

.browse-count {
color: var(--clr-neutral-500);
}

/* ============================================
THEME STYLES - CARDS
============================================ */
.bg-prim-card-test .card {
    background-color: var(--color-white-alpha-5);
    border-color: var(--color-border-white);
}

.bg-prim-card .element-type-customhtml {
    background-color: var(--color-white-alpha-5);
    border-color: var(--color-border-white);
}

.bg-prim-card .icon-wrap {
    background-color: var(--color-primary-alpha-20);
}

    .bg-prim-card .icon-wrap i {
        color: var(--color-primary-light) !important;
    }


/* ===============================
THEME STYLES - INVENTORY SERVICE GRID
================================= */
.inv-badge {
    color: inherit;
}

.palette-bg2.inventory.inventory {
    background-color: transparent;
}

.palette-bg2.inventory-header {
    background-color: transparent;
}

.service-price .pricelabel.yousave,
.service-price .yousavevalue.accent-color2 {
    color: #005ccc !important;
}

a.infinite-list-load-more {
    border-color: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    color: var(--clr-body) !important;
}

    a.infinite-list-load-more:hover,
    a.infinite-list-load-more:active,
    a.infinite-list-load-more:focus {
        border-color: #2b6cd8 !important;
        background-color: #2b6cd8 !important;
        color: var(--clr-body) !important;
    }

/* Price
*************************************/
.service-price .inventory-price-container.palette-bg1 {
    background-color: transparent !important;
}

/* title
*************************************/

.service-title .vehicle-label a.accent-color1 {
    color: var(--clr-neutral-800) !important;
}

/* card
*************************************/

.inventory-list-container .inventory-panel:has(.service-thumbnail) {
    background-color: #fff;
}

/* footer
*************************************/
.service-menubtn .btn-default {
    background-color: #fff;
}

.service-moreinfo .btn-default {
    border-color: var(--color-primary);
    background-color: var(--color-primary-dark);
    color: var(--clr-neutral-100);
}


/* ============================================
   HOMEPAGE - Schedule test drive
============================================ */
.schedule-app-row .second-column .element-sub-heading.accent-color2,
.schedule-app-row .second-column a,
.schedule-app-row .second-column .accent-color2 {
    color: #fff !important;
}

.schedule-app-row .second-column {
    background: linear-gradient(135deg, #003270, #00224d) !important;
    color: #fff;
}


/* ============================================
THEME STYLES - MISC
============================================ */
/* Border */
.bg-bottom-border::after {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Badge */
.prim-badge {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Links */
.view-all-inventory-link {
    color: var(--clr-link);
}