/*
 * LussLimo — Luxury Black & Gold theme
 * --------------------------------------
 * Loaded after the base theme so every selector here is intentionally
 * an override, not an addition. Scoped via :root + the body.theme class
 * so it can't leak into the admin panel.
 */

:root {
    --luss-bg-0: #0a0a0c;
    --luss-bg-1: #111114;
    --luss-bg-2: #18181d;
    --luss-bg-3: #21212a;
    --luss-line: #2b2b34;
    --luss-line-soft: rgba(255, 255, 255, 0.06);
    --luss-text: #f5f5f4;
    --luss-text-dim: #c7c7c0;
    --luss-text-mute: #8b8a82;
    --luss-gold: #198754;
    --luss-gold-soft: #0f6b3f;
    --luss-gold-bright: #3fb583;
    --luss-gold-fade: rgba(25, 135, 84, 0.15);
    --luss-shadow-glow: 0 0 0 1px rgba(25, 135, 84, 0.25), 0 20px 60px rgba(0, 0, 0, 0.6);

    --luss-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --luss-font-body: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Google Fonts — pull the editorial serif + clean body sans */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

body.theme {
    background: var(--luss-bg-0) !important;
    color: var(--luss-text) !important;
    font-family: var(--luss-font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
html { overflow-x: hidden; max-width: 100vw; }
body.theme { max-width: 100vw; }

/* ---------- Headings: editorial serif ---------- */
body.theme h1, body.theme h2, body.theme h3,
body.theme .display-1, body.theme .display-2,
body.theme .display-3, body.theme .display-4,
body.theme .display-5, body.theme .display-6 {
    font-family: var(--luss-font-display) !important;
    color: var(--luss-text) !important;
    letter-spacing: -0.01em;
    font-weight: 600;
}
body.theme h4, body.theme h5, body.theme h6 {
    color: var(--luss-text) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}
body.theme p, body.theme li, body.theme span, body.theme label {
    color: var(--luss-text-dim) !important;
}
body.theme a { color: var(--luss-gold) !important; transition: color .15s ease; }
body.theme a:hover { color: var(--luss-gold-bright) !important; }

/* ---------- Header / nav bar ---------- */
body.theme header, body.theme .header, body.theme nav, body.theme .navbar,
body.theme .header-section, body.theme .top-header {
    background: rgba(10, 10, 12, 0.85) !important;
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--luss-line) !important;
    box-shadow: none !important;
}
body.theme .nav-link, body.theme .navbar-nav a, body.theme header a {
    color: var(--luss-text) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}
body.theme .nav-link:hover, body.theme .navbar-nav a:hover {
    color: var(--luss-gold) !important;
}

/* ---------- Buttons ---------- */
body.theme .btn,
body.theme button.btn {
    border-radius: 999px;
    font-family: var(--luss-font-body) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 10px 22px;
    text-transform: uppercase;
    font-size: 13px;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
body.theme .btn:hover { transform: translateY(-1px); }

body.theme .btn-primary,
body.theme .gradient-bg-color,
body.theme .btn-secondary,
body.theme a.btn-primary,
body.theme a.ticket-btn,
body.theme button.btn-primary {
    background: linear-gradient(135deg, var(--luss-gold-bright) 0%, var(--luss-gold) 60%, var(--luss-gold-soft) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 26px rgba(25, 135, 84, 0.22) !important;
}
/* Force the same dark color on any child of a gold button so the label
   doesn't inherit a light color from an upstream selector. */
body.theme .btn-primary span,
body.theme .btn-primary i,
body.theme .btn-secondary span,
body.theme .btn-secondary i,
body.theme .gradient-bg-color span,
body.theme .gradient-bg-color i,
body.theme a.ticket-btn span,
body.theme a.ticket-btn i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.theme .btn-primary:hover,
body.theme .gradient-bg-color:hover,
body.theme .btn-secondary:hover {
    color: #ffffff !important;
    box-shadow: 0 12px 32px rgba(25, 135, 84, 0.35) !important;
}

body.theme .btn-outline-primary, body.theme .btn-light, body.theme .btn-outline-light {
    background: transparent !important;
    color: var(--luss-gold) !important;
    border: 1px solid var(--luss-gold) !important;
}

/* ---------- Cards / panels ---------- */
body.theme .card,
body.theme .ride-details-box,
body.theme .general-details-box,
body.theme .left-map-box,
body.theme .right-details-box {
    background: linear-gradient(180deg, rgba(28,28,34,0.92), rgba(17,17,20,0.92)) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border-radius: 14px !important;
}
body.theme .card-body { color: var(--luss-text) !important; }

/* Bullets inside cards */
body.theme .general-details-list li,
body.theme .personal-details-list li,
body.theme ul li {
    border-color: var(--luss-line-soft) !important;
    color: var(--luss-text-dim) !important;
}
body.theme .general-details-list li span,
body.theme .personal-details-list li span {
    color: var(--luss-text) !important;
}

/* ---------- Inputs ---------- */
body.theme .form-control,
body.theme .form-select,
body.theme input, body.theme select, body.theme textarea {
    background: var(--luss-bg-2) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
    border-radius: 10px !important;
    padding: 10px 14px;
    font-size: 14px;
}
body.theme .form-control:focus,
body.theme input:focus, body.theme select:focus, body.theme textarea:focus {
    border-color: var(--luss-gold) !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.18) !important;
}
body.theme ::placeholder { color: var(--luss-text-mute) !important; opacity: 1; }

/* ---------- Badges ---------- */
body.theme .badge {
    background: var(--luss-bg-3) !important;
    color: var(--luss-text) !important;
    border: 1px solid var(--luss-line) !important;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
body.theme .badge-otp,
body.theme .badge-primary,
body.theme .badge-success {
    background: linear-gradient(135deg, var(--luss-gold-bright), var(--luss-gold)) !important;
    color: #ffffff !important;
    border: none !important;
}
body.theme .badge-danger { background: #c14545 !important; color: #fff !important; }

/* ---------- HOME PAGE specific ---------- */
body.theme .home-section {
    position: relative;
    background:
        linear-gradient(135deg, rgba(10,10,12,0.94) 0%, rgba(10,10,12,0.78) 55%, rgba(10,10,12,0.55) 100%),
        url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=2000&q=80") center/cover no-repeat !important;
    padding: 100px 0 120px !important;
    overflow: hidden;
}
body.theme .home-section::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right, rgba(25, 135, 84,0.18), transparent 55%);
    pointer-events: none;
}
body.theme .home-section .content-card {
    background: linear-gradient(180deg, rgba(17,17,20,0.65), rgba(17,17,20,0.45)) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(25, 135, 84, 0.25) !important;
    border-radius: 18px !important;
}
body.theme .home-section .content-card a:first-child {
    display: inline-block;
    color: var(--luss-gold) !important;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 18px;
    border: 1px solid rgba(25, 135, 84, 0.45);
    padding: 6px 14px;
    border-radius: 999px;
}
body.theme .home-section .content-card h1 {
    font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1rem !important;
    color: #fff !important;
}
body.theme .home-section .content-card h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: var(--luss-gold);
    margin-top: 22px;
}
body.theme .home-section .content-card p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--luss-text-dim) !important;
}
body.theme .home-section .image-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.theme .home-section .image-card .image-wrapper {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.7);
    border: 1px solid rgba(25, 135, 84, 0.15);
    aspect-ratio: 4/5;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35)),
        url("https://images.unsplash.com/photo-1542362567-b07e54358753?auto=format&fit=crop&w=1200&q=80") center/cover no-repeat;
}
body.theme .home-section .image-card .image-wrapper img {
    display: none !important;
}

