:root {
    --main-color: #0062E3;
    --second-color: #6b84ff;
    --brand-light: #7b94ff;
    --orange-color: #f97316;
    --blue: #0062E3;
    --blue-light: #e8f0fc;
    --blue-dark: #0049b0;
    --blue-lt: #6b84ff;
    --blue-dk: #1a2a6c;
    --orange: #f97316;
    --orange-lt: #fb923c;
    --sky: #e8edff;
    --ink: #1e2235;
    --muted: #64748b;
    --red: #e53e3e;
    /* Radius */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #6b7280;
    --slate-700: #334155;
    --slate-900: #0f172a;
    --white: #ffffff;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 40px rgba(0,98,227,.15), 0 4px 12px rgba(0,0,0,.06);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    color: #1e2235;
    font-size: .93333rem;
    line-height: 1.4;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    margin: 0 0 .75rem;
}

/* Hero gradient */
.hero-bg {
    background: linear-gradient(135deg, #0049b0 0%, #0062E3 50%, #1e8fe0 100%) /*linear-gradient(135deg, #1a2a6c 0%, var(--main-color) 45%, #7ec8e3 100%)*/;
}

    .hero-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 70% 40%, rgba(56,189,248,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.text-uppercase {
    text-transform: uppercase !important
}

.hidden {
    display: none !important
}
/* Floating card */
.search-card {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 64px rgba(79, 110, 247, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Ticket strip */
.ticket-strip {
    background: linear-gradient(90deg, #1a2a6c 0%, var(--main-color) 100%);
}

/* Comparison table */
.brand-col {
    background: linear-gradient(180deg, var(--main-color) 0%, #6b84ff 100%);
    color: #fff;
}

/* Steps connector */
.step-connector {
    border-top: 2px dashed #c7d2fe;
}

/* Blog card hover */
.blog-card {
    transition: transform 0.25s, box-shadow 0.25s;
}

    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(79, 110, 247, 0.15);
    }

/* Animate hero content */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

.fade-up {
    animation: fadeUp 0.7s ease both;
}

.fade-up-1 {
    animation-delay: 0.1s;
}

.fade-up-2 {
    animation-delay: 0.25s;
}

.fade-up-3 {
    animation-delay: 0.4s;
}

.fade-up-4 {
    animation-delay: 0.55s;
}

/* Pill badge */
.pill {
    border-radius: 999px;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(90deg, var(--main-color), var(--orange-color));
    background-clip: revert;
    -webkit-background-clip: revert;
    -webkit-text-fill-color: transparent;
}

/* FAQ */
details > summary {
    cursor: pointer;
    list-style: none;
}

    details > summary::-webkit-details-marker {
        display: none;
    }

details[open] summary .chevron {
    transform: rotate(180deg);
}

.chevron {
    transition: transform 0.2s;
}

/* Mobile menu */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
}

    #mobile-menu.open {
        max-height: 420px;
        opacity: 1;
    }

/* Hamburger */
.ham-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #1e2235;
    border-radius: 2px;
    transition: all 0.3s;
}

#ham-btn.open .ham-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#ham-btn.open .ham-line:nth-child(2) {
    opacity: 0;
}

#ham-btn.open .ham-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Scrollable table */
.table-wrap {
    -webkit-overflow-scrolling: touch;
}

    .table-wrap::-webkit-scrollbar {
        height: 4px;
    }

    .table-wrap::-webkit-scrollbar-thumb {
        background: #c7d2fe;
        border-radius: 4px;
    }

/* Sticky mobile CTA */
.sticky-cta {
    display: none;
}

@media (max-width:767px) {
    .sticky-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        padding: 12px 16px 16px;
        background: white;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }

    body {
        padding-bottom: 0;
        margin: 0 auto;
    }
}

