/* =============================================================================
   White (light) mode overrides
   -----------------------------------------------------------------------------
   Many pages hardcode dark colors through inline styles, per-page <style>
   blocks, Bootstrap utilities (.bg-dark / .text-white) and even SVG fill
   attributes. light.css only swaps the theme file, so those hardcoded darks
   survive into white mode. Every rule here is scoped under
   html[data-theme="light"] (set by the theme switcher) so it is completely
   inert in dark mode, and uses !important + the extra specificity of the
   html[data-theme] prefix to win over inline styles and later <style> blocks.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Dark section / card wrappers -> light
   -------------------------------------------------------------------------- */
html[data-theme="light"] [style*="background:#1b1b1b"],
html[data-theme="light"] [style*="background: #1b1b1b"],
html[data-theme="light"] [style*="background:#1B1B1B"],
html[data-theme="light"] .reservation-form,
html[data-theme="light"] .vrc-showprc-prices-wrap,
html[data-theme="light"] .vrc-showprc-options-wrap,
html[data-theme="light"] .vrc-showprc-form > div[style] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Inner / secondary dark cards (the #2a2a2a sticky summary boxes) */
html[data-theme="light"] [style*="background:#2a2a2a"],
html[data-theme="light"] [style*="background: #2a2a2a"],
html[data-theme="light"] .sticky-lg-top[style*="2a2a2a"] {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* -----------------------------------------------------------------------------
   2. Text color inside those now-light containers
   (default text + Bootstrap .text-white, which ships as color:#fff!important)
   -------------------------------------------------------------------------- */
html[data-theme="light"] [style*="background:#1b1b1b"],
html[data-theme="light"] [style*="background: #1b1b1b"],
html[data-theme="light"] [style*="background:#2a2a2a"],
html[data-theme="light"] [style*="background: #2a2a2a"],
html[data-theme="light"] .reservation-form,
html[data-theme="light"] .reservation-form p,
html[data-theme="light"] .vrc-showprc-prices-wrap,
html[data-theme="light"] .vrc-showprc-options-wrap {
    color: #1b1b1b !important;
}

html[data-theme="light"] [style*="background:#1b1b1b"] .text-white,
html[data-theme="light"] [style*="background: #1b1b1b"] .text-white,
html[data-theme="light"] [style*="background:#2a2a2a"] .text-white,
html[data-theme="light"] [style*="background: #2a2a2a"] .text-white,
html[data-theme="light"] .reservation-form .text-white,
html[data-theme="light"] .vrc-showprc-prices-wrap .text-white,
html[data-theme="light"] .vrc-showprc-options-wrap .text-white,
html[data-theme="light"] .reservation-form .text-white *,
html[data-theme="light"] .vrc-showprc-prices-wrap .text-white *,
html[data-theme="light"] .vrc-showprc-options-wrap .text-white * {
    color: #1b1b1b !important;
}

/* Muted secondary text that was light-grey on dark */
html[data-theme="light"] [style*="background:#1b1b1b"] .text-muted,
html[data-theme="light"] .reservation-form .text-muted,
html[data-theme="light"] .vrc-showprc-prices-wrap .text-muted,
html[data-theme="light"] .vrc-showprc-options-wrap .text-muted {
    color: #6c757d !important;
}

/* Links inside light containers stay on the gold accent (were often white) */
html[data-theme="light"] .reservation-form a,
html[data-theme="light"] .vrc-showprc-prices-wrap a,
html[data-theme="light"] .vrc-showprc-options-wrap a,
html[data-theme="light"] [style*="background:#1b1b1b"] a:not(.button-1):not(.btn) {
    color: #b8893f !important;
}

/* -----------------------------------------------------------------------------
   3. Form controls, inputs, textareas, native selects
   -------------------------------------------------------------------------- */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .reservation-form .form-control,
html[data-theme="light"] input.form-control,
html[data-theme="light"] textarea.form-control,
html[data-theme="light"] input[style*="background:#1b1b1b"],
html[data-theme="light"] input[style*="background: #1b1b1b"],
html[data-theme="light"] .bg-dark {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1b1b1b !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Keep the gold focus / gold-bordered inputs readable */
html[data-theme="light"] .form-control.border-warning,
html[data-theme="light"] input.border-warning {
    border-color: #c49e5b !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .reservation-form .form-control:focus {
    background: #ffffff !important;
    color: #1b1b1b !important;
    border-color: #c49e5b !important;
    box-shadow: 0 0 0 0.2rem rgba(196, 158, 91, 0.25) !important;
}

/* Placeholders */
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #8a8a8a !important;
    opacity: 1;
}

/* Native select option list */
html[data-theme="light"] select.form-control option,
html[data-theme="light"] select option {
    background: #ffffff !important;
    color: #1b1b1b !important;
}

/* -----------------------------------------------------------------------------
   4. Select2 (single, multiple, dropdown, search, results)
   -------------------------------------------------------------------------- */
/* Only the dropdown popup is normalized globally; the selection box itself is
   left to the theme's flat default (see light.css) except on the reservation
   card handled in section 9. */
html[data-theme="light"] .select2-dropdown,
html[data-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="light"] .select2-search__field {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1b1b1b !important;
}

html[data-theme="light"] .select2-results__option {
    background-color: #ffffff !important;
    color: #1b1b1b !important;
}

html[data-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="light"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #c49e5b !important;
    color: #1b1b1b !important;
}

/* -----------------------------------------------------------------------------
   5. Bootstrap-style helpers & misc dark backgrounds
   -------------------------------------------------------------------------- */
html[data-theme="light"] .bg-dark {
    color: #1b1b1b !important;
}

/* Decorative concave-corner SVGs fill the page background behind card corners */
html[data-theme="light"] path[fill="#1b1b1b"],
html[data-theme="light"] path[fill="#1B1B1B"] {
    fill: #ffffff !important;
}

/* Modals that were dark */
html[data-theme="light"] .modal-content[style*="1b1b1b"],
html[data-theme="light"] .modal-content[style*="222"] {
    background: #ffffff !important;
    color: #1b1b1b !important;
}

/* Language/currency modal: body is light (#f2f2f2) so its white title is
   invisible in light mode -> make the title (and labels) dark. */
html[data-theme="light"] #langCurrencyModal .modal-title,
html[data-theme="light"] #langCurrencyModal .modal-body {
    color: #1b1b1b !important;
}

/* When the navbar becomes solid white on scroll (.nav-scroll), the language /
   currency indicators keep their .text-white and vanish -> make them dark.
   (Icons keep their inline gold colour.) */
html[data-theme="light"] .nav-scroll #lang_currency span,
html[data-theme="light"] .nav-scroll #lang_currency .text-white,
html[data-theme="light"] .nav-scroll #currentLang,
html[data-theme="light"] .nav-scroll #currentCurrency {
    color: #1b1b1b !important;
}

/* -----------------------------------------------------------------------------
   6. Interior pages (reservation flow etc.): no dark hero sits behind the
   navbar, so the transparent navbar's white links/logo and any top .text-white
   would vanish on the white page. Pages opt in with body class "interior-page".
   -------------------------------------------------------------------------- */
html[data-theme="light"] .interior-page .navbar,
html[data-theme="light"] .interior-page .navbar a,
html[data-theme="light"] .interior-page .navbar p,
html[data-theme="light"] .interior-page .navbar span,
html[data-theme="light"] .interior-page .navbar .nav-link,
html[data-theme="light"] .interior-page .navbar .navbar-toggler-icon,
html[data-theme="light"] .interior-page .navbar .icon-bar {
    color: #1b1b1b !important;
}
html[data-theme="light"] .interior-page .navbar .nav-link.active {
    color: #c49e5b !important;
}

/* White logo -> dark so it is visible on the light interior navbar */
html[data-theme="light"] .interior-page .logo-img {
    filter: brightness(0);
}

/* Any remaining white text on interior pages (headings, summary boxes, etc.) */
html[data-theme="light"] .interior-page .text-white {
    color: #1b1b1b !important;
}

/* Faint inline light text used inside interior summary boxes
   (e.g. style="color:white" / style="color:#999") */
html[data-theme="light"] .interior-page [style*="color:white"],
html[data-theme="light"] .interior-page [style*="color: white"],
html[data-theme="light"] .interior-page [style*="color:#fff"],
html[data-theme="light"] .interior-page [style*="color: #fff"],
html[data-theme="light"] .interior-page [style*="color:#ffffff"] {
    color: #1b1b1b !important;
}
html[data-theme="light"] .interior-page [style*="color:#999"],
html[data-theme="light"] .interior-page [style*="color: #999"] {
    color: #666666 !important;
}

/* -----------------------------------------------------------------------------
   7. Hero / search-bar select2 & inputs (.form1) — the bar is white in light
   mode but the theme hardcodes white text/placeholder (color:white !important).
   Match its high specificity to make the placeholder text readable.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .form1.brdr .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="light"] .form1 .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="light"] .form1 .select2-selection__rendered {
    color: #1b1b1b !important;
}
html[data-theme="light"] .form1.brdr .select2-selection__placeholder,
html[data-theme="light"] .form1 .select2-selection__placeholder {
    color: #8a8a8a !important;
}
html[data-theme="light"] .form1.brdr input::placeholder,
html[data-theme="light"] .form1 input::placeholder,
html[data-theme="light"] .form1.brdr input::-ms-input-placeholder,
html[data-theme="light"] .form1 input::-ms-input-placeholder {
    color: #8a8a8a !important;
}
html[data-theme="light"] .form1 .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #c49e5b transparent transparent transparent !important;
}

/* -----------------------------------------------------------------------------
   8. Vehicles-listing quick reservation card (.reservation-form)
   The whole card is a hardcoded dark panel with a photo + overlay title,
   grey labels and .bg-dark date inputs. Give it a polished light appearance.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .reservation-form {
    background: #ffffff !important;
    border: 1px solid #ece3d2 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    color: #1b1b1b !important;
}

/* Labels */
html[data-theme="light"] .reservation-form .form-label,
html[data-theme="light"] .reservation-form label {
    color: #555555 !important;
}

/* Car name + price sit ON TOP of the vehicle photo -> keep them white with a
   readable shadow (override the generic .text-white darkening for this spot) */
html[data-theme="light"] .reservation-form .car-image-container .text-white,
html[data-theme="light"] .reservation-form #reservation-car-name,
html[data-theme="light"] .reservation-form #reservation-car-price {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

/* Date inputs (.form-control.bg-dark) -> light, gold border kept */
html[data-theme="light"] .reservation-form .form-control,
html[data-theme="light"] .reservation-form input.bg-dark,
html[data-theme="light"] .reservation-form .form-control.bg-dark {
    background: #f7f7f7 !important;
    background-color: #f7f7f7 !important;
    color: #1b1b1b !important;
    border: 1px solid #c49e5b !important;
}
html[data-theme="light"] .reservation-form .form-control::placeholder {
    color: #8a8a8a !important;
}

/* "Annuler" (button-2) needs a visible edge on white */
html[data-theme="light"] .reservation-form .button-2 {
    background: #f2f2f2 !important;
    color: #1b1b1b !important;
    border: 1px solid #dddddd !important;
}

/* -----------------------------------------------------------------------------
   9. ONLY the Vehicles-listing reservation card (.reservation-form): make its
   select2 boxes look like its pill date inputs (light-gray fill, gold border,
   rounded pill, gold arrow, dark text). Everything outside .reservation-form
   keeps the theme's original flat select2 design.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .reservation-form .select2-container--default .select2-selection--single {
    background-color: #f7f7f7 !important;
    border: 1px solid #c49e5b !important;
    border-radius: 30px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
}
html[data-theme="light"] .reservation-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1b1b1b !important;
    line-height: 28px !important;
    padding: 0 !important;
}
html[data-theme="light"] .reservation-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8a8a8a !important;
}
/* Vertically center + recolor the dropdown arrow to gold */
html[data-theme="light"] .reservation-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 14px !important;
    display: block !important;
}
html[data-theme="light"] .reservation-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #c49e5b transparent transparent transparent !important;
}
/* Match the focus ring used by the date inputs */
html[data-theme="light"] .reservation-form .select2-container--default.select2-container--focus .select2-selection--single,
html[data-theme="light"] .reservation-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #c49e5b !important;
    box-shadow: 0 0 0 0.2rem rgba(196, 158, 91, 0.25) !important;
}