/* ============================================
   WingVu – Booking Page (Aviation Light)
   ============================================ */

.booking-page { background: var(--primary-50); }

/* --- Hero --- */
.booking-hero {
    position: relative;
    background: linear-gradient(135deg, #0F172A 0%, #0284C7 50%, #38BDF8 100%);
    color: #fff; text-align: center; padding: 4rem 0 3.5rem; overflow: hidden;
}
.booking-hero-compact { padding: 2.5rem 0 2rem; }
.hero-clouds {
    position: absolute; inset: 0; opacity: .1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,0 500,60 C650,120 800,40 1000,80 C1100,100 1200,60 1200,60 L1200,120 L0,120 Z' fill='white'/%3E%3C/svg%3E") repeat-x bottom / 1200px 120px;
}
.booking-hero::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 50px;
    background: var(--primary-50); clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-content { position: relative; z-index: 1; }
.hero-content h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .3rem; text-shadow: 0 2px 4px rgba(0,0,0,.2); }
.hero-sub { font-size: 1.1rem; opacity: .9; margin-bottom: .5rem; }
.hero-hint {
    display: inline-block; margin-top: .75rem; padding: .4rem 1.2rem;
    background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2); border-radius: 9999px; font-size: .9rem;
}
.hero-logo { max-height: 60px; margin-bottom: .75rem; }
.hero-back { color: rgba(255,255,255,.7); font-size: .9rem; display: inline-block; margin-bottom: .75rem; }
.hero-back:hover { color: #fff; }

/* --- Booking Main --- */
.booking-main { padding: 2rem 0; max-width: 900px; margin: 0 auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* --- Event Card (Index) --- */
.event-card {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    overflow: hidden; margin-bottom: 1.5rem; transition: transform .2s;
}
.event-card:hover { transform: translateY(-2px); }
.event-card-image { height: 200px; background-size: cover; background-position: center; }
.event-card-body { padding: 1.5rem 2rem 2rem; }
.event-card-body h2 { font-size: 1.4rem; color: var(--slate-800); margin-bottom: .25rem; }
.event-subtitle { color: var(--slate-500); font-size: .95rem; }
.event-desc { color: var(--slate-600); margin: .75rem 0; line-height: 1.7; }
.event-meta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.meta-item { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--slate-600); }
.event-aircraft-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.aircraft-chip {
    padding: .25rem .7rem; border-radius: 9999px; font-size: .82rem; font-weight: 600;
    font-family: var(--font-mono);
}
.aircraft-chip-motor { background: var(--primary-100); color: var(--primary-dark); }
.aircraft-chip-glider { background: #FEF3C7; color: #92400E; }

/* --- Event Description Box --- */
.event-description-box {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 1.5rem 2rem; margin-bottom: 1.5rem; color: var(--slate-600); line-height: 1.8;
}

/* --- Booking Status Boxes --- */
.booking-status-box {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 2.5rem; text-align: center;
}
.booking-status-waiting { border-top: 4px solid var(--accent); }
.booking-status-waiting h2 { color: var(--accent-dark); }
.booking-status-closed { border-top: 4px solid var(--danger); }
.booking-status-closed h2 { color: var(--danger); }
.closed-image { max-width: 100%; max-height: 250px; border-radius: var(--radius); margin-bottom: 1rem; }
.closed-message { color: var(--slate-600); line-height: 1.7; margin-top: .75rem; }

/* --- Slot Table --- */
.slot-table-container {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    overflow: hidden;
}
.slot-table-header {
    display: grid; grid-template-columns: 65px 100px 1fr 100px 120px;
    padding: .6rem 1rem; background: var(--slate-50); border-bottom: 2px solid var(--slate-200);
    font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500);
}
.slot-row {
    display: grid; grid-template-columns: 65px 100px 1fr 100px 120px;
    padding: .65rem 1rem; border-bottom: 1px solid var(--slate-100);
    align-items: center; transition: all .2s; font-size: .92rem;
}
.slot-available { cursor: pointer; }
.slot-available:hover { background: var(--primary-50); padding-left: 1.25rem; }
.slot-full { opacity: .45; background: var(--slate-50); }
.slot-round-divider { height: 3px; background: var(--slate-100); }
.slot-round { font-weight: 600; color: var(--slate-400); }
.slot-time { font-weight: 700; color: var(--primary-dark); font-family: var(--font-mono); }
.slot-aircraft { display: flex; align-items: center; gap: .5rem; }
.slot-aircraft small { color: var(--slate-500); font-size: .82rem; }
.ac-chip {
    padding: .15rem .5rem; border-radius: 6px; font-family: var(--font-mono);
    font-size: .82rem; font-weight: 600;
}
.ac-chip-motor { background: var(--primary-100); color: var(--primary-dark); }
.ac-chip-glider { background: #FEF3C7; color: #92400E; }
.slot-price { font-weight: 600; color: var(--slate-700); font-family: var(--font-mono); }
.avail-badge {
    padding: .2rem .6rem; border-radius: 9999px; font-size: .78rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .25rem;
}
.avail-free { background: #D1FAE5; color: #065F46; }
.avail-free::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.avail-full { background: #FEE2E2; color: #991B1B; }

/* --- Modal --- */
.modal {
    position: fixed; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(4px);
    z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: #fff; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.2);
    max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 2rem;
    position: relative; animation: slideUp .3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; } }
.modal-content h2 { font-size: 1.3rem; color: var(--slate-800); }
.modal-close {
    position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; background: var(--slate-100);
    border: none; border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: var(--slate-500);
}
.modal-close:hover { background: var(--slate-200); color: var(--slate-800); }

#modal-slot-info {
    background: linear-gradient(135deg, var(--primary-50), #E0F2FE);
    padding: .85rem 1rem; border-radius: var(--radius); margin: .75rem 0 1.25rem;
    border-left: 4px solid var(--primary); font-size: .93rem; line-height: 1.7;
}

.form-price-box {
    background: var(--slate-50); border: 1px solid var(--slate-200);
    padding: .85rem 1rem; border-radius: var(--radius);
}
.form-price-box strong { font-size: 1.1rem; color: var(--slate-800); }

.pax-field-group {
    background: var(--slate-50); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .5rem;
    border-left: 3px solid var(--primary-light);
}
.pax-field-group h4 { font-size: .88rem; color: var(--slate-600); margin-bottom: .4rem; }
.pax-field-row { display: grid; grid-template-columns: 1fr 100px auto; gap: .5rem; align-items: end; }

/* --- Confirm / Cancel Cards --- */
.confirm-card {
    max-width: 500px; width: 100%; background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 2.5rem; text-align: center; margin: 1rem;
}
.confirm-pending { border-top: 4px solid var(--accent); }
.confirm-confirmed { border-top: 4px solid var(--success); }
.confirm-expired, .confirm-cancelled { border-top: 4px solid var(--danger); }
.confirm-icon { font-size: 3rem; margin-bottom: .5rem; }
.confirm-icon-success { color: var(--success); }
.confirm-icon-error { color: var(--danger); }
.confirm-warning {
    background: #FEF3C7; border: 1px solid #FDE68A; border-radius: var(--radius);
    padding: .75rem 1rem; margin: 1rem 0; font-size: .9rem; text-align: left;
}
.confirm-hint { color: var(--slate-400); font-size: .85rem; margin-top: 1rem; }
.confirm-details { width: 100%; margin: 1rem 0; border-collapse: collapse; text-align: left; }
.confirm-details th, .confirm-details td { padding: .4rem .5rem; border-bottom: 1px solid var(--slate-200); }
.confirm-details th { color: var(--slate-500); font-size: .88rem; width: 35%; }

/* --- Alerts --- */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.alert-error ul { margin: 0; padding-left: 1.2rem; }

/* --- Footer --- */
.booking-footer { text-align: center; padding: 2rem 0; color: var(--slate-400); font-size: .85rem; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 1.8rem; }
    .slot-table-header { display: none; }
    .slot-row {
        display: grid; grid-template-columns: auto 1fr auto;
        gap: .2rem .75rem; padding: .75rem 1rem;
    }
    .slot-round { grid-row: 1; grid-column: 1; }
    .slot-time { grid-row: 1; grid-column: 2; }
    .slot-avail { grid-row: 1/3; grid-column: 3; align-self: center; }
    .slot-aircraft { grid-row: 2; grid-column: 1/3; }
    .slot-price { display: none; }
    .pax-field-row { grid-template-columns: 1fr 80px; }
    .event-card-body { padding: 1.25rem; }
}