/* Testimonials swipe on mobile */
@media (max-width:639px) {
    .testimonials-scroll {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

        .testimonials-scroll::-webkit-scrollbar {
            height: 4px;
        }

        .testimonials-scroll::-webkit-scrollbar-thumb {
            background: #c7d2fe;
            border-radius: 4px;
        }

    .tcard {
        min-width: 78vw;
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

@media (min-width:640px) {
    .testimonials-scroll {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1.5rem;
    }
}

@media (min-width:768px) {
    .testimonials-scroll {
        grid-template-columns: repeat(3,1fr);
    }
}

/* ─── Gradient helpers ─── */
.grad-brand {
    background: linear-gradient(135deg, var(--blue-dk), var(--blue), var(--blue-lt));
}

.grad-orange {
    background: linear-gradient(135deg, var(--orange), var(--orange-lt));
}

.grad-text {
    background: linear-gradient(90deg, var(--blue), var(--blue-lt));
    -webkit-text-fill-color: transparent;
}

.grad-orange-text {
    background: linear-gradient(90deg, var(--orange), var(--orange-lt));
    -webkit-text-fill-color: transparent;
}

/* ─── Page enter animation ─── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.au {
    animation: fadeUp 0.65s ease both;
}

.au1 {
    animation-delay: .05s;
}

.au2 {
    animation-delay: .15s;
}

.au3 {
    animation-delay: .25s;
}

.au4 {
    animation-delay: .35s;
}

.au5 {
    animation-delay: .45s;
}

/* ─── Nav ─── */
nav {
    position: fixed;
    inset-x: 0;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(79,110,247,0.1);
}

/* ─── Hero ticker tape ─── */
@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ticker-track {
    display: flex;
    animation: ticker 28s linear infinite;
    white-space: nowrap;
}

    .ticker-track:hover {
        animation-play-state: paused;
    }

/* ─── Featured card ─── */
.feat-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

    .feat-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(26,42,108,0.92) 0%, rgba(26,42,108,0.4) 50%, transparent 100%);
        z-index: 1;
    }

    .feat-card .feat-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .feat-card:hover .feat-img {
        transform: scale(1.04);
    }

    .feat-card .feat-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

/* ─── Blog card ─── */
.blog-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(79,110,247,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 48px rgba(79,110,247,0.14);
    }

    .blog-card .card-img-wrap {
        overflow: hidden;
    }

    .blog-card .card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .blog-card:hover .card-img {
        transform: scale(1.06);
    }

/* ─── Category pill ─── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pill-blue {
    background: var(--sky);
    color: var(--blue);
}

.pill-orange {
    background: #fff3e8;
    color: var(--orange);
}

.pill-green {
    background: #e6faf0;
    color: #059669;
}

.pill-purple {
    background: #f0ebff;
    color: #7c3aed;
}

.pill-rose {
    background: #fff0f0;
    color: #e11d48;
}

.pill-teal {
    background: #e0f8f8;
    color: #0891b2;
}

/* ─── Newsletter section ─── */
.newsletter {
    background: linear-gradient(135deg, var(--blue-dk) 0%, var(--blue) 60%, var(--blue-lt) 100%);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}

    .newsletter::before {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
        top: -100px;
        right: -100px;
    }

    .newsletter::after {
        content: '';
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: rgba(249,115,22,0.15);
        bottom: -80px;
        left: -60px;
    }

/* ─── Sidebar card ─── */
.sidebar-card {
    background: white;
    border-radius: 18px;
    border: 1px solid rgba(79,110,247,0.08);
    padding: 24px;
}

/* ─── Tag cloud ─── */
.tag {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: var(--sky);
    color: var(--blue);
    border: 1px solid rgba(79,110,247,0.15);
    transition: all 0.2s;
    cursor: pointer;
}

    .tag:hover {
        background: var(--blue);
        color: white;
    }

/* ─── Trending number ─── */
.trend-num {
    font-family: 'DM Serif Display', serif;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sky);
    font-weight: 400;
}

/* ─── Divider ─── */
.section-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
    border: none;
    margin: 0;
}

/* ─── Read more arrow ─── */
.read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    transition: gap 0.2s;
}

    .read-more:hover {
        gap: 10px;
    }
/* ─── Scroll reveal ─── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Wrapper must be relative for absolute dropdown */
.ap-wrap {
    position: relative;
}

/* Trip-type radio tabs */
.trip-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
}

    .trip-tabs label {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: .86667rem;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: 99px;
        border: 1.5px solid var(--slate-200);
        cursor: pointer;
        transition: background .15s, border-color .15s, color .15s;
        color: var(--slate-700);
    }

    .trip-tabs input[type="radio"] {
        display: none;
    }

        .trip-tabs input[type="radio"]:checked + span { /* handled via JS-free sibling trick */
        }

    .trip-tabs label:has(input:checked) {
        background: var(--blue-light);
        border-color: var(--blue);
        color: var(--blue);
    }

/* ── The visible input trigger ──
       Matches Tailwind: px-4 py-3 text-sm rounded-xl border border-slate-200
       py-3 = 12px top+bottom, text-sm line-height ≈ 20px → total height = 44px
       Same as: mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm
    */
.ap-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Match input py-3 (12px) + text-sm (20px line-height) = 44px total */
    padding: 12px 16px;
    height: 44px; /* explicit fixed height = same as inputs */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem; /* text-sm line-height */
    color: #1e2235;
    cursor: pointer;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    text-align: left;
    margin-top: 4px; /* mt-1 = 4px */
    box-sizing: border-box;
}

    .ap-trigger:focus, .ap-trigger.open {
        border-color: #0062E3;
        box-shadow: 0 0 0 4px rgba(79,110,247,.15);
    }

