.runway {
    position: absolute;
    bottom: 0;
    width: 30%;
    height: 4px;
    background-color: #374151;
}

.runway-left {
    left: 0;
}

.runway-right {
    right: 0;
}

@keyframes fly {
    0% { transform: translate(-500%, 0) rotate(0deg); opacity: 0; }
    0.5% { transform: translate(-475%, -0.25%) rotate(-0.5deg); opacity: 0.05; }
    1% { transform: translate(-450%, -0.5%) rotate(-1deg); opacity: 0.1; }
    1.5% { transform: translate(-425%, -0.75%) rotate(-1.5deg); opacity: 0.15; }
    2% { transform: translate(-400%, -1%) rotate(-2deg); opacity: 0.2; }
    2.5% { transform: translate(-375%, -1.25%) rotate(-2.5deg); opacity: 0.25; }
    3% { transform: translate(-350%, -1.5%) rotate(-3deg); opacity: 0.3; }
    3.5% { transform: translate(-325%, -1.75%) rotate(-3.5deg); opacity: 0.35; }
    4% { transform: translate(-300%, -2%) rotate(-4deg); opacity: 0.4; }
    4.5% { transform: translate(-275%, -2.25%) rotate(-4.5deg); opacity: 0.45; }
    5% { transform: translate(-250%, -2.5%) rotate(-5deg); opacity: 0.5; }
    6% { transform: translate(-200%, -3%) rotate(-6deg); opacity: 0.6; }
    7% { transform: translate(-150%, -3.5%) rotate(-7deg); opacity: 0.7; }
    8% { transform: translate(-100%, -4%) rotate(-8deg); opacity: 0.8; }
    9% { transform: translate(-50%, -4.5%) rotate(-9deg); opacity: 0.9; }
    10% { transform: translate(0%, -5%) rotate(-10deg); opacity: 1; }
    12% { transform: translate(50%, -10%) rotate(-9deg); }
    14% { transform: translate(100%, -15%) rotate(-8deg); }
    16% { transform: translate(150%, -20%) rotate(-7deg); }
    18% { transform: translate(200%, -25%) rotate(-6deg); }
    20% { transform: translate(250%, -30%) rotate(-5deg); }
    25% { transform: translate(300%, -35%) rotate(-4deg); }
    30% { transform: translate(350%, -37%) rotate(-3deg); }
    35% { transform: translate(400%, -39%) rotate(-2deg); }
    40% { transform: translate(450%, -40%) rotate(-1deg); }
    45% { transform: translate(500%, -40%) rotate(0deg); }
    50% { transform: translate(550%, -40%) rotate(0deg); }
    55% { transform: translate(600%, -40%) rotate(0deg); }
    60% { transform: translate(650%, -40%) rotate(0deg); }
    65% { transform: translate(700%, -39%) rotate(1deg); }
    70% { transform: translate(750%, -37%) rotate(2deg); }
    75% { transform: translate(800%, -35%) rotate(3deg); }
    80% { transform: translate(850%, -30%) rotate(4deg); }
    82% { transform: translate(875%, -25%) rotate(5deg); }
    84% { transform: translate(900%, -20%) rotate(6deg); }
    86% { transform: translate(925%, -15%) rotate(7deg); }
    88% { transform: translate(950%, -10%) rotate(8deg); }
    90% { transform: translate(960%, -5%) rotate(9deg); opacity: 1; }
    91% { transform: translate(965%, -4%) rotate(8deg); opacity: 0.9; }
    92% { transform: translate(970%, -3%) rotate(7deg); opacity: 0.8; }
    93% { transform: translate(975%, -2.5%) rotate(6deg); opacity: 0.7; }
    94% { transform: translate(980%, -2%) rotate(5deg); opacity: 0.6; }
    95% { transform: translate(985%, -1.5%) rotate(4deg); opacity: 0.5; }
    96% { transform: translate(990%, -1%) rotate(3deg); opacity: 0.4; }
    97% { transform: translate(993%, -0.75%) rotate(2deg); opacity: 0.3; }
    98% { transform: translate(995%, -0.5%) rotate(1deg); opacity: 0.2; }
    99% { transform: translate(997%, -0.25%) rotate(0.5deg); opacity: 0.1; }
    100% { transform: translate(1000%, 0) rotate(0deg); opacity: 0; }
}

.plane-animation {
    animation: fly 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.plane-container {
    position: relative;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, #87CEEB 0%, #BDE5F8 100%);
    overflow: hidden;
    border-radius: 8px;
}

/* Cloud animations */
.cloud {
    position: absolute;
    background: white;
    border-radius: 20px;
    opacity: 0.8;
}

@keyframes float {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

.seat-btn.selected {
    background-color: #3b82f6;
    border-color: #2563eb;
    color: white;
}

.seat-btn:disabled {
    background-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.5;
}

.overflow-x-auto {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E0 #EDF2F7;
    max-width: calc(100vw - 8rem);
}

.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #EDF2F7;
    border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: #CBD5E0;
    border-radius: 4px;
}

.seat-btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    .overflow-x-auto {
        max-width: calc(100vw - 5rem);
    }
    
    .seat-btn {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.7rem;
    }
}