html {
    scroll-behavior: smooth;
}

:root {
    --bg-primary: #000000;
    --text-primary: #d1d5db;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --glass-bg: #0d0d0d;
    --glass-border: rgba(255, 255, 255, 0.05);
    --card-bg: #0d0d0d;
    --input-bg: rgba(255, 255, 255, 0.05);
    --accent-gold: #d4af37;
}

body.light-mode {
    --bg-primary: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --glass-bg: #ffffff;
    --glass-border: rgba(0, 0, 0, 0.08);
    --card-bg: #ffffff;
    --input-bg: rgba(0, 0, 0, 0.05);
    --accent-gold: #8a6d1c; /* Deeper golden bronze for perfect contrast and visual pleasure in light mode */
}

.text-gold {
    color: var(--accent-gold) !important;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* iOS Date/Time Normalization */
input[type="date"],
input[type="time"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-height: 44px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Toast Styling */
#toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-left: 4px solid #d4af37;
    padding: 16px 24px;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#toast.show {
    transform: translateY(0);
    opacity: 1;
}

@page {
    size: landscape;
    margin: 0;
}

@media print {
    body * {
        visibility: hidden;
    }

    #printable-flyer,
    #printable-flyer * {
        visibility: visible;
        -webkit-print-color-adjust: exact !important;
        /* Crucial to preserve bg colors! */
        print-color-adjust: exact !important;
    }

    #printable-flyer {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex !important;
        z-index: 9999;
    }
}

/* PERFORMANCE PATCH: Globally disabling expensive realtime blur filters (UI LAG FIX) */
* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Re-harden specific class styles if needed for visual depth */
.glass,
.cyber-glass {
    background-color: var(--glass-bg) !important;
}

/* --- BOOKING TAB ENHANCEMENTS (PHASE 1 & 2) --- */

/* Vehicle Card Selection & Hover */
.vehicle-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    background-color: rgba(255, 255, 255, 0.08);
}

.vehicle-card.selected {
    border-color: #d4af37 !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
    box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.05);
}

/* Vehicle Image Zoom & Float */
.vehicle-img-container {
    perspective: 1000px;
}

.vehicle-card .flex-col {
    position: relative;
    z-index: 10;
    text-align: left !important;
    padding-left: 10px;
}

.vehicle-card .vehicle-img {
    transform: scale(0.5);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
    z-index: 5;
}

.vehicle-card.selected .vehicle-img {
    transform: scale(0.7) translateY(-5px);
    filter: drop-shadow(0 12px 24px rgba(212, 175, 55, 0.4));
    z-index: 5;
}

.vehicle-card:hover:not(.selected) .vehicle-img {
    transform: scale(0.63) translateY(-4px);
    filter: drop-shadow(0 8px 16px rgba(212, 175, 55, 0.25));
}

.vehicle-card .price-tag {
    top: auto !important;
    bottom: 8px !important;
    right: auto !important;
    left: 13px !important;
}

/* Hide Prices Logic */
.price-tag {
    transition: all 0.3s ease;
}

.hide-prices .price-tag {
    filter: blur(5px);
    pointer-events: none;
    opacity: 0.5;
    user-select: none;
}

.vcard-price-original {
    text-decoration: line-through !important;
    color: #ef4444 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.vcard-promo-badge {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.vcard-total-price-lbl {
    font-size: 9px;
    color: #9ca3af;
    text-transform: uppercase;
}

/* --- CUSTOM TOGGLE SWITCH --- */
.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: #9ca3af;
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
}

input:checked+.slider {
    background-color: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.5);
}

input:checked+.slider:before {
    transform: translateX(18px);
    background-color: #d4af37;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}

/* --- GOOGLE MAPS AUTOCOMPLETE (PREMIUM DARK GLASSMORPHISM) --- */
.pac-container {
    background-color: rgba(13, 13, 13, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important; /* Subtle gold hint border */
    font-family: 'Inter', sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 175, 55, 0.05) !important;
    margin-top: 6px !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
}

.pac-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 16px !important;
    background: transparent !important;
}

.pac-item * {
    color: #9ca3af !important; /* gray-400 */
}

