/* ============================================================
   Mobile input zoom-prevention (iOS Safari / iPadOS).

   iOS auto-zooms the viewport when a focused input has an effective
   font-size below 16px — annoying because the page reflows and the
   user has to manually pinch-zoom back out. The fix: ensure every
   editable text-input control renders at ≥16px.

   This rule is intentionally NOT inside a `@media` query — iOS
   triggers the zoom on every touch device regardless of viewport
   width (iPads + landscape phones included). A media-query-gated
   fix would miss them.

   Only targets text-entry inputs (and the select element which gets
   similar treatment). Doesn't touch buttons, radios, checkboxes, or
   sub-16px labels / badges elsewhere on the page.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input:not([type]),
textarea,
select {
    font-size: 16px;
}

/* ============================================================
   Contact form (/contact) — modern brand-aligned form card.
   All custom rules; no theme overrides outside this block.
   ============================================================ */
.pmf-contact-card {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
    margin-bottom: 24px;
}
.pmf-contact-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 12%, white);
}
.pmf-contact-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.pmf-contact-head-text h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.pmf-contact-head-text p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

/* Labels */
.pmf-contact-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.pmf-required {
    margin-left: 2px;
    color: #dc3545;
    font-weight: 800;
}
.pmf-label-hint {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: lowercase;
}

/* Icon-prefixed input box */
.pmf-contact-input-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #ffffff;
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pmf-contact-input-box:hover {
    border-color: #d9d3ff;
}
.pmf-contact-input-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
    background: color-mix(in srgb, var(--color-primary) 3%, white);
}
.pmf-contact-input-box.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.10);
    background: #fffafa;
}
.pmf-contact-input-box > i {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 16px;
    transition: color 0.18s ease;
}
.pmf-contact-input-box:focus-within > i { color: var(--color-primary); }
.pmf-contact-input-box.is-invalid > i { color: #dc3545; }

.pmf-contact-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 14px 0;
    font-size: 16px;       /* min 16px — prevents iOS Safari auto-zoom on focus */
    font-family: inherit;
    color: #0f172a;
}
.pmf-contact-input::placeholder { color: #94a3b8; }
.pmf-contact-input:disabled,
.pmf-contact-input[readonly] {
    color: #64748b;
    cursor: not-allowed;
}

/* Read-only email row — slight tint + "verified" badge */
.pmf-contact-input-readonly {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--color-primary) 2%, transparent) 100%);
    border-color: #e8e5fa;
}
.pmf-contact-input-readonly:focus-within {
    border-color: #e8e5fa;
    box-shadow: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--color-primary) 2%, transparent) 100%);
}
.pmf-contact-input-hint {
    flex-shrink: 0;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* Textarea — no icon prefix; pad horizontally like input box */
.pmf-contact-textarea {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 12px;
    font-size: 16px;       /* min 16px — prevents iOS Safari auto-zoom on focus */
    font-family: inherit;
    color: #0f172a;
    resize: vertical;
    min-height: 150px;
    line-height: 1.55;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pmf-contact-textarea:hover { border-color: #d9d3ff; }
.pmf-contact-textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
    background: color-mix(in srgb, var(--color-primary) 3%, white);
}
.pmf-contact-textarea::placeholder { color: #94a3b8; }
.pmf-contact-textarea.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.10);
    background: #fffafa;
}

/* Field-level error + helper text */
.pmf-field-error {
    margin: 7px 4px 0;
    font-size: 12.5px;
    color: #dc3545;
    font-weight: 600;
    line-height: 1.4;
    display: none;
    align-items: flex-start;
    gap: 6px;
}
.pmf-field-error.is-active { display: flex; }
.pmf-field-error.is-active::before {
    content: "\F33A"; /* bootstrap-icons exclamation-triangle-fill */
    font-family: bootstrap-icons;
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1.4;
}
.pmf-field-help {
    margin: 7px 4px 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Textarea footer — error on left, counter on right */
.pmf-field-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pmf-field-footer .pmf-field-error { flex: 1 1 auto; min-width: 0; }
.pmf-field-counter {
    margin: 7px 4px 0;
    font-size: 12px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Submit button */
.pmf-contact-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.pmf-contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 28%, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease, opacity 0.2s ease;
}
.pmf-contact-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 36%, transparent);
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 100%);
}
.pmf-contact-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.pmf-contact-submit-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    outline-offset: 3px;
}
.pmf-contact-submit-btn:disabled,
.pmf-contact-submit-btn.is-loading {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.pmf-contact-submit-btn.is-loading i {
    animation: pmfContactSpin 0.9s linear infinite;
}
@keyframes pmfContactSpin {
    to { transform: rotate(360deg); }
}
.pmf-contact-submit-btn i { font-size: 17px; }

/* Responsive */
@media (max-width: 991px) {
    .pmf-contact-card { padding: 26px; }
}
@media (max-width: 767px) {
    .pmf-contact-card {padding: 22px 20px;border-radius: 14px;margin-bottom: 0;}
    .pmf-contact-head { gap: 14px; padding-bottom: 18px; margin-bottom: 18px; }
    .pmf-contact-icon { width: 46px; height: 46px; font-size: 20px; border-radius: 12px; }
    .pmf-contact-head-text h3 { font-size: 18px; }
    .pmf-contact-head-text p { font-size: 13px; }
    .pmf-contact-submit { justify-content: stretch; }
    .pmf-contact-submit-btn { width: 100%; justify-content: center; padding: 14px 20px; }
}
@media (max-width: 480px) {
    .pmf-contact-card { padding: 18px 16px; }
    .pmf-contact-input { font-size: 16px; padding: 12px 0; }   /* keep ≥16px on mobile to stop iOS zoom */
    .pmf-contact-input-box { padding: 0 14px; gap: 10px; }
    .pmf-contact-textarea { padding: 12px 14px; font-size: 16px; min-height: 130px; }   /* keep ≥16px on mobile to stop iOS zoom */
    .pmf-contact-input-hint { font-size: 9px; padding: 3px 8px; }
}

/* Style for the preloader */
.r-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0 0 0 / 31%);
    backdrop-filter: blur(3px);
    z-index: 9999;
}