/* Counter section */
body.theme .counter-section {
    background: var(--luss-bg-1) !important;
    border-top: 1px solid var(--luss-line);
    border-bottom: 1px solid var(--luss-line);
    padding: 60px 0;
}
body.theme .counter-section .counter-wrapper h3 {
    color: var(--luss-gold) !important;
    font-size: 3rem !important;
}
body.theme .counter-section .counter-wrapper p {
    color: var(--luss-text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
}

/* All generic sections after hero */
body.theme section { background: var(--luss-bg-0); }
body.theme section.bg-light { background: var(--luss-bg-1) !important; }

/* ---------- AUTH PAGES — split layout with limo backdrop ---------- */
body.theme .authentication-section,
body.theme .auth-section,
body.theme .login-section,
body.theme .register-section {
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgba(10,10,12,0.94) 0%, rgba(10,10,12,0.72) 45%, rgba(10,10,12,0.35) 100%),
        url("https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=2000&q=80") center/cover no-repeat !important;
    display: flex; align-items: center; padding: 60px 0 !important;
}

body.theme .auth-form-box {
    background: linear-gradient(180deg, rgba(17,17,20,0.92), rgba(10,10,12,0.92)) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(25, 135, 84, 0.25) !important;
    border-radius: 22px !important;
    box-shadow: var(--luss-shadow-glow) !important;
    padding: 48px 56px !important;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    position: relative;
}
body.theme .auth-form-box::before {
    content: "LUSSLIMO";
    display: block;
    color: var(--luss-gold);
    letter-spacing: 0.6em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

/* CodeCanyon ships the inner content inside a .row > col-xl-5.col-lg-6 column
   intended for a side-by-side layout with the illustration. We now hide the
   illustration, so collapse the column to full-width and strip the row's
   negative gutters so the form fills the whole card. Without this, on
   desktop the inner column is only ~5/12 of the card → the title wraps
   one word per line. */
body.theme .auth-form-box .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100%;
}
body.theme .auth-form-box .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
/* Hide the illustration column entirely on every breakpoint */
body.theme .auth-form-box .col-xl-7,
body.theme .auth-form-box .col-lg-6.d-lg-block {
    display: none !important;
}

