/* ==========================================================================
   CarRental — public surface styles
   These rules complement the design tokens defined in _LayoutPublic.cshtml.
   Back-compat class names are retained; their values now route through the
   token layer so every page benefits from the refreshed palette/motion.
   ========================================================================== */

/* --- Star rating widget --- */
.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
}
.star-rating input { display: none; }
.star-rating label {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--ink-200);
    transition: color var(--dur-base) var(--ease-soft);
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: var(--champagne);
}

/* --- Glass morphism card (retained API, refined) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(16, 24, 40, 0.06);
    box-shadow: var(--shadow-soft);
}

/* --- Card hover glow (retained API, tuned easing) --- */
.card-hover-glow {
    transition: transform var(--dur-slow) var(--ease-out-expo),
                box-shadow var(--dur-slow) var(--ease-out-expo);
}
.card-hover-glow:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* --- Map containers --- */
.map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ink-200);
}
.leaflet-container { border-radius: var(--radius-lg); }

/* --- Custom scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink-50); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* --- Hero gradient (retained API, refined to warm ink ramp for premium feel) --- */
.hero-gradient {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
        linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 60%, var(--ink-800) 100%);
}

/* --- Amber glow button (retained API, now uses champagne token) --- */
.btn-amber-glow:hover {
    box-shadow: 0 0 24px color-mix(in srgb, var(--champagne) 45%, transparent);
}

/* --- Status pills — ink body with a small colored dot indicator (replaces pastel fills) --- */
.status-pending, .status-accepted, .status-enroute, .status-arrived,
.status-started, .status-completed, .status-cancelled {
    display: inline-flex !important; align-items: center; gap: 0.55rem;
    padding: 0.35rem 0.9rem !important;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
    border-radius: 9999px !important;
    background-color: var(--ink-900) !important;
    color: #fff !important;
    border: 1px solid var(--ink-800);
}
.status-pending::before, .status-accepted::before, .status-enroute::before,
.status-arrived::before, .status-started::before, .status-completed::before,
.status-cancelled::before {
    content: ''; width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0;
}
.status-pending::before   { background: #F0B429; }
.status-accepted::before  { background: #60A5FA; }
.status-enroute::before   { background: #22D3EE; }
.status-arrived::before   { background: #818CF8; }
.status-started::before   { background: #34D399; }
.status-completed::before { background: #34D399; }
.status-cancelled::before { background: #F87171; }

/* --- Toast --- */
.toast-light {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    color: var(--ink-900);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}

/* --- Mobile hamburger --- */
.hamburger-line { transition: transform var(--dur-slow) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo); }

/* --- Live indicator pulse --- */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.9); }
}
.pulse-dot { animation: pulse-dot 2s var(--ease-soft) infinite; }

/* --- Card shadows (retained API) --- */
.card-shadow    { box-shadow: var(--shadow-soft); }
.card-shadow-lg { box-shadow: var(--shadow-lg); }

/* --- Image treatment: subtle ink-tone placeholder while loading --- */
img { color: transparent; }
img[loading="lazy"] { background: var(--ink-100); }

/* --- Focus ring — restrained ink outline + soft brand halo --- */
:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 1px solid var(--ink-700);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 6%, transparent);
    border-radius: var(--radius-sm);
}

/* --- Custom select — premium chevron, ink-tone surface, sitewide ---
   Auto-applies to:
   - Bootstrap classic .form-select
   - Bare <select> elements (so legacy markup doesn't need rewriting)
   - Tailwind-styled selects via the .select-premium opt-in class
   The native browser caret is removed via appearance:none, then we paint
   our own SVG chevron in the brand-aware ink palette.                    */
select.form-select,
select.select-premium,
select:not(.select-native) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 12px 8px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236F6B64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}
select.form-select:hover,
select.select-premium:hover,
select:not(.select-native):hover {
    border-color: var(--ink-400, #9A958B);
}
select.form-select:focus,
select.select-premium:focus,
select:not(.select-native):focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D4430F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select::-ms-expand { display: none; }