.r-preloader .r-spinner {
    /* Brand-coloured spinner: soft tinted ring + primary arc spinning
       on top, so the loader picks up whatever --color-primary is set
       to (and re-tints automatically if the brand color changes). */
    border: 8px solid color-mix(in srgb, var(--color-primary) 18%, white);
    border-top: 8px solid var(--color-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: rSpin 1.5s linear infinite;
}

/* Animation for spinning */
@keyframes rSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.login-page,
.otp-page-section{
    background: transparent!important;
    min-height: auto!important;
}

.otp-card{
    max-width: 100%;
}

@media (max-width: 767px) {
    .otp-resend-row{
        margin-top: 15px!important;
        margin-bottom: 0px!important;
    }
}

/* Header avatar dropdown — let <button>s act as .dropdown-item rows so the
   Sign-out form-button matches the theme's <a> dropdown items. */
.dashboard-profile-dropdown button.dropdown-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.dashboard-profile-dropdown button.dropdown-item:focus {
    outline: 0;
}

.pmf-inline-success {
    padding-right: 30px;
}

/* ============================================================
   Scroll-to-top button — fixed bottom-right pill, fades in once
   the user has scrolled past the threshold. Brand-coloured so it
   re-tints with --color-primary automatically. JS toggles the
   .is-visible class; the [hidden] attribute is removed before the
   fade-in animation runs.
   ============================================================ */
.pmf-scroll-top {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(18px, 4vw, 34px);
    z-index: 99;       /* above content, under .r-preloader (9999) */
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 36%, transparent);
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pmf-scroll-top > i {
    font-size: 20px;
    line-height: 1;
}
.pmf-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    opacity: 50%;
}
.pmf-scroll-top:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary) 45%, transparent);
    opacity: 100%;
}
.pmf-scroll-top:active {
    transform: translateY(0) scale(0.98);
}
.pmf-scroll-top:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    outline-offset: 3px;
}
.pmf-scroll-top[hidden] {
    display: none !important;
}
@media (max-width: 480px) {
    .pmf-scroll-top {
        width: 42px;
        height: 42px;
    }
    .pmf-scroll-top > i {
        font-size: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pmf-scroll-top {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .pmf-scroll-top.is-visible {
        transform: none;
    }
}

/* Honeypot field on the public contact form. Truly hidden from humans
   (no focus, no screen-reader announcement) but still in the DOM so
   bots that blindly fill every input get caught server-side. Don't use
   `display:none` — some bots skip those; the off-screen technique
   keeps it parsed and submittable. */
.pmf-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   Public header nav link (e.g. "Contact"). Visible to both
   authenticated and guest users. Pill button that visually pairs
   with the profile button on the right.
   ============================================================ */
.pmf-header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.pmf-header-nav-link > i {
    font-size: 16px;
    line-height: 1;
}
.pmf-header-nav-link:hover,
.pmf-header-nav-link:focus-visible {
    background: linear-gradient(180deg, #f7f6ff 0%, #efeaff 100%);
    border-color: color-mix(in srgb, var(--color-primary) 28%, white);
    color: var(--color-primary-dark);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}
.pmf-header-nav-link.is-active {
    background: var(--gradient-primary);
    color: #ffffff;
    border-color: var(--color-primary-dark);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.pmf-header-nav-link.is-active:hover {
    color: #ffffff;
    background: var(--gradient-primary);
    filter: brightness(0.95);
}

/* Login button (guest visitors only) — outline / border-only variant.
   Transparent background + primary-coloured border so the Contact link
   stays the "active" state when the user is on the contact page, while
   Login reads as a secondary action. Matches the auth-page nav-button
   aesthetic. */
.pmf-header-login-link {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}
.pmf-header-login-link:hover,
.pmf-header-login-link:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
/* When the visitor IS on /passenger-login, the base .is-active rule
   already promotes the pill to the filled style — no extra override
   needed. */

/* Tiny phones — drop to icon-only to save horizontal space alongside the
   profile pill + hamburger. */
@media (max-width: 480px) {
    .pmf-header-nav-link {
        padding: 9px 11px;
        gap: 0;
    }
    .pmf-header-nav-link > span {
        display: none;
    }
    .pmf-header-nav-link > i {
        font-size: 17px;
    }
}

/* Modern profile pill button — wraps avatar, name and chevron into one
   cohesive surface (instead of three loose pieces sitting next to each
   other). Background lifts on hover and when the dropdown is open. */
.dashboard-profile-btn {
    padding: 4px 14px 4px 4px;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
    line-height: 1;
}
.dashboard-profile-btn:hover,
.dashboard-profile-btn:focus-visible {
    background: linear-gradient(180deg, #f7f6ff 0%, #efeaff 100%);
    border-color: #d9d3ff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: translateY(-1px);
}
.dashboard-profile-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    outline-offset: 2px;
}
.dashboard-profile-btn[aria-expanded="true"] {
    background: linear-gradient(180deg, #efeaff 0%, #e3dcff 100%);
    border-color: #c8beff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: translateY(0);
}

/* Slightly smaller avatar so it sits inside the pill with breathing room. */
.dashboard-profile-btn img,
.dashboard-profile-btn .pmf-avatar-letter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Letter avatar fallback — used when the user has no avatar image from
   API data. Centered initial on a brand gradient. */
.dashboard-profile-btn .pmf-avatar-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-primary) 30%, transparent), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Compact name + chevron treatment. */
.dashboard-profile-btn > span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #2a304a;
}
.dashboard-profile-btn i {
    transition: transform 0.25s ease, color 0.25s ease;
    color: #6c7890;
    font-size: 12px;
}
.dashboard-profile-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: var(--color-primary);
}

@media (max-width: 575px) {
    .dashboard-profile-btn { padding: 3px 12px 3px 3px; gap: 8px; }
    .dashboard-profile-btn img,
    .dashboard-profile-btn .pmf-avatar-letter { width: 32px; height: 32px; font-size: 13px; }
    .dashboard-profile-btn > span { max-width: 90px; font-size: 13px; }
    main.pmf-main{
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

/* /my-flights — booking-status palette extensions. The theme ships
   status-request / status-upcoming / status-completed, but our backend
   booking_status uses Confirmed / On Hold / Processing / Cancelled, so
   we add explicit tones to keep colors meaningful. */
.trip-status-badge.status-confirmed  { color: #047857; background-color: #d1fae5; }
.trip-status-badge.status-onhold     { color: #b45309; background-color: #fef3c7; }
.trip-status-badge.status-processing { color: #1d4ed8; background-color: #dbeafe; }
.trip-status-badge.status-cancelled  { color: #b91c1c; background-color: #fee2e2; }

main.pmf-main{
    max-width: 100%!important;
}

/* Keep the theme background gradient handled by .pmf-body, but restore the
   vertical breathing room the theme expected (the `padding: 0` override
   removed it). Scaled down at each breakpoint. */
.trips-page-section{
    background: transparent!important;
    padding: 10px 0 44px !important;   /* bottom gap before the footer */
    min-height: 0 !important;
}
@media (max-width: 1024px) {
    .trips-page-section { padding: 24px 0 40px !important; }
}
@media (max-width: 767px) {
    .trips-page-section {padding: 18px 0 32px !important;}
}
@media (max-width: 480px) {
    .trips-page-section {padding: 12px 0 28px !important;}
}

/* ============================================================
   /my-flights — responsive polish
   ------------------------------------------------------------
   Targets edge cases not covered by the theme's responsive.css:
   long PNRs / route text, narrow phones, header crowding, alert
   layout, sticky empty-state, and dropdown alignment.
   ============================================================ */

/* Long PNRs, city names, and labels can be very long. Break them inside
   the cells instead of pushing the grid wider than the viewport. */
.trip-info-item span,
.trip-info-item strong { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.trip-info-item { min-width: 0; }
.trip-info-block { min-width: 0; }

/* Modern route headline — flight-path layout. Each leg renders as:
       [city]  ──✈──  [city]  ──✈──  [city]
   No chip backgrounds — names are the heroes; the airplane glyph rides a
   dashed connector line so the whole row reads as a continuous flight
   itinerary. Blade-side indentation whitespace between segments is fully
   absorbed by the flex layout. */
.trip-route-block h2.trip-route-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 12px;
    line-height: 1.2;
    color: var(--color-heading, #111936);
}

/* Cities — bold airline-style typography, no chip / background. */
.trip-route-block h2.trip-route-headline .trip-route-city {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    font-weight: 800;
    font-size: 19px;
    color: #0f172a;
    letter-spacing: -0.015em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    transition: color 0.18s ease;
}
.trip-card:hover .trip-route-block h2.trip-route-headline .trip-route-city {
    color: #1f1a4b;
}

/* Airplane connector — fixed-width slot threaded with a dashed flight-path
   line. The icon glyph (Bootstrap-icons ::before) sits over the line with
   a small white pad so the line appears to disappear under the plane. */
.trip-route-block h2.trip-route-headline i {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 18px;
    color: var(--color-primary, var(--color-primary));
    transform: rotate(45deg);   /* angled like a plane in flight */
    transform-origin: center;
    transition: color 0.18s ease;
}
.trip-route-block h2.trip-route-headline i::after {
    /* Dashed flight-path line that visually connects the two cities.
       The parent <i> is rotated 45°, so this counter-rotates -45° to
       stay horizontal across the row. */
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    border-top: 1.5px dashed color-mix(in srgb, var(--color-primary) 28%, transparent);
    transform: rotate(-45deg);
    z-index: 0;
    transition: border-color 0.2s ease;
}
.trip-route-block h2.trip-route-headline i::before {
    /* Bootstrap-icons glyph — z-indexed above the dashed line with a
       small white inset so the line tucks behind the plane cleanly. */
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 0 5px;
    font-size: 13px;
    line-height: 1;
}
.trip-card:hover .trip-route-block h2.trip-route-headline i { color: var(--color-primary); }
.trip-card:hover .trip-route-block h2.trip-route-headline i::after {
    border-top-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

@media (max-width: 575px) {
    .trip-route-block h2.trip-route-headline { gap: 3px 4px; }
    .trip-route-block h2.trip-route-headline .trip-route-city { font-size: 16px; }
    .trip-route-block h2.trip-route-headline i { width: 38px; }
    .trip-route-block h2.trip-route-headline i::before { font-size: 12px; padding: 0 4px; }
}

/* On <=575px the trip-info-block becomes a single column in the theme; if
   there's only one item (e.g., no destination_city), avoid a stray bottom
   border line that looks broken. */
@media (max-width: 767px) {
    .trip-info-block:last-of-type {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .trip-segment-marker{
        margin-top: 0;
    }
}

/* Header right side: profile pill + hamburger can crowd at very small
   widths when the user's name is long. Tighten the gaps. */
@media (max-width: 575px) {
    .site-header-inner { gap: 10px; }
    .site-header-actions { gap: 8px; flex-shrink: 0; }
    .site-logo { width: 170px; }
}
@media (max-width: 380px) {
    .site-header-actions { gap: 6px; }
    .dashboard-profile-btn > span { display: none; } /* keep avatar + chevron only */
    .dashboard-profile-btn { padding: 3px 10px 3px 3px; }
}

/* trips-alert (theme) — slim down and let the icon column shrink on phones. */
@media (max-width: 480px) {
    .trips-alert { padding: 10px 12px; gap: 10px; }
    .trips-alert-content { font-size: 13px; }
    .trips-alert-close { flex-shrink: 0; }
}

/* The "Showing N of N trips" caption reads better centered on mobile. */
.trips-count-text { margin-top: 14px; }
@media (max-width: 767px) {
    .trips-count-text { text-align: center; margin-top: 18px; }
}

/* Empty-state card uses display:block to override the grid; make sure it
   doesn't stretch full-bleed and gets some breathing room on small screens. */
.trip-card[style*="display:block"] {
    margin: 0 auto;
    max-width: 100%;
}
@media (max-width: 575px) {
    .trip-card[style*="display:block"] { padding: 28px 18px !important; }
}

/* Stats card on phones: keep the icon from dominating and let the labels
   wrap cleanly. */
@media (max-width: 480px) {
    .trips-stat-card { padding: 18px; gap: 14px; }
    .trips-stat-icon { width: 44px; height: 44px; flex-shrink: 0; }
    .trips-stat-icon i { font-size: 20px; }
    .trips-stat-card h3 { font-size: 22px; }
    .trips-stat-card p { font-size: 12px; }
}

/* trip-type-badge can wrap onto its own line when route text is long;
   give it a clear top margin so it doesn't kiss the h2. */
.trip-route-block .trip-type-badge { margin-bottom: 6px; }

/* ============================================================
   trip-card — drop the action-block to a full-width bottom row at
   ≤1400px (theme triggers this at ≤1199px; we want it earlier).
   The 4-col [route | info | info | actions] template collapses to a
   2-col stack: [route across top] / [info | info] / [actions across
   bottom]. >1400px keeps the theme's 4-column desktop layout, and
   ≤767px keeps the theme's full single-column stack (floor of 768).
   ============================================================ */
@media (min-width: 768px) and (max-width: 1400px) {
    .trip-card {
        grid-template-columns: 1fr 1fr;
    }
    .trip-route-block {
        grid-column: 1 / -1;
        padding-right: 0;
        padding-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid var(--color-border, #eef0f6);
    }
    .trip-action-block {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
    .trip-status-badge {
        margin-left: 0;
    }

    /* The 2nd info-block sits on the right edge of the row — drop its
       border-right (which would otherwise float as a stray vertical line
       against the card's inner padding). Adjacent-sibling selector works
       here; :last-child / :last-of-type don't because the card's actual
       last child is .trip-action-block (also a <div>). */
    .trip-info-block + .trip-info-block {
        padding-right: 0;
        border-right: 0;
    }
}

/* ============================================================
   trip-card grid hardening — the theme template breaks down in two
   specific zones:
     • 1025–1199px: still has sidebar (280px), trip-card uses 2×2
       grid with action-block on a single row of [status | btn | btn].
       At narrow widths the buttons get squeezed by min-content.
     • 481–767px:  trip-info-block switches to grid-auto-flow: column
       with no explicit columns — content-width sizing causes a long
       PNR to starve the booking date next to it.
   ============================================================ */

/* Zone 1 — desktop two-column grid (1025–1199, also covers the tablet
   drawer phase 768–1024 since both share .trip-card { 1fr 1fr }). */
@media (min-width: 768px) and (max-width: 1199px) {
    .trip-action-block {
        gap: 12px;
        /* minmax(0,1fr) prevents grid columns from inflating to min-content */
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    }
    .trip-action-btn {
        min-height: 40px;
        min-width: 0;
        padding: 0 12px;
        font-size: 12.5px;
    }
    .trip-info-block { gap: 14px; }
    .trip-info-item { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
    .trip-info-item i { font-size: 14px; }
}

/* Zone 2 — phones with 2-up info-items.
   Theme uses `grid-auto-flow: column` here; force a balanced 1fr/1fr split
   so a long PNR can't starve the booking date next to it. */
@media (max-width: 767px) {
    .trip-info-block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .trip-info-block > .trip-info-item:only-child {
        grid-column: 1 / -1;
    }
    .trip-info-item { grid-template-columns: 18px minmax(0, 1fr); }
}

/* Tiny phones — drop the side-by-side info pairs into a single column for
   real readability; also tighten the trip-card padding. */
@media (max-width: 480px) {
    .trip-info-block {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        gap: 14px;
    }
    .trip-card { padding: 16px !important; gap: 14px !important; }
    .trip-action-block { gap: 10px; }
    .trip-status-badge { align-self: flex-start; }
    .trip-action-btn { min-height: 42px; }
    .trip-route-block h2 { font-size: 18px; }
    .trip-route-block h2 i { font-size: 14px; }
}

/* Passengers line — sits below the trip-date-row inside the route block,
   listing every passenger ("N passengers: NAME, NAME, ..."), same as the admin
   flight list. Wraps freely so long name lists / large groups never overflow. */
.trip-pax-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: var(--color-muted, #6c7890);
    font-size: 13px;
    line-height: 1.5;
    min-width: 0;
}
.trip-pax-row > i {
    color: var(--color-primary, #8f5abe);
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}
.trip-pax-row-text {
    min-width: 0;
    overflow-wrap: anywhere;   /* long names / large groups never overflow */
}
.trip-pax-row-text strong {
    color: var(--color-heading, #111936);
    font-weight: 700;
}

/* Make sure the .trip-card grid itself can never be wider than its column —
   prevents horizontal scroll if a city name doesn't break (e.g., hyphenated). */
.trip-card { min-width: 0; max-width: 100%; }
.trips-list { min-width: 0; }
.trips-main { min-width: 0; }

/* Page heading on phones */
@media (max-width: 480px) {
    .trips-page-heading { margin-bottom: 16px; }
    .trips-page-heading h1 { font-size: 22px; }
    .trips-page-heading p { font-size: 13px; }
}

/* Sidebar — when it slides in as a drawer (<=1024px), pad the bottom so
   the last card isn't flush against the safe area. */
@media (max-width: 1024px) {
    .trips-sidebar {
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
}

/* Sidebar dropdown account menu — phone-friendly tap targets (theme bumps
   to 44px on <=480px; keep that here too for consistency). */
@media (max-width: 575px) {
    .trips-account-menu a { min-height: 44px; }
}

/* ============================================================
   /my-flight/{ticket_uid} — trip-details overrides
   ============================================================ */

/* Status-pill palette extensions. Theme ships only status-upcoming-pill
   and status-completed-pill; our backend booking_status also produces
   On Hold / Processing / Cancelled. */
.trip-status-pill.status-onhold-pill     { color: #b45309; background-color: #fef3c7; }
.trip-status-pill.status-processing-pill { color: #1d4ed8; background-color: #dbeafe; }
.trip-status-pill.status-cancelled-pill  { color: #b91c1c; background-color: #fee2e2; }

/* Support tickets row inside the Support tab — styled to match the rest
   of the trip-details card surface. */
.trip-support-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-left: 4px solid var(--color-primary, var(--color-primary));
    border-radius: 12px;
    background: linear-gradient(135deg, #f7f6ff 0%, #ffffff 60%);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s ease, transform 0.15s ease;
}
.trip-support-row:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.trip-support-row-main { flex: 1 1 220px; min-width: 0; }
.trip-support-row-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trip-support-row-meta { font-size: 0.8rem; color: #6c7890; margin-top: 4px; }
.trip-support-row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.trip-support-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.trip-support-row-actions .trip-help-support-btn{
    margin-top: 0;
}
@media (max-width: 480px) {
    .trip-support-row-title { white-space: normal; }
    .trip-support-row-actions { width: 100%; justify-content: space-between; }
}

/* Force-hide the trip-tab-panel by default so the panels not yet given
   `.is-active` by theme JS don't briefly flash on first paint. */
.trip-tab-panel:not(.is-active) { display: none; }

/* When the trip-details header's actions row wraps under the heading on
   narrow widths, give it a clear top gap.

   IMPORTANT: theme's responsive.css at <=767px sets the actions row to
   `display: none` (hiding Download Ticket + Download Invoice on
   mobile). Override that here so passengers on phones can still
   download their tickets / invoices. custom.css loads AFTER
   responsive.css so the override wins on cascade order alone, but we
   set display + width explicitly to be tamper-proof against future
   theme edits. */
@media (max-width: 767px) {
    .trip-details-actions {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-top: 16px;
    }
    .trip-details-actions .trip-download-dropdown { flex: 1 1 0; min-width: 0; }
    .trip-details-actions .trip-download-btn { width: 100%; }
}
@media (max-width: 430px) {
    /* On tight phones stack each dropdown full-width on its own line
       so labels don't truncate ugly. */
    .trip-details-actions .trip-download-dropdown { flex: 1 1 100%; }
}

/* ============================================================
   /my-flight/{ticket_uid} layout — reuses the .trips-page-section +
   .trips-layout + .trips-sidebar wrappers from /my-flights so both
   pages share the same gradient, section padding, desktop grid, and
   mobile drawer (driven by the existing header hamburger).
   ============================================================ */
.trips-main > .trip-breadcrumb { margin-bottom: 14px; }
.trips-main > .trip-details-header { margin-bottom: 18px; }
@media (max-width: 1024px) {
    .trips-sidebar .trip-side-card:last-of-type,
    .trips-sidebar .trip-side-actions { margin-bottom: 0; }
}

/* ============================================================
   Invoice Summary tab — modern, flat receipt layout. Pure
   typography + dividers, no heavy table chrome; matches the
   .trip-side-card aesthetic used elsewhere on the page.
   ============================================================ */
.trip-invoice {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    padding: 28px;
    color: #1f2937;
}

/* ---- Header (agency brand + meta block) ---- */
.trip-invoice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 12%, white);
    flex-wrap: wrap;
}
.trip-invoice-brand .trip-invoice-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.trip-invoice-brand h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.trip-invoice-brand p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}
.trip-invoice-meta {
    display: grid;
    grid-auto-flow: column;
    gap: 28px;
    align-items: start;
}
.trip-invoice-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}
.trip-invoice-meta-item > span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.trip-invoice-meta-item > strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.trip-invoice-meta-item .trip-invoice-status {
    color: var(--color-primary);
}

/* ---- Bill-to / Booking parties ---- */
.trip-invoice-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 12%, white);
}
.trip-invoice-party { min-width: 0; }
.trip-invoice-party-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.trip-invoice-party strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}
.trip-invoice-party p {
    margin: 0 0 3px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---- Currency badge in the header brand block ---- */
.trip-invoice-currency {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 12px;
    padding: 5px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, color-mix(in srgb, var(--color-primary) 4%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
}
.trip-invoice-currency-symbol { font-size: 14px; line-height: 1; }
.trip-invoice-currency-code { letter-spacing: 0.04em; }
.trip-invoice-currency-name {
    font-weight: 500;
    color: #6b5cff;
    font-size: 11px;
}

/* ---- Line items table ---- */
.trip-invoice-table { padding: 22px 0 6px; }
.trip-invoice-table-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.trip-invoice-table-head .trip-invoice-amount-col { text-align: right; }

.trip-invoice-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.trip-invoice-row:last-of-type { border-bottom: 0; }

/* Description column — icon + label/sub-line */
.trip-invoice-row-desc {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.trip-invoice-pax-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, color-mix(in srgb, var(--color-primary) 4%, transparent) 100%);
    color: var(--color-primary);
    font-size: 16px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.trip-invoice-row-desc-text { min-width: 0; }
.trip-invoice-row-desc-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.trip-invoice-row-desc-text p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.trip-invoice-row-amount {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Discount row — green tint to communicate "money off" */
.trip-invoice-discount-row { color: #0f8a4a; }
.trip-invoice-discount-row > strong { color: #0f8a4a; }

/* ---- Totals block ---- */
.trip-invoice-totals {
    margin-top: 18px;
    padding: 18px 0 0;
    border-top: 1px dashed color-mix(in srgb, var(--color-primary) 12%, white);
    display: grid;
    gap: 10px;
}
.trip-invoice-total-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    font-size: 14px;
    color: #475569;
}
.trip-invoice-total-row > strong {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.trip-invoice-total-grand {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    font-size: 16px;
}
.trip-invoice-total-grand > span {
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
}
.trip-invoice-total-grand > strong {
    font-size: 22px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
}

/* ---- Footer note ---- */
.trip-invoice-note {
    margin-top: 22px;
    padding: 14px 18px;
    background: #f7f6ff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #475569;
}
.trip-invoice-note > i {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 18px;
    margin-top: 2px;
}
.trip-invoice-note strong {
    display: block;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 14px;
}
.trip-invoice-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ---- Empty state ---- */
.trip-invoice-empty {
    text-align: center;
    padding: 48px 28px;
}
.trip-invoice-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, color-mix(in srgb, var(--color-primary) 4%, transparent) 100%);
    color: var(--color-primary);
    font-size: 28px;
}
.trip-invoice-empty h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.trip-invoice-empty p {
    max-width: 460px;
    margin: 0 auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .trip-invoice { padding: 22px 18px; }
    .trip-invoice-head { gap: 16px; }
    .trip-invoice-meta {
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
    }
    .trip-invoice-meta-item { text-align: left; }
    .trip-invoice-parties { grid-template-columns: 1fr; }
    .trip-invoice-total-grand > strong { font-size: 20px; }
}
@media (max-width: 480px) {
    .trip-invoice { padding: 18px 16px; }
    .trip-invoice-brand h3 { font-size: 18px; }
    .trip-invoice-meta { grid-template-columns: 1fr; }
    .trip-invoice-row { padding: 12px 0; }
    .trip-invoice-row-amount { font-size: 14px; }
}

/* ============================================================
   Itinerary section labels — airport-signage style. The airplane
   glyph sits inside a yellow rounded-square with a runway/ground
   line beneath, matching the universal Departures/Arrivals signs.
     • Departures (Outbound / Multi-City Flight-N) → plane angled
       up-right (45°), "taking off".
     • Arrivals (Return)                            → plane angled
       down-right (135°), "landing".
   The icon class on the markup is `bi-airplane-engines-fill`; the
   rotation, framing and runway line are all driven by the parent
   `.trip-section-label-{outbound|return|flight}` so a single source
   of truth keeps both states in sync.
   ============================================================ */
.trip-section-label .bi-airplane-engines-fill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    /* margin-right: 10px; */
    /* background: #fbcb20; */          /* airport-sign yellow */
    /* border-radius: 7px; */
    color: #0f172a;                /* solid black plane silhouette */
    overflow: hidden;
    /* box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10); */
    flex-shrink: 0;
    vertical-align: middle;
}

/* Plane glyph (Bootstrap-icons ::before). Lift it slightly so it
   visually sits above the runway line drawn at the bottom of the box. */
.trip-section-label .bi-airplane-engines-fill::before {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    transform-origin: center;
    margin-bottom: 6px;
    transition: transform 0.18s ease;
}

/* Departures — taking off (up-right diagonal). */
.trip-section-label-outbound .bi-airplane-engines-fill::before,
.trip-section-label-flight   .bi-airplane-engines-fill::before {
    transform: rotate(45deg);
}

/* Arrivals — landing (down-right diagonal). */
.trip-section-label-return .bi-airplane-engines-fill::before {
    transform: rotate(135deg);
}

/* Runway / ground line — kept on the parent's ::after so it stays
   horizontal regardless of the plane's rotation. */
.trip-section-label .bi-airplane-engines-fill::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    height: 2px;
    background: #0f172a;
    border-radius: 1px;
}


/* ============================================================
   Sidebar toggle — adopt the dashboard-profile-btn pill aesthetic
   ------------------------------------------------------------
   Theme defaults this button to a primary-blue 42×42 square. Next
   to our lavender profile pill it feels visually mismatched, so
   we apply the same gradient/border/shadow/hover/active treatment.
   Dimensions are intentionally left at the theme's 42×42 so the
   three hamburger bars (positioned/rotated by theme CSS) stay
   correctly placed; only the visual chrome and bar color change.
   ============================================================ */
.sidebar-toggle-btn {
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.sidebar-toggle-btn:hover {
    background: linear-gradient(180deg, #f7f6ff 0%, #efeaff 100%);
    border-color: #d9d3ff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: translateY(-1px);
}
.sidebar-toggle-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    outline-offset: 2px;
}
.sidebar-toggle-btn.is-active {
    background: linear-gradient(180deg, #efeaff 0%, #e3dcff 100%);
    border-color: #c8beff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: translateY(0);
}

/* Keep the three hamburger bars brand-purple in all states (theme flips
   them to white on hover/active — wrong contrast against our lavender).
   We only override background-color so theme's transform/top rules that
   morph the bars into an X stay intact. */
.sidebar-toggle-btn span,
.sidebar-toggle-btn:hover span,
.sidebar-toggle-btn.is-active span {
    background-color: var(--color-primary);
}

.support-chat-section,
.trip-details-page-section{
    /* Bottom gap before the footer — matches the .trips-page-section scale so
       the change / cancel request forms don't butt against the footer. */
    padding: 10px 0 44px !important;
    background: transparent!important;
}
@media (max-width: 1024px) {
    .trip-details-page-section { padding: 24px 0 40px !important; }
}
@media (max-width: 767px) {
    .trip-details-page-section { padding: 18px 0 32px !important; }
}
@media (max-width: 480px) {
    .trip-details-page-section { padding: 12px 0 28px !important; }
}

/* ============================================================
   Live Chat — system event rows, closed banner, disabled notice,
   header status-dot color states.
   ============================================================ */
.support-chat-event {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}
.support-chat-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 92%;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f1f3f7;
    color: #5e6278;
    border: 1px solid #e4e6ef;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.support-chat-event-badge .support-chat-event-time {
    color: #94a3b8;
    font-weight: 500;
}
.support-chat-event.event-staff_joined .support-chat-event-badge {
    background: #e8fff3;
    color: #047857;
    border-color: #b8e9c8;
}
.support-chat-event.event-chat_closed .support-chat-event-badge {
    background: #fff1f3;
    color: #b91c1c;
    border-color: #f6c6cb;
}

/* Closed-chat banner replaces the composer */
.support-chat-closed-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #fff1f3 0%, #ffe2e6 100%);
    color: #b91c1c;
    border-top: 1px solid #f6c6cb;
    font-size: 14px;
    font-weight: 600;
}
.support-chat-closed-banner > i { font-size: 16px; }
.support-chat-start-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.support-chat-start-new:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 36%, transparent);
}
.support-chat-start-new > i { font-size: 14px; }

/* Empty/disabled notice in the chat body */
.support-chat-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: #475569;
}
.support-chat-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, color-mix(in srgb, var(--color-primary) 3%, transparent) 100%);
    color: var(--color-primary);
    font-size: 28px;
}
.support-chat-notice h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}
.support-chat-notice p {
    margin: 0;
    max-width: 420px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
}

/* Header status dot: dynamic color states driven by JS */
.support-chat-dot.is-pending  { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); }
.support-chat-dot.is-active   { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }
.support-chat-dot.is-closed   { background: #94a3b8; box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18); }
.support-chat-dot.is-disabled { background: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.18); }

/* Disabled composer styling */
.support-chat-input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}
.support-chat-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .support-chat-closed-banner { padding: 12px 14px; }
    .support-chat-start-new { width: 100%; justify-content: center; }
    .support-chat-notice { padding: 36px 16px; }
}

/* Sidebar notice shown in the "Need help?" card when live chat is disabled
   by the admin. Subtle lavender info card with an icon + short copy. */
.trip-help-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, color-mix(in srgb, var(--color-primary) 3%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 12px;
    color: #475569;
}
.trip-help-notice > i {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 18px;
    margin-top: 2px;
}
.trip-help-notice strong {
    display: block;
    margin-bottom: 3px;
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}
.trip-help-notice p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}
.trip-help-notice a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.trip-help-notice a:hover {
    color: #3a26d9;
    text-decoration-thickness: 2px;
}

/* ============================================================
   Leave-chat button (chat header) — overrides .support-chat-ctrl's
   fixed 32×32 icon-only geometry so an icon + "Leave chat" label
   fit cleanly as a destructive pill button. Red-tinted to read as
   the close/leave action.
   ============================================================ */
.support-chat-controls .support-chat-leave-btn {
    width: auto;
    height: 34px;
    padding: 0 14px;
    gap: 7px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff5f7;
    color: #dc3545;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.support-chat-controls .support-chat-leave-btn > i {
    font-size: 14px;
    line-height: 1;
}
.support-chat-controls .support-chat-leave-btn .support-chat-leave-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}
.support-chat-controls .support-chat-leave-btn:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.18);
}
.support-chat-controls .support-chat-leave-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.15);
}
.support-chat-controls .support-chat-leave-btn:focus-visible {
    outline: 2px solid rgba(220, 53, 69, 0.45);
    outline-offset: 2px;
}
.support-chat-controls .support-chat-leave-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
.support-chat-controls .support-chat-leave-btn[hidden] {
    display: none !important;
}