/* The inner box is white in the upstream theme — strip that and let the
   dark glass card show through. */
body.theme .auth-right-box {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    width: 100%;
}

body.theme .auth-form-box .auth-right-box h3 {
    text-align: center;
    margin-bottom: 8px;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.2;
}
body.theme .auth-form-box .auth-right-box h6 {
    text-align: center;
    color: var(--luss-text-mute) !important;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
    font-size: 0.9rem;
}
body.theme .auth-image,
body.theme .auth-form-box > img:first-child {
    display: none !important;
}

/* Phone-or-email input row. The upstream markup is a flex container with
   the country-code select + the text input side by side. */
body.theme .number-mail-box {
    background: var(--luss-bg-2) !important;
    border: 1px solid var(--luss-line) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch;
    overflow: hidden;
}
body.theme .number-mail-box .country-code-section {
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--luss-line) !important;
    border-radius: 0 !important;
    flex: 0 0 auto;
}
body.theme .number-mail-box .form-control {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}
body.theme .form-box .form-control {
    color: var(--luss-text) !important;
}

/* Send OTP button should fill the card width and feel weighty. */
body.theme .auth-form-box button[type="submit"],
body.theme .auth-form-box .btn-primary {
    width: 100%;
    padding: 13px 22px !important;
    font-size: 13px !important;
    margin-top: 8px;
}

/* "Login With" divider and "Don't have an Account? Sign Up" line need
   proper layout — the upstream CSS sometimes turns them into a vertical
   stack. */
body.theme .auth-right-box .login-with,
body.theme .auth-right-box [class*="divider"] {
    text-align: center;
    color: var(--luss-text-mute) !important;
    margin: 22px 0 14px;
    position: relative;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
body.theme .auth-right-box .login-with::before,
body.theme .auth-right-box .login-with::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--luss-line);
}
body.theme .auth-right-box .login-with::before { left: 0; }
body.theme .auth-right-box .login-with::after { right: 0; }

body.theme .auth-right-box p,
body.theme .auth-right-box .signup-text {
    text-align: center;
    color: var(--luss-text-mute) !important;
    font-size: 14px;
    margin: 14px 0 0;
}
body.theme .auth-right-box a {
    color: var(--luss-gold) !important;
}

/* Constrain the section's wrapping container even at desktop widths so
   the dark card sits centred and doesn't get pulled by an oversized
   Bootstrap container. The upstream `.section-b-space` adds vertical
   padding only; horizontal width comes from .container. */
body.theme .authentication-section,
body.theme .auth-section,
body.theme .login-section,
body.theme .register-section {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-1 * (100vw - 100%) / 2);  /* center under any wrapper */
    overflow-x: hidden;
}
body.theme .authentication-section > .container,
body.theme .auth-section > .container,
body.theme .login-section > .container,
body.theme .register-section > .container {
    width: min(600px, 100vw) !important;
    max-width: min(600px, 100vw) !important;
    margin-inline: auto !important;
    padding-inline: 16px !important;
}

/* ---------- Responsive auth: tablet — center a 540-wide card ---------- */
@media (max-width: 991px) and (min-width: 601px) {
    body.theme .auth-form-box {
        max-width: 540px !important;
        margin: 0 auto !important;
    }
}