.pac-item:hover {
    background-color: rgba(212, 175, 55, 0.08) !important; /* Premium gold hover background */
}

.pac-item:hover * {
    color: #ffffff !important;
}

.pac-item-query {
    color: #ffffff !important;
}

.pac-icon {
    opacity: 0.85 !important;
    filter: invert(0.9) brightness(1.5) !important; /* Elegant white/light grey icon for dark theme */
}

/* --- SCROLLBAR HIDING UTILITIES --- */
/* Hide scrollbars globally for elements with .scrollbar-hide class */
.scrollbar-hide {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide horizontal scrollbars on mobile & tablet for clean swiping */
@media (max-width: 1024px) {
    .overflow-x-auto {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    .overflow-x-auto::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* --- LIGHT MODE COMPATIBILITY & OVERRIDES --- */
body.light-mode.bg-black,
body.light-mode .bg-black,
body.light-mode .bg-gray-950,
body.light-mode .bg-zinc-950,
body.light-mode .bg-neutral-950,
body.light-mode .bg-neutral-900,
body.light-mode .bg-gray-900,
body.light-mode .bg-zinc-900,
body.light-mode .bg-black\/80,
body.light-mode .bg-black\/50,
body.light-mode .bg-zinc-950\/50,
body.light-mode .bg-gray-950\/50 {
    background-color: var(--bg-primary) !important;
}

body.light-mode .text-white,
body.light-mode .text-gray-100,
body.light-mode .text-zinc-100 {
    color: var(--text-primary) !important;
}

body.light-mode .text-gray-300,
body.light-mode .text-gray-400,
body.light-mode .text-zinc-400,
body.light-mode .text-slate-300,
body.light-mode .text-slate-400 {
    color: var(--text-secondary) !important;
}

body.light-mode .text-gray-500,
body.light-mode .text-zinc-500,
body.light-mode .text-slate-500 {
    color: var(--text-muted) !important;
}

body.light-mode .border-white\/5,
body.light-mode .border-white\/10,
body.light-mode .border-zinc-800,
body.light-mode .border-gray-800,
body.light-mode .border-zinc-700 {
    border-color: var(--glass-border) !important;
}

body.light-mode .bg-white\/5,
body.light-mode .bg-white\/10,
body.light-mode .bg-zinc-800,
body.light-mode .bg-zinc-900,
body.light-mode .bg-neutral-900\/50,
body.light-mode .bg-zinc-900\/50 {
    background-color: var(--input-bg) !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

body.light-mode select option {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

body.light-mode .slider {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .slider:before {
    background-color: #6b7280 !important;
}

body.light-mode input:checked + .slider {
    background-color: rgba(212, 175, 55, 0.15) !important;
}

/* Table and interactive enhancements in light-mode */
body.light-mode tr.border-b {
    border-bottom-color: var(--glass-border) !important;
}

body.light-mode tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

body.light-mode .hover\:bg-white\/5:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Comprehensive opacity text and background adaptations */
body.light-mode .text-white\/90,
body.light-mode .text-white\/85,
body.light-mode .text-white\/80 {
    color: var(--text-primary) !important;
    opacity: 0.9 !important;
}
body.light-mode .text-white\/75,
body.light-mode .text-white\/70,
body.light-mode .text-white\/60,
body.light-mode .text-white\/50 {
    color: var(--text-secondary) !important;
    opacity: 0.75 !important;
}
body.light-mode .text-white\/40,
body.light-mode .text-white\/30,
body.light-mode .text-white\/20,
body.light-mode .text-white\/10 {
    color: var(--text-muted) !important;
    opacity: 0.5 !important;
}

body.light-mode .bg-white\/\[0\.01\],
body.light-mode .bg-white\/\[0\.02\],
body.light-mode .bg-white\/\[0\.03\],
body.light-mode .bg-white\/\[0\.05\],
body.light-mode .bg-white\/2,
body.light-mode .bg-white\/3,
body.light-mode .bg-white\/5,
body.light-mode .bg-white\/8,
body.light-mode .bg-white\/10,
body.light-mode .bg-white\/15,
body.light-mode .bg-white\/20 {
    background-color: var(--input-bg) !important;
}

body.light-mode .border-white\/5,
body.light-mode .border-white\/10,
body.light-mode .border-white\/20 {
    border-color: var(--glass-border) !important;
}

/* Deeper gold highlights and icons in light-mode */
body.light-mode .bg-gold\/10 {
    background-color: rgba(138, 109, 28, 0.08) !important;
}
body.light-mode .bg-gold\/20 {
    background-color: rgba(138, 109, 28, 0.15) !important;
}
body.light-mode .border-gold\/20 {
    border-color: rgba(138, 109, 28, 0.15) !important;
}
body.light-mode .border-gold\/30 {
    border-color: rgba(138, 109, 28, 0.25) !important;
}
body.light-mode .border-gold {
    border-color: var(--accent-gold) !important;
}
body.light-mode .hover\:text-gold:hover {
    color: var(--accent-gold) !important;
}
body.light-mode .hover\:border-gold\/20:hover {
    border-color: rgba(138, 109, 28, 0.15) !important;
}
body.light-mode .peer-checked\:text-gold:peer-checked {
    color: var(--accent-gold) !important;
}
body.light-mode .peer-checked\:border-gold\/30:peer-checked {
    border-color: rgba(138, 109, 28, 0.3) !important;
}
body.light-mode .text-gold {
    color: var(--accent-gold) !important;
}
body.light-mode i.text-gold {
    color: var(--accent-gold) !important;
}

/* Light Mode Status Badges Color Corrections for Maximum Readability and Professional Polish */

/* 1. Yellow/Amber: Pending Payment / At Origin / Pending Status */
body.light-mode .text-yellow-500,
body.light-mode .text-yellow-400,
body.light-mode .text-yellow-300,
body.light-mode .text-amber-550,
body.light-mode .text-amber-500,
body.light-mode .text-amber-400,
body.light-mode .text-amber-300 {
    color: #854d0e !important;
}
body.light-mode .bg-yellow-500\/10,
body.light-mode .bg-yellow-500\/20,
body.light-mode .bg-amber-500\/10,
body.light-mode .bg-amber-500\/20 {
    background-color: #fef9c3 !important; /* warm soft yellow */
}
body.light-mode .border-yellow-500\/20,
body.light-mode .border-yellow-500\/30,
body.light-mode .border-amber-500\/20,
body.light-mode .border-amber-500\/30 {
    border-color: #fef08a !important;
}

/* 2. Blue: Searching Driver (Broadcast Open) */
body.light-mode .text-blue-400,
body.light-mode .text-blue-500 {
    color: #1d4ed8 !important;
}
body.light-mode .bg-blue-500\/10,
body.light-mode .bg-blue-500\/20 {
    background-color: #eff6ff !important; /* soft elegant blue */
}
body.light-mode .border-blue-500\/20,
body.light-mode .border-blue-500\/30 {
    border-color: #bfdbfe !important;
}
body.light-mode .bg-blue-500 {
    background-color: #1d4ed8 !important;
}
body.light-mode .bg-blue-400 {
    background-color: #2563eb !important;
}

/* 3. Green/Emerald: Assigned / Completed / Paid */
body.light-mode .text-green-400,
body.light-mode .text-green-500,
body.light-mode .text-emerald-400,
body.light-mode .text-emerald-500 {
    color: #15803d !important;
}
body.light-mode .bg-green-500\/10,
body.light-mode .bg-green-500\/20,
body.light-mode .bg-emerald-500\/10 {
    background-color: #f0fdf4 !important; /* soft fresh green */
}
body.light-mode .border-green-500\/20,
body.light-mode .border-emerald-500\/20 {
    border-color: #bbf7d0 !important;
}

/* 4. Purple: En Route */
body.light-mode .text-purple-400,
body.light-mode .text-purple-500 {
    color: #7e22ce !important;
}
body.light-mode .bg-purple-500\/10,
body.light-mode .bg-purple-500\/20 {
    background-color: #faf5ff !important; /* soft elegant purple */
}
body.light-mode .border-purple-500\/20,
body.light-mode .border-purple-500\/30 {
    border-color: #e9d5ff !important;
}

/* 5. Red: Cancelled / No Cars */
body.light-mode .text-red-400,
body.light-mode .text-red-500 {
    color: #b91c1c !important;
}
body.light-mode .bg-red-500\/10,
body.light-mode .bg-red-500\/20 {
    background-color: #fef2f2 !important; /* soft danger red */
}
body.light-mode .border-red-500\/20,
body.light-mode .border-red-500\/30,
body.light-mode .border-red-500\/50 {
    border-color: #fecaca !important;
}

/* Boost Button Override for Light Mode */
body.light-mode .btn-boost-ride {
    background-color: #fef3c7 !important;
    color: #b5680b !important;
    border-color: #fde68a !important;
}
body.light-mode .btn-boost-ride:hover {
    background-color: #b5680b !important;
    color: #ffffff !important;
    border-color: #b5680b !important;
}

/* Child Seat Options Card Overrides for Light Mode */
body.light-mode #child-seat-options label {
    background-color: var(--input-bg) !important;
    border-color: var(--glass-border) !important;
}
body.light-mode #child-seat-options label:hover {
    border-color: rgba(138, 109, 28, 0.3) !important;
}
body.light-mode #child-seat-options label input:checked ~ i,
body.light-mode #child-seat-options label input:checked ~ span {
    color: var(--accent-gold) !important;
}
body.light-mode #child-seat-options label input:checked ~ div:first-of-type {
    background-color: rgba(138, 109, 28, 0.1) !important;
    opacity: 1 !important;
}
body.light-mode #child-seat-options label input:checked ~ div:nth-of-type(2) {
    border-color: var(--accent-gold) !important;
}
body.light-mode #child-seat-options label i,
body.light-mode #child-seat-options label span {
    color: var(--text-muted) !important;
}