.ap-trigger-inner {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ap-trigger-city {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1e2235;
}
/* sub line is hidden when trigger is collapsed to single-line height */
.ap-trigger-sub {
    display: none;
}

.ap-trigger-iata {
    font-weight: 800;
    font-size: 1rem;
    color: #0062E3;
    letter-spacing: .03em;
    flex-shrink: 0;
}

/* Placeholder state */
.ap-trigger.placeholder .ap-trigger-city {
    font-weight: normal;
}

/* Dropdown panel */
.ap-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.14);
    overflow: hidden;
    display: none;
    min-width: 300px;
}

    .ap-dropdown.open {
        display: block;
    }

/* Search bar inside dropdown */
.ap-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

    .ap-search-bar input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        color: #1e2235;
        font-family: inherit;
        background: transparent;
    }

        .ap-search-bar input::placeholder {
            color: #94a3b8;
        }

/* Scrollable list body */
.ap-list-body {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .ap-list-body::-webkit-scrollbar {
        width: 4px;
    }

    .ap-list-body::-webkit-scrollbar-thumb {
        background: #c7d2fe;
        border-radius: 4px;
    }

/* Recent pills section */
.ap-recent {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.ap-recent-title {
    font-size: 12px;
    font-weight: 700;
    color: #1e2235;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ap-recent-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ap-recent-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: background .15s;
}

    .ap-recent-pill:hover {
        background: #e8edff;
        color: #0062E3;
        border-color: #c7d2fe;
    }

    .ap-recent-pill .rp-x {
        color: #94a3b8;
        font-size: 11px;
        margin-left: 2px;
    }

        .ap-recent-pill .rp-x:hover {
            color: #ef4444;
        }

/* Group header */
.ap-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1e2235;
    cursor: pointer;
    user-select: none;
    background: #fafbff;
    border-top: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
}

    .ap-group-header .gh-count {
        color: #64748b;
        font-weight: 500;
    }

    .ap-group-header .gh-chevron {
        color: #94a3b8;
        font-size: 10px;
        transition: transform .2s;
    }

    .ap-group-header.collapsed .gh-chevron {
        transform: rotate(180deg);
    }

.ap-search-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 16px;
}

/* Airport row */
.ap-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid #f8fafc;
}

    .ap-item:hover {
        background: #f0f4ff;
    }

    .ap-item.selected {
        background: #e8edff;
    }

.ap-item-city {
    font-size: 14px;
    font-weight: 600;
    color: #1e2235;
}

.ap-item-airport {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
}

.ap-item-iata {
    font-size: 14px;
    font-weight: 800;
    color: #0062E3;
    letter-spacing: .04em;
}

/* No results */
.ap-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* Collapsed group items hidden */
.ap-group-items.collapsed {
    display: none;
}

/* ══ Flight Results ══════════════════════════════════════════════════════ */
#flightsResult {
    padding-top: 15px;
    padding-bottom: 15px;
}

.fr-header {
    margin: 0 auto 14px;
    padding: 0 4px;
}

.fr-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.fr-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
}

.fr-meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 2px 0 0;
}

.fr-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0062E3;
    background: #dbeafe;
    padding: 4px 12px;
    border-radius: 999px;
}

.fr-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card shell */
.fr-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .2s;
    position: relative;
}

    .fr-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #2563eb;
        border-radius: 12px 0 0 12px;
        opacity: 0;
        transition: opacity .2s;
    }

    .fr-card:hover {
        box-shadow: 0 4px 18px rgba(0,0,0,.10);
    }

.fr-card-active::before {
    opacity: 1;
}

.fr-card-active {
    border-color: #bfdbfe;
}

/* Summary row: main area | dashed divider | price */
.fr-summary {
    display: grid;
    grid-template-columns: 1fr auto;
}

/* Main (left) area */
.fr-col-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 20px;
}

.fr-main-top {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Airline logo box */
.fr-airline-logo {
    width: 44px;
    height: 44px;
    /*border: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    font-weight: 900;
    font-size: 11px;
    color: #1d4ed8;
    letter-spacing: .5px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .fr-airline-logo .fr-airline-code {
        border-radius: 9999px;
    }
/* Stops + airline name */
.fr-stops-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 110px;
}

.fr-stops-text {
    font-size: 0.88rem;
    color: #374151;
}

    .fr-stops-text strong {
        color: #111827;
    }

.fr-airline-name {
    font-size: 0.86667rem;
    color: #6b7280;
}

.fr-detail-fare-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--slate-50);
    border-radius: var(--radius-sm);
    padding: 0;
    margin-bottom: 12px;
    font-size: .8rem;
    color: var(--slate-600);
}

    .fr-detail-fare-bar span strong {
        color: var(--slate-900);
    }