/* Tiny phones — collapse to icon-only circle so the header doesn't crowd. */
@media (max-width: 480px) {
    .support-chat-controls .support-chat-leave-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        justify-content: center;
    }
    .support-chat-controls .support-chat-leave-btn .support-chat-leave-label {
        display: none;
    }
    .support-chat-controls .support-chat-leave-btn > i {
        font-size: 15px;
    }
}

/* ------------------------------------------------------------------ */
/* Live chat — "Load older messages" pill                             */
/* Rendered at the top of #supportChatBody, hidden by default ([hidden] */
/* attr handles the default). When the conversation reopens after a    */
/* page reload and the backend reports `has_more_messages`, the JS      */
/* engine reveals it; clicking prepends an older page without scroll    */
/* jump.                                                                */
/* ------------------------------------------------------------------ */
.support-chat-load-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px auto 12px;
    padding: 6px 14px;
    border: 1px solid #e3dcff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 7%, white);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
    align-self: center;
}
.support-chat-load-more > i {
    font-size: 14px;
    line-height: 1;
}
.support-chat-load-more:hover {
    background: #ece4ff;
    border-color: color-mix(in srgb, var(--color-primary) 28%, white);
    color: var(--color-primary-dark);
}
.support-chat-load-more:active {
    transform: translateY(1px);
}
.support-chat-load-more:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.support-chat-load-more:disabled {
    opacity: .6;
    cursor: progress;
}
.support-chat-load-more[hidden] {
    display: none !important;
}

