/* V2 Booking Styles — V1 Design System Port */

/* ─── Base ─────────────────────────────────────────── */
.btn-transition {
    transition: all 0.2s ease;
}

/* ════════════════════════════════════════════════════════
   SEARCH PAGE — Visual Overhaul
   ════════════════════════════════════════════════════════ */

/* ─── Hero Gradient Background ─────────────────────── */
.search-hero {
    min-height: calc(100vh - 80px);
    background: linear-gradient(165deg, #000a30 0%, #030B57 30%, #0044cc 60%, #e8f0fe 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 16px 60px;
    position: relative;
    overflow: hidden;
}

/* Subtle animated gradient orbs */
.search-hero::before,
.search-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
}

.search-hero::before {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #4f8cff, transparent);
    top: -100px;
    right: -100px;
    animation: heroOrb1 12s ease-in-out infinite alternate;
}

.search-hero::after {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #764ba2, transparent);
    bottom: -50px;
    left: -80px;
    animation: heroOrb2 10s ease-in-out infinite alternate;
}

@keyframes heroOrb1 {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-40px, 30px) scale(1.15);
    }
}

@keyframes heroOrb2 {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(30px, -20px) scale(1.1);
    }
}

/* Hero text */
.search-hero-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.search-hero-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    .search-hero-title {
        font-size: 2.75rem;
    }

    .search-hero-subtitle {
        font-size: 1.05rem;
    }
}

/* ─── Glassmorphism Card ───────────────────────────── */
.glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    width: 100%;
    max-width: 560px;
    position: relative;
    z-index: 2;
    animation: cardFadeIn 0.6s ease-out;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .glass-card {
        padding: 24px 18px;
        border-radius: 16px;
    }
}

/* ─── Animated Pill Toggle ─────────────────────────── */
.pill-toggle-wrap {
    display: flex;
    align-items: center;
    background: #f0f2f5;
    border-radius: 50px;
    padding: 4px;
    position: relative;
    margin: 0 auto 24px;
    width: fit-content;
}

/* Sliding indicator */
.pill-slider {
    position: absolute;
    height: calc(100% - 8px);
    border-radius: 50px;
    background: #030B57;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    top: 4px;
    box-shadow: 0 2px 8px rgba(3, 11, 87, 0.25);
}

.pill-toggle-btn {
    position: relative;
    z-index: 1;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.25s;
    white-space: nowrap;
}

.pill-toggle-btn.active {
    color: #fff;
}

/* ─── Search Inputs (Icon-Integrated) ──────────────── */
.search-field {
    margin-bottom: 16px;
}

.search-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.search-input-wrap {
    position: relative;
}

.search-input-wrap .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 44px;
    border: 1.5px solid #e2e5ea;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.search-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.search-input::placeholder {
    color: #b0b5be;
    font-weight: 400;
}

/* From/To row with swap */
.from-to-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
    margin-bottom: 16px;
}

.swap-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e2e5ea;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.swap-btn:hover {
    border-color: #0066ff;
    color: #0066ff;
    transform: translate(-50%, -50%) rotate(180deg);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
}

/* Date row */
.date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.date-row.one-way {
    grid-template-columns: 1fr;
}