/* Route line */
.fr-col-route {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.fr-route-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
}

.fr-time {
    font-size: .925rem;
    font-weight: 500;
    color: #1e2235;
    line-height: 1;
}

.fr-iata {
    font-size: 0.96667rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2px;
}

.fr-route-line {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

    .fr-route-line > .fr-line {
        width: 100%;
        height: 1.5px;
        background: #9ca3af;
    }

.fr-line-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fr-line-label {
    font-size: 0.83333rem;
    color: #64748b;
    font-weight: normal;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Flight Details button */
.fr-main-bottom {
    padding: 0;
    margin: 1px auto 0;
    display: block;
    text-align: center;
    width: 100%;
}

.fr-details-btn {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--main-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, border-color .15s;
}

    .fr-details-btn:hover {
        color: #2563eb;
    }

.fr-details-chevron {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    transition: transform .2s;
}

/* Price column — separated by dashed border */
.fr-col-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1.5px dashed #e2e8f0;
    min-width: 140px;
    gap: 3px;
}

.fr-price {
    font-size: 1.55rem;
    font-weight: 900;
    color: #111827;
    line-height: 1;
}

.fr-price-currency {
    font-size: 1rem;
    font-weight: 700;
}

.fr-price-cents {
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: super;
}

.fr-price-installment {
    font-size: 0.86667rem;
    font-weight: 700;
    color: #2563eb;
}

.fr-price-sub {
    font-size: 0.73rem;
    color: #9ca3af;
    text-align: right;
    line-height: 1.4;
}

    .fr-price-sub span {
        font-size: 0.7rem;
    }

.fr-select-btn {
    margin-top: 0;
    background: #e8460a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: .93333rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .2px;
}

    .fr-select-btn:hover {
        background: #c73c08;
        transform: translateY(-1px);
    }

    .fr-select-btn:active {
        transform: translateY(0);
    }

/* Detail panel */
.fr-detail {
    border-top: 1.5px solid #e5e7eb;
    background: #f9fafb;
}

    .fr-detail.hidden {
        display: none;
    }

.fr-detail-inner {
    max-width: 100%;
    padding: 15px 20px 20px;
}

.fr-detail-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 0;
    padding: 5px 20px 0;
}

.fr-detail-title {
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
}

.fr-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.833333rem;
    font-weight: normal;
    color: var(--main-color);
    padding: 0 0;
}

    .fr-close-btn:hover {
        text-decoration: underline;
    }

.fr-segment {
    display: grid;
    grid-template-columns: 44px 1fr 150px 28px 150px auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
}

@media (max-width: 640px) {
    .fr-segment {
        grid-template-columns: 40px 1fr;
    }

    .fr-seg-arrow, .fr-seg-times:last-of-type, .fr-seg-dur {
        grid-column: 2;
    }
}

.fr-section-title {
    font-weight: 700 !important
}

.fr-seg-logo {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    /*border: 1px solid #e5e7eb;
    background: linear-gradient(135deg,#eff6ff,#dbeafe);
    font-weight: 900;
    font-size: 11px;
    color: #1d4ed8;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .fr-seg-logo img {
        border-radius: 100%;
    }

.fr-seg-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fr-seg-airline {
    font-weight: 700;
    font-size: 0.88rem;
    color: #111827;
}

.fr-seg-flight {
    font-size: 0.83333rem;
    color: #6b7280;
}

.fr-seg-cabin, .fr-seg-brand, .fr-seg-baggage, .fr-seg-terminal {
    font-size: 0.83333rem;
    color: #374151;
}

.fr-cabin-label {
    color: #b45309;
    font-weight: 500;
}

.fr-seg-times {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fr-seg-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.fr-seg-time-bold {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
}

.fr-seg-city {
    font-size: 0.9rem;
    color: #111827;
}

    .fr-seg-city small {
        font-size: 0.86667rem;
        font-weight: bold;
    }

.fr-seg-arrow {
    font-size: 1.1rem;
    color: #9ca3af;
    text-align: center;
}

.fr-seg-dur {
    font-size: 0.83333rem;
    color: #374151;
    line-height: 1.5;
    text-align: right;
}

.fr-layover {
    text-align: center;
    font-size: 0.83333rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 999px;
    padding: 4px 16px;
    margin: 4px auto 8px;
    width: fit-content;
}

.fr-total-dur {
    font-size: 0.85rem;
    color: #374151;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.fr-price-breakdown {
    margin-top: 12px;
    background: var(--blue-light);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: .83333rem;
    color: var(--slate-600);
    line-height: 1.8;
}

    .fr-price-breakdown strong {
        color: var(--slate-900);
    }

    .fr-price-breakdown div:last-child {
        font-size: .86667rem;
        font-weight: normal;
    }

        .fr-price-breakdown div:last-child strong {
            font-size: .96667rem;
            font-weight: 700;
            color: #d83b4c
        }

@media (max-width: 640px) {
    .fr-summary {
        grid-template-columns: 1fr;
    }

    .fr-col-price {
        border-left: none;
        border-top: 1.5px dashed #e2e8f0;
        align-items: stretch;
        padding: 16px;
    }

    .fr-main-top {
        gap: 12px;
    }

    .fr-segment {
        grid-template-columns: 40px 1fr;
    }

    .fr-seg-arrow, .fr-seg-times:last-of-type, .fr-seg-dur {
        grid-column: 2;
    }
}
/* ── Card shell ─────────────────────────────────────────── */
.cart-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.cart-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f0f2f7;
}

    .cart-header svg {
        color: #1a1f36;
        flex-shrink: 0;
    }

    .cart-header h2 {
        font-family: 'Sora', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1f36;
        letter-spacing: -.02em;
    }

