/*
 * Light mode for the public site and the auth pages.
 *
 * Every rule here is scoped to html[data-theme="light"], so with the theme set to dark (the default look) this
 * file changes nothing. The theme attribute is set by the inline script in layouts/partials/head.blade.php.
 *
 * Kept dark in both modes by design: the header and its menu, hero photo banners, the home slider, photo cards
 * with white overlay text, the lightbox/video modal and the cookie notice.
 */

html[data-theme="light"] {
    --lt-bg: #f4f5f7;
    --lt-surface: #ffffff;
    --lt-surface-2: #eceef2;
    --lt-text: #161a22;
    --lt-text-muted: #596070;
    --lt-border: rgba(22, 26, 34, 0.12);
    --lt-border-strong: rgba(22, 26, 34, 0.22);
    --lt-shadow: 0 8px 24px rgba(22, 26, 34, 0.08);
    color-scheme: light;
}

/* ---------- Page surfaces ---------- */
html[data-theme="light"] body {
    background-color: var(--lt-bg);
    color: var(--lt-text-muted);
}

html[data-theme="light"] .bg-dark-gray:not(.page-title-big-typography):not(.push-menu),
html[data-theme="light"] .bg-nero-grey {
    background-color: var(--lt-bg) !important;
}

/* ---------- Text ---------- */
html[data-theme="light"] .text-white,
html[data-theme="light"] a.text-white,
html[data-theme="light"] .text-white-hover:hover {
    color: var(--lt-text) !important;
}

html[data-theme="light"] .text-medium-gray,
html[data-theme="light"] .text-extra-medium-gray {
    color: var(--lt-text-muted);
}

html[data-theme="light"] .border-color-transparent-white-light,
html[data-theme="light"] .border-color-transparent-white {
    border-color: var(--lt-border) !important;
}

/* Areas that stay dark keep their white text. `:is()` raises specificity above the generic rules above. */
html[data-theme="light"] :is(
        .page-title-big-typography,
        .hero-eyebrow,
        .btn,
        .cookie-notice,
        .site-lightbox,
        .site-video-modal,
        .auth-split-media,
        header,
        .push-menu,
        .blog-metro:not(.catalogue-grid) figure figcaption,
        .swiper-button-next,
        .swiper-button-prev,
        .rev_slider_wrapper
    ) .text-white {
    color: #fff !important;
}

html[data-theme="light"] :is(
        .page-title-big-typography,
        .auth-split-media,
        header,
        .push-menu,
        .blog-metro:not(.catalogue-grid) figure figcaption
    ) .text-medium-gray {
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- Footer ---------- */
html[data-theme="light"] footer,
html[data-theme="light"] footer.bg-nero-grey {
    background-color: var(--lt-surface-2) !important;
    background-image: none !important;
    border-top: 1px solid var(--lt-border);
}

/* The oversized "TADA Autos" wordmark is a faint watermark on light, not solid black type */
html[data-theme="light"] .site-wordmark {
    color: rgba(22, 26, 34, 0.05) !important;
}

html[data-theme="light"] footer .footer-logo img {
    content: url("../../storage/images/logo.svg");
    max-height: 44px;
    width: auto;
}

/* The dotted background pattern is drawn for dark sections; on light it reads as noise */
html[data-theme="light"] [style*="demo-architecture-dotted-pattern"] {
    background-image: none !important;
}

/* ---------- Auth pages: the photo panel stays dark, the form panel goes light ---------- */
html[data-theme="light"] .auth-split {
    background-color: var(--lt-bg);
}

html[data-theme="light"] .auth-split-panel {
    background-color: var(--lt-surface);
}

html[data-theme="light"] .auth-status {
    background-color: rgba(0, 103, 79, 0.08);
    color: var(--lt-text);
}

html[data-theme="light"] .form-error {
    color: #c0392b;
}

html[data-theme="light"] .form-password-toggle:hover,
html[data-theme="light"] .form-password-toggle:focus-visible {
    color: var(--lt-text);
}

/* ---------- Forms ---------- */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] input.input-name,
html[data-theme="light"] textarea.form-control {
    background-color: var(--lt-surface) !important;
    border-color: var(--lt-border-strong) !important;
    color: var(--lt-text) !important;
}

html[data-theme="light"] .form-control::placeholder {
    color: #8a909c;
}