/* The messages container sits inside the body next to the load-more  */
/* button. Keep it as a vertical flex with the same 14px gap the body   */
/* previously applied directly, so prepend/append operations keep the   */
/* original bubble rhythm.                                              */
.support-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* Match the chat window's max-width to the summary card above it so   */
/* both sit on the same vertical column. The theme defaults to 660px.  */
.support-chat-window {
    max-width: 720px;
    /* Breathing room before the footer (the section has 0 bottom padding). */
    margin-bottom: 32px;
}

@media (max-width: 575.98px) {
    .support-chat-window {
        margin-bottom: 20px;
    }
}

/* Align the breadcrumb to the same 720px column as the flight summary  */
/* and the chat window underneath it.                                   */
.trip-breadcrumb.support-chat-breadcrumb {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Cancel-booking page: reuse the /my-flights .trip-route-headline       */
/* exactly so the booked route renders identically. The .manage-card     */
/* parent has its own padding, so the route block only needs a small     */
/* breathing room below the card head before the manage-summary-grid.    */
.pmf-cancel-route-block {
    margin-top: 6px;
    margin-bottom: 18px;
}
.pmf-cancel-route-block h2.trip-route-headline {
    margin-bottom: 0;
}

/* Unique airline badges (logo + name) for this booking. Just a quick    */
/* visual of "which carriers am I cancelling" — no flight numbers /       */
/* routes / dates. The .trip-airline-badge / .trip-airline-logo styles    */
/* come from the theme.                                                   */
.pmf-cancel-airlines {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

/* Airline logo strip under the booking number (change-booking page).     */
/* Quick "which carriers" glance below the Booking No. pill. Each carrier  */
/* is rendered as a separated chip so multiple airlines read distinctly    */
/* rather than blurring into one run. Scoped to .pmf-route-airlines so the */
/* per-segment / cancel-page badges keep their flush styling.              */
.pmf-route-airlines {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
/* Each carrier becomes a bordered pill — clear visual separation. */
.pmf-route-airlines .trip-airline-badge {
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #8f5abe) 16%, #ffffff);
    border-radius: 15px;
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 5%, #ffffff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--color-heading, #071431);
    font-size: 12px;
    line-height: 1.2;
}
.pmf-route-airlines .trip-airline-logo {
    width: auto;
    height: 60px;
    border-radius: 15px;
    background: #ffffff;
}
@media (max-width: 575px) {
    .pmf-route-airlines {
        margin-top: 10px;
        gap: 8px;
    }
    .pmf-route-airlines .trip-airline-badge {
        padding: 4px 10px 4px 5px;
        font-size: 11.5px;
    }
    .pmf-route-airlines .trip-airline-logo {
        width: 26px;
        height: 22px;
    }
}

/* ------------------------------------------------------------------ */
/* Sidebar weather card (cancel-booking page).                         */
/* Hydrates asynchronously from /flight-weather — server-proxied to a   */
/* third-party API, token never reaches browser. Renders the upcoming   */
/* first flight only. Glassy gradient look, slots stack vertically in   */
/* the sidebar width.                                                   */
/* ------------------------------------------------------------------ */
.pmf-weather-card.trip-side-card,
.pmf-weather-card {
    position: relative;
    overflow: hidden;
    padding: 16px 16px 14px;
    border-radius: 16px;
    color: #f7f9ff;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #6ad7ff 130%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent);
    border: 0;
}
/* When the card is also a .trip-side-card, override the theme's default */
/* card heading colour so "Weather…" eyebrow + city names stay legible.  */
.pmf-weather-card.trip-side-card > h3 {
    display: none;
}
.pmf-weather-card::before {
    /* Soft top-right "sun" highlight */
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.pmf-weather-card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pmf-weather-flight-id {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.16);
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
.pmf-weather-airline-logo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.pmf-weather-airline-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.pmf-weather-flight-no {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #ffffff;
}
.pmf-weather-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.85);
}
.pmf-weather-meta > i {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}

.pmf-weather-route {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.005em;
}
.pmf-weather-route > i {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}
.pmf-weather-city {
    overflow-wrap: anywhere;
}

.pmf-weather-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
}
.pmf-weather-eyebrow > i {
    font-size: 13px;
}

.pmf-weather-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 12px;
}
.pmf-weather-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
}
.pmf-weather-slot + .pmf-weather-slot {
    border-top: 1px dashed rgba(255,255,255,0.18);
    padding-top: 10px;
}
.pmf-weather-emoji {
    font-size: 32px;
    line-height: 1;
    display: inline-block;
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ------------------------------------------------------------------ */
/* In-segment weather strip (flight details page).                     */
/* Light-theme variant of the same widget — appears below the segment  */
/* grid for every upcoming segment (main + transit).                   */
/* ------------------------------------------------------------------ */
.trip-segment-weather {
    margin-top: 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f5f6ff 0%, color-mix(in srgb, var(--color-primary) 3%, white) 100%);
    border: 1px solid #e6e8f5;
    border-radius: 12px;
}
.trip-segment-weather-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.trip-segment-weather-eyebrow > i {
    font-size: 13px;
}
.trip-segment-weather-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 600px) {
    .trip-segment-weather-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}
.trip-segment-weather-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 56px;
}
.trip-segment-weather-slot + .trip-segment-weather-slot {
    border-top: 1px dashed #e0e3f0;
    padding-top: 10px;
}
@media (min-width: 600px) {
    .trip-segment-weather-slot + .trip-segment-weather-slot {
        border-top: 0;
        border-left: 1px dashed #e0e3f0;
        padding-top: 0;
        padding-left: 16px;
    }
}
.trip-segment-weather-loc {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5e6278;
}