/* Google Places Autocomplete Light Mode Overrides */
body.light-mode .pac-container {
    background-color: #ffffff !important;
    border-color: rgba(138, 109, 28, 0.2) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 10px rgba(138, 109, 28, 0.05) !important;
}
body.light-mode .pac-item {
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}
body.light-mode .pac-item * {
    color: #6b7280 !important; /* text-gray-500 */
}
body.light-mode .pac-item:hover {
    background-color: rgba(138, 109, 28, 0.08) !important;
}
body.light-mode .pac-item:hover * {
    color: #111827 !important; /* text-gray-900 */
}
body.light-mode .pac-item-query {
    color: #111827 !important; /* text-gray-900 */
}
body.light-mode .pac-icon {
    filter: grayscale(1) opacity(0.5) !important; /* beautiful matching gray icons in light mode */
}

/* Modals Light Mode Overrides (Favorite Route & Boost Ride) */
body.light-mode #modal-favorite-route > div:nth-child(2),
body.light-mode #modal-boost-ride > div:nth-child(1) {
    background-color: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

body.light-mode #modal-favorite-route h3,
body.light-mode #modal-boost-ride h3 {
    color: var(--text-primary) !important;
}

body.light-mode #modal-favorite-route p,
body.light-mode #modal-boost-ride p {
    color: var(--text-muted) !important;
}