/* ---------- Responsive auth: phones (≤600) — fill the viewport ---------- */
@media (max-width: 600px) {
    body.theme .authentication-section,
    body.theme .auth-section,
    body.theme .login-section,
    body.theme .register-section {
        padding: 24px 0 !important;
        min-height: auto;
        align-items: flex-start;
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        display: block !important;  /* drop the flex centering on mobile */
    }
    /* Bootstrap's .container can apply a fixed min-width on some
       breakpoints that pushes content beyond the viewport. Force it
       to fluid on small screens. */
    body.theme .authentication-section > .container,
    body.theme .auth-section > .container,
    body.theme .login-section > .container,
    body.theme .register-section > .container {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-inline: 16px !important;
        margin-inline: 0 !important;
        box-sizing: border-box !important;
    }
    body.theme .auth-form-box {
        padding: 28px 20px !important;
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 auto !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }
    body.theme .auth-form-box::before {
        letter-spacing: 0.4em;
        font-size: 10px;
        margin-bottom: 16px;
    }
    body.theme .auth-form-box .auth-right-box h3 { font-size: 1.5rem; }
    body.theme .auth-form-box .auth-right-box h6 {
        font-size: 0.85rem;
        padding: 0 6px;
    }
}
@media (max-width: 420px) {
    body.theme .auth-form-box { padding: 24px 16px !important; }
    body.theme .auth-form-box .auth-right-box h3 { font-size: 1.35rem; }
}

/* Make sure the "Login With" divider line doesn't draw under the badge.
   The upstream markup wraps the label in a span — give it the dark card
   bg so the rule line breaks cleanly. */
body.theme .auth-right-box .login-with,
body.theme .auth-right-box [class*="divider"] {
    background: transparent !important;
}
body.theme .auth-right-box .login-with span {
    background: transparent !important;
    color: var(--luss-text-mute) !important;
    padding: 0 12px;
}

/* ---------- Responsive: Create Ride ---------- */
@media (max-width: 768px) {
    body.theme .create-ride-section {
        padding: 24px 0 !important;
    }
    body.theme .create-ride-section .container {
        padding-inline: 16px !important;
    }
    /* Stack pickup form on top of the map on small screens */
    body.theme .create-ride-section .row {
        --bs-gutter-x: 16px !important;
    }
    body.theme .create-ride-section .col-lg-5,
    body.theme .create-ride-section .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px;
    }
    body.theme #map-view, body.theme .map-view {
        min-height: 320px !important;
    }
    body.theme .duration-distance-box {
        flex-direction: column;
    }
    body.theme .duration-distance-box li {
        width: 100%;
    }
}

/* ---------- Responsive: Ride detail (show.blade) ---------- */
@media (max-width: 992px) {
    body.theme .create-ride-section .col-xl-5,
    body.theme .create-ride-section .col-xl-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px;
    }
    body.theme #map-view, body.theme .map-view {
        min-height: 280px !important;
    }
}
@media (max-width: 768px) {
    body.theme .create-ride-section .container {
        padding-inline: 16px !important;
    }
    body.theme .left-map-box,
    body.theme .right-details-box {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    body.theme .right-details-box h3 {
        font-size: 1.4rem !important;
    }
    body.theme .general-details-list li,
    body.theme .personal-details-list li {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
        padding-block: 8px !important;
    }
    body.theme .driver-box,
    body.theme .personal {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
    /* The action bar I added on show.blade — wrap into a column on small */
    body.theme #ride-action-bar {
        flex-direction: column !important;
    }
    body.theme #ride-action-bar > * {
        width: 100% !important;
        margin: 0 !important;
    }
    /* Chat modal full-screen on mobile */
    body.theme #rideChatModal .modal-dialog {
        max-width: 100vw !important;
        margin: 0 !important;
        height: 100vh !important;
    }
    body.theme #rideChatModal .modal-content {
        height: 100vh !important;
        border-radius: 0 !important;
    }
    body.theme #rideChatMessages {
        height: calc(100vh - 140px) !important;
    }
}

/* ---------- Responsive: header / navbar (the upstream nav) ---------- */
@media (max-width: 768px) {
    body.theme header, body.theme .header-section, body.theme .top-header {
        padding: 8px 12px !important;
    }
    /* The header BOOK RIDE button shouldn't dominate the navbar */
    body.theme header .btn.ticket-btn,
    body.theme .header .btn.ticket-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}

/* ===================================================================
   LussLimo template header/footer — shared chrome on EVERY page.
   Class names prefixed `ll-` so they never collide with the admin
   theme or the CodeCanyon front classes. The selectors below are
   unscoped (no `body.theme` prefix) so they apply even on pages that
   forgot to add the theme class.
   =================================================================== */

