/* ============================================
   AIRPORT BOOKING MVP - MAIN STYLESHEET
   ============================================
   
   TABLE OF CONTENTS:
   1. CSS Variables & Design System
   2. Base Styles & Reset
   3. Layout & Core Components
   4. Step Components & Form Elements
   5. Airport Selection Grid
   6. Date & Time Components
   7. Action Buttons & Navigation
   8. Vehicle Selection Panel
   9. Mobile Controls & Interactions
   10. Booking Confirmation Modal
   11. Animations & Transitions
   12. Responsive Breakpoints
   ============================================ */

/* ============================================
   1. CSS VARIABLES & DESIGN SYSTEM
   ============================================ */

:root {
    /* Color System */
    --primary-gradient-start: #FF9933;
    --primary-gradient-end: #FF5733;
    --primary: #FF9500;
    --primary-dark: #FF5733;
    --primary-light: rgba(255, 149, 0, 0.15);
    --secondary: #3B82F6;
    --success: #32D74B;
    --error: #FF453A;
    --warning: #FFD60A;

    /* Text Colors - Dark Theme */
    --text-primary: #FFFFFF;
    --text-secondary: #8E8E93;
    --text-light: #636366;

    /* Surfaces & Backgrounds - Dark Theme */
    --white: #FFFFFF;
    --panel-bg: #2C2C2E;
    --background: #1C1C1E;
    --surface: #3A3A3C;
    --surface-light: #48484A;
    --border: #48484A;
    --border-light: #545456;

    /* Spacing (4px grid) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Typography */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 28px;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Elevation (Shadows) - Enhanced for Dark Theme */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 4px 12px rgba(255, 149, 0, 0.3);

    /* Animation Timing */
    --transition-fast: 0.075s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1010;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================
   2. BASE STYLES & RESET
   ============================================ */

/* Global Elements */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--background);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Form Elements */
button, input, select {
    font-family: inherit;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    background: none;
}

/* Utility Classes */

.hidden { display: none; }

/* ============================================
   2. LAYOUT & CORE COMPONENTS
   ============================================ */

/* App Container */

.app-container {
    max-width: 576px;
    margin: 0 auto;
    padding: var(--space-lg);
    min-height: 100vh;
}

/* Start Search Button */
.start-search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
    border: none;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--white);
    transition: all var(--transition-base);
}

.start-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}

.start-search-btn:active {
    transform: scale(0.98);
}

.start-search-btn svg {
    width: 20px;
    height: 20px;
}

/* Booking Container */
.booking-container {
    display: none;
    max-width: 576px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--panel-bg) 0%, #262628 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: all var(--transition-slow);
    height: auto;
}

.booking-container.active {
    display: block;
    animation: fadeIn var(--transition-slow) ease;
}

/* Progress Bar - Ultra Minimal Uber Style */
.progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px var(--space-lg);
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
}

.progress-step {
    display: flex;
    align-items: center;
    transition: all var(--transition-base);
}

/* Hide labels for minimal design */
.step-label {
    display: none;
}

/* Minimal dot style instead of numbers */
.step-number {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border);
    font-size: 0;
    transition: all var(--transition-base);
}

.progress-step.active .step-number {
    background: var(--primary);
    width: 10px;
    height: 10px;
}

.progress-step.completed .step-number {
    background: var(--success);
}

.progress-line {
    width: 40px;
    height: 1px;
    background: var(--border);
    margin: 0 8px;
    position: relative;
    overflow: hidden;
}

.progress-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width var(--transition-slower) ease;
}

.progress-line.active::after { width: 100%; }