html[data-theme="light"] .form-control:focus {
    border-color: var(--base-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 103, 79, 0.15);
}

html[data-theme="light"] .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--lt-text);
    -webkit-box-shadow: 0 0 0 1000px var(--lt-surface) inset;
}

/* ---------- Catalogue / vehicle ---------- */
html[data-theme="light"] .catalogue-grid figure {
    background: var(--lt-surface);
    border-color: var(--lt-border);
    box-shadow: var(--lt-shadow);
}

html[data-theme="light"] .vehicle-gallery-empty,
html[data-theme="light"] .vehicle-gallery-main img,
html[data-theme="light"] .vehicle-model-viewer {
    background-color: var(--lt-surface-2);
}

html[data-theme="light"] .vehicle-gallery-tab {
    border-color: var(--lt-border-strong);
    color: var(--lt-text-muted);
}

html[data-theme="light"] .vehicle-gallery-tab.active,
html[data-theme="light"] .vehicle-gallery-tab:hover {
    border-color: var(--lt-text);
    background-color: var(--lt-text);
    color: #fff;
}

html[data-theme="light"] .vehicle-swatch {
    border-color: var(--lt-border-strong);
    box-shadow: inset 0 0 0 3px var(--lt-surface);
}

html[data-theme="light"] .vehicle-swatch.active,
html[data-theme="light"] .vehicle-swatch:hover {
    border-color: var(--lt-text);
}

html[data-theme="light"] .vehicle-availability {
    color: var(--lt-text);
}

html[data-theme="light"] .rich-description h4,
html[data-theme="light"] .rich-description h4 strong {
    color: var(--lt-text) !important;
}

html[data-theme="light"] .rich-description ul > li::before {
    box-shadow: 0 0 0 4px rgba(22, 26, 34, 0.08);
}

html[data-theme="light"] .rich-description ol > li::before {
    color: #fff;
}

/* Quantity stepper */
html[data-theme="light"] .qty-stepper {
    background: var(--lt-surface);
    border-color: var(--lt-border-strong);
}

html[data-theme="light"] .qty-stepper-btn,
html[data-theme="light"] .qty-stepper-input {
    color: var(--lt-text);
}

/* ---------- Cart ---------- */
html[data-theme="light"] .cart-card,
html[data-theme="light"] .checkout-card,
html[data-theme="light"] .myorder-card {
    background: var(--lt-surface);
    border-color: var(--lt-border);
    box-shadow: var(--lt-shadow);
}

html[data-theme="light"] .cart-card-name,
html[data-theme="light"] .cart-card-amount {
    color: var(--lt-text);
}

html[data-theme="light"] .cart-card-unit,
html[data-theme="light"] .cart-card-label {
    color: var(--lt-text-muted);
}

html[data-theme="light"] .cart-qty-input {
    color: var(--lt-text);
    background: var(--lt-surface);
    border-color: var(--lt-border-strong);
}

html[data-theme="light"] .cart-remove {
    color: var(--lt-text-muted);
    background: var(--lt-surface-2);
    border-color: var(--lt-border);
}

html[data-theme="light"] .cart-remove:hover,
html[data-theme="light"] .cart-remove:focus-visible {
    color: #fff;
    background: #c0392b;
    border-color: #c0392b;
}

/* ---------- Checkout ---------- */
html[data-theme="light"] .checkout-card-title {
    color: var(--base-color);
}

html[data-theme="light"] .checkout-group-head,
html[data-theme="light"] .checkout-line-amount,
html[data-theme="light"] .checkout-total,
html[data-theme="light"] .checkout-step-list strong {
    color: var(--lt-text);
}

html[data-theme="light"] .checkout-pill {
    color: var(--lt-text-muted);
    background: var(--lt-surface-2);
}

html[data-theme="light"] .checkout-pill-green {
    color: #0b5f4b;
    background: rgba(0, 103, 79, 0.12);
}

html[data-theme="light"] .checkout-line {
    border-top-color: var(--lt-border);
}

html[data-theme="light"] .checkout-line-name {
    color: var(--lt-text-muted);
}

html[data-theme="light"] .checkout-total {
    border-top-color: var(--lt-border-strong);
}