.ll-container { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- Topbar ---------- */
.ll-topbar {
    background: #000;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #9a9aa2;
    font-family: var(--luss-font-body, "Inter", system-ui, sans-serif);
}
.ll-topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    gap: 12px;
}
.ll-topbar__contact a {
    color: #9a9aa2;
    margin-right: 1.4rem;
    text-decoration: none;
    transition: color 0.2s;
}
.ll-topbar__contact a:hover { color: #3fb583; }
.ll-topbar__note { color: #198754; }

/* ---------- Header ---------- */
.ll-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 11, 13, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(25, 135, 84, 0.22);
    font-family: var(--luss-font-body, "Inter", system-ui, sans-serif);
}
.ll-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}
.ll-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: #f6f3ec; }
.ll-brand__mark {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid #198754;
    color: #3fb583;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    border-radius: 50%;
}
/* Logo image variant — logo is already a circular brand with its own
   green/black arcs around "LUSS". The PNG is transparent (white knocked
   out), so we let it sit on the dark navbar without any background,
   border, or ring. object-fit: contain keeps the full mark visible. */
.ll-brand__mark--img {
    width: 52px; height: 52px;
    background: #fff;
    border: none;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    /* Soft drop shadow to lift the disc off the dark navbar — no inset
       padding so the white fills the entire circle behind the logo. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.ll-brand__mark--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* No filter — clean logo on the white disc. */
    filter: none;
}
.ll-brand__name {
    letter-spacing: 0.28em;
    font-weight: 300;
    font-size: 1.05rem;
    color: #f6f3ec;
}
.ll-brand__name strong { color: #3fb583; font-weight: 600; }

.ll-nav { display: flex; align-items: center; gap: 2rem; }
.ll-nav a {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f6f3ec !important;
    text-decoration: none;
    transition: color 0.2s;
}
.ll-nav a:hover { color: #3fb583 !important; }
.ll-nav__cta {
    border: 1px solid #198754;
    padding: 0.6rem 1.3rem;
    border-radius: 50px;
    color: #3fb583 !important;
}
.ll-nav__cta:hover { background: #198754; color: #ffffff !important; }

.ll-nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.ll-nav__toggle span { width: 26px; height: 2px; background: #3fb583; transition: 0.3s; }

/* ---------- Footer ---------- */
.ll-footer {
    background: #050506;
    padding-top: 4rem;
    border-top: 1px solid rgba(25, 135, 84, 0.22);
    color: #cfcdc6;
    font-family: var(--luss-font-body, "Inter", system-ui, sans-serif);
}
.ll-footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 3rem;
}
.ll-footer__brand p { color: #9a9aa2; margin-top: 1.2rem; max-width: 280px; font-size: 0.92rem; }
.ll-footer__col h4 {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #198754;
    margin-bottom: 1.2rem;
}
.ll-footer__col a {
    display: block;
    color: #cfcdc6;
    margin-bottom: 0.7rem;
    font-size: 0.92rem;
    transition: color 0.2s;
    text-decoration: none;
}
.ll-footer__col a:hover { color: #3fb583; }
.ll-footer__col p { color: #9a9aa2; font-size: 0.9rem; }
.ll-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 1.5rem 0; }
.ll-footer__bottom .ll-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #9a9aa2;
    font-size: 0.82rem;
}

/* ---------- Hide the old CodeCanyon header that some pages reference
   directly (anything inside the old header element that the new
   header.blade no longer outputs is fine — but if a page included
   its OWN custom-container/top-header markup, hide it). ---------- */

/* ---------- Responsive: collapse nav into a drawer on phones/tablets.
   Raised 860 → 1024 because the 7 nav links + Book Now button overflow and
   overlap the logo in the ~860-1024px range (tablets, split screens). ---- */
@media (max-width: 1024px) {
    .ll-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(280px, 80%);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1.6rem;
        padding: 2rem;
        background: #18181d;
        border-left: 1px solid rgba(25, 135, 84, 0.22);
        transform: translateX(100%);
        transition: transform 0.35s ease;
        z-index: 60;
    }
    .ll-nav.open { transform: translateX(0); }
    .ll-nav__toggle { display: flex; z-index: 61; }
    .ll-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .ll-topbar__note { display: none; }
    .ll-footer__inner { grid-template-columns: 1fr; }
}
body.theme .auth-section .card,
body.theme .login-section .card,
body.theme .register-section .card,
body.theme section[class*="otp"] .card,
body.theme section[class*="login"] .card,
body.theme section[class*="register"] .card,
body.theme .login-box, body.theme .signin-box, body.theme .register-box {
    background: linear-gradient(180deg, rgba(17,17,20,0.92), rgba(10,10,12,0.92)) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(25, 135, 84, 0.25) !important;
    border-radius: 18px !important;
    box-shadow: var(--luss-shadow-glow) !important;
    padding: 36px !important;
}

/* ---------- CREATE-RIDE PAGE ---------- */
body.theme .create-ride-section,
body.theme section.create-ride-section {
    background: var(--luss-bg-0) !important;
    min-height: 100vh;
    padding: 40px 0 !important;
}
body.theme #map-view, body.theme .map-view {
    border-radius: 14px !important;
    border: 1px solid var(--luss-line) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    overflow: hidden;
    background: var(--luss-bg-2) !important;
    min-height: 480px;
}
/* Distance / duration pills on the booking page */
body.theme .duration-distance-box {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    gap: 12px;
}
body.theme .duration-distance-box li {
    flex: 1;
    background: var(--luss-bg-2) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
    border-radius: 999px !important;
    padding: 12px 18px !important;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}
body.theme .duration-distance-box li span,
body.theme #duration, body.theme #distance-label {
    color: var(--luss-gold) !important;
    font-weight: 700;
}
/* Soft "Only instant rides" warning notice */
body.theme .alert, body.theme [role="alert"] {
    background: rgba(25, 135, 84, 0.08) !important;
    border: 1px solid rgba(25, 135, 84, 0.25) !important;
    color: var(--luss-gold-bright) !important;
    border-radius: 10px !important;
}
body.theme .accordion-button {
    background: var(--luss-bg-2) !important;
    color: var(--luss-text) !important;
    font-weight: 600 !important;
    border: 1px solid var(--luss-line) !important;
}
body.theme .accordion-button:not(.collapsed) {
    color: var(--luss-gold) !important;
    background: var(--luss-bg-2) !important;
    box-shadow: inset 0 -2px 0 rgba(25, 135, 84, 0.4) !important;
}
body.theme .accordion-body {
    background: var(--luss-bg-1) !important;
    border: 1px solid var(--luss-line) !important;
    border-top: 0 !important;
}
body.theme .tracking-path li,
body.theme .tracking-path li span {
    color: var(--luss-text) !important;
}
body.theme .tracking-path li i {
    color: var(--luss-gold) !important;
}

/* Hourly packages / vehicle picker */
body.theme .vehicle-type-card, body.theme .vehicle-card,
body.theme [class*="vehicle-type"], body.theme .package-card {
    background: var(--luss-bg-2) !important;
    border: 1px solid var(--luss-line) !important;
    border-radius: 12px !important;
    color: var(--luss-text) !important;
    transition: border-color .15s ease, transform .12s ease;
}
body.theme .vehicle-type-card:hover, body.theme .vehicle-card:hover {
    border-color: var(--luss-gold) !important;
    transform: translateY(-1px);
}
body.theme input[type="radio"]:checked + .vehicle-type-card,
body.theme input[type="radio"]:checked + .vehicle-card,
body.theme input[type="radio"]:checked + label .vehicle-type-card {
    border-color: var(--luss-gold) !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.18) !important;
}