/* ── Leg ─────────────────────────────────────────────────── */
.leg {
    padding: 16px 22px;
    border-bottom: 1px solid #f0f2f7;
    position: relative;
}

    .leg.active {
        background: #fff;
    }

    .leg.pending {
        background: #fafbfd;
    }

    /* left accent bar */
    .leg.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 3px;
        background: #1a5dc8;
        border-radius: 0 3px 3px 0;
    }

/* leg meta row */
.leg-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.leg-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.leg.active .leg-num {
    background: #1a5dc8;
    color: #fff;
}

.leg.pending .leg-num {
    background: #dde4f5;
    color: #7a90c8;
}

.leg-info {
    flex: 1;
    min-width: 0;
}

.leg-date {
    font-size: .72rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 2px;
}

.leg.pending .leg-date {
    color: #b8c5db;
}

.leg-route {
    font-size: .88rem;
    font-weight: 500;
    color: #1a5dc8;
}

.leg.pending .leg-route {
    color: #a0b4d6;
}

/* ── Flight detail block (inside active leg) ─────────────── */
.flight-detail {
    background: #fff;
    border-radius: 0;
    margin-top: 0;
}

/* airline row */
.airline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0;
    border-top: 1px solid #f0f2f7;
}

.airline-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.airline-logo {
    width: 36px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
/* fallback logo placeholder */
.airline-logo-box {
    width: 36px;
    height: 24px;
    /*background: linear-gradient(135deg, #ff6b6b, #ee0979);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -.02em;
}

    .airline-logo-box img {
        height: 100%;
        border-radius: 5px;
        max-width: 100%;
    }

.airline-logo-vt {
    background: linear-gradient(135deg, #1a5dc8, #2d7cf7);
}

.airline-name {
    font-size: .82rem;
    font-weight: 600;
    color: #1a1f36;
}

.details-link {
    font-size: .8rem;
    font-weight: 600;
    color: #1a5dc8;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}

    .details-link:hover {
        opacity: .75;
    }

/* times row */
.times-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 0 8px;
}

.time-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.time-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1f36;
    line-height: 1;
}

.iata-badge {
    display: inline-block;
    background: #eef1f7;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: .04em;
}

.flight-mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 0;
}

/* plane + dashes line */
.flight-line {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
}

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

.fl-dash {
    flex: 1;
    height: 1.5px;
    background: repeating-linear-gradient( 90deg, #94a3b8 0, #94a3b8 4px, transparent 4px, transparent 8px );
}

.fl-plane {
    color: #64748b;
    font-size: .85rem;
}

.flight-meta {
    font-size: .78rem;
    font-weight: 600;
    color: #334155;
}

.flight-stops {
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 500;
}

/* change button */
.change-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #f0f4ff;
    border: none;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    color: #1a5dc8;
    cursor: pointer;
    text-align: center;
    margin-top: 8px;
    transition: background .15s;
}

    .change-btn:hover {
        background: #dde8ff;
    }

/* ── Subtotal section ────────────────────────────────────── */
.subtotal-section {
    padding: 16px 22px 0;
    background: #fafbfd;
    border-top: 1px solid #f0f2f7;
}

.subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding-bottom: 14px;
    user-select: none;
}

.subtotal-label {
    font-size: .78rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 2px;
}

.subtotal-amount {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e53e3e;
    letter-spacing: -.02em;
}

.subtotal-unit {
    font-size: .72rem;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 3px;
}

.chevron-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .25s, background .15s;
    flex-shrink: 0;
}

    .chevron-btn.open {
        transform: rotate(180deg);
        background: #f0f4ff;
    }

    .chevron-btn svg {
        color: #475569;
    }

