/**
 * Dark Mode — Comprehensive Overrides
 * Activates when browser/OS is in dark mode (prefers-color-scheme: dark).
 *
 * @package TheCarSuperstore
 */

@media (prefers-color-scheme: dark) {

    /* ===================================================
       BASE — body, headings, paragraphs, links
       =================================================== */

    body {
        background-color: var(--color-bg);
        color: var(--color-text);
    }

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

    p {
        color: var(--color-text-light);
    }

    /* All links — default + hover */
    a,
    a:visited {
        color: var(--color-text-light);
    }

    a:hover,
    a:focus {
        color: var(--color-primary-light);
    }

    hr {
        border-color: var(--color-border);
        opacity: 1;
    }

    /* Scrollbar */
    ::-webkit-scrollbar-track {
        background: var(--color-bg-lighter);
    }
    ::-webkit-scrollbar-thumb {
        background: #444;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

    /* ===================================================
       BOOTSTRAP UTILITY OVERRIDES
       =================================================== */

    .bg-white {
        background-color: var(--color-bg-light) !important;
        color: var(--color-text) !important;
    }

    .bg-light {
        background-color: var(--color-bg-lighter) !important;
    }

    .text-dark {
        color: var(--color-headings) !important;
    }

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

    .shadow-sm,
    .shadow {
        box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
    }

    .border,
    .border-top,
    .border-bottom,
    .border-start,
    .border-end {
        border-color: var(--color-border) !important;
    }

    /* List groups */
    .list-group-item {
        background-color: var(--color-bg-light);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    /* Tables */
    table th,
    table td {
        border-color: var(--color-border);
        color: var(--color-text);
    }

    /* Alerts */
    .alert-success {
        background-color: #1a3a25;
        border-color: #28a745;
        color: #75c990;
    }

    .alert-danger {
        background-color: #3a1a1a;
        border-color: #dc3545;
        color: #f08080;
    }

    /* ===================================================
       FORMS
       =================================================== */

    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    .form-control:focus,
    .form-select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-text) !important;
        box-shadow: 0 0 0 0.2rem rgba(207, 27, 36, 0.25) !important;
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--color-text-muted) !important;
        opacity: 1;
    }

    label {
        color: var(--color-text-light);
    }

    /* Bootstrap outline button */
    .btn-outline-secondary {
        color: var(--color-text-light);
        border-color: var(--color-border);
    }
    .btn-outline-secondary:hover {
        background-color: var(--color-bg-dark);
        color: var(--color-text);
        border-color: var(--color-border);
    }

    /* ===================================================
       NIKKI-BTN (main theme button)
       The default .nikki-btn uses --color-headings as bg
       which turns white in dark mode — override to dark.
       =================================================== */

    /* Generic button dark background — excludes nav/slider/carousel controls */
    button:not(.btn):not([class*="btn-"]):not([class*="spec-cta"]):not(.classy-navbar-toggler):not([class*="swiper-"]):not([class*="owl-"]):not([class*="carousel-"]):not([data-bs-slide-to]):not([data-bs-slide]) {
        background-color: var(--color-bg-lighter) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    /* Base .nikki-btn (no variant) */
    .nikki-btn:not(.nikki-btn-primary):not(.nikki-btn-secondary):not(.nikki-btn-outline):not(.nikki-btn-danger):not(.nikki-btn-success) {
        background-color: var(--color-bg-lighter) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    .nikki-btn:not(.nikki-btn-primary):not(.nikki-btn-secondary):not(.nikki-btn-outline):not(.nikki-btn-danger):not(.nikki-btn-success):hover,
    .nikki-btn:not(.nikki-btn-primary):not(.nikki-btn-secondary):not(.nikki-btn-outline):not(.nikki-btn-danger):not(.nikki-btn-success):focus,
    .nikki-btn:not(.nikki-btn-primary):not(.nikki-btn-secondary):not(.nikki-btn-outline):not(.nikki-btn-danger):not(.nikki-btn-success).active {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    /* .nikki-btn-primary keeps red in dark mode */
    .nikki-btn-primary {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    .nikki-btn-primary:hover,
    .nikki-btn-primary:focus {
        background-color: var(--color-primary-dark) !important;
        border-color: var(--color-primary-dark) !important;
        color: #ffffff !important;
    }

    /* "View All Inventory" — explicit combined-class rule */
    a.nikki-btn.nikki-btn-primary,
    .nikki-btn.nikki-btn-primary {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    /* "View Details" inside Swiper slide cards — translucent pill style */
    .car-swiper .modern-car-card .nikki-btn,
    .swiper-slide .modern-car-card .nikki-btn {
        background-color: #e2e2e233 !important;
        color: var(--color-text) !important;
        border-color: rgba(200, 200, 200, 0.2) !important;
    }

    .car-swiper .modern-car-card .nikki-btn:hover,
    .car-swiper .modern-car-card .nikki-btn:focus,
    .swiper-slide .modern-car-card .nikki-btn:hover,
    .swiper-slide .modern-car-card .nikki-btn:focus {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* ===================================================
       HEADER & NAVIGATION
       =================================================== */

    .header-area,
    .classy-nav-container,
    .classy-navbar {
        background-color: #0d0d0d !important;
    }

    /* Nav links */
    .classy-navbar .classy-menu ul li > a,
    .classy-navbar .nav-item > a {
        color: var(--color-text-light) !important;
    }

    .classy-navbar .classy-menu ul li > a:hover,
    .classy-navbar .nav-item > a:hover {
        color: var(--color-primary-light) !important;
    }

    /* Dropdown menus */
    .dropdown-menu,
    .classy-menu .dropdown-menu {
        background-color: #1a1a1a !important;
        border-color: var(--color-border) !important;
    }

    .dropdown-item {
        color: var(--color-text-light) !important;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--color-bg-lighter) !important;
        color: var(--color-primary-light) !important;
    }

    /* Mobile nav */
    .classy-navbar-toggler .navbarToggler span {
        background-color: var(--color-text) !important;
    }

    /* ===================================================
       BREADCRUMB
       =================================================== */

    .breadcrumb-area {
        background-color: var(--color-bg-lighter);
    }

    .breadcrumb-area .breadcrumb-content h2,
    .breadcrumb-area .breadcrumb-content h3 {
        color: var(--color-headings);
    }

    .breadcrumb-area .breadcrumb-content ol li,
    .breadcrumb-area .breadcrumb-content ol li a {
        color: var(--color-text-lighter) !important;
    }

    /* ===================================================
       SECTION HEADING
       =================================================== */

    .section-heading h2,
    .section-heading h3 {
        color: var(--color-headings);
    }

    .section-heading p {
        color: var(--color-text-lighter);
    }

    .section-heading::after,
    .section-heading .line {
        background-color: var(--color-primary);
    }

    /* ===================================================
       CONTAINERS & CARDS
       =================================================== */

    .container-fluid.bg-white,
    .container.bg-white,
    .row .bg-white,
    div.bg-white {
        background-color: var(--color-bg-light) !important;
    }

    .card {
        background-color: var(--color-bg-light);
        border-color: var(--color-border);
    }

    .card-body,
    .card-header {
        background-color: var(--color-bg-light);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    /* card-footer WITHOUT bg-dark — bg-dark keeps Bootstrap's #212529 */
    .card-footer:not(.bg-dark):not(.bg-success):not(.bg-primary) {
        background-color: var(--color-bg-light);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    /* hover-card — "View Vehicle Details" (bg-dark) */
    .card-footer.bg-dark.hover-card {
        background-color: #e2e2e233 !important;
        color: var(--color-text) !important;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .card-footer.bg-dark.hover-card:hover,
    a:hover .card-footer.bg-dark.hover-card,
    a:focus .card-footer.bg-dark.hover-card {
        background-color: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
    }

    /* hover-card — "WhatsApp" (bg-success) */
    .card-footer.bg-success.hover-card {
        background-color: rgba(37, 211, 102, 0.25) !important;
        color: #4ade80 !important;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .card-footer.bg-success.hover-card:hover,
    a:hover .card-footer.bg-success.hover-card,
    a:focus .card-footer.bg-success.hover-card {
        background-color: rgba(37, 211, 102, 0.4) !important;
        color: #ffffff !important;
    }

    /* ===================================================
       SIDEBAR
       The widget title bar uses --color-headings as bg
       which turns WHITE in dark mode — fix it.
       =================================================== */

    .single-widget-area .widget-title {
        background-color: #1e1e1e !important;
        border: 1px solid var(--color-border);
    }

    .single-widget-area .widget-title h6 {
        color: var(--color-text) !important;
    }

    /* Category links */
    .single-widget-area .nikki-catagories li a span {
        color: var(--color-text-light) !important;
    }

    .single-widget-area .nikki-catagories li a:hover span,
    .single-widget-area .nikki-catagories li a:focus span {
        color: var(--color-primary-light) !important;
    }

    .single-widget-area .nikki-catagories li {
        border-bottom: 1px solid var(--color-border);
    }

    /* Archive links */
    .single-widget-area .nikki-archives li a {
        color: var(--color-text-light) !important;
    }

    .single-widget-area .nikki-archives li a:hover {
        color: var(--color-primary-light) !important;
    }

    .single-widget-area .nikki-archives li {
        border-bottom: 1px solid var(--color-border);
    }

    /* Popular tags */
    .single-widget-area .popular-tags li a,
    .popular-tags a {
        color: var(--color-text-light) !important;
        border-color: var(--color-border) !important;
    }

    .single-widget-area .popular-tags li a:hover {
        color: var(--color-primary-light) !important;
        border-color: var(--color-primary-light) !important;
    }

    /* Latest posts in sidebar */
    .single-widget-area .single-latest-post .post-content .post-title h6 {
        color: var(--color-headings) !important;
    }

    .single-widget-area .single-latest-post .post-content .post-author {
        color: var(--color-text-lighter) !important;
    }

    /* Newsletter / search inputs in sidebar */
    .single-widget-area .newsletter-content form input,
    .single-widget-area .search-form input {
        background-color: var(--color-bg-lighter) !important;
        color: var(--color-text) !important;
    }

    /* ===================================================
       BLOG / ARCHIVE PAGE
       =================================================== */

    .blog-content-area {
        background-color: var(--color-bg);
    }

    .single-blog-post .post-content .post-title h4 {
        color: var(--color-headings) !important;
    }

    .single-blog-post .post-content .post-title h4:hover {
        color: var(--color-primary-light) !important;
    }

    .single-blog-post .post-content .post-excerpt {
        color: var(--color-text-lighter) !important;
    }

    /* Blog pager */
    .nikki-pager li a {
        color: var(--color-text-light) !important;
    }

    .nikki-pager li a:hover {
        color: var(--color-primary-light) !important;
    }

    /* Comment area — hardcoded #191919 in blog.css */
    .comment_area .single_comment_area .comment-wrapper .comment-content a {
        color: var(--color-text-light) !important;
        border-color: var(--color-border) !important;
    }

    .comment_area .single_comment_area .comment-wrapper .comment-content a:hover {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-text-light) !important;
        color: var(--color-text) !important;
    }

    .comment_area .single_comment_area .comment-wrapper .comment-content h5 {
        color: var(--color-headings) !important;
    }

    .comment_area .single_comment_area .comment-wrapper .comment-content p {
        color: var(--color-text-light) !important;
    }

    /* Leave comment form — hardcoded in blog.css */
    .leave-comment-area {
        border-top-color: var(--color-border) !important;
    }

    .leave-comment-area h4 {
        color: var(--color-headings) !important;
    }

    .leave-comment-area form .form-control {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    /* ===================================================
       CONTACT PAGE
       =================================================== */

    .contact-area {
        background-color: var(--color-bg);
    }

    .contact-content h4 {
        color: var(--color-headings) !important;
    }

    .contact-content p {
        color: var(--color-text-light) !important;
    }

    .contact-link h6 {
        color: var(--color-text-light) !important;
    }

    .single-contact-info {
        border-color: var(--color-border);
    }

    /* Opening hours table */
    .tcs-hours-table td {
        color: var(--color-text-light) !important;
    }

    /* Google Maps — invert in dark mode */
    .map-area iframe {
        filter: invert(90%) hue-rotate(180deg);
        opacity: 0.85;
    }

    /* ===================================================
       SINGLE CAR (spec card)
       =================================================== */

    .modern-car-card {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    /* TCS logo header */
    .modern-car-card .card-header.bg-white {
        background-color: var(--color-bg-light) !important;
        border-bottom-color: var(--color-border) !important;
    }

    /* Price header */
    .modern-car-card .card-header.bg-gradient {
        background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%) !important;
    }

    .modern-car-card .car-price {
        color: var(--color-headings) !important;
    }

    /* "Only 1 available" urgency bar */
    .modern-car-card .bg-light.border-bottom {
        background-color: var(--color-bg-lighter) !important;
    }

    /* Finance estimate bar */
    .modern-car-card .bg-white.border-bottom {
        background-color: var(--color-bg-lighter) !important;
    }

    /* Spec list */
    .modern-car-card .card-body {
        background-color: var(--color-bg-light) !important;
    }

    .spec-title {
        color: var(--color-headings) !important;
    }

    .modern-car-card .list-group-item {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    .modern-car-card .list-group-item span {
        color: var(--color-text) !important;
    }

    /* CTA footer */
    .modern-car-card .card-footer {
        background-color: var(--color-bg-light) !important;
        border-top-color: var(--color-border) !important;
    }

    /* Location card */
    .spec-location-card {
        background-color: var(--color-bg-lighter) !important;
        border-top-color: var(--color-border) !important;
    }

    .spec-location-title {
        color: var(--color-headings) !important;
    }

    .spec-location-row,
    .spec-location-row i {
        color: var(--color-text-light) !important;
    }

    .spec-location-link {
        color: var(--color-primary-light) !important;
    }

    .spec-location-note {
        color: var(--color-text-muted) !important;
    }

    /* ===================================================
       SINGLE CAR PAGE (full detail)
       =================================================== */

    .car-details-area {
        background-color: var(--color-bg);
    }

    .car-details-content h4,
    .car-details-content h5,
    .car-details-content h6 {
        color: var(--color-headings) !important;
    }

    .car-details-content p,
    .car-details-content li {
        color: var(--color-text-light) !important;
    }

    /* Spec table in single car */
    .car-spec-table td,
    .car-spec-table th {
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    .car-spec-table tr:nth-child(even) {
        background-color: var(--color-bg-lighter) !important;
    }

    /* ===================================================
       INVENTORY / CAR ARCHIVE (car cards)
       =================================================== */

    .car-card,
    .inventory-car-card,
    [class*="car-card"] {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    .car-card .car-title a,
    .car-card h4,
    .car-card h5 {
        color: var(--color-headings) !important;
    }

    .car-card .car-price,
    .car-card .price {
        color: var(--color-primary-light) !important;
    }

    .car-card p,
    .car-card .meta {
        color: var(--color-text-lighter) !important;
    }

    /* Filter bar */
    .car-filter-area,
    .inventory-filter,
    .filter-section {
        background-color: var(--color-bg-light) !important;
    }

    .inventory-filter .form-select,
    .inventory-filter .form-control,
    .filter-section select,
    .filter-section input {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    /* ===================================================
       HOMEPAGE SECTIONS
       =================================================== */

    .featured-cars-area,
    .our-best-offer-area,
    .nikki-featured-cars-area {
        background-color: var(--color-bg-lighter) !important;
    }

    .featured-cars-area .section-heading h2,
    .our-best-offer-area .section-heading h2 {
        color: var(--color-headings) !important;
    }

    /* ===================================================
       TESTIMONIALS
       =================================================== */

    .single-testimonial,
    .testimonial-item,
    .swiper-slide .testimonial {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    .single-testimonial p,
    .testimonial-item p {
        color: var(--color-text-light) !important;
    }

    .single-testimonial .client-name,
    .testimonial-item .client-name {
        color: var(--color-headings) !important;
    }

    /* ===================================================
       ABOUT PAGE
       =================================================== */

    .about-content h2,
    .about-content h4 {
        color: var(--color-headings) !important;
    }

    .about-content p {
        color: var(--color-text-light) !important;
    }

    /* ===================================================
       MODAL
       =================================================== */

    .modal-content {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    .modal-header {
        background-color: var(--color-bg-lighter) !important;
        border-bottom-color: var(--color-border) !important;
    }

    .modal-footer {
        background-color: var(--color-bg-lighter) !important;
        border-top-color: var(--color-border) !important;
    }

    .modal-title,
    .modal-body h4,
    .modal-body h5 {
        color: var(--color-headings) !important;
    }

    .modal-body p,
    .modal-body label {
        color: var(--color-text-light) !important;
    }

    .btn-close {
        filter: invert(1);
    }

    /* ===================================================
       PAGINATION
       =================================================== */

    .tcs-page-btn {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    .tcs-page-btn:hover,
    .tcs-page-btn.active {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    .tcs-page-ellipsis {
        color: var(--color-text-muted) !important;
    }

    /* ===================================================
       FLOATING WIDGETS
       Keep brand colors (green/blue/orange) as in light
       mode — only fix icon+label text since --color-bg
       darkens to #141414, making text nearly black.
       =================================================== */

    .floating-widget .widget-icon,
    .floating-widget .widget-label {
        color: #ffffff !important;
    }

    /* ===================================================
       CAR INQUIRY MODAL (#carInquiryModal)
       Hardcoded whites/grays in modal-inquiry.css
       =================================================== */

    .car-inquiry-modal .modal-container {
        background: var(--color-bg-light) !important;
    }

    .car-inquiry-modal .form-group label,
    .car-inquiry-modal label {
        color: var(--color-text-light) !important;
    }

    .car-inquiry-modal .form-control {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    .car-inquiry-modal .form-control:hover {
        border-color: var(--color-border) !important;
    }

    .car-inquiry-modal .form-control:focus {
        background-color: var(--color-bg-lighter) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-text) !important;
    }

    .car-inquiry-modal .btn-secondary {
        background: var(--color-bg-dark) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    .car-inquiry-modal .btn-secondary:hover {
        background: var(--color-bg-darker, #333) !important;
    }

    .car-inquiry-modal .form-actions {
        border-top-color: var(--color-border) !important;
    }

    .car-inquiry-modal .required-note {
        color: var(--color-text-light) !important;
    }

    .car-inquiry-modal .char-counter {
        color: var(--color-text-muted) !important;
    }

    .car-inquiry-modal .modal-body::-webkit-scrollbar-track {
        background: var(--color-bg-lighter) !important;
    }

    /* ===================================================
       STORAGE CONSIGN + CTA FOOTER
       Both use var(--color-headings) as background —
       becomes #f0f0f0 (near-white) in dark mode.
       Also applies to sell-consign page.
       =================================================== */

    .storage-consign,
    .storage-cta-footer {
        background-color: #1a1a1a !important;
        border-top: 1px solid var(--color-border) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }

    /* Storage FAQ — Bootstrap accordion white bg */
    .accordion-item {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text);
    }

    .accordion-button {
        background-color: var(--color-bg-light) !important;
        color: var(--color-headings) !important;
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--color-primary) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    /* Replace Bootstrap's blue focus ring with brand red */
    .accordion-button:focus {
        box-shadow: 0 0 0 0.2rem rgba(207, 27, 36, 0.3) !important;
        border-color: var(--color-primary) !important;
        outline: none !important;
    }

    /* Chevron arrow — Bootstrap default SVG is dark (#212529),
       invisible on dark bg. Override with light-colored SVG.
       storage.css sets filter:none on ::after so we can't use
       filter trick — must replace the background-image directly. */
    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c0c0c0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    }

    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
        filter: none !important;
    }

    .accordion-body {
        background-color: var(--color-bg-light) !important;
        color: var(--color-text-light) !important;
    }

    /* ===================================================
       FINANCE CALCULATOR PAGE
       var(--color-text-dark) isn't overridden in dark
       mode variables — falls to hardcoded #191919 (black).
       =================================================== */

    .carLoanCalculatorV2 .section-heading {
        color: var(--color-headings) !important;
    }

    .carLoanCalculatorV2 .lead {
        color: var(--color-text-lighter) !important;
    }

    .carLoanCalculatorV2 .form-label,
    .carLoanCalculatorV2 label.fw-bold,
    .carLoanCalculatorV2 label {
        color: var(--color-text-light) !important;
    }

    .carLoanCalculatorV2__card {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    /* Bootstrap alert-info */
    .alert-info {
        background-color: #0f2640 !important;
        border-color: #1d6fa4 !important;
        color: #8ab4d4 !important;
    }

    .alert-info strong {
        color: #aac8e8 !important;
    }

    /* ===================================================
       FINANCE CALCULATOR (generic)
       =================================================== */

    .finance-calculator,
    .loan-calculator-wrapper {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    .finance-calculator h4,
    .finance-calculator label,
    .loan-calculator-wrapper h4 {
        color: var(--color-headings) !important;
    }

    .finance-result,
    .loan-result {
        background-color: var(--color-bg-lighter) !important;
        color: var(--color-text) !important;
    }

    /* ===================================================
       404 PAGE
       =================================================== */

    .error-404-content h1,
    .error-404-content h2 {
        color: var(--color-headings) !important;
    }

    .error-404-content p {
        color: var(--color-text-light) !important;
    }

    /* ===================================================
       FOOTER (already dark — minor tweaks)
       =================================================== */

    .footer-area {
        background-color: var(--color-footer-bg) !important;
    }

    .footer-area p,
    .footer-area li,
    .footer-area span {
        color: #aaaaaa !important;
    }

    .footer-area a {
        color: #aaaaaa !important;
    }

    .footer-area a:hover {
        color: var(--color-primary-light) !important;
    }

    .footer-area h5,
    .footer-area h6 {
        color: #dddddd !important;
    }

    /* ===================================================
       HERO BANNER
       The h1 uses --color-bg-light which becomes #1e1e1e
       (near-black) in dark mode — hero is always on a dark
       video overlay so force white text.
       =================================================== */

    .hero-content-wrapper h1,
    .hero-content-wrapper h2,
    .hero-content-wrapper p,
    .luxury-hero-section h1,
    .luxury-hero-section h2 {
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }

    /* Hero button stays white-outlined on dark background */
    .hero-content-wrapper .nikki-btn {
        background-color: transparent !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }

    .hero-content-wrapper .nikki-btn:hover {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    /* ===================================================
       SWIPER / SLIDER ARROWS
       Hover was hardcoded #000 — invisible on dark bg.
       User wants no background — make them transparent
       with a subtle border instead.
       =================================================== */

    .car-swiper .swiper-button-next,
    .car-swiper .swiper-button-prev {
        background-color: rgba(207, 27, 36, 0.85) !important;
    }

    .car-swiper .swiper-button-next:hover,
    .car-swiper .swiper-button-prev:hover {
        background-color: var(--color-primary) !important;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
    }

    /* Swiper cards in dark mode — hardcoded #fff and #eee in car-slider.css */
    .car-swiper .modern-car-card {
        background-color: var(--color-bg-light) !important;
        border-color: var(--color-border) !important;
    }

    /* Swiper buttons — exclude from broad button rule above */
    .swiper-button-next,
    .swiper-button-prev {
        background-color: rgba(207, 27, 36, 0.85) !important;
        color: #ffffff !important;
        border: none !important;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: var(--color-primary) !important;
        filter: brightness(1.1);
    }

    /* Swiper pagination dots */
    .car-swiper .swiper-pagination-bullet {
        background: var(--color-border) !important;
    }

    /* ===================================================
       LISTING CTA BANNER
       Uses --color-headings as background which becomes
       #f0f0f0 (light gray) in dark mode — keep it dark.
       =================================================== */

    .listing-cta-inner {
        background-color: #1a1a1a !important;
        border: 1px solid var(--color-border) !important;
    }

    /* The red accent line on left stays as-is (var(--color-primary)) */

    .listing-cta-heading {
        color: #ffffff !important;
    }

    .listing-cta-sub {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* ===================================================
       BOOTSTRAP CAROUSEL (inside car cards)
       =================================================== */

    /* Arrow buttons — remove black bg, keep icon visible */
    .carousel-control-prev,
    .carousel-control-next {
        background: transparent !important;
        background-color: transparent !important;
        opacity: 1;
        width: 36px !important;
    }

    /* Replace white SVG arrows with red-tinted ones */
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e85a63'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
        width: 20px !important;
        height: 20px !important;
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e85a63'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
        width: 20px !important;
        height: 20px !important;
    }

    .carousel-control-prev:hover .carousel-control-prev-icon,
    .carousel-control-next:hover .carousel-control-next-icon {
        filter: drop-shadow(0 1px 3px rgba(207,27,36,0.8)) brightness(1.3);
    }

    /* Pagination indicators — same shape as light mode, only color changes */
    .carousel-indicators [data-bs-target] {
        background-color: rgba(255, 255, 255, 0.45) !important;
        opacity: 1 !important;
    }

    .carousel-indicators .active {
        background-color: var(--color-primary) !important;
        opacity: 1 !important;
    }

    /* ===================================================
       IMAGES
       =================================================== */

    img.tcs-logo {
        filter: brightness(0.9);
    }

    /* ===================================================
       MAKE ICONS
       Icons uploaded via admin. If no dark variant was
       uploaded, `make-icon--no-dark` is set on the <img>
       and we invert it to white (works for monochrome
       dark-on-transparent logos like BMW, Toyota, etc.).
       If the logo is colourful, upload a specific dark
       icon in the admin to skip this filter.
       =================================================== */


}