/*
 * dark-mode.css — ImmoCastle
 *
 * TWO PURPOSES:
 *   1. LIGHT MODE  → replace all red #EE3131 (--primary) with gold #C9A84C
 *   2. DARK MODE   → dark theme (body.dark-mode class)
 *
 * Gold palette:
 *   gold:       #C9A84C
 *   gold-dark:  #A8882E
 *   gold-light: #D4B96A
 */

/* ════════════════════════════════════════════════════════════════
   PART 1 — LIGHT MODE: override red with gold (always active)
   ════════════════════════════════════════════════════════════════ */

:root {
    --primary:          #C9A84C;
    --primary-hover:    #A8882E;
    --primary-dark:     #7a5e1a;
    --secondary:        #C9A84C;
    --gradient:         linear-gradient(to right, #A8882E 0, #C9A84C 51%, #A8882E 100%);
    --gradient-sec:     linear-gradient(to right, #7a5e1a 0, #A8882E 51%, #7a5e1a 100%);
    --rgba-primary-1:   rgba(201,168,76,0.1);
    --rgba-primary-2:   rgba(201,168,76,0.2);
    --rgba-primary-3:   rgba(201,168,76,0.3);
    --rgba-primary-4:   rgba(201,168,76,0.4);
    --rgba-primary-5:   rgba(201,168,76,0.5);
    --rgba-primary-6:   rgba(201,168,76,0.6);
    --rgba-primary-7:   rgba(201,168,76,0.7);
    --rgba-primary-8:   rgba(201,168,76,0.8);
    --rgba-primary-9:   rgba(201,168,76,0.9);
    --bs-primary:       #C9A84C;
}

/* Explicit fallbacks for things that don't use var(--primary) */
.scroltop {
    background: #C9A84C !important;
    border-color: #C9A84C !important;
    box-shadow: -4px 4px 24px -10px rgba(201,168,76,.6) !important;
}
.scroltop:hover { background: #A8882E !important; }

/* ════════════════════════════════════════════════════════════════
   PART 2 — DARK MODE (body.dark-mode)
   ════════════════════════════════════════════════════════════════ */

/* Anti-flash: set before CSS loads */
html[data-theme="dark"] { background-color: #111827; }

body.dark-mode {
    background-color: #111827 !important;
    color: #E5E5E8 !important;
}

/* ── Typography ─────────────────────────────────────────────── */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .h1, body.dark-mode .h2, body.dark-mode .h3,
body.dark-mode .h4, body.dark-mode .h5, body.dark-mode .h6,
body.dark-mode .title { color: #E5E5E8 !important; }
body.dark-mode p { color: #B0B3BC; }
body.dark-mode a { color: inherit; }
body.dark-mode a:hover { color: #C9A84C; }
body.dark-mode .text-dark { color: #E5E5E8 !important; }
body.dark-mode .text-muted, body.dark-mode small { color: #8E9099 !important; }
body.dark-mode .text-primary { color: #C9A84C !important; }
body.dark-mode .text-white { color: #fff !important; }

/* ── Page wrapper ───────────────────────────────────────────── */
body.dark-mode .page-wraper,
body.dark-mode .page-content,
body.dark-mode .page-content.bg-white { background-color: #111827 !important; }

/* ── Sections ───────────────────────────────────────────────── */
body.dark-mode section,
body.dark-mode .content-inner,
body.dark-mode .content-inner-1,
body.dark-mode .content-inner-2,
body.dark-mode .content-inner-3,
body.dark-mode .content-inner-4,
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-gray { background-color: #111827 !important; }

/* ── Header ─────────────────────────────────────────────────── */
body.dark-mode .site-header,
body.dark-mode .main-bar,
body.dark-mode .main-bar-wraper,
body.dark-mode .sticky-header.is-fixed .main-bar {
    background-color: #1f2937 !important;
    box-shadow: 0 2px 24px rgba(0,0,0,.6) !important;
}
body.dark-mode .header-nav .nav > li > a,
body.dark-mode .navbar-nav > li > a { color: #D8D9DE !important; }
body.dark-mode .header-nav .nav > li > a:hover { color: #C9A84C !important; }
body.dark-mode .sub-menu,
body.dark-mode .header-nav .nav > li .sub-menu {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
}
body.dark-mode .sub-menu li a { color: #D8D9DE !important; background: transparent !important; }
body.dark-mode .sub-menu li a:hover { color: #C9A84C !important; background: #374151 !important; }

/* ── Buttons ────────────────────────────────────────────────── */
body.dark-mode .btn-primary,
body.dark-mode a.btn-primary {
    background-color: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #111111 !important;
}
body.dark-mode .btn-primary:hover, body.dark-mode a.btn-primary:hover {
    background-color: #A8882E !important;
    border-color: #A8882E !important;
}
body.dark-mode .btn-primary.light,
body.dark-mode .phone-no.light {
    background-color: rgba(201,168,76,.12) !important;
    border-color: rgba(201,168,76,.25) !important;
    color: #C9A84C !important;
}
body.dark-mode .btn-primary.light:hover,
body.dark-mode .phone-no.light:hover {
    background-color: #C9A84C !important;
    color: #111111 !important;
}
body.dark-mode .phone-no {
    background-color: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #111111 !important;
}

/* ── Banner / Hero ──────────────────────────────────────────── */
body.dark-mode .banner-one .banner-content .title,
body.dark-mode .banner-one .banner-content h1 { color: #E5E5E8 !important; }
body.dark-mode .banner-one .banner-content p { color: #A0A3AE !important; }
body.dark-mode .banner-one .trending-box {
    background-color: #2E2E2E !important;
    color: #A0A3AE !important;
    border: 1px solid #4A4A4A !important;
}
body.dark-mode .banner-one .trending-box .text-btn {
    background-color: #C9A84C !important;
    color: #111111 !important;
}

/* Slider */
body.dark-mode .banner-slider,
body.dark-mode .ic-slide-item { background-color: #333333 !important; }
body.dark-mode .ic-slide-item .silder-content {
    background: linear-gradient(to top, rgba(15,16,19,.9) 30%, rgba(15,16,19,.3) 100%) !important;
}
body.dark-mode .ic-slide-item .inner-content .car-name,
body.dark-mode .ic-slide-item .inner-content .car-type,
body.dark-mode .discover-link { color: #fff !important; }
body.dark-mode .discover-link:hover { color: #C9A84C !important; }
body.dark-mode .btn-prev, body.dark-mode .btn-next,
body.dark-mode .swiper-button-prev, body.dark-mode .swiper-button-next {
    background-color: rgba(201,168,76,.15) !important;
    color: #C9A84C !important;
    border-color: rgba(201,168,76,.3) !important;
}
body.dark-mode .btn-prev:hover, body.dark-mode .btn-next:hover {
    background-color: #C9A84C !important;
    color: #111111 !important;
}
body.dark-mode .swiper-pagination-bullet { background: #3A3D48 !important; }
body.dark-mode .swiper-pagination-bullet-active { background: #C9A84C !important; }

/* ── ic-bnr-inr / breadcrumb bar ────────────────────────────── */
body.dark-mode .ic-bnr-inr,
body.dark-mode .ic-bnr-inr-1,
body.dark-mode .dz-bnr-inr {
    background-color: #333333 !important;
    border-bottom: 1px solid #444444 !important;
}
body.dark-mode .breadcrumb { background: transparent !important; }
body.dark-mode .breadcrumb-item a { color: #8E9099 !important; }
body.dark-mode .breadcrumb-item.active { color: #C9A84C !important; }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #8E9099 !important; }

/* ── icon-bx-wraper (About / service cards) ─────────────────── */
body.dark-mode .icon-bx-wraper.style-1 {
    background-color: #1f2937 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.5) !important;
    border: 1px solid #374151 !important;
}
body.dark-mode .icon-bx-wraper.style-1 .title,
body.dark-mode .icon-bx-wraper.style-1 p { color: #D8D9DE !important; }

/* ── car-list-box (offer/listing cards) ─────────────────────── */
body.dark-mode .car-list-box .list-info {
    background-color: #1f2937 !important;
}
body.dark-mode .car-list-box .feature-list label { color: #8E9099 !important; }
body.dark-mode .car-list-box .feature-list .value,
body.dark-mode .car-list-box .car-type { color: #D8D9DE !important; }
body.dark-mode .car-list-box .list-info .title a { color: #E5E5E8 !important; }

/* ── ic-card (blog cards) ───────────────────────────────────── */
body.dark-mode .ic-card,
body.dark-mode .ic-card.blog-half {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}
body.dark-mode .ic-card .ic-info { background-color: #1f2937 !important; }
body.dark-mode .ic-card .ic-title a { color: #E5E5E8 !important; }
body.dark-mode .ic-card .ic-title a:hover { color: #C9A84C !important; }
body.dark-mode .ic-card .ic-meta ul li { color: #8E9099 !important; }

/* ── Widget / sidebar ───────────────────────────────────────── */
body.dark-mode .widget.style-1 {
    background-color: #1f2937 !important;
    box-shadow: 0 0 40px rgba(0,0,0,.5) !important;
    border-bottom-color: #C9A84C !important;
}
body.dark-mode .widget-title .title { color: #E5E5E8 !important; }
body.dark-mode .widget_categories ul li a { color: #B0B3BC !important; }
body.dark-mode .widget_categories ul li a:hover { color: #C9A84C !important; }
body.dark-mode .recent-posts-entry .widget-post .title a { color: #E5E5E8 !important; }
body.dark-mode .recent-posts-entry .widget-post .title a:hover { color: #C9A84C !important; }

/* ── Offer sidebar: icon-bx-wraper.style-1 + contact form ───── */
body.dark-mode .car-dl-info.icon-bx-wraper.style-1 {
    background-color: #1f2937 !important;
}
body.dark-mode .contact-area2 {
    background-color: #1f2937 !important;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #374151 !important;
}
body.dark-mode .contact-area2 .title { color: #E5E5E8 !important; }
body.dark-mode .contact-area2 p { color: #8E9099 !important; }
body.dark-mode .contact-area2 label { color: #B0B3BC !important; }

/* ── Forms ──────────────────────────────────────────────────── */
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #3A3A3A !important;
    border-color: #505050 !important;
    color: #E5E5E8 !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #5A5D6E !important; }
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: #3A3A3A !important;
    border-color: #C9A84C !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,.18) !important;
    color: #E5E5E8 !important;
    outline: none !important;
}
body.dark-mode label { color: #B0B3BC !important; }

/* ── Nav tabs (offer page feature tabs) ─────────────────────── */
body.dark-mode .nav-tabs,
body.dark-mode .nav-tabs-top { background-color: #1f2937 !important; border-color: #374151 !important; }
body.dark-mode .nav-tabs .nav-link { color: #8E9099 !important; border-color: #374151 !important; }
body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-link:hover { color: #C9A84C !important; border-color: #C9A84C !important; }

/* Characteristic content areas */
body.dark-mode .tab-content,
body.dark-mode .tab-pane { background-color: #1f2937 !important; border-color: #374151 !important; color: #D8D9DE !important; }
body.dark-mode .tab-pane h3, body.dark-mode .tab-pane h4,
body.dark-mode .tab-pane h5, body.dark-mode .tab-pane p { color: #D8D9DE !important; }

/* ── Price display ──────────────────────────────────────────── */
body.dark-mode .text-danger { color: #C9A84C !important; }
body.dark-mode .text-success { color: #4ecb71 !important; }
body.dark-mode del, body.dark-mode s { color: #5A5D6E !important; }

/* ── Pagination ─────────────────────────────────────────────── */
body.dark-mode .page-link {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #D8D9DE !important;
}
body.dark-mode .page-item.active .page-link {
    background-color: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #111111 !important;
}
body.dark-mode .page-link:hover {
    background-color: #374151 !important;
    color: #C9A84C !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
body.dark-mode .site-footer,
body.dark-mode .footer-top { background-color: #111827 !important; }
body.dark-mode .footer-bottom {
    background-color: #0b0f19 !important;
    border-top: 1px solid #374151 !important;
}
body.dark-mode .site-footer .widget .title,
body.dark-mode .site-footer h5.title { color: #C9A84C !important; }
body.dark-mode .site-footer p,
body.dark-mode .site-footer ul li,
body.dark-mode .site-footer a { color: #8E9099 !important; }
body.dark-mode .site-footer a:hover { color: #C9A84C !important; }
body.dark-mode .footer-bottom p,
body.dark-mode .footer-bottom span,
body.dark-mode .footer-bottom a { color: #9ca3af !important; }

/* Social icons */
body.dark-mode .social-list a { color: #8E9099 !important; }
body.dark-mode .social-list a:hover { color: #C9A84C !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
body.dark-mode .alert-success { background: rgba(78,203,113,.1) !important; border-color: rgba(78,203,113,.25) !important; color: #4ecb71 !important; }
body.dark-mode .alert-danger  { background: rgba(255,100,100,.1) !important; border-color: rgba(255,100,100,.25) !important; color: #ff6464 !important; }
body.dark-mode .alert-info    { background: rgba(201,168,76,.1) !important; border-color: rgba(201,168,76,.25) !important; color: #C9A84C !important; }

/* ── Scrollbar ───────────────────────────────────────────────── */
body.dark-mode ::-webkit-scrollbar { width: 6px; }
body.dark-mode ::-webkit-scrollbar-track { background: #111827; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #505050; border-radius: 3px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #C9A84C; }

/* ── Scroltop in dark mode ──────────────────────────────────── */
body.dark-mode .scroltop {
    background: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #111111 !important;
    box-shadow: -4px 4px 24px -10px rgba(201,168,76,.6) !important;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
   z-index 998 = just below scroltop (z-index 999)
   Positioned left so it never overlaps the scroltop (right)
   ════════════════════════════════════════════════════════════════ */
#darkModeToggle {
    position: fixed;
    bottom: 15px;         /* same vertical as scroltop */
    right: 75px;          /* scroltop is right:15px + 50px wide = 65px, add 10px gap */
    z-index: 998;         /* below scroltop z-index:999 */
    width: 50px;
    height: 50px;
    border-radius: 4px;   /* match scroltop border-radius */
    border: 0;
    background: #C9A84C;
    color: #111111;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -4px 4px 24px -10px rgba(201,168,76,.6);
    transition: background .3s ease, transform .2s ease;
    line-height: 1;
}
body:not(.dark-mode) #darkModeToggle {
    background: #C9A84C;
    color: #fff;
}
#darkModeToggle:hover {
    background: #A8882E !important;
    transform: scale(1.08);
}

/* Ensure icon is visible */
#darkModeToggle i,
#darkModeToggle svg { pointer-events: none; display: block; }

/* ════════════════════════════════════════════════════════════════
   ADDITIONAL DARK MODE FIXES (targeted selectors)
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Section headings — force white in dark mode ─────────── */
/* These were black because .title has color:#000 hardcoded */
body.dark-mode .section-head h1, body.dark-mode .section-head h2,
body.dark-mode .section-head h3, body.dark-mode .section-head h4,
body.dark-mode .section-head h5, body.dark-mode .section-head h6,
body.dark-mode .section-head .h1, body.dark-mode .section-head .h2,
body.dark-mode .section-head .h3, body.dark-mode .section-head .h4 {
    color: #E5E5E8 !important;
}
body.dark-mode .section-head p { color: #A0A3AE !important; }
body.dark-mode .section-head .sub-title.style-1 { color: #8E9099 !important; }

/* ic-post-title (project description heading) */
body.dark-mode .ic-post-title .post-title,
body.dark-mode .ic-post-title h3,
body.dark-mode .ic-post-title p { color: #D8D9DE !important; }
body.dark-mode .ic-post-title .sub-title { color: #8E9099 !important; }

/* Serving-slider / features-box content area */
body.dark-mode .features-box .section-head h2,
body.dark-mode .content-box .section-head h2,
body.dark-mode .content-box .section-head h6,
body.dark-mode .content-box p { color: #D8D9DE !important; }

/* About section right-column text */
body.dark-mode .about-bx1 p,
body.dark-mode .about-bx1 .section-head p { color: #A0A3AE !important; }
body.dark-mode .about-bx1 .section-head h2 { color: #E5E5E8 !important; }
body.dark-mode .about-bx1 .section-head h6.text-primary { color: #C9A84C !important; }

/* ── 2. Nav tabs style-1 dark mode fix ──────────────────────── */
/* Tab bar background → dark surface */
body.dark-mode .nav-tabs.style-1 {
    background-color: #1f2937 !important;
}
/* Inactive tab label */
body.dark-mode .nav-tabs.style-1 .nav-link {
    color: #8E9099 !important;
    background-color: transparent !important;
}
/* Active tab → gold background, dark text */
body.dark-mode .nav-tabs.style-1 .nav-link.active {
    background-color: #C9A84C !important;
    color: #111111 !important;
}
/* Hover non-active */
body.dark-mode .nav-tabs.style-1 .nav-link:hover:not(.active) {
    color: #E5E5E8 !important;
    background-color: #374151 !important;
}

/* ── 3. tab-content / bx-style-1 container ──────────────────── */
body.dark-mode .icon-bx-wraper.bx-style-1 {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .icon-bx-wraper.bx-style-1 h4 { color: #E5E5E8 !important; }

/* ── 4. table-dl rows (Typologies / features list) ─────────── */
/* Default is bg:#f3f3f3 — swap to dark surface, text white */
body.dark-mode .table-dl li div {
    background: #1f2937 !important;
    border-bottom-color: #111827 !important;
    color: #D8D9DE !important;
}
/* leftview (F4, F5, Suite parentale…) — bright gold label */
body.dark-mode .table-dl li .leftview {
    color: #C9A84C !important;
    font-weight: 600;
    background: #1f2937 !important;
}
/* rightview (checkmark column) */
body.dark-mode .table-dl li .rightview {
    background: #111827 !important;
    color: #4ecb71 !important;
}
/* Alternating rows for readability */
body.dark-mode .table-dl li:nth-child(even) div {
    background: #2d3748 !important;
}
body.dark-mode .table-dl li:nth-child(even) .leftview {
    background: #2d3748 !important;
}

/* ── 5. car-list-box title (was black in screenshot 1) ──────── */
body.dark-mode .car-list-box .list-info .title,
body.dark-mode .car-list-box .list-info .title a,
body.dark-mode .car-list-box .list-info h4 { color: #E5E5E8 !important; }
body.dark-mode .car-list-box .list-info .title a .char:after,
body.dark-mode .car-list-box .list-info .title a .char:before { color: #E5E5E8 !important; }
body.dark-mode .car-list-box .list-info .title a:hover .char:before { color: #C9A84C !important; }

/* ── Gallery: uniform image size ───────────────────────────────────────── */
/* Main slider */
.sync1 .swiper-slide .ic-thum-bx,
.product-gallery .sync1 .ic-thum-bx {
    height: 460px;
    overflow: hidden;
    border-radius: 24px;
}
.sync1 .swiper-slide .ic-thum-bx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumbnail strip */
.sync2 .swiper-slide .ic-media,
.thumb-slider .swiper-slide .ic-media {
    height: 90px;
    overflow: hidden;
    border-radius: 8px;
}
.sync2 .swiper-slide .ic-media img,
.thumb-slider .swiper-slide .ic-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Offer gallery (uses same classes) */
.product-gallery .swiper-slide .ic-thum-bx {
    height: 460px;
}

@media (max-width: 767px) {
    .sync1 .swiper-slide .ic-thum-bx,
    .product-gallery .sync1 .ic-thum-bx {
        height: 260px;
    }
    .sync2 .swiper-slide .ic-media,
    .thumb-slider .swiper-slide .ic-media {
        height: 65px;
    }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE MENU FIXES v2 — dark bg + centered logo + close button
   ════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 991px) {

  /* 1. Full-width dark background */
  .mo-left .header-nav.show {
    width: 100vw !important;
    left: 0 !important;
    background-color: #1a1a1a !important;
  }

  /* 2. Center the logo */
  .mo-left .header-nav .logo-header {
    text-align: center !important;
    padding: 30px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .mo-left .header-nav .logo-header img {
    display: inline-block !important;
    margin: 0 auto !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  /* 3. Center nav items + light text for dark bg */
  .mo-left .header-nav .nav > li,
  .mo-left .header-nav .nav > li > a {
    text-align: center !important;
    justify-content: center !important;
    color: #E5E5E8 !important;
  }

  /* 4. Close (X) button — float inside the menu, top-right */
.mo-left .navbar-toggler.open {
    position: fixed !important;
    top: 18px !important;
    right: 15px !important;        /* was 20px */
    z-index: 9999 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 8px !important;     /* add padding so spans don't clip */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
  }
  /* Turn hamburger spans into an X */
 .mo-left .navbar-toggler.open span {
    background: #C9A84C !important;
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    transition: all 0.3s ease !important;
  }
  .mo-left .navbar-toggler.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .mo-left .navbar-toggler.open span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .mo-left .navbar-toggler.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}