@media (max-width: 480px) {
    .search-hero {
        padding: 100px 12px 40px;
    }

    .search-hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .search-hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }

    .glass-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .pill-toggle-wrap {
        margin-bottom: 18px;
    }

    .pill-toggle-btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .from-to-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 12px;
    }

    .from-to-row .search-field {
        margin-bottom: 0;
    }

    /* Swap button sits between connected inputs on mobile */
    .from-to-row .search-field:nth-child(1) {
        order: 1;
    }

    .from-to-row .swap-btn {
        order: 2;
    }

    .from-to-row .search-field:nth-child(3) {
        order: 3;
    }

    /* Connected input borders – From top-rounded, To bottom-rounded */
    .from-to-row .search-field:nth-child(1) .search-input {
        border-radius: 14px 14px 0 0;
        border-bottom: none;
    }

    .from-to-row .search-field:nth-child(3) .search-input {
        border-radius: 0 0 14px 14px;
    }

    /* Hide From/To labels on mobile – icons are enough */
    .from-to-row .search-field-label {
        display: none;
    }

    /* Swap button: sits inline between the two connected inputs */
    .swap-btn {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: -8px auto -8px;
        z-index: 5;
        width: 36px;
        height: 36px;
        order: 0;
    }

    .swap-btn:hover {
        transform: rotate(180deg);
    }

    .swap-btn i {
        transform: rotate(90deg);
    }

    .search-input {
        height: 46px;
        font-size: 14px;
    }

    .search-field-label {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .search-field {
        margin-bottom: 12px;
    }

    .date-row {
        grid-template-columns: 1fr;
    }

    .travelers-trigger {
        height: 46px;
        font-size: 14px;
    }

    .search-submit {
        height: 48px;
        font-size: 15px;
        border-radius: 12px;
    }

    .trust-badges {
        gap: 8px;
        margin-top: 16px;
    }

    .trust-badge {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ─── Travelers & Class Dropdown ───────────────────── */
.travelers-field {
    position: relative;
    margin-bottom: 20px;
}

.travelers-trigger {
    width: 100%;
    height: 52px;
    padding: 0 44px 0 44px;
    border: 1.5px solid #e2e5ea;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    position: relative;
    text-align: left;
}

.travelers-trigger:hover,
.travelers-trigger.open {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.travelers-trigger .trigger-icon {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    font-size: 15px;
}

.travelers-trigger .trigger-chevron {
    position: absolute;
    right: 14px;
    color: #9ca3af;
    font-size: 13px;
    transition: transform 0.25s;
}

.travelers-trigger.open .trigger-chevron {
    transform: rotate(180deg);
}

.travelers-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 20px;
    z-index: 20;
    display: none;
    animation: panelSlideDown 0.2s ease-out;
}

.travelers-panel.open {
    display: block;
}

@keyframes panelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pax row inside panel */
.pax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.pax-row:last-of-type {
    border-bottom: none;
}

.pax-info .pax-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.pax-info .pax-age {
    font-size: 12px;
    color: #9ca3af;
}

.pax-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pax-control-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #e2e5ea;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.pax-control-btn:hover:not(:disabled) {
    border-color: #0066ff;
    color: #0066ff;
    background: #f0f6ff;
}

.pax-control-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pax-count {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    min-width: 24px;
    text-align: center;
}

/* Cabin selector inside panel */
.cabin-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.cabin-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.cabin-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cabin-option {
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid #e2e5ea;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.cabin-option:hover {
    border-color: #93b4fd;
    color: #0052cc;
}

.cabin-option.active {
    background: #030B57;
    border-color: #030B57;
    color: #fff;
    box-shadow: 0 2px 8px rgba(3, 11, 87, 0.25);
}

.travelers-done-btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border-radius: 12px;
    background: #030B57;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.travelers-done-btn:hover {
    background: #000a30;
}

/* ─── Search Submit Button ─────────────────────────── */
.search-submit {
    width: 100%;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.search-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.4);
}

.search-submit:active {
    transform: translateY(0);
}

/* Shimmer effect on button */
.search-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: btnShimmer 3s ease-in-out infinite;
}

@keyframes btnShimmer {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

/* ─── Trust Badges (Glass Pills) ───────────────────── */
.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    position: relative;
    z-index: 2;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
}

.trust-badge i {
    font-size: 11px;
    opacity: 0.7;
}

/* ─── Recent Searches (on hero) ────────────────────── */
.recent-searches {
    margin-top: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.recent-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.recent-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.recent-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.recent-chip:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.recent-chip i {
    font-size: 10px;
    opacity: 0.5;
}

.recent-chip .route-text {
    font-weight: 600;
}

/* ─── Full-Screen Loading Overlay ──────────────────── */
.search-loading-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(165deg, #000a30 0%, #030B57 50%, #0044cc 100%);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.search-loading-overlay.active {
    display: flex;
}

.loading-plane {
    font-size: 48px;
    color: #fff;
    animation: planeFly 2s ease-in-out infinite;
}

@keyframes planeFly {

    0%,
    100% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(20px) translateY(-10px);
    }

    50% {
        transform: translateX(0) translateY(-5px);
    }

    75% {
        transform: translateX(-20px) translateY(-10px);
    }
}

.loading-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 500;
}

.loading-dots {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: center;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: dotPulse 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes dotPulse {

    0%,
    80%,
    100% {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1);
    }

    40% {
        background: rgba(255, 255, 255, 0.8);
        transform: scale(1.3);
    }
}