/* ---------- Modals ---------- */
body.theme .modal-content {
    background: linear-gradient(180deg, var(--luss-bg-2), var(--luss-bg-1)) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
    border-radius: 16px !important;
}
body.theme .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--luss-line) !important;
}
body.theme .modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--luss-line) !important;
}
body.theme .btn-close {
    filter: invert(1) brightness(1.6);
    opacity: .8;
}

/* ---------- Footer ---------- */
body.theme footer, body.theme .footer-section {
    background: #050507 !important;
    color: var(--luss-text-dim) !important;
    border-top: 1px solid var(--luss-line);
}
body.theme footer a { color: var(--luss-text-dim) !important; }
body.theme footer a:hover { color: var(--luss-gold) !important; }

/* ---------- Tracking path bullets inline ---------- */
body.theme .tracking-path { padding-left: 6px; }
body.theme .tracking-path li {
    padding: 8px 0;
    border-bottom: 1px solid var(--luss-line-soft);
}
body.theme .tracking-path li:last-child { border-bottom: none; }

/* Personal / profile circles */
body.theme .border-image, body.theme .profile-img, body.theme .initial-letter {
    border: 2px solid var(--luss-gold) !important;
    background: var(--luss-bg-2) !important;
    color: var(--luss-gold) !important;
}