/* Form Inputs inside Modal */
body.light-mode #modal-favorite-route input {
    background-color: var(--input-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

body.light-mode #modal-favorite-route input::placeholder {
    color: #9ca3af !important;
}

body.light-mode #modal-favorite-route input:focus {
    border-color: var(--accent-gold) !important;
}

/* Cancel Button */
body.light-mode #btn-cancel {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}

body.light-mode #btn-cancel:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

/* Boost Modal Elements */
body.light-mode #modal-boost-ride .bg-black\/40 {
    background-color: #f9fafb !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode #modal-boost-ride #boost-current-driver {
    color: #111827 !important;
}

body.light-mode #modal-boost-ride .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode #modal-boost-ride .btn-boost-percent {
    background-color: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    color: #374151 !important;
}

body.light-mode #modal-boost-ride .btn-boost-percent:hover {
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    background-color: rgba(138, 109, 28, 0.05) !important;
}

body.light-mode #modal-boost-ride .btn-boost-percent.active {
    background-color: var(--accent-gold) !important;
    color: #ffffff !important;
    border-color: var(--accent-gold) !important;
}

body.light-mode #modal-boost-ride #boost-current-markup,
body.light-mode #modal-boost-ride #boost-new-markup {
    color: #15803d !important;
}

body.light-mode #modal-boost-ride .bg-yellow-500\/5 {
    background-color: rgba(138, 109, 28, 0.05) !important;
}

