/* =====================================================
   Le Car Centre – colour scheme overrides
   Primary blue:  #1a3c6e  (dark navy)
   Hover blue:    #122a4f  (deeper navy)
   Accent blue:   #1e5fac  (mid blue for search/buttons)
   ===================================================== */

/* Navigation bar */
.cs-nav1, .cs-nav1 a, .cs-nav1 .rzc-main-menu ul li a,
.cs-nav2, .cs-nav2 a, .cs-nav2 .rzc-main-menu ul li a, .template-8 .js-last-nav-item,
.cs-nav3, .cs-nav3 a,
.cs-nav3 .rzc-main-menu ul li a,
.cs-nav1-alt, .cs-nav1-alt a, .cs-nav1-alt .rzc-main-menu ul li a {
    background: #1a3c6e !important;
    color: #fff !important;
}

/* Nav hover / active states */
.cs-nav1 .rzc-main-menu ul li:hover a, .cs-nav1 .rzc-main-menu ul li.is-active a, .cs-nav1 .rzc-main-menu ul li:hover li a,
.cs-nav2 .rzc-main-menu ul li:hover a, .cs-nav2 .rzc-main-menu ul li.is-active a, .cs-nav2 .rzc-main-menu ul li:hover li a,
.cs-nav3 .rzc-main-menu ul li:hover a, .cs-nav3 .rzc-main-menu ul li.is-active a, .cs-nav3 .rzc-main-menu ul li:hover li a,
.cs-nav1-alt .rzc-main-menu ul li:hover a, .cs-nav1-alt .rzc-main-menu ul li.is-active a, .cs-nav1-alt .rzc-main-menu ul li:hover li a,
.template-2 .cs-nav1 .rzc-main-menu ul li:hover a, .template-2 .cs-nav1 .rzc-main-menu ul li.is-active a, .template-2 .cs-nav1 .rzc-main-menu ul li:hover li a {
    background: #122a4f !important;
    color: #fff !important;
}

/* Search bar background */
.cs-search,
.cs-search .panel,
.template-2 .cs-search .panel,
.template-3 .cs-search .panel,
.template-4 .cs-search .panel {
    background: #1a3c6e !important;
    color: #fff !important;
}

/* Search bar label / text */
.cs-search label,
.cs-search h2,
.cs-search .error-message {
    color: #fff !important;
}

/* Search bar triangle decoration */
.home.is-desktop .rzc-advanced-search .search-bottom-decoration {
    border-top: 40px solid #1a3c6e !important;
}

/* Search bar buttons */
.cs-search .btn {
    background: #1e5fac !important;
    color: #fff !important;
}
.cs-search .btn:hover, .cs-search .btn:active {
    background: #122a4f !important;
    color: #fff !important;
}

/* Tertiary buttons (e.g. BOOK AN MOT, BOOK A REPAIR) */
.btn--tertiary, .btn--tertiary:visited, .btn--tertiary:focus {
    background-color: #1a3c6e !important;
    color: #fff !important;
}
.btn--tertiary:hover, .btn--tertiary:active {
    background-color: #122a4f !important;
    color: #fff !important;
}

/* Primary buttons */
.btn--wrap a, .btn--wrap a:visited,
.btn--primary, .btn--primary:focus, .btn--primary:visited,
.btn--primary-with-no-hover-state, .btn--primary-with-no-hover-state:hover, .btn--primary-with-no-hover-state:active,
.rzc-link-button.finance a, .rzc-link-button.finance a:visited {
    background-color: #1e5fac !important;
    color: #fff !important;
}
.btn--primary.is-not-active-link:hover {
    background-color: #1e5fac !important;
    color: #fff !important;
}
.btn--wrap a:hover, .btn--primary:hover, .rzc-link-button.finance a:hover {
    background-color: #122a4f !important;
    color: #fff !important;
}
.btn--wrap a:active, .btn--primary:active, .rzc-link-button.finance a:active {
    background-color: #122a4f !important;
}