/* Generic info chip used in driver row */
body.theme .rating i { color: var(--luss-gold) !important; }

/* Bootstrap text-muted darkened — keep contrast */
body.theme .text-muted, body.theme .text-secondary {
    color: var(--luss-text-mute) !important;
}

/* Tables (history, wallet) */
body.theme table, body.theme .table {
    color: var(--luss-text) !important;
    background: transparent !important;
}
body.theme thead, body.theme .table thead th {
    color: var(--luss-gold) !important;
    border-bottom: 1px solid var(--luss-line) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
}
body.theme tbody tr td {
    border-color: var(--luss-line-soft) !important;
}

/* ---------- Floating brand line at top of any auth card ---------- */
body.theme .auth-brand,
body.theme .login-box .brand-mark,
body.theme .signin-box .brand-mark {
    color: var(--luss-gold) !important;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 18px;
    text-align: center;
}

/* ---------- Reduce CodeCanyon-stock visual noise ---------- */
body.theme img[src*="store/1"],
body.theme img[src*="store/2"] {
    filter: invert(0.95) saturate(0) brightness(1.05);
}

/* ---------- Below-hero sections on the home page ---------- */

/* Counter section: numbers were primary-green on white, now gold on dark */
body.theme .counter-section,
body.theme .counter-section .counters {
    background: var(--luss-bg-1) !important;
    color: var(--luss-text) !important;
}
body.theme .counter-section .counter-wrapper {
    background: transparent !important;
    border-right: 1px solid var(--luss-line);
}
body.theme .counter-section .counter-wrapper:last-child { border-right: none; }
body.theme .counter-section .counter-wrapper h3,
body.theme .counter-section .counter-wrapper span.counter {
    color: var(--luss-gold) !important;
    font-size: 2.6rem !important;
    font-weight: 700;
    font-family: var(--luss-font-display) !important;
}
body.theme .counter-section .counter-wrapper p {
    color: var(--luss-text-mute) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    margin-top: 6px;
}

/* "Best Choice" / "Why LussLimo Stands Out" feature cards */
body.theme .best-choice-section-2 {
    background: var(--luss-bg-0) !important;
    padding: 70px 0 !important;
}
body.theme .best-choice-section-2 h2,
body.theme .best-choice-section-2 .section-title,
body.theme .best-choice-section-2 > div > h2 {
    color: #fff !important;
    text-align: center;
    font-family: var(--luss-font-display) !important;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem) !important;
    margin-bottom: 36px !important;
}
body.theme .best-choice-card,
body.theme .best-choice-card.card-1,
body.theme .best-choice-card.card-2,
body.theme .best-choice-card.card-3,
body.theme .best-choice-card.card-4,
body.theme .best-choice-card.card-5 {
    background: linear-gradient(180deg, rgba(28,28,34,0.92), rgba(17,17,20,0.92)) !important;
    border: 1px solid var(--luss-line) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    color: var(--luss-text) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    transition: border-color .15s ease, transform .12s ease;
}
body.theme .best-choice-card:hover {
    border-color: var(--luss-gold) !important;
    transform: translateY(-2px);
}
body.theme .best-choice-card h3,
body.theme .best-choice-card h4,
body.theme .card-content h3,
body.theme .card-content h4 {
    color: #fff !important;
    font-family: var(--luss-font-display) !important;
}
body.theme .best-choice-card p,
body.theme .card-content p {
    color: var(--luss-text-dim) !important;
}