body.light-mode #modal-boost-ride #btn-confirm-boost:disabled {
    background-color: #e5e7eb !important;
    color: #9ca3af !important;
    border-color: transparent !important;
}

/* ==========================================================================
   ELEGANT LIGHT MODE TOOLTIP & POPUP CARD OVERRIDES
   ========================================================================== */
body.light-mode #altus-tooltip,
body.light-mode #altus-payment-tooltip,
body.light-mode [id^="stat-help-"],
body.light-mode #markup-info-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: rgba(138, 109, 28, 0.25) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    color: var(--text-secondary) !important;
}

body.light-mode #altus-tooltip p,
body.light-mode #altus-payment-tooltip p,
body.light-mode [id^="stat-help-"] p,
body.light-mode #markup-info-card p,
body.light-mode #altus-payment-tooltip div,
body.light-mode [id^="stat-help-"] div,
body.light-mode #markup-info-card div {
    color: var(--text-secondary) !important;
}

body.light-mode #altus-tooltip b,
body.light-mode #altus-payment-tooltip b,
body.light-mode [id^="stat-help-"] b,
body.light-mode #markup-info-card b,
body.light-mode #altus-tooltip strong,
body.light-mode #altus-payment-tooltip strong,
body.light-mode [id^="stat-help-"] strong,
body.light-mode #markup-info-card strong {
    color: var(--text-primary) !important;
}

body.light-mode #markup-info-card div.bg-gold\/5 {
    background-color: rgba(138, 109, 28, 0.04) !important;
    border-color: rgba(138, 109, 28, 0.15) !important;
}

body.light-mode #altus-tooltip::after {
    border-top-color: #ffffff !important;
}

/* ==========================================================================
   LANDING PAGE HIGH CONVERSION STYLES (PORTAL PARCEIRO AIRBNB)
   ========================================================================== */

/* Custom variables */
:root {
    --airbnb-coral: #111111; /* Changed from green to sleek Black Charcoal for a majestic Black & Gold theme */
    --altus-gold: #d4af37;
    --luxury-dark: #050505;
    --card-bg-dark: #0d0d0d;
}

/* Landing view container */
#landing-view {
    font-family: 'Inter', sans-serif;
    background-color: var(--luxury-dark);
    color: #d1d5db;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