/* ─── Transparent Header (Search Page Only) ────────── */
.header-transparent {
    background: transparent !important;
    border-bottom: none !important;
    position: absolute !important;
    width: 100%;
}

.header-transparent a,
.header-transparent button,
.header-transparent span {
    color: #fff;
}

.header-transparent .text-gray-800 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-transparent .text-brand-500 {
    color: #93b4fd !important;
}

.header-transparent .text-gray-900 {
    color: #fff !important;
}

.header-transparent .bg-brand-700 {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.header-transparent .bg-brand-700:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Mobile menu stays solid */
.header-transparent #mobileMenu {
    background: #fff !important;
}

.header-transparent #mobileMenu a,
.header-transparent #mobileMenu button,
.header-transparent #mobileMenu span {
    color: #1a1a1a;
}

.header-transparent #mobileMenu .text-gray-800 {
    color: #1a1a1a !important;
}

/* Airport dropdown on search page */
.search-hero .airport-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    display: none;
    margin-top: 4px;
}

.search-hero .airport-dropdown.active {
    display: block;
}

/* ════════════════════════════════════════════════════════
   FLIGHTS PAGE — Visual Overhaul
   ════════════════════════════════════════════════════════ */

/* Flights page wrapper */
.flights-page {
    max-width: 56rem;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* Page heading */
.flights-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.flights-subheading {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 20px;
}

/* ─── Search Summary Bar ───────────────────────────── */
.search-summary {
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.search-summary::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0066ff, #030B57);
    border-radius: 4px 0 0 4px;
}

.search-summary-route {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
}

.search-summary-route .route-city {
    font-weight: 700;
    color: #030B57;
}

.search-summary-route .route-divider {
    color: #d1d5db;
}

.search-summary-route .route-meta {
    color: #6b7280;
}

.search-summary .modify-link {
    font-size: 13px;
    font-weight: 600;
    color: #0066ff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

.search-summary .modify-link:hover {
    color: #0052cc;
}

/* ─── Filter Bar (Upgraded) ────────────────────────── */
.flights-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.flights-filters::-webkit-scrollbar {
    display: none;
}

.flights-filter-btn {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.flights-filter-btn:hover {
    border-color: #93b4fd;
    color: #0052cc;
}

.flights-filter-btn.active {
    background: #030B57;
    border-color: #030B57;
    color: #fff;
    box-shadow: 0 2px 8px rgba(3, 11, 87, 0.2);
}

.flights-filter-btn i {
    font-size: 11px;
}

/* ─── Section Headers ──────────────────────────────── */
.flights-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.flights-section-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #030B57;
}

.flights-section-header i {
    color: #0066ff;
    font-size: 16px;
}

.flights-section-sub {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* ─── Flight Cards (Upgraded) ──────────────────────── */
.flight-card-v2 {
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1.5px solid #f0f0f0;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    cursor: pointer;
}

.flight-card-v2:hover {
    border-color: #bfcfff;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.08);
    transform: translateY(-1px);
}

.flight-card-v2.selected {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12), 0 4px 16px rgba(0, 102, 255, 0.1);
}

/* Upgrade existing flight card styles too */
.flight-card {
    border: 1.5px solid #f0f0f0;
    border-radius: 16px;
    padding: 18px 20px;
}

.flight-card:hover {
    border-color: #bfcfff;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.08);
}

.flight-card.selected {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12), 0 4px 16px rgba(0, 102, 255, 0.1);
}

/* Select button upgrade */
.select-btn {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}

.select-btn:hover {
    background: linear-gradient(135deg, #0052cc, #003d99);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

/* ─── Skeleton Loaders (Upgraded) ──────────────────── */
.skeleton-flight-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1.5px solid #f0f0f0;
    margin-bottom: 10px;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    margin-bottom: 10px;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ─── Round-Trip Step Indicator ────────────────────── */
.rt-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.rt-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

.rt-step .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.rt-step-active {
    background: #eff6ff;
    color: #030B57;
    border: 1px solid #bfcfff;
}

.rt-step-active .step-num {
    background: #030B57;
    color: #fff;
}

.rt-step-done {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.rt-step-done .step-num {
    background: #22c55e;
    color: #fff;
}

.rt-step-inactive {
    background: #f9fafb;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
}

.rt-step-inactive .step-num {
    background: #e5e7eb;
    color: #9ca3af;
}

.rt-step-divider {
    color: #d1d5db;
    font-size: 12px;
}

/* ─── Outbound Confirmed Banner ────────────────────── */
.outbound-confirmed {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.outbound-confirmed i {
    color: #22c55e;
    font-size: 20px;
}

.outbound-confirmed .confirmed-label {
    font-size: 14px;
    font-weight: 700;
    color: #166534;
}

.outbound-confirmed .confirmed-details {
    font-size: 12px;
    color: #4ade80;
}

.outbound-confirmed .confirmed-price {
    margin-left: auto;
    font-weight: 700;
    color: #166534;
}

/* ─── Both Confirmed Summary ───────────────────────── */
.booking-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1.5px solid #f0f0f0;
    margin-top: 24px;
}

.booking-summary-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}

.summary-row:last-of-type {
    border-bottom: none;
}

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 2px solid #e5e7eb;
    margin-top: 8px;
}

.summary-total .total-label {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.summary-total .total-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #030B57;
}

.continue-btn {
    width: 100%;
    margin-top: 20px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.3);
}

.continue-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.4);
}