/* Summary Bar - Compact Version */
.summary-bar {
    display: none;
    padding: 8px var(--space-lg);
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

/* Mobile optimization - Keep desktop-like compact layout */
@media (max-width: 430px) { /* iPhone 14 Pro Max and smaller */
    .summary-bar {
        padding: 6px 12px;
    }
}

@media (max-width: 390px) { /* iPhone 14/13/12 Pro */
    .summary-bar {
        padding: 5px 10px;
    }
}

@media (max-width: 375px) { /* iPhone SE, older models */
    .summary-bar {
        padding: 4px 8px;
    }
}

.summary-bar.visible { display: block; }

.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

/* Back button in summary bar - more compact */
.summary-bar .back-btn {
    height: 30px;
    padding: 6px 12px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
    position: static; /* Override any absolute positioning */
}

.summary-bar .back-btn:hover {
    background: rgba(255, 149, 0, 0.05);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.summary-bar .back-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.summary-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
}

.summary-label { color: var(--text-secondary); }

.summary-value {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-align: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
    font-size: 14px;
}

.edit-btn {
    height: 30px;
    padding: 6px 12px;
    min-width: 50px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.edit-btn:hover {
    background: rgba(255, 149, 0, 0.05);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edit-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Panel System */
.panels-wrapper {
    display: flex;
    transition: transform var(--transition-slower);
}

.panels-wrapper.show-when { transform: translateX(-100%); }
.panels-wrapper.show-vehicle { transform: translateX(-200%); }

.panel {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(135deg, var(--panel-bg) 0%, #28282A 100%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.panel-content {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    overflow-y: auto;
    padding-bottom: 0;
}

/* Add this right after to override for vehiclePanel specifically */
#vehiclePanel .panel-content {
    overflow: visible;
}

.panel h2 {
    font-size: 17px;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

/* panel-actions removed - buttons moved to schedule-section for consistency */
/* Legacy panel-actions styles kept for reference only */
.panel-actions {
    display: none; /* Deprecated - use schedule-section instead */
    align-items: center;
    justify-content: center;
}

/* Mode Selector */
.mode-selector {
    display: flex;
    gap: var(--space-xs);
    background: rgba(255, 149, 0, 0.08);
    padding: var(--space-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 149, 0, 0.2);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

.mode-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    transition: all var(--transition-base);
    font-size: var(--font-sm);
}

.mode-btn:hover { color: var(--text-primary); }
.mode-btn.active {
    background: rgba(255, 149, 0, 0.15);
    color: var(--primary);
    box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.3);
}

.mode-icon { font-size: var(--font-xl); }

/* ============================================
   3. STEP COMPONENTS & FORM ELEMENTS
   ============================================ */

/* Step Components */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Space optimization - first step without header */
.step-section:first-child {
    margin-top: 0;
}

/* Airport step with visible header */
.step-section .step-header {
    margin-bottom: var(--space-sm);
}

.step-section {
    transition: opacity var(--transition-slow);
}

.step-section.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.step-badge {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.step-badge.completed {
    animation: checkmarkPop 0.4s ease;
}

.step-badge-number {
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
}

/* Form Inputs */
.input-wrapper { position: relative; }

.address-input {
    width: 100%;
    padding: var(--space-md) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    color: var(--text-primary);
    transition: all var(--transition-base);
    min-height: 48px;
}

/* Make placeholder more visible */
.address-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.address-input:focus {
    border-color: var(--primary);
    background: rgba(255, 149, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.address-input:disabled { opacity: 0.5; cursor: not-allowed; }
.address-input.validated {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.address-input.error {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.05);
}

.input-loading {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.input-loading.visible { display: block; }

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

/* Error Messages */
.error-message {
    color: var(--error);
    font-size: var(--font-xs);
    margin-top: var(--space-xs);
    display: none;
}

.error-message.visible { display: block; }

/* Flow Connectors */
.flow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    opacity: 0.3;
    transition: opacity var(--transition-slow);
    margin: var(--space-xs) 0;
}

.flow-connector.active { opacity: 1; }

.connector-line {
    width: 2px;
    height: 24px;
    background: var(--border);
    transition: background var(--transition-slow);
}

.flow-connector.active .connector-line { background: var(--primary); }

.connector-icon {
    position: absolute;
    color: var(--primary);
    font-size: var(--font-base);
}

/* ============================================
   4. AIRPORT SELECTION GRID
   ============================================ */
.airport-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.airport-option {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--surface);
    transition: all var(--transition-base);
}

.airport-option:hover:not(:disabled) {
    border-color: rgba(255, 149, 0, 0.5);
    background: rgba(255, 149, 0, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 149, 0, 0.15);
}

.airport-option.selected {
    border-color: var(--primary);
    background: rgba(255, 149, 0, 0.12);
    box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.3);
}

.airport-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.airport-code {
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.airport-name {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

/* Arrival Info */
.arrival-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--background);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    border: 1px solid var(--border);
}

.arrival-icon {
    font-size: var(--font-lg);
    margin-top: 2px;
}

.arrival-details { flex: 1; }

.arrival-title {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.trip-duration {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: var(--font-normal);
}

.panel-actions .arrival-info {
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

/* ============================================
   5. DATE & TIME COMPONENTS
   ============================================ */
.date-section { 
    margin-bottom: var(--space-md);
    margin-top: 0;
}

/* Time section with reduced spacing */
.time-section { margin-bottom: var(--space-md); }

/* Time selector container */
.time-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.date-section h3,
.time-section h3,
.flight-section h3 {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

/* Compact section labels for space efficiency */
.section-label {
    font-size: 14px;
    font-weight: var(--font-medium);
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Date Selection */
.date-selection {
    display: flex;
    gap: 6px;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-xs);
}

.date-btn {
    flex: 1;
    padding: 10px 8px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all var(--transition-slow);
    text-align: center;
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.date-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.date-btn:hover:not(.active) {
    border-color: rgba(255, 149, 0, 0.4);
    background: rgba(255, 149, 0, 0.08);
    transform: translateY(-1px);
}

.date-btn .date-label {
    display: block;
    font-size: var(--font-xs);
    opacity: 0.8;
    margin-bottom: 2px;
}

.date-btn .date-value {
    display: block;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
}

/* Calendar */
.calendar-container {
    display: none;
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
}

.calendar-container.visible { display: block; }

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.calendar-nav {
    background: none;
    border: none;
    font-size: var(--font-lg);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);
}

.calendar-nav:hover { 
    background: rgba(255, 149, 0, 0.1);
    color: var(--primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-xs);
}

.calendar-day-header {
    text-align: center;
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    color: var(--text-light);
    padding: var(--space-xs);
}

.calendar-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: var(--text-primary);
}

.calendar-day:hover:not(.disabled) { 
    background: rgba(255, 149, 0, 0.1);
    color: var(--primary);
}
.calendar-day.selected {
    background: var(--primary);
    color: var(--white);
}
.calendar-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.calendar-day.today {
    background: rgba(255, 149, 0, 0.15);
    color: var(--primary);
    font-weight: var(--font-bold);
    border: 2px solid var(--primary);
}
.calendar-day.today:hover:not(.disabled) { 
    background: rgba(255, 149, 0, 0.2);
}
.calendar-day.selected.today {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Time Input */
.time-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.time-select {
    padding: 8px var(--space-md);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    font-size: var(--font-base);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.time-select:focus { 
    border-color: var(--primary);
    background: rgba(255, 149, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.time-separator {
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
}

.time-note {
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-primary);
    background: rgba(255, 149, 0, 0.05);
    padding: 10px var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-weight: var(--font-medium);
    border: 1px solid rgba(255, 149, 0, 0.2);
}

/* Time Warning */
.time-warning {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 214, 10, 0.15);
    border: 1px solid rgba(255, 214, 10, 0.4);
    border-radius: var(--radius-md);
    color: var(--warning);
    font-size: var(--font-sm);
    margin-bottom: var(--space-md);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.time-warning.visible {
    opacity: 1;
    transform: translateY(0);
}

.warning-icon {
    font-size: var(--font-base);
}

/* Flight Input */
.flight-section { margin-top: var(--space-md); }

.flight-input {
    width: 100%;
    padding: 10px var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-base);
    transition: all var(--transition-base);
}

.flight-input:focus {
    border-color: var(--primary);
    background: rgba(255, 149, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

/* ============================================
   6. ACTION BUTTONS & NAVIGATION
   ============================================ */
.continue-btn,
.book-btn {
    flex: 1;  /* Allow equal distribution in schedule-section */
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
    color: var(--white);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    min-height: 52px;  /* Consistent height across all panels */
}

.continue-btn:hover:not(:disabled),
.book-btn:hover {
    background: linear-gradient(to right, var(--primary-gradient-end), var(--primary-gradient-start));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.continue-btn:disabled {
    background: var(--border);
    color: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
}

button.back-btn {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
    font-weight: var(--font-bold);
    font-family: inherit;
    transition: all var(--transition-base);
    background: rgba(255, 149, 0, 0.1) !important;
    border: 2px solid rgba(255, 149, 0, 0.3);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: var(--z-sticky);
    cursor: pointer;
    backdrop-filter: blur(10px);
}

/* Hide panel back buttons when summary bar is visible */
.summary-bar.visible ~ .panels-wrapper button.back-btn {
    display: none;
}

button.back-btn:hover {
    background: rgba(255, 149, 0, 0.2) !important;
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(255, 149, 0, 0.25);
    transform: scale(1.05);
    color: var(--white);
}

button.back-btn:active { transform: scale(0.95); }

.back-btn svg,
.continue-btn svg,
.book-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   7. VEHICLE SELECTION PANEL
   ============================================ */
.map-section {
    height: min(380px, 45vh);
    background: linear-gradient(135deg, #E8F5E9 0%, #B8E6B8 100%);
    position: relative;
}

/* Vehicle Panel Layout */
#vehiclePanel .map-section {
    height: 35vh;
    max-height: 280px;
    min-height: 200px;  /* Ensure map doesn't get too small */
    position: relative;
    flex-shrink: 0;
    background: none;
    overflow: hidden;
}

#vehiclePanel .content-section {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
    overflow: visible;  /* Remove !important, just use visible */
    background: var(--panel-bg);
    min-height: 0;
    padding-bottom: 20px;
}

/* Scroll indicator removed - was blocking content */

/* Map Time Badges */
.map-time-badge {
    position: absolute;
    background: rgba(26, 26, 28, 0.9);
    backdrop-filter: blur(10px);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 149, 0, 0.2);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all var(--transition-base);
    color: var(--text-primary);
}

.arrival-time {
    top: var(--space-xl);
    right: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.pickup-time {
    bottom: 80px;
    left: 30px;
    color: var(--text-primary);
}

.dropoff-label {
    top: 80px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    font-weight: 500;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.content-section {
    padding: 24px 20px;
    background: var(--panel-bg);
    min-height: calc(100vh - 320px);
    display: flex;
    flex-direction: column;
}


/* ============================================
   8. MOBILE CONTROLS & INTERACTIONS
   ============================================ */
.controls-row {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-bottom: 12px; /* Add consistent vertical spacing */
}

.controls-row:last-child {
    margin-bottom: 0; /* Remove margin from last control row */
}

.control-button {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 42px;  /* Increased for better touch targets */
    height: 42px;  /* Consistent height for all 4 buttons */
}

.control-button:hover {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.3);
}

.control-button:active {
    transform: scale(0.98);
    background: rgba(255, 149, 0, 0.12);
}

.control-icon {
    font-size: 14px;
    color: var(--primary);
}

.control-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    font-size: 10px;
    opacity: 0.6;
    margin-left: auto;  /* Push to the right */
    flex-shrink: 0;
}

/* Promo button specific styling */
.control-button.promo-button {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.2);
}

.control-button.promo-button:hover {
    background: rgba(255, 149, 0, 0.12);
    border-color: rgba(255, 149, 0, 0.3);
}

.control-button select {
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    margin-right: -4px;
}

.dropdown-arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-secondary);
}

/* Mobile Payment */
.payment-row-mobile {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 6px;
}

.payment-method-mobile {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 36px;
    height: 36px;
}

.payment-method-mobile:hover {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.3);
}

.payment-method-mobile:active {
    transform: scale(0.98);
    background: rgba(255, 149, 0, 0.12);
}

.card-icon {
    width: 24px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.payment-details {
    flex: 1;
}

.promo-button-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 36px;
    height: 36px;
}

.promo-button-mobile:hover {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.3);
}

.promo-button-mobile:active {
    transform: scale(0.98);
    background: rgba(255, 149, 0, 0.12);
}

/* ============================================
   9. BOOKING CONFIRMATION MODAL
   ============================================ */
.booking-confirmation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
}

.confirmation-content {
    background-color: var(--surface);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
}

.confirmation-header {
    margin-bottom: 1.5rem;
}

.confirmation-header h2 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.confirmation-trip-id {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.confirmation-details {
    margin-bottom: 2rem;
}

.confirmation-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.confirmation-item .label {
    font-weight: bold;
    color: var(--text-secondary);
}

.primary-btn {
    background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
    color: var(--white);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
}

.primary-btn:hover {
    background: linear-gradient(to right, var(--primary-gradient-end), var(--primary-gradient-start));
}

/* ============================================
   10. ANIMATIONS & TRANSITIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes checkmarkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Focus Styles */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Touch Targets */
.btn, 
.airport-option, 
.date-btn,
.mode-btn,
.calendar-day,
.time-select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Bottom Navigation Bar */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--space-sm) 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all var(--transition-base);
    cursor: pointer;
    padding: var(--space-xs);
}

.bottom-nav-item:hover {
    color: var(--primary);
}

.bottom-nav-item.active {
    color: var(--primary);
}

.bottom-nav-item svg,
.bottom-nav-item img {
    width: 24px;
    height: 24px;
    opacity: 0.8;
    transition: opacity var(--transition-base);
}

.bottom-nav-item:hover svg,
.bottom-nav-item:hover img,
.bottom-nav-item.active svg,
.bottom-nav-item.active img {
    opacity: 1;
}

.booking-container {
    padding-bottom: 60px; /* Make room for bottom nav */
}

/* ============================================
   11. RESPONSIVE BREAKPOINTS
   ============================================ */
.vehicle-display-mobile {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;  /* Space below carousel */
    flex-shrink: 0;  /* Prevent compression */
}

#vehiclePanel {
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--panel-bg);
    transform: translateX(0);
}

