/* assets/css/style.css */

.ticket-container {
    background: white;
    color: #333 !important; /* Force text color */
    width: 600px;
    height: 250px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    
    /* NEW HIDING STRATEGY */
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: -100; /* Behind everything */
    opacity: 0;    /* Invisible to eye, but exists for browser */
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-family: 'Segoe UI', sans-serif; /* Ensure font is consistent */
}

/* Force specific colors for child elements to ensure contrast */
.ticket-left { flex: 2; padding: 25px; border-right: 2px dashed #ccc; position: relative; }
.ticket-right { flex: 1; padding: 20px; background: #1a237e; color: white !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.t-brand { color: #1a237e; font-weight: 800; font-size: 1.2rem; }
.t-route { color: #333; font-size: 2rem; font-weight: bold; display: flex; gap: 20px; align-items: center; margin-bottom: 15px; }
.t-details { color: #555; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; font-size: 0.9rem; }/* assets/css/style.css */
:root {
    --primary: #1a237e;    /* Deep Navy */
    --accent: #ff6d00;     /* Action Orange */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --text-light: #f5f5f5;
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

body {
    background: linear-gradient(135deg, #0d1b2a, #1b263b); /* Deep Space Navy */
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Glass Component */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari */
    border: var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    max-width: 500px;
    width: 90%;
    margin: 2rem auto;
}

/* Typography & Buttons */
h1, h2, h3 { color: white; margin-bottom: 1rem; }
.text-accent { color: var(--accent); }

.btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255,109,0,0.4); }

/* Forms */
.form-group { margin-bottom: 1.5rem; }
input {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: var(--glass-border);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
}
input:focus { outline: none; border-color: var(--accent); }

/* Dashboard Specific */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: var(--glass-border);
}

.loyalty-card {
    background: linear-gradient(45deg, var(--accent), #ff9e40);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 109, 0, 0.3);
}

/* Mobile Nav (Bottom Bar for PWA) */
.mobile-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(13, 27, 42, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    padding: 15px;
    border-top: var(--glass-border);
}
.nav-item { color: #888; text-decoration: none; font-size: 0.8rem; text-align: center; }
.nav-item.active { color: var(--accent); }
.nav-item i { display: block; font-size: 1.2rem; margin-bottom: 2px; }

/* Flight Cards */
.flight-card {
    background: rgba(255,255,255,0.95); /* White card for contrast */
    color: #333;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.2s;
    border-left: 5px solid var(--accent);
}
.flight-card:hover { transform: scale(1.02); }

.fc-header { display: flex; justify-content: space-between; color: #888; font-size: 0.8rem; margin-bottom: 10px; }
.fc-route { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fc-city { font-weight: bold; font-size: 1.1rem; }
.fc-time { font-size: 0.9rem; color: #555; }
.fc-icon { color: var(--accent); transform: rotate(90deg); }
.fc-price { text-align: right; font-weight: bold; font-size: 1.2rem; color: var(--primary); }

/* Modal Overlay */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: none; /* Hidden by default */
    justify-content: center; align-items: center;
    z-index: 1000;
}
.modal-content {
    background: white; color: #333;
    padding: 20px; border-radius: 12px;
    width: 90%; max-width: 400px;
    animation: slideUp 0.3s ease;
}
.pkg-option {
    border: 1px solid #ddd; padding: 15px; margin-bottom: 10px;
    border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between;
}
.pkg-option:hover { background: #f0f0f0; border-color: var(--accent); }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- SEAT MAP STYLES --- */
.plane-fuselage {
    background: white;
    border-radius: 50px 50px 0 0; /* Rounded nose */
    padding: 40px 20px 20px 20px;
    margin: 20px auto;
    max-width: 350px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
    min-height: 500px;
}

.cockpit {
    height: 60px;
    width: 60px;
    background: #ddd;
    margin: 0 auto 30px auto;
    border-radius: 50% 50% 10px 10px;
    border: 2px solid #ccc;
}

.seat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 30px repeat(2, 1fr); /* 2 seats - Aisle - 2 seats (Business) */
    gap: 10px;
}

/* Specific Layouts */
.grid-economy {
    grid-template-columns: repeat(3, 1fr) 20px repeat(3, 1fr); /* 3 seats - Aisle - 3 seats */
}

.seat {
    height: 40px;
    background: #e0e0e0;
    border-radius: 8px 8px 12px 12px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #666;
    border-bottom: 3px solid #ccc;
}

/* States */
.seat.occupied {
    background: #b0bec5; /* Grey */
    cursor: not-allowed;
    color: #fff;
}
.seat.selected {
    background: var(--accent); /* Orange */
    color: white;
    border-color: #e65100;
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--accent);
}
.seat.restricted {
    opacity: 0.3; /* Dim seats not in user's class */
    cursor: not-allowed;
}

/* Labels */
.row-label {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.7rem;
    color: #ccc;
    margin: 5px 0;
}
.cabin-title {
    grid-column: 1 / -1;
    text-align: center;
    background: var(--primary);
    color: white;
    padding: 5px;
    border-radius: 4px;
    margin: 15px 0 10px 0;
    font-size: 0.8rem;
    text-transform: uppercase;
}
/* --- TICKET & PAYMENT --- */
.ticket-container {
    background: white;
    color: #333;
    width: 600px;
    height: 250px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    position: relative;
    /* Hidden from view, used for generation */
    position: fixed; 
    top: -9999px; 
    left: -9999px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.ticket-left {
    flex: 2;
    padding: 25px;
    border-right: 2px dashed #ccc;
    position: relative;
}
.ticket-right {
    flex: 1;
    padding: 20px;
    background: var(--primary);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.t-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.t-brand { font-weight: 800; font-size: 1.2rem; color: var(--primary); }
.t-class { background: var(--accent); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }

.t-route { font-size: 2rem; font-weight: bold; display: flex; gap: 20px; align-items: center; margin-bottom: 15px; }
.t-details { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; font-size: 0.9rem; color: #666; }
.t-label { font-size: 0.7rem; text-transform: uppercase; color: #999; }

/* Modal for Policy */
.policy-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
}
.policy-content {
    background: white; color: #333; padding: 30px; border-radius: 12px;
    max-width: 500px; text-align: left;
}