/* ─── Empty State ──────────────────────────────────── */
.flights-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border-radius: 16px;
    border: 1.5px dashed #e5e7eb;
}

.flights-empty-state i {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.flights-empty-state h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.flights-empty-state p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.flights-empty-state a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 50px;
    background: #030B57;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.flights-empty-state a:hover {
    background: #000a30;
}

/* See more options toggle upgrade */
.see-options-toggle {
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
}

/* ─── Inline Modify Search Dropdown ────────────────── */
.modify-dropdown {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
    background: #fff;
    border-radius: 0 0 14px 14px;
    margin-top: -14px;
    border: 1px solid #f0f0f0;
    border-top: none;
    padding: 0 18px;
}

.modify-dropdown.open {
    max-height: 500px;
    opacity: 1;
    padding: 20px 18px;
}

.modify-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.modify-row.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 580px) {

    .modify-row,
    .modify-row.three-col {
        grid-template-columns: 1fr;
    }
}

.modify-field-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.modify-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid #e2e5ea;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.2s;
    outline: none;
}

.modify-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
}

.modify-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.modify-search-btn {
    padding: 10px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
}

.modify-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

.modify-cancel-btn {
    padding: 10px 18px;
    border-radius: 50px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.modify-cancel-btn:hover {
    background: #e5e7eb;
}

/* Make summary bar border-radius flat on bottom when dropdown is open */
.search-summary.modify-open {
    border-radius: 14px 14px 0 0;
    margin-bottom: 0;
}

/* Modify dropdown airport dropdown */
.modify-dropdown .airport-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 30;
    display: none;
    margin-top: 2px;
}

.modify-dropdown .airport-dropdown.active {
    display: block;
}

/* ─── V1 Cards ─────────────────────────────────────── */
.v1-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ─── Flight Card (Results) ────────────────────────── */
.flight-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    margin-bottom: 0.75rem;
}

.flight-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.flight-card.selected {
    border: 2px solid #030b57;
    box-shadow: 0 0 0 3px rgba(3, 11, 87, 0.15);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-green {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-red {
    background: #ffe5e5;
    color: #d32f2f;
}

.badge-blue {
    background: #e3f2fd;
    color: #1976d2;
}

.badge-gray {
    background: #f5f5f5;
    color: #616161;
}

/* Flight content row */
.flight-content-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .flight-content-row {
        flex-wrap: nowrap;
    }
}

/* Airline info */
.airline-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
}

.airline-info .airline-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: contain;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.airline-info .airline-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.airline-info .flight-number {
    font-size: 12px;
    color: #6b7280;
}

/* Flight time details */
.flight-times {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 200px;
}

.flight-time-block {
    text-align: center;
    min-width: 50px;
}