/* Light-theme overrides for the shared .pmf-weather-* render classes. */
.trip-segment-weather .pmf-weather-readout {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trip-segment-weather .pmf-weather-emoji {
    font-size: 30px;
    text-shadow: 0 1px 4px rgba(15, 23, 42, 0.10);
}
.trip-segment-weather .pmf-weather-icon {
    font-size: 28px;
    color: var(--color-primary);
    text-shadow: none;
}
.trip-segment-weather .pmf-weather-readout-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.trip-segment-weather .pmf-weather-temp {
    color: #0f172a;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
}
.trip-segment-weather .pmf-weather-cond {
    color: #1f2533;
    font-size: 13px;
    font-weight: 500;
}
.trip-segment-weather .pmf-weather-meta-row {
    color: #6c7890;
    font-size: 11.5px;
    line-height: 1.3;
}
.trip-segment-weather .pmf-weather-empty {
    color: #6c7890;
    font-size: 12.5px;
    font-style: italic;
}
.trip-segment-weather .pmf-weather-empty > i {
    color: #94a3b8;
}

/* Skeleton — dark-on-light shimmer for the light card. */
.trip-segment-weather .pmf-weather-icon-skeleton,
.trip-segment-weather .pmf-weather-text-skeleton {
    background: linear-gradient(90deg,
        rgba(15,23,42,0.05) 0%,
        rgba(15,23,42,0.12) 50%,
        rgba(15,23,42,0.05) 100%);
    background-size: 200% 100%;
}

/* ------------------------------------------------------------------ */
/* Ticket Policy tab — modern reschedule + cancellation policy cards.   */
/* Replaces the hardcoded 3-tier refund block. Each card has a tinted   */
/* circular icon, title + subtitle, and a body that renders the         */
/* backend-supplied free-text (or a soft "not specified" fallback).     */
/* ------------------------------------------------------------------ */
.trip-policy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 22px 0;
}

/* When policy cards are stacked sequentially with their own action row
   beneath each (not wrapped in .trip-policy-grid), give each card its
   own breathing room above the action button. */
.trip-policy-card + .trip-cancel-actions {
    margin-top: 14px;
    margin-bottom: 22px;
}
.trip-policy-card {
    margin-top: 0;
}
/* When the Change Booking action between two stacked policy cards is hidden
   (multi-airline booking), the cancellation card would otherwise butt right
   up against the reschedule card. Restore the same 22px gap the action gave. */
.trip-policy-card + .trip-policy-card {
    margin-top: 22px;
}
.trip-tab-panel > .trip-policy-card:first-of-type {
    margin-top: 22px;
}
.trip-policy-card {
    position: relative;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.trip-policy-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 20%, white);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 10%, transparent);
    transform: translateY(-2px);
}
.trip-policy-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 12%, white);
}
.trip-policy-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.trip-policy-card-reschedule .trip-policy-card-icon {
    background: linear-gradient(135deg, #e9f7ec 0%, #cdebd5 100%);
    color: #1f8b3c;
}
.trip-policy-card-cancellation .trip-policy-card-icon {
    background: linear-gradient(135deg, #fde9ec 0%, #f9c6cc 100%);
    color: #c83344;
}
.trip-policy-card-title h4 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.trip-policy-card-title p {
    margin: 0;
    font-size: 12.5px;
    color: #6c7890;
}
.trip-policy-card-body {
    color: #1f2533;
    font-size: 14px;
    line-height: 1.6;
}

/* CKEditor-authored HTML inside policy cards. Style the common output
   shapes (paragraphs, lists, headings, links, blockquotes, code, tables,
   inline images, hr) with consistent rhythm + the lavender brand accent. */
.trip-policy-html {
    color: #1f2533;
    font-size: 14px;
    line-height: 1.65;
}
.trip-policy-html > *:first-child { margin-top: 0; }
.trip-policy-html > *:last-child  { margin-bottom: 0; }

.trip-policy-html p {
    margin: 0 0 10px;
}
.trip-policy-html h1,
.trip-policy-html h2,
.trip-policy-html h3,
.trip-policy-html h4,
.trip-policy-html h5,
.trip-policy-html h6 {
    margin: 14px 0 6px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.trip-policy-html h1 { font-size: 18px; }
.trip-policy-html h2 { font-size: 16.5px; }
.trip-policy-html h3 { font-size: 15.5px; }
.trip-policy-html h4 { font-size: 14.5px; }
.trip-policy-html h5,
.trip-policy-html h6 {
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.trip-policy-html strong,
.trip-policy-html b { color: #0f172a; font-weight: 700; }
.trip-policy-html em,
.trip-policy-html i { font-style: italic; }
.trip-policy-html u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.trip-policy-html s,
.trip-policy-html del { color: #94a3b8; }

.trip-policy-html a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
    word-break: break-word;
}
.trip-policy-html a:hover {
    color: var(--color-primary-dark);
    text-decoration-thickness: 2px;
}

.trip-policy-html ul,
.trip-policy-html ol {
    margin: 0 0 12px;
    padding-left: 22px;
}
.trip-policy-html li { margin: 0 0 4px; }
.trip-policy-html li::marker { color: color-mix(in srgb, var(--color-primary) 55%, white); }
.trip-policy-html ul ul,
.trip-policy-html ul ol,
.trip-policy-html ol ul,
.trip-policy-html ol ol {
    margin: 4px 0 4px;
}

.trip-policy-html blockquote {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 55%, white);
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, color-mix(in srgb, var(--color-primary) 0%, transparent) 80%);
    color: #4a4a6a;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}
.trip-policy-html blockquote p:last-child { margin-bottom: 0; }

.trip-policy-html code {
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    background: #f1f3f8;
    color: #c83344;
    padding: 1px 6px;
    border-radius: 4px;
}
.trip-policy-html pre {
    margin: 12px 0;
    padding: 12px 14px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.5;
}
.trip-policy-html pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.trip-policy-html hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px dashed color-mix(in srgb, var(--color-primary) 20%, white);
}

.trip-policy-html table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 10px;
    overflow: hidden;
}
.trip-policy-html thead { background: color-mix(in srgb, var(--color-primary) 7%, white); }
.trip-policy-html th {
    text-align: left;
    padding: 9px 12px;
    color: #0f172a;
    font-weight: 700;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
}
.trip-policy-html td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1eefd;
    color: #1f2533;
}
.trip-policy-html tr:last-child td { border-bottom: 0; }

.trip-policy-html img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 8px 0;
}

.trip-policy-html figure {
    margin: 12px 0;
}
.trip-policy-html figure figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    color: #6c7890;
    font-style: italic;
}