/* breakdown lines */
.breakdown {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
    opacity: 0;
}

    .breakdown.open {
        max-height: 200px;
        opacity: 1;
    }

.breakdown-inner {
    padding-bottom: 16px;
    border-top: 1px solid #e8edf5;
}

.breakdown-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f0f2f7;
}

    .breakdown-line:last-child {
        border-bottom: none;
    }

.bd-route {
    font-size: .8rem;
    font-weight: 500;
    color: #475569;
}

.bd-price {
    font-size: .8rem;
    font-weight: 600;
    color: #1a1f36;
}

.bd-pax {
    font-size: .7rem;
    font-weight: 400;
    color: #94a3b8;
}

/* ── Passenger form styles ─────────────────────────── */
.pf-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 28px 28px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.pf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.pf-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1f36;
}

.pf-required-note {
    font-size: .76rem;
    color: #64748b;
}

    .pf-required-note span {
        color: #dc2626;
    }

/* ── section heading ── */
.pf-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 24px 0 16px;
}

/* ── 2-col grid ── */
.pf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .pf-row {
        grid-template-columns: 1fr;
    }
}

.pf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .pf-field.pf-full {
        grid-column: 1 / -1;
    }

/* ── label ── */
.pf-label {
    font-size: .82rem;
    font-weight: 600;
    color: #1a1f36;
}

    .pf-label .req {
        color: #dc2626;
        margin-left: 2px;
    }

.pf-hint {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 3px;
}

/* ── base input / select ── */
.pf-input, .pf-select {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: .9rem;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
}

    .pf-input::placeholder {
        color: #94a3b8;
    }

    .pf-input:focus, .pf-select:focus {
        border-color: #1a5dc8;
        box-shadow: 0 0 0 3px rgba(26,93,200,.1);
    }

    .pf-input.pf-error, .pf-select.pf-error {
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220,38,38,.08);
    }

/* ── select wrapper (chevron) ── */
.pf-select-wrap {
    position: relative;
}

    .pf-select-wrap .pf-select {
        padding-right: 40px;
        cursor: pointer;
    }

    .pf-select-wrap::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #64748b;
        pointer-events: none;
    }

/* ── input with error icon ── */
.pf-input-icon-wrap {
    position: relative;
}

    .pf-input-icon-wrap .pf-input {
        padding-right: 42px;
    }

.pf-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc2626;
    display: none;
}

.pf-input-icon-wrap.pf-has-error .pf-input-icon {
    display: flex;
}

.pf-input-icon-wrap.pf-has-error .pf-input {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}

/* ── error message ── */
.pf-err-msg {
    font-size: .75rem;
    color: #dc2626;
    margin-top: 0;
    display: none;
    min-height: 1rem;
}

/* ── DOB / expiry split row ── */
.pf-dob-group {
    display: flex;
    gap: 8px;
}

    .pf-dob-group .pf-select-wrap {
        flex: 2;
    }

    .pf-dob-group .pf-short {
        flex: 1;
    }

    .pf-dob-group .pf-input {
        text-align: center;
    }

.pf-exp-group {
    display: flex;
    gap: 8px;
}

    .pf-exp-group .pf-short {
        flex: 1;
    }

    .pf-exp-group .pf-long {
        flex: 2;
    }

    .pf-exp-group .pf-input {
        text-align: center;
    }

/* ── action buttons ── */
.pf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f2f7;
}

.pf-btn-cancel {
    padding: 11px 24px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .pf-btn-cancel:hover {
        background: #f8fafc;
    }

.pf-btn-save {
    padding: 11px 28px;
    border: none;
    border-radius: 8px;
    background: #1a5dc8;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

    .pf-btn-save:hover {
        background: #1549a8;
    }

/* ── shared card shell (reuses pf-card radius/shadow) ── */
.cp-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 19px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.cp-section-title {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 14px;
}

.cp-name-label,
.cp-email-label {
    font-size: .82rem;
    font-weight: 600;
    color: #1a1f36;
    margin-bottom: 6px;
    display: block;
}

    .cp-name-label abbr,
    .cp-email-label abbr {
        color: #e53e3e;
        font-style: italic;
        font-weight: normal;
        margin-left: 0;
    }

.cp-name-required,
.cp-email-required {
    color: #e53e3e;
    font-style: italic;
    font-weight: 500;
    margin-left: 6px;
}

.cp-input-icon-wrap {
    position: relative;
}

    .cp-input-icon-wrap .cp-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #1a5dc8;
        display: flex;
    }

.cp-name-input,
.cp-email-input {
    width: 100%;
    height: 52px;
    padding: 0 14px 0 42px;
    border: 1.5px solid #1a5dc8;
    border-radius: 10px;
    font-size: .9rem;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .cp-name-input::placeholder,
    .cp-email-input::placeholder {
        color: #94a3b8;
    }

    .cp-name-input:focus,
    .cp-email-input:focus {
        box-shadow: 0 0 0 3px rgba(26,93,200,.1);
    }

.cp-select-input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1.5px solid #1a5dc8;
    border-radius: 10px;
    font-size: .9rem;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .cp-select-input abbr {
        color: #dc2626
    }

    .cp-select-input::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #64748b;
        pointer-events: none;
    }

    .cp-select-input:focus {
        box-shadow: 0 0 0 3px rgba(26,93,200,.1);
    }
/* ── ticket valid heading + radio pills ── */
.cp-toggle-label {
    font-size: .8rem;
    font-weight: 600;
    color: #1a1f36;
    margin-bottom: 6px;
    display: block;
}

.cp-tv-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 18px;
}