html[data-theme="light"] .checkout-note {
    color: #7a5d0e;
    background: rgba(214, 170, 60, 0.14);
    border-color: rgba(214, 170, 60, 0.4);
}

html[data-theme="light"] .checkout-note-green {
    color: #0b5f4b;
    background: rgba(0, 103, 79, 0.08);
    border-color: rgba(0, 103, 79, 0.3);
}

html[data-theme="light"] .checkout-step-list li {
    color: var(--lt-text-muted);
}

/* ---------- Orders ---------- */
html[data-theme="light"] .order-meta-line,
html[data-theme="light"] .order-details dt,
html[data-theme="light"] .order-message-head,
html[data-theme="light"] .myorder-arrow {
    color: var(--lt-text-muted);
}

html[data-theme="light"] .order-alert-amber {
    color: #7a5d0e;
    background: rgba(214, 170, 60, 0.14);
    border-color: rgba(214, 170, 60, 0.4);
}

html[data-theme="light"] .order-alert-green {
    color: #0b5f4b;
    background: rgba(0, 103, 79, 0.08);
    border-color: rgba(0, 103, 79, 0.3);
}

html[data-theme="light"] .order-alert-red {
    color: #9d2f20;
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.3);
}

html[data-theme="light"] .order-alert-blue {
    color: #1f5fa8;
    background: rgba(52, 120, 200, 0.08);
    border-color: rgba(52, 120, 200, 0.3);
}

html[data-theme="light"] .order-file-input {
    color: var(--lt-text-muted);
    background: var(--lt-surface);
    border-color: var(--lt-border-strong);
}

html[data-theme="light"] .order-timeline li {
    color: #8a909c;
}

html[data-theme="light"] .order-timeline li.is-done {
    color: var(--lt-text);
}

html[data-theme="light"] .order-timeline-dot {
    color: var(--lt-text-muted);
    background: var(--lt-surface-2);
}

html[data-theme="light"] .order-timeline li.is-done .order-timeline-dot {
    color: #fff;
    background: #00674f;
}

html[data-theme="light"] .order-details dd,
html[data-theme="light"] .order-message-body {
    color: var(--lt-text);
}

html[data-theme="light"] .order-message {
    background: var(--lt-surface-2);
    border-color: var(--lt-border);
}

html[data-theme="light"] .order-message-own {
    background: rgba(0, 103, 79, 0.1);
    border-color: rgba(0, 103, 79, 0.3);
}

html[data-theme="light"] .order-message-author {
    color: var(--lt-text);
}

html[data-theme="light"] .myorder-pill-green {
    color: #0b5f4b;
    background: rgba(0, 103, 79, 0.12);
}

html[data-theme="light"] .myorder-pill-blue {
    color: #1f5fa8;
    background: rgba(52, 120, 200, 0.12);
}

html[data-theme="light"] .myorder-pill-amber {
    color: #8a6410;
    background: rgba(214, 170, 60, 0.2);
}

html[data-theme="light"] .myorder-pill-red {
    color: #9d2f20;
    background: rgba(192, 57, 43, 0.12);
}

/* White brand logos (drawn for the dark page) become dark silhouettes */
html[data-theme="light"] .clients-style-06 img[src*="logos/tesla"],
html[data-theme="light"] .clients-style-06 img[src*="logos/toyota"],
html[data-theme="light"] .clients-style-06 img[src*="logos/byd"] {
    filter: invert(1);
}

/* Solid green buttons and badges keep white text */
html[data-theme="light"] :is(.btn-base-color, .bg-base-color, .btn.text-white, .hero-nav-cta),
html[data-theme="light"] :is(.btn-base-color, .bg-base-color, .btn.text-white, .hero-nav-cta) * {
    color: #fff !important;
}

/* Brand pill on light cards: white-on-white would vanish */
html[data-theme="light"] .catalogue-grid .categories-btn {
    background-color: var(--lt-surface-2) !important;
    color: var(--lt-text) !important;
    box-shadow: none;
}

html[data-theme="light"] .rich-description b,
html[data-theme="light"] .rich-description strong {
    color: var(--lt-text);
}

html[data-theme="light"] .auth-theme-toggle {
    color: var(--lt-text) !important;
}

html[data-theme="light"] .auth-theme-toggle:hover {
    background-color: rgba(22, 26, 34, 0.08) !important;
}