/* DriveNow — global styles shared by every page */

html { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.font-display { font-family: 'Sora', system-ui, sans-serif; }
::selection { background: #4f46e5; color: #fff; }

/* ---------- reveal (kept visible — no JS scroll observer) ---------- */
.reveal { opacity: 1; transform: none; }

/* ---------- gradient text ---------- */
.grad-text {
    background: linear-gradient(90deg, #818cf8, #f59e0b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- navbar (transparent over dark hero -> white on scroll) ---------- */
#nav .nav-link { color: rgba(255,255,255,.82); }
#nav .nav-link:hover, #nav .nav-link.active { color: #fff; }
#nav .nav-logo { color: #fff; }
#nav .nav-login { color: #fff; }
#nav .nav-burger { color: #fff; }
#nav.nav-scrolled { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); box-shadow: 0 8px 30px -12px rgba(2,6,23,.14); }
#nav.nav-scrolled .nav-link { color: #475569; }
#nav.nav-scrolled .nav-link:hover, #nav.nav-scrolled .nav-link.active { color: #4f46e5; }
#nav.nav-scrolled .nav-logo, #nav.nav-scrolled .nav-burger { color: #0b1120; }
#nav.nav-scrolled .nav-login { color: #4f46e5; }
#nav .nav-link.active::after { width: 100%; }

/* ---------- car cards ---------- */
.card-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.car-card:hover .card-img { transform: scale(1.08); }

/* ---------- subtle grid pattern for dark heroes ---------- */
.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- forms ---------- */
input[type="range"] { accent-color: #4f46e5; }
input.invalid, select.invalid, textarea.invalid { border-color: #fb7185 !important; box-shadow: 0 0 0 3px rgba(251,113,133,.18); }

/* toggle switch (admin settings) */
.toggle { position: relative; display: inline-flex; width: 46px; height: 26px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: .25s; }
.toggle .thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; transition: .25s; box-shadow: 0 2px 6px rgba(2,6,23,.2); }
.toggle input:checked ~ .track { background: #4f46e5; }
.toggle input:checked ~ .thumb { transform: translateX(20px); }

/* ---------- modals & drawers ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.25rem; visibility: hidden; }
.modal .modal-overlay { position: absolute; inset: 0; background: rgba(2,6,23,.55); backdrop-filter: blur(4px); opacity: 0; transition: .3s; }
.modal .modal-box { position: relative; opacity: 0; transform: translateY(24px) scale(.97); transition: .3s cubic-bezier(.2,.7,.2,1); max-height: 92vh; overflow-y: auto; }
.modal.open { visibility: visible; }
.modal.open .modal-overlay { opacity: 1; }
.modal.open .modal-box { opacity: 1; transform: none; }

.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer .drawer-overlay { position: absolute; inset: 0; background: rgba(2,6,23,.55); backdrop-filter: blur(4px); opacity: 0; transition: .3s; }
.drawer .drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 30rem; background: #fff; transform: translateX(100%); transition: .35s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
.drawer.open { visibility: visible; }
.drawer.open .drawer-overlay { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }

/* ---------- FAQ accordion ---------- */
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq .faq-icon { transition: transform .3s; }
details.faq[open] .faq-icon { transform: rotate(45deg); }

/* ---------- tables ---------- */
.tbl th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 600; text-align: left; padding: .8rem 1rem; white-space: nowrap; }
.tbl td { padding: 1rem; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: #f8fafc; }

/* ---------- misc ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Modern calendar used by the homepage availability search. */
.flatpickr-calendar {
    border: 0 !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
    padding: 0.5rem !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays {
    background: #4f46e5 !important;
    color: #fff !important;
}

.flatpickr-months .flatpickr-month {
    border-radius: 0.9rem 0.9rem 0 0 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
span.flatpickr-weekday {
    color: #fff !important;
    font-weight: 700 !important;
}

.flatpickr-day {
    border-radius: 0.75rem !important;
}

.flatpickr-day:hover {
    background: #eef2ff !important;
    border-color: #eef2ff !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    box-shadow: none !important;
}

.flatpickr-day.today {
    border-color: #f59e0b !important;
}