.text-gradient-coral-gold {
    background: linear-gradient(135deg, var(--airbnb-coral) 0%, var(--altus-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-coral-gold-gradient {
    background: linear-gradient(135deg, var(--airbnb-coral) 0%, var(--altus-gold) 100%);
}

.bg-coral-gradient {
    background: linear-gradient(135deg, var(--airbnb-coral) 0%, #333333 100%);
}

/* Buttons */
.btn-gold-glow {
    background-color: var(--altus-gold);
    color: #000000;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold-glow:hover {
    background-color: #ffffff;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

.btn-coral-gold-glow {
    position: relative;
    overflow: hidden; /* Encapsulates the golden ray shimmer reflection */
    background: linear-gradient(135deg, var(--airbnb-coral) 0%, var(--altus-gold) 100%);
    color: #ffffff;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Elegant Metallic Ray Shimmer Reflection Effect */
.btn-coral-gold-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.45),
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-25deg);
    transition: none;
    z-index: -1;
}

/* Shimmer ray glides flawlessly across the gold surface on hover */
.btn-coral-gold-glow:hover::before {
    left: 150%;
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-coral-gold-glow:hover {
    box-shadow: 0 20px 45px -5px rgba(212, 175, 55, 0.45);
    transform: translateY(-3px) scale(1.015);
    background: linear-gradient(135deg, #1f1f1f 0%, var(--altus-gold) 100%); /* Adds subtle 3D lighting depth */
}

.btn-coral-gold-glow:active {
    transform: translateY(-1px) scale(0.99);
}

/* Cyber Glass Cards */
.landing-card {
    background: rgba(13, 13, 13, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 2rem;
}

/* Highlight state for the active carousel card */
.carousel-slide.active-slide .landing-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(13, 13, 13, 0.95) 70%);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Prevent default browser focus outline on dots */
#carousel-dots button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Carousel Slide States */
.carousel-slide {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.carousel-slide.active-slide {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 10;
}

.carousel-slide.prev-slide {
    opacity: 0;
    transform: translateX(-30px);
    z-index: 0;
}

.carousel-slide.next-slide {
    opacity: 0;
    transform: translateX(30px);
    z-index: 0;
}

/* Progress bar animation */
@keyframes progress-fill-carousel {
    from { width: 0%; }
    to { width: 100%; }
}
.carousel-slide.active-slide .carousel-progress-bar {
    animation: progress-fill-carousel 6s linear forwards;
}

/* Responsive heights for the slide track */
.carousel-track {
    height: 420px;
}
@media (min-width: 480px) {
    .carousel-track {
        height: 340px;
    }
}
@media (min-width: 640px) {
    .carousel-track {
        height: 260px;
    }
}
@media (min-width: 768px) {
    .carousel-track {
        height: 220px;
    }
}

/* Inactive slide description text style */
.carousel-slide .landing-card p {
    color: #9ca3af; /* text-gray-400 equivalent */
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Active slide description text style */
.carousel-slide.active-slide .landing-card p {
    color: #f3f4f6; /* text-gray-100 equivalent for ultra readability */
}

/* Floating Mockup */
.mockup-float {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

/* Scanner line overlay for cards */
.hover-glow:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.05);
}

/* Premium Fleet Cards UI */
.fleet-card {
    background: rgba(13, 13, 13, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2.5rem;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1.8rem;
    height: 100%;
}

.fleet-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: all 0.5s ease;
}

.fleet-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.3);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.04) 0%, rgba(13, 13, 13, 0.95) 75%);
    box-shadow: 0 30px 60px -15px rgba(212, 175, 55, 0.15);
}

.fleet-card:hover::before {
    background: linear-gradient(90deg, transparent, var(--altus-gold), transparent);
}

/* First Class & VIP Special Card Style */
.fleet-card-gold {
    border-color: rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.02);
    box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.05);
}

.fleet-card-gold:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(13, 13, 13, 0.98) 75%);
    border-color: var(--altus-gold);
    box-shadow: 0 30px 60px -15px rgba(212, 175, 55, 0.25);
}

/* LIGHT LUXURY MODE OVERRIDES (PREMIUM CASHMERE SAND) */
#landing-view {
    background-color: #eae6df !important;
    color: #2d3748 !important;
}

/* Light-mode section backgrounds */
#landing-view section {
    background-color: #eae6df !important;
    color: #2d3748 !important;
}

#landing-view section:nth-of-type(even) {
    background-color: #dfd9ce !important; /* Elegant warm sand-beige contrast */
}

/* Main typography overrides (Elegant Soft Charcoal) */
#landing-view h1,
#landing-view h2,
#landing-view h3,
#landing-view h4 {
    color: #1a202c !important;
}

/* Dynamic carousel titles coloring */
.carousel-slide h3 {
    color: #718096 !important;
}

.carousel-slide.active-slide h3 {
    color: #1a202c !important;
}

#landing-view p {
    color: #3e4857 !important;
}

/* Dynamic color alignments */
#landing-view .text-white {
    color: #1a202c !important;
}

#landing-view .text-gray-400 {
    color: #4a5568 !important;
}

#landing-view .text-gray-300 {
    color: #2d3748 !important;
}

/* Trust badge light mode override */
#landing-view .inline-flex.items-center.gap-2.px-4.py-2.rounded-full.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}
#landing-view .inline-flex.items-center.gap-2.px-4.py-2.rounded-full.bg-white\/5 span {
    color: #3e4857 !important;
}

/* Light luxury cyber glass cards styling (High-Performance Soft Cashmere Style) */
.landing-card {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Highlight card in active carousel slide */
.carousel-slide.active-slide .landing-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 0.88) 70%) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.carousel-slide.active-slide .landing-card p {
    color: #1a202c !important;
}