.cp-tv-label {
    cursor: pointer;
    display: inline-flex;
}
    /* hide native radio */
    .cp-tv-label input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
/* pill wrapper */
.cp-tv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    font-weight: 500;
    color: #334155;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
/* custom radio circle */
.cp-tv-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #94a3b8;
    background: #fff;
    flex-shrink: 0;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
/* checked state */
.cp-tv-label input[type="radio"]:checked + .cp-tv-pill {
    border-color: #1a5dc8;
    color: #1a5dc8;
    font-weight: 700;
}

    .cp-tv-label input[type="radio"]:checked + .cp-tv-pill .cp-tv-radio {
        border-color: #1a5dc8;
        border-width: 5px;
        background: #fff;
    }

.cp-tv-extra {
    color: #64748b;
    font-weight: 400;
    font-size: .8rem;
}

.cp-tv-label input[type="radio"]:checked + .cp-tv-pill .cp-tv-extra {
    color: #1a5dc8;
}
/* hover */
.cp-tv-label:hover .cp-tv-pill {
    border-color: #93c5fd;
}

/* ── checkbox rows ── */
.cp-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

    .cp-check-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 0;
        accent-color: #1a5dc8;
        flex-shrink: 0;
        cursor: pointer;
    }

.cp-card .cp-check-row:last-child, 
.cp-card .pf-row:last-child {
    margin-bottom: 0 !important;
}

.cp-check-label {
    font-size: .84rem;
    font-weight: 600;
    color: #1a1f36;
    cursor: pointer;
    line-height: 1.4;
}

    .cp-check-label.cp-muted {
        color: #64748b;
        font-weight: 500;
    }

/* collapsible note / coupon panels */
.cp-expand {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}

    .cp-expand.cp-open {
        max-height: 300px;
    }

.cp-expand-label {
    font-size: .78rem;
    font-weight: 700;
    color: #1a5dc8;
    margin: 8px 0 5px;
}

.cp-textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .84rem;
    color: #1a1f36;
    resize: vertical;
    outline: none;
    transition: border-color .15s;
}

    .cp-textarea:focus {
        border-color: #1a5dc8;
        box-shadow: 0 0 0 3px rgba(26,93,200,.08);
    }

    .cp-textarea::placeholder {
        color: #94a3b8;
    }

/* coupon row */
.cp-coupon-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.cp-coupon-input {
    flex: 1;
    height: 50px;
    padding: 0 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: .88rem;
    color: #1a1f36;
    outline: none;
    transition: border-color .15s;
}

    .cp-coupon-input:focus {
        border-color: #1a5dc8;
        box-shadow: 0 0 0 3px rgba(26,93,200,.08);
    }

    .cp-coupon-input::placeholder {
        color: #94a3b8;
    }

.cp-coupon-btn {
    height: 50px;
    padding: 0 22px;
    background: #2d4a8a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

    .cp-coupon-btn:hover {
        background: #1a5dc8;
    }

/* ── payment method tabs ── */
/* ══════════════════════════════════════════════════
                     *  Payment gateway — Stripe · PayPal · Airwallex
                     * ══════════════════════════════════════════════════ */

/* ── Tab selector row ── */
.cp-pay-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.cp-pay-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    min-height: 96px;
    outline: none;
}

    .cp-pay-tab:hover {
        border-color: #bfdbfe;
        background: #fff;
        box-shadow: 0 4px 14px rgba(26,93,200,.08);
        transform: translateY(-1px);
    }

    .cp-pay-tab.cp-active {
        border-color: #1a5dc8;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(26,93,200,.1), 0 6px 20px rgba(26,93,200,.12);
        transform: translateY(-2px);
    }

        .cp-pay-tab.cp-active::after {
            content: "\2713";
            position: absolute;
            top: -9px;
            right: -9px;
            width: 20px;
            height: 20px;
            background: #1a5dc8;
            color: #fff;
            border-radius: 50%;
            border: 2px solid #fff;
            font-size: 10px;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 20px;
        }