.trip-policy-empty {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: #6c7890 !important;
    font-style: italic;
    font-size: 13.5px !important;
    background: #f8f9fc;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed #e0e3f0;
}
.trip-policy-empty > i {
    color: #94a3b8;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ------------------------------------------------------------------ */
/* Cancel-booking page — "What happens next" 3-step list.              */
/* Replaces the old Refund Details card.                               */
/* ------------------------------------------------------------------ */
.pmf-cancel-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pmf-cancel-steps > li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.pmf-cancel-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.pmf-cancel-steps > li > div strong {
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
    color: #0f172a;
    font-size: 14.5px;
}
.pmf-cancel-steps > li > div p {
    margin: 0;
    color: #5e6278;
    font-size: 13px;
    line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Change Booking page — REQUEST-only flow (no payment / no search /  */
/* no price). Sibling to cancel-booking; segment list + date pickers  */
/* + reason + acknowledgement.                                        */
/* ------------------------------------------------------------------ */

/* Ticket Policy tab — color swap:
   - Cancel Booking goes RED to signal a destructive action.
   - Change Booking inherits the brand's primary-dark (the look the
     Cancel button previously had).
   Both override the theme's .trip-cancel-btn-primary which is only used
   on the Cancel Booking link in show.blade.php's Ticket Policy tab. */
.trip-cancel-btn-primary {
    background: var(--color-danger, #ff3046);
    color: var(--color-white, #ffffff);
    border-color: var(--color-danger, #ff3046);
}
.trip-cancel-btn-primary:hover {
    background: color-mix(in srgb, var(--color-danger, #ff3046) 85%, black);
    color: var(--color-white, #ffffff);
    border-color: color-mix(in srgb, var(--color-danger, #ff3046) 85%, black);
}

.trip-cancel-btn-change {
    background: var(--color-primary-dark);
    color: var(--color-white, #ffffff);
    border-color: var(--color-primary-dark);
}
.trip-cancel-btn-change:hover {
    background: color-mix(in srgb, var(--color-primary-dark) 85%, black);
    color: var(--color-white, #ffffff);
    border-color: color-mix(in srgb, var(--color-primary-dark) 85%, black);
}

/* Segment routing on the manage-seg-list rows. The base .manage-seg-route
   stays as is; we just need consistent inline styling for the leg label
   vs transit chain so the line wraps cleanly on narrow widths. */
.pmf-change-seg-leg {
    font-weight: 600;
    color: #1f2533;
}
.pmf-change-seg-transit {
    margin-left: 6px;
    font-weight: 500;
    color: var(--color-muted, #6c7890);
    font-size: 12.5px;
}

/* Past-segment row: a flight that has already departed cannot be changed,
   so the checkbox is disabled and the row is visually muted. The badge
   makes the state explicit ("Already flown") with an amber clock icon. */
.manage-seg-item.is-past {
    opacity: 0.72;
    cursor: not-allowed;
    background: color-mix(in srgb, var(--color-muted, #6c7890) 5%, white);
    border-color: color-mix(in srgb, var(--color-muted, #6c7890) 20%, white) !important;
}
.manage-seg-item.is-past:hover {
    background: color-mix(in srgb, var(--color-muted, #6c7890) 5%, white);
}
.manage-seg-item.is-past input[type="checkbox"] {
    cursor: not-allowed;
}
.manage-seg-item.is-past .pmf-change-seg-leg,
.manage-seg-item.is-past .manage-seg-time {
    color: var(--color-muted, #6c7890);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.manage-seg-item.is-past .pmf-change-seg-transit {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.pmf-change-seg-past-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 3px 9px;
    background: #fff4d6;
    color: #8a5a00;
    border: 1px solid #ffd97a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;       /* never inherit the line-through */
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}
.pmf-change-seg-past-badge > i {
    font-size: 12px;
    line-height: 1;
}

/* Date picker grid: one cell per segment. Two columns on tablet+ so a
   typical Round Trip / Multi City fits side-by-side without crowding. */
.pmf-change-date-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 10px;
}
@media (min-width: 600px) {
    .pmf-change-date-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Manage-card head (Change Request / Cancellation Request pages): icon +
   title/subtitle + an optional "Change & Cancellation Policies" link. The link
   is margin-left:auto + nowrap, so on narrow screens it stole the row width and
   crushed the title into one word per line. Below 768px let the head wrap: the
   title block keeps the row beside the icon, and the link drops to its own
   full-width row with a subtle divider. Both the change-booking and
   cancel-booking pages use these same classes, so this covers both. */
@media (max-width: 767.98px) {
    .manage-card-head {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .manage-card-head > div {
        flex: 1 1 auto;
        min-width: 0;
    }
    .manage-card-head h3 {
        overflow-wrap: anywhere;
    }
    .manage-card-head .manage-card-link {
        flex: 1 0 100%;
        margin-left: 0;
        white-space: normal;
        padding-top: 12px;
        border-top: 1px dashed var(--color-border-light, #e8edf5);
    }
}

/* Keep each date cell from overflowing on small / 2-column-tablet widths.
   Grid items default to min-width:auto, so their contents (date input, the
   long "Outbound · City — City" label, the search button, and the selected-
   flight card) can't shrink below their intrinsic size and spill out. Force
   the cell + its flex children to be shrinkable and let text wrap. */
.manage-change-cell {
    min-width: 0;
}
.manage-change-cell > * {
    min-width: 0;
    max-width: 100%;
}
.manage-change-cell .manage-change-route {
    overflow-wrap: anywhere;   /* long airport / city names never overflow */
}
.manage-change-cell .pmf-segment-search-actions {
    min-width: 0;
}
.manage-change-cell .pmf-segment-search-btn {
    max-width: 100%;
    white-space: normal;       /* label wraps instead of forcing the cell wide */
    text-align: center;
}
.manage-change-cell .pmf-segment-selected-card {
    min-width: 0;
}

/* Flatpickr brand tint — match the calendar accent to --color-primary
   so every UI surface honors the global brand color. These overrides
   target Flatpickr's own classes (loaded via CDN). */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.flatpickr-day.today {
    border-color: var(--color-primary);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #0f172a;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-primary);
}

/* ------------------------------------------------------------------ */
/* Sticky right sidebar on large screens — but only when the sidebar   */
/* actually fits next to the main content. If the sidebar is taller    */
/* than the main column, JS adds .pmf-sidebar-no-sticky and the rule   */
/* below pulls it back into natural flow (no internal scrollbar, the   */
/* page scroll just carries the user past it).                         */
/*                                                                    */
/* At <=1024px both layouts collapse to a single column, so sticky     */
/* never activates there.                                              */
/*                                                                    */
/* Offset = header height + 15px so the top of the sidebar clears the */
/* fixed .site-header with a small breathing-room gap.                 */
/* ------------------------------------------------------------------ */
@media (min-width: 1025px) {
    .trips-sidebar,
    .trip-details-sidebar {
        position: sticky;
        top: calc(var(--header-height, 86px) + 15px);
        align-self: start;
    }
    .trips-sidebar.pmf-sidebar-no-sticky,
    .trip-details-sidebar.pmf-sidebar-no-sticky {
        position: static;
        top: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Itinerary segment times — horizontal flight-ticket layout on phones.*/
/*                                                                     */
/* Theme's mobile override (responsive.css:1186) stacks the three      */
/* time blocks vertically — depart, duration line, arrive — which      */
/* makes each segment feel taller than necessary and removes the       */
/* visual "left-to-right journey" cue that a real ticket has.          */
/*                                                                     */
/* On phones we put them back into 3 columns (depart | line | arrive)  */
/* with compact typography. The middle column has the airplane icon    */
/* threaded along a horizontal line + duration text below + Non-stop   */
/* label, exactly like an airline ticket. Arrival column right-aligns  */
/* so the route reads as a clean line across the row.                  */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .trip-segment-times {
        grid-template-columns: minmax(0, 1fr) minmax(70px, auto) minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
    }
    .trip-time-block {
        min-width: 0;
    }
    .trip-time-block:last-child {
        text-align: right;
    }
    .trip-time-label {
        font-size: 11px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-muted, #6c7890);
        font-weight: 600;
    }
    .trip-time-value {
        font-size: 22px;
        line-height: 1.1;
        font-weight: 800;
    }
    .trip-time-date {
        font-size: 11.5px;
    }
    .trip-time-airport {
        font-size: 11.5px;
        margin-top: 0;
        line-height: 1.4;
    }
    .trip-time-airport br{
        display: none!important;
    }
    .trip-time-airport strong {
        display: block;
        font-size: 13px;
    }
    .trip-time-duration {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding-top: 24px;
        min-width: 70px;
    }
    .trip-duration-text {
        font-size: 11px;
        white-space: nowrap;
        color: var(--color-muted, #6c7890);
        font-weight: 500;
    }
    .trip-duration-stop {
        font-size: 10px;
        white-space: nowrap;
        color: var(--color-muted, #6c7890);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .trip-duration-line {
        width: 100%;
        height: 18px;
        min-width: 50px;
    }
    .trip-duration-line i {
        font-size: 14px;
        padding: 0 4px;
    }
}

/* Tiny phones (≤380px): squeeze the middle column further so the     */
/* depart/arrive blocks keep readable widths.                          */
@media (max-width: 380px) {
    .trip-segment-times {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
        gap: 6px;
    }
    .trip-time-value {
        font-size: 20px;
    }
    .trip-time-duration {
        min-width: 56px;
        padding-top: 22px;
    }
}

/* ------------------------------------------------------------------ */
/* Itinerary segment marker — left-side spacing on phones.             */
/*                                                                     */
/* Theme defaults to grid-template-columns: 40px + 20px gap = ~60px    */
/* before segment content starts. On a 360–390px viewport the marker  */
/* column + gap eats roughly a sixth of the screen width while the    */
/* right side has only the card's natural padding — making the layout */
/* feel lopsided.                                                      */
/*                                                                     */
/* On phones we drop the marker column entirely and switch to a       */
/* single-column grid so content uses the full width. The numbered    */
/* "1 / 2 / 3" circle and its dashed connecting line are cosmetic;    */
/* the transit divider between segments already labels each leg, and  */
/* each accordion card visually separates one main flight from the    */
/* next. Reintroduced as a small inline number badge at the top-left  */
/* of the segment body so multi-segment flights still get a sequence  */
/* indicator.                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .trip-segment {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .trip-segment-marker {
        position: absolute;
        top: -2px;
        left: 0;
        margin: 0;
        z-index: 2;
    }
    /* Hide the dashed connector — it relied on the marker column
       having a fixed width to position itself. On mobile the
       transit divider does the same job visually. */
    .trip-segment .trip-segment-marker::before {
        display: none;
    }
    /* Shrink the number badge so it sits as a small inline tag rather
       than dominating the corner. */
    .trip-segment-number {
        width: 24px;
        height: 24px;
        font-size: 11px;
        font-weight: 700;
    }
    /* Give the body just enough top padding so the floating marker
       doesn't overlap the cities headline. */
    .trip-segment-body {
        padding-top: 4px;
    }
    /* Make the trip-segment itself a positioning context for the
       absolute marker. */
    .trip-segment {
        position: relative;
    }
    /* If a booking only has ONE segment per leg, the "1" badge adds
       no information — hide it on single-segment cards. */
    .trip-flight-card:not(:has(.trip-segment + .trip-segment)) .trip-segment-marker {
        display: none;
    }
    .trip-flight-card:not(:has(.trip-segment + .trip-segment)) .trip-segment-body {
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Flight-card accordion — slideUp / slideDown animation.              */
/* JS wraps each card's non-divider children in .trip-flight-card-body */
/* and animates max-height between 0 and the content's scrollHeight.   */
/* The transition is gated to the same <=767px breakpoint as the rest  */
/* of the accordion behaviour — desktop shows every card inline, so we */
/* don't apply any of these rules there.                                */
/*                                                                      */
/* We ALSO override the theme's `.is-collapsed > *:not(.trip-section-divider)*/
/* { display: none; }` rule (responsive.css ~line 1133) so the body     */
/* stays in the layer during animation and the JS-driven max-height    */
/* drives the visual collapse instead of an instant display switch.    */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .trip-flight-card > .trip-flight-card-body {
        overflow: hidden;
        transition: max-height 0.35s ease-in-out;
        will-change: max-height;
    }
    .trip-flight-card.is-collapsed > .trip-flight-card-body {
        /* Override the theme's display:none so the box can animate */
        display: block !important;
        max-height: 0;
    }
}

/* On desktop the wrapper is purely structural — no animation, no
   collapse. Removing display:none from the theme rule isn't needed
   there because that rule itself is media-gated to <=767px. */

/* ------------------------------------------------------------------ */
/* Flight-card accordion: "View Details" / "Hide Details" label next   */
/* to the existing caret. The caret already shows only at <=767px      */
/* (responsive.css), so the affordance follows the same rule.          */
/* ------------------------------------------------------------------ */
.trip-flight-toggle-affordance {
    display: none;
}
@media (max-width: 767px) {
    .trip-flight-toggle-affordance {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        color: var(--color-primary, #8f5abe);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }
    /* Caret is now inside the affordance — the wrapper owns the
       margin-left:auto, the caret itself sits flush to the label. */
    .trip-flight-toggle-affordance .trip-flight-caret {
        margin-left: 0;
    }
    .trip-flight-toggle-label {
        line-height: 1;
    }
}
.pmf-weather-slot-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
}

.pmf-weather-readout {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pmf-weather-icon {
    font-size: 32px;
    line-height: 1;
    color: #ffd97a;
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.pmf-weather-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.pmf-weather-readout-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pmf-weather-temp {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
}
.pmf-weather-cond {
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
}
.pmf-weather-meta-row {
    font-size: 11.5px;
    color: rgba(255,255,255,0.78);
    line-height: 1.3;
}

.pmf-weather-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.78);
    font-style: italic;
}
.pmf-weather-empty > i {
    font-size: 14px;
}

/* Skeleton loader (shown until /flight-weather AJAX resolves). */
.pmf-weather-slot-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}
.pmf-weather-icon-skeleton,
.pmf-weather-text-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.24) 50%,
        rgba(255,255,255,0.12) 100%);
    background-size: 200% 100%;
    animation: pmfWeatherShimmer 1.2s linear infinite;
    border-radius: 8px;
}
.pmf-weather-icon-skeleton {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.pmf-weather-text-skeleton {
    flex: 1;
    height: 32px;
}
@keyframes pmfWeatherShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------------ */
/* Flight summary strip — rendered ABOVE the chat window so the        */
/* passenger always sees which booking the conversation is about.      */
/* The inner route block reuses the /my-flights .trip-route-block /     */
/* .trip-route-headline / .trip-route-city / .trip-type-badge /         */
/* .trip-date-row styles so the visual language matches one-to-one.    */
/* ------------------------------------------------------------------ */
.support-chat-flight-summary {
    margin: 0 auto 16px;
    max-width: 720px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e6e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.support-chat-flight-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.support-chat-flight-summary-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c7890;
}
.support-chat-flight-summary-eyebrow > i {
    color: var(--color-primary);
    font-size: 14px;
}
.support-chat-flight-summary-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color .15s ease;
}
.support-chat-flight-summary-link:hover {
    color: var(--color-primary-dark);
}
.support-chat-flight-summary-link > i {
    font-size: 13px;
    transition: transform .15s ease;
}
.support-chat-flight-summary-link:hover > i {
    transform: translateX(2px);
}

/* Inner route block — keep the headline tight against the meta row    */
/* below (default .trip-route-headline margin-bottom is 12px which is   */
/* fine, but we don't want a heavy spacer on the date row).             */
.support-chat-flight-summary-route-block .trip-date-row {
    margin-top: 4px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.support-chat-flight-summary-route-block .trip-date-row > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.support-chat-flight-summary-route-block .trip-date-row strong {
    color: #1f2533;
    font-weight: 600;
}
.support-chat-flight-summary-route-block h3.trip-route-headline {
    /* The theme styles the route under h2.trip-route-headline — repeat the
       same rules on h3 so the chat-page heading hierarchy stays correct
       (Live Chat title is the page's h1/h2; the route is a subordinate h3). */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 8px;
    line-height: 1.2;
    color: var(--color-heading, #111936);
}
.support-chat-flight-summary-route-block h3.trip-route-headline .trip-route-city {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 19px;
    color: #0f172a;
    letter-spacing: -0.015em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.support-chat-flight-summary-route-block h3.trip-route-headline i {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 18px;
    color: var(--color-primary, var(--color-primary));
    transform: rotate(45deg);
    transform-origin: center;
}
.support-chat-flight-summary-route-block h3.trip-route-headline i::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    border-top: 1.5px dashed color-mix(in srgb, var(--color-primary) 28%, transparent);
    transform: rotate(-45deg);
    z-index: 0;
}
.support-chat-flight-summary-route-block h3.trip-route-headline i::before {
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 0 5px;
    font-size: 13px;
    line-height: 1;
}
.support-chat-flight-summary-status {
    margin-left: auto;
}

@media (max-width: 575px) {
    .support-chat-flight-summary {
        margin: 0 8px 14px;
        padding: 14px 14px;
        border-radius: 12px;
    }
    .support-chat-flight-summary-route-block h3.trip-route-headline {
        gap: 3px 4px;
    }
    .support-chat-flight-summary-route-block h3.trip-route-headline .trip-route-city {
        font-size: 16px;
    }
    .support-chat-flight-summary-route-block h3.trip-route-headline i { width: 38px; }
    .support-chat-flight-summary-route-block h3.trip-route-headline i::before {
        font-size: 12px;
        padding: 0 4px;
    }
    .support-chat-flight-summary-status {
        margin-left: 0;
    }
}
.support-chat-flight-summary-route-block {
    border: 0;
    padding: 0;
}
.status-badge.status-confirmed.support-chat-flight-summary-status {
    color: #047857;
    background-color: #d1fae5;
}

/* ============================================================
   Airline logos — globally enlarged across the customer panel.

   Theme defaults (style.css):
     .trip-airline-logo                       — 35 × 28
     .trip-segment-airline .trip-airline-logo — 36 × 32
     responsive ≤767px                        — 36 × 24

   Reasoning: at the theme's default sizing the logos read as
   small icons; bumping them to ~56–64px wide makes the carrier
   instantly recognisable in segment cards, the cancel-booking
   airlines strip, the chat flight-summary card, and the
   weather-card pill. Inline image (.trip-airline-logo img) keeps
   its `object-fit: contain` from the theme so logos scale up
   crisply without distortion.
   ============================================================ */
.trip-airline-logo {
    width: 56px;
    height: 44px;
    padding: 4px;
    border-radius: 6px;
}
.trip-segment-airline .trip-airline-badge {
    font-size: 15px;
    gap: 10px;
}
.trip-segment-airline .trip-airline-logo {
    width: 64px;
    height: 52px;
    padding: 5px;
    border-radius: 8px;
}

/* Mobile — theme drops to 36×24 on segment cards; bump back up
   so logos stay readable on phones too. */
@media (max-width: 767px) {
    .trip-airline-logo {
        width: 50px;
        height: 38px;
        padding: 3px;
    }
    .trip-segment-airline .trip-airline-logo {
        width: 56px;
        height: 44px;
        padding: 4px;
    }
}
@media (max-width: 480px) {
    .trip-airline-logo {
        width: 46px;
        height: 36px;
    }
    .trip-segment-airline .trip-airline-logo {
        width: 52px;
        height: 42px;
    }
}

/* Weather-card pill (cancel-booking sidebar): the airline logo
   sits inside a small round avatar — bump it up to match the
   larger-everywhere convention. */
.pmf-weather-airline-logo {
    width: 34px;
    height: 34px;
}

/* ============================================================
   Flight-info section — rendered by the shared weather-hydration
   partial below the weather slots. Each backend-supplied field
   (check-in counter, gate, meals, etc.) gets its own tile so the
   passenger can scan operational info at a glance. Values "--" /
   empty are filtered out backend-side; every tile rendered is real.

   Default styling = light-theme variant for the .trip-segment-weather
   container (flight details page). A dark-glass variant below
   handles the sidebar weather card on cancel-booking.
   ============================================================ */
.pmf-flight-info {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e0e3f0;
}
.pmf-flight-info[hidden] {
    display: none !important;
}

/* Section header — small uppercase eyebrow with brand-coloured icon */
.pmf-flight-info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.pmf-flight-info-eyebrow > i {
    font-size: 13px;
}

/* Grid: auto-fit tiles, two per row on tablet+, one per row on phones */
.pmf-flight-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
@media (max-width: 480px) {
    .pmf-flight-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual tile — icon tile + stacked label/value text. Subtle
   hover lift so it reads as scannable. */
.pmf-flight-info-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--color-primary) 4%, white) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, white);
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    min-width: 0;
}
.pmf-flight-info-tile:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 28%, white);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 12%, transparent);
    background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--color-primary) 8%, white) 100%);
}
.pmf-flight-info-tile-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 14%, white);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.pmf-flight-info-tile-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pmf-flight-info-tile-label {
    font-size: 11px;
    font-weight: 600;
    color: #6c7890;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.pmf-flight-info-tile-value {
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Counter-note callout — long-form text under the tile grid */
.pmf-flight-info-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, color-mix(in srgb, var(--color-primary) 2%, transparent) 100%);
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 40%, white);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pmf-flight-info-note > i {
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ===== Dark-glass variant — sidebar weather card (cancel-booking) ===== */
.pmf-weather-card .pmf-flight-info {
    border-top-color: rgba(255, 255, 255, 0.20);
}
.pmf-weather-card .pmf-flight-info-eyebrow {
    color: rgba(255, 255, 255, 0.85);
}
.pmf-weather-card .pmf-flight-info-tile {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(2px);
}
.pmf-weather-card .pmf-flight-info-tile:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.pmf-weather-card .pmf-flight-info-tile-icon {
    background: rgba(255, 217, 122, 0.18);
    color: #ffd97a;
}
.pmf-weather-card .pmf-flight-info-tile-label {
    color: rgba(255, 255, 255, 0.72);
}
.pmf-weather-card .pmf-flight-info-tile-value {
    color: #ffffff;
}
.pmf-weather-card .pmf-flight-info-note {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 217, 122, 0.55);
    color: rgba(255, 255, 255, 0.85);
}
.pmf-weather-card .pmf-flight-info-note > i {
    color: #ffd97a;
}

/* ------------------------------------------------------------------ */
/* Booking number under .trip-route-headline (change/cancel pages).    */
/* Compact brand-tinted pill so the PNR reads as identity context for  */
/* the whole change/cancel form, not a value lost in the summary grid. */
/* ------------------------------------------------------------------ */
.pmf-route-booking-no {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 10%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary, #8f5abe) 22%, white);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--color-heading, #071431);
    max-width: 100%;
}
.pmf-route-booking-no > i {
    color: var(--color-primary, #8f5abe);
    font-size: 14px;
    flex: 0 0 auto;
}
.pmf-route-booking-no-label {
    color: var(--color-muted, #6c7890);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}
.pmf-route-booking-no-value {
    color: var(--color-heading, #071431);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 14px;
    word-break: break-all;
}
@media (max-width: 480px) {
    .pmf-route-booking-no {
        padding: 5px 12px;
        gap: 6px;
        font-size: 12px;
    }
    .pmf-route-booking-no-value {
        font-size: 13px;
    }
}
/* ================================================================== */
/* Admin portal (system bookings list). Phase 1. Self-contained so    */
/* the admin layer stays removable. Brand-themed via --color-primary.  */
/* ================================================================== */
.pmf-admin-body .pmf-admin-main { padding-top: 20px; }
.pmf-admin-wrap { padding-bottom: 40px; }

.pmf-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 12%, white);
    color: var(--color-primary-dark, #53259e);
    font-size: 12px;
    font-weight: 700;
}
.pmf-admin-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--color-border, #dfe7f2);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-heading, #071431);
}
.pmf-admin-profile-btn:hover { background: #f4f5f9; }
.pmf-admin-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.pmf-admin-avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gradient-primary, #8f5abe); color: #fff; font-weight: 700; font-size: 13px;
}
.pmf-admin-profile-name { font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pmf-admin-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 8px 0 18px;
}
.pmf-admin-title { margin: 0; font-size: 24px; font-weight: 800; color: var(--color-heading, #071431); }
.pmf-admin-sub { margin: 4px 0 0; color: var(--color-muted, #6c7890); font-size: 14px; }
.pmf-admin-count {
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 8%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary, #8f5abe) 18%, white);
    color: var(--color-primary-dark, #53259e);
    border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; white-space: nowrap;
}

/* Filters */
.pmf-admin-filters {
    background: #fff; border: 1px solid var(--color-border-light, #e8edf5);
    border-radius: 14px; padding: 16px; margin-bottom: 20px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}
.pmf-admin-search-row { display: flex; gap: 10px; align-items: center; }
.pmf-admin-search {
    position: relative; flex: 1; display: flex; align-items: center;
}
.pmf-admin-search > i { position: absolute; left: 14px; color: var(--color-muted, #6c7890); }
.pmf-admin-search input {
    width: 100%; padding: 11px 14px 11px 38px; border-radius: 10px;
    border: 1px solid var(--color-border, #dfe7f2); font-size: 16px; font-family: inherit;
}
.pmf-admin-search input:focus {
    outline: none; border-color: var(--color-primary, #8f5abe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #8f5abe) 14%, transparent);
}
.pmf-admin-search-btn { flex-shrink: 0; }
#adminFiltersToggle { display: none; }

.pmf-admin-filter-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px;
}
.pmf-admin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pmf-admin-field > span { font-size: 12px; font-weight: 600; color: var(--color-muted, #6c7890); }
.pmf-admin-field input, .pmf-admin-field select {
    padding: 9px 11px; border-radius: 9px; border: 1px solid var(--color-border, #dfe7f2);
    font-size: 16px; font-family: inherit; background: #fff; width: 100%;
}
.pmf-admin-field input:focus, .pmf-admin-field select:focus {
    outline: none; border-color: var(--color-primary, #8f5abe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #8f5abe) 14%, transparent);
}
.pmf-admin-filter-actions {
    grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px;
}

/* Cards */
.pmf-admin-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #fff; border: 1px solid var(--color-border-light, #e8edf5);
    border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pmf-admin-card:hover {
    border-color: color-mix(in srgb, var(--color-primary, #8f5abe) 35%, white);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.pmf-admin-card-main { min-width: 0; flex: 1; }
.pmf-admin-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pmf-admin-card-route { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-heading, #071431); }
.pmf-admin-status { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.pmf-admin-status.is-confirmed { background: #e7f8ef; color: #0f7a44; }
.pmf-admin-status.is-cancelled { background: #fdecec; color: #b62929; }
.pmf-admin-status.is-pending { background: #fff5e0; color: #8a5800; }
.pmf-admin-status.is-default { background: #eef0f6; color: #53627c; }
.pmf-admin-badge-soft {
    font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 10%, white);
    color: var(--color-primary-dark, #53259e);
}
.pmf-admin-card-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
    color: var(--color-text, #35405f); font-size: 13px;
}
.pmf-admin-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pmf-admin-card-meta i { color: var(--color-primary, #8f5abe); }
.pmf-admin-card-pax {
    display: flex; align-items: center; gap: 7px; margin-top: 8px;
    color: var(--color-muted, #6c7890); font-size: 13px;
}
.pmf-admin-card-pax i { color: var(--color-primary, #8f5abe); }
.pmf-admin-card-owner {
    margin-top: 6px; font-size: 12.5px; color: var(--color-light-text, #8a93a8);
    display: inline-flex; align-items: center; gap: 6px;
}
.pmf-admin-card-actions { flex-shrink: 0; }

.pmf-admin-empty {
    text-align: center; padding: 48px 20px; color: var(--color-muted, #6c7890);
    background: #fff; border: 1px dashed var(--color-border, #dfe7f2); border-radius: 14px;
}
.pmf-admin-empty i { font-size: 34px; color: #cbd5e1; display: block; margin-bottom: 10px; }
.pmf-admin-empty p { margin: 0 0 12px; }

.pmf-admin-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px;
}
.pmf-admin-page {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 10px; border: 1px solid var(--color-border, #dfe7f2);
    background: #fff; color: var(--color-heading, #071431); font-weight: 600; font-size: 13px;
    text-decoration: none;
}
.pmf-admin-page:hover { background: #f4f5f9; }
.pmf-admin-page.is-disabled { opacity: .45; pointer-events: none; }
.pmf-admin-page-info { color: var(--color-muted, #6c7890); font-size: 13px; }

@media (max-width: 900px) {
    .pmf-admin-filter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    #adminFiltersToggle { display: inline-flex; }
    .pmf-admin-filter-grid { display: none; }
    .pmf-admin-filter-grid.is-open { display: grid; grid-template-columns: 1fr 1fr; }
    .pmf-admin-card { flex-direction: column; align-items: stretch; }
    .pmf-admin-card-actions { width: 100%; }
    .pmf-admin-card-actions .manage-btn { width: 100%; }
    .pmf-admin-profile-name { display: none; }
}
@media (max-width: 480px) {
    .pmf-admin-filter-grid.is-open { grid-template-columns: 1fr; }
    .pmf-admin-search-row { flex-wrap: wrap; }
    .pmf-admin-search { flex-basis: 100%; }
}

/* Admin header nav (All Flights / My Flights) — matches the passenger
   portal header pill buttons (.pmf-header-nav-link): white→tint gradient
   pill, primary text, lift on hover, filled gradient when active. */
.pmf-admin-nav { display: inline-flex; align-items: center; gap: 8px; }
.pmf-admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.pmf-admin-nav-link > i { font-size: 16px; line-height: 1; }
.pmf-admin-nav-link:hover,
.pmf-admin-nav-link:focus-visible {
    background: linear-gradient(180deg, #f7f6ff 0%, #efeaff 100%);
    border-color: color-mix(in srgb, var(--color-primary) 28%, white);
    color: var(--color-primary-dark);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}
.pmf-admin-nav-link.is-active {
    background: var(--gradient-primary);
    color: #ffffff;
    border-color: var(--color-primary-dark);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.pmf-admin-nav-link.is-active:hover {
    color: #ffffff;
    background: var(--gradient-primary);
    filter: brightness(0.95);
    transform: translateY(-1px);
}
.pmf-admin-nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--color-primary, #8f5abe); color: #fff; font-size: 11px; font-weight: 700;
}
/* On the active (filled) pill the badge flips to white-on-translucent. */
.pmf-admin-nav-link.is-active .pmf-admin-nav-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
@media (max-width: 575px) {
    .pmf-admin-nav { gap: 6px; }
    .pmf-admin-nav-link { padding: 9px 11px; gap: 0; }
    .pmf-admin-nav-link > span:not(.pmf-admin-nav-badge) { display: none; }
}

/* Admin filters — departure date RANGE picker (flatpickr range mode). */
/* Span 2 of the 4 filter columns (≈ col-md-6) so the row fills out and
   Origin + Destination drop onto the next row together, aligned. */
.pmf-admin-field-daterange { min-width: 0; grid-column: span 2; }
@media (max-width: 900px) {
    /* 2-col grid → span both (full width). */
    .pmf-admin-field-daterange { grid-column: 1 / -1; }
}
.pmf-admin-daterange {
    position: relative;
    display: flex;
    align-items: center;
}
.pmf-admin-daterange > i {
    position: absolute;
    left: 11px;
    color: var(--color-muted, #6c7890);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}
/* The visible input flatpickr renders (altInput). Source + hidden inputs stay invisible. */
.pmf-admin-daterange input.pmf-admin-daterange-display {
    width: 100%;
    padding: 9px 30px 9px 32px;
    border-radius: 9px;
    border: 1px solid var(--color-border, #dfe7f2);
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    color: var(--color-heading, #071431);
    cursor: pointer;
}
.pmf-admin-daterange input.pmf-admin-daterange-display:focus {
    outline: none;
    border-color: var(--color-primary, #8f5abe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #8f5abe) 14%, transparent);
}
.pmf-admin-daterange-clear {
    position: absolute;
    right: 8px;
    width: 18px;
    height: 18px;
    border: none;
    background: #e8eaef;
    color: #475569;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.pmf-admin-daterange-clear:hover { background: #d6dae3; color: #0f172a; }
/* Brand-tint the flatpickr range highlight. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary, #8f5abe) !important;
    border-color: var(--color-primary, #8f5abe) !important;
}
.flatpickr-day.inRange {
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 14%, #fff) !important;
    border-color: color-mix(in srgb, var(--color-primary, #8f5abe) 14%, #fff) !important;
    box-shadow: -5px 0 0 color-mix(in srgb, var(--color-primary, #8f5abe) 14%, #fff),
                 5px 0 0 color-mix(in srgb, var(--color-primary, #8f5abe) 14%, #fff) !important;
}

/* ================================================================== */
/* Select2 theming — match the portal's native inputs (admin filters  */
/* + passenger .manage-control selects). Brand-coloured focus/active.  */
/* ================================================================== */
.select2-container { width: 100% !important; }

/* Single-select box — mirror input border/radius/padding. */
.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 40px;
    border: 1px solid var(--color-border, #dfe7f2);
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 11px;
    font-family: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-heading, #071431);
    font-size: 16px;
    /* Match the native input text weight (400) — not Select2's default. */
    font-weight: 400;
    font-family: inherit;
    line-height: 1.4;
    padding: 0;
    flex: 1;
    min-width: 0;
}
/* Empty selection ("All …" / "Any …") reads as a placeholder — same grey +
   same (normal) weight as the portal's input ::placeholder text. */
.select2-container.pmf-s2-empty .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
    font-weight: 400;
}
/* Keep the admin filter inputs' placeholders the SAME grey for consistency. */
.pmf-admin-field input::placeholder,
.pmf-admin-search input::placeholder,
.pmf-admin-daterange input::placeholder { color: #94a3b8; }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-muted, #6c7890);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 6px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--color-primary, #8f5abe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #8f5abe) 14%, transparent);
    outline: none;
}

/* Dropdown panel. */
.select2-dropdown {
    border-color: var(--color-border, #dfe7f2);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}
.select2-container--default .select2-results__option {
    font-size: 13.5px;
    color: var(--color-text, #35405f);
    padding: 8px 12px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--color-primary, #8f5abe);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-primary, #8f5abe) 12%, #fff);
    color: var(--color-primary-dark, #53259e);
}
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background: var(--color-primary, #8f5abe);
    color: #fff;
}

/* Search box inside the dropdown. */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border, #dfe7f2);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 16px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--color-primary, #8f5abe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #8f5abe) 14%, transparent);
}

/* Airline option (logo + name) in both the dropdown list and the selection. */
.pmf-s2-airline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pmf-s2-airline-logo {
    width: 22px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
}
.pmf-s2-airline-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Highlighted row → logo bg stays white-ish for contrast on the brand fill. */
.select2-results__option--highlighted .pmf-s2-airline-logo {
    background: rgba(255, 255, 255, 0.9);
}

/* On dark/glassy contexts the default Select2 single height can look tall;
   keep the admin filter selects compact + consistent with the grid. */
.pmf-admin-field .select2-container--default .select2-selection--single { min-height: 38px; }

/* Passenger .manage-control selects: Select2 hides the native <select>; the
   container should fill the same width and sit flush in the form group. */
.manage-form-group .select2-container,
.manage-control + .select2-container { margin: 0; }

/* Admin card — airline logo chips (name + small logo). */
.pmf-admin-airlines {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Each airline = a compact tile: logo on top, name centered underneath. */
.pmf-admin-airline {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 140px;
    padding: 8px 10px;
    text-align: center;
    background: var(--color-body, #f8faff);
    border: 1px solid var(--color-border-light, #e8edf5);
    border-radius: 10px;
}
.pmf-admin-airline-logo {
    /* Larger, natural aspect ratio — height follows the width instead of a
       fixed box, capped so a square logo can't grow too tall. */
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 40px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
}
.pmf-admin-airline-name {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text, #35405f);
    max-width: 120px;
    overflow-wrap: anywhere;
}

/* Airline tiles strip pinned to the bottom of each admin flight card. */
.pmf-admin-card-airlines {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}

/* ================================================================== */
/* 16px MINIMUM on every editable field — per requirement + prevents  */
/* iOS Safari auto-zoom on focus. The base element rule at the top of  */
/* this file already sets input/textarea/select to 16px; these are     */
/* the CLASS-based theme rules (in style.css) that were below 16px and  */
/* overrode it. custom.css loads after style.css, so a same-specificity */
/* rule here wins — no !important needed. Larger inputs (OTP boxes,     */
/* reset-form-control 18px) are intentionally left untouched.          */
/* ================================================================== */
.manage-control,
.manage-date-input,
.login-input-box input,
.profile-form-control,
.support-chat-input {
    font-size: 16px;
}

/* ================================================================== */
/* Admin — mobile hardening so the header never overflows and the      */
/* list/filters stay comfortable down to the smallest phones.          */
/* ================================================================== */
@media (max-width: 767px) {
    .pmf-admin-body .site-header-actions { gap: 8px; }
    .pmf-admin-head { margin-bottom: 14px; }
    .pmf-admin-title { font-size: 21px; }
    .pmf-admin-sub { font-size: 13px; }
    /* Airline chips + meta wrap cleanly on the card. */
    .pmf-admin-card-meta { gap: 10px; }
    .pmf-admin-airlines { width: 100%; }
}
@media (max-width: 575px) {
    .pmf-admin-badge { padding: 5px 9px; font-size: 11.5px; gap: 4px; }
    .pmf-admin-badge-text { display: none; }            /* shield icon only */
    .pmf-admin-title { font-size: 19px; }
    .pmf-admin-count { font-size: 12px; padding: 5px 11px; }
    .pmf-admin-profile-btn { padding: 3px 8px 3px 3px; }
}
@media (max-width: 480px) {
    .pmf-admin-badge { display: none; }                 /* nav + profile already convey admin */
    .pmf-admin-body .site-logo { width: 118px; }        /* keep room for the actions */
    .pmf-admin-nav { gap: 4px; }
    .pmf-admin-nav-link { padding: 8px 10px; }
    .pmf-admin-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    /* Filter actions stack full-width when the panel is open. */
    .pmf-admin-filter-actions { flex-direction: column; }
    .pmf-admin-filter-actions .manage-btn { width: 100%; text-align: center; }
}
/* Select2 dropdown should never exceed the viewport on phones. */
@media (max-width: 575px) {
    .select2-container .select2-dropdown { max-width: 96vw; }
    .select2-results__option { font-size: 14px; }
}