/* FAQ section */
body.theme .faq-section {
    background: var(--luss-bg-1) !important;
    padding: 80px 0 !important;
}
body.theme .faq-section h2 {
    color: #fff !important;
    text-align: center;
    font-family: var(--luss-font-display) !important;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
    margin-bottom: 36px !important;
}
body.theme .faq-section .accordion,
body.theme .faq-section .accordion-item {
    background: transparent !important;
    border: none !important;
}
body.theme .faq-section .accordion-item {
    margin-bottom: 14px !important;
    border: 1px solid var(--luss-line) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

/* Testimonial / comment section */
body.theme .comment-section {
    background: var(--luss-bg-0) !important;
    padding: 80px 0 !important;
}
body.theme .comment-section h2 {
    color: #fff !important;
    text-align: center;
    font-family: var(--luss-font-display) !important;
    margin-bottom: 36px !important;
}
body.theme .comment-section .comment-box,
body.theme .comment-section .testimonial-card,
body.theme .comment-section .card,
body.theme .comment-section [class*="testimonial"] {
    background: linear-gradient(180deg, rgba(28,28,34,0.92), rgba(17,17,20,0.92)) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
    border-radius: 14px !important;
}
body.theme .comment-section .comment-box h4,
body.theme .comment-section .testimonial-card h4,
body.theme .comment-section h5, body.theme .comment-section h4 {
    color: #fff !important;
}

/* Blog section */
body.theme .blog-section {
    background: var(--luss-bg-1) !important;
    padding: 80px 0 !important;
}
body.theme .blog-section h2 {
    color: #fff !important;
    text-align: center;
    font-family: var(--luss-font-display) !important;
    margin-bottom: 36px !important;
}
body.theme .blog-section .blog-card,
body.theme .blog-section .card,
body.theme .blog-section [class*="blog"] {
    background: linear-gradient(180deg, rgba(28,28,34,0.92), rgba(17,17,20,0.92)) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
    border-radius: 14px !important;
    overflow: hidden;
}
body.theme .blog-section .blog-card h4,
body.theme .blog-section .blog-card h5,
body.theme .blog-section [class*="blog"] h4 {
    color: #fff !important;
}
body.theme .swiper-slide { background: transparent !important; }
body.theme .swiper-pagination-bullet {
    background: var(--luss-text-mute) !important;
    opacity: .6;
}
body.theme .swiper-pagination-bullet-active {
    background: var(--luss-gold) !important;
    opacity: 1;
}

/* Footer */
body.theme .footer-section {
    background: #050507 !important;
    color: var(--luss-text-dim) !important;
    border-top: 1px solid var(--luss-line);
    padding: 60px 0 30px !important;
}
body.theme .footer-section h4, body.theme .footer-section h5,
body.theme .footer-section .footer-title {
    color: var(--luss-gold) !important;
    font-family: var(--luss-font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
}
body.theme .footer-section a,
body.theme .footer-section p,
body.theme .footer-section li {
    color: var(--luss-text-dim) !important;
    font-size: 14px;
}
body.theme .footer-section a:hover { color: var(--luss-gold) !important; }
body.theme .footer-section .footer-form input {
    background: var(--luss-bg-2) !important;
    border: 1px solid var(--luss-line) !important;
    color: var(--luss-text) !important;
}
body.theme .sub-footer, body.theme .top-footer {
    background: #050507 !important;
    border-top: 1px solid var(--luss-line);
    color: var(--luss-text-mute) !important;
}

/* The "Why LussLimo Stands Out" subtitle inside best-choice-section-2 */
body.theme .best-choice-section-2 > p,
body.theme .best-choice-section-2 .section-subtitle {
    color: var(--luss-text-dim) !important;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px !important;
    font-size: 16px;
}

/* "Have Question in your Mind?" line was getting black on black */
body.theme .faq-section .text-center h2,
body.theme .faq-section .text-center h3,
body.theme h2.text-center, body.theme h3.text-center {
    color: #fff !important;
}

/* The FAQ "FAQ not found." stub and similar empty-state copy */
body.theme .faq-section .text-center p,
body.theme .empty-state, body.theme .no-data,
body.theme .empty-state h4 {
    color: var(--luss-text-mute) !important;
}

/* Best-choice-section header (the upper title block) */
body.theme .best-choice-section-2 .title-section,
body.theme .best-choice-section-2 .section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* The cards-content wrapper that holds the alternating "card-content-N one" rows */
body.theme .cards-content {
    background: transparent !important;
}
body.theme .card-content {
    background: linear-gradient(180deg, rgba(28,28,34,0.92), rgba(17,17,20,0.92)) !important;
    border: 1px solid var(--luss-line) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-bottom: 18px !important;
    color: var(--luss-text) !important;
    transition: border-color .15s ease, transform .12s ease;
}
body.theme .card-content:hover {
    border-color: var(--luss-gold) !important;
    transform: translateY(-2px);
}

/* Generic section-title pattern used by upstream CodeCanyon */
body.theme .section-title h2,
body.theme .title-section h2,
body.theme .section-header h2 {
    color: #fff !important;
    font-family: var(--luss-font-display) !important;
}
body.theme .section-title h6,
body.theme .title-section h6,
body.theme .section-header h6,
body.theme .section-title .gradient-text {
    background: linear-gradient(135deg, var(--luss-gold-bright), var(--luss-gold)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 10px;
}