.flight-time-block .time {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.flight-time-block .airport {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Duration connector line */
.duration-connector {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

.duration-text {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

.duration-line {
    position: relative;
    height: 1px;
    width: 100%;
    background: #d1d5db;
}

.duration-line::before,
.duration-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transform: translateY(-50%);
}

.duration-line::before {
    left: 0;
}

.duration-line::after {
    right: 0;
}

.stop-info {
    font-size: 11px;
    color: #9ca3af;
}

/* Flight footer (price + select) */
.flight-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.price-mobile {
    font-size: 16px;
    font-weight: 700;
    color: #030b57;
    margin-left: auto;
}

.price-desktop {
    font-size: 18px;
    font-weight: 700;
    color: #030b57;
    white-space: nowrap;
    display: none;
}

@media (min-width: 768px) {
    .price-mobile {
        display: none;
    }

    .price-desktop {
        display: block;
    }
}

/* Select button (results) */
.select-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    border: 1px solid #030b57;
    color: #030b57;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.select-btn:hover {
    background: #030b57;
    color: #fff;
}

@media (max-width: 767px) {
    .select-btn {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
}

/* See more options accordion */
.see-options-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    color: #4169e1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.5rem;
}

.see-options-toggle:hover {
    background: #eee;
}

.see-options-toggle .chevron {
    transition: transform 0.3s;
}

.see-options-toggle.active .chevron {
    transform: rotate(180deg);
}

.other-options {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.other-options.active {
    max-height: 2000px;
}

/* Layover / All Stops dropdown */
.all-stops-dropdown {
    position: relative;
    display: inline-block;
}

.all-stops-link {
    color: #4169e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.all-stops-link .chevron {
    transition: transform 0.3s;
}

.all-stops-dropdown.active .all-stops-link .chevron {
    transform: rotate(180deg);
}

.all-stops-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
    min-width: 320px;
    z-index: 30;
    padding: 0.75rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: all 0.2s ease;
}

.all-stops-dropdown.active .all-stops-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.flight-segment-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 6px;
}

.segment-date {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flight-route-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flight-time-city {
    text-align: center;
}

.flight-time-city .city {
    font-size: 12px;
    color: #6b7280;
}

.flight-time-city .time-val {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.flight-duration-connector {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.layover-notice {
    font-size: 12px;
    color: #1976d2;
    background: #e3f2fd;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
}

/* ─── Filter Bar ───────────────────────────────────── */
.filters-bar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.75rem 0;
    -webkit-overflow-scrolling: touch;
}

.filters-bar::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-btn:hover {
    border-color: #030b57;
    color: #030b57;
}

.filter-btn.active {
    background: #030b57;
    color: #fff;
    border-color: #030b57;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 30;
    min-width: 180px;
    padding: 4px 0;
}

.filter-dropdown a,
.filter-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    background: none;
    border: none;
    transition: background 0.1s;
}

.filter-dropdown a:hover,
.filter-dropdown button:hover {
    background: #f3f4f6;
}

.filter-dropdown .active-item {
    color: #030b57;
    font-weight: 600;
}

/* ─── V1 Buttons ───────────────────────────────────── */
.v1-btn {
    padding: 14px 32px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
}

.v1-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.v1-btn-primary {
    background: #030b57;
    color: #fff;
    border: none;
}

.v1-btn-primary:hover {
    background: #000d3d;
}

.v1-btn-secondary {
    background: #fff;
    color: #030b57;
    border: 2px solid #030b57;
}

.v1-btn-secondary:hover {
    background: #f0f4ff;
}

@media (max-width: 767px) {
    .v1-btn {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ─── V1 Form Inputs ──────────────────────────────── */
.v1-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    background: #fff;
}

.v1-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.v1-input.error {
    border-color: #ef4444;
}

/* V1 Form Grid */
.v1-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .v1-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.v1-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 6px;
}

/* ─── Flight Card (Booking/Details variant) ────────── */
.booking-flight-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.booking-flight-card .flight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.booking-flight-card .route {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-flight-card .price {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.booking-flight-card .info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.booking-flight-card .info-row .label {
    color: #718096;
}

.booking-flight-card .info-row .value {
    color: #1a1a1a;
    font-weight: 500;
}

/* ─── Price Breakdown (Desktop sidebar) ────────────── */
.price-breakdown {
    position: sticky;
    top: 140px;
}

.price-breakdown-content {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1.5px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.price-breakdown-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0066ff, #030B57);
    border-radius: 4px 0 0 4px;
}

.price-breakdown-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.breakdown-row .breakdown-label {
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
}

.breakdown-row .breakdown-value {
    color: #030B57;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Diagonal shape removed — was blocking text */
.diagonal-shape {
    display: none;
}

/* ─── Details Page Specific ────────────────────────── */
.details-page {
    max-width: 68rem;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* On mobile, show price summary above the form */
@media (max-width: 1023px) {
    .details-page .grid {
        display: flex;
        flex-direction: column;
    }

    .details-page .grid>.lg\:col-span-1 {
        order: -1;
    }

    .details-page .price-breakdown {
        position: static;
    }
}

.details-error-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.details-error-alert i {
    color: #ef4444;
    margin-top: 2px;
}

.details-error-alert p {
    font-size: 13px;
    color: #991b1b;
    margin: 0;
}

.details-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-section-title i {
    color: #0066ff;
    font-size: 14px;
}

.details-section-title .badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50px;
    background: #eff6ff;
    color: #0066ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Auth banner upgrade */
.auth-banner {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

.auth-banner-top {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.auth-banner-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.auth-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eff6ff;
    color: #0066ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-banner-icon i {
    font-size: 16px;
}

.auth-banner h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.auth-banner p {
    font-size: 13px;
    color: #6b7280;
}

.auth-banner-btn {
    padding: 8px 18px;
    border-radius: 50px;
    background: #030B57;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.auth-banner-btn:hover {
    background: #000a30;
}

.auth-panel-inner {
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    padding: 20px;
}

/* PadiMiles welcome bar */
.pm-welcome-bar {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-welcome-bar .pm-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fef3c7;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-welcome-bar h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1px;
}

.pm-welcome-bar p {
    font-size: 13px;
    color: #6b7280;
}

/* ─── Progress Overlay ─────────────────────────────── */
.progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    max-width: 448px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: progressSlideIn 0.4s ease-out;
}

@keyframes progressSlideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.progress-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066ff, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: progressPulse 2s infinite;
}

@keyframes progressPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.progress-steps {
    text-align: left;
    margin: 24px 0;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: #9ca3af;
}

.progress-step.active {
    color: #030b57;
    font-weight: 500;
}

.progress-step.done {
    color: #10B981;
}

.progress-step .step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
}

.progress-step.active .step-dot {
    background: #030b57;
    box-shadow: 0 0 0 4px rgba(3, 11, 87, 0.15);
    animation: dotPulse 1s infinite;
}

.progress-step.done .step-dot {
    background: #10B981;
}

@keyframes dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(3, 11, 87, 0.15);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(3, 11, 87, 0.05);
    }
}

.progress-time-badge {
    display: inline-block;
    background: #eff6ff;
    color: #1e40af;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* ─── Payment Page (Split Layout — matches plugin exactly) ───── */
.pay-wrapper {
    max-width: 1152px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.pay-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #030b57 0%, #0a1a6e 100%);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.pay-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pay-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    flex-shrink: 0;
}

.pay-banner-icon svg {
    width: 20px;
    height: 20px;
}

.pay-banner-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pay-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pay-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    animation: payDotPulse 2s ease-in-out infinite;
}

@keyframes payDotPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}



.pay-details-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .pay-details-toggle {
        display: none;
    }
}

