/* ZO HER Mobility cab demo: custom styles (extracted from the inline <style> block) */
/* Modern Mobility Typography & Surface System */
body {
    background-color: #F7F9FC;
    color: #141C2B;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    letter-spacing: -0.008em;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.025em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #F7F9FC;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2563EB;
}

/* Frosted Navigation Surface */
.glass-cloud {
    background: rgba(247, 249, 252, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 200-350ms Interactive Transitions */
.tab-btn,
.step-pill,
.ui-btn,
.fleet-card,
.field-card {
    transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Fleet Image Hover */
.fleet-img {
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet-card:hover .fleet-img {
    transform: scale(1.03);
}

/* Step & Hero Animations */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-slide {
    animation: fadeInSlide 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Calendar Day States */
.cal-day {
    transition: all 180ms ease;
}
.cal-day:hover:not(:disabled) {
    background-color: #E6EBF2;
    color: #141C2B;
}
.cal-day.selected {
    background-color: #2563EB;
    color: #FFFFFF;
    font-weight: 700;
}
.cal-day.in-range {
    background-color: #EFF6FF;
    color: #1D4ED8;
    font-weight: 600;
}

.input-error {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* Respect Reduced-Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fleet-card:hover .fleet-img {
        transform: none !important;
    }
}