.carousel-slide .landing-card p {
    color: #4a5568 !important;
}

/* Fleet cards light-mode styling */
.fleet-card {
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.fleet-card .text-white {
    color: #1a202c !important;
}

.fleet-card .text-gray-400 {
    color: #4a5568 !important;
}

.fleet-card .text-gray-300 {
    color: #2d3748 !important;
}

.fleet-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.04) 0%, rgba(255, 255, 255, 0.88) 75%) !important;
    box-shadow: 0 25px 50px -15px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.fleet-card .flex.gap-3.text-\[10px\].uppercase.font-bold {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #4a5568 !important;
}

.fleet-card-gold {
    border-color: rgba(212, 175, 55, 0.35) !important;
    background: rgba(212, 175, 55, 0.03) !important;
    box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.05) !important;
}

.fleet-card-gold:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(255, 255, 255, 0.88) 75%) !important;
    border-color: var(--altus-gold) !important;
    box-shadow: 0 25px 50px -15px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.fleet-card-gold .text-gold {
    color: #b78a1e !important;
}

.fleet-card-gold .flex.gap-3.text-\[10px\].uppercase.font-bold {
    background-color: rgba(212, 175, 55, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: #b78a1e !important;
}

/* Pain Points grids styling */
#landing-view .grid.grid-cols-1.md\:grid-cols-3.gap-8 .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

#landing-view .grid.grid-cols-1.md\:grid-cols-3.gap-8 .bg-white\/5 .text-white {
    color: #1a202c !important;
}

/* Concierge items list */
#landing-view ul.space-y-6.text-left .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

#landing-view .mt-10.flex.items-center.justify-center.gap-2.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #4a5568 !important;
}

/* Retain Gold Banner dark-contrast appearance */
#landing-view section.py-28.bg-\[\#d4af37\] {
    background-color: #d4af37 !important;
    color: #000000 !important;
}

#landing-view section.py-28.bg-\[\#d4af37\] h2,
#landing-view section.py-28.bg-\[\#d4af37\] p {
    color: #000000 !important;
}

/* Retain Premium Dark Footer contrast */
#landing-view footer {
    background-color: #000000 !important;
    color: #718096 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#landing-view footer span, 
#landing-view footer a {
    color: #a0aec0 !important;
}
#landing-view footer a:hover {
    color: #ffffff !important;
}

/* Fix bottom CTA button readability with high-contrast text color */
#landing-view #cta-btn {
    color: #ffffff !important;
}
#landing-view #cta-btn:hover {
    color: #000000 !important;
}

/* Luxury dynamic color pulse effect without layout shift or zoom */
.pulse-zoom-effect {
    animation: pulseColor 2.5s infinite ease-in-out;
    font-weight: 700;
}

@keyframes pulseColor {
    0%, 100% {
        color: inherit;
    }
    50% {
        color: #d4af37 !important;
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
    }
}

/* Premium Highlighted Emerald Button with slow, elegant shimmer sweep */
.btn-emerald-shimmer {
    position: relative !important;
    overflow: hidden !important;
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #047857 !important; /* Stronger green text for perfect sand background contrast */
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.05) !important;
}

.btn-emerald-shimmer i {
    color: #10b981 !important; /* Vibrant green for the icon */
}

.btn-emerald-shimmer:hover {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    color: #065f46 !important;
}

.btn-emerald-shimmer::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-20deg) !important;
    animation: shimmerSweep 4.5s infinite ease-in-out !important;
    pointer-events: none !important;
}

@keyframes shimmerSweep {
    0% {
        left: -150%;
    }
    18%, 100% {
        left: 200%;
    }
}

/* Elegant high-zoom pulse effect for checkout total amount */
@keyframes pulseZoom {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0));
    }
    50% {
        transform: scale(1.22); /* Bold 22% high-zoom pulse */
        filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.45));
        font-weight: 800;
    }
}

.animate-pulse-zoom {
    display: inline-block !important;
    animation: pulseZoom 2.2s infinite ease-in-out !important;
    transform-origin: right center !important; /* Elegant zoom anchoring to the right */
}