.pay-details-body {
    display: none;
}

.pay-details-body.pay-details-open {
    display: block;
}

@media (min-width: 768px) {
    .pay-details-body {
        display: block !important;
    }

    .pay-details-body .pay-section {
        border-radius: 10px;
    }
}

@media (max-width: 767px) {
    .pay-details-body {
        padding: 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
    }
}

.pay-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

.pay-section:last-child {
    margin-bottom: 0;
}

.pay-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* Flight card in payment */
.pay-flight-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.pay-flight-card:last-of-type {
    margin-bottom: 0;
}

.pay-flight-card--return {
    border-color: #bfdbfe;
    background: #f0f7ff;
}

.pay-leg-label {
    background: #e0e7ff;
    color: #030b57;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.pay-leg-label--return {
    color: #1e40af;
    background: #dbeafe;
}

.pay-times-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
}

.pay-airport-block {
    min-width: 60px;
}

.pay-time-big {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.pay-airport-code {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 2px;
}

.pay-date-small {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.pay-route-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 6px;
}

.pay-dur {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

.pay-route-line-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.pay-route-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

.pay-route-track {
    flex: 1;
    height: 1px;
    background: #d1d5db;
}

.pay-direct {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.pay-direct--stops {
    color: #b45309;
    font-weight: 600;
}

.pay-flight-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px 0;
    margin: 0 0 16px;
    border-top: 1px solid #f3f4f6;
    padding-top: 12px;
}

.pay-meta-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
}

.pay-meta-ref {
    font-family: ui-monospace, monospace;
}

/* Price card */
.pay-price-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* ── Checkout column — iframe-based (matches plugin) ── */
.pay-checkout-col {
    min-width: 0;
}

.pay-checkout-sticky {
    position: sticky;
    top: 24px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    background: #fff;
}

@media (max-width: 767px) {
    .pay-checkout-sticky {
        position: relative;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
}

.pay-checkout-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Paystack iframe — always in DOM, skeleton overlays it */
.pay-iframe {
    display: block;
    width: 100%;
    height: 800px;
    border: none;
    background: #fff;
}

@media (max-width: 767px) {
    .pay-iframe {
        height: 720px;
    }
}

/* Skeleton loading — positioned absolutely over the iframe */
.pay-checkout-loading {
    position: absolute;
    inset: 47px 0 0 0;
    z-index: 5;
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #fff;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

@media (max-width: 767px) {
    .pay-checkout-loading {
        inset: 47px 0 0 0;
    }
}

.pay-ck-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pay-skel-top {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.pay-skel-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.pay-skel-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pay-skel-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pay-skel-loading-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
    margin-top: auto;
}

/* Checkout error */
.pay-checkout-error {
    padding: 16px 20px;
    margin: 16px;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Expired overlay */
.pay-expired-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pay-expired-card {
    background: #fff;
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.slide-in {
    animation: slideIn 0.6s ease-out;
}

.bounce-in {
    animation: bounceIn 0.8s ease-out;
}

/* ─── Existing V2 Components (updated colors) ─────── */

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.6s linear infinite;
}

.spinner--dark {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #030b57;
}

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

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Skeleton flight cards */
.skeleton-flight-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Price countdown timer */
.price-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 16px;
}

.price-countdown.urgent {
    background: #fef2f2;
    border-color: #fca5a5;
}

.price-countdown .cd-icon {
    font-size: 14px;
    color: #d97706;
}

.price-countdown.urgent .cd-icon {
    color: #dc2626;
}

.price-countdown .cd-text {
    font-size: 13px;
    color: #92400e;
    flex: 1;
}

.price-countdown.urgent .cd-text {
    color: #991b1b;
}

.price-countdown .cd-time {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #92400e;
}

.price-countdown.urgent .cd-time {
    color: #dc2626;
}

/* Sticky mobile price bar for details page */
.mobile-price-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 16px));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

/* Airport autocomplete dropdown */
.airport-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}

