:root {
    --main-color: #C1002F;
    --main-font-color: #000000;
    --main-bg-color: #F0EFF0;
    --secondary-bg-color: #CCCACB;
    --error-color: #F23702;
    --base-color: #fff;
    --primario-Black: #000;
    --primario-Green: #C1002F;
    /* Overriding Green variable name to Red */
    --primario-blanco: #FFF;
    --secundario-gris-f-4-f-5-f-7: #F4F5F7;
    --secundario-grey-4-c-4-c-4-c: #4C4C4C;
}

/* Header overrides */
.header-2024 .main-header {
    background: #FFF;
}

.header-2024 .sticky-top-bar {
    background: #FFF;
    /* Changed to White */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    /* Add shadow for better visibility */
    display: none;
    /* Hidden by default */
}

/* Show Sticky Bar when Header is Sticky */
.header-2024.sticky .sticky-top-bar {
    display: block;
}

/* Hide Main Header when Header is Sticky */
.header-2024.sticky .main-header {
    display: none;
}

/* Sticky Header Layout */
.header-2024 .sticky-top-bar .top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.header-2024 .sticky-top-bar .main-logo img {
    height: 40px;
    /* Adjust logo size */
    width: auto;
}

.header-2024 .cta-button {
    background: #C1002F !important;
    color: #FFF !important;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block !important;
    /* Force visibility */
    opacity: 1 !important;
    visibility: visible !important;
}

.header-2024 .cta-button:hover {
    background: #A0002A;
}

.header-2024 .alert-text {
    color: #C1002F;
}

/* Footer overrides */
footer {
    background-color: #000;
    color: #FFF;
}

footer .legal-text p {
    color: #666666;
}

footer .legal-text p strong {
    color: #666666;
}

footer p,
footer p>span,
footer a {
    color: #FFF;
}

footer a:hover,
footer button.btn-link:hover {
    color: #CCCACB;
}

/* Car Component Overrides */
.car {
    background: #F4F5F7;
    box-shadow: 0px 0px 7px 0px rgba(184, 176, 177, 0.50);
}

.car h3 {
    color: #000;
}

.car h4 {
    color: #4C4C4C;
}

.car .price-container .text {
    color: #000;
}

.car .price-container .text strong {
    color: #000;
}

.car .price-container .text span {
    color: #000;
}

.car .car-button {
    background: #C1002F !important;
    color: #FFEFF2 !important;
    border-radius: 3px !important;
}

.car .car-button:hover {
    opacity: 0.5;
    background: #C1002F !important;
}

.car .label-ahorro {
    background: #FFEFF2 !important;
    color: #C1002F;
    border-radius: 0px 0px 16px 0px;
}

.car .label-ahorro span {
    color: #C1002F;
}

.car .bottom span {
    color: #000;
}

.car-feature {
    color: #000;
}

/* Modal Overrides */
.modal h4 {
    color: #000;
}

#model-info-modal .modal-title,
.modal-content.has-form-padding .modal-title,
.modal:has(.form-content:not([style*="display: none"])) .modal-title {
    color: #000 !important;
}

.modal form button.btn-default {
    background: #C1002F;
    /* Keep orange or change to Red? Generic seems to use Orange for form buttons even in Nissan? */
}

/* If Nissan uses Red for form buttons: */
/* .modal form button.btn-default { background: #C1002F; } */

/* Below Banner Overrides */
.below-banner {
    background: #C1002F;
    /* Or maybe white? generic said #4C4C4C. Nissan usually uses Red strip or White strip */
}

.units-counter {
    color: #FFF;
    /* Assuming if background is Red, text is White */
}

.alert-text {
    color: #FFF;
}

/* General Color Replacements for #4C4C4C (Green) to #000 (Black) or #C1002F (Red) */
h2,
h3,
h4 {
    color: #000;
}

/* Map Overrides */
.header-info p {
    color: #C1002F !important;
    /* Was Green */
}

.dealer-item.active {
    border: 2px solid #C1002F !important;
}

.leaflet-container a {
    color: #C1002F !important;
}

.dealer-item.active h3,
.dealer-item h3 {
    color: #000;
    /* Was Green */
}

.dealer-item p,
.dealer-item.active p {
    color: #4C4C4C;
    /* Was Green or Dark Green */
}

/* Specific Button Overrides */
/* "Solicitar Prueba" button - typically uses .btn-default or similar */
/* Targeting the specific button by attributes if possible, or generic class override if safe */
button.btn-default[data-bs-target="#modal"] {
    background: #C1002F;
    color: #FFF;
}

button.btn-default[data-bs-target="#modal"]:hover {
    background: #A0002A;
}

/* Thank You Page specific */
body.thankyou .header-2024 .main-header {
    background: #FFF;
}

body.thankyou footer {
    background-color: #000;
}

/* Swiper Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
    color: #C1002F !important;
    background: #FFEFF2 !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    color: #C1002F !important;
}