/* Secondary button accent underline */
a.btn--secondary, a.btn--secondary:visited, .btn--secondary, .btn--secondary:focus, .btn--secondary:visited {
    box-shadow: inset 0 -5px 0 #1a3c6e !important;
}
.btn--secondary:hover, a.btn--secondary:hover {
    background-color: #1a3c6e !important;
    color: #fff !important;
    box-shadow: inset 0 -55px 0 #1a3c6e !important;
}

/* Summary icons / advert bullet colour */
.rzc-advert--summary :before {
    color: #1a3c6e !important;
}

/* Sort/stock colour accents */
.sort-asc-desc:before, .stock-no strong {
    color: #1a3c6e !important;
}

/* Hover accent on stock items */
.js-stock-item-hover .stocklistAdvert__hover.stocklistAdvert--hover__wideleft {
    box-shadow: 4px 0 0 0 #1a3c6e, 4px 4px 0 0 #1a3c6e, 4px -4px 0 0 #1a3c6e, -10px -4px 0 0 #1a3c6e, -10px 4px 0 0 #1a3c6e, 0 0 10px 5px rgba(0,0,0,.1) !important;
}

/* Mobile burger icon colour */
.cs-nav1 .rzc-main-menu__burger--icon,
.cs-nav1 .rzc-main-menu__burger--icon:before,
.cs-nav1 .rzc-main-menu__burger--icon:after,
.cs-nav2 .rzc-main-menu__burger--icon,
.cs-nav2 .rzc-main-menu__burger--icon:before,
.cs-nav2 .rzc-main-menu__burger--icon:after {
    background: #fff !important;
}

/* Header - logo area white, phone strip blue */
.headercontent.cs-header,
.cs-header {
    background: #fff !important;
    color: #333 !important;
}

/* Phone number strip - blue background */
#contactDetailsTelephone4Component {
    background: #3a7bc8 !important;
}
.cs-header a, .cs-header a:visited {
    color: #fff !important;
}

/* Phone number in header - right-aligned white text */
#contactDetailsTelephone4Component {
    padding: 4px 0;
}
#contactDetailsTelephone4Component .vcard {
    text-align: right;
}
#contactDetailsTelephone4Component dd {
    font-weight: bold;
    font-size: 1em;
    color: #fff;
    display: inline-block;
}
#contactDetailsTelephone4Component a {
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
}
/* Logo header area stays dark/white */
#bannerComponent {
    background: transparent;
}

/* =====================================================
   Footer colour overrides
   ===================================================== */
.footer--top, .footer--top a, .footer--top a:visited {
    background-color: #1a3c6e !important;
    color: #fff !important;
}
.footer--middle, .footer--middle a, .footer--middle a:visited {
    background: #3a7bc8 !important;
    color: #fff !important;
}
.footer--bottom {
    background: #fff !important;
    color: #333 !important;
}
.footer--bottom a, .footer--bottom a:visited {
    color: #333 !important;
}
.footer-button {
    border: 1px #fff solid !important;
    color: #fff !important;
}
.is-mobile .footer-mobile.footer--top {
    background: #1a3c6e !important;
    color: #fff !important;
}
.is-mobile .footer-mobile.footer--middle a {
    background: transparent !important;
    color: #fff !important;
}

/* Popup overlay */
#cboxOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
#cboxOverlay.visible {
    visibility: visible;
    opacity: 1;
}
#colorbox {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: none;
    width: 810px;
    max-width: 95vw;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
#colorbox.visible {
    display: block;
}

/* =====================================================
   Page background & panel lift/shadow effect
   ===================================================== */

/* Light grey page background with subtle texture */
body, #wrapper {
    background-color: #efefef !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='multiply'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E") !important;
}

/* White panels lifted off the grey background with a soft shadow */
.panel {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px !important;
}