#vehicleMap {
    width: 100%;
    height: 100%;
}

#vehiclePanel .map-time-badge {
    position: absolute;
    background: var(--surface);
    padding: 8px 14px;
    border-radius: 24px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 5;
}

#vehiclePanel .arrival-time {
    top: calc(env(safe-area-inset-top, 20px) + 10px);
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
}

#vehiclePanel .pickup-time {
    bottom: 60px;
    left: 16px;
    background: #1a1a1a;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.time-period {
    font-size: 14px;
    opacity: 0.9;
}

#vehiclePanel .dropoff-label {
    top: 80px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 12px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 500;
}

/* Hide on very small screens */
@media (max-width: 350px) {
    #vehiclePanel .dropoff-label {
        display: none;
    }
}

#vehiclePanel h2 {
    display: none;
}

/* Panel actions removed - no longer used */

/* Schedule section - consistent action buttons for all panels */
.schedule-section {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    background: var(--panel-bg);
}

#vehiclePanel .book-btn {
    flex: 1;
    background: #DC2626;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.2s;
}

#vehiclePanel .book-btn:hover {
    background: #B91C1C;
    transform: translateY(-1px);
}

#vehiclePanel .book-btn:active {
    transform: scale(0.98);
}

/* Book button is always active - no disabled state needed */
/* #vehiclePanel .book-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
} */