.cp-pay-tab-logo {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cp-pay-tab-logo svg {
        max-height: 36px;
        width: auto;
        display: block;
    }

.cp-pay-tab-name {
    font-size: .7rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cp-pay-tab.cp-active .cp-pay-tab-name {
    color: #1a5dc8;
}

.cp-pay-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #f97316;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ── Panel body wrapper ── */
.cp-pay-body {
    border: 1.5px solid #e8edf5;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.cp-pay-panel {
    display: none;
}

    .cp-pay-panel.cp-active {
        display: block;
    }

/* ── Panel header strip ── */
.cp-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #f0f4f9;
    background: #fafbff;
}

.cp-panel-header-logo {
    height: 28px;
    flex-shrink: 0;
}

    .cp-panel-header-logo svg {
        height: 28px;
        width: auto;
        min-width: 100px;
    }

.cp-panel-header-title {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1f36;
    line-height: 1.2;
}

.cp-panel-header-sub {
    font-size: .72rem;
    color: #64748b;
    margin-top: 1px;
}

#cp_panel_stripe .cp-panel-header {
    background: #f5f4ff;
    border-bottom-color: #ede9ff;
}

#cp_panel_paypal .cp-panel-header {
    background: #f0f7ff;
    border-bottom-color: #dbeafe;
}

#cp_panel_airwallex .cp-panel-header {
    background: #f0fbff;
    border-bottom-color: #bae6fd;
}

/* ── Panel content ── */
.cp-panel-body {
    padding: 22px 24px;
}

/* ── Shared field ── */
.cp-pay-field {
    margin-bottom: 16px;
}

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

.cp-pay-field-lbl {
    font-size: .78rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.cp-pay-inp {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: .9rem;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .cp-pay-inp::placeholder {
        color: #94a3b8;
    }

    .cp-pay-inp.cp-has-icon {
        padding-left: 46px;
    }

.cp-pay-inp-wrap {
    position: relative;
}

    .cp-pay-inp-wrap .cp-icon-l {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        pointer-events: none;
    }

#cp_panel_stripe .cp-pay-inp:focus {
    border-color: #635bff;
    box-shadow: 0 0 0 3px rgba(99,91,255,.12);
}

#cp_panel_paypal .cp-pay-inp:focus {
    border-color: #009cde;
    box-shadow: 0 0 0 3px rgba(0,156,222,.12);
}

#cp_panel_airwallex .cp-pay-inp:focus {
    border-color: #00b4d8;
    box-shadow: 0 0 0 3px rgba(0,180,216,.12);
}

.cp-pay-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* card scheme badges row */
.cp-schemes-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cp-scheme {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
}

.cp-scheme-visa {
    background: #1a1f8f;
}

.cp-scheme-mc {
    background: linear-gradient(90deg,#eb001b 40%,#f79e1b);
}

.cp-scheme-amex {
    background: #007bc1;
}

.cp-scheme-jcb {
    background: #0e4c96;
}

.cp-scheme-pp {
    background: #003087;
}

/* secure note row */
.cp-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f4f9;
}

/* redirect panel (PayPal) */
.cp-redirect-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    text-align: center;
}

.cp-redirect-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1f36;
}

.cp-redirect-desc {
    font-size: .82rem;
    color: #64748b;
    max-width: 300px;
    line-height: 1.6;
}

.cp-redirect-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .72rem;
    font-weight: 600;
    color: #16a34a;
}

.cp-redirect-btn {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #003087;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

    .cp-redirect-btn:hover {
        background: #001f5b;
    }

    .cp-redirect-btn.pp {
        background: #009cde;
    }

        .cp-redirect-btn.pp:hover {
            background: #007ab5;
        }

/* ── total price bar ── */
.cp-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border: 1.5px solid #e8edf5;
    border-radius: 14px;
    background: #fff;
    margin-top: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* ── redirect notice bar ── */
.cp-redirect-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .76rem;
    color: #475569;
    line-height: 1.5;
    margin-top: 4px;
}

    .cp-redirect-notice svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .cp-redirect-notice strong {
        color: #1a1f36;
    }

/* ── total price bar ── */
.cp-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border: 1.5px solid #e8edf5;
    border-radius: 14px;
    background: #fff;
    margin-top: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.cp-total-label {
    font-size: .96667rem;
    font-weight: 500;
    color: #1a1f36;
}

.cp-total-amt {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--red);
}

/* ── submit button ── */
.cp-submit-wrap {
    text-align: left;
    width: 100%
}

.cp-submit-btn {
    padding: 12px 28px;
    gap: 8px;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .9333rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    letter-spacing: .01em;
}

    .cp-submit-btn:hover {
        background: var(--orange-lt);
    }