.airport-dropdown.active {
    display: block;
}

.airport-option {
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
}

.airport-option:hover,
.airport-option.highlighted {
    background: #f0f4ff;
}

.airport-option .code {
    font-weight: 600;
    font-size: 14px;
    color: #030b57;
    min-width: 36px;
}

.airport-option .info {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.3;
}

.airport-option .city {
    font-weight: 500;
    color: #111827;
}

/* Passenger count selector */
.pax-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pax-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    background: white;
    transition: all 0.15s;
}

.pax-btn:hover:not(:disabled) {
    border-color: #030b57;
    color: #030b57;
}

.pax-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Form inputs (legacy compat) */
.fp-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.fp-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.fp-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Price tag */
.price-tag {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.price-tag .currency {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

/* Toast notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 400px;
}

.toast.show {
    transform: translateX(0);
}

.toast--success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.toast--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.toast--info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* Countdown timer */
.countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.countdown.urgent {
    color: #ef4444;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ─── Selection badges (flights page round-trip) ──── */
.selection-title {
    display: inline-block;
    background: #030b57;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    font-weight: 600;
}

.selection-title-return {
    display: inline-block;
    background: #60a5fa;
    color: #1e3a8a;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    font-weight: 600;
}

/* ─── Empty state ──────────────────────────────────── */
.empty-state-card {
    background: #fff;
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    max-width: 480px;
    margin: 40px auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-state-card .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: #9ca3af;
}

.empty-state-card h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.empty-state-card p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* ─── Status page refinements ──────────────────────── */
.status-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}