.btn-main-text {
    font-size: 16px;
    font-weight: 600;
}

.btn-sub-text {
    font-size: 13px;
    opacity: 0.9;
}

.calendar-button-mobile {
    width: 52px;
    height: 52px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.calendar-button-mobile:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.calendar-button-mobile:active {
    transform: scale(0.95);
}

/* Responsive Design */
@media (max-width: 480px) {
    .app-container { padding: var(--space-md); }

    /* All vehicle carousel styles moved to vehicle-carousel-standalone.html */

    /* Mobile summary bar - Match desktop compact style */
    .summary-content {
        gap: 8px;
        padding: 0;
        min-height: 32px;
        max-height: 36px;
        display: flex;
        flex-direction: row !important; /* Force single row */
        justify-content: space-between;
        align-items: center;
    }
    
    .summary-bar .back-btn,
    .summary-bar .edit-btn {
        height: 26px;
        padding: 0 10px;
        min-width: auto;
        font-size: 12px;
        flex-shrink: 0;
    }
    
    .summary-value {
        font-size: 13px;
        flex: 1;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 8px;
        line-height: 1;
    }
    /* Vehicle carousel navigation moved to vehicle-carousel-standalone.html */

    .airport-grid { grid-template-columns: 1fr; }

    .time-input-group { flex-wrap: wrap; }

    .back-btn {
        top: var(--space-md);
        left: var(--space-md);
        font-size: var(--font-sm);
        padding: var(--space-sm) var(--space-md);
    }

    /* Remove this rule - keeping desktop layout */
}

@media (max-height: 700px) {
    #vehiclePanel .map-section {
        height: 25vh;  /* Even smaller on short screens */
        max-height: 180px;
    }

    /* Carousel wrapper styles moved to vehicle-carousel-standalone.html */

    #vehiclePanel .content-section {
        padding: 10px;
        gap: 10px;
    }

    /* .vehicle-info padding managed in vehicle-carousel-standalone.html */

    .control-button,
    .payment-method-mobile,
    .promo-button-mobile {
        padding: 6px 8px;
        font-size: 12px;
        min-height: 32px;
        height: 32px;
        gap: 4px;
    }

    #vehiclePanel .panel-actions {
        padding: 10px;
    }

    #vehiclePanel .book-btn {
        min-height: 48px;
    }

    .calendar-button-mobile {
        width: 48px;
        height: 48px;
    }
}

@media (min-height: 800px) {
    #vehiclePanel .map-section {
        height: 35vh;  /* Can be slightly larger on tall screens */
        max-height: 300px;
    }

    /* Carousel wrapper styles moved to vehicle-carousel-standalone.html */

    #vehiclePanel .content-section {
        padding: 16px;
        gap: 16px;
    }
}

@media (pointer: coarse) {
    .airport-option:active,
    .date-btn:active,
    .mode-btn:active,
    .time-select:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .time-select,
    .calendar-day {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    input:focus,
    select:focus {
        font-size: 16px;
    }

    /* All #vehiclePanel carousel styles moved to vehicle-carousel-standalone.html */
}

/* Smooth Scrolling */
.panel-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ============================================
   12. MOBILE OPTIMIZATIONS (Copilot Recommendations)
   ============================================ */

/* Dynamic viewport height support for modern browsers */
@supports (height: 100dvh) {
    .panel {
        min-height: 100dvh; /* Dynamic viewport height */
    }
    
    #vehiclePanel {
        min-height: 100dvh;
    }
}

/* Fixed carousel iframe height to prevent layout shifts */
#vehicle-carousel-frame {
    height: 210px;
    max-height: 220px;
    min-height: 180px;
    flex-shrink: 0;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;  /* Ensure badges render above container boundaries */
}

@media (max-width: 430px) {
    #vehicle-carousel-frame {
        height: 180px;
        min-height: 160px;
    }
}

/* ============================================
   MOBILE LAYOUT FIXES - Button Alignment & Viewport Constraints
   ============================================ */

/* Button alignment fix */
#vehiclePanel .schedule-section {
    position: relative;
    padding-right: 60px;
}

#vehiclePanel .book-btn {
    width: 100%;
}

#vehiclePanel .calendar-button-mobile {
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#vehiclePanel .calendar-button-mobile:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Remove viewport constraints */
@supports (height: 100dvh) {
    .panel { 
        min-height: auto; 
    }
    #vehiclePanel { 
        min-height: auto;
    }
}

/* Alternative: Stack buttons on very small screens */
@media (max-width: 320px) {
    #vehiclePanel .schedule-section {
        flex-direction: column;
        padding-right: 0;
        gap: 8px;
    }
    
    #vehiclePanel .calendar-button-mobile {
        position: static;
        width: 100%;
        height: 44px;
    }
}

/* Ensure no layout constraints on containers */
.app-container,
.booking-container,
.panels-wrapper {
    height: auto;
    min-height: 0;
}

/* ============================================
   13. IPHONE PORTRAIT MODE FIX
   ============================================ */

/* iPhone portrait-specific fix for price badge cutoff */
@media only screen and (max-width: 430px) and (orientation: portrait) {
    
    /* Fix overflow hierarchy for portrait mode */
    #vehiclePanel .content-section {
        overflow: visible !important;  /* Don't clip children */
        min-height: 0;
    }
    
    /* Ensure carousel gets enough height in portrait */
    #vehicle-carousel-frame {
        height: 220px !important;  /* Extra space for price badge */
        flex-shrink: 0;
    }
    
    /* Fix base content-section min-height for mobile */
    .content-section {
        min-height: auto !important;  /* Remove forced min-height */
    }
    
    /* Ensure parent handles scrolling */
    #vehiclePanel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}