/**
 * Flight page shell — desktop drawer above content card.
 * Tablet/mobile (≤1024px): contact-bar uses site-header.css (same as homepage).
 */

.contact-bar:has(+ .seo-flight-shell),
.seo-flight-shell {
    --sfs-radius: 20px;
    --sfs-shell-pad: var(--space-md, 1rem);
    --sfs-drawer-width: min(720px, 84%);
    --sfs-drawer-radius: 14px;
    --sfs-fill: #f5f5f7;
    --sfs-border: rgba(60, 60, 67, 0.1);
    --sfs-shadow:
        0 2px 20px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.seo-flight-shell {
    max-width: 920px;
    margin: 0 auto;
}

@media (min-width: 1025px) {
    .contact-bar:has(+ .seo-flight-shell) {
        position: relative;
        z-index: 2;
        overflow: visible;
        padding: var(--space-lg, 1.5rem) var(--sfs-shell-pad) 0;
        max-width: 920px;
        margin-inline: auto;
        background: transparent;
        border-bottom: none;
    }

    .contact-bar:has(+ .seo-flight-shell) .contact-container {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.375rem 0.5rem;
        width: var(--sfs-drawer-width);
        max-width: none;
        margin-inline: auto;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0.5625rem 1rem 0.625rem;
        background: var(--sfs-fill);
        border: 0.5px solid var(--sfs-border);
        border-bottom: none;
        border-radius: var(--sfs-drawer-radius) var(--sfs-drawer-radius) 0 0;
        box-shadow: none;
    }

    .contact-bar:has(+ .seo-flight-shell) .contact-label {
        font-weight: 500;
    }

    .contact-bar:has(+ .seo-flight-shell) .contact-btn:not(.whatsapp-btn) {
        background: #fff;
    }

    .contact-bar:has(+ .seo-flight-shell) .contact-btn .notification-badge,
    .contact-bar:has(+ .seo-flight-shell) .chat-btn .notification-badge {
        border-color: var(--sfs-fill);
    }

    .seo-flight-shell {
        position: relative;
        z-index: 1;
        padding-inline: var(--sfs-shell-pad);
        padding-top: 0;
    }

    .seo-flight-shell > .flight-page.content-page,
    .seo-flight-shell > .route-page.content-page,
    .seo-flight-shell > .city-page.content-page {
        max-width: none;
        margin: 0;
        padding: 1rem clamp(0.875rem, 2.5vw, 1.25rem) 2.5rem;
        background: #fff;
        border: none;
        border-radius: var(--sfs-radius);
        box-shadow: var(--sfs-shadow);
    }
}

@media (max-width: 1024px) {
    .seo-flight-shell {
        padding: 0 clamp(0.75rem, 2vw, 1rem);
    }

    html body .seo-flight-shell > .flight-page.content-page {
        margin: 0;
        padding: 0.75rem 0.875rem 1.5rem;
        background: #fff;
        border: none;
        border-radius: 18px;
        box-shadow: var(--sfs-shadow);
    }

    html body .seo-flight-shell > .route-page.content-page,
    html body .seo-flight-shell > .city-page.content-page {
        margin: 0;
        padding: 0.75rem 0.875rem 1.5rem;
        background: #fff;
        border: none;
        border-radius: 18px;
        box-shadow: var(--sfs-shadow);
    }
}

@media (max-width: 640px) {
    .seo-flight-shell {
        padding: 0 0.75rem;
    }

    html body .seo-flight-shell > .flight-page.content-page {
        padding: 0.625rem 0.75rem 1.25rem;
        border-radius: 16px;
    }

    html body .seo-flight-shell > .route-page.content-page,
    html body .seo-flight-shell > .city-page.content-page {
        padding: 0 0 1.25rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .seo-flight-shell:has(.route-page),
    .seo-flight-shell:has(.city-page) {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .seo-flight-shell {
        padding: 0 0.625rem;
    }

    html body .seo-flight-shell > .flight-page.content-page {
        padding: 0.5625rem 0.625rem 1rem;
        border-radius: 14px;
    }

    html body .seo-flight-shell > .route-page.content-page,
    html body .seo-flight-shell > .city-page.content-page {
        padding: 0 0 1rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .seo-flight-shell:has(.route-page),
    .seo-flight-shell:has(.city-page) {
        padding: 0;
    }
}