/* /Pages/B2b/Help.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   B2B "Help & guides" reader. Two panes at lg and up — a category rail listing
   every published guide, and the numbered walkthrough for the selected one.
   Below lg the rail stacks above the reader. Colours come from the .b2b-root
   custom properties defined in wwwroot/css/b2b.css, so this page follows the
   Horizon B2B palette without redefining it. Logical properties throughout so
   the layout mirrors correctly under RTL.
   ─────────────────────────────────────────────────────────────────────────── */

.hlp[b-emqs313zpw] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Header + search ─────────────────────────────────────────────────────── */

.hlp__head[b-emqs313zpw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hlp__search[b-emqs313zpw] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
    padding: 0.625rem 0.875rem;
    max-inline-size: 34rem;
    background: var(--b2b-card, #fff);
    border: 1px solid var(--b2b-border, #e3e5ee);
    border-radius: 999px;
}

.hlp__search:focus-within[b-emqs313zpw] {
    border-color: var(--b2b-primary, #003d9b);
    box-shadow: 0 0 0 3px rgba(0, 61, 155, 0.12);
}

.hlp__search > .material-symbols-outlined[b-emqs313zpw] {
    font-size: 20px;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__search input[b-emqs313zpw] {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--b2b-on-surface, #191c1e);
}

.hlp__search-clear[b-emqs313zpw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__search-clear:hover[b-emqs313zpw] {
    color: var(--b2b-on-surface, #191c1e);
}

/* ── Empty / error notice ────────────────────────────────────────────────── */

.hlp__notice[b-emqs313zpw] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--b2b-card, #fff);
    border: 1px solid var(--b2b-border, #e3e5ee);
    border-radius: 14px;
}

.hlp__notice > .material-symbols-outlined[b-emqs313zpw] {
    flex: none;
    font-size: 28px;
    color: var(--b2b-primary, #003d9b);
}

.hlp__notice p[b-emqs313zpw] {
    margin: 0.25rem 0 0.875rem;
    color: var(--b2b-on-surface-variant, #56607a);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.hlp__notice--error > .material-symbols-outlined[b-emqs313zpw] {
    color: var(--b2b-err-fg, #b91c1c);
}

/* ── Two-pane body ───────────────────────────────────────────────────────── */

.hlp__body[b-emqs313zpw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .hlp__body[b-emqs313zpw] {
        grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    }

    /* The rail scrolls independently so a long walkthrough never pushes the
       guide list out of reach. */
    .hlp__rail[b-emqs313zpw] {
        position: sticky;
        inset-block-start: 1rem;
        max-block-size: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

/* ── Category rail ───────────────────────────────────────────────────────── */

.hlp__rail[b-emqs313zpw] {
    padding: 0.75rem;
}

.hlp__norail[b-emqs313zpw] {
    margin: 0;
    padding: 1rem;
    color: var(--b2b-on-surface-variant, #56607a);
    font-size: 0.9375rem;
}

.hlp__group + .hlp__group[b-emqs313zpw] {
    margin-block-start: 1rem;
}

.hlp__group-title[b-emqs313zpw] {
    margin: 0 0 0.375rem;
    padding-inline: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__item[b-emqs313zpw] {
    inline-size: 100%;
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 0.5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: start;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.hlp__item:hover[b-emqs313zpw] {
    background: var(--b2b-container-low, #f3f4f6);
}

.hlp__item.is-active[b-emqs313zpw] {
    background: var(--b2b-tertiary-fixed, #d9e2ff);
}

.hlp__item.is-active .hlp__item-title[b-emqs313zpw],
.hlp__item.is-active .hlp__item-ico[b-emqs313zpw] {
    color: var(--b2b-on-tertiary-fixed, #00419d);
}

.hlp__item-ico[b-emqs313zpw] {
    flex: none;
    font-size: 20px;
    margin-block-start: 1px;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__item-text[b-emqs313zpw] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.hlp__item-title[b-emqs313zpw] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--b2b-on-surface, #191c1e);
}

.hlp__item-sub[b-emqs313zpw],
.hlp__item-meta[b-emqs313zpw] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__item-meta[b-emqs313zpw] {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* ── Reader ──────────────────────────────────────────────────────────────── */

.hlp__reader[b-emqs313zpw] {
    padding: 1.5rem;
}

.hlp__reader-head[b-emqs313zpw] {
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--b2b-border, #e3e5ee);
}

.hlp__reader-title[b-emqs313zpw] {
    margin: 0.5rem 0 0;
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--b2b-on-surface, #191c1e);
}

.hlp__reader-sub[b-emqs313zpw] {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__reader-meta[b-emqs313zpw] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--b2b-on-surface-variant, #56607a);
}

/* ── Numbered steps ──────────────────────────────────────────────────────── */

.hlp__steps[b-emqs313zpw] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hlp__step[b-emqs313zpw] {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-block: 1.5rem;
}

.hlp__step + .hlp__step[b-emqs313zpw] {
    border-block-start: 1px solid var(--b2b-border, #e3e5ee);
}

.hlp__step-num[b-emqs313zpw] {
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--b2b-primary, #003d9b);
    color: var(--b2b-on-primary, #fff);
    font-size: 0.875rem;
    font-weight: 700;
}

.hlp__step-body[b-emqs313zpw] {
    flex: 1;
    min-inline-size: 0;
}

.hlp__step-title[b-emqs313zpw] {
    margin: 0.25rem 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--b2b-on-surface, #191c1e);
}

/* Screenshot */
.hlp__figure[b-emqs313zpw] {
    margin: 0 0 1rem;
}

.hlp__figure img[b-emqs313zpw] {
    inline-size: 100%;
    block-size: auto;
    display: block;
    border: 1px solid var(--b2b-border, #e3e5ee);
    border-radius: 10px;
}

.hlp__figure figcaption[b-emqs313zpw] {
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    color: var(--b2b-on-surface-variant, #56607a);
}

/* Authored rich text. Deep selectors: the body is injected as a MarkupString,
   so its elements carry no scope attribute of their own. */
.hlp__step-html[b-emqs313zpw] {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--b2b-on-surface, #191c1e);
}

.hlp__step-html[b-emqs313zpw]  p {
    margin: 0 0 0.75rem;
}

.hlp__step-html[b-emqs313zpw]  p:last-child {
    margin-block-end: 0;
}

.hlp__step-html[b-emqs313zpw]  h2,
.hlp__step-html[b-emqs313zpw]  h3,
.hlp__step-html[b-emqs313zpw]  h4 {
    margin: 1.25rem 0 0.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.hlp__step-html[b-emqs313zpw]  h2 { font-size: 1.125rem; }
.hlp__step-html[b-emqs313zpw]  h3 { font-size: 1rem; }
.hlp__step-html[b-emqs313zpw]  h4 { font-size: 0.9375rem; }

/* Markers are declared explicitly: MudBlazor's bundled reset strips them, and
   an authored bullet list that renders as flat indented text loses the
   structure the author wrote. */
.hlp__step-html[b-emqs313zpw]  ul,
.hlp__step-html[b-emqs313zpw]  ol {
    margin: 0 0 0.75rem;
    padding-inline-start: 1.375rem;
    list-style-position: outside;
}

.hlp__step-html[b-emqs313zpw]  ul {
    list-style-type: disc;
}

.hlp__step-html[b-emqs313zpw]  ol {
    list-style-type: decimal;
}

.hlp__step-html[b-emqs313zpw]  ul ul {
    list-style-type: circle;
}

.hlp__step-html[b-emqs313zpw]  li {
    margin-block-end: 0.375rem;
}

.hlp__step-html[b-emqs313zpw]  a {
    color: var(--b2b-primary, #003d9b);
    text-decoration: underline;
}

.hlp__step-html[b-emqs313zpw]  strong {
    font-weight: 700;
}

.hlp__step-html[b-emqs313zpw]  img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: 8px;
}

.hlp__step-html[b-emqs313zpw]  blockquote {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    border-inline-start: 3px solid var(--b2b-primary, #003d9b);
    background: var(--b2b-container-low, #f3f4f6);
    border-radius: 0 8px 8px 0;
    color: var(--b2b-on-surface-variant, #56607a);
}

.hlp__step-html[b-emqs313zpw]  pre,
.hlp__step-html[b-emqs313zpw]  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

.hlp__step-html[b-emqs313zpw]  pre {
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    background: var(--b2b-container, #edeef0);
    border-radius: 8px;
}

/* Tables in authored content scroll rather than blowing out the layout. */
.hlp__step-html[b-emqs313zpw]  table {
    inline-size: 100%;
    margin: 0 0 0.75rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.hlp__step-html[b-emqs313zpw]  th,
.hlp__step-html[b-emqs313zpw]  td {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--b2b-border, #e3e5ee);
    text-align: start;
    vertical-align: top;
}

.hlp__step-html[b-emqs313zpw]  th {
    background: var(--b2b-container-low, #f3f4f6);
    font-weight: 700;
}

/* Tip callout */
.hlp__tip[b-emqs313zpw] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-block-start: 0.875rem;
    padding: 0.75rem 0.875rem;
    background: var(--b2b-warn-bg, #fef9c3);
    border-radius: 10px;
}

.hlp__tip > .material-symbols-outlined[b-emqs313zpw] {
    flex: none;
    font-size: 20px;
    color: var(--b2b-warn-fg, #a16207);
}

.hlp__tip p[b-emqs313zpw] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--b2b-warn-fg, #a16207);
}

.hlp__cta[b-emqs313zpw] {
    margin-block-start: 0.875rem;
}

.hlp__cta .material-symbols-outlined[b-emqs313zpw] {
    font-size: 18px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.hlp__foot[b-emqs313zpw] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--b2b-container-low, #f3f4f6);
    border-radius: 12px;
}

.hlp__foot > .material-symbols-outlined[b-emqs313zpw] {
    font-size: 26px;
    color: var(--b2b-primary, #003d9b);
}

.hlp__foot > div[b-emqs313zpw] {
    flex: 1;
    min-inline-size: 12rem;
}

.hlp__foot p[b-emqs313zpw] {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--b2b-on-surface-variant, #56607a);
}
/* /Pages/FlightCloud/BookingWizard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Flight booking wizard — identical visual language to the HotelCloud
   BookingWizard (bw-*): Travelio-style step indicator, white cards, tinted
   passenger cards with a lead accent, review recap pills and a single sticky
   navigation footer (exactly one Back + one Continue per step). ::deep is used
   for descendants so classes applied to MudBlazor components (MudPaper.bw-card)
   are matched too.
   ─────────────────────────────────────────────────────────────────────────── */

.bw[b-fc-wizard] {
    --bw-primary: #0066ff;
    font-family: 'Inter', system-ui, sans-serif;
    color: #111827;
}

.bw[b-fc-wizard]  .bw-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
}

/* ─── Step indicator ─── */
.bw[b-fc-wizard]  .bw-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    overflow-x: auto;
}
.bw[b-fc-wizard]  .bw-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.bw[b-fc-wizard]  .bw-step__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    background: #eef2f7;
    color: #94a3b8;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bw[b-fc-wizard]  .bw-step__num .material-symbols-outlined { font-size: 18px; }
.bw[b-fc-wizard]  .bw-step__label {
    font-size: 13.5px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}
.bw[b-fc-wizard]  .bw-step--active .bw-step__num {
    background: var(--bw-primary);
    color: #fff;
    border-color: rgba(0, 102, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}
.bw[b-fc-wizard]  .bw-step--active .bw-step__label { color: #111827; }
.bw[b-fc-wizard]  .bw-step--done .bw-step__num { background: #10b981; color: #fff; }
.bw[b-fc-wizard]  .bw-step--done .bw-step__label { color: #047857; }
.bw[b-fc-wizard]  .bw-step__bar {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}
.bw[b-fc-wizard]  .bw-step__bar--done { background: #10b981; }

/* ─── Two-column layout: step content + booking.com-style sticky summary ─── */
.bw[b-fc-wizard]  .bw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}
.bw[b-fc-wizard]  .bw-main { min-width: 0; }
.bw[b-fc-wizard]  .bw-aside { position: sticky; top: 16px; }

.bw[b-fc-wizard]  .bw-side__pills,
.bw[b-fc-wizard]  .bw-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* The deadline strip is a mobile-only echo of the sidebar countdown card. */
.bw[b-fc-wizard]  .bw-footer__deadline { display: none; }

.bw[b-fc-wizard]  .bw-timer-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.3;
    color: #1d4ed8;
}
.bw[b-fc-wizard]  .bw-timer-mini .material-symbols-outlined { font-size: 16px; }
.bw[b-fc-wizard]  .bw-timer-mini strong { font-variant-numeric: tabular-nums; }
.bw[b-fc-wizard]  .bw-timer-mini--warn { color: #a16207; }
.bw[b-fc-wizard]  .bw-timer-mini--danger { color: #b91c1c; }

@media (max-width: 900px) {
    .bw[b-fc-wizard]  .bw-layout { grid-template-columns: 1fr; }
    .bw[b-fc-wizard]  .bw-aside { position: static; order: -1; }

    /* Pin the footer to the viewport rather than to the end of the column, so
       the total, the deadline and the primary action stay on screen for the
       whole of a long passenger form. */
    .bw[b-fc-wizard]  .bw-footer {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        border-radius: 0;
        border-inline: none;
        border-block-end: none;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, 0.45);
    }
    .bw[b-fc-wizard]  .bw-footer__mid { flex: 1 1 100%; order: -1; align-items: flex-start; text-align: start; }
    .bw[b-fc-wizard]  .bw-footer__deadline { display: block; }
    .bw[b-fc-wizard]  .bw-back { flex: 0 0 auto; }
    .bw[b-fc-wizard]  .bw-continue,
    .bw[b-fc-wizard]  .bw-footer__actions { flex: 1 1 auto; }

    /* Clear the fixed footer so the last field is never trapped under it. */
    .bw[b-fc-wizard]  .bw-layout { padding-bottom: 108px; }
}

/* ─── Cards ─── */
.bw[b-fc-wizard]  .bw-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: none;
}

/* ─── Line rows (itinerary / review) ─── */
.bw[b-fc-wizard]  .bw-line {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bw[b-fc-wizard]  .bw-line__main { flex: 1 1 auto; min-width: 0; }
.bw[b-fc-wizard]  .bw-line__name { font-size: 15.5px; font-weight: 800; color: #111827; }
.bw[b-fc-wizard]  .bw-line__meta { font-size: 13px; color: #4b5563; margin-top: 2px; }
.bw[b-fc-wizard]  .bw-line__sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.bw[b-fc-wizard]  .bw-line__price { text-align: right; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-line__total { font-size: 17px; font-weight: 800; color: var(--bw-primary); font-variant-numeric: tabular-nums; }
.bw[b-fc-wizard]  .bw-line__per { font-size: 12px; color: #6b7280; }

/* Validation summary: one bullet per problem, so a party of six is fixed in a
   single pass. The list is newline-separated text, hence pre-line. */
.bw[b-fc-wizard]  .bw-error { white-space: pre-line; }

/* ─── Footer: one Back + one Continue ─── */
.bw[b-fc-wizard]  .bw-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    position: sticky;
    bottom: 12px;
    box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.5);
}
.bw[b-fc-wizard]  .bw-footer__mid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.bw[b-fc-wizard]  .bw-footer__note { font-size: 12px; color: #6b7280; }
.bw[b-fc-wizard]  .bw-footer__total { font-size: 15px; color: #374151; }
.bw[b-fc-wizard]  .bw-footer__total strong { color: #111827; }

.bw[b-fc-wizard]  .bw-back,
.bw[b-fc-wizard]  .bw-continue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 11px;
    padding: 11px 20px;
    transition: filter 0.15s, background 0.15s, transform 0.12s, border-color 0.15s;
    flex: 0 0 auto;
}
.bw[b-fc-wizard]  .bw-back {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}
.bw[b-fc-wizard]  .bw-back:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; }
.bw[b-fc-wizard]  .bw-continue {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
}
.bw[b-fc-wizard]  .bw-continue:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.bw[b-fc-wizard]  .bw-continue--pay { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7); }
.bw[b-fc-wizard]  .bw-back:disabled,
.bw[b-fc-wizard]  .bw-continue:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.bw[b-fc-wizard]  .bw-back .material-symbols-outlined,
.bw[b-fc-wizard]  .bw-continue .material-symbols-outlined { font-size: 18px; }

/* Review-step footer holds two actions (Hold + Book) side by side. */
.bw[b-fc-wizard]  .bw-footer__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Hold button — a neutral/secondary counterpart to the primary Book button. */
.bw[b-fc-wizard]  .bw-hold-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #c7d2fe;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 11px;
    padding: 11px 18px;
    color: #3730a3;
    background: #eef2ff;
    transition: filter 0.15s, background 0.15s, transform 0.12s, border-color 0.15s;
    flex: 0 0 auto;
}
.bw[b-fc-wizard]  .bw-hold-btn:hover:not(:disabled) { background: #e0e7ff; border-color: #a5b4fc; transform: translateY(-1px); }
.bw[b-fc-wizard]  .bw-hold-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.bw[b-fc-wizard]  .bw-hold-btn .material-symbols-outlined { font-size: 18px; }

@media (max-width: 640px) {
    .bw[b-fc-wizard]  .bw-footer { flex-wrap: wrap; }
    .bw[b-fc-wizard]  .bw-footer__mid { order: -1; flex-basis: 100%; }
    .bw[b-fc-wizard]  .bw-footer__actions { flex-basis: 100%; }
    .bw[b-fc-wizard]  .bw-footer__actions .bw-hold-btn,
    .bw[b-fc-wizard]  .bw-footer__actions .bw-continue { flex: 1 1 0; justify-content: center; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Redesign additions: prominent countdown timer, hold explainer / success
   banners, blocking overlay, the supplier-message + held-reference cards in
   the sidebar, and the nationality-autocomplete dropdown rows.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Spinner used inside buttons / overlay (Material "progress_activity") ─── */
.bw[b-fc-wizard]  .bw-spin {
    display: inline-block;
    animation: bw-spin-b-fc-wizard 0.9s linear infinite;
}
@keyframes bw-spin-b-fc-wizard { to { transform: rotate(360deg); } }

/* ─── Blocking overlay while a supplier op (hold / issue) is running ─── */
.bw[b-fc-wizard]  .bw-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
.bw[b-fc-wizard]  .bw-overlay__card {
    background: #fff;
    border-radius: 18px;
    padding: 30px 36px;
    text-align: center;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.6);
    max-width: 360px;
}
.bw[b-fc-wizard]  .bw-overlay__spinner {
    font-size: 46px !important;
    color: var(--bw-primary);
}
.bw[b-fc-wizard]  .bw-overlay__title { margin-top: 10px; font-size: 17px; font-weight: 800; color: #0f172a; }
.bw[b-fc-wizard]  .bw-overlay__sub { margin-top: 4px; font-size: 13px; color: #64748b; }

/* ─── Prominent countdown timer (sidebar, top) ─── */
.bw[b-fc-wizard]  .bw-timer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
.bw[b-fc-wizard]  .bw-timer__icon { font-size: 30px !important; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-timer__body { min-width: 0; }
.bw[b-fc-wizard]  .bw-timer__label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.bw[b-fc-wizard]  .bw-timer__value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.bw[b-fc-wizard]  .bw-timer__value--clock { font-size: 26px; letter-spacing: 0.02em; }
.bw[b-fc-wizard]  .bw-timer__sub { font-size: 11.5px; opacity: 0.9; margin-top: 1px; }
.bw[b-fc-wizard]  .bw-timer--price { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.bw[b-fc-wizard]  .bw-timer--hold { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.bw[b-fc-wizard]  .bw-timer--warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.bw[b-fc-wizard]  .bw-timer--danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ─── Hold explainer note (above the Hold & continue button) ─── */
.bw[b-fc-wizard]  .bw-hold-note,
.bw[b-fc-wizard]  .bw-issue-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.bw[b-fc-wizard]  .bw-issue-note { background: #fff7ed; border-color: #fed7aa; }
.bw[b-fc-wizard]  .bw-hold-note__icon { font-size: 26px !important; color: #2563eb; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-issue-note__icon { font-size: 26px !important; color: #ea580c; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-hold-note__title,
.bw[b-fc-wizard]  .bw-issue-note__title { font-size: 14.5px; font-weight: 800; color: #0f172a; }
.bw[b-fc-wizard]  .bw-hold-note__text,
.bw[b-fc-wizard]  .bw-issue-note__text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #334155; }

/* ─── Wallet balance check inside the hold note ─── */
.bw[b-fc-wizard]  .bw-hold-wallet {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.5;
}
.bw[b-fc-wizard]  .bw-hold-wallet > .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-hold-wallet__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bw[b-fc-wizard]  .bw-hold-wallet--low { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.bw[b-fc-wizard]  .bw-hold-wallet--low > .material-symbols-outlined { color: #ea580c; }
.bw[b-fc-wizard]  .bw-hold-wallet--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; align-items: center; }
.bw[b-fc-wizard]  .bw-hold-wallet--ok > .material-symbols-outlined { color: #10b981; }
.bw[b-fc-wizard]  .bw-hold-wallet__text strong { font-variant-numeric: tabular-nums; }
.bw[b-fc-wizard]  .bw-hold-wallet__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bw[b-fc-wizard]  .bw-wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 9px;
    padding: 7px 13px;
    transition: filter 0.15s, background 0.15s, border-color 0.15s, transform 0.12s;
}
.bw[b-fc-wizard]  .bw-wallet-btn .material-symbols-outlined { font-size: 17px; }
.bw[b-fc-wizard]  .bw-wallet-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.bw[b-fc-wizard]  .bw-wallet-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px -10px rgba(234, 88, 12, 0.7);
}
.bw[b-fc-wizard]  .bw-wallet-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); }

/* Buttons that hold a spinner keep their label vertically centered. */
.bw[b-fc-wizard]  .bw-continue .bw-spin { font-size: 18px !important; }

/* ─── Extras step: seats & services on the held reservation ─── */
.bw[b-fc-wizard]  .bw-muted { color: #6b7280; font-size: 12px; }
/* /Pages/FlightCloud/Confirmation.razor.rz.scp.css */
/* Flight booking confirmation — "Horizon B2B" design language, matching
   MyReservationDetail / PrintTicket. Logical properties throughout so the
   whole page mirrors correctly under RTL. */

/* ── Hero success banner ─────────────────────────────────────────────── */
.cf-hero[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 12px;
    border-radius: var(--b2b-r-lg);
    background: linear-gradient(120deg, var(--b2b-ok-bg), var(--b2b-card) 78%);
    border: 1px solid var(--b2b-border);
}

.cf-hero-badge[b-9g7b0fvulr] {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--b2b-ok-fg);
    color: #fff;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.35);
}

.cf-hero-badge .material-symbols-outlined[b-9g7b0fvulr] {
    font-size: 30px;
    font-variation-settings: 'wght' 700;
}

/* Ticketing still in flight: amber, not the success green — pending must never
   look like a ticket in hand. */
.cf-hero--pending[b-9g7b0fvulr] {
    background: linear-gradient(120deg, var(--b2b-warn-bg), var(--b2b-card) 78%);
}

.cf-hero--pending .cf-hero-badge[b-9g7b0fvulr] {
    background: var(--b2b-warn-fg);
    box-shadow: 0 4px 14px rgba(161, 98, 7, 0.35);
}

/* Cancelled or failed: neither success nor "almost there". */
.cf-hero--ended[b-9g7b0fvulr] {
    background: linear-gradient(120deg, var(--b2b-err-bg), var(--b2b-card) 78%);
}

.cf-hero--ended .cf-hero-badge[b-9g7b0fvulr] {
    background: var(--b2b-err-fg);
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.35);
}

.cf-hero--ended .cf-hero-price-val[b-9g7b0fvulr] { color: var(--b2b-on-surface-variant); }

.cf-hero-text[b-9g7b0fvulr] { min-width: 0; }

.cf-hero-title[b-9g7b0fvulr] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--b2b-on-surface);
    line-height: 1.2;
}

.cf-hero-sub[b-9g7b0fvulr] {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--b2b-on-surface-variant);
}

/* The wallet charge belongs beside the outcome, not buried in the card body:
   after "did it work?", "what did it cost me?" is the agent's next question. */
.cf-hero-price[b-9g7b0fvulr] {
    margin-inline-start: auto;
    text-align: end;
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--b2b-border);
    flex: 0 0 auto;
}

.cf-hero-price-lbl[b-9g7b0fvulr] {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--b2b-on-surface-variant);
}

.cf-hero-price-val[b-9g7b0fvulr] {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--b2b-primary);
    line-height: 1.15;
    white-space: nowrap;
}

/* ── Reference strip ─────────────────────────────────────────────────── */
.cf-refs[b-9g7b0fvulr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin-bottom: 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    background: var(--b2b-card);
    overflow: hidden;
}

/* Separators are drawn per cell rather than by letting a coloured gap show
   through: when the row wraps to an uneven count, a bare gap paints the empty
   cell as a solid grey block. */
.cf-ref[b-9g7b0fvulr] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 18px;
    background: var(--b2b-card);
    box-shadow: 0 0 0 1px var(--b2b-border);
}

.cf-ref-lbl[b-9g7b0fvulr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--b2b-on-surface-variant);
}

.cf-ref-lbl .material-symbols-outlined[b-9g7b0fvulr] { font-size: 15px; }

.cf-ref-val[b-9g7b0fvulr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--b2b-on-surface);
    word-break: break-word;
    /* Booking references, PNRs and ticket numbers are Latin-numeric identifiers:
       they must not be reordered by an RTL paragraph direction. */
    direction: ltr;
    unicode-bidi: isolate;
}

.cf-ref-val--pending[b-9g7b0fvulr] { font-weight: 600; color: var(--b2b-warn-fg); }

.cf-copy[b-9g7b0fvulr] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--b2b-on-surface-variant);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.cf-copy:hover[b-9g7b0fvulr] { opacity: 1; background: var(--b2b-container-low); color: var(--b2b-primary); }
.cf-copy .material-symbols-outlined[b-9g7b0fvulr] { font-size: 16px; }

/* ── Action bar: one primary, secondaries beside it, "next" as a link ─── */
.cf-bar[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    background: var(--b2b-card);
    box-shadow: var(--b2b-shadow);
}

.cf-bar-main[b-9g7b0fvulr] { display: flex; gap: 10px; flex-wrap: wrap; }

.cf-bar .b2b-btn .material-symbols-outlined[b-9g7b0fvulr] { font-size: 18px; }

.cf-bar-link[b-9g7b0fvulr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 8px 4px;
    border: none;
    background: none;
    color: var(--b2b-primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.cf-bar-link:hover[b-9g7b0fvulr] { text-decoration: underline; }
.cf-bar-link .material-symbols-outlined[b-9g7b0fvulr] { font-size: 18px; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.cf-grid[b-9g7b0fvulr] { align-items: start; }
.cf-stack[b-9g7b0fvulr] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cf-card-body[b-9g7b0fvulr] { padding: 18px 24px 22px; }

.cf-head-ico[b-9g7b0fvulr] { font-size: 20px; color: var(--b2b-primary-container); vertical-align: -4px; margin-inline-end: 6px; }
.cf-head-sub[b-9g7b0fvulr] { font-size: 0.78rem; color: var(--b2b-on-surface-variant); }
.cf-head-chips[b-9g7b0fvulr] { display: flex; gap: 6px; flex-wrap: wrap; }

.cf-sub-lbl[b-9g7b0fvulr] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--b2b-on-surface-variant);
    margin: 18px 0 10px;
}

.cf-muted[b-9g7b0fvulr] { color: var(--b2b-on-surface-variant); }
.cf-empty-line[b-9g7b0fvulr] { margin: 0; font-size: 0.85rem; color: var(--b2b-on-surface-variant); }

.cf-loading[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 0.82rem;
    color: var(--b2b-on-surface-variant);
}

.cf-spinner[b-9g7b0fvulr] {
    width: 15px;
    height: 15px;
    border: 2px solid var(--b2b-border);
    border-block-start-color: var(--b2b-primary);
    border-radius: 999px;
    animation: cf-spin-b-9g7b0fvulr 0.8s linear infinite;
}

@keyframes cf-spin-b-9g7b0fvulr { to { transform: rotate(360deg); } }

/* ── Route header ────────────────────────────────────────────────────── */
.cf-route[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--b2b-border);
}

.cf-route-end[b-9g7b0fvulr] { display: flex; flex-direction: column; min-width: 0; }

.cf-route-code[b-9g7b0fvulr] {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.1;
    color: var(--b2b-on-surface);
}

.cf-route-place[b-9g7b0fvulr] { font-size: 0.78rem; color: var(--b2b-on-surface-variant); }

.cf-route-plane[b-9g7b0fvulr] { color: var(--b2b-primary-container); font-size: 28px; }

/* ── Itinerary ───────────────────────────────────────────────────────── */
.cf-legs[b-9g7b0fvulr] { display: flex; flex-direction: column; gap: 12px; }

.cf-leg[b-9g7b0fvulr] {
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-md);
    background: var(--b2b-container-low);
    overflow: hidden;
}

.cf-leg-head[b-9g7b0fvulr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--b2b-card);
    border-bottom: 1px solid var(--b2b-border);
}

.cf-leg-title[b-9g7b0fvulr] { font-size: 0.9rem; font-weight: 700; color: var(--b2b-on-surface); }
.cf-leg-meta[b-9g7b0fvulr] { font-size: 0.78rem; color: var(--b2b-on-surface-variant); }

.cf-seg[b-9g7b0fvulr] {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) auto minmax(74px, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
}

.cf-seg + .cf-seg[b-9g7b0fvulr] { border-block-start: 1px dashed var(--b2b-border); }

.cf-seg-airline[b-9g7b0fvulr] { display: flex; align-items: center; gap: 10px; }

.cf-airline-badge[b-9g7b0fvulr] {
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--b2b-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cf-airline-info[b-9g7b0fvulr] { display: flex; flex-direction: column; min-width: 0; }
.cf-airline-name[b-9g7b0fvulr] { font-size: 0.85rem; font-weight: 600; color: var(--b2b-on-surface); }
.cf-flight-no[b-9g7b0fvulr] { font-size: 0.75rem; color: var(--b2b-on-surface-variant); }
.cf-operated[b-9g7b0fvulr] { font-size: 0.7rem; font-weight: 600; color: var(--b2b-warn-fg); }

.cf-seg-time[b-9g7b0fvulr] { display: flex; flex-direction: column; min-width: 0; }
.cf-seg-time.end[b-9g7b0fvulr] { text-align: end; }
.cf-time[b-9g7b0fvulr] { font-size: 1.05rem; font-weight: 700; color: var(--b2b-on-surface); line-height: 1.1; }
.cf-apt[b-9g7b0fvulr] { font-size: 0.82rem; font-weight: 600; color: var(--b2b-on-surface); }
.cf-date[b-9g7b0fvulr] { font-size: 0.7rem; color: var(--b2b-on-surface-variant); }
.cf-apt-name[b-9g7b0fvulr] {
    font-size: 0.7rem;
    color: var(--b2b-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-seg-mid[b-9g7b0fvulr] { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 78px; }
.cf-seg-dur[b-9g7b0fvulr] { font-size: 0.72rem; color: var(--b2b-on-surface-variant); white-space: nowrap; }
.cf-seg-local[b-9g7b0fvulr] { font-size: 0.62rem; color: var(--b2b-outline); }
.cf-seg-rail[b-9g7b0fvulr] {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--b2b-outline) 20%, var(--b2b-outline) 80%, transparent);
    position: relative;
}
.cf-seg-rail[b-9g7b0fvulr]::after {
    content: 'flight';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    inset-inline-end: -2px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 13px;
    color: var(--b2b-outline);
    background: var(--b2b-container-low);
}

.cf-seg-tags[b-9g7b0fvulr] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }

.cf-seg-tag[b-9g7b0fvulr] {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--b2b-container-high);
    color: var(--b2b-on-surface-variant);
}

.cf-layover[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--b2b-warn-fg);
    background: var(--b2b-warn-bg);
    border-block: 1px dashed var(--b2b-border);
}

.cf-layover .material-symbols-outlined[b-9g7b0fvulr] { font-size: 16px; }

/* ── Travellers ──────────────────────────────────────────────────────── */
.cf-pax-table-wrap[b-9g7b0fvulr] { overflow-x: auto; }

.cf-pax-table[b-9g7b0fvulr] { width: 100%; border-collapse: collapse; font-size: 0.84rem; }

.cf-pax-table th[b-9g7b0fvulr] {
    text-align: start;
    padding: 0 0 8px;
    padding-inline-end: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--b2b-on-surface-variant);
    border-bottom: 1px solid var(--b2b-border);
    white-space: nowrap;
}

.cf-pax-table td[b-9g7b0fvulr] {
    padding: 10px 0;
    padding-inline-end: 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--b2b-border);
    color: var(--b2b-on-surface);
}

.cf-pax-table tr:last-child td[b-9g7b0fvulr] { border-bottom: none; }

.cf-pax-name[b-9g7b0fvulr] { display: block; font-weight: 700; text-transform: uppercase; }
.cf-pax-sub[b-9g7b0fvulr] { display: block; font-size: 0.72rem; color: var(--b2b-on-surface-variant); }
.cf-doc[b-9g7b0fvulr] { display: block; direction: ltr; unicode-bidi: isolate; }
.cf-ticket-no[b-9g7b0fvulr] { font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* Dates, phone numbers and identifiers read left-to-right in any locale;
   without the isolate an RTL paragraph reorders "14 Mar 1988" into nonsense. */
.cf-ltr[b-9g7b0fvulr] { direction: ltr; unicode-bidi: isolate; }

/* ── Fare, baggage & conditions ──────────────────────────────────────── */
.cf-fare-chips[b-9g7b0fvulr] { display: flex; gap: 8px; flex-wrap: wrap; }

.cf-bags[b-9g7b0fvulr] { display: flex; flex-direction: column; gap: 8px; }

.cf-bag[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.cf-bag-ico[b-9g7b0fvulr] { font-size: 20px; color: var(--b2b-primary-container); }
.cf-bag-txt[b-9g7b0fvulr] { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.cf-bag-label[b-9g7b0fvulr] { font-size: 0.84rem; font-weight: 600; color: var(--b2b-on-surface); }
.cf-bag-sum[b-9g7b0fvulr] { font-size: 0.75rem; color: var(--b2b-on-surface-variant); }

.cf-extras[b-9g7b0fvulr] { display: flex; flex-direction: column; gap: 6px; }

.cf-extra[b-9g7b0fvulr] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.84rem;
    color: var(--b2b-on-surface);
}

.cf-extra-price[b-9g7b0fvulr] { font-weight: 700; white-space: nowrap; }

.cf-rules[b-9g7b0fvulr] { margin-top: 16px; }

.cf-rules > summary[b-9g7b0fvulr] {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--b2b-primary);
}

.cf-rules-text[b-9g7b0fvulr] {
    margin: 10px 0 0;
    padding: 12px;
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--b2b-on-surface-variant);
    max-height: 260px;
    overflow-y: auto;
}

/* ── Price & payment ─────────────────────────────────────────────────── */
.cf-price-row[b-9g7b0fvulr] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 0.86rem;
    color: var(--b2b-on-surface);
}

.cf-comm[b-9g7b0fvulr] { color: var(--b2b-ok-fg); font-weight: 700; }

.cf-price-total[b-9g7b0fvulr] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--b2b-border);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--b2b-on-surface);
}

.cf-price-note-line[b-9g7b0fvulr] { margin-top: 4px; font-size: 0.72rem; color: var(--b2b-on-surface-variant); }
.cf-per[b-9g7b0fvulr] { font-size: 0.7rem; color: var(--b2b-on-surface-variant); }

.cf-pay-note[b-9g7b0fvulr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--b2b-r);
    background: var(--b2b-info-bg);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--b2b-info-fg);
}

.cf-pay-note .material-symbols-outlined[b-9g7b0fvulr] { font-size: 18px; flex: 0 0 auto; }

.cf-svcfees[b-9g7b0fvulr] { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--b2b-border); }

/* ── Contact ─────────────────────────────────────────────────────────── */
.cf-kv[b-9g7b0fvulr] { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.cf-kv + .cf-kv[b-9g7b0fvulr] { border-top: 1px solid var(--b2b-border); }
.cf-kv-lbl[b-9g7b0fvulr] { font-size: 0.76rem; color: var(--b2b-on-surface-variant); }
.cf-kv-val[b-9g7b0fvulr] { font-size: 0.84rem; font-weight: 600; color: var(--b2b-on-surface); text-align: end; word-break: break-word; }
.cf-kv-note[b-9g7b0fvulr] { margin: 12px 0 0; font-size: 0.72rem; color: var(--b2b-on-surface-variant); }

/* ── What happens next ───────────────────────────────────────────────── */
.cf-next[b-9g7b0fvulr] { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; }
.cf-next li[b-9g7b0fvulr] { font-size: 0.82rem; line-height: 1.55; color: var(--b2b-on-surface-variant); }
.cf-next strong[b-9g7b0fvulr] { color: var(--b2b-on-surface); }
.cf-next .b2b-link[b-9g7b0fvulr] { font-size: inherit; }

/* ── Empty state (no booking in context) ─────────────────────────────── */
.cf-empty[b-9g7b0fvulr] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    box-shadow: var(--b2b-shadow);
}

.cf-empty > .material-symbols-outlined[b-9g7b0fvulr] { font-size: 28px; color: var(--b2b-info-fg); }
.cf-empty-title[b-9g7b0fvulr] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--b2b-on-surface); }
.cf-empty-sub[b-9g7b0fvulr] { margin: 2px 0 0; font-size: 0.85rem; color: var(--b2b-on-surface-variant); }
.cf-empty-actions[b-9g7b0fvulr] { display: flex; gap: 10px; margin-inline-start: auto; flex-wrap: wrap; }
.cf-empty .b2b-btn .material-symbols-outlined[b-9g7b0fvulr] { font-size: 18px; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cf-hero[b-9g7b0fvulr] { flex-wrap: wrap; }
    .cf-hero-price[b-9g7b0fvulr] {
        margin-inline-start: 0;
        padding-inline-start: 0;
        border-inline-start: none;
        text-align: start;
        width: 100%;
        padding-top: 12px;
        border-top: 1px solid var(--b2b-border);
    }
}

@media (max-width: 640px) {
    .cf-seg[b-9g7b0fvulr] {
        grid-template-columns: 1fr 1fr;
        row-gap: 10px;
    }
    .cf-seg-airline[b-9g7b0fvulr] { grid-column: 1 / -1; }
    .cf-seg-mid[b-9g7b0fvulr] { grid-column: 1 / -1; order: 3; flex-direction: row; gap: 8px; }
    .cf-seg-mid .cf-seg-rail[b-9g7b0fvulr] { flex: 1; }
    .cf-seg-local[b-9g7b0fvulr] { display: none; }
    .cf-seg-time.end[b-9g7b0fvulr] { order: 4; }
    .cf-bar-link[b-9g7b0fvulr] { margin-inline-start: 0; }
    /* Keep the route on one line at phone widths — the codes are the headline;
       the city names wrap underneath rather than pushing the arrow off. */
    .cf-route[b-9g7b0fvulr] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
    .cf-route-code[b-9g7b0fvulr] { font-size: 1.45rem; }
    .cf-route-plane[b-9g7b0fvulr] { font-size: 24px; }
}

/* ── RTL ─────────────────────────────────────────────────────────────────
   Everything else mirrors from the logical properties above; these three
   glyphs carry a direction of their own and have to be flipped by hand, or
   the page shows a Persian agent an itinerary pointing back the way it came. */
[dir="rtl"] .cf-route-plane[b-9g7b0fvulr],
[dir="rtl"] .cf-bar-link .material-symbols-outlined[b-9g7b0fvulr] { transform: scaleX(-1); }

[dir="rtl"] .cf-seg-rail[b-9g7b0fvulr]::after { transform: translateY(-50%) rotate(-90deg); }
/* /Pages/FlightCloud/FareSelection.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Fare selection — the step between the flight results and the booking wizard.
   Shares the results page's colour + shape language (same primary, radii and
   card chrome) so results → fares → wizard reads as one funnel. The fare cards
   reuse the "booking.com-style" card design that used to live inside the
   results card's "Fare options" tab, now promoted to a full-page grid.
   ─────────────────────────────────────────────────────────────────────────── */

.fs[b-fq2xp93uba] {
    --fs-primary: #0066ff;
    --fs-ink: #111827;
    --fs-muted: #6b7280;
    color: var(--fs-ink);
    font-family: 'Inter', system-ui, sans-serif;
    max-width: 1080px;
    margin: 0 auto;
}

.ic[b-fq2xp93uba] { width: 14px; height: 14px; flex: 0 0 auto; }

/* ─── Header row: back link + price countdown ─── */
.fs-head[b-fq2xp93uba] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.fs-back[b-fq2xp93uba] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--fs-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 0;
    cursor: pointer;
}
.fs-back:hover[b-fq2xp93uba] { color: var(--fs-primary); }
.fs-back .material-symbols-outlined[b-fq2xp93uba] { font-size: 18px; }
.fs-head__timer[b-fq2xp93uba] { min-width: 260px; }

/* LiveCountdown renders bw-timer markup and carries no scoped CSS of its own,
   so this page styles it via ::deep (same treatment as the booking wizard). */
.fs[b-fq2xp93uba]  .bw-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 12px;
    padding: 8px 12px;
}
.fs[b-fq2xp93uba]  .bw-timer__icon { font-size: 26px !important; flex: 0 0 auto; }
.fs[b-fq2xp93uba]  .bw-timer__body { min-width: 0; }
.fs[b-fq2xp93uba]  .bw-timer__label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}
.fs[b-fq2xp93uba]  .bw-timer__value { font-weight: 900; font-variant-numeric: tabular-nums; }
.fs[b-fq2xp93uba]  .bw-timer__value--clock { font-size: 20px; letter-spacing: 0.02em; }
.fs[b-fq2xp93uba]  .bw-timer__sub { font-size: 11px; opacity: 0.9; margin-top: 1px; }
.fs[b-fq2xp93uba]  .bw-timer--price { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.fs[b-fq2xp93uba]  .bw-timer--warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.fs[b-fq2xp93uba]  .bw-timer--danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ─── Title ─── */
.fs-title[b-fq2xp93uba] { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.fs-sub[b-fq2xp93uba] { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--fs-muted); max-width: 640px; }

/* ─── Selected flight summary ─── */
.fs-flight[b-fq2xp93uba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
}
.fs-flight__legs[b-fq2xp93uba] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fs-leg[b-fq2xp93uba] { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fs-leg__route[b-fq2xp93uba] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}
.fs-leg__route .material-symbols-outlined[b-fq2xp93uba] { font-size: 15px; color: var(--fs-primary); }
.fs-leg__meta[b-fq2xp93uba] { font-size: 13px; font-weight: 600; color: #374151; }
.fs-leg__flights[b-fq2xp93uba] { font-size: 12px; font-weight: 600; color: var(--fs-muted); }
.fs-flight__toggle[b-fq2xp93uba] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 13px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.14s, color 0.14s;
}
.fs-flight__toggle:hover[b-fq2xp93uba] { border-color: var(--fs-primary); color: var(--fs-primary); }
.fs-flight__toggle .material-symbols-outlined[b-fq2xp93uba] { font-size: 18px; }

.fs-itinerary[b-fq2xp93uba] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

/* ─── Fare option cards ─── */
.fs-fares[b-fq2xp93uba] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 14px;
    align-items: stretch;
}
.fs-fare[b-fq2xp93uba] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px -16px rgba(15, 23, 42, 0.4);
    transition: border-color 0.14s, box-shadow 0.14s;
}
.fs-fare:hover[b-fq2xp93uba] { border-color: var(--fs-primary); box-shadow: 0 6px 18px -12px rgba(0, 102, 255, 0.5); }
.fs-fare--best[b-fq2xp93uba] { border-color: #a7f3d0; background: linear-gradient(180deg, #f0fdf6 0%, #ffffff 45%); }
.fs-fare__head[b-fq2xp93uba] { display: flex; align-items: center; gap: 8px; }
.fs-fare__name[b-fq2xp93uba] { font-size: 15px; font-weight: 800; color: var(--fs-ink); line-height: 1.25; }
.fs-fare__tag[b-fq2xp93uba] {
    margin-inline-start: auto;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #047857;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.fs-fare__chips[b-fq2xp93uba] { display: flex; flex-wrap: wrap; gap: 5px; }
.fs-mini[b-fq2xp93uba] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 1px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.fs-mini--good[b-fq2xp93uba] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.fs-mini--warn[b-fq2xp93uba] { color: #b45309; background: #fffbeb; border-color: #fde68a; }

/* Checked-baggage badge — mirrors the results card's .fr-bagtag so the same
   allowance carries the same weight and colour across both steps. */
.fs-bagtag[b-fq2xp93uba] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: help;
}
.fs-bagtag .ic[b-fq2xp93uba] { width: 13px; height: 13px; flex: 0 0 auto; }
.fs-bagtag--ok[b-fq2xp93uba] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.fs-bagtag--fee[b-fq2xp93uba] { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.fs-bagtag--no[b-fq2xp93uba] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.fs-bagtag--na[b-fq2xp93uba] { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }

/* Facilities list */
.fs-fare__feats[b-fq2xp93uba] { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fs-feat[b-fq2xp93uba] { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.fs-feat__ic[b-fq2xp93uba] { display: inline-flex; flex: 0 0 auto; }
.fs-feat__ic .ic[b-fq2xp93uba] { width: 15px; height: 15px; }
.fs-feat__txt[b-fq2xp93uba] { line-height: 1.2; }
.fs-feat--ok[b-fq2xp93uba] { color: #15803d; }
.fs-feat--ok .fs-feat__ic[b-fq2xp93uba] { color: #16a34a; }
.fs-feat--fee[b-fq2xp93uba] { color: #b45309; }
.fs-feat--fee .fs-feat__ic[b-fq2xp93uba] { color: #d97706; }
.fs-feat--no[b-fq2xp93uba] { color: #9ca3af; }
.fs-feat--no .fs-feat__txt[b-fq2xp93uba] { text-decoration: line-through; }

/* Price + CTA */
.fs-fare__foot[b-fq2xp93uba] { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.fs-fare__price[b-fq2xp93uba] { font-size: 20px; font-weight: 900; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-fare__price--changed[b-fq2xp93uba] { color: #b45309; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fs-fare__old[b-fq2xp93uba] { font-size: 13px; font-weight: 600; color: #9ca3af; text-decoration: line-through; }
.fs-fare__note[b-fq2xp93uba] { font-size: 11px; font-weight: 700; color: #b45309; line-height: 1.3; }
.fs-fare__fee[b-fq2xp93uba] { font-size: 11px; font-weight: 600; color: #6b7280; }
.fs-fare__comm[b-fq2xp93uba] { font-size: 12px; font-weight: 700; color: #047857; }
.fs-fare__select[b-fq2xp93uba] {
    border: none;
    background: var(--fs-primary);
    color: #ffffff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.14s, transform 0.1s;
}
.fs-fare__select:hover[b-fq2xp93uba] { filter: brightness(1.07); }
.fs-fare__select:active[b-fq2xp93uba] { transform: scale(0.98); }
.fs-fare__select:disabled[b-fq2xp93uba] { filter: grayscale(0.3) brightness(0.95); cursor: progress; }
.fs-fare__error[b-fq2xp93uba] {
    font-size: 12px;
    font-weight: 700;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 6px 9px;
    line-height: 1.35;
}

/* ─── Empty / guard state ─── */
.fs-empty[b-fq2xp93uba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}
.fs-empty__art[b-fq2xp93uba] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    margin-bottom: 16px;
}
.fs-empty__art .material-symbols-outlined[b-fq2xp93uba] { font-size: 42px; color: var(--fs-primary); }
.fs-empty__title[b-fq2xp93uba] { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #111827; }
.fs-empty__text[b-fq2xp93uba] { margin: 0 0 20px; max-width: 420px; font-size: 14px; line-height: 1.55; color: #6b7280; }
.fs-btn[b-fq2xp93uba] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
}
.fs-btn--primary[b-fq2xp93uba] { border-color: var(--fs-primary); background: var(--fs-primary); color: #ffffff; }
.fs-btn--primary:hover[b-fq2xp93uba] { filter: brightness(1.07); }
.fs-btn .material-symbols-outlined[b-fq2xp93uba] { font-size: 18px; }

@media (max-width: 640px) {
    .fs-head[b-fq2xp93uba] { flex-direction: column; }
    .fs-head__timer[b-fq2xp93uba] { width: 100%; min-width: 0; }
    .fs-flight[b-fq2xp93uba] { flex-direction: column; align-items: stretch; }
    .fs-flight__toggle[b-fq2xp93uba] { justify-content: center; }
}
/* /Pages/FlightCloud/FlightDetail.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Flight detail — mirrors the HotelCloud HotelDetail page (hd-*): title block,
   white cards and a sticky fare widget, so the hotel and flight funnels share
   one design pattern. B2B addition: a commission row in the fare widget.
   ─────────────────────────────────────────────────────────────────────────── */

.fd[b-vukhtgq439] {
    --fd-primary: #0066ff;
    --fd-ink: #111827;
    --fd-muted: #6b7280;
    color: var(--fd-ink);
    font-family: 'Inter', system-ui, sans-serif;
}

.fd-empty[b-vukhtgq439] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 18px;
    font-size: 14px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
}
.fd-empty__link[b-vukhtgq439] { color: var(--fd-primary); font-weight: 700; }

.fd-back[b-vukhtgq439] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    color: var(--fd-primary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
}
.fd-back:hover[b-vukhtgq439] { text-decoration: underline; }
.fd-back .material-symbols-outlined[b-vukhtgq439] { font-size: 18px; }

/* ─── Title block ─── */
.fd-title[b-vukhtgq439] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fd-title__name[b-vukhtgq439] { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.fd-title__meta[b-vukhtgq439] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-chip[b-vukhtgq439] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 4px 9px;
    border-radius: 6px;
}
.fd-chip--good[b-vukhtgq439] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.fd-chip--warn[b-vukhtgq439] { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.fd-chip--info[b-vukhtgq439] { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }

/* ─── Layout: itinerary main + sticky fare widget ─── */
.fd-layout[b-vukhtgq439] { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 960px) { .fd-layout[b-vukhtgq439] { grid-template-columns: 1fr 340px; } }
.fd-main[b-vukhtgq439] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.fd-card[b-vukhtgq439] { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 18px 20px; }
.fd-h2[b-vukhtgq439] {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 800;
}
.fd-h2__leg[b-vukhtgq439] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fd-primary);
    background: rgba(0, 102, 255, 0.08);
    padding: 3px 9px;
    border-radius: 999px;
}
.fd-h2__route[b-vukhtgq439] { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.fd-h2__route .material-symbols-outlined[b-vukhtgq439] { font-size: 17px; color: var(--fd-muted); }
.fd-h2__date[b-vukhtgq439] { font-size: 13px; font-weight: 600; color: var(--fd-muted); }
.fd-h2__stops[b-vukhtgq439] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 5px;
}
.fd-h2__stops--direct[b-vukhtgq439] { color: #059669; background: #ecfdf5; }

/* ─── Segment rows ─── */
.fd-seg[b-vukhtgq439] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px dashed #eef0f3;
}
.fd-seg:first-of-type[b-vukhtgq439] { border-top: none; }
.fd-seg__icon[b-vukhtgq439] { font-size: 20px; color: var(--fd-primary); flex: 0 0 auto; }
.fd-seg__carrier[b-vukhtgq439] { display: flex; flex-direction: column; gap: 1px; flex: 0 0 150px; min-width: 0; }
.fd-seg__carrier strong[b-vukhtgq439] { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-seg__carrier span[b-vukhtgq439] { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
.fd-seg__times[b-vukhtgq439] { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.fd-seg__point[b-vukhtgq439] { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.fd-seg__point strong[b-vukhtgq439] { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fd-seg__point span[b-vukhtgq439] { font-size: 11.5px; color: var(--fd-muted); white-space: nowrap; }
.fd-seg__path[b-vukhtgq439] { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 30px; }
.fd-seg__dur[b-vukhtgq439] { font-size: 11px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
.fd-seg__line[b-vukhtgq439] { width: 100%; height: 1px; background: #d1d5db; }

@media (max-width: 640px) {
    .fd-seg[b-vukhtgq439] { flex-wrap: wrap; }
    .fd-seg__carrier[b-vukhtgq439] { flex-basis: calc(100% - 34px); }
    .fd-seg__times[b-vukhtgq439] { flex-basis: 100%; }
}

/* ─── Sticky fare widget (mirrors hd-widget) ─── */
.fd-aside[b-vukhtgq439] { position: sticky; top: 16px; }
.fd-widget[b-vukhtgq439] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.5);
}
.fd-widget__title[b-vukhtgq439] { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.fd-widget__dates[b-vukhtgq439] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #4b5563;
    margin-bottom: 14px;
}
.fd-widget__dates .material-symbols-outlined[b-vukhtgq439] { font-size: 18px; color: var(--fd-primary); }
.fd-widget__lines[b-vukhtgq439] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #f3f4f6;
    margin-bottom: 12px;
}
.fd-widget__row[b-vukhtgq439] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
.fd-widget__row--comm[b-vukhtgq439] { color: #047857; font-weight: 800; }
/* Emphasised payable-price strip, matching the results card's Price detail. */
.fd-widget__total[b-vukhtgq439] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 102, 255, 0.03));
    border: 1px solid rgba(0, 102, 255, 0.18);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.fd-widget__total span:first-child[b-vukhtgq439] { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fd-primary); }
.fd-widget__total span:last-child[b-vukhtgq439] { font-size: 19px; font-weight: 800; color: var(--fd-ink); }
.fd-widget__cta[b-vukhtgq439] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: var(--fd-primary);
    transition: filter 0.15s;
}
.fd-widget__cta:hover[b-vukhtgq439] { filter: brightness(1.06); }
.fd-widget__cta .material-symbols-outlined[b-vukhtgq439] { font-size: 18px; }
.fd-widget__hint[b-vukhtgq439] { margin: 10px 0 0; font-size: 13px; color: var(--fd-muted); line-height: 1.5; }
/* /Pages/FlightCloud/MyReservationDetail.razor.rz.scp.css */
/* ============================================================================
   Flight reservation detail — "Horizon B2B" surface styling. Layers on top of
   the shared b2b.css tokens (cards, chips, buttons, table). Scoped to this
   component. Prefix: rd- (reservation detail).
   ============================================================================ */

.rd-back[b-fc-resdetail] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--b2b-on-surface-variant);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 8px;
    margin-bottom: 16px;
    border-radius: var(--b2b-r);
    transition: background .15s, color .15s;
}
.rd-back:hover[b-fc-resdetail] { background: var(--b2b-container-low); color: var(--b2b-primary); }
.rd-back .material-symbols-outlined[b-fc-resdetail] { font-size: 20px; }

/* ── Loading / alerts ───────────────────────────────────────────────────── */
.rd-loading[b-fc-resdetail] {
    display: flex; align-items: center; gap: 10px;
    padding: 28px; color: var(--b2b-on-surface-variant); font-size: 14px;
}
.rd-loading-sm[b-fc-resdetail] { padding: 14px 0; }
.rd-spinner[b-fc-resdetail] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--b2b-border); border-top-color: var(--b2b-primary);
    animation: rd-spin-b-fc-resdetail .7s linear infinite;
}
@keyframes rd-spin-b-fc-resdetail { to { transform: rotate(360deg); } }

.rd-alert[b-fc-resdetail] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--b2b-r-md); font-size: 13.5px; font-weight: 500;
}
.rd-alert .material-symbols-outlined[b-fc-resdetail] { font-size: 20px; flex: 0 0 auto; }
.rd-alert.info[b-fc-resdetail] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.rd-alert.warn[b-fc-resdetail] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.rd-alert.err[b-fc-resdetail] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.rd-alert.ok[b-fc-resdetail] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.rd-header[b-fc-resdetail] { padding: 20px 24px; margin-bottom: 24px; }
.rd-header-main[b-fc-resdetail] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.rd-header-id[b-fc-resdetail] { display: flex; align-items: center; gap: 16px; }
.rd-status-ico[b-fc-resdetail] {
    width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
}
.rd-status-ico .material-symbols-outlined[b-fc-resdetail] { font-size: 28px; }
.rd-route[b-fc-resdetail] {
    display: flex; align-items: center; gap: 8px;
    font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--b2b-on-surface);
}
.rd-route-arrow[b-fc-resdetail] { font-size: 24px; color: var(--b2b-primary); }
.rd-header-chips[b-fc-resdetail] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rd-meta[b-fc-resdetail] { font-size: 13px; color: var(--b2b-on-surface-variant); }

.rd-actions[b-fc-resdetail] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rd-actions .b2b-btn[b-fc-resdetail] { padding: 8px 14px; font-size: 13px; }
.rd-actions .b2b-btn .material-symbols-outlined[b-fc-resdetail] { font-size: 18px; }
.rd-btn-danger[b-fc-resdetail] { color: var(--b2b-err-fg); border-color: #fca5a5; }
.rd-btn-danger:hover[b-fc-resdetail] { background: var(--b2b-err-fg); color: #fff; border-color: var(--b2b-err-fg); }
.rd-soon[b-fc-resdetail] {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--b2b-container-high); color: var(--b2b-on-surface-variant);
    padding: 1px 5px; border-radius: 999px; margin-inline-start: 2px;
}

.rd-header-alert[b-fc-resdetail] { margin-top: 16px; }
.rd-hold-bar[b-fc-resdetail] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding: 12px 16px; border-radius: var(--b2b-r-md);
    background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); border: 1px solid #fde68a;
}
.rd-hold-bar.soon[b-fc-resdetail] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); border-color: #fca5a5; }
.rd-hold-bar > .material-symbols-outlined[b-fc-resdetail] { font-size: 22px; }
.rd-hold-count[b-fc-resdetail] { min-width: 200px; font-weight: 700; }
.rd-hold-note[b-fc-resdetail] { font-size: 12.5px; flex: 1 1 200px; }

/* ── Layout / cards ─────────────────────────────────────────────────────── */
.rd-grid[b-fc-resdetail] { align-items: start; }
.rd-stack[b-fc-resdetail] { display: flex; flex-direction: column; gap: 24px; }
.rd-card-body[b-fc-resdetail] { padding: 20px 24px; }

.b2b-card-head .b2b-section-title[b-fc-resdetail] {
    display: flex; align-items: center; gap: 10px; font-size: 16px;
}
.rd-head-ico[b-fc-resdetail] { font-size: 20px; color: var(--b2b-primary); }
.rd-head-ico.rd-ico-ok[b-fc-resdetail] { color: var(--b2b-ok-fg); }
.rd-head-ico.rd-ico-info[b-fc-resdetail] { color: var(--b2b-info-fg); }
.rd-head-sub[b-fc-resdetail] { font-size: 12px; color: var(--b2b-on-surface-variant); }
.rd-btn-sm[b-fc-resdetail] { padding: 7px 12px !important; font-size: 12.5px !important; }
.rd-btn-sm .material-symbols-outlined[b-fc-resdetail] { font-size: 17px; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.rd-table td[b-fc-resdetail], .rd-table th[b-fc-resdetail] { white-space: nowrap; }
.rd-chip-ico[b-fc-resdetail] { font-size: 14px; vertical-align: middle; margin-inline-end: 3px; }
.rd-mono[b-fc-resdetail] { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 12.5px; }
.rd-muted[b-fc-resdetail] { color: var(--b2b-outline); }
.rd-empty-line[b-fc-resdetail] { color: var(--b2b-on-surface-variant); font-size: 13.5px; margin: 0; }

/* ── Extras shop ────────────────────────────────────────────────────────── */
.rd-divider[b-fc-resdetail] { height: 1px; background: var(--b2b-border); margin: 16px 0; }
.rd-loading.rd-seat-status[b-fc-resdetail] { padding: 10px 0 2px; }
.rd-kv[b-fc-resdetail] { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.rd-kv:last-child[b-fc-resdetail] { margin-bottom: 0; }
.rd-label[b-fc-resdetail] { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--b2b-on-surface-variant); }
.rd-value[b-fc-resdetail] { font-size: 13.5px; color: var(--b2b-on-surface); }

/* ── Price & payment ────────────────────────────────────────────────────── */
.rd-price-row[b-fc-resdetail] { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.rd-price-total[b-fc-resdetail] { font-size: 15px; font-weight: 800; }
.rd-price-total span:last-child[b-fc-resdetail] { font-size: 18px; }
.rd-warn-text[b-fc-resdetail] { color: var(--b2b-warn-fg); }
.rd-mt[b-fc-resdetail] { margin-top: 14px; }
.rd-mt-sm[b-fc-resdetail] { margin-top: 6px; }

/* ── Status card ────────────────────────────────────────────────────────── */
.rd-status-reason[b-fc-resdetail] { font-size: 13px; color: var(--b2b-on-surface-variant); margin: 8px 0 0; }
.rd-contact-sub[b-fc-resdetail] { display: block; font-size: 12px; margin-top: 2px; }

/* ── Activity & notifications entry points ──────────────────────────────── */
/* The full feeds open in a dialog; the sidebar keeps only the two
   entry buttons with their counts. */
.rd-feed-actions[b-fc-resdetail] { display: flex; flex-direction: column; gap: 8px; }
.rd-feed-btn[b-fc-resdetail] { justify-content: flex-start; gap: 8px; }
.rd-feed-count[b-fc-resdetail] {
    margin-inline-start: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--b2b-container-high); color: var(--b2b-on-surface-variant);
    font-size: 11px; font-weight: 700;
}
.rd-feed-spinner[b-fc-resdetail] { margin-inline-start: auto; }

/* ── Related tickets ────────────────────────────────────────────────────── */
/* The whole card goes loud when a support reply is waiting: orange ring with
   a slow glow pulse, tinted header, count badge and a warning strip. */
.rd-tickets-card--unread[b-fc-resdetail] {
    border: 2px solid var(--b2b-action);
    animation: rd-tickets-glow-b-fc-resdetail 2s ease-in-out infinite;
}
.rd-tickets-card--unread .b2b-card-head[b-fc-resdetail] { background: #fff7ed; border-start-start-radius: inherit; border-start-end-radius: inherit; }
@keyframes rd-tickets-glow-b-fc-resdetail {
    0%, 100% { box-shadow: 0 0 0 0 rgba(253, 139, 0, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(253, 139, 0, 0); }
}

.rd-ico-unread[b-fc-resdetail] { color: var(--b2b-action) !important; animation: rd-ico-shake-b-fc-resdetail 2s ease-in-out infinite; }
@keyframes rd-ico-shake-b-fc-resdetail {
    0%, 86%, 100% { transform: rotate(0); }
    88% { transform: rotate(-12deg); }
    92% { transform: rotate(10deg); }
    96% { transform: rotate(-6deg); }
}

.rd-unread-badge[b-fc-resdetail] {
    display: inline-block; margin-inline-start: 8px; padding: 3px 10px; border-radius: 999px;
    background: var(--b2b-action); color: #fff; font-size: 11px; font-weight: 800;
    letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle;
}

.rd-unread-strip[b-fc-resdetail] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 24px; background: var(--b2b-action); color: #fff;
    font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.rd-unread-strip .material-symbols-outlined[b-fc-resdetail] { font-size: 18px; flex: 0 0 auto; }

.rd-ticket[b-fc-resdetail] {
    display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: start;
    border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md); padding: 10px 12px;
    background: #fff; cursor: pointer; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s;
    border-inline-start: 4px solid transparent;
}
.rd-ticket.unread[b-fc-resdetail] { background: #fff7ed; border-inline-start-color: var(--b2b-action); }

/* Page-level banner for a support reply the agency hasn't opened yet. */
.rd-ticket-alert[b-fc-resdetail] {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
    padding: 14px 18px; margin-bottom: 12px; cursor: pointer;
    background: #fff7ed; border: 1px solid var(--b2b-action); border-radius: var(--b2b-r-md);
    color: var(--b2b-on-surface); font-size: 13.5px;
    transition: box-shadow .15s;
}
.rd-ticket-alert:hover[b-fc-resdetail] { box-shadow: var(--b2b-shadow); }
.rd-ticket-alert .material-symbols-outlined[b-fc-resdetail] { color: var(--b2b-action); font-size: 22px; flex: 0 0 auto; }
.rd-ticket-alert-text[b-fc-resdetail] {
    flex: 1; min-width: 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-ticket-alert-cta[b-fc-resdetail] {
    flex: 0 0 auto; font-weight: 700; font-size: 12px; color: #fff;
    background: var(--b2b-action); padding: 6px 12px; border-radius: var(--b2b-r);
}
.rd-ticket:last-child[b-fc-resdetail] { margin-bottom: 0; }
.rd-ticket:hover[b-fc-resdetail] { border-color: var(--b2b-primary); box-shadow: var(--b2b-shadow); }
.rd-ticket-top[b-fc-resdetail] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-ticket-num[b-fc-resdetail] { font-size: 12.5px; font-weight: 700; color: var(--b2b-primary); }
.rd-ticket-subj[b-fc-resdetail] { font-size: 13px; color: var(--b2b-on-surface); line-height: 1.35; }
.rd-ticket-date[b-fc-resdetail] { font-size: 11px; color: var(--b2b-outline); }

/* Neutral chip (b2b.css ships only ok/warn/err/info) */
.b2b-chip.neutral[b-fc-resdetail] { background: var(--b2b-container-high); color: var(--b2b-on-surface-variant); }
.b2b-chip .material-symbols-outlined[b-fc-resdetail] { vertical-align: middle; }
.rd-chip-link[b-fc-resdetail] { cursor: pointer; border: none; font: inherit; }
/* /Pages/FlightCloud/PrintTicket.razor.rz.scp.css */
/* ============================================================================
   Flight ticket print studio. Screen: a two-pane editor (toolbar + A4 preview).
   Print: only the A4 document, sized to A4. Uses the shared b2b.css tokens.
   Prefix: tkp- (ticket print).
   ============================================================================ */

.tkp-page[b-unsedscwj4] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.tkp-loading[b-unsedscwj4], .tkp-alert[b-unsedscwj4] {
    display: flex; align-items: center; gap: 10px;
    padding: 28px; color: var(--b2b-on-surface-variant); font-size: 14px;
}
.tkp-alert[b-unsedscwj4] { color: var(--b2b-err-fg); }
.tkp-spinner[b-unsedscwj4] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--b2b-border); border-top-color: var(--b2b-primary);
    animation: tkp-spin-b-unsedscwj4 .7s linear infinite;
}
@keyframes tkp-spin-b-unsedscwj4 { to { transform: rotate(360deg); } }

/* ── Toolbar (screen only) ──────────────────────────────────────────────── */
.tkp-toolbar[b-unsedscwj4] {
    flex: 0 0 320px;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    box-shadow: var(--b2b-shadow);
    padding: 16px;
}
.tkp-toolbar-head[b-unsedscwj4] { display: flex; gap: 8px; margin-bottom: 12px; }
.tkp-back[b-unsedscwj4], .tkp-print[b-unsedscwj4], .tkp-export[b-unsedscwj4] {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--b2b-r); font: inherit; font-weight: 700; font-size: 13px;
    padding: 9px 14px; cursor: pointer; border: 1px solid var(--b2b-border);
}
.tkp-back[b-unsedscwj4] { background: #fff; color: var(--b2b-on-surface-variant); }
.tkp-back:hover[b-unsedscwj4] { color: var(--b2b-primary); border-color: var(--b2b-primary); }
.tkp-export[b-unsedscwj4] { background: #fff; color: var(--b2b-primary); border-color: var(--b2b-primary); margin-inline-start: auto; }
.tkp-export:hover[b-unsedscwj4] { background: var(--b2b-primary); color: #fff; }
.tkp-print[b-unsedscwj4] { background: var(--b2b-action); color: #fff; border-color: var(--b2b-action); }
.tkp-print:hover[b-unsedscwj4] { background: var(--b2b-action-hover); }
.tkp-back .material-symbols-outlined[b-unsedscwj4],
.tkp-print .material-symbols-outlined[b-unsedscwj4],
.tkp-export .material-symbols-outlined[b-unsedscwj4] { font-size: 18px; }

.tkp-group[b-unsedscwj4] { padding: 14px 0; border-top: 1px solid var(--b2b-border); }
.tkp-group:first-of-type[b-unsedscwj4] { border-top: none; padding-top: 0; }
.tkp-group h3[b-unsedscwj4] {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--b2b-on-surface-variant); margin: 0 0 10px;
}
.tkp-group h3 .material-symbols-outlined[b-unsedscwj4] { font-size: 18px; color: var(--b2b-primary); }

.tkp-field-lbl[b-unsedscwj4] { display: block; font-size: 11px; font-weight: 700; color: var(--b2b-on-surface-variant); margin: 8px 0 3px; }
.tkp-mt[b-unsedscwj4] { margin-top: 10px; }
.tkp-input[b-unsedscwj4], .tkp-textarea[b-unsedscwj4] {
    width: 100%; font-family: inherit; font-size: 13px; color: var(--b2b-on-surface);
    border: 1px solid var(--b2b-border); border-radius: var(--b2b-r); padding: 8px 10px;
    background: var(--b2b-container-low); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.tkp-input:focus[b-unsedscwj4], .tkp-textarea:focus[b-unsedscwj4] { background: #fff; border-color: var(--b2b-primary); box-shadow: 0 0 0 3px rgba(0,82,204,.12); }
.tkp-textarea[b-unsedscwj4] { resize: vertical; line-height: 1.5; }
.tkp-input-sm[b-unsedscwj4] { width: auto; min-width: 0; }
.tkp-input-num[b-unsedscwj4] { text-align: end; }
.tkp-hint[b-unsedscwj4] { font-size: 11px; color: var(--b2b-outline); margin: 6px 0 0; line-height: 1.4; }

.tkp-logo-box[b-unsedscwj4] { display: flex; flex-direction: column; gap: 8px; }
.tkp-logo-preview[b-unsedscwj4] { max-width: 100%; max-height: 70px; object-fit: contain; align-self: flex-start;
    border: 1px solid var(--b2b-border); border-radius: var(--b2b-r); padding: 6px; background: #fff; }
.tkp-logo-actions[b-unsedscwj4] { display: flex; gap: 8px; align-items: center; }
.tkp-btn[b-unsedscwj4] {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 12.5px; border-radius: var(--b2b-r); padding: 7px 12px;
}
.tkp-btn .material-symbols-outlined[b-unsedscwj4] { font-size: 17px; }
.tkp-btn-outline[b-unsedscwj4] { border: 1px solid var(--b2b-primary); color: var(--b2b-primary); background: #fff; }
.tkp-btn-outline:hover[b-unsedscwj4] { background: var(--b2b-primary); color: #fff; }
.tkp-btn-text[b-unsedscwj4] { border: none; background: transparent; color: var(--b2b-on-surface-variant); }
.tkp-btn-text:hover[b-unsedscwj4] { color: var(--b2b-primary); }

.tkp-price-row[b-unsedscwj4] { display: grid; grid-template-columns: 1fr 96px 30px; gap: 6px; margin-bottom: 6px; }
.tkp-icon-btn[b-unsedscwj4] { border: none; background: transparent; cursor: pointer; color: var(--b2b-outline); display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.tkp-icon-btn:hover[b-unsedscwj4] { color: var(--b2b-err-fg); background: var(--b2b-err-bg); }
.tkp-icon-btn .material-symbols-outlined[b-unsedscwj4] { font-size: 18px; }

.tkp-term-row[b-unsedscwj4] { display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; align-items: center; margin-bottom: 6px; }
.tkp-term-seg[b-unsedscwj4] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface); }

.tkp-check[b-unsedscwj4] { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; cursor: pointer; }
.tkp-check input[b-unsedscwj4] { width: 16px; height: 16px; accent-color: var(--b2b-primary); cursor: pointer; }

/* ── A4 document ────────────────────────────────────────────────────────── */
.tkp-doc-wrap[b-unsedscwj4] { flex: 1 1 auto; display: flex; justify-content: center; }
.tkp-doc[b-unsedscwj4] {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 8px 40px rgba(15, 23, 42, .18);
    padding: 16mm 16mm 14mm;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    box-sizing: border-box;
    /* Keep the coloured route band / badges when printing. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.tkp-doc-head[b-unsedscwj4] { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--b2b-primary); }
.tkp-brand[b-unsedscwj4] { display: flex; flex-direction: column; gap: 6px; }
.tkp-doc-logo[b-unsedscwj4] { max-height: 56px; max-width: 220px; object-fit: contain; }
.tkp-brand-fallback[b-unsedscwj4] { font-size: 20px; font-weight: 800; color: var(--b2b-primary); }
.tkp-brand-name[b-unsedscwj4] { font-size: 13px; font-weight: 700; color: #334155; }
.tkp-doc-title[b-unsedscwj4] { text-align: end; }
.tkp-doc-title h1[b-unsedscwj4] { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; color: #0f172a; text-transform: uppercase; }
.tkp-doc-meta[b-unsedscwj4] { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: #475569; }
.tkp-doc-meta b[b-unsedscwj4] { color: #94a3b8; font-weight: 700; margin-inline-end: 4px; }

.tkp-route[b-unsedscwj4] { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 12px 0; padding: 12px 16px; border-radius: 12px;
    background: linear-gradient(135deg, #003d9b 0%, #0052cc 100%); color: #fff; }
.tkp-route-ends[b-unsedscwj4] { display: flex; align-items: center; gap: 12px; }
.tkp-route-code[b-unsedscwj4] { font-size: 26px; font-weight: 800; letter-spacing: 0.02em; }
.tkp-route-ends .material-symbols-outlined[b-unsedscwj4] { font-size: 22px; opacity: .85; }
.tkp-route-sub[b-unsedscwj4] { text-align: end; font-size: 11px; opacity: .95; }
.tkp-route-type[b-unsedscwj4] { display: block; margin-top: 3px; font-weight: 700; opacity: .9; }

.tkp-sec[b-unsedscwj4] { margin-top: 12px; break-inside: avoid; }
.tkp-sec h2[b-unsedscwj4] { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--b2b-primary);
    margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; }

.tkp-table[b-unsedscwj4] { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.tkp-table th[b-unsedscwj4] { text-align: start; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: #94a3b8; padding: 4px 8px; border-bottom: 1px solid #e2e8f0; }
.tkp-table td[b-unsedscwj4] { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }

.tkp-leg[b-unsedscwj4] { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; break-inside: avoid; }
.tkp-leg-head[b-unsedscwj4] { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed #e2e8f0; }
.tkp-leg-title[b-unsedscwj4] { font-size: 12px; font-weight: 800; color: #0f172a; }
.tkp-leg-meta[b-unsedscwj4] { font-size: 10px; color: #64748b; }

.tkp-seg[b-unsedscwj4] { display: grid; grid-template-columns: 1.4fr 1fr auto 1fr; gap: 12px; align-items: center; padding: 6px 0; }
.tkp-seg + .tkp-seg[b-unsedscwj4] { border-top: 1px solid #f1f5f9; }
.tkp-seg-carrier[b-unsedscwj4] { display: flex; gap: 8px; align-items: flex-start; }
.tkp-airline-badge[b-unsedscwj4] { flex: 0 0 auto; min-width: 34px; height: 26px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--b2b-primary); color: #fff; border-radius: 5px; font-weight: 800; font-size: 11px; }
.tkp-airline-name[b-unsedscwj4] { font-size: 11px; font-weight: 700; color: #0f172a; }
.tkp-flight-no[b-unsedscwj4] { font-size: 10px; color: #64748b; }
.tkp-op[b-unsedscwj4] { font-size: 9.5px; color: #b45309; font-weight: 600; }

.tkp-seg-point[b-unsedscwj4] { display: flex; flex-direction: column; gap: 1px; }
.tkp-seg-point-end[b-unsedscwj4] { text-align: end; }
.tkp-seg-time[b-unsedscwj4] { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.tkp-seg-date[b-unsedscwj4] { font-size: 9.5px; color: #64748b; }
.tkp-seg-apt[b-unsedscwj4] { font-size: 10px; color: #334155; }
.tkp-seg-place[b-unsedscwj4] { font-size: 9.5px; color: #64748b; }
.tkp-seg-term[b-unsedscwj4] { font-size: 9.5px; font-weight: 700; color: var(--b2b-primary); }
.tkp-seg-mid[b-unsedscwj4] { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; }
.tkp-seg-dur[b-unsedscwj4] { font-size: 9.5px; color: #64748b; font-weight: 700; }
.tkp-seg-rail[b-unsedscwj4] { width: 100%; height: 2px; background: #cbd5e1; border-radius: 2px; position: relative; }
.tkp-seg-rail[b-unsedscwj4]::after { content: "✈"; position: absolute; right: -2px; top: -8px; font-size: 10px; color: var(--b2b-primary); }
.tkp-seg-utc[b-unsedscwj4] { font-size: 8px; color: #94a3b8; letter-spacing: 0.06em; }

.tkp-layover[b-unsedscwj4] { font-size: 10px; font-weight: 600; color: #64748b; background: #f8fafc; border-radius: 6px; padding: 5px 10px; margin: 4px 0; }

.tkp-two[b-unsedscwj4] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tkp-half[b-unsedscwj4] { margin-top: 12px; }
.tkp-list[b-unsedscwj4] { margin: 0; padding-inline-start: 16px; }
.tkp-list li[b-unsedscwj4] { font-size: 10.5px; color: #334155; margin-bottom: 3px; }
.tkp-muted[b-unsedscwj4] { font-size: 10.5px; color: #64748b; margin: 0; }
.tkp-rules-text[b-unsedscwj4] { font-size: 10px; color: #64748b; margin: 6px 0 0; line-height: 1.5; }

.tkp-price-table[b-unsedscwj4] { width: 100%; border-collapse: collapse; font-size: 11px; max-width: 320px; margin-inline-start: auto; }
.tkp-price-table td[b-unsedscwj4] { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; }
.tkp-amt[b-unsedscwj4] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkp-price-total td[b-unsedscwj4] { border-top: 2px solid #0f172a; border-bottom: none; font-weight: 800; font-size: 13px; color: #0f172a; padding-top: 8px; }

.tkp-doc-foot[b-unsedscwj4] { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; break-inside: avoid; }
.tkp-foot-block h3[b-unsedscwj4] { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 4px; }
.tkp-foot-block p[b-unsedscwj4] { font-size: 9.5px; color: #64748b; white-space: pre-wrap; line-height: 1.6; margin: 0; }
.tkp-foot-note[b-unsedscwj4] { margin-top: 10px; font-size: 10px; color: #334155; white-space: pre-wrap; padding: 8px 10px; background: #f8fafc; border-radius: 6px; }
.tkp-foot-brand[b-unsedscwj4] { margin-top: 12px; text-align: center; font-size: 9px; color: #94a3b8; }

@media (max-width: 1100px) {
    .tkp-page[b-unsedscwj4] { flex-direction: column; align-items: stretch; }
    .tkp-toolbar[b-unsedscwj4] { position: static; flex-basis: auto; max-height: none; width: 100%; }
    .tkp-doc-wrap[b-unsedscwj4] { overflow-x: auto; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .tkp-toolbar[b-unsedscwj4] { display: none !important; }
    .tkp-page[b-unsedscwj4] { display: block; gap: 0; }
    .tkp-doc-wrap[b-unsedscwj4] { display: block; }
    .tkp-doc[b-unsedscwj4] {
        /* @page margin is 0, so the document owns its own edge margin here. */
        width: auto; min-height: 0; box-shadow: none; margin: 0;
        padding: 14mm 14mm 12mm;
    }
    .tkp-leg[b-unsedscwj4], .tkp-sec[b-unsedscwj4], .tkp-doc-foot[b-unsedscwj4], .tkp-two[b-unsedscwj4] { break-inside: avoid; }
}
/* /Pages/FlightCloud/ReservationDetail/ReservationExtras.razor.rz.scp.css */
/* Flight reservation detail — extras and the seat map.
   Shares the reservation page's CSS scope (b-fc-resdetail, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in MyReservationDetail.razor.css. */

/* Extras table: long ancillary descriptions ("ADDITIONAL BAGGAGE AllowedWeight - 23KG")
   wrap instead of pushing the price column out of the card; the wrap div still
   scroll-guards narrow viewports. */
.rd-extras-table[b-fc-resdetail] { table-layout: auto; }
.rd-extras-table .rd-extras-desc[b-fc-resdetail] { white-space: normal; overflow-wrap: anywhere; min-width: 180px; }
.rd-end[b-fc-resdetail] { text-align: end !important; }
.rd-inline-ico[b-fc-resdetail] { font-size: 16px; vertical-align: middle; margin-inline-end: 4px; color: var(--b2b-on-surface-variant); }
.rd-total-row td[b-fc-resdetail] { border-top: 1px solid var(--b2b-border); border-bottom: none !important; font-weight: 600; }
.rd-shop-title[b-fc-resdetail] { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.rd-shop-note[b-fc-resdetail] { font-size: 12.5px; color: var(--b2b-on-surface-variant); margin: 0 0 10px; }
.rd-shop-pax[b-fc-resdetail] { font-weight: 700; font-size: 13px; margin: 12px 0 4px; }
.rd-check[b-fc-resdetail] {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--b2b-r);
    cursor: pointer; transition: background .12s;
}
.rd-check:hover[b-fc-resdetail] { background: var(--b2b-container-low); }
.rd-check input[b-fc-resdetail] { width: 17px; height: 17px; accent-color: var(--b2b-primary); cursor: pointer; }
.rd-check-desc[b-fc-resdetail] { flex: 1 1 auto; font-size: 13.5px; }
.rd-check-price[b-fc-resdetail] { font-size: 13.5px; }
.rd-shop-actions[b-fc-resdetail] { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; }
.rd-shop-total[b-fc-resdetail] { font-size: 13px; }
.rd-shop-wallet-warn[b-fc-resdetail] { margin-top: 12px; }

/* ── Seat map ───────────────────────────────────────────────────────────── */
.rd-seat-legs[b-fc-resdetail] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rd-seat-status[b-fc-resdetail] { margin: 10px 0 2px; }
.rd-seat-assign[b-fc-resdetail] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; font-size: 13px; }
.rd-seat-cur[b-fc-resdetail] { margin-inline-start: auto; font-size: 11.5px; }
.rd-select[b-fc-resdetail] {
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface);
    border: 1px solid var(--b2b-border); border-radius: var(--b2b-r); padding: 7px 10px; background: #fff; cursor: pointer; outline: none;
}
.rd-select:focus[b-fc-resdetail] { border-color: var(--b2b-primary); }
.rd-seatmap[b-fc-resdetail] { overflow-x: auto; padding: 4px 0; }
.rd-seat-row[b-fc-resdetail] { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.rd-seat-rownum[b-fc-resdetail] { width: 26px; font-size: 12px; color: var(--b2b-outline); text-align: end; }
.rd-seat-aisle[b-fc-resdetail] { width: 16px; }
.rd-seat-gap[b-fc-resdetail] { width: 44px; }
.rd-seat-col[b-fc-resdetail] { line-height: 1; font-weight: 700; }
.rd-seat-price[b-fc-resdetail] { font-size: .5rem; line-height: 1; margin-top: 1px; color: #4B5563; }
.rd-seat-legend[b-fc-resdetail] { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--b2b-on-surface-variant); }
.rd-pb-chip[b-fc-resdetail] { margin-inline-start: 6px; font-size: 10px; }
/* /Pages/FlightCloud/ReservationDetail/ReservationFareRules.razor.rz.scp.css */
/* Flight reservation detail — fare, baggage and cancellation rules.
   Shares the reservation page's CSS scope (b-fc-resdetail, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in MyReservationDetail.razor.css. */

/* ── Key/value + fare ───────────────────────────────────────────────────── */
.rd-fare-chips[b-fc-resdetail] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rd-kv-grid[b-fc-resdetail] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 560px) { .rd-kv-grid[b-fc-resdetail] { grid-template-columns: 1fr 1fr; }
}
.rd-rules[b-fc-resdetail] { margin-top: 8px; }
.rd-rules-text[b-fc-resdetail] { font-size: 12.5px; color: var(--b2b-on-surface-variant); margin: 4px 0 0; line-height: 1.5; }

/* ── Baggage ────────────────────────────────────────────────────────────── */
.rd-bag[b-fc-resdetail] { margin-top: 14px; }
.rd-bag-list[b-fc-resdetail] { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rd-bag-row[b-fc-resdetail] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md);
    background: var(--b2b-container-low);
}
.rd-bag-ico[b-fc-resdetail] { font-size: 20px; color: var(--b2b-primary); flex: 0 0 auto; }
.rd-bag-txt[b-fc-resdetail] { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.rd-bag-label[b-fc-resdetail] { font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }
.rd-bag-sum[b-fc-resdetail] { font-size: 12px; color: var(--b2b-on-surface-variant); }
/* /Pages/FlightCloud/ReservationDetail/ReservationItinerary.razor.rz.scp.css */
/* Flight reservation detail — the itinerary.
   Shares the reservation page's CSS scope (b-fc-resdetail, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in MyReservationDetail.razor.css. */

/* ── Itinerary ──────────────────────────────────────────────────────────── */
.rd-leg[b-fc-resdetail] { border: 1px solid var(--b2b-border); border-radius: var(--b2b-r-md); padding: 16px; margin-bottom: 14px; }
.rd-leg:last-child[b-fc-resdetail] { margin-bottom: 0; }
.rd-leg-head[b-fc-resdetail] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--b2b-border);
}
.rd-leg-route[b-fc-resdetail] { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.rd-leg-route .material-symbols-outlined[b-fc-resdetail] { font-size: 20px; color: var(--b2b-primary); }
.rd-leg-label[b-fc-resdetail] {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--b2b-primary-fixed); color: var(--b2b-primary); padding: 2px 8px; border-radius: 999px;
}
.rd-leg-meta[b-fc-resdetail] { font-size: 12px; color: var(--b2b-on-surface-variant); }

.rd-seg[b-fc-resdetail] {
    display: grid; grid-template-columns: 220px 1fr; gap: 20px;
    padding: 12px 0; border-bottom: 1px solid var(--b2b-container-high);
}
.rd-seg:last-child[b-fc-resdetail] { border-bottom: none; }
.rd-seg-carrier[b-fc-resdetail] { display: flex; gap: 10px; align-items: flex-start; }
.rd-airline-badge[b-fc-resdetail] {
    flex: 0 0 auto; min-width: 40px; height: 30px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--b2b-primary); color: #fff; border-radius: 6px;
    font-weight: 800; font-size: 12px; letter-spacing: 0.03em;
}
.rd-seg-carrier-txt[b-fc-resdetail] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-seg-carrier-txt strong[b-fc-resdetail] { font-size: 13.5px; color: var(--b2b-on-surface); }
.rd-seg-sub[b-fc-resdetail] { font-size: 12px; color: var(--b2b-on-surface-variant); }
.rd-seg-op[b-fc-resdetail] { font-size: 11px; color: var(--b2b-action-hover); font-weight: 600; }

.rd-seg-line[b-fc-resdetail] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.rd-pt[b-fc-resdetail] { display: flex; flex-direction: column; gap: 2px; }
.rd-pt-end[b-fc-resdetail] { text-align: end; align-items: flex-end; }
.rd-pt-time[b-fc-resdetail] { font-size: 18px; font-weight: 800; color: var(--b2b-on-surface); line-height: 1.1; }
.rd-pt-code[b-fc-resdetail] { font-size: 12px; font-weight: 600; color: var(--b2b-on-surface); }
.rd-pt-airport[b-fc-resdetail] { font-size: 12px; color: var(--b2b-on-surface-variant); }
.rd-pt-place[b-fc-resdetail] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; color: var(--b2b-on-surface-variant);
}
.rd-pt-end .rd-pt-place[b-fc-resdetail] { flex-direction: row-reverse; }
.rd-pt-place .material-symbols-outlined[b-fc-resdetail] { font-size: 13px; color: var(--b2b-outline); }

.rd-pt-mid[b-fc-resdetail] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; min-width: 90px; }
.rd-pt-dur[b-fc-resdetail] { font-size: 11px; color: var(--b2b-on-surface-variant); font-weight: 600; }
.rd-pt-rail[b-fc-resdetail] { display: flex; align-items: center; gap: 4px; color: var(--b2b-primary); width: 100%; }
.rd-pt-rail > span:first-child[b-fc-resdetail], .rd-pt-rail > span:last-child[b-fc-resdetail] { height: 2px; background: var(--b2b-border); flex: 1; border-radius: 2px; }
.rd-pt-rail .material-symbols-outlined[b-fc-resdetail] { font-size: 16px; transform: rotate(90deg); }
.rd-pt-utc[b-fc-resdetail] { font-size: 9.5px; color: var(--b2b-outline); letter-spacing: 0.06em; }

.rd-layover[b-fc-resdetail] {
    display: flex; align-items: center; gap: 6px;
    margin: 4px 0 4px 0; padding: 8px 12px; border-radius: var(--b2b-r);
    background: var(--b2b-container-low); color: var(--b2b-on-surface-variant); font-size: 12px; font-weight: 600;
}
.rd-layover .material-symbols-outlined[b-fc-resdetail] { font-size: 16px; }

@media (max-width: 720px) {
    .rd-seg[b-fc-resdetail] { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Invoice-frozen accounting presentation ───────────────────────────── */
.rd-orig-itin[b-fc-resdetail] { flex-wrap: wrap; }
.rd-orig-leg[b-fc-resdetail] {
    display: inline-block;
    margin-inline-start: 6px;
    font-weight: 600;
    text-decoration: line-through;
    opacity: .8;
    white-space: nowrap;
}
/* /Pages/FlightCloud/ReservationDetail/ReservationPayment.razor.rz.scp.css */
/* Flight reservation detail — price and payment.
   Shares the reservation page's CSS scope (b-fc-resdetail, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in MyReservationDetail.razor.css. */

.rd-comm[b-fc-resdetail] { color: var(--b2b-ok-fg); font-weight: 700; }
.rd-pay-note[b-fc-resdetail] {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 14px; padding: 10px 12px; border-radius: var(--b2b-r);
    background: var(--b2b-container-low); font-size: 12px; color: var(--b2b-on-surface-variant); line-height: 1.45;
}
.rd-pay-note .material-symbols-outlined[b-fc-resdetail] { font-size: 18px; color: var(--b2b-primary); flex: 0 0 auto; }

/* Informational service fees (change / cancellation / void) on the price card. */
.rd-svcfees-title[b-fc-resdetail] {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}
.rd-svcfees-per[b-fc-resdetail] {
    font-size: 11px;
    opacity: .55;
}
.rd-svcfees-note[b-fc-resdetail] {
    margin-top: 6px;
    font-size: 11px;
    opacity: .6;
}
.rd-adj-refund[b-fc-resdetail] { color: #059669; font-weight: 600; }
.rd-adj-charge[b-fc-resdetail] { color: #b45309; font-weight: 600; }
.rd-adj-total[b-fc-resdetail] { border-block-start: 1px dashed var(--b2b-outline-variant, #e5e7eb); padding-block-start: 6px; }
/* /Pages/FlightCloud/ReservationDetail/ReservationPostBooking.razor.rz.scp.css */
/* Flight reservation detail — post-booking servicing requests.
   Shares the reservation page's CSS scope (b-fc-resdetail, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in MyReservationDetail.razor.css. */

/* ── Post-booking servicing requests card ─────────────────────────────── */
.rd-pbreq[b-fc-resdetail] {
    border: 1px solid var(--b2b-outline-variant, #e5e7eb);
    border-radius: 10px;
    margin-block-end: 8px;
    overflow: hidden;
}
.rd-pbreq.quoted[b-fc-resdetail] { border-color: #f59e0b; }
.rd-pbreq-head[b-fc-resdetail] {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: start;
    color: inherit;
}
.rd-pbreq-head:hover[b-fc-resdetail] { background: var(--b2b-container-low, #f9fafb); }
.rd-pbreq-ico[b-fc-resdetail] { font-size: 20px; color: var(--b2b-primary, #4f46e5); flex-shrink: 0; }
.rd-pbreq-title[b-fc-resdetail] { display: flex; flex-direction: column; gap: 1px; flex: 1; min-inline-size: 0; }
.rd-pbreq-title strong[b-fc-resdetail] { font-size: 13px; }
.rd-pbreq-sub[b-fc-resdetail] { font-size: 11.5px; opacity: .6; }
.rd-pbreq-chev[b-fc-resdetail] { font-size: 18px; opacity: .5; flex-shrink: 0; }
.rd-pbreq-body[b-fc-resdetail] { padding: 4px 12px 12px; border-block-start: 1px dashed var(--b2b-outline-variant, #e5e7eb); }
.rd-pbq[b-fc-resdetail] { display: flex; flex-direction: column; gap: 4px; padding-block-start: 8px; }
.rd-pbq-refund[b-fc-resdetail] { color: #059669; font-weight: 700; }
.rd-pbq-collect[b-fc-resdetail] { color: #b45309; font-weight: 700; }
.rd-pbq-note[b-fc-resdetail] { margin: 6px 0 0; font-size: 12px; opacity: .75; white-space: pre-wrap; }
.rd-pbq-expiry[b-fc-resdetail] {
    display: flex; align-items: center; gap: 6px;
    margin-block-start: 8px; font-size: 12px; color: #b45309; font-weight: 600;
}
.rd-pbq-expiry .material-symbols-outlined[b-fc-resdetail] { font-size: 16px; }
.rd-pbq-actions[b-fc-resdetail] { display: flex; gap: 8px; margin-block-start: 10px; flex-wrap: wrap; }
/* /Pages/FlightCloud/ReservationDetail/ReservationTravellers.razor.rz.scp.css */
/* Flight reservation detail — the travellers table.
   Shares the reservation page's CSS scope (b-fc-resdetail, see TAM.AgencyPanel.csproj),
   so the page's rules style it. */
/* /Pages/FlightCloud/Results.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Flight results — restyled to match the HotelCloud results page and the
   Horizon B2B flight-results design. A search-summary bar, a filter sidebar
   (stops / cabin / price / airlines / fare type) and dense flight cards laid
   out as airline · schedule · price. B2B addition: a commission block in each
   card's price column (sell struck through, commission highlighted, net "you
   pay"). Shares the hotel page's colour + shape language for a consistent panel.
   ─────────────────────────────────────────────────────────────────────────── */

.fr[b-fc-results] {
    --fr-primary: #0066ff;
    --fr-ink: #111827;
    --fr-muted: #6b7280;
    color: var(--fr-ink);
    font-family: 'Inter', system-ui, sans-serif;
}

.ic[b-fc-results] { width: 14px; height: 14px; flex: 0 0 auto; }

/* ─── Search context header ───
   The summary chips and the cheapest-fare strip are one visual block. Two
   separate cards cost two borders, two shadows and two 18px margins, and put
   ~300px of chrome between the top of the page and the first flight — on a
   1080px laptop that left exactly one result above the fold. Joined, the strip
   reads as the second row of the same bar. The editor accordion splits them
   again (the wrapper drops --joined), because it belongs directly under the
   button that opened it. */
.fr-headbar[b-fc-results] { margin-bottom: 14px; }
.fr-headbar--joined .fr-summary[b-fc-results] {
    margin-bottom: 0;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid #f1f3f5;
    box-shadow: none;
}
.fr-headbar--joined[b-fc-results]  .fpc {
    border-radius: 0 0 14px 14px;
    border-top: none;
}

.fr-summary[b-fc-results] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 9px 12px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
}
.fr-summary__chips[b-fc-results] { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-summary__chip[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.fr-summary__chip .ic[b-fc-results] { color: var(--fr-primary); }
.fr-summary__edit[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--fr-primary);
    background: rgba(0, 102, 255, 0.06);
    color: var(--fr-primary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 7px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.fr-summary__edit:hover[b-fc-results] { background: rgba(0, 102, 255, 0.12); }
.fr-summary__edit--on[b-fc-results] { background: var(--fr-primary); color: #fff; }
.fr-summary__edit--on .ic[b-fc-results] { color: #fff; }

/* "Change search" accordion: hosts the shared FlightSearchBox below the summary. */
.fr-editor[b-fc-results] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin: 10px 0 0;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
    animation: fr-editor-in-b-fc-results 0.16s ease-out;
}
@keyframes fr-editor-in-b-fc-results {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── State blocks ─── */
.fr-state[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 18px;
    font-size: 14px;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}
.fr-state--error[b-fc-results] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.fr-state--empty[b-fc-results] { color: #475569; justify-content: center; }

/* ─── Animated "searching live fares" header ─── */
.fr-loading[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 16px;
}
.fr-loading__plane[b-fc-results] {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fr-loading__plane[b-fc-results]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #dbe4ff;
    border-top-color: var(--fr-primary);
    animation: fr-spin-b-fc-results 0.95s linear infinite;
}
.fr-loading__icon[b-fc-results] {
    font-size: 24px;
    color: var(--fr-primary);
    transform: rotate(45deg);
    animation: fr-plane-bob-b-fc-results 1.8s ease-in-out infinite;
}
@keyframes fr-spin-b-fc-results { to { transform: rotate(360deg); } }
@keyframes fr-plane-bob-b-fc-results {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50% { transform: rotate(45deg) translate(2px, -2px); }
}
.fr-loading__title[b-fc-results] { font-size: 16px; font-weight: 800; color: #111827; }
.fr-loading__sub[b-fc-results] { font-size: 13px; color: #4b5563; margin-top: 2px; }

/* ─── Empty / error state cards ─── */
.fr-empty[b-fc-results] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 24px 38px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 24px 60px -42px rgba(15, 23, 42, 0.5);
}
.fr-empty__art[b-fc-results] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, #eff6ff 0%, #e0e7ff 100%);
    border: 1px solid #dbeafe;
    margin-bottom: 16px;
}
.fr-empty__art .material-symbols-outlined[b-fc-results] { font-size: 42px; color: var(--fr-primary); }
.fr-empty__art--error[b-fc-results] { background: radial-gradient(circle at 50% 35%, #fef2f2 0%, #fee2e2 100%); border-color: #fecaca; }
.fr-empty__art--error .material-symbols-outlined[b-fc-results] { color: #ef4444; }
.fr-empty__title[b-fc-results] { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #111827; }
.fr-empty__text[b-fc-results] { margin: 0; max-width: 420px; font-size: 14px; line-height: 1.55; color: #6b7280; }
.fr-empty__hint[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
}
.fr-empty__hint .material-symbols-outlined[b-fc-results] { font-size: 18px; flex: 0 0 auto; }
.fr-empty__actions[b-fc-results] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

.fr-btn[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.12s;
}
.fr-btn .material-symbols-outlined[b-fc-results] { font-size: 18px; }
.fr-btn:hover[b-fc-results] { background: #f3f4f6; border-color: #9ca3af; }
.fr-btn--primary[b-fc-results] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: transparent;
    box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7);
}
.fr-btn--primary:hover[b-fc-results] { filter: brightness(1.05); transform: translateY(-1px); background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }

/* ─── Layout ─── */
.fr-layout[b-fc-results] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .fr-layout[b-fc-results] { grid-template-columns: 1fr; }
}
.fr-check__box .ic[b-fc-results] { width: 14px; height: 14px; }

/* ─── Toolbar ─── */
.fr-main[b-fc-results] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fr-toolbar[b-fc-results] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fr-toolbar__left[b-fc-results] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fr-count[b-fc-results] { font-size: 14px; font-weight: 700; color: #374151; }

/* Applied-filter chips. Each removes its own filter; they live next to the
   result count because "16 flights" and "why 16" are one thought. Quiet by
   design — they are state, not an action to take. */
.fr-chip[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 210px;
    padding: 4px 8px 4px 11px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f0f6ff;
    color: #1d4ed8;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.14s, border-color 0.14s;
}
.fr-chip > span:first-child[b-fc-results] { overflow: hidden; text-overflow: ellipsis; }
.fr-chip:hover[b-fc-results] { background: #e0edff; border-color: #bfdbfe; }
.fr-chip__x[b-fc-results] { font-size: 15px; line-height: 1; color: #60a5fa; flex: 0 0 auto; }
.fr-chip:hover .fr-chip__x[b-fc-results] { color: #1d4ed8; }
.fr-chip--clear[b-fc-results] {
    padding: 4px 11px;
    background: transparent;
    border-color: transparent;
    color: var(--fr-muted);
    text-decoration: underline;
}
.fr-chip--clear:hover[b-fc-results] { background: #f3f4f6; border-color: transparent; color: var(--fr-ink); }

/* Segmented sort. Three or four options do not deserve a dropdown: the choice
   in force is readable without opening anything, and switching costs one click
   instead of two. */
.fr-seg[b-fc-results] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    gap: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f6f7f9;
}
.fr-seg__btn[b-fc-results] {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fr-muted);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.14s, color 0.14s;
}
.fr-seg__btn:hover[b-fc-results] { color: var(--fr-ink); }
.fr-seg__btn--on[b-fc-results] {
    background: #ffffff;
    color: var(--fr-ink);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.fr-seg__btn:focus-visible[b-fc-results] { outline: 2px solid var(--fr-primary); outline-offset: 1px; }
/* Direction arrow only carries meaning on the active price segment. */
.fr-seg__dir[b-fc-results] { font-size: 12px; opacity: 0; }
.fr-seg__btn--on .fr-seg__dir[b-fc-results] { opacity: 1; color: var(--fr-primary); }
.fr-logo .ic-plane[b-fc-results] { width: 19px; height: 19px; }
.fr-select .ic[b-fc-results] { width: 15px; height: 15px; }

.fr-loadmore[b-fc-results] { display: flex; justify-content: center; padding: 6px 0 2px; }
.fr-foot__details .ic[b-fc-results] { width: 13px; height: 13px; }
.fr-btn--sm[b-fc-results] { padding: 5px 12px; font-size: 12px; }
.fr-pill .ic[b-fc-results] { width: 15px; height: 15px; }
.fr-bag__ic .ic[b-fc-results] { width: 18px; height: 18px; }
.fr-bag__tag .ic[b-fc-results] { width: 14px; height: 14px; }

/* ─── Loading skeletons (shaped like flight cards) ─── */
.fr-state--bare[b-fc-results] { border: none; background: transparent; padding: 4px 2px 10px; }
.fr-skel[b-fc-results] {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 16px 18px;
    gap: 18px;
}
.fr-skel__cell[b-fc-results] { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.fr-skel__cell--mid[b-fc-results] { flex: 2 1 0; }
.fr-skel__cell--end[b-fc-results] { flex: 1.4 1 0; justify-content: flex-end; }
.fr-skel__blob[b-fc-results] {
    border-radius: 8px;
    background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 50%, #eef1f5 75%);
    background-size: 400% 100%;
    animation: fr-shimmer-b-fc-results 1.3s ease-in-out infinite;
}
.fr-skel__blob--logo[b-fc-results] { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.fr-skel__blob--text[b-fc-results] { width: 110px; height: 14px; }
.fr-skel__blob--time[b-fc-results] { width: 52px; height: 22px; flex: 0 0 auto; }
.fr-skel__blob--line[b-fc-results] { flex: 1 1 auto; height: 3px; }
.fr-skel__blob--price[b-fc-results] { width: 84px; height: 24px; }
.fr-skel__blob--btn[b-fc-results] { width: 92px; height: 38px; border-radius: 10px; }
@keyframes fr-shimmer-b-fc-results {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ─── Partial-results notice ─── */
.fr-notice[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
}
.fr-notice .material-symbols-outlined[b-fc-results] { font-size: 18px; }
.fr-notice__dismiss[b-fc-results] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #1e40af;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.fr-notice__dismiss:hover[b-fc-results] { text-decoration: underline; }
.fr-state__hint[b-fc-results] { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: #92400e; }

/* Screen readers otherwise read the promotion as one more fare attribute.
   A prefix rather than an aria-label, which would replace the operator's words. */
.fr-sr-only[b-fc-results] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



/* ─── Checked-baggage badge ───
   Deliberately a step louder than the neighbouring .fr-mini chips (larger type,
   a bag glyph, a filled state colour): the allowance is the detail agents are
   asked for most, and it has to be readable while scanning a list of cards. */
.fr-bagtag[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: help;
}
.fr-bagtag .ic[b-fc-results] { width: 13px; height: 13px; flex: 0 0 auto; }
.fr-bagtag--ok[b-fc-results] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.fr-bagtag--fee[b-fc-results] { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.fr-bagtag--no[b-fc-results] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.fr-bagtag--na[b-fc-results] { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
.fr-feat__ic .ic[b-fc-results] { width: 15px; height: 15px; }
.fr-spinner--sm span[b-fc-results] {
    width: 5px;
    height: 5px;
}
/* /Pages/FlightCloud/ResultsParts/FlightBaggageBadge.razor.rz.scp.css */
/* Flight results — the checked-baggage tag.
   No rules of its own: it shares the results page's CSS scope (b-fc-results,
   see TAM.AgencyPanel.csproj), whose `.ic` and `.fr-bagtag` rules style it. */
/* /Pages/FlightCloud/ResultsParts/FlightBaggagePanel.razor.rz.scp.css */
/* Flight results — the baggage rows of a quote.
   Shares the results page's CSS scope (b-fc-results, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in Results.razor.css. */

/* Baggage cards */
.fr-bags[b-fc-results] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.fr-bag[b-fc-results] {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.fr-bag__ic[b-fc-results] {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    background: rgba(0, 102, 255, 0.08); color: var(--fr-primary);
}
.fr-bag__main[b-fc-results] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fr-bag__label[b-fc-results] { font-size: 13.5px; font-weight: 700; color: #111827; line-height: 1.2; }
.fr-bag__meta[b-fc-results] { font-size: 12px; font-weight: 500; color: #6b7280; line-height: 1.2; }

/* Status tag (right side) */
.fr-bag__tag[b-fc-results] {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto; white-space: nowrap;
    font-size: 12px; font-weight: 700;
    padding: 4px 9px; border-radius: 999px;
}
.fr-bag__tag--ok[b-fc-results] { color: #047857; background: #ecfdf5; }
.fr-bag__tag--fee[b-fc-results] { color: #b45309; background: #fffbeb; }
.fr-bag__tag--na[b-fc-results] { color: #b91c1c; background: #fef2f2; }

/* Left accent per status */
.fr-bag--ok[b-fc-results] { border-inline-start: 3px solid #10b981; }
.fr-bag--fee[b-fc-results] { border-inline-start: 3px solid #f59e0b; }
.fr-bag--na[b-fc-results] { border-inline-start: 3px solid #ef4444; }
.fr-bag--ok .fr-bag__ic[b-fc-results] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.fr-bag--fee .fr-bag__ic[b-fc-results] { background: rgba(245, 158, 11, 0.14); color: #d97706; }
/* /Pages/FlightCloud/ResultsParts/FlightFareOptionPanel.razor.rz.scp.css */
/* Flight results — a card's open panel: price detail, rules and fare conditions.
   Shares the results page's CSS scope (b-fc-results, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in Results.razor.css. */

.fr-panel[b-fc-results] {
    margin: 0 14px 14px;
    padding: 14px 16px;
    border: 1px solid #e9ecf1;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
    animation: fr-editor-in 0.16s ease-out;
}
.fr-panel-state[b-fc-results] { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #475569; }
.fr-panel-state--error[b-fc-results] { color: #b91c1c; }

/* Key/value detail list (pricing + rules) */
.fr-kv[b-fc-results] { display: flex; flex-direction: column; gap: 0; }
.fr-kv--tight[b-fc-results] { margin-top: 10px; }
.fr-kv__row[b-fc-results] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 8px 0;
    border-bottom: 1px dashed #eef0f3;
}
.fr-kv__row:last-child[b-fc-results] { border-bottom: none; }
.fr-kv__label[b-fc-results] { font-size: 13px; color: var(--fr-muted); }
.fr-kv__val[b-fc-results] { font-size: 14px; font-weight: 700; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
.fr-kv__val--good[b-fc-results] { color: #059669; }
.fr-kv__val--muted[b-fc-results] { color: #64748b; font-weight: 600; }

/* Emphasised "you pay" total strip */
.fr-total[b-fc-results] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 102, 255, 0.03));
    border: 1px solid rgba(0, 102, 255, 0.18);
    border-radius: 10px;
}
.fr-total__label[b-fc-results] { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fr-primary); }
.fr-total__val[b-fc-results] { font-size: 20px; font-weight: 800; color: var(--fr-ink); font-variant-numeric: tabular-nums; }

/* Fare-rules status pills */
.fr-rules[b-fc-results] { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-pill[b-fc-results] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700;
    padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
}
.fr-pill--good[b-fc-results] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.fr-pill--bad[b-fc-results] { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.fr-rules-text[b-fc-results] {
    margin: 12px 0 0; padding: 10px 12px;
    font-size: 12.5px; line-height: 1.55; color: #475569;
    background: #f8fafc; border: 1px solid #eef0f3; border-radius: 8px;
}

/* ── Service fees table (informational change/cancel/void fees) ── */
.fr-svcfees[b-fc-results] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--b2b-border, #e2e8f0);
}
.fr-svcfees__hint[b-fc-results] {
    font-size: 11px;
    opacity: .6;
    font-weight: 400;
}
/* /Pages/FlightCloud/ResultsParts/FlightOfferCard.razor.rz.scp.css */
/* Flight results — one itinerary card: schedule, price, promotion marks and the panel links.
   Shares the results page's CSS scope (b-fc-results, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in Results.razor.css. */

/* ─── Flight card (dense, divided cells: airline · schedule · price) ─── */
.fr-card[b-fc-results] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.fr-card:hover[b-fc-results] {
    box-shadow: 0 14px 34px -20px rgba(0, 82, 204, 0.4);
    transform: translateY(-1px);
    border-color: #c7d2e8;
}

/* A pinned card carries a start-edge accent so the promoted block reads as a
   block, without changing the card's own colours or competing with the price.

   Written with the card class doubled so it out-specifies .fr-card:hover — the
   accent used to vanish under the cursor, i.e. the card stopped declaring its
   placement at the exact moment the agent inspected it. #7c3aed rather than
   #a78bfa because a non-text state indicator needs 3:1 against the page, and
   #a78bfa manages 2.58:1. border-inline-start mirrors itself under
   MudRTLProvider, so no [dir="rtl"] twin is needed. */
.fr-card.fr-card--promoted[b-fc-results] {
    border-inline-start: 3px solid #7c3aed;
}
.fr-card.fr-card--promoted:hover[b-fc-results] {
    border-inline-start-color: #7c3aed;
}
/* The accent must not fade in on every re-render that toggles the class —
   during streaming and filtering the bars would animate. */
.fr-card--promoted[b-fc-results] {
    transition-property: box-shadow, transform;
}

/* The promotion tab: a solid tag straddling the card's top edge, pinned to the
   start side. It sits OUTSIDE .fr-card because that clips to its rounded
   corners; the shell gives it room to protrude and paints it over the card. */
.fr-card-shell[b-fc-results] { position: relative; }

.fr-promo-tab[b-fc-results] {
    position: absolute;
    /* Flush with the card's top edge, hanging down into it rather than rising
       above it — so a promoted card takes no more vertical room in the list than
       any other, and the tops of every card in a column still line up. */
    top: 0;
    /* Centred on the card. left/translate rather than a logical inset so it
       stays centred under MudRTLProvider without a mirrored rule. */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 32px);
    min-width: 0;
    padding: 3px 12px 4px;
    border-radius: 0 0 8px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: #7c3aed;
}
.fr-promo-tab__txt[b-fc-results] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Solid fills rather than the four near-identical tints the outlined chip used —
   measured, those collapsed to two perceptibly distinct styles. Every one clears
   4.5:1 against white text. */
.fr-promo-tab--offer[b-fc-results] { background: #7c3aed; }  /* 5.1:1  */
.fr-promo-tab--best[b-fc-results]  { background: #4c1d95; }  /* 11.4:1 */
.fr-promo-tab--reco[b-fc-results]  { background: #6d28d9; }  /* 6.4:1  */
.fr-promo-tab--excl[b-fc-results]  { background: #5b21b6; }  /* 8.2:1  */

/* The placement disclosure: a pin glyph and one word, hanging from the top-start
   corner. Quieter than the campaign tag on purpose — tinted rather than solid —
   because the tag is the advert and this is the footnote saying the platform
   moved the card above cheaper ones. The full sentence it used to carry sat in a
   bar that dominated the card to explain what the word already says; it moves to
   the title so the disclosure is one hover away rather than gone. */
.fr-promo-pin[b-fc-results] {
    position: absolute;
    top: 0;
    inset-inline-start: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 3px;
    border-radius: 0 0 8px 8px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4c1d95;
    background: #ede9fe;
    cursor: help;
}
.fr-promo-pin__ic[b-fc-results] { font-size: 11px; line-height: 1; flex: 0 0 auto; }

/* Both markers hang into the top of the card, so the cell beneath each one takes
   clearance. Measured rather than assumed: the airline block starts near the top
   of its cell rather than sitting centred, so the start-edge pin lands on the
   carrier name at EVERY width — not only once the cells stack. */
.fr-card-shell--pinned .fr-card__row > .fr-cell:first-child[b-fc-results] {
    padding-top: 20px;
}
/* The centred tag hangs over the schedule column, which has room for it — until
   the cells stack, at which point it lands on the carrier name too. */
@media (max-width: 759px) {
    .fr-card-shell--tabbed .fr-card__row > .fr-cell:first-child[b-fc-results] {
        padding-top: 24px;
    }
}
.fr-card__row[b-fc-results] {
    display: flex;
    flex-direction: column;
}
@media (min-width: 760px) {
    .fr-card__row[b-fc-results] { flex-direction: row; align-items: stretch; }
    .fr-card__row > .fr-cell + .fr-cell[b-fc-results] { border-left: 1px solid #eef0f3; }
}
/* Compact by intent. This is an agent desk: a card that reads well one at a
   time but only fits four per screen makes comparing sixteen a scrolling
   exercise. Every value below is the tightest that keeps the money legible. */
.fr-cell[b-fc-results] { padding: 11px 14px; display: flex; min-width: 0; }
@media (max-width: 759px) {
    .fr-cell + .fr-cell[b-fc-results] { border-top: 1px solid #f1f3f5; }
}

/* Left: airline */
.fr-cell--airline[b-fc-results] { flex: 0 0 auto; align-items: center; gap: 10px; }
@media (min-width: 760px) { .fr-cell--airline[b-fc-results] { flex: 1.1 1 0; }
}
.fr-logo[b-fc-results] {
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(0, 82, 204, 0.06);
    border: 1px solid rgba(0, 82, 204, 0.12);
    color: var(--fr-primary);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.fr-logo__img[b-fc-results] { width: 100%; height: 100%; object-fit: contain; padding: 2px; background: #fff; }
.fr-airline-info[b-fc-results] { min-width: 0; }
.fr-airline-name[b-fc-results] { margin: 0; font-size: 14px; font-weight: 800; color: var(--fr-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-airline-sub[b-fc-results] { margin: 1px 0 0; font-size: 12.5px; font-weight: 600; color: var(--fr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fr-airline-cabin[b-fc-results] { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--fr-primary); }

/* Center: schedule */
.fr-cell--sched[b-fc-results] { flex-direction: column; gap: 6px; justify-content: center; }
@media (min-width: 760px) { .fr-cell--sched[b-fc-results] { flex: 2 1 0; }
}
.fr-leg[b-fc-results] { display: flex; align-items: center; gap: 14px; }
.fr-leg__point[b-fc-results] { text-align: center; flex: 0 0 auto; min-width: 46px; }
.fr-leg__time[b-fc-results] { display: block; font-size: 16px; font-weight: 800; color: var(--fr-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fr-leg__code[b-fc-results] { display: block; font-size: 12px; font-weight: 700; color: var(--fr-primary); cursor: help; }
.fr-leg__path[b-fc-results] { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.fr-leg__dur[b-fc-results] { font-size: 12px; color: var(--fr-muted); font-variant-numeric: tabular-nums; }
.fr-leg__line[b-fc-results] { position: relative; width: 100%; height: 1px; background: #d1d5db; display: flex; align-items: center; justify-content: center; }
.fr-leg__dot[b-fc-results] { position: absolute; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.fr-leg__dot--start[b-fc-results] { left: 0; border: 1.5px solid #9ca3af; }
.fr-leg__dot--end[b-fc-results] { right: 0; border: 1.5px solid var(--fr-primary); background: var(--fr-primary); }
.fr-leg__stopdot[b-fc-results] { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #f59e0b; cursor: help; }
.fr-leg__plane[b-fc-results] { width: 14px; height: 14px; color: var(--fr-primary); background: #fff; padding: 0 2px; transform: rotate(90deg); }
.fr-leg__stops[b-fc-results] { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.fr-leg__stops--direct[b-fc-results] { color: #059669; }
.fr-leg__stops--has[b-fc-results] { color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 5px; cursor: help; }

/* Which leg this schedule is, and on what date — only rendered on multi-leg
   itineraries, where a bare pair of times says nothing about the day. */
.fr-leg__date[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fr-muted);
    margin-bottom: -2px;
}
.fr-leg__dir[b-fc-results] {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

/* Next-day arrival. Small, but red and superscripted: it changes the date the
   agent quotes, and it must never be mistaken for part of the time. */
.fr-leg__dayoff[b-fc-results] {
    font-size: 10px;
    font-weight: 800;
    color: #b91c1c;
    vertical-align: super;
    line-height: 0;
    margin-inline-start: 1px;
    cursor: help;
}

/* Right: price + Select */
.fr-cell--price[b-fc-results] { align-items: center; gap: 14px; flex-wrap: wrap; }
@media (min-width: 760px) { .fr-cell--price[b-fc-results] { flex: 1.5 1 0; justify-content: flex-end; }
}
.fr-ptotal[b-fc-results] { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.fr-ptotal__main[b-fc-results] { display: inline-flex; align-items: baseline; gap: 5px; }
/* The payable price is the card's biggest number but NOT its most saturated
   element — the Select CTA is, and two saturated blocks in one cell compete for
   the same fixation. Ink keeps the figure dominant by size and weight alone. */
.fr-ptotal__amt[b-fc-results] { font-size: 20px; font-weight: 900; color: var(--fr-ink); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "from" prefix when the itinerary has several bookable fares. */
.fr-ptotal__from[b-fc-results] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fr-muted); }
/* B2B economics: the traveller sell price struck through above the net, and the
   commission earned below it — same green the price panel uses for commission. */
.fr-ptotal__sell[b-fc-results] {
    font-size: 12px;
    font-weight: 600;
    color: var(--fr-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fr-ptotal__comm[b-fc-results] {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fr-select[b-fc-results] {
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border-radius: 10px;
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
    cursor: pointer;
    transition: filter 0.15s, transform 0.12s;
    white-space: nowrap;
}
.fr-select:hover[b-fc-results] { filter: brightness(1.05); }
.fr-select:active[b-fc-results] { transform: scale(0.97); }
.fr-select:disabled[b-fc-results] { filter: grayscale(0.3) brightness(0.95); cursor: progress; box-shadow: none; }

/* That several fares share these flights and are chosen from on the next step.
   In the price column, not as a wrapped row of its own under the button. */
.fr-ptotal__opts[b-fc-results] { font-size: 11.5px; font-weight: 600; color: var(--fr-muted); white-space: nowrap; }

/* ─── Footer action bar (Rules · Baggage · Commission … Details) ─── */
.fr-details[b-fc-results] { border-top: 1px solid #eef0f3; }
.fr-foot[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Wraps rather than overflowing: the row carries five items now, and five
       uppercase labels do not fit a phone width on one line. */
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 6px 14px;
    background: #f7f8fa;
}
.fr-foot__link[b-fc-results] {
    border: none;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 2px;
    cursor: pointer;
    position: relative;
    transition: color 0.14s;
}
.fr-foot__link--icon[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fr-foot__ic[b-fc-results] { font-size: 14px; }
.fr-foot__link:hover[b-fc-results] { color: var(--fr-primary); }
.fr-foot__link--on[b-fc-results] { color: var(--fr-primary); }
.fr-foot__link--on[b-fc-results]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -7px;
    height: 2px;
    background: var(--fr-primary);
    border-radius: 2px;
}
.fr-foot__details[b-fc-results] {
    /* Logical, not physical: this row is mirrored under [dir="rtl"], where
       margin-left would pin the link to the wrong edge. */
    margin-inline-start: auto;
    border: none;
    background: transparent;
    color: var(--fr-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.14s;
}
.fr-foot__details:hover[b-fc-results] { gap: 8px; }

/* ─── Mini fare chips in the airline cell ─── */
.fr-airline-tags[b-fc-results] { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.fr-mini[b-fc-results] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 1px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.fr-mini--warn[b-fc-results] { color: #b45309; background: #fffbeb; border-color: #fde68a; }

.fr-promo__txt[b-fc-results] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The kinds share the violet family — "this is promoted" has to read at a
   glance — and differ only in the weight of the tint, never in hue. */
.fr-promo--offer[b-fc-results] { color: #5b21b6; background: #f5f3ff; border-color: #ddd6fe; }
.fr-promo--best[b-fc-results]  { color: #4c1d95; background: #ede9fe; border-color: #c4b5fd; }
.fr-promo--reco[b-fc-results]  { color: #6d28d9; background: #faf5ff; border-color: #e9d5ff; }
.fr-promo--excl[b-fc-results]  { color: #4c1d95; background: #ede9fe; border-color: #c4b5fd; }

@media (max-width: 640px) {
    .fr-cell--price[b-fc-results] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .fr-ptotal[b-fc-results] { align-items: flex-start; text-align: start; }
    .fr-select[b-fc-results] { width: 100%; }
    /* The icon carries the price-history button once the card is in its mobile
       mode: five uppercase labels wrap to a second row and crowd out the card's
       own data, and this is the one action in the row with a glyph to fall back
       on. Folded into this breakpoint rather than given its own — the file
       already has four, and the card is already stacked by here. */
    .fr-foot__link--icon .fr-foot__label[b-fc-results] { display: none; }
    .fr-foot__ic[b-fc-results] { font-size: 16px; }
}
/* /Pages/FlightCloud/ResultsParts/FlightOfferDetailsModal.razor.rz.scp.css */
/* Flight results — the flight details modal.
   Shares the results page's CSS scope (b-fc-results, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in Results.razor.css. */

/* Facilities list (details modal "What's included") */
.fr-feat[b-fc-results] { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.fr-feat__ic[b-fc-results] { display: inline-flex; flex: 0 0 auto; }
.fr-feat__txt[b-fc-results] { line-height: 1.2; }
.fr-feat--ok[b-fc-results] { color: #15803d; }
.fr-feat--ok .fr-feat__ic[b-fc-results] { color: #16a34a; }
.fr-feat--fee[b-fc-results] { color: #b45309; }
.fr-feat--fee .fr-feat__ic[b-fc-results] { color: #d97706; }
.fr-feat--no[b-fc-results] { color: #9ca3af; }
.fr-feat--no .fr-feat__txt[b-fc-results] { text-decoration: line-through; }


/* ─── Flight-details modal (booking.com-style) ───
   Opened from a card's "Details" button: full itinerary timeline, baggage,
   ticket conditions and price breakdown over a dimmed backdrop, with a
   sticky footer carrying the payable price and the Book CTA. */
.fr-modal[b-fc-results] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.fr-modal__panel[b-fc-results] {
    background: #ffffff;
    border-radius: 16px;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.6);
    overflow: hidden;
}
.fr-modal__head[b-fc-results] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e5e7eb;
}
.fr-modal__title[b-fc-results] { font-size: 19px; font-weight: 800; color: var(--fr-ink); }
.fr-modal__sub[b-fc-results] { font-size: 13px; color: var(--fr-muted); margin-top: 2px; }
.fr-modal__scarce[b-fc-results] { color: #b45309; font-weight: 700; }
/* A comfortable seat count is still stated, just not shouted: reserve the
   amber for the counts that should change what the agent does next. */
.fr-modal__scarce--calm[b-fc-results] { color: var(--fr-muted); font-weight: 600; }
.fr-modal__brand[b-fc-results] { color: var(--fr-primary); font-weight: 800; }
.fr-modal__tags[b-fc-results] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Facilities grid (details modal) */
.fr-feats-grid[b-fc-results] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px;
}
.fr-modal__close[b-fc-results] {
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
    flex: 0 0 auto;
    transition: background 0.14s;
}
.fr-modal__close:hover[b-fc-results] { background: #e5e7eb; }
.fr-modal__close .material-symbols-outlined[b-fc-results] { font-size: 20px; }

.fr-modal__body[b-fc-results] { padding: 6px 22px 14px; overflow-y: auto; }
.fr-modal__sec[b-fc-results] { padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.fr-modal__sec:last-child[b-fc-results] { border-bottom: none; }
.fr-modal__sec-head[b-fc-results] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fr-modal__sec-title[b-fc-results] { font-size: 14.5px; font-weight: 800; color: var(--fr-ink); }
.fr-modal__sec-meta[b-fc-results] { font-size: 12.5px; color: var(--fr-muted); }

.fr-modal__seg[b-fc-results] {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 14px;
    padding: 6px 0;
}
.fr-modal__seg-rail[b-fc-results] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
}
.fr-modal__dot[b-fc-results] {
    width: 9px;
    height: 9px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}
.fr-modal__dot--end[b-fc-results] { background: var(--fr-primary); border-color: var(--fr-primary); }
.fr-modal__rail[b-fc-results] { flex: 1 1 auto; width: 2px; background: #e2e8f0; margin: 2px 0; }
.fr-modal__seg-times[b-fc-results] { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.fr-modal__pt[b-fc-results] { display: flex; flex-direction: column; }
.fr-modal__pt strong[b-fc-results] { font-size: 15px; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
.fr-modal__pt span[b-fc-results] { font-size: 12.5px; color: var(--fr-muted); }
.fr-modal__pt-airport[b-fc-results] { font-weight: 600; color: var(--fr-ink) !important; }
.fr-modal__pt-place[b-fc-results] { font-size: 12px !important; }
.fr-modal__seg-info[b-fc-results] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: var(--fr-muted);
    padding-top: 4px;
}
.fr-modal__seg-info strong[b-fc-results] { font-size: 13.5px; color: var(--fr-ink); }

.fr-modal__layover[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 6px 28px;
    padding: 7px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #92400e;
    width: fit-content;
}
.fr-modal__layover .material-symbols-outlined[b-fc-results] { font-size: 16px; }

.fr-modal__foot[b-fc-results] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}
.fr-modal__price[b-fc-results] { display: flex; flex-direction: column; }
.fr-modal__price strong[b-fc-results] { font-size: 20px; font-weight: 800; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
.fr-modal__price span[b-fc-results] { font-size: 12px; color: var(--fr-muted); }
.fr-modal__book[b-fc-results] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border-radius: 11px;
    padding: 12px 26px;
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
    transition: filter 0.15s, transform 0.12s;
}
.fr-modal__book:hover[b-fc-results] { filter: brightness(1.05); transform: translateY(-1px); }
.fr-modal__book .material-symbols-outlined[b-fc-results] { font-size: 18px; }
@media (max-width: 640px) {

    .fr-modal[b-fc-results] { padding: 0; align-items: flex-end; }
    .fr-modal__panel[b-fc-results] { border-radius: 16px 16px 0 0; max-height: 92vh; }
    .fr-modal__seg[b-fc-results] { grid-template-columns: 14px 1fr; }
    .fr-modal__seg-info[b-fc-results] { grid-column: 2; padding-inline-start: 0; }
}
/* /Pages/FlightCloud/ResultsParts/ResultsFilterRail.razor.rz.scp.css */
/* Flight results — the filter rail.
   Shares the results page's CSS scope (b-fc-results, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in Results.razor.css. */

/* ─── Filters ─── */
.fr-filters[b-fc-results] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    /* No sticky, no max-height, no internal overflow: the rail scrolls with
       the page. A sticky rail capped to the viewport needs its own scrollbar
       (and the airline list needed another inside it), which stacked up to
       three scrollbars side by side. One page scroll is the only one. */
    display: flex;
    flex-direction: column;
    gap: 13px;
}
/* The toggle is a narrow-screen affordance only; the desktop grid always shows
   the rail. */
.fr-filters-toggle[b-fc-results] { display: none; }

@media (max-width: 900px) {
    .fr-filters-toggle[b-fc-results] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        padding: 10px 16px;
        border: 1px solid #d1d5db;
        border-radius: 11px;
        background: #ffffff;
        color: #374151;
        font-weight: 700;
        font-size: 13.5px;
        cursor: pointer;
    }
    .fr-filters-toggle__count[b-fc-results] {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--fr-primary);
        color: #ffffff;
        font-size: 11.5px;
        font-variant-numeric: tabular-nums;
    }

    /* Collapsed by default so the first result, not the filter list, is what
       greets the agent on a phone. */
    .fr-filters[b-fc-results] { display: none; }
    .fr-filters--open[b-fc-results] { display: flex; }
}
.fr-filters__head[b-fc-results] { display: flex; align-items: center; justify-content: space-between; }
.fr-filters__head strong[b-fc-results] { font-size: 15px; }
.fr-clear[b-fc-results] {
    border: none;
    background: transparent;
    color: var(--fr-primary);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}
.fr-clear:hover[b-fc-results] { text-decoration: underline; }
.fr-fgroup[b-fc-results] { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid #f3f4f6; padding-top: 11px; }
.fr-fgroup:first-of-type[b-fc-results] { border-top: none; padding-top: 0; }
.fr-fgroup__title[b-fc-results] { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.fr-fgroup__more[b-fc-results] { align-self: flex-start; padding: 2px 0; }

.fr-check[b-fc-results] { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: #374151; }
.fr-check input[b-fc-results] { position: absolute; opacity: 0; width: 0; height: 0; }
.fr-check__box[b-fc-results] {
    width: 18px; height: 18px; flex: 0 0 auto;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fr-check input:checked + .fr-check__box[b-fc-results] {
    background: var(--fr-primary);
    border-color: var(--fr-primary);
    color: #ffffff;
}
.fr-check__ic[b-fc-results] { display: inline-flex; align-items: center; color: #94a3b8; flex: 0 0 auto; }
.fr-check__meta[b-fc-results] { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }

.fr-range[b-fc-results] { width: 100%; accent-color: var(--fr-primary); }
.fr-range__val[b-fc-results] { font-size: 12.5px; color: var(--fr-muted); font-weight: 600; }

.fr-filter-logo[b-fc-results] { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }
/* /Pages/FlightCloud/ResultsParts/ResultsIcons.razor.rz.scp.css */
/* Flight results — the inline icons.
   No rules of its own: it shares the results page's CSS scope (b-fc-results,
   see TAM.AgencyPanel.csproj), whose `.ic` and `.fr-bagtag` rules style it. */
/* /Pages/FlightCloud/ResultsParts/ResultsUpdatingHint.razor.rz.scp.css */
/* Flight results — the "updating with the live fare" hint.
   Shares the results page's CSS scope (b-fc-results, see TAM.AgencyPanel.csproj),
   so these rules match exactly what they matched in Results.razor.css. */

/* Inline "live fare updating" notice under instantly-rendered panel content. */
.fr-updating[b-fc-results] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    opacity: .65;
}
/* /Pages/FlightCloud/Ticketing.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   "Waiting for Ticket Issuance" page — a polished, centered status card with an
   animated plane for the waiting state and clear success / failure heroes. Shares
   the booking wizard's design language (rounded cards, soft shadows, the same
   blue / green / amber / red status palette).
   ─────────────────────────────────────────────────────────────────────────── */

.tkt[b-ntmeinhawg] {
    font-family: 'Inter', system-ui, sans-serif;
    color: #111827;
    display: flex;
    justify-content: center;
    padding: 24px 16px 48px;
}

.tkt[b-ntmeinhawg]  .tkt-card {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 24px 60px -38px rgba(15, 23, 42, 0.55);
}

/* ─── Waiting state ─── */
.tkt[b-ntmeinhawg]  .tkt-card--waiting,
.tkt[b-ntmeinhawg]  .tkt-card--empty { text-align: center; }

.tkt[b-ntmeinhawg]  .tkt-plane {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 8px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tkt[b-ntmeinhawg]  .tkt-plane__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #e0e7ff;
    border-top-color: #4f46e5;
    animation: tkt-spin-b-ntmeinhawg 1s linear infinite;
}
.tkt[b-ntmeinhawg]  .tkt-plane__icon {
    font-size: 44px;
    color: #4f46e5;
    animation: tkt-bob-b-ntmeinhawg 2.4s ease-in-out infinite;
}
@keyframes tkt-spin-b-ntmeinhawg { to { transform: rotate(360deg); } }
@keyframes tkt-bob-b-ntmeinhawg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.tkt[b-ntmeinhawg]  .tkt-waiting__title { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.tkt[b-ntmeinhawg]  .tkt-waiting__text { margin: 0 auto; max-width: 460px; font-size: 14px; line-height: 1.55; color: #4b5563; }

/* ─── Progress trail ─── */
.tkt[b-ntmeinhawg]  .tkt-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    margin: 20px auto 4px;
    text-align: left;
}
.tkt[b-ntmeinhawg]  .tkt-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.tkt[b-ntmeinhawg]  .tkt-step .material-symbols-outlined { font-size: 19px; }
.tkt[b-ntmeinhawg]  .tkt-step--done { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.tkt[b-ntmeinhawg]  .tkt-step--active { color: #3730a3; background: #eef2ff; border-color: #c7d2fe; }
.tkt[b-ntmeinhawg]  .tkt-step__spin { animation: tkt-spin-b-ntmeinhawg 0.9s linear infinite; }

.tkt[b-ntmeinhawg]  .tkt-safe {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
    text-align: left;
}
.tkt[b-ntmeinhawg]  .tkt-safe .material-symbols-outlined { font-size: 18px; color: #94a3b8; flex: 0 0 auto; }

/* ─── Success / failure heroes ─── */
.tkt[b-ntmeinhawg]  .tkt-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    margin-bottom: 16px;
}
.tkt[b-ntmeinhawg]  .tkt-hero__icon { font-size: 38px; flex: 0 0 auto; }
.tkt[b-ntmeinhawg]  .tkt-hero__title { margin: 0; font-size: 21px; font-weight: 800; }
.tkt[b-ntmeinhawg]  .tkt-hero__sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #475569; }
.tkt[b-ntmeinhawg]  .tkt-hero--ok { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%); border: 1px solid #a7f3d0; }
.tkt[b-ntmeinhawg]  .tkt-hero--ok .tkt-hero__icon { color: #10b981; }
.tkt[b-ntmeinhawg]  .tkt-hero--ok .tkt-hero__title { color: #065f46; }
.tkt[b-ntmeinhawg]  .tkt-hero--fail { background: #fef2f2; border: 1px solid #fecaca; }
.tkt[b-ntmeinhawg]  .tkt-hero--fail .tkt-hero__icon { color: #ef4444; }
.tkt[b-ntmeinhawg]  .tkt-hero--fail .tkt-hero__title { color: #991b1b; }

/* ─── Reference strip (booking # / PNR) ─── */
.tkt[b-ntmeinhawg]  .tkt-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 16px 0;
}
.tkt[b-ntmeinhawg]  .tkt-ref {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 150px;
    padding: 9px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    text-align: center;
}
.tkt[b-ntmeinhawg]  .tkt-ref__label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.tkt[b-ntmeinhawg]  .tkt-ref__value {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

/* ─── Ticket numbers ─── */
.tkt[b-ntmeinhawg]  .tkt-tickets {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.tkt[b-ntmeinhawg]  .tkt-tickets__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #047857;
}
.tkt[b-ntmeinhawg]  .tkt-tickets__label .material-symbols-outlined { font-size: 17px; }
.tkt[b-ntmeinhawg]  .tkt-tickets__nums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tkt[b-ntmeinhawg]  .tkt-tickets__num {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 4px 10px;
    font-variant-numeric: tabular-nums;
}

/* ─── Empty state ─── */
.tkt[b-ntmeinhawg]  .tkt-empty__icon { font-size: 46px; color: #cbd5e1; }
.tkt[b-ntmeinhawg]  .tkt-empty__title { margin: 10px 0 6px; font-size: 20px; font-weight: 800; }
.tkt[b-ntmeinhawg]  .tkt-empty__text { margin: 0 auto 18px; max-width: 380px; font-size: 14px; color: #64748b; }

/* ─── Buttons ─── */
.tkt[b-ntmeinhawg]  .tkt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.tkt[b-ntmeinhawg]  .tkt-card--empty .tkt-btn,
.tkt[b-ntmeinhawg]  .tkt-card--waiting .tkt-btn { margin: 0 auto; }
.tkt[b-ntmeinhawg]  .tkt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    border-radius: 11px;
    padding: 10px 18px;
    transition: filter 0.15s, background 0.15s, transform 0.12s, border-color 0.15s;
}
.tkt[b-ntmeinhawg]  .tkt-btn .material-symbols-outlined { font-size: 18px; }
.tkt[b-ntmeinhawg]  .tkt-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7);
}
.tkt[b-ntmeinhawg]  .tkt-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.tkt[b-ntmeinhawg]  .tkt-btn--ghost { background: #fff; color: #374151; border-color: #d1d5db; }
.tkt[b-ntmeinhawg]  .tkt-btn--ghost:hover { background: #f3f4f6; border-color: #9ca3af; }
/* /Pages/FlightCloud/Wizard/WizardConfirmStep.razor.rz.scp.css */
/* Booking wizard — the confirm step: the "reservation held" banner.
   Shares the wizard page's CSS scope (b-fc-wizard, see TAM.AgencyPanel.csproj),
   so `.bw` is the page's root and these rules read exactly as they did when
   they lived in BookingWizard.razor.css. */

/* ─── Reservation-held success banner (top of Extras step) ─── */
.bw[b-fc-wizard]  .bw-held-banner {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border: 1px solid #a7f3d0;
}
.bw[b-fc-wizard]  .bw-held-banner__icon { flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-held-banner__icon .material-symbols-outlined { font-size: 34px; color: #10b981; }
.bw[b-fc-wizard]  .bw-held-banner__title { font-size: 16.5px; font-weight: 800; color: #065f46; }
.bw[b-fc-wizard]  .bw-held-banner__text { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: #334155; }
.bw[b-fc-wizard]  .bw-held-banner__refs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.bw[b-fc-wizard]  .bw-held-banner__ref {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 7px 12px;
    min-width: 130px;
}
.bw[b-fc-wizard]  .bw-held-banner__ref-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.bw[b-fc-wizard]  .bw-held-banner__ref-value { font-size: 15px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.bw[b-fc-wizard]  .bw-held-banner__notice {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 12.5px;
}
.bw[b-fc-wizard]  .bw-held-banner__notice .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-held-banner__notice ul { margin: 3px 0 0; padding-inline-start: 18px; line-height: 1.4; }
/* /Pages/FlightCloud/Wizard/WizardExtrasStep.razor.rz.scp.css */
/* Booking wizard — the extras step: extras on the held reservation and the seat map.
   Shares the wizard page's CSS scope (b-fc-wizard, see TAM.AgencyPanel.csproj),
   so `.bw` is the page's root and these rules read exactly as they did when
   they lived in BookingWizard.razor.css. */

.bw[b-fc-wizard]  .bw-extras-status,
.bw[b-fc-wizard]  .bw-extras-ok,
.bw[b-fc-wizard]  .bw-extras-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    margin: 8px 0;
}
.bw[b-fc-wizard]  .bw-extras-status { background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
.bw[b-fc-wizard]  .bw-extras-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.bw[b-fc-wizard]  .bw-extras-empty { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.bw[b-fc-wizard]  .bw-extras-status .material-symbols-outlined,
.bw[b-fc-wizard]  .bw-extras-ok .material-symbols-outlined,
.bw[b-fc-wizard]  .bw-extras-empty .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }

.bw[b-fc-wizard]  .bw-extras-added {
    border: 1px solid #a7f3d0;
    background: #f0fdf9;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.bw[b-fc-wizard]  .bw-extras-added__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #047857;
    margin-bottom: 6px;
}
.bw[b-fc-wizard]  .bw-extras-added__title .material-symbols-outlined { font-size: 18px; }
.bw[b-fc-wizard]  .bw-extras-added__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    color: #111827;
    border-top: 1px dashed #d1fae5;
}
.bw[b-fc-wizard]  .bw-extras-added__row .material-symbols-outlined { font-size: 17px; color: #059669; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-extras-added__desc { flex: 1 1 auto; min-width: 0; }
.bw[b-fc-wizard]  .bw-extras-added__row strong { font-variant-numeric: tabular-nums; }
.bw[b-fc-wizard]  .bw-extras-added__note { font-size: 11.5px; color: #6b7280; margin-top: 6px; }

.bw[b-fc-wizard]  .bw-shop-pax {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    margin: 12px 0 4px;
}
.bw[b-fc-wizard]  .bw-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color .12s ease, background .12s ease;
}
.bw[b-fc-wizard]  .bw-check:hover { border-color: #93c5fd; background: #f8fafc; }
.bw[b-fc-wizard]  .bw-check input { accent-color: var(--bw-primary); width: 16px; height: 16px; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-check__ico { font-size: 18px; color: var(--bw-primary); flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-check__desc { flex: 1 1 auto; min-width: 0; color: #111827; }
.bw[b-fc-wizard]  .bw-check__price { font-variant-numeric: tabular-nums; color: #111827; }

.bw[b-fc-wizard]  .bw-shop-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.bw[b-fc-wizard]  .bw-seat-legs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bw[b-fc-wizard]  .bw-seat-legbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.bw[b-fc-wizard]  .bw-seat-legbtn .material-symbols-outlined { font-size: 17px; }
.bw[b-fc-wizard]  .bw-seat-legbtn:hover { border-color: #9ca3af; background: #f9fafb; }
.bw[b-fc-wizard]  .bw-seat-legbtn--active {
    background: var(--bw-primary);
    border-color: var(--bw-primary);
    color: #fff;
}
.bw[b-fc-wizard]  .bw-seat-legbtn--active:hover { background: var(--bw-primary); }

.bw[b-fc-wizard]  .bw-seat-assign {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.bw[b-fc-wizard]  .bw-seat-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}
.bw[b-fc-wizard]  .bw-seat-cur { margin-inline-start: auto; }

.bw[b-fc-wizard]  .bw-seatmap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    overflow-x: auto;
}
.bw[b-fc-wizard]  .bw-seat-row { display: flex; align-items: center; gap: 6px; }
.bw[b-fc-wizard]  .bw-seat-rownum {
    width: 24px;
    flex: 0 0 auto;
    text-align: right;
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.bw[b-fc-wizard]  .bw-seat-aisle { width: 18px; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-seat-gap { width: 44px; flex: 0 0 auto; }
.bw[b-fc-wizard]  .bw-seat-col { font-weight: 700; line-height: 1.1; }
.bw[b-fc-wizard]  .bw-seat-price { font-size: .62rem; color: #374151; line-height: 1.1; }

.bw[b-fc-wizard]  .bw-seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 12px;
    color: #4b5563;
}

.bw[b-fc-wizard]  .bw-extras-holdnote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #3730a3;
}
.bw[b-fc-wizard]  .bw-extras-holdnote .material-symbols-outlined { font-size: 18px; }
/* /Pages/FlightCloud/Wizard/WizardItineraryStep.razor.rz.scp.css */
/* Booking wizard — the itinerary step: fare conditions and the checked-baggage tag.
   Shares the wizard page's CSS scope (b-fc-wizard, see TAM.AgencyPanel.csproj),
   so `.bw` is the page's root and these rules read exactly as they did when
   they lived in BookingWizard.razor.css. */

.bw[b-fc-wizard]  .bw-rules-text {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #eef0f3;
    border-radius: 8px;
}

/* Checked-baggage badge — same states and colours as the results / fare cards. */
.bw[b-fc-wizard]  .bw-line__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bw[b-fc-wizard]  .bw-bagtag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: help;
}
.bw[b-fc-wizard]  .bw-bagtag .material-symbols-outlined { font-size: 15px; }
.bw[b-fc-wizard]  .bw-bagtag--ok { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.bw[b-fc-wizard]  .bw-bagtag--fee { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.bw[b-fc-wizard]  .bw-bagtag--no { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.bw[b-fc-wizard]  .bw-bagtag--na { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
/* /Pages/FlightCloud/Wizard/WizardPassengersStep.razor.rz.scp.css */
/* Booking wizard — the passengers step: one card per traveller and the nationality picker rows.
   Shares the wizard page's CSS scope (b-fc-wizard, see TAM.AgencyPanel.csproj),
   so `.bw` is the page's root and these rules read exactly as they did when
   they lived in BookingWizard.razor.css. */

/* ─── Per-traveller extras row inside the passenger card ─── */
.bw[b-fc-wizard]  .bw-guest__extras {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
    border-top: 1px dashed #e2e8f0;
}
.bw[b-fc-wizard]  .bw-guest__extras-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

/* ─── Passenger cards on the passengers step ─── */
/* Each passenger gets its own bordered, tinted card so the field rows don't
   look like an unstyled wall of inputs. The lead passenger carries an extra
   primary-blue accent on the left edge so the agent can spot the lead row at
   a glance — identical to the hotel wizard's guest cards. */
.bw[b-fc-wizard]  .bw-guest {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px 4px;
    margin-top: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.bw[b-fc-wizard]  .bw-guest:hover { border-color: #cbd5e1; }
.bw[b-fc-wizard]  .bw-guest:focus-within {
    background: #ffffff;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}
.bw[b-fc-wizard]  .bw-guest--lead {
    border-inline-start: 3px solid var(--bw-primary);
    padding-inline-start: 12px;
}
.bw[b-fc-wizard]  .bw-guest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.bw[b-fc-wizard]  .bw-guest__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #334155;
}
.bw[b-fc-wizard]  .bw-guest__badge strong { color: #0f172a; }
.bw[b-fc-wizard]  .bw-guest__badge .material-symbols-outlined {
    font-size: 18px;
    color: var(--bw-primary);
}
.bw[b-fc-wizard]  .bw-guest__lead {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 102, 255, 0.12);
    color: var(--bw-primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 4px;
}
.bw[b-fc-wizard]  .bw-guest__grid { margin-bottom: 0 !important; }

/* ─── Nationality autocomplete dropdown rows ─── */
.bw[b-fc-wizard]  .bw-nat-item { display: flex; align-items: center; gap: 10px; }
.bw[b-fc-wizard]  .bw-nat-item__code {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1px 6px;
    min-width: 30px;
    text-align: center;
}
.bw[b-fc-wizard]  .bw-nat-item__name { font-size: 13.5px; color: #0f172a; }
.bw[b-fc-wizard]  .bw-nat-empty { padding: 8px 12px; font-size: 13px; color: #94a3b8; }
/* /Pages/FlightCloud/Wizard/WizardReviewStep.razor.rz.scp.css */
/* Booking wizard — the review step: the passenger and contact recap.
   Shares the wizard page's CSS scope (b-fc-wizard, see TAM.AgencyPanel.csproj),
   so `.bw` is the page's root and these rules read exactly as they did when
   they lived in BookingWizard.razor.css. */

/* Contact recap line under the passenger summary on the Review step. */
.bw[b-fc-wizard]  .bw-review-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    font-size: 13px;
    color: #4b5563;
}
.bw[b-fc-wizard]  .bw-review-contact .material-symbols-outlined { font-size: 18px; color: #6b7280; }

/* ─── Review-step passenger recap ─── */
/* A compact read-only summary of who the agent entered on the Passengers step,
   shown inside the review card so the Review screen actually reviews who is
   being booked (name, lead flag, pax kind, document number). */
.bw[b-fc-wizard]  .bw-review-guests {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bw[b-fc-wizard]  .bw-review-guests__head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.bw[b-fc-wizard]  .bw-review-guests__head .material-symbols-outlined {
    font-size: 16px;
    color: var(--bw-primary);
}
.bw[b-fc-wizard]  .bw-review-room {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.bw[b-fc-wizard]  .bw-review-room__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.bw[b-fc-wizard]  .bw-review-pax {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 10px;
}
.bw[b-fc-wizard]  .bw-review-pax--lead {
    border-color: rgba(0, 102, 255, 0.35);
    background: rgba(0, 102, 255, 0.06);
}
.bw[b-fc-wizard]  .bw-review-pax__icon {
    font-size: 15px !important;
    color: var(--bw-primary);
}
.bw[b-fc-wizard]  .bw-review-pax__name { font-weight: 700; }
.bw[b-fc-wizard]  .bw-review-pax__lead {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bw-primary);
    background: rgba(0, 102, 255, 0.12);
    padding: 1px 6px;
    border-radius: 999px;
}
.bw[b-fc-wizard]  .bw-review-pax__meta { font-size: 12px; color: #64748b; }
.bw[b-fc-wizard]  .bw-review-pax__doc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #475569;
    font-variant-numeric: tabular-nums;
    padding-inline-start: 6px;
    border-inline-start: 1px solid #e2e8f0;
}
.bw[b-fc-wizard]  .bw-review-pax__doc .material-symbols-outlined {
    font-size: 14px !important;
    color: #94a3b8;
}

/* ─── Held-reference strip on the Review step ─── */
.bw[b-fc-wizard]  .bw-review-held {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}
.bw[b-fc-wizard]  .bw-review-held__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: #3730a3;
}
.bw[b-fc-wizard]  .bw-review-held__status .material-symbols-outlined { font-size: 20px; }
.bw[b-fc-wizard]  .bw-review-held__refs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-inline-start: auto; }
.bw[b-fc-wizard]  .bw-review-held__ref { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.bw[b-fc-wizard]  .bw-review-held__ref span { color: #64748b; }
.bw[b-fc-wizard]  .bw-review-held__ref strong { color: #0f172a; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* /Pages/FlightCloud/Wizard/WizardSummary.razor.rz.scp.css */
/* Booking wizard — the sticky booking summary: flight, baggage, fare breakdown, notices and the held reference.
   Shares the wizard page's CSS scope (b-fc-wizard, see TAM.AgencyPanel.csproj),
   so `.bw` is the page's root and these rules read exactly as they did when
   they lived in BookingWizard.razor.css. */

.bw[b-fc-wizard]  .bw-side {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
}
.bw[b-fc-wizard]  .bw-side__title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 10px;
}
.bw[b-fc-wizard]  .bw-side__leg {
    padding: 8px 0;
    border-top: 1px dashed #e5e7eb;
}
.bw[b-fc-wizard]  .bw-side__leg:first-of-type { border-top: none; padding-top: 0; }
.bw[b-fc-wizard]  .bw-side__route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.bw[b-fc-wizard]  .bw-side__codes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: 14px;
}
.bw[b-fc-wizard]  .bw-side__codes .material-symbols-outlined { font-size: 15px; color: #6b7280; }
.bw[b-fc-wizard]  .bw-side__date { font-size: 12px; color: #6b7280; }
.bw[b-fc-wizard]  .bw-side__cities { font-size: 12px; color: #111827; font-weight: 600; margin-top: 1px; }
.bw[b-fc-wizard]  .bw-side__meta { font-size: 12.5px; color: #4b5563; margin-top: 2px; }
.bw[b-fc-wizard]  .bw-side__flights { font-size: 12px; color: #6b7280; margin-top: 1px; }
.bw[b-fc-wizard]  .bw-side__pill {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 3px 10px;
}
.bw[b-fc-wizard]  .bw-side__pill--good {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.bw[b-fc-wizard]  .bw-side__bag {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #374151;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.bw[b-fc-wizard]  .bw-side__bag .material-symbols-outlined { font-size: 17px; color: var(--bw-primary); }

.bw[b-fc-wizard]  .bw-side__bags { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.bw[b-fc-wizard]  .bw-side__bags .bw-side__bag { margin-top: 0; }
.bw[b-fc-wizard]  .bw-side__bag-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bw[b-fc-wizard]  .bw-side__bag-label { font-weight: 700; color: #111827; }
.bw[b-fc-wizard]  .bw-side__bag-meta { font-size: 11.5px; color: #6b7280; }
.bw[b-fc-wizard]  .bw-side__bag-tag {
    margin-inline-start: auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.bw[b-fc-wizard]  .bw-side__bag-tag .material-symbols-outlined { font-size: 14px; color: inherit; }
.bw[b-fc-wizard]  .bw-side__bag-tag--ok { color: #047857; background: #ecfdf5; }
.bw[b-fc-wizard]  .bw-side__bag-tag--fee { color: #b45309; background: #fffbeb; }
.bw[b-fc-wizard]  .bw-side__bag-tag--na { color: #b91c1c; background: #fef2f2; }
.bw[b-fc-wizard]  .bw-side__bag--ok { border-inline-start: 3px solid #10b981; }
.bw[b-fc-wizard]  .bw-side__bag--fee { border-inline-start: 3px solid #f59e0b; }
.bw[b-fc-wizard]  .bw-side__bag--na { border-inline-start: 3px solid #ef4444; }

.bw[b-fc-wizard]  .bw-side__fare { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.bw[b-fc-wizard]  .bw-side__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #4b5563;
    padding: 3px 0;
    font-variant-numeric: tabular-nums;
}
.bw[b-fc-wizard]  .bw-side__row--comm { color: #047857; font-weight: 700; }
.bw[b-fc-wizard]  .bw-side__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 9px 12px;
    background: #eef4ff;
    border-radius: 10px;
    font-weight: 800;
    font-size: 15px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.bw[b-fc-wizard]  .bw-side__pax {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #6b7280;
}
.bw[b-fc-wizard]  .bw-side__pax .material-symbols-outlined { font-size: 16px; }

/* ─── Supplier message card (sidebar) ─── */
.bw[b-fc-wizard]  .bw-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
    color: #92400e;
}
.bw[b-fc-wizard]  .bw-notice__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 12.5px;
}
.bw[b-fc-wizard]  .bw-notice__head .material-symbols-outlined { font-size: 18px; }
.bw[b-fc-wizard]  .bw-notice__list { margin: 4px 0 0; padding-inline-start: 22px; font-size: 12.5px; line-height: 1.4; }

/* ─── Held-reference chip card (sidebar) ─── */
.bw[b-fc-wizard]  .bw-held {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.bw[b-fc-wizard]  .bw-held__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #047857;
    background: #dcfce7;
    border-radius: 999px;
    padding: 3px 10px;
}
.bw[b-fc-wizard]  .bw-held__badge .material-symbols-outlined { font-size: 16px; }
.bw[b-fc-wizard]  .bw-held__refs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.bw[b-fc-wizard]  .bw-held__ref { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.bw[b-fc-wizard]  .bw-held__ref span { color: #64748b; }
.bw[b-fc-wizard]  .bw-held__ref strong { color: #0f172a; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Informational service fees (change / cancellation / void) under the total. */
.bw[b-fc-wizard]  .bw-side__svcfees {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.bw[b-fc-wizard]  .bw-side__svcfees-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}
.bw[b-fc-wizard]  .bw-side__svcfees-title span {
    font-weight: 400;
    opacity: .6;
    font-size: 11px;
}

.bw[b-fc-wizard]  .bw-side__row--extra span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
/* /Pages/GroupRequests/MyRequests.razor.rz.scp.css */
/* The group desk hero heads the list, like every search desk page. */
.gr-desk[b-l7n6d0jzbr] { margin-bottom: 18px; }

/* Service icons in the list row: one glyph per requested service, in the
   order the agency asked for them. Kept small so seven services still fit
   the slot without wrapping the row. */
.gr-svc-icons[b-l7n6d0jzbr] { display: flex; flex-wrap: wrap; gap: 4px; }
.gr-svc-icons .material-symbols-outlined[b-l7n6d0jzbr] {
    font-size: 18px;
    color: var(--b2b-primary, #003d9b);
    background: var(--b2b-primary-fixed, #dae2ff);
    border-radius: 6px;
    padding: 3px;
}

/* Column widths for the group-request grid. booking-list.css deals 100% out
   for a booking row (reference, state, product, date, person, payable,
   booked); this grid's seven slots hold different content, and under those
   widths the unwrappable "Last activity" header outgrew its 10% slot and
   pushed the table past its card into a horizontal scroll. Trip and
   services get the room; each breakpoint still sums to 100% with the
   columns booking-list.css hides at that width. */
.gr-table[b-l7n6d0jzbr] { table-layout: fixed; width: 100%; }
.gr-table thead th:nth-child(1)[b-l7n6d0jzbr] { width: 13%; }   /* Request # */
.gr-table thead th:nth-child(2)[b-l7n6d0jzbr] { width: 13%; }   /* Status */
.gr-table thead th:nth-child(3)[b-l7n6d0jzbr] { width: 19%; }   /* Trip */
.gr-table thead th:nth-child(4)[b-l7n6d0jzbr] { width: 12%; }   /* Travel dates */
.gr-table thead th:nth-child(5)[b-l7n6d0jzbr] { width: 15%; }   /* Passengers */
.gr-table thead th:nth-child(6)[b-l7n6d0jzbr] { width: 14%; }   /* Services */
.gr-table thead th:nth-child(7)[b-l7n6d0jzbr] { width: 14%; }   /* Last activity */

/* A header that still cannot fit clips inside its own cell instead of
   widening the table. */
.gr-table thead th[b-l7n6d0jzbr] { overflow: hidden; }

@media (min-width: 768px) {
    .gr-table thead th[b-l7n6d0jzbr],
    .gr-table tbody td[b-l7n6d0jzbr] { padding-inline: 12px; }
}

@media (max-width: 1240px) {
    .gr-table thead th:nth-child(1)[b-l7n6d0jzbr] { width: 15%; }
    .gr-table thead th:nth-child(2)[b-l7n6d0jzbr] { width: 15%; }
    .gr-table thead th:nth-child(3)[b-l7n6d0jzbr] { width: 22%; }
    .gr-table thead th:nth-child(4)[b-l7n6d0jzbr] { width: 13%; }
    .gr-table thead th:nth-child(5)[b-l7n6d0jzbr] { width: 18%; }
    .gr-table thead th:nth-child(6)[b-l7n6d0jzbr] { width: 17%; }
}

@media (max-width: 980px) {
    .gr-table thead th:nth-child(1)[b-l7n6d0jzbr] { width: 18%; }
    .gr-table thead th:nth-child(2)[b-l7n6d0jzbr] { width: 17%; }
    .gr-table thead th:nth-child(3)[b-l7n6d0jzbr] { width: 25%; }
    .gr-table thead th:nth-child(5)[b-l7n6d0jzbr] { width: 21%; }
    .gr-table thead th:nth-child(6)[b-l7n6d0jzbr] { width: 19%; }
}
/* /Pages/GroupRequests/RequestDetail.razor.rz.scp.css */
/* ============================================================================
   Visa order detail. Work column + commercial aside; the aside drops below the
   work at 1024px, because the workspace is what the page is for.
   ============================================================================ */

.vbd[b-3buo061syj] { padding-block-end: 48px; }

/* ------------------------------- header ---------------------------------- */

.vbd-head[b-3buo061syj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    margin-block-end: 14px;
}

.vbd-crumbs[b-3buo061syj] { display: flex; gap: 8px; font-size: 12px; color: var(--b2b-on-surface-variant); margin-block-end: 6px; }
.vbd-crumbs a[b-3buo061syj] { color: var(--b2b-primary); text-decoration: none; }
.vbd-crumbs a:hover[b-3buo061syj] { text-decoration: underline; }

.vbd-head__title[b-3buo061syj] { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: var(--b2b-on-surface); }
.vbd-head__sub[b-3buo061syj] { margin: 0; font-size: 13px; color: var(--b2b-on-surface-variant); }

.vbd-head__refs[b-3buo061syj] { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.vbd-status[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.vbd-status .material-symbols-outlined[b-3buo061syj] { font-size: 16px; }

.vbd-status--ok[b-3buo061syj] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.vbd-status--warn[b-3buo061syj] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.vbd-status--bad[b-3buo061syj] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.vbd-status--info[b-3buo061syj] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.vbd-status--neutral[b-3buo061syj] { background: var(--b2b-container); color: var(--b2b-on-surface-variant); }

.vbd-copy[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px dashed var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.vbd-copy .material-symbols-outlined[b-3buo061syj] { font-size: 14px; }

/* ----------------------------- next action ------------------------------- */

.vbd-next[b-3buo061syj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--b2b-r-md);
    margin-block-end: 16px;
}

.vbd-next--ok[b-3buo061syj] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.vbd-next--warn[b-3buo061syj] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.vbd-next--bad[b-3buo061syj] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.vbd-next--info[b-3buo061syj] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.vbd-next--neutral[b-3buo061syj] { background: var(--b2b-container); color: var(--b2b-on-surface-variant); }

.vbd-next__title[b-3buo061syj] { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.vbd-next__desc[b-3buo061syj] { margin: 0; font-size: 13px; line-height: 1.6; }

/* ------------------------------ layout ----------------------------------- */

/* minmax(0, 1fr), not 1fr: a wide table must scroll inside its card, never widen the page. */
.vbd-layout[b-3buo061syj] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }

.vbd-main[b-3buo061syj] { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vbd-aside[b-3buo061syj] { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.vbd-card[b-3buo061syj] {
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    padding: 18px 20px;
}

.vbd-card__head[b-3buo061syj] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.vbd-card__title[b-3buo061syj] { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--b2b-on-surface); }
.vbd-card__lead[b-3buo061syj] { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--b2b-on-surface-variant); }

.vbd-sub[b-3buo061syj] { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--b2b-on-surface); }

.vbd-prose[b-3buo061syj] { margin: 0; font-size: 13px; line-height: 1.75; color: var(--b2b-on-surface-variant); white-space: pre-line; }

.vbd-progresslabel[b-3buo061syj] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant); }

/* ---------------------------- applicants --------------------------------- */

.vbd-applicant[b-3buo061syj] {
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    margin-block-end: 10px;
    overflow: hidden;
}

.vbd-applicant__head[b-3buo061syj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: var(--b2b-container-low);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.vbd-applicant__head:focus-visible[b-3buo061syj] { outline: 2px solid var(--b2b-primary); outline-offset: -2px; }

.vbd-applicant__name[b-3buo061syj] { flex: 1; font-size: 14px; font-weight: 700; color: var(--b2b-on-surface); }

.vbd-applicant__bar[b-3buo061syj] {
    flex: none;
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: var(--b2b-container-high);
    overflow: hidden;
}

.vbd-applicant__fill[b-3buo061syj] { display: block; block-size: 100%; background: var(--b2b-primary); }

.vbd-applicant__counts[b-3buo061syj] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant); white-space: nowrap; }

.vbd-applicant__rejected[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--b2b-err-bg);
    color: var(--b2b-err-fg);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.vbd-applicant__rejected .material-symbols-outlined[b-3buo061syj] { font-size: 14px; }

.vbd-applicant__body[b-3buo061syj] { padding: 14px; }

.vbd-slots[b-3buo061syj] { display: grid; gap: 8px; }

.vbd-list[b-3buo061syj] { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.vbd-list li[b-3buo061syj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
}

.vbd-list .material-symbols-outlined[b-3buo061syj] { font-size: 18px; color: var(--b2b-on-surface-variant); }

.vbd-list__title[b-3buo061syj] { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

.vbd-list__state[b-3buo061syj] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant); white-space: nowrap; }

.vbd-list__reason[b-3buo061syj] { flex-basis: 100%; font-size: 12px; line-height: 1.6; color: var(--b2b-err-fg); }

/* A button, not a link: private-scope files are fetched with the agent's
   token and opened from memory, so there is no href to hang on it. */
.vbd-list__file[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    color: var(--b2b-primary);
    text-decoration: none;
}

.vbd-list__file:hover[b-3buo061syj] { text-decoration: underline; }

/* ----------------------------- timeline ---------------------------------- */

.vbd-timeline[b-3buo061syj] { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.vbd-timeline li[b-3buo061syj] { display: flex; align-items: flex-start; gap: 12px; }

.vbd-timeline__dot[b-3buo061syj] {
    flex: none;
    width: 10px;
    height: 10px;
    margin-block-start: 5px;
    border-radius: 50%;
    background: var(--b2b-primary);
}

.vbd-timeline__msg[b-3buo061syj] { margin: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }
.vbd-timeline__meta[b-3buo061syj] { margin: 2px 0 0; font-size: 12px; color: var(--b2b-on-surface-variant); }

/* ------------------------------ tables ----------------------------------- */

.vbd-facts[b-3buo061syj] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }

.vbd-facts > div[b-3buo061syj] {
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.vbd-facts dt[b-3buo061syj],
.vbd-pay dt[b-3buo061syj],
.vbd-contact dt[b-3buo061syj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vbd-facts dd[b-3buo061syj],
.vbd-contact dd[b-3buo061syj] { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

.vbd-tablewrap[b-3buo061syj] { overflow-x: auto; }

.vbd-table[b-3buo061syj] { width: 100%; border-collapse: collapse; font-size: 13px; }

.vbd-table th[b-3buo061syj],
.vbd-table td[b-3buo061syj] {
    padding: 8px 10px;
    border-block-end: 1px solid var(--b2b-border);
    text-align: start;
    white-space: nowrap;
}

.vbd-table thead th[b-3buo061syj] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vbd-pay[b-3buo061syj] { display: grid; gap: 10px; margin: 0 0 12px; }

.vbd-pay dd[b-3buo061syj] { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--b2b-on-surface); }

.vbd-pay .vbd-pay__discount dd[b-3buo061syj] { color: #047857; }

.vbd-pay-note[b-3buo061syj] { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--b2b-on-surface-variant); }

.vbd-contact[b-3buo061syj] { display: grid; gap: 10px; margin: 0; }

/* ------------------------------- notes ----------------------------------- */

.vbd-notes[b-3buo061syj] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.7;
    resize: vertical;
}

.vbd-notes:focus-visible[b-3buo061syj] { outline: 2px solid var(--b2b-primary); outline-offset: 1px; }

.vbd-notes__actions[b-3buo061syj] { display: flex; align-items: center; gap: 10px; margin-block-start: 10px; }

.vbd-saved[b-3buo061syj] { font-size: 12px; color: var(--b2b-ok-fg); }

/* ------------------------------ buttons ---------------------------------- */

.vbd-btn[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vbd-btn--block[b-3buo061syj] { width: 100%; }

/* The one filled action per block (pay, add a traveller, mark complete). */
.vbd-btn--primary[b-3buo061syj] { background: var(--b2b-primary); border-color: var(--b2b-primary); color: var(--b2b-on-primary); }
.vbd-btn--primary:hover:not(:disabled)[b-3buo061syj] { background: var(--b2b-primary-container); border-color: var(--b2b-primary-container); }
.vbd-btn:focus-visible[b-3buo061syj] { outline: 2px solid var(--b2b-primary); outline-offset: 2px; }

.vbd-btn:disabled[b-3buo061syj] { background: var(--b2b-container-high); color: var(--b2b-outline); cursor: not-allowed; }

/* ------------------------------ states ----------------------------------- */

.vbd-state[b-3buo061syj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    text-align: center;
}

.vbd-state__icon[b-3buo061syj] { font-size: 44px; color: var(--b2b-outline); }
.vbd-state__title[b-3buo061syj] { margin: 0; font-size: 15px; font-weight: 600; color: var(--b2b-on-surface); }

.vbd-skeleton[b-3buo061syj] {
    height: 420px;
    border-radius: var(--b2b-r-lg);
    background: linear-gradient(90deg, var(--b2b-container-low) 25%, var(--b2b-container) 37%, var(--b2b-container-low) 63%);
    background-size: 400% 100%;
    animation: vbd-shimmer-b-3buo061syj 1.4s ease infinite;
}

@keyframes vbd-shimmer-b-3buo061syj {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .vbd-skeleton[b-3buo061syj] { animation: none; }
}

/* --------------------------- breakpoints --------------------------------- */

@media (max-width: 1024px) {
    .vbd-layout[b-3buo061syj] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .vbd-head[b-3buo061syj] { flex-direction: column; }
    .vbd-head__refs[b-3buo061syj] { align-items: flex-start; }
    .vbd-facts[b-3buo061syj] { grid-template-columns: 1fr; }
    .vbd-applicant__bar[b-3buo061syj] { display: none; }
}

/* ------------------------- per-applicant outcome ------------------------- */
/* The consulate answers one applicant at a time, so the booked-applicants
   table carries each person's own result rather than only the order's. */

.vbd-outcome[b-3buo061syj] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant);
}

.vbd-outcome--1[b-3buo061syj] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.vbd-outcome--2[b-3buo061syj] { background: var(--b2b-ok-bg);   color: var(--b2b-ok-fg); }
.vbd-outcome--3[b-3buo061syj] { background: var(--b2b-err-bg);  color: var(--b2b-err-fg); }

.vbd-outcome__note[b-3buo061syj] {
    display: block;
    margin-block-start: 4px;
    font-size: 12px;
    color: var(--b2b-on-surface-variant);
}

/* ------------------------ files issued to the agency --------------------- */
/* What the order was placed for. Given its own visual weight above the
   timeline: an agent opening a finished order is here to collect the visa. */

.vbd-issued[b-3buo061syj] { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.vbd-issued__row[b-3buo061syj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--b2b-container-low);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
}

.vbd-issued__icon[b-3buo061syj] { color: var(--b2b-primary); font-size: 20px; }
.vbd-issued__body[b-3buo061syj] { flex: 1; min-width: 0; }

.vbd-issued__title[b-3buo061syj] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    color: var(--b2b-on-surface);
    overflow-wrap: anywhere;
}

.vbd-issued__title:hover[b-3buo061syj] { color: var(--b2b-primary); text-decoration: underline; }

.vbd-issued__meta[b-3buo061syj] { margin: 2px 0 0; font-size: 12px; color: var(--b2b-on-surface-variant); }
.vbd-issued__note[b-3buo061syj] { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--b2b-on-surface-variant); }

.vbd-issued__download[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--b2b-primary);
    border-radius: var(--b2b-r);
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--b2b-primary);
}

.vbd-issued__download:hover[b-3buo061syj] { background: var(--b2b-primary); color: #fff; }

@media (max-width: 640px) {
    .vbd-issued__row[b-3buo061syj] { flex-wrap: wrap; }
    .vbd-issued__download[b-3buo061syj] { inline-size: 100%; justify-content: center; }
}

/* ── Cancellation (offered only before lodgement) ─────────────────────── */
.vbd-btn--danger[b-3buo061syj] {
    color: var(--b2b-err, #b91c1c);
    border-color: color-mix(in srgb, var(--b2b-err, #b91c1c) 40%, transparent);
}
.vbd-btn--danger:hover:not(:disabled)[b-3buo061syj] {
    background: var(--b2b-err-bg, #fee2e2);
}
.vbd-cancel[b-3buo061syj] {
    display: grid;
    gap: 8px;
    margin-block-start: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--b2b-err, #b91c1c) 35%, transparent);
    border-radius: var(--b2b-radius-sm, 8px);
    background: var(--b2b-err-bg, #fee2e2);
}
.vbd-cancel__hint[b-3buo061syj] { margin: 0; font-size: 13px; color: var(--b2b-on-surface, inherit); }
.vbd-cancel__label[b-3buo061syj] { font-size: 12px; font-weight: 600; color: var(--b2b-on-surface-variant, inherit); }
.vbd-cancel__reason[b-3buo061syj] {
    width: 100%;
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--b2b-outline, #d9e0dd);
    border-radius: var(--b2b-radius-sm, 8px);
    background: var(--b2b-surface, #fff);
    resize: vertical;
}
.vbd-cancel__reason:focus-visible[b-3buo061syj] { outline: 2px solid var(--b2b-primary, #1d4ed8); outline-offset: 1px; }
.vbd-cancel__actions[b-3buo061syj] { display: flex; gap: 8px; flex-wrap: wrap; }
.vbd-cancel__error[b-3buo061syj] { margin: 0; font-size: 13px; color: var(--b2b-err, #b91c1c); }

/* ── Conversation card ──────────────────────────────────────────────────
   The thread reuses the global ticket bubble classes (b2b-tk-*) so a reply
   from the desk looks exactly like a reply from support; only the card
   framing is local. */
.gr-convo[b-3buo061syj] { padding: 0; overflow: hidden; }
/* The banner says "answer in the conversation": put it where the eye lands. */
.gr-convo--first[b-3buo061syj] { order: -1; }
.gr-convo .vbd-card__head[b-3buo061syj] { padding: 16px 20px; border-block-end: 1px solid var(--b2b-border); }
.gr-convo__msgs[b-3buo061syj] { max-height: 460px; min-height: 120px; }
.gr-convo__msgs .vbd-card__lead[b-3buo061syj] { margin: auto; text-align: center; }
.gr-convo__sender[b-3buo061syj] { display: block; font-size: 11px; font-weight: 700; opacity: .75; margin-block-end: 4px; }
.gr-convo__input[b-3buo061syj] { border-block-start: 1px solid var(--b2b-border); }
.gr-convo__input textarea[b-3buo061syj] {
    inline-size: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    resize: vertical;
}
.gr-convo__input textarea:focus-visible[b-3buo061syj] { outline: 2px solid var(--b2b-primary); outline-offset: 1px; }

/* ── Services as asked: one card per service, in a responsive grid ──── */
.gr-asks[b-3buo061syj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

.gr-ask[b-3buo061syj] {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.gr-ask__head[b-3buo061syj] { display: flex; align-items: center; gap: 8px; min-width: 0; }

.gr-ask__icon[b-3buo061syj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 8px;
    background: var(--b2b-info-bg);
    color: var(--b2b-primary);
    font-size: 18px;
}

.gr-ask__title[b-3buo061syj] { font-size: 14px; font-weight: 700; color: var(--b2b-on-surface); white-space: nowrap; }

.gr-ask__where[b-3buo061syj] {
    min-width: 0;
    font-size: 12.5px;
    color: var(--b2b-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-ask__facts[b-3buo061syj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px 14px;
    margin: 10px 0 0;
    padding-block-start: 10px;
    border-block-start: 1px dashed var(--b2b-border);
}

.gr-ask__facts dt[b-3buo061syj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.gr-ask__facts dd[b-3buo061syj] { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); overflow-wrap: anywhere; }

.gr-note[b-3buo061syj] {
    margin-block-start: 8px;
    padding: 6px 10px;
    border-inline-start: 3px solid var(--b2b-warn-fg);
    border-radius: 0 6px 6px 0;
    background: var(--b2b-warn-bg);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--b2b-on-surface);
    white-space: pre-wrap;
}

.gr-chip[b-3buo061syj] {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--b2b-container);
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.gr-muted[b-3buo061syj] { color: var(--b2b-on-surface-variant); }

.gr-route-short[b-3buo061syj] { white-space: nowrap; }

/* ── Quote card (Phase 2) ─────────────────────────────────────────────── */
.gr-quote--open[b-3buo061syj] { border-color: var(--b2b-warn-fg, #f59e0b); box-shadow: 0 0 0 3px var(--b2b-warn-bg, rgba(245, 158, 11, .12)); }
.gr-quote__version[b-3buo061syj] { font-weight: 500; color: var(--b2b-on-surface-variant, #6b7280); font-size: .85em; margin-inline-start: .35rem; }
.gr-quote__hero[b-3buo061syj] { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .75rem 0 1rem; }
.gr-quote__label[b-3buo061syj] { display: block; font-size: .8rem; color: var(--b2b-on-surface-variant, #6b7280); margin-bottom: .15rem; }
.gr-quote__total[b-3buo061syj] { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.gr-quote__validity[b-3buo061syj] { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--b2b-on-surface, #374151); padding: .35rem .6rem; border-radius: 999px; background: var(--b2b-container-low, #f3f4f6); }
.gr-quote__validity .material-symbols-outlined[b-3buo061syj] { font-size: 18px; }
.gr-quote__validity--soon[b-3buo061syj] { background: var(--b2b-warn-bg, #fef3c7); color: var(--b2b-warn-fg, #92400e); }
.gr-quote__validity--over[b-3buo061syj] { background: var(--b2b-err-bg, #fee2e2); color: var(--b2b-err-fg, #991b1b); }
.gr-quote__validity--closed[b-3buo061syj] { opacity: .7; }
.gr-quote__until[b-3buo061syj] { opacity: .75; }
.gr-quote__lines[b-3buo061syj] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.gr-quote__lines th[b-3buo061syj], .gr-quote__lines td[b-3buo061syj] { padding: .45rem .5rem; border-bottom: 1px solid var(--b2b-border, #eef0f3); text-align: start; vertical-align: top; }
.gr-quote__lines th[b-3buo061syj] { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--b2b-on-surface-variant, #6b7280); font-weight: 600; }
.gr-quote__lines .gr-num[b-3buo061syj] { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-quote__lines tfoot td[b-3buo061syj] { border-bottom: 0; color: var(--b2b-on-surface-variant, #4b5563); }
.gr-quote__lines tfoot tr:first-child td[b-3buo061syj] { padding-top: .75rem; }
.gr-quote__basis[b-3buo061syj] { display: block; font-size: .75rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-quote__discount td[b-3buo061syj] { color: var(--b2b-ok-fg, #15803d); }
.gr-quote__grand td[b-3buo061syj] { font-weight: 700; color: var(--b2b-on-surface, #111827); font-size: 1rem; border-top: 2px solid var(--b2b-border, #e5e7eb); }
.gr-quote__note[b-3buo061syj] { display: flex; gap: .5rem; align-items: flex-start; margin: .9rem 0 0; padding: .7rem .8rem; background: var(--b2b-container-low, #f8fafc); border-radius: 10px; font-size: .9rem; }
.gr-quote__note .material-symbols-outlined[b-3buo061syj] { font-size: 18px; color: var(--b2b-primary, #003d9b); }
.gr-quote__terms[b-3buo061syj], .gr-quote__history[b-3buo061syj] { margin-top: .75rem; font-size: .9rem; }
.gr-quote__terms summary[b-3buo061syj], .gr-quote__history summary[b-3buo061syj] { cursor: pointer; font-weight: 600; color: var(--b2b-on-surface, #374151); }
.gr-quote__terms p[b-3buo061syj] { white-space: pre-wrap; margin: .5rem 0 0; color: var(--b2b-on-surface-variant, #4b5563); }
.gr-quote__history ul[b-3buo061syj] { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.gr-quote__history li[b-3buo061syj] { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; color: var(--b2b-on-surface-variant, #4b5563); }
.gr-quote__declined[b-3buo061syj] { margin: .75rem 0 0; color: var(--b2b-err-fg, #991b1b); font-size: .9rem; }
.gr-quote__actions[b-3buo061syj] { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.gr-quote__hint[b-3buo061syj] { margin: .4rem 0 0; font-size: .8rem; color: var(--b2b-on-surface-variant, #6b7280); }

/* ── Money (Phase 3): schedule, accept & pay, payments ─────────────────── */
.gr-schedule[b-3buo061syj] { margin-top: 1rem; }
.gr-schedule__title[b-3buo061syj] { margin: 0 0 .4rem; font-weight: 600; font-size: .9rem; color: var(--b2b-on-surface, #111827); }
.gr-schedule__plan[b-3buo061syj] { font-weight: 500; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-schedule__table tbody td:first-child[b-3buo061syj] { font-weight: 500; }

.gr-pay[b-3buo061syj] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--b2b-border, #e5e7eb);
    border-radius: var(--b2b-r, 12px);
    background: var(--b2b-container-low, #f8fafc);
}
.gr-pay__title[b-3buo061syj] { margin: 0; font-weight: 700; color: var(--b2b-on-surface, #111827); }
.gr-pay__lead[b-3buo061syj] { margin: .25rem 0 .75rem; font-size: .85rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-pay__grid[b-3buo061syj] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: .75rem; }
.gr-pay__grid > div[b-3buo061syj],
.gr-payments__totals > div[b-3buo061syj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--b2b-surface, #fff);
    border: 1px solid var(--b2b-border, #e5e7eb);
    border-radius: 10px;
    min-width: 0;
}
.gr-pay__k[b-3buo061syj] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-pay__v[b-3buo061syj] { font-size: 15px; font-weight: 700; color: var(--b2b-on-surface, #111827); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gr-pay__na[b-3buo061syj] { font-size: 13px; font-weight: 500; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-pay__loading[b-3buo061syj] { margin: 0 0 .75rem; font-size: .85rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-pay__alert[b-3buo061syj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0 0 .75rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    font-size: .85rem;
}
.gr-pay__alert--warn[b-3buo061syj] { background: var(--b2b-warn-bg, #fef3c7); color: var(--b2b-warn-fg, #92400e); }
.gr-pay__alert--err[b-3buo061syj] { background: var(--b2b-err-bg, #fee2e2); color: var(--b2b-err-fg, #991b1b); }
.gr-pay__alert .vbd-btn[b-3buo061syj] { margin-inline-start: auto; }

.gr-payments__totals[b-3buo061syj] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: .5rem 0 .9rem; }
.gr-payments__table td[b-3buo061syj] { vertical-align: middle; }
.gr-payments__table td:first-child[b-3buo061syj] { font-weight: 500; white-space: nowrap; }
.gr-payments__next td[b-3buo061syj] { background: var(--b2b-info-bg, #eff6ff); }
.gr-payments__meta[b-3buo061syj] { display: block; font-size: .75rem; color: var(--b2b-on-surface-variant, #6b7280); margin-top: .2rem; }

@media (max-width: 640px) {
    .gr-pay__grid[b-3buo061syj] { grid-template-columns: 1fr; }
}

/* ── Roster and files (Phase 4) ───────────────────────────────────────── */
.gr-roster__bar[b-3buo061syj] { block-size: 8px; border-radius: 999px; background: var(--b2b-container-low, #eef0f3); overflow: hidden; margin: .5rem 0 .75rem; }
.gr-roster__bar span[b-3buo061syj] { display: block; block-size: 100%; background: var(--b2b-primary, #003d9b); border-radius: inherit; transition: inline-size .3s ease; }
.gr-roster__deadline[b-3buo061syj] { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; padding: .35rem .6rem; border-radius: 999px; font-size: .85rem; background: var(--b2b-container-low, #f3f4f6); color: var(--b2b-on-surface, #374151); }
.gr-roster__deadline .material-symbols-outlined[b-3buo061syj] { font-size: 18px; }
.gr-roster__deadline--over[b-3buo061syj] { background: var(--b2b-err-bg, #fee2e2); color: var(--b2b-err-fg, #991b1b); }
.gr-roster__table td[b-3buo061syj] { vertical-align: middle; }
.gr-roster__native[b-3buo061syj] { display: block; font-size: .8rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-roster__table .b2b-chip[b-3buo061syj] { margin-inline-start: .35rem; vertical-align: middle; }
.gr-roster__cancelled td[b-3buo061syj] { opacity: .55; text-decoration: line-through; }
.gr-roster__actions[b-3buo061syj] { white-space: nowrap; text-align: end; }
.gr-roster__cta[b-3buo061syj] { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.gr-roster__hint[b-3buo061syj] { font-size: .85rem; color: var(--b2b-on-surface-variant, #6b7280); }
.vbd-btn--small[b-3buo061syj] { padding: 4px 8px; min-inline-size: 0; }
.vbd-btn--small .material-symbols-outlined[b-3buo061syj] { font-size: 18px; }

.gr-files .vbd-sub[b-3buo061syj] { margin-top: 1rem; }
.gr-files__new[b-3buo061syj] { border-inline-start: 3px solid var(--b2b-warn-fg, #f59e0b); }
.gr-files__upload[b-3buo061syj] { margin-top: .75rem; padding: .9rem; border: 1px dashed var(--b2b-border, #d1d5db); border-radius: var(--b2b-r, 12px); }
.gr-files__pick[b-3buo061syj] { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Change & cancellation ──────────────────────────────────────────── */
.gr-svc .vbd-card__head[b-3buo061syj] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.gr-svc .vbd-card__head .vbd-card__lead[b-3buo061syj] { margin-block-end: 0; }
.gr-svc__empty[b-3buo061syj] { margin-block-start: .75rem; }
.gr-svc__list[b-3buo061syj] { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.gr-svc__item[b-3buo061syj] { border: 1px solid var(--b2b-border, #e5e7eb); border-radius: var(--b2b-r, 12px); overflow: hidden; }
.gr-svc__item--quoted[b-3buo061syj] { border-color: var(--b2b-warn-fg, #f59e0b); box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
.gr-svc__row[b-3buo061syj] { display: flex; align-items: center; gap: .75rem; inline-size: 100%; min-block-size: 44px; padding: .65rem .9rem; border: 0; background: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.gr-svc__row:hover[b-3buo061syj] { background: var(--b2b-container-low, #f9fafb); }
.gr-svc__ico[b-3buo061syj] { font-size: 22px; color: var(--b2b-primary, #003d9b); flex-shrink: 0; }
.gr-svc__main[b-3buo061syj] { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; flex: 1; }
.gr-svc__name[b-3buo061syj] { font-weight: 600; }
.gr-svc__meta[b-3buo061syj] { font-size: .8rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-svc__amount[b-3buo061syj] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-svc__amount--refund[b-3buo061syj] { color: var(--b2b-ok-fg, #15803d); }
.gr-svc__amount--charge[b-3buo061syj] { color: var(--b2b-err-fg, #b91c1c); }
.gr-svc__chev[b-3buo061syj] { color: var(--b2b-on-surface-variant, #6b7280); }
.gr-svc__body[b-3buo061syj] { padding: .25rem .9rem .9rem; border-block-start: 1px solid var(--b2b-border, #e5e7eb); }
.gr-svc__facts[b-3buo061syj] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1rem; margin: .75rem 0; }
.gr-svc__facts > div[b-3buo061syj] { display: flex; flex-direction: column; gap: .1rem; }
.gr-svc__facts dt[b-3buo061syj] { font-size: .78rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-svc__facts dd[b-3buo061syj] { margin: 0; font-weight: 500; }
.gr-svc__quote[b-3buo061syj] { margin-block-start: .5rem; padding: .75rem .9rem; border-radius: var(--b2b-r, 12px); background: var(--b2b-container-low, #f9fafb); }
.gr-svc__quote .vbd-sub[b-3buo061syj] { margin-block-start: 0; }
.gr-svc__net dt[b-3buo061syj], .gr-svc__net dd[b-3buo061syj] { font-weight: 700; }
.gr-svc__net--refund dd[b-3buo061syj] { color: var(--b2b-ok-fg, #15803d); }
.gr-svc__net--charge dd[b-3buo061syj] { color: var(--b2b-err-fg, #b91c1c); }
.gr-svc__validity[b-3buo061syj] { display: inline-flex; align-items: center; gap: .35rem; margin: .5rem 0 0; font-size: .85rem; color: var(--b2b-on-surface-variant, #6b7280); }
.gr-svc__validity .material-symbols-outlined[b-3buo061syj] { font-size: 18px; }
.gr-svc__validity--over[b-3buo061syj] { color: var(--b2b-err-fg, #b91c1c); }
.gr-svc__actions[b-3buo061syj] { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .75rem; }
.gr-svc__actions--secondary[b-3buo061syj] { margin-block-start: .5rem; }
.gr-svc__trail[b-3buo061syj] { margin-block-start: 1rem; }
.gr-svc__input[b-3buo061syj] { margin-block-start: .75rem; }
.gr-roster__notice[b-3buo061syj] { margin: .5rem 0 0; font-size: .85rem; color: var(--b2b-success, #15803d); }

/* ------------------------------ itinerary -------------------------------- */
/* The aside shows the route at a glance; the full itinerary is a table in the main column. */
.vbd-facts > .gr-itin-facts[b-3buo061syj] { grid-column: 1 / -1; }

.gr-tablewrap[b-3buo061syj] { border: 1px solid var(--b2b-border); border-radius: var(--b2b-r); }

.gr-itin td[b-3buo061syj] { vertical-align: middle; }
.gr-itin__n[b-3buo061syj] { inline-size: 44px; }
.gr-itin__nights[b-3buo061syj] { inline-size: 110px; white-space: nowrap; }
.gr-itin__home td[b-3buo061syj] { background: var(--b2b-container-low); }

.gr-itin__dot[b-3buo061syj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: var(--b2b-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.gr-itin__dot--home[b-3buo061syj] { background: var(--b2b-container); color: var(--b2b-on-surface-variant); font-size: 15px; }

.gr-nights[b-3buo061syj] {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--b2b-info-bg);
    color: var(--b2b-info-fg);
    font-size: 12px;
    font-weight: 700;
}
/* /Pages/GroupRequests/RequestWizard.razor.rz.scp.css */
.bw[b-lk8sncylei] {
    --bw-primary: #0066ff;
    font-family: 'Inter', system-ui, sans-serif;
    color: #111827;
}

/* ───────────────────────────────────────────────────────────────────────────
   Visa booking wizard — the same visual language as the FlightCloud and
   HotelCloud wizards (bw-*): step indicator, white cards, tinted applicant
   cards with a lead accent, and one sticky navigation footer. An agent moves
   between the three funnels all day and should not have to learn a second set
   of controls for a visa.

   ::deep throughout, because the classes sit on MudBlazor components
   (MudPaper.bw-card, MudGrid.bw-guest__grid) whose markup this component does
   not itself render.

   The structural rules below are copied verbatim from the flight wizard so the
   three genuinely match rather than merely resemble each other. That includes
   its hardcoded palette (#0066ff and friends) rather than the --b2b-* tokens
   the rest of this funnel uses: making visa the one wizard on tokens would
   reintroduce exactly the inconsistency this file exists to remove. Moving all
   three onto tokens is worth doing — in one change, across all three.
   ─────────────────────────────────────────────────────────────────────────── */

.bw[b-lk8sncylei]  .bw-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
}

/* The desk hero heads the wizard and carries the stepper as its white card. */
.bw[b-lk8sncylei]  .sdh { margin-bottom: 18px; }
.bw[b-lk8sncylei]  .sdh__box .bw-steps {
    margin-bottom: 0;
    border: 1px solid #e3e5ee;
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow:
        0 24px 48px -24px rgba(6, 22, 52, 0.45),
        0 8px 20px -12px rgba(0, 102, 255, 0.25);
}

.bw[b-lk8sncylei]  .bw-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.bw[b-lk8sncylei]  .bw-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.bw[b-lk8sncylei]  .bw-step__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    background: #eef2f7;
    color: #94a3b8;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bw[b-lk8sncylei]  .bw-step__num .material-symbols-outlined { font-size: 18px; }

.bw[b-lk8sncylei]  .bw-step__label {
    font-size: 13.5px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}

.bw[b-lk8sncylei]  .bw-step--active .bw-step__num {
    background: var(--bw-primary);
    color: #fff;
    border-color: rgba(0, 102, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}

.bw[b-lk8sncylei]  .bw-step--active .bw-step__label { color: #111827; }

.bw[b-lk8sncylei]  .bw-step--done .bw-step__num { background: #10b981; color: #fff; }

.bw[b-lk8sncylei]  .bw-step--done .bw-step__label { color: #047857; }

.bw[b-lk8sncylei]  .bw-step__bar {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}

.bw[b-lk8sncylei]  .bw-step__bar--done { background: #10b981; }

.bw[b-lk8sncylei]  .bw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.bw[b-lk8sncylei]  .bw-main { min-width: 0; }

.bw[b-lk8sncylei]  .bw-footer__deadline { display: none; }

@media (max-width: 900px) {
    .bw[b-lk8sncylei]  .bw-layout { grid-template-columns: 1fr; }
    .bw[b-lk8sncylei]  .bw-side { position: static; order: -1; }

    /* Pin the footer to the viewport rather than to the end of the column, so
       the total, the deadline and the primary action stay on screen for the
       whole of a long passenger form. */
    .bw[b-lk8sncylei]  .bw-footer {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        border-radius: 0;
        border-inline: none;
        border-block-end: none;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, 0.45);
    }
    .bw[b-lk8sncylei]  .bw-footer__mid { flex: 1 1 100%; order: -1; align-items: flex-start; text-align: start; }
    .bw[b-lk8sncylei]  .bw-footer__deadline { display: block; }
    .bw[b-lk8sncylei]  .bw-back { flex: 0 0 auto; }
    .bw[b-lk8sncylei]  .bw-continue,
    .bw[b-lk8sncylei]  .bw-footer__actions { flex: 1 1 auto; }

    /* Clear the fixed footer so the last field is never trapped under it. */
    .bw[b-lk8sncylei]  .bw-layout { padding-bottom: 108px; }
}

.bw[b-lk8sncylei]  .bw-guest__extras {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
    border-top: 1px dashed #e2e8f0;
}

.bw[b-lk8sncylei]  .bw-guest__extras-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.bw[b-lk8sncylei]  .bw-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: none;
}

.bw[b-lk8sncylei]  .bw-error { white-space: pre-line; }

.bw[b-lk8sncylei]  .bw-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    position: sticky;
    bottom: 12px;
    box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.5);
}

.bw[b-lk8sncylei]  .bw-footer__mid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.bw[b-lk8sncylei]  .bw-footer__note { font-size: 12px; color: #6b7280; }

.bw[b-lk8sncylei]  .bw-footer__total { font-size: 15px; color: #374151; }

.bw[b-lk8sncylei]  .bw-footer__total strong { color: #111827; }

.bw[b-lk8sncylei]  .bw-back,
.bw[b-lk8sncylei]  .bw-continue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 11px;
    padding: 11px 20px;
    transition: filter 0.15s, background 0.15s, transform 0.12s, border-color 0.15s;
    flex: 0 0 auto;
}

.bw[b-lk8sncylei]  .bw-back {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.bw[b-lk8sncylei]  .bw-back:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; }

.bw[b-lk8sncylei]  .bw-continue {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
}

.bw[b-lk8sncylei]  .bw-continue:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }

.bw[b-lk8sncylei]  .bw-continue--pay { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7); }

.bw[b-lk8sncylei]  .bw-back:disabled,
.bw[b-lk8sncylei]  .bw-continue:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

.bw[b-lk8sncylei]  .bw-back .material-symbols-outlined,
.bw[b-lk8sncylei]  .bw-continue .material-symbols-outlined { font-size: 18px; }

.bw[b-lk8sncylei]  .bw-footer__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

@media (max-width: 640px) {
    .bw[b-lk8sncylei]  .bw-footer { flex-wrap: wrap; }
    .bw[b-lk8sncylei]  .bw-footer__mid { order: -1; flex-basis: 100%; }
    .bw[b-lk8sncylei]  .bw-footer__actions { flex-basis: 100%; }
    .bw[b-lk8sncylei]  .bw-footer__actions .bw-hold-btn,
    .bw[b-lk8sncylei]  .bw-footer__actions .bw-continue { flex: 1 1 0; justify-content: center; }
}

.bw[b-lk8sncylei]  .bw-guest {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px 4px;
    margin-top: 10px;
    transition: border-color 0.15s, background 0.15s;
}

.bw[b-lk8sncylei]  .bw-guest:hover { border-color: #cbd5e1; }

.bw[b-lk8sncylei]  .bw-guest:focus-within {
    background: #ffffff;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.bw[b-lk8sncylei]  .bw-guest--lead {
    border-inline-start: 3px solid var(--bw-primary);
    padding-inline-start: 12px;
}

.bw[b-lk8sncylei]  .bw-guest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.bw[b-lk8sncylei]  .bw-guest__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #334155;
}

.bw[b-lk8sncylei]  .bw-guest__badge strong { color: #0f172a; }

.bw[b-lk8sncylei]  .bw-guest__badge .material-symbols-outlined {
    font-size: 18px;
    color: var(--bw-primary);
}

.bw[b-lk8sncylei]  .bw-guest__lead {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 102, 255, 0.12);
    color: var(--bw-primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 4px;
}

.bw[b-lk8sncylei]  .bw-guest__grid { margin-bottom: 0 !important; }

.bw[b-lk8sncylei]  .bw-spin {
    display: inline-block;
    animation: bw-spin-b-lk8sncylei 0.9s linear infinite;
}

@keyframes bw-spin-b-lk8sncylei { to { transform: rotate(360deg); } }

.bw[b-lk8sncylei]  .bw-nat-item { display: flex; align-items: center; gap: 10px; }

.bw[b-lk8sncylei]  .bw-nat-item__code {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1px 6px;
    min-width: 30px;
    text-align: center;
}

.bw[b-lk8sncylei]  .bw-nat-item__name { font-size: 13.5px; color: #0f172a; }

.bw[b-lk8sncylei]  .bw-nat-empty { padding: 8px 12px; font-size: 13px; color: #94a3b8; }

.bw[b-lk8sncylei]  .bw-continue .bw-spin { font-size: 18px !important; }

/* ─── Aside ─── */

.bw[b-lk8sncylei]  .bw-side {
    position: sticky;
    top: 84px;
    align-self: start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    min-width: 0;
}

.bw[b-lk8sncylei]  .bw-side__title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}

/* ─── Visa-specific additions ─────────────────────────────────────────────── */

.bw[b-lk8sncylei]  .bw-guest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bw[b-lk8sncylei]  .bw-guest__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #111827;
}

.bw[b-lk8sncylei]  .bw-guest__badge .material-symbols-outlined {
    font-size: 19px;
    color: var(--bw-primary);
}

.bw[b-lk8sncylei]  .bw-guest__type {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11.5px;
    font-weight: 700;
}

.bw[b-lk8sncylei]  .bw-guest__hint {
    font-size: 12px;
    color: #6b7280;
}

/* ─── Review recap ─── */

.bw[b-lk8sncylei]  .bw-recap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bw[b-lk8sncylei]  .bw-recap > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bw[b-lk8sncylei]  .bw-recap__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bw[b-lk8sncylei]  .bw-recap__v {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}

.bw[b-lk8sncylei]  .bw-table { font-size: 13px; }
.bw[b-lk8sncylei]  .bw-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bw[b-lk8sncylei]  .bw-terms {
    line-height: 1.7;
    white-space: pre-line;
}

.bw[b-lk8sncylei]  .bw-terms--strong {
    font-weight: 600;
    color: #111827;
}

/* ─── Payment ─── */

.bw[b-lk8sncylei]  .bw-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.bw[b-lk8sncylei]  .bw-pay > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}

.bw[b-lk8sncylei]  .bw-pay__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bw[b-lk8sncylei]  .bw-pay__v {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.bw[b-lk8sncylei]  .bw-pay__na {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

/* ─── Aside ─── */

.bw[b-lk8sncylei]  .bw-side__sub {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 12px;
}

.bw[b-lk8sncylei]  .bw-side__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    color: #6b7280;
}

.bw[b-lk8sncylei]  .bw-side__total strong {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}

/* ─── Footer additions ─── */

.bw[b-lk8sncylei]  .bw-footer__mid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bw[b-lk8sncylei]  .bw-footer__total {
    font-size: 13.5px;
    color: #4b5563;
}

.bw[b-lk8sncylei]  .bw-footer__total strong {
    font-weight: 800;
    color: #111827;
}

/* A disabled Continue with no stated reason is where a funnel loses people. */
.bw[b-lk8sncylei]  .bw-footer__reason {
    font-size: 12px;
    color: #b91c1c;
}

/* ─── Empty state ─── */

.bw[b-lk8sncylei]  .bw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
}

.bw[b-lk8sncylei]  .bw-empty__icon {
    font-size: 44px;
    color: #9ca3af;
}

.bw[b-lk8sncylei]  .bw-empty__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

@media (max-width: 900px) {
    .bw[b-lk8sncylei]  .bw-recap,
    .bw[b-lk8sncylei]  .bw-pay {
        grid-template-columns: 1fr;
    }
}

/* ── Service picker (step 2) ─────────────────────────────────────────────
   One tile per service type, toggled on and off. The selected tile takes
   the same accent as the active step so the two states read as one system. */
.bw[b-lk8sncylei]  .gr-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.bw[b-lk8sncylei]  .gr-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.bw[b-lk8sncylei]  .gr-pick .material-symbols-outlined { font-size: 26px; color: #6b7280; }
.bw[b-lk8sncylei]  .gr-pick:hover { border-color: var(--bw-primary); }

.bw[b-lk8sncylei]  .gr-pick--on {
    border-color: var(--bw-primary);
    background: color-mix(in srgb, var(--bw-primary) 8%, #fff);
    color: var(--bw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-primary) 18%, transparent);
}

.bw[b-lk8sncylei]  .gr-pick--on .material-symbols-outlined { color: var(--bw-primary); }

.bw[b-lk8sncylei]  .gr-pick__check {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    font-size: 18px !important;
}

.bw[b-lk8sncylei]  .gr-pick:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; }

/* ── Form fields (all steps) ─────────────────────────────────────────────
   The panel-wide "editorial" input style draws outlines at 10% opacity,
   which on a white card leaves a long form with no visible fields at all:
   agents could not tell where to type. Inside this wizard every outlined
   field gets a real border, a clear hover and a focus ring in the accent,
   and a label dark enough to read at a glance. The !important is only there
   to out-rank the equally !important global rule in wwwroot/css/app.css. */
.bw[b-lk8sncylei]  .gr-form .mud-input-outlined .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
    border-width: 1px;
    border-radius: 10px !important;
}

.bw[b-lk8sncylei]  .gr-form .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: #64748b !important;
}

.bw[b-lk8sncylei]  .gr-form .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--bw-primary) !important;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14) !important;
}

.bw[b-lk8sncylei]  .gr-form .mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: #dc2626 !important;
}

.bw[b-lk8sncylei]  .gr-form .mud-input-outlined { background: #fff; border-radius: 10px; }

.bw[b-lk8sncylei]  .gr-form .mud-input-label { color: #475569; font-weight: 500; }
.bw[b-lk8sncylei]  .gr-form .mud-input-label.mud-input-label-inputcontrol { font-size: 14px; }
.bw[b-lk8sncylei]  .gr-form .mud-input-focused ~ .mud-input-label,
.bw[b-lk8sncylei]  .gr-form .mud-input-label-animated.mud-input-label-shrink { color: #334155; }
.bw[b-lk8sncylei]  .gr-form .mud-input > input,
.bw[b-lk8sncylei]  .gr-form .mud-input textarea { font-size: 14.5px; color: #0f172a; }
.bw[b-lk8sncylei]  .gr-form .mud-input-helper-text { color: #64748b; font-size: 12px; }
.bw[b-lk8sncylei]  .gr-form .mud-input-helper-text.mud-input-error { color: #dc2626; }

/* ── Card heading ─── */
.bw[b-lk8sncylei]  .gr-card-head { margin-bottom: 6px; }
.bw[b-lk8sncylei]  .gr-card-head__title { font-size: 17px; font-weight: 800; color: #0f172a; }
.bw[b-lk8sncylei]  .gr-card-head__lead { font-size: 13.5px; color: #64748b; margin-top: 2px; }

/* ── Sections inside the trip card ─── */
.bw[b-lk8sncylei]  .gr-sec {
    padding: 18px 0 6px;
    border-top: 1px solid #eef2f7;
}

.bw[b-lk8sncylei]  .gr-card-head + .gr-sec { border-top: none; padding-top: 12px; }

.bw[b-lk8sncylei]  .gr-sec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bw[b-lk8sncylei]  .gr-sec__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--bw-primary);
    background: rgba(0, 102, 255, 0.09);
    flex: 0 0 auto;
}

.bw[b-lk8sncylei]  .gr-sec__title { font-size: 14.5px; font-weight: 700; color: #0f172a; }

.bw[b-lk8sncylei]  .gr-sec__chip {
    margin-inline-start: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bw[b-lk8sncylei]  .gr-sec__opt {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
}

/* ── Flexible-dates toggle: a full-height tile, not a stray checkbox ─── */
.bw[b-lk8sncylei]  .gr-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bw[b-lk8sncylei]  .gr-toggle:hover { border-color: #64748b; }
.bw[b-lk8sncylei]  .gr-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bw[b-lk8sncylei]  .gr-toggle:focus-within { border-color: var(--bw-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14); }

.bw[b-lk8sncylei]  .gr-toggle__box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex: 0 0 auto;
}

.bw[b-lk8sncylei]  .gr-toggle__text { display: flex; flex-direction: column; min-width: 0; }
.bw[b-lk8sncylei]  .gr-toggle__text strong { font-size: 14px; color: #0f172a; font-weight: 600; }
.bw[b-lk8sncylei]  .gr-toggle__text small { font-size: 12px; color: #64748b; line-height: 1.35; }

.bw[b-lk8sncylei]  .gr-toggle--on { border-color: var(--bw-primary); background: rgba(0, 102, 255, 0.05); }
.bw[b-lk8sncylei]  .gr-toggle--on .gr-toggle__box { background: var(--bw-primary); border-color: var(--bw-primary); }

/* ── Passenger counters ─── */
.bw[b-lk8sncylei]  .gr-pax {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .bw[b-lk8sncylei]  .gr-pax { grid-template-columns: 1fr; }
}

.bw[b-lk8sncylei]  .gr-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.bw[b-lk8sncylei]  .gr-counter:focus-within { border-color: var(--bw-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14); }

.bw[b-lk8sncylei]  .gr-counter__label { display: flex; flex-direction: column; min-width: 0; }
.bw[b-lk8sncylei]  .gr-counter__label strong { font-size: 14px; font-weight: 600; color: #0f172a; }
.bw[b-lk8sncylei]  .gr-counter__label small { font-size: 12px; color: #64748b; white-space: nowrap; }

.bw[b-lk8sncylei]  .gr-counter__ctl { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.bw[b-lk8sncylei]  .gr-counter__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--bw-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.bw[b-lk8sncylei]  .gr-counter__btn .material-symbols-outlined { font-size: 18px; }
.bw[b-lk8sncylei]  .gr-counter__btn:hover:not(:disabled) { background: rgba(0, 102, 255, 0.08); border-color: var(--bw-primary); }
.bw[b-lk8sncylei]  .gr-counter__btn:disabled { color: #cbd5e1; cursor: not-allowed; }
.bw[b-lk8sncylei]  .gr-counter__btn:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; }

.bw[b-lk8sncylei]  .gr-counter__input {
    width: 44px;
    text-align: center;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    -moz-appearance: textfield;
}

.bw[b-lk8sncylei]  .gr-counter__input::-webkit-outer-spin-button,
.bw[b-lk8sncylei]  .gr-counter__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bw[b-lk8sncylei]  .gr-counter__input:focus { outline: none; }


/* ── Summary aside ───────────────────────────────────────────────────────
   Label-over-value rows instead of the four-column recap grid, which in a
   320px card wrapped every value onto two or three lines. */
.bw[b-lk8sncylei]  .gr-side { padding: 18px; }

.bw[b-lk8sncylei]  .gr-side__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bw-primary);
}

.bw[b-lk8sncylei]  .gr-side__title {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.bw[b-lk8sncylei]  .gr-side__title--empty { color: #94a3b8; font-weight: 700; }

.bw[b-lk8sncylei]  .gr-side__type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.bw[b-lk8sncylei]  .gr-side__type .material-symbols-outlined { font-size: 16px; color: #64748b; }

/* Route: two stops joined by a dashed rail. */
.bw[b-lk8sncylei]  .gr-side__route {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 4px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.bw[b-lk8sncylei]  .gr-side__route::before {
    content: "";
    position: absolute;
    inset-inline-start: 27px;
    top: 36px;
    bottom: 36px;
    border-inline-start: 2px dashed #cbd5e1;
}

.bw[b-lk8sncylei]  .gr-side__stop { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }

.bw[b-lk8sncylei]  .gr-side__stop > .material-symbols-outlined {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dbe3ee;
    color: var(--bw-primary);
    font-size: 17px;
}

.bw[b-lk8sncylei]  .gr-side__stop > div { display: flex; flex-direction: column; min-width: 0; }
.bw[b-lk8sncylei]  .gr-side__stop small { font-size: 11.5px; color: #64748b; }

.bw[b-lk8sncylei]  .gr-side__stop strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bw[b-lk8sncylei]  .gr-side__missing { color: #94a3b8 !important; font-weight: 500 !important; font-style: italic; }

.bw[b-lk8sncylei]  .gr-side__facts { margin: 0; }

.bw[b-lk8sncylei]  .gr-side__fact {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}

.bw[b-lk8sncylei]  .gr-side__fact > .material-symbols-outlined { grid-row: span 2; font-size: 20px; color: #64748b; padding-top: 1px; }
.bw[b-lk8sncylei]  .gr-side__fact dt { font-size: 11.5px; color: #64748b; font-weight: 600; }

.bw[b-lk8sncylei]  .gr-side__fact dd {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bw[b-lk8sncylei]  .gr-side__fact dd small { font-size: 12px; font-weight: 500; color: #64748b; }

.bw[b-lk8sncylei]  .gr-side__svcs { display: flex; flex-wrap: wrap; gap: 4px; }

.bw[b-lk8sncylei]  .gr-side__svcs .material-symbols-outlined {
    font-size: 17px;
    padding: 4px;
    border-radius: 7px;
    color: var(--bw-primary);
    background: rgba(0, 102, 255, 0.09);
}

.bw[b-lk8sncylei]  .gr-side__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 102, 255, 0.03));
    border: 1px solid rgba(0, 102, 255, 0.16);
}

.bw[b-lk8sncylei]  .gr-side__price > div { display: flex; flex-direction: column; min-width: 0; }
.bw[b-lk8sncylei]  .gr-side__price span { font-size: 12px; font-weight: 700; color: #334155; }
.bw[b-lk8sncylei]  .gr-side__price small { font-size: 11.5px; color: #64748b; line-height: 1.35; }
.bw[b-lk8sncylei]  .gr-side__price strong { font-size: 18px; font-weight: 800; color: var(--bw-primary); white-space: nowrap; }

/* ── Review & submit ─────────────────────────────────────────────────── */
.bw[b-lk8sncylei]  .gr-review-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.bw[b-lk8sncylei]  .gr-review-intro > .material-symbols-outlined {
    font-size: 26px;
    color: #047857;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bw[b-lk8sncylei]  .gr-review { padding: 18px; }

.bw[b-lk8sncylei]  .gr-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.bw[b-lk8sncylei]  .gr-review__edit {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--bw-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.bw[b-lk8sncylei]  .gr-sec__chip + .gr-review__edit { margin-inline-start: 0; }
.bw[b-lk8sncylei]  .gr-review__head .gr-sec__chip { margin-inline-start: auto; }
.bw[b-lk8sncylei]  .gr-review__edit .material-symbols-outlined { font-size: 16px; }
.bw[b-lk8sncylei]  .gr-review__edit:hover { background: rgba(0, 102, 255, 0.06); border-color: var(--bw-primary); }
.bw[b-lk8sncylei]  .gr-review__edit:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; }

.bw[b-lk8sncylei]  .gr-review__route {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.bw[b-lk8sncylei]  .gr-review__stop { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; }

.bw[b-lk8sncylei]  .gr-review__stop > .material-symbols-outlined {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dbe3ee;
    color: var(--bw-primary);
    font-size: 19px;
}

.bw[b-lk8sncylei]  .gr-review__stop > div { display: flex; flex-direction: column; min-width: 0; }
.bw[b-lk8sncylei]  .gr-review__stop small { font-size: 11.5px; color: #64748b; }
.bw[b-lk8sncylei]  .gr-review__stop strong { font-size: 14.5px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.bw[b-lk8sncylei]  .gr-review__arrow { color: #94a3b8; flex: 0 0 auto; }
[dir="rtl"] .bw[b-lk8sncylei]  .gr-review__arrow { transform: scaleX(-1); }

.bw[b-lk8sncylei]  .gr-review__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
}

.bw[b-lk8sncylei]  .gr-review__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bw[b-lk8sncylei]  .gr-review__wide { grid-column: 1 / -1; }

.bw[b-lk8sncylei]  .gr-review__grid dt { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 3px; }

.bw[b-lk8sncylei]  .gr-review__grid dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}

.bw[b-lk8sncylei]  .gr-review__grid dd small { font-size: 12.5px; font-weight: 500; color: #64748b; }
.bw[b-lk8sncylei]  .gr-review__note { font-weight: 500 !important; white-space: pre-line; line-height: 1.55; }

/* Services: a card per service with its facts as chips, not a three-column table. */
.bw[b-lk8sncylei]  .gr-svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.bw[b-lk8sncylei]  .gr-svc {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.bw[b-lk8sncylei]  .gr-svc__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(0, 102, 255, 0.09);
    color: var(--bw-primary);
    font-size: 21px;
}

.bw[b-lk8sncylei]  .gr-svc__body { min-width: 0; flex: 1 1 auto; }
.bw[b-lk8sncylei]  .gr-svc__name { font-size: 14.5px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.bw[b-lk8sncylei]  .gr-svc__facts { display: flex; flex-wrap: wrap; gap: 6px; }

.bw[b-lk8sncylei]  .gr-svc__fact {
    padding: 3px 9px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12.5px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.bw[b-lk8sncylei]  .gr-svc__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    font-size: 12.5px;
    white-space: pre-line;
}

.bw[b-lk8sncylei]  .gr-svc__note .material-symbols-outlined { font-size: 16px; color: #b45309; }

/* What happens next: three numbered steps. */
.bw[b-lk8sncylei]  .gr-next { background: #f8fafc; }

.bw[b-lk8sncylei]  .gr-next__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bw[b-lk8sncylei]  .gr-next__steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
}

.bw[b-lk8sncylei]  .gr-next__num {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bw-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .bw[b-lk8sncylei]  .gr-next__steps,
    .bw[b-lk8sncylei]  .gr-review__grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .bw[b-lk8sncylei]  .gr-review__grid { grid-template-columns: 1fr; }
    .bw[b-lk8sncylei]  .gr-review__route { flex-direction: column; align-items: stretch; }
    .bw[b-lk8sncylei]  .gr-review__arrow { transform: rotate(90deg); align-self: center; }
    [dir="rtl"] .bw[b-lk8sncylei]  .gr-review__arrow { transform: rotate(90deg); }
}

/* An LTR date inside an RTL row: shrink the isolate to its text so it sits at
   the row's start edge instead of stretching and hugging the far side. */
.bw[b-lk8sncylei]  .gr-review__grid dd > bdi,
.bw[b-lk8sncylei]  .gr-side__fact dd > bdi { align-self: flex-start; }

/* ── Itinerary (step 1) ──────────────────────────────────────────────────
   One row per stop: number · place · nights counter · move/remove. A
   multi-city trip ("4 nights Kuala Lumpur, 3 nights Bali") reads top to
   bottom in travel order, and the return date follows the nights. */
.bw[b-lk8sncylei]  .gr-review__route { flex-wrap: wrap; }
.bw[b-lk8sncylei]  .gr-review__stop { min-width: 150px; }

.bw[b-lk8sncylei]  .gr-itin__lead { margin: 14px 0 8px; font-size: 13px; color: #64748b; }

.bw[b-lk8sncylei]  .gr-itin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.bw[b-lk8sncylei]  .gr-itin__stop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.bw[b-lk8sncylei]  .gr-itin__stop:focus-within { border-color: var(--bw-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14); }

.bw[b-lk8sncylei]  .gr-itin__num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bw-primary) 12%, #fff);
    color: var(--bw-primary);
    font-size: 13px;
    font-weight: 800;
}

.bw[b-lk8sncylei]  .gr-itin__place { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bw[b-lk8sncylei]  .gr-itin__dates { font-size: 12px; color: #64748b; margin-top: 2px; }
.bw[b-lk8sncylei]  .gr-itin__unit { font-size: 12.5px; color: #64748b; margin-inline-start: 2px; }

.bw[b-lk8sncylei]  .gr-itin__tools { display: inline-flex; gap: 2px; flex: 0 0 auto; }

.bw[b-lk8sncylei]  .gr-itin__tool {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bw[b-lk8sncylei]  .gr-itin__tool .material-symbols-outlined { font-size: 18px; }
.bw[b-lk8sncylei]  .gr-itin__tool:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.bw[b-lk8sncylei]  .gr-itin__tool--danger:hover:not(:disabled) { background: #fef2f2; color: #b91c1c; }
.bw[b-lk8sncylei]  .gr-itin__tool:disabled { color: #cbd5e1; cursor: not-allowed; }
.bw[b-lk8sncylei]  .gr-itin__tool:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; }

.bw[b-lk8sncylei]  .gr-itin__add {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px dashed var(--bw-primary);
    border-radius: 10px;
    background: transparent;
    color: var(--bw-primary);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.bw[b-lk8sncylei]  .gr-itin__add .material-symbols-outlined { font-size: 20px; }
.bw[b-lk8sncylei]  .gr-itin__add:hover { background: color-mix(in srgb, var(--bw-primary) 8%, #fff); }
.bw[b-lk8sncylei]  .gr-itin__add:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; }

@media (max-width: 640px) {
    .bw[b-lk8sncylei]  .gr-itin__stop { flex-wrap: wrap; }
    .bw[b-lk8sncylei]  .gr-itin__place { flex-basis: calc(100% - 40px); }
    .bw[b-lk8sncylei]  .gr-itin__nights { margin-inline-start: 40px; }
    .bw[b-lk8sncylei]  .gr-itin__tools { margin-inline-start: auto; }
}

/* ── Service tiles: a count once a type has several cards ────────────── */
.bw[b-lk8sncylei]  .gr-pick__count {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bw-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
}

/* ── Per-card actions: Add another of this service · Remove ─────────── */
.bw[b-lk8sncylei]  .gr-card-actions { display: inline-flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.bw[b-lk8sncylei]  .gr-card-add { display: inline-flex; align-items: center; gap: 2px; }
.bw[b-lk8sncylei]  .gr-card-add .material-symbols-outlined { font-size: 16px; }
/* /Pages/HotelCloud/BookingWizard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Booking wizard — Travelio-style step indicator, cards and a single, uniform
   navigation footer (exactly one Back + one Continue per step). ::deep is used
   for descendants so classes applied to MudBlazor components (MudPaper.bw-card)
   are matched too.
   ─────────────────────────────────────────────────────────────────────────── */

.bw[b-t8p20ho10o] {
    --bw-primary: #0066ff;
    font-family: 'Inter', system-ui, sans-serif;
    color: #111827;
}

.bw[b-t8p20ho10o]  .bw-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
}

/* ─── Step indicator ─── */
.bw[b-t8p20ho10o]  .bw-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    overflow-x: auto;
}
.bw[b-t8p20ho10o]  .bw-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.bw[b-t8p20ho10o]  .bw-step__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    background: #eef2f7;
    color: #94a3b8;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bw[b-t8p20ho10o]  .bw-step__num .material-symbols-outlined { font-size: 18px; }
.bw[b-t8p20ho10o]  .bw-step__label {
    font-size: 13.5px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}
.bw[b-t8p20ho10o]  .bw-step--active .bw-step__num {
    background: var(--bw-primary);
    color: #fff;
    border-color: rgba(0, 102, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}
.bw[b-t8p20ho10o]  .bw-step--active .bw-step__label { color: #111827; }
.bw[b-t8p20ho10o]  .bw-step--done .bw-step__num { background: #10b981; color: #fff; }
.bw[b-t8p20ho10o]  .bw-step--done .bw-step__label { color: #047857; }
.bw[b-t8p20ho10o]  .bw-step__bar {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}
.bw[b-t8p20ho10o]  .bw-step__bar--done { background: #10b981; }

/* ─── Cards ─── */
.bw[b-t8p20ho10o]  .bw-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: none;
}

/* ─── Line rows (cart / review) ─── */
.bw[b-t8p20ho10o]  .bw-line {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bw[b-t8p20ho10o]  .bw-line__main { flex: 1 1 auto; min-width: 0; }
.bw[b-t8p20ho10o]  .bw-line__name { font-size: 15.5px; font-weight: 800; color: #111827; }
.bw[b-t8p20ho10o]  .bw-stars { color: #fbbf24; margin-inline-start: 4px; }
.bw[b-t8p20ho10o]  .bw-line__meta { font-size: 13px; color: #4b5563; margin-top: 2px; }
.bw[b-t8p20ho10o]  .bw-line__sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.bw[b-t8p20ho10o]  .bw-line__sub--err { color: #dc2626; font-weight: 600; }
.bw[b-t8p20ho10o]  .bw-line__cxl { font-size: 12px; color: #6b7280; margin-top: 4px; line-height: 1.45; }
.bw[b-t8p20ho10o]  .bw-line__price { text-align: right; flex: 0 0 auto; }
.bw[b-t8p20ho10o]  .bw-line__total { font-size: 17px; font-weight: 800; color: var(--bw-primary); font-variant-numeric: tabular-nums; }
.bw[b-t8p20ho10o]  .bw-line__per { font-size: 12px; color: #6b7280; }

/* ─── Footer: one Back + one Continue ─── */
.bw[b-t8p20ho10o]  .bw-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    position: sticky;
    bottom: 12px;
    box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.5);
}
.bw[b-t8p20ho10o]  .bw-footer__mid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.bw[b-t8p20ho10o]  .bw-footer__note { font-size: 12px; color: #6b7280; }
.bw[b-t8p20ho10o]  .bw-footer__total { font-size: 15px; color: #374151; }
.bw[b-t8p20ho10o]  .bw-footer__total strong { color: #111827; }

.bw[b-t8p20ho10o]  .bw-back,
.bw[b-t8p20ho10o]  .bw-continue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 11px;
    padding: 11px 20px;
    transition: filter 0.15s, background 0.15s, transform 0.12s, border-color 0.15s;
    flex: 0 0 auto;
}
.bw[b-t8p20ho10o]  .bw-back {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}
.bw[b-t8p20ho10o]  .bw-back:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; }
.bw[b-t8p20ho10o]  .bw-continue {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
}
.bw[b-t8p20ho10o]  .bw-continue:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.bw[b-t8p20ho10o]  .bw-continue--pay { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7); }
.bw[b-t8p20ho10o]  .bw-back:disabled,
.bw[b-t8p20ho10o]  .bw-continue:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.bw[b-t8p20ho10o]  .bw-back .material-symbols-outlined,
.bw[b-t8p20ho10o]  .bw-continue .material-symbols-outlined { font-size: 18px; }

@media (max-width: 900px) {
    /* Pin the footer to the viewport rather than to the end of the column, so
       the total and the primary action stay on screen for the whole of a long
       guest form. Matches the flight wizard. */
    .bw[b-t8p20ho10o]  .bw-footer {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        border-radius: 0;
        border-inline: none;
        border-block-end: none;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, 0.45);
    }
    .bw[b-t8p20ho10o]  .bw-footer__mid { order: -1; flex-basis: 100%; align-items: flex-start; text-align: start; }
    .bw[b-t8p20ho10o]  .bw-footer__mid:empty { display: none; }
    .bw[b-t8p20ho10o]  .bw-back { flex: 0 0 auto; }
    .bw[b-t8p20ho10o]  .bw-continue { flex: 1 1 auto; }

    /* Clear the fixed footer so the last field is never trapped under it. */
    .bw[b-t8p20ho10o] { padding-bottom: 104px; }
}

/* ─── Guest cards on the guest step ─── */
/* Each traveler on the booking wizard gets its own bordered, tinted card so the
   four-field row doesn't look like an unstyled wall of inputs. The lead guest
   carries an extra primary-blue accent on the left edge so the agent can spot
   the lead row at a glance. */
.bw[b-t8p20ho10o]  .bw-guest {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px 4px;
    margin-top: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.bw[b-t8p20ho10o]  .bw-guest:hover { border-color: #cbd5e1; }
.bw[b-t8p20ho10o]  .bw-guest:focus-within {
    background: #ffffff;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}
.bw[b-t8p20ho10o]  .bw-guest--lead {
    border-inline-start: 3px solid var(--bw-primary);
    padding-inline-start: 12px;
}
.bw[b-t8p20ho10o]  .bw-guest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.bw[b-t8p20ho10o]  .bw-guest__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #334155;
}
.bw[b-t8p20ho10o]  .bw-guest__badge strong { color: #0f172a; }
.bw[b-t8p20ho10o]  .bw-guest__badge .material-symbols-outlined {
    font-size: 18px;
    color: var(--bw-primary);
}
.bw[b-t8p20ho10o]  .bw-guest__lead {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 102, 255, 0.12);
    color: var(--bw-primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 4px;
}
.bw[b-t8p20ho10o]  .bw-guest__grid { margin-bottom: 0 !important; }

/* ─── Review-step traveler recap ─── */
/* A compact read-only summary of who the agent entered on the Guests step,
   shown inside each cart line so the Review screen actually reviews who is
   being booked (name, lead flag, child age, document number). */
.bw[b-t8p20ho10o]  .bw-review-guests {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bw[b-t8p20ho10o]  .bw-review-guests__head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.bw[b-t8p20ho10o]  .bw-review-guests__head .material-symbols-outlined {
    font-size: 16px;
    color: var(--bw-primary);
}
.bw[b-t8p20ho10o]  .bw-review-room {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.bw[b-t8p20ho10o]  .bw-review-room__label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    line-height: 1.2;
}
.bw[b-t8p20ho10o]  .bw-review-room__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.bw[b-t8p20ho10o]  .bw-review-pax {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 10px;
}
.bw[b-t8p20ho10o]  .bw-review-pax--lead {
    border-color: rgba(0, 102, 255, 0.35);
    background: rgba(0, 102, 255, 0.06);
}
.bw[b-t8p20ho10o]  .bw-review-pax__icon {
    font-size: 15px !important;
    color: var(--bw-primary);
}
.bw[b-t8p20ho10o]  .bw-review-pax__name { font-weight: 700; }
.bw[b-t8p20ho10o]  .bw-review-pax__lead {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bw-primary);
    background: rgba(0, 102, 255, 0.12);
    padding: 1px 6px;
    border-radius: 999px;
}
.bw[b-t8p20ho10o]  .bw-review-pax__meta { font-size: 12px; color: #64748b; }
.bw[b-t8p20ho10o]  .bw-review-pax__doc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #475569;
    font-variant-numeric: tabular-nums;
    padding-inline-start: 6px;
    border-inline-start: 1px solid #e2e8f0;
}
.bw[b-t8p20ho10o]  .bw-review-pax__doc .material-symbols-outlined {
    font-size: 14px !important;
    color: #94a3b8;
}
/* /Pages/HotelCloud/HotelDetail.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Hotel detail — Blazor port of the Travelio storefront HotelDetail page.
   Hero gallery, title block, amenities, room-offer cards and a sticky booking
   widget. B2B addition: per-offer commission breakdown (DirectB2B only).
   ─────────────────────────────────────────────────────────────────────────── */

.hd[b-f67dnx4vc2] {
    --hd-primary: #0066ff;
    --hd-ink: #111827;
    --hd-muted: #6b7280;
    color: var(--hd-ink);
    font-family: 'Inter', system-ui, sans-serif;
}
.ic[b-f67dnx4vc2] { width: 14px; height: 14px; flex: 0 0 auto; }
.ic-ph[b-f67dnx4vc2] { width: 56px; height: 56px; opacity: 0.45; }

.hd-back[b-f67dnx4vc2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    color: var(--hd-primary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
}
.hd-back:hover[b-f67dnx4vc2] { text-decoration: underline; }

.hd-staybar[b-f67dnx4vc2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
    margin: 10px 0 24px;
}
.hd-stay-chip[b-f67dnx4vc2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    min-width: 0;
}
.hd-stay-chip .ic[b-f67dnx4vc2] { color: var(--hd-primary); }
.hd-change[b-f67dnx4vc2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--hd-primary);
    background: rgba(0, 102, 255, 0.06);
    color: var(--hd-primary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.hd-change:hover[b-f67dnx4vc2] { background: rgba(0, 102, 255, 0.12); }
.hd-change--on[b-f67dnx4vc2] { background: var(--hd-primary); color: #fff; }
.hd-change--on .ic[b-f67dnx4vc2] { color: #fff; }
.hd-editor[b-f67dnx4vc2] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
    animation: hd-editor-in-b-f67dnx4vc2 0.16s ease-out;
}
@keyframes hd-editor-in-b-f67dnx4vc2 {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hd-state[b-f67dnx4vc2] { display: flex; align-items: center; gap: 12px; padding: 40px 18px; color: #475569; }
.hd-spinner[b-f67dnx4vc2] { display: inline-flex; gap: 4px; }
.hd-spinner span[b-f67dnx4vc2] { width: 7px; height: 7px; border-radius: 50%; background: var(--hd-primary); animation: hd-bounce-b-f67dnx4vc2 0.9s infinite ease-in-out both; }
.hd-spinner span:nth-child(2)[b-f67dnx4vc2] { animation-delay: 0.12s; }
.hd-spinner span:nth-child(3)[b-f67dnx4vc2] { animation-delay: 0.24s; }
@keyframes hd-bounce-b-f67dnx4vc2 { 0%,80%,100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-5px); opacity: 1; } }

/* ─── Hero gallery ─── */
.hd-gallery[b-f67dnx4vc2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 20px;
}
@media (min-width: 820px) {
    .hd-gallery[b-f67dnx4vc2] { grid-template-columns: 2fr 1fr; height: 380px; }
}
.hd-gallery__main[b-f67dnx4vc2] { position: relative; background: #eef2f7; min-height: 240px; overflow: hidden; }
.hd-gallery__main--clickable[b-f67dnx4vc2] { cursor: pointer; }
.hd-gallery__img[b-f67dnx4vc2] { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hd-gallery__main--clickable:hover .hd-gallery__img[b-f67dnx4vc2], .hd-gallery__cell:hover .hd-gallery__img[b-f67dnx4vc2] { transform: scale(1.04); }
.hd-gallery__ph[b-f67dnx4vc2] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.hd-gallery__view[b-f67dnx4vc2] {
    position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 999px; background: rgba(17, 24, 39, .72); color: #fff;
    font-size: 13px; font-weight: 700; backdrop-filter: blur(2px);
}
.hd-gallery__view .ic[b-f67dnx4vc2] { width: 16px; height: 16px; }
.hd-gallery__side[b-f67dnx4vc2] { display: none; }
@media (min-width: 820px) {
    .hd-gallery__side[b-f67dnx4vc2] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
}
.hd-gallery__cell[b-f67dnx4vc2] { position: relative; cursor: pointer; overflow: hidden; background: #eef2f7; }
.hd-gallery__cell .hd-gallery__img[b-f67dnx4vc2] { border-radius: 0; }
.hd-gallery__more[b-f67dnx4vc2] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(17, 24, 39, .55); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .02em;
}

/* ─── Layout ─── */
.hd-layout[b-f67dnx4vc2] { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 960px) { .hd-layout[b-f67dnx4vc2] { grid-template-columns: 1fr 340px; } }

.hd-main[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.hd-title[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 8px; }
.hd-title__name[b-f67dnx4vc2] { margin: 0; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 26px; font-weight: 800; line-height: 1.15; }
.hd-stars[b-f67dnx4vc2] { display: inline-flex; gap: 2px; color: #fbbf24; }
.hd-stars .ic[b-f67dnx4vc2] { width: 16px; height: 16px; }
.hd-title__meta[b-f67dnx4vc2] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hd-title__loc[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #4b5563; }
.hd-title__loc .ic[b-f67dnx4vc2] { color: #6b7280; }
.hd-score[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 8px; }
.hd-score__badge[b-f67dnx4vc2] { background: #1d4ed8; color: #fff; font-weight: 800; font-size: 14px; padding: 6px 10px; border-radius: 8px 8px 8px 0; font-variant-numeric: tabular-nums; }
.hd-score__text[b-f67dnx4vc2] { display: flex; flex-direction: column; line-height: 1.2; font-size: 12.5px; }
.hd-score__text span[b-f67dnx4vc2] { color: var(--hd-muted); }

.hd-card[b-f67dnx4vc2] { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 18px 20px; }
.hd-h2[b-f67dnx4vc2] { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.hd-desc[b-f67dnx4vc2] { margin: 0; font-size: 14.5px; line-height: 1.7; color: #374151; }

.hd-amenities[b-f67dnx4vc2] { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-amenity[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; background: #f3f4f6; padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.hd-amenity .ic[b-f67dnx4vc2] { color: #10b981; }

/* ─── Rooms ─── */
.hd-empty[b-f67dnx4vc2] { font-size: 14px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 16px; }
.hd-rooms[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 12px; }
.hd-room[b-f67dnx4vc2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}
@media (min-width: 720px) { .hd-room[b-f67dnx4vc2] { grid-template-columns: 1fr 180px 150px; align-items: center; } }
.hd-room__info[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hd-room__name[b-f67dnx4vc2] { font-size: 15.5px; font-weight: 800; color: #111827; }
.hd-room__chips[b-f67dnx4vc2] { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hd-chip[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #374151; background: #f3f4f6; border: 1px solid #e5e7eb; padding: 4px 9px; border-radius: 6px; }
.hd-chip--good[b-f67dnx4vc2] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.hd-chip--good .ic[b-f67dnx4vc2] { color: #10b981; }
.hd-chip--warn[b-f67dnx4vc2] { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.hd-chip--info[b-f67dnx4vc2] { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.hd-room__sleeps[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--hd-muted); }
.hd-room__sleeps .ic[b-f67dnx4vc2] { width: 13px; height: 13px; }
.hd-room__cxl[b-f67dnx4vc2] { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--hd-muted); }

.hd-room__price[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 720px) { .hd-room__price[b-f67dnx4vc2] { align-items: flex-end; text-align: right; } }
.hd-room__old[b-f67dnx4vc2] { font-size: 13px; color: #ef4444; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.hd-room__now[b-f67dnx4vc2] { font-size: 21px; font-weight: 800; color: #111827; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-room__per[b-f67dnx4vc2] { font-size: 12px; color: var(--hd-muted); }
/* Commission earning — matches the hotel-list pill (Results.razor.css .hr-card__comm-pill). */
.hd-room__comm[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 800; color: #047857; background: #ecfdf5; border: 1px solid #6ee7b7; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-room__comm .ic[b-f67dnx4vc2] { color: #059669; width: 13px; height: 13px; }

.hd-room__action[b-f67dnx4vc2] { display: flex; align-items: center; gap: 10px; }
@media (min-width: 720px) { .hd-room__action[b-f67dnx4vc2] { flex-direction: column; align-items: stretch; } }
.hd-qty[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 8px; justify-content: center; border: 1px solid #d1d5db; border-radius: 9px; padding: 4px; }
.hd-qty__btn[b-f67dnx4vc2] { width: 28px; height: 28px; border-radius: 7px; border: none; background: #f3f4f6; color: #111827; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hd-qty__btn:hover:not(:disabled)[b-f67dnx4vc2] { background: rgba(0,102,255,0.1); color: var(--hd-primary); }
.hd-qty__btn:disabled[b-f67dnx4vc2] { opacity: 0.4; cursor: not-allowed; }
.hd-qty__btn .ic[b-f67dnx4vc2] { width: 14px; height: 14px; }
.hd-qty__val[b-f67dnx4vc2] { min-width: 20px; text-align: center; font-weight: 800; font-size: 14px; }
.hd-addbtn[b-f67dnx4vc2] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; cursor: pointer;
    padding: 10px 16px; border-radius: 10px;
    font-weight: 700; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 10px 24px -12px rgba(249,115,22,0.7);
    transition: filter 0.15s;
}
.hd-addbtn:hover[b-f67dnx4vc2] { filter: brightness(1.05); }

.hd-policies[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 12px; }
.hd-policy[b-f67dnx4vc2] { padding-bottom: 12px; border-bottom: 1px dashed #e5e7eb; }
.hd-policy:last-child[b-f67dnx4vc2] { border-bottom: none; padding-bottom: 0; }
.hd-policy__title[b-f67dnx4vc2] { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 3px; }
.hd-policy__body[b-f67dnx4vc2] { font-size: 13.5px; color: #4b5563; line-height: 1.6; }

.hd-distances[b-f67dnx4vc2] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; }
.hd-distance[b-f67dnx4vc2] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #eef1f5; font-size: 13.5px; }
.hd-distance__name[b-f67dnx4vc2] { display: inline-flex; align-items: center; gap: 7px; color: #374151; min-width: 0; }
.hd-distance__name span[b-f67dnx4vc2] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-distance__km[b-f67dnx4vc2] { flex: 0 0 auto; color: #6b7280; font-variant-numeric: tabular-nums; }

/* ─── Sticky booking widget ─── */
.hd-aside[b-f67dnx4vc2] { position: sticky; top: 16px; }
.hd-widget[b-f67dnx4vc2] { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px -20px rgba(15,23,42,0.5); }
.hd-widget__title[b-f67dnx4vc2] { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.hd-widget__dates[b-f67dnx4vc2] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4b5563; margin-bottom: 14px; }
.hd-widget__dates .ic[b-f67dnx4vc2] { color: var(--hd-primary); }
.hd-widget__lines[b-f67dnx4vc2] { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid #f3f4f6; margin-bottom: 12px; }
.hd-widget__row[b-f67dnx4vc2] { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; color: #111827; }
.hd-widget__row--comm[b-f67dnx4vc2] { color: #047857; font-weight: 800; }
.hd-widget__cta[b-f67dnx4vc2] {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer;
    padding: 12px 16px; border-radius: 11px;
    font-weight: 700; font-size: 15px; color: #fff;
    background: var(--hd-primary);
    transition: filter 0.15s;
}
.hd-widget__cta:hover[b-f67dnx4vc2] { filter: brightness(1.06); }
.hd-widget__hint[b-f67dnx4vc2] { font-size: 13.5px; color: var(--hd-muted); }

/* Location map */
.hd-map[b-f67dnx4vc2] {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: 12px;
    margin-top: 12px;
    display: block;
}
.hd-maplink[b-f67dnx4vc2] {
    display: inline-block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}
.hd-maplink:hover[b-f67dnx4vc2] { text-decoration: underline; }
/* /Pages/HotelCloud/Results.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Hotel results — Blazor port of the Travelio storefront HotelResult page.
   Booking-style cards (image · content · price) with a filter sidebar and a
   search-summary bar. B2B addition: a commission block in each card's price
   column (sell price struck through, commission highlighted, net "you pay").
   ─────────────────────────────────────────────────────────────────────────── */

.hr[b-l53feq6xly] {
    --hr-primary: #0066ff;
    --hr-ink: #111827;
    --hr-muted: #6b7280;
    color: var(--hr-ink);
    font-family: 'Inter', system-ui, sans-serif;
}

.ic[b-l53feq6xly] { width: 14px; height: 14px; flex: 0 0 auto; }
.ic-ph[b-l53feq6xly] { width: 48px; height: 48px; opacity: 0.5; }

/* ─── Search summary bar ─── */
.hr-summary[b-l53feq6xly] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
}
.hr-summary__chips[b-l53feq6xly] { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-summary__chip[b-l53feq6xly] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.hr-summary__chip .ic[b-l53feq6xly] { color: var(--hr-primary); }
.hr-summary__edit[b-l53feq6xly] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--hr-primary);
    background: rgba(0, 102, 255, 0.06);
    color: var(--hr-primary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.hr-summary__edit:hover[b-l53feq6xly] { background: rgba(0, 102, 255, 0.12); }
.hr-summary__edit--on[b-l53feq6xly] { background: var(--hr-primary); color: #fff; }
.hr-summary__edit--on .ic[b-l53feq6xly] { color: #fff; }

/* "Change search" accordion: hosts the shared HotelSearchBox below the summary. */
.hr-editor[b-l53feq6xly] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
    animation: hr-editor-in-b-l53feq6xly 0.16s ease-out;
}
@keyframes hr-editor-in-b-l53feq6xly {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── State blocks ─── */
.hr-state[b-l53feq6xly] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 18px;
    font-size: 14px;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}
.hr-state--error[b-l53feq6xly] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.hr-state--empty[b-l53feq6xly] { color: #475569; justify-content: center; }
.hr-spinner[b-l53feq6xly] { display: inline-flex; gap: 4px; }
.hr-spinner span[b-l53feq6xly] {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--hr-primary);
    animation: hr-bounce-b-l53feq6xly 0.9s infinite ease-in-out both;
}
.hr-spinner span:nth-child(2)[b-l53feq6xly] { animation-delay: 0.12s; }
.hr-spinner span:nth-child(3)[b-l53feq6xly] { animation-delay: 0.24s; }
@keyframes hr-bounce-b-l53feq6xly {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

.hr-btn[b-l53feq6xly] {
    border: 1px solid var(--hr-primary);
    background: #ffffff;
    color: var(--hr-primary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.hr-btn:hover[b-l53feq6xly] { background: rgba(0, 102, 255, 0.08); }

/* ─── Layout ─── */
.hr-layout[b-l53feq6xly] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .hr-layout[b-l53feq6xly] { grid-template-columns: 1fr; }
}

/* ─── Filters ─── */
.hr-filters[b-l53feq6xly] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    position: sticky;
    /* Clear the app shell's FIXED topbar (--b2b-topbar-h on the B2B shell;
       the white-label Mud appbar is the same 64px, hence the fallback). */
    top: calc(var(--b2b-topbar-h, 64px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Cap to the space visible below the fixed topbar so a long filter list
       (many locations/amenities) scrolls inside the panel instead of running
       off the bottom where the sticky element gets clipped and the last
       options become unreachable. */
    max-height: calc(100vh - var(--b2b-topbar-h, 64px) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* The toggle is a narrow-screen affordance only; the desktop grid always shows
   the rail. */
.hr-filters-toggle[b-l53feq6xly] { display: none; }

@media (max-width: 900px) {
    /* Single-column stack: let the panel grow naturally with the page, and stop
       pinning it — a sticky rail above the results eats the viewport. */
    .hr-filters[b-l53feq6xly] { max-height: none; overflow-y: visible; position: static; }

    .hr-filters-toggle[b-l53feq6xly] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        margin-bottom: 12px;
        padding: 10px 16px;
        border: 1px solid #d1d5db;
        border-radius: 11px;
        background: #ffffff;
        color: #374151;
        font: inherit;
        font-weight: 700;
        font-size: 13.5px;
        cursor: pointer;
    }
    .hr-filters-toggle__count[b-l53feq6xly] {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--hr-primary);
        color: #ffffff;
        font-size: 11.5px;
        font-variant-numeric: tabular-nums;
    }

    /* Collapsed by default so the first hotel, not the filter list, is what
       greets the agent on a phone. */
    .hr-filters[b-l53feq6xly] { display: none; }
    .hr-filters--open[b-l53feq6xly] { display: flex; }
}
.hr-filters[b-l53feq6xly] { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.hr-filters[b-l53feq6xly]::-webkit-scrollbar { width: 8px; }
.hr-filters[b-l53feq6xly]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.hr-filters[b-l53feq6xly]::-webkit-scrollbar-track { background: transparent; }
.hr-filters__head[b-l53feq6xly] { display: flex; align-items: center; justify-content: space-between; }
.hr-filters__head strong[b-l53feq6xly] { font-size: 15px; }
.hr-clear[b-l53feq6xly] {
    border: none;
    background: transparent;
    color: var(--hr-primary);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}
.hr-clear:hover[b-l53feq6xly] { text-decoration: underline; }
.hr-fgroup[b-l53feq6xly] { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid #f3f4f6; padding-top: 14px; }
.hr-fgroup:first-of-type[b-l53feq6xly] { border-top: none; padding-top: 0; }
.hr-fgroup__title[b-l53feq6xly] { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }

.hr-namefilter[b-l53feq6xly] {
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: #374151;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.hr-namefilter:focus[b-l53feq6xly] { outline: none; border-color: var(--hr-primary); }
.hr-namefilter[b-l53feq6xly]::placeholder { color: #94a3b8; }

.hr-check[b-l53feq6xly] { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: #374151; }
.hr-check input[b-l53feq6xly] { position: absolute; opacity: 0; width: 0; height: 0; }
.hr-check__box[b-l53feq6xly] {
    width: 20px; height: 20px; flex: 0 0 auto;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hr-check__box .ic[b-l53feq6xly] { width: 14px; height: 14px; }
.hr-check input:checked + .hr-check__box[b-l53feq6xly] {
    background: var(--hr-primary);
    border-color: var(--hr-primary);
    color: #ffffff;
}
.hr-stars[b-l53feq6xly] { display: inline-flex; gap: 1px; color: #fbbf24; }

.hr-range[b-l53feq6xly] { width: 100%; accent-color: var(--hr-primary); }
.hr-range__val[b-l53feq6xly] { font-size: 12.5px; color: var(--hr-muted); font-weight: 600; }

/* ─── Toolbar ─── */
.hr-main[b-l53feq6xly] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hr-toolbar[b-l53feq6xly] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hr-count[b-l53feq6xly] { font-size: 14px; font-weight: 700; color: #374151; }
.hr-sortwrap[b-l53feq6xly] { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hr-muted); }
.hr-sort[b-l53feq6xly] {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hr-ink);
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
}
.hr-sort:focus[b-l53feq6xly] { outline: none; border-color: var(--hr-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); }

/* ─── Card ─── */
.hr-card[b-l53feq6xly] {
    display: grid;
    grid-template-columns: 1fr;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.hr-card:hover[b-l53feq6xly] {
    box-shadow: 0 18px 42px -20px rgba(15, 23, 42, 0.4);
    transform: translateY(-2px);
    border-color: #d1d5db;
}
@media (min-width: 720px) {
    .hr-card[b-l53feq6xly] { grid-template-columns: 280px 1fr; min-height: 230px; }
}
@media (min-width: 1080px) {
    .hr-card[b-l53feq6xly] { grid-template-columns: 320px 1fr; }
}
.hr-card__media[b-l53feq6xly] { position: relative; background: #eef2f7; height: 220px; overflow: hidden; align-self: start; }
.hr-card__img[b-l53feq6xly] { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-card__placeholder[b-l53feq6xly] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.hr-card__deal[b-l53feq6xly] {
    position: absolute;
    bottom: 12px;
    inset-inline-start: 12px;
    background: #10b981;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
.hr-card__deal--req[b-l53feq6xly] { background: #2563eb; }

.hr-card__body[b-l53feq6xly] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 20px;
}
@media (min-width: 900px) {
    .hr-card__body[b-l53feq6xly] { grid-template-columns: 1fr 220px; gap: 20px; }
}
.hr-card__main[b-l53feq6xly] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hr-card__title[b-l53feq6xly] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 800;
    color: var(--hr-ink);
    line-height: 1.2;
}
.hr-card__title .hr-stars .ic[b-l53feq6xly] { width: 14px; height: 14px; }
.hr-card__loc[b-l53feq6xly] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #4b5563;
}
.hr-card__loc .ic[b-l53feq6xly] { color: #6b7280; }
.hr-card__loc-name[b-l53feq6xly] { font-weight: 500; color: #1f2937; }
.hr-card__amenities[b-l53feq6xly] { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-card__amenity[b-l53feq6xly] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #047857;
    background: #d1fae5;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
}
.hr-card__amenity .ic[b-l53feq6xly] { color: #10b981; }
.hr-card__chips[b-l53feq6xly] { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-chip[b-l53feq6xly] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 6px;
}
.hr-chip--good[b-l53feq6xly] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.hr-chip--good .ic[b-l53feq6xly] { color: #10b981; }
.hr-card__room[b-l53feq6xly] { margin-top: 2px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.hr-card__room-name[b-l53feq6xly] { font-size: 14px; font-weight: 700; color: #111827; }

/* ─── Price / commission column ─── */
.hr-card__side[b-l53feq6xly] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    height: 100%;
}
@media (min-width: 900px) {
    .hr-card__side[b-l53feq6xly] { align-items: flex-end; text-align: end; }
}
@media (max-width: 899px) {
    .hr-card__side[b-l53feq6xly] { padding-top: 14px; border-top: 1px solid #f3f4f6; }
}
.hr-card__price-block[b-l53feq6xly] { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
@media (min-width: 900px) { .hr-card__price-block[b-l53feq6xly] { align-items: flex-end; } }
.hr-card__stay[b-l53feq6xly] { font-size: 12.5px; color: #4b5563; }
.hr-card__price-old[b-l53feq6xly] {
    font-size: 13px;
    color: #ef4444;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.hr-card__price-old[b-l53feq6xly] {
    font-size: 12.5px;
    color: #9ca3af;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.hr-card__price-now[b-l53feq6xly] {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.hr-card__paylabel[b-l53feq6xly] {
    font-size: 11.5px;
    color: var(--hr-muted);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Commission earning — one compact green pill that pops without taking space. */
.hr-card__comm-pill[b-l53feq6xly] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    padding: 4px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hr-card__comm-pill .ic[b-l53feq6xly] { color: #059669; width: 13px; height: 13px; }
.hr-card__cta[b-l53feq6xly] {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 14.5px;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border-radius: 10px;
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
    transition: filter 0.15s, transform 0.12s;
}
.hr-card:hover .hr-card__cta[b-l53feq6xly] { filter: brightness(1.05); }
@media (min-width: 900px) { .hr-card__cta[b-l53feq6xly] { width: 100%; } }
.hr-card__cta .ic[b-l53feq6xly] { width: 15px; height: 15px; }

.hr-loadmore[b-l53feq6xly] { display: flex; justify-content: center; padding: 6px 0 2px; }
/* /Pages/TourCloud/BookingWizard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Tour booking wizard (tbw-*). The same composition as the hotel and flight
   wizards — stepper header, one card per step, three-slot footer — so an agent
   moving between the three services does not relearn the flow. The ledger is
   tour-specific: it separates what the wallet pays from what the tour resells
   at, because on this side the operator's commission is a discount on cost.
   ─────────────────────────────────────────────────────────────────────────── */

.tbw[b-g0v3txvkak] {
    --tbw-primary: #0066ff;
    --tbw-ink: #0f172a;
    --tbw-muted: #64748b;
    --tbw-line: #e3e5ee;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--tbw-ink);
}

.tbw-title[b-g0v3txvkak] {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ─── Stepper ─── */
.tbw-steps[b-g0v3txvkak] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid var(--tbw-line);
    border-radius: 14px;
    overflow-x: auto;
}
.tbw-step[b-g0v3txvkak] { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.tbw-step__num[b-g0v3txvkak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--tbw-muted);
    font-size: 0.8rem;
    font-weight: 800;
}
.tbw-step__num .material-symbols-outlined[b-g0v3txvkak] { font-size: 1rem !important; }
.tbw-step__label[b-g0v3txvkak] { font-size: 0.85rem; font-weight: 700; color: var(--tbw-muted); white-space: nowrap; }
.tbw-step--active .tbw-step__num[b-g0v3txvkak] { background: var(--tbw-primary); color: #ffffff; }
.tbw-step--active .tbw-step__label[b-g0v3txvkak] { color: var(--tbw-ink); }
.tbw-step--done .tbw-step__num[b-g0v3txvkak] { background: var(--b2b-ok-bg); color: #047857; }
.tbw-step--done .tbw-step__label[b-g0v3txvkak] { color: var(--tbw-ink); }
.tbw-step__bar[b-g0v3txvkak] {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    background: var(--tbw-line);
    border-radius: 2px;
}
.tbw-step__bar--done[b-g0v3txvkak] { background: #34d399; }

/* ─── Cards ─── */
.tbw-card[b-g0v3txvkak] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid var(--tbw-line);
    border-radius: 14px;
}
.tbw-h2[b-g0v3txvkak] { margin: 0; font-size: 1.05rem; font-weight: 800; }
.tbw-h3[b-g0v3txvkak] {
    margin: 0.4rem 0 0;
    font-size: 0.92rem;
    font-weight: 800;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--tbw-line);
}
.tbw-hint[b-g0v3txvkak] { margin: -0.4rem 0 0; font-size: 0.82rem; color: var(--tbw-muted); }

.tbw-empty[b-g0v3txvkak] { flex-direction: row; align-items: flex-start; gap: 0.85rem; }
.tbw-empty .material-symbols-outlined[b-g0v3txvkak] { font-size: 2rem !important; color: var(--tbw-primary); }
.tbw-empty p[b-g0v3txvkak] { margin: 0.3rem 0 0.75rem; font-size: 0.88rem; color: var(--tbw-muted); }

/* ─── Trip summary ─── */
.tbw-trip[b-g0v3txvkak] { display: flex; gap: 0.85rem; align-items: flex-start; }
.tbw-trip__img[b-g0v3txvkak] {
    width: 132px;
    height: 92px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 0.7rem;
    background: #eef1f7;
}
.tbw-trip__body[b-g0v3txvkak] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tbw-trip__title[b-g0v3txvkak] { font-size: 1rem; font-weight: 800; }
.tbw-trip__supplier[b-g0v3txvkak],
.tbw-trip__dates[b-g0v3txvkak],
.tbw-trip__seats[b-g0v3txvkak],
.tbw-trip__ref[b-g0v3txvkak] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--tbw-muted);
}
.tbw-trip__supplier strong[b-g0v3txvkak],
.tbw-trip__ref strong[b-g0v3txvkak] { color: var(--tbw-ink); }
.tbw-trip__supplier .material-symbols-outlined[b-g0v3txvkak],
.tbw-trip__dates .material-symbols-outlined[b-g0v3txvkak],
.tbw-trip__seats .material-symbols-outlined[b-g0v3txvkak] { font-size: 0.95rem !important; color: var(--tbw-primary); }

.tbw-mix[b-g0v3txvkak] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tbw-mix li[b-g0v3txvkak] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #f6f7f9;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--tbw-muted);
}
.tbw-mix strong[b-g0v3txvkak] { color: var(--tbw-ink); font-weight: 800; }

.tbw-estimate[b-g0v3txvkak] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--tbw-line);
}
.tbw-estimate__label[b-g0v3txvkak] { font-size: 0.82rem; font-weight: 700; color: var(--tbw-muted); }
.tbw-estimate__value[b-g0v3txvkak] { font-size: 1.2rem; font-weight: 800; }

/* ─── Traveller cards ─── */
.tbw-pax[b-g0v3txvkak] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--tbw-line);
    border-radius: 0.8rem;
    background: #fcfcfd;
}
.tbw-pax__head[b-g0v3txvkak] { display: flex; align-items: center; justify-content: space-between; }
.tbw-pax__badge[b-g0v3txvkak] {
    display: inline-flex;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 102, 255, 0.08);
    color: #1e40af;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: capitalize;
}
.tbw-pax__grid[b-g0v3txvkak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.7rem;
}

.tbw-field[b-g0v3txvkak] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tbw-field__label[b-g0v3txvkak] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tbw-muted);
}
.tbw-field__error[b-g0v3txvkak] { font-size: 0.74rem; font-weight: 600; color: #b91c1c; }
.tbw-input[b-g0v3txvkak] {
    font: inherit;
    font-size: 0.88rem;
    color: var(--tbw-ink);
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--tbw-line);
    border-radius: 0.6rem;
    background: #ffffff;
    width: 100%;
}
.tbw-input:focus[b-g0v3txvkak] {
    outline: none;
    border-color: var(--tbw-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}
.tbw-input--bad[b-g0v3txvkak] { border-color: #dc2626; }
.tbw-input--bad:focus[b-g0v3txvkak] { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }

/* ─── Roster ─── */
.tbw-roster[b-g0v3txvkak] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tbw-roster li[b-g0v3txvkak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
}
.tbw-roster .material-symbols-outlined[b-g0v3txvkak] { font-size: 1rem !important; color: var(--tbw-muted); }
.tbw-roster__type[b-g0v3txvkak] {
    margin-inline-start: auto;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--tbw-muted);
    text-transform: capitalize;
}

/* ─── Ledger ─── */
.tbw-ledger[b-g0v3txvkak] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--tbw-line);
}
.tbw-ledger__row[b-g0v3txvkak] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
    color: #475569;
}
.tbw-ledger__row dt[b-g0v3txvkak] { margin: 0; }
.tbw-ledger__row dd[b-g0v3txvkak] { margin: 0; font-weight: 700; white-space: nowrap; }
.tbw-ledger__row--credit[b-g0v3txvkak] { color: #047857; }
.tbw-ledger__row--total[b-g0v3txvkak] {
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--tbw-line);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tbw-ink);
}
.tbw-ledger__row--sell[b-g0v3txvkak] {
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--tbw-line);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--tbw-ink);
}
.tbw-ledger__row--margin[b-g0v3txvkak] { font-size: 0.86rem; font-weight: 800; color: #047857; }

/* ─── Wallet ─── */
.tbw-pay[b-g0v3txvkak] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.tbw-pay__label[b-g0v3txvkak] { font-size: 0.85rem; font-weight: 700; color: var(--tbw-muted); }
.tbw-pay__value[b-g0v3txvkak] { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }

.tbw-wallet[b-g0v3txvkak] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 0.8rem;
    border: 1px solid var(--tbw-line);
}
.tbw-wallet--ok[b-g0v3txvkak] { background: rgba(16, 185, 129, 0.07); border-color: rgba(16, 185, 129, 0.3); }
.tbw-wallet--low[b-g0v3txvkak] { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.32); }
.tbw-wallet > .material-symbols-outlined[b-g0v3txvkak] { font-size: 1.4rem !important; color: var(--tbw-primary); }
.tbw-wallet__label[b-g0v3txvkak] {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tbw-muted);
}
.tbw-wallet__value[b-g0v3txvkak] { font-size: 1.05rem; font-weight: 800; }
.tbw-wallet__short[b-g0v3txvkak] { margin: 0.25rem 0 0; font-size: 0.82rem; font-weight: 700; color: #b91c1c; }
.tbw-wallet__after[b-g0v3txvkak] { margin: 0.25rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--tbw-muted); }
.tbw-wallet__actions[b-g0v3txvkak] {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
}

/* ─── States ─── */
.tbw-busy[b-g0v3txvkak] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tbw-muted);
}
.tbw-spinner[b-g0v3txvkak] { display: inline-flex; gap: 4px; }
.tbw-spinner span[b-g0v3txvkak] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tbw-primary);
    animation: tbw-bounce-b-g0v3txvkak 0.9s infinite ease-in-out both;
}
.tbw-spinner span:nth-child(2)[b-g0v3txvkak] { animation-delay: 0.12s; }
.tbw-spinner span:nth-child(3)[b-g0v3txvkak] { animation-delay: 0.24s; }
@keyframes tbw-bounce-b-g0v3txvkak {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

.tbw-alert[b-g0v3txvkak] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    font-size: 0.87rem;
    font-weight: 600;
}
.tbw-alert .material-symbols-outlined[b-g0v3txvkak] { font-size: 1.15rem !important; flex: 0 0 auto; }
.tbw-alert--error[b-g0v3txvkak] { background: rgba(239, 68, 68, 0.08); color: #b91c1c; }
.tbw-alert--warn[b-g0v3txvkak] { background: rgba(245, 158, 11, 0.12); color: var(--b2b-warn-fg); }

/* ─── Buttons and footer ─── */
.tbw-btn[b-g0v3txvkak] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--tbw-line);
    border-radius: 0.65rem;
    background: #ffffff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--tbw-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s;
}
.tbw-btn:hover:not(:disabled)[b-g0v3txvkak] { border-color: rgba(0, 102, 255, 0.45); color: var(--tbw-primary); }
.tbw-btn:disabled[b-g0v3txvkak] { opacity: 0.55; cursor: not-allowed; }
.tbw-btn--primary[b-g0v3txvkak] {
    background: var(--tbw-primary);
    border-color: var(--tbw-primary);
    color: #ffffff;
}
.tbw-btn--primary:hover:not(:disabled)[b-g0v3txvkak] { filter: brightness(1.05); color: #ffffff; }

.tbw-footer[b-g0v3txvkak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid var(--tbw-line);
    border-radius: 14px;
}
.tbw-footer__mid[b-g0v3txvkak] { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }

.tbw-back[b-g0v3txvkak],
.tbw-continue[b-g0v3txvkak] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.7rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}
.tbw-back[b-g0v3txvkak] { background: transparent; border-color: var(--tbw-line); color: var(--tbw-ink); }
.tbw-back:hover:not(:disabled)[b-g0v3txvkak] { border-color: rgba(0, 102, 255, 0.45); color: var(--tbw-primary); }
.tbw-continue[b-g0v3txvkak] { background: var(--tbw-primary); color: #ffffff; }
.tbw-continue:hover:not(:disabled)[b-g0v3txvkak] { filter: brightness(1.05); }
.tbw-continue--pay[b-g0v3txvkak] { background: #047857; }
.tbw-back:disabled[b-g0v3txvkak],
.tbw-continue:disabled[b-g0v3txvkak] { opacity: 0.5; cursor: not-allowed; }
.tbw-back .material-symbols-outlined[b-g0v3txvkak],
.tbw-continue .material-symbols-outlined[b-g0v3txvkak] { font-size: 1rem !important; }

@media (max-width: 768px) {
    .tbw-trip[b-g0v3txvkak] { flex-direction: column; }
    .tbw-trip__img[b-g0v3txvkak] { width: 100%; height: 150px; }
    .tbw-wallet[b-g0v3txvkak] { flex-wrap: wrap; }
    .tbw-wallet__actions[b-g0v3txvkak] { margin-inline-start: 0; flex-direction: row; width: 100%; }
    .tbw-footer[b-g0v3txvkak] { flex-direction: column-reverse; align-items: stretch; }
    .tbw-back[b-g0v3txvkak], .tbw-continue[b-g0v3txvkak] { justify-content: center; }
}
/* /Pages/TourCloud/Confirmation.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Tour booking confirmation (tbc-*). One screen, one job: prove the booking
   happened and give the agent the reference they will quote.
   ─────────────────────────────────────────────────────────────────────────── */

.tbc[b-29ev0yny94] {
    --tbc-primary: #0066ff;
    --tbc-ink: #0f172a;
    --tbc-muted: #64748b;
    --tbc-line: #e3e5ee;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--tbc-ink);
}

.tbc-hero[b-29ev0yny94] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: 14px;
}
.tbc-hero__icon[b-29ev0yny94] { font-size: 2.2rem !important; color: #047857; }
.tbc-hero__title[b-29ev0yny94] { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; }
.tbc-hero__sub[b-29ev0yny94] { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--tbc-muted); }

.tbc-card[b-29ev0yny94] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid var(--tbc-line);
    border-radius: 14px;
}
.tbc-h2[b-29ev0yny94] { margin: 0; font-size: 1.05rem; font-weight: 800; }
.tbc-h3[b-29ev0yny94] {
    margin: 0.4rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--tbc-line);
    font-size: 0.92rem;
    font-weight: 800;
}

.tbc-empty[b-29ev0yny94] { flex-direction: row; align-items: flex-start; gap: 0.85rem; }
.tbc-empty .material-symbols-outlined[b-29ev0yny94] { font-size: 2rem !important; color: var(--tbc-primary); }
.tbc-empty p[b-29ev0yny94] { margin: 0.3rem 0 0.75rem; font-size: 0.88rem; color: var(--tbc-muted); }

/* The reference is the single most-copied thing on this page. */
.tbc-ref[b-29ev0yny94] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.9rem;
    border-radius: 0.7rem;
    background: #f6f7f9;
    border: 1px dashed #cdd3e6;
}
.tbc-ref__label[b-29ev0yny94] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tbc-muted);
}
.tbc-ref__value[b-29ev0yny94] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.tbc-facts[b-29ev0yny94] { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.tbc-fact[b-29ev0yny94] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tbc-muted);
}
.tbc-fact strong[b-29ev0yny94] { color: var(--tbc-ink); }
.tbc-fact .material-symbols-outlined[b-29ev0yny94] { font-size: 1rem !important; color: var(--tbc-primary); }

.tbc-paid[b-29ev0yny94] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 0.8rem;
    background: #f6f7f9;
}
.tbc-paid__label[b-29ev0yny94] {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tbc-muted);
}
.tbc-paid__value[b-29ev0yny94] { font-size: 1.05rem; font-weight: 800; }
.tbc-paid__value--margin[b-29ev0yny94] { color: #047857; }

.tbc-roster[b-29ev0yny94] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tbc-roster li[b-29ev0yny94] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
}
.tbc-roster .material-symbols-outlined[b-29ev0yny94] { font-size: 1rem !important; color: var(--tbc-muted); }
.tbc-roster__type[b-29ev0yny94] {
    margin-inline-start: auto;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--tbc-muted);
    text-transform: capitalize;
}

.tbc-note[b-29ev0yny94] {
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--tbc-line);
    font-size: 0.82rem;
    color: var(--tbc-muted);
}

.tbc-actions[b-29ev0yny94] { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tbc-btn[b-29ev0yny94] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--tbc-line);
    border-radius: 0.7rem;
    background: #ffffff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--tbc-ink);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.tbc-btn:hover[b-29ev0yny94] { border-color: rgba(0, 102, 255, 0.45); color: var(--tbc-primary); }
.tbc-btn--primary[b-29ev0yny94] {
    background: var(--tbc-primary);
    border-color: var(--tbc-primary);
    color: #ffffff;
}
.tbc-btn--primary:hover[b-29ev0yny94] { filter: brightness(1.05); color: #ffffff; }
.tbc-btn .material-symbols-outlined[b-29ev0yny94] { font-size: 1rem !important; }
/* /Pages/TourCloud/MyBookingDetail.razor.rz.scp.css */
/* One tour booking. Same `tbd-` prefix idiom as the rest of the funnel; the
   servicing thread and the cost ledger are the two things this page exists for,
   so both get room. ::deep is only used where a child component's markup needs
   reaching. */

.tbd[b-unr45cdzl4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 16px 48px;
    color: #0f172a;
}

.tbd-back[b-unr45cdzl4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    color: #52525b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.tbd-back:hover[b-unr45cdzl4] { color: var(--b2b-primary); }
.tbd-back .material-symbols-outlined[b-unr45cdzl4] { font-size: 18px; }

/* ── Header ─────────────────────────────────────────────────────────── */

.tbd-head[b-unr45cdzl4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e4e7;
    margin-bottom: 18px;
}

.tbd-head__main[b-unr45cdzl4] { min-width: 0; }

.tbd-head__side[b-unr45cdzl4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tbd-ref[b-unr45cdzl4] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--b2b-primary);
    font-variant-numeric: tabular-nums;
}

.tbd-title[b-unr45cdzl4] {
    margin: 2px 0 6px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.tbd-supplier[b-unr45cdzl4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #52525b;
}

.tbd-supplier .material-symbols-outlined[b-unr45cdzl4] { font-size: 17px; }

/* ── Layout ─────────────────────────────────────────────────────────── */

.tbd-grid[b-unr45cdzl4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.tbd-main[b-unr45cdzl4],
.tbd-side[b-unr45cdzl4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tbd-side[b-unr45cdzl4] { position: sticky; top: 16px; }

@media (max-width: 980px) {
    .tbd-grid[b-unr45cdzl4] { grid-template-columns: minmax(0, 1fr); }
    .tbd-side[b-unr45cdzl4] { position: static; }
}

/* ── Cards ──────────────────────────────────────────────────────────── */

.tbd-card[b-unr45cdzl4] {
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}

.tbd-card__head[b-unr45cdzl4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tbd-h2[b-unr45cdzl4] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.tbd-card__head .tbd-h2[b-unr45cdzl4] { margin-bottom: 0; }

.tbd-h3[b-unr45cdzl4] {
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #52525b;
}

/* ── Facts ──────────────────────────────────────────────────────────── */

.tbd-facts[b-unr45cdzl4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
}

.tbd-facts dt[b-unr45cdzl4] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #71717a;
}

.tbd-facts dd[b-unr45cdzl4] {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.tbd-note[b-unr45cdzl4] {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fafafa;
    font-size: 13px;
}

.tbd-note--bad[b-unr45cdzl4] { background: #fef2f2; color: var(--b2b-err-fg); }

.tbd-contact[b-unr45cdzl4] { margin: 0; font-size: 13px; }

/* ── Tables ─────────────────────────────────────────────────────────── */

.tbd-scroll[b-unr45cdzl4] { overflow-x: auto; }

.tbd-table[b-unr45cdzl4] {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 13px;
}

.tbd-table th[b-unr45cdzl4],
.tbd-table td[b-unr45cdzl4] {
    padding: 8px 10px;
    text-align: start;
    border-bottom: 1px solid #f4f4f5;
}

.tbd-table th[b-unr45cdzl4] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #71717a;
    white-space: nowrap;
}

.tbd-table tbody tr:last-child td[b-unr45cdzl4] { border-bottom: none; }

/* ── Ledger ─────────────────────────────────────────────────────────── */

.tbd-ledger[b-unr45cdzl4] { margin: 0; }

.tbd-ledger__row[b-unr45cdzl4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
}

.tbd-ledger__row dt[b-unr45cdzl4] { color: #52525b; }

.tbd-ledger__row dd[b-unr45cdzl4] {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tbd-ledger__row--credit dd[b-unr45cdzl4] { color: #047857; }

/* The wallet debit is the line an agent is accountable for, so it gets the
   rule above it and the weight. */
.tbd-ledger__row--total[b-unr45cdzl4] {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #e4e4e7;
    font-size: 15px;
}

.tbd-ledger__row--total dt[b-unr45cdzl4] { color: #0f172a; font-weight: 700; }
.tbd-ledger__row--total dd[b-unr45cdzl4] { font-weight: 700; }

.tbd-ledger__row--sell[b-unr45cdzl4] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e4e4e7;
}

.tbd-ledger__row--margin dd[b-unr45cdzl4] { color: var(--b2b-primary); font-weight: 700; }

.tbd-fx[b-unr45cdzl4],
.tbd-wallet-ref[b-unr45cdzl4],
.tbd-hint[b-unr45cdzl4] {
    margin: 12px 0 0;
    font-size: 11px;
    color: #71717a;
}

.tbd-wallet-ref[b-unr45cdzl4] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.tbd-wallet-ref .material-symbols-outlined[b-unr45cdzl4] { font-size: 15px; }

.tbd-wallet-ref code[b-unr45cdzl4] {
    font-size: 10px;
    word-break: break-all;
}

/* ── Servicing thread ───────────────────────────────────────────────── */

.tbd-empty[b-unr45cdzl4] {
    margin: 0;
    padding: 20px 0;
    color: #71717a;
    font-size: 13px;
    text-align: center;
}

.tbd-requests[b-unr45cdzl4] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tbd-request[b-unr45cdzl4] {
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    padding: 12px;
}

.tbd-request__head[b-unr45cdzl4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.tbd-request__ref[b-unr45cdzl4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--b2b-primary);
    font-variant-numeric: tabular-nums;
}

.tbd-request__body[b-unr45cdzl4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tbd-request__action[b-unr45cdzl4] { font-size: 13px; font-weight: 600; }
.tbd-request__meta[b-unr45cdzl4] { font-size: 11px; color: #71717a; }

.tbd-request__money[b-unr45cdzl4] {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tbd-request__money--refund[b-unr45cdzl4] { color: #047857; }

.tbd-request__expiry[b-unr45cdzl4] { font-size: 11px; color: #a16207; }
.tbd-request__expiry--gone[b-unr45cdzl4] { color: #b91c1c; }

.tbd-request__actions[b-unr45cdzl4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tbd-request__actions:empty[b-unr45cdzl4] { margin-top: 0; }

/* ── Expanded request detail ────────────────────────────────────────── */

.tbd-request__more[b-unr45cdzl4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--b2b-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tbd-request__more:hover[b-unr45cdzl4] { text-decoration: underline; }
.tbd-request__more .material-symbols-outlined[b-unr45cdzl4] { font-size: 17px; }

.tbd-request__note[b-unr45cdzl4] {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fafafa;
    font-size: 12px;
    line-height: 1.5;
}

.tbd-quote[b-unr45cdzl4] {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
}

.tbd-quote__row[b-unr45cdzl4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12px;
}

.tbd-quote__row dt[b-unr45cdzl4] { color: #52525b; }

.tbd-quote__row dd[b-unr45cdzl4] {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tbd-quote__row--total[b-unr45cdzl4] {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid #e4e4e7;
    font-size: 14px;
}

.tbd-quote__row--total dt[b-unr45cdzl4] { color: #0f172a; font-weight: 700; }
.tbd-quote__row--total dd[b-unr45cdzl4] { font-weight: 700; color: var(--b2b-primary); }

.tbd-trail[b-unr45cdzl4] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tbd-trail__item[b-unr45cdzl4] {
    display: flex;
    gap: 10px;
    font-size: 11px;
}

.tbd-trail__when[b-unr45cdzl4] {
    flex: 0 0 88px;
    color: #71717a;
    font-variant-numeric: tabular-nums;
}

.tbd-trail__what[b-unr45cdzl4] { min-width: 0; }

.tbd-trail__note[b-unr45cdzl4] {
    display: block;
    color: #52525b;
    margin-top: 1px;
}

.tbd-compose[b-unr45cdzl4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e4e4e7;
}

.tbd-compose__label[b-unr45cdzl4] {
    font-size: 11px;
    font-weight: 600;
    color: #52525b;
}

.tbd-compose__input[b-unr45cdzl4] {
    padding: 8px 10px;
    border: 1px solid #d4d4d8;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    resize: vertical;
}

.tbd-compose__input:focus[b-unr45cdzl4] {
    outline: 2px solid var(--b2b-primary);
    outline-offset: 1px;
    border-color: var(--b2b-primary);
}

.tbd-compose .tbd-btn[b-unr45cdzl4] { align-self: flex-end; }

.tbd-request__lapsed[b-unr45cdzl4] {
    font-size: 12px;
    color: #a16207;
}

/* ── Actions rail ───────────────────────────────────────────────────── */

.tbd-actions[b-unr45cdzl4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbd-btn[b-unr45cdzl4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid #d4d4d8;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.tbd-btn:hover:not(:disabled)[b-unr45cdzl4] { background: #f4f4f5; border-color: #a1a1aa; }
.tbd-btn:disabled[b-unr45cdzl4] { opacity: .5; cursor: not-allowed; }
.tbd-btn .material-symbols-outlined[b-unr45cdzl4] { font-size: 18px; }

.tbd-btn--primary[b-unr45cdzl4] {
    background: var(--b2b-primary);
    border-color: var(--b2b-primary);
    color: #fff;
}

.tbd-btn--primary:hover:not(:disabled)[b-unr45cdzl4] { background: var(--b2b-primary-container); border-color: var(--b2b-primary-container); }

.tbd-btn--danger[b-unr45cdzl4] { color: #b91c1c; border-color: #fecaca; }
.tbd-btn--danger:hover:not(:disabled)[b-unr45cdzl4] { background: #fef2f2; border-color: #fca5a5; }

/* ── Badges, alerts, states ─────────────────────────────────────────── */

.tbd-badge[b-unr45cdzl4] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: #f4f4f5;
    color: #52525b;
}

.tbd-badge--ok[b-unr45cdzl4] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.tbd-badge--hold[b-unr45cdzl4] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.tbd-badge--cancelled[b-unr45cdzl4] { background: #e4e4e7; color: #3f3f46; }
.tbd-badge--bad[b-unr45cdzl4] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.tbd-badge--neutral[b-unr45cdzl4] { background: #f4f4f5; color: #52525b; }

.tbd-alert[b-unr45cdzl4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}

.tbd-alert .material-symbols-outlined[b-unr45cdzl4] { font-size: 19px; }
.tbd-alert--error[b-unr45cdzl4] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.tbd-alert--ok[b-unr45cdzl4] { background: #ecfdf5; color: var(--b2b-ok-fg); border: 1px solid #a7f3d0; }

/* Louder than a notice and quieter than an error: something is waiting, and
   the agency loses money by not seeing it. */
.tbd-alert--attention[b-unr45cdzl4] {
    background: #fffbeb;
    color: var(--b2b-warn-fg);
    border: 1px solid #fde68a;
    font-weight: 600;
}

.tbd-state[b-unr45cdzl4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 16px;
    border: 1px dashed #e4e4e7;
    border-radius: 12px;
    color: #52525b;
    text-align: center;
}

.tbd-state--error[b-unr45cdzl4] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.tbd-state__icon[b-unr45cdzl4] { font-size: 34px; opacity: .6; }

.tbd-spinner[b-unr45cdzl4] { display: inline-flex; gap: 5px; }

.tbd-spinner span[b-unr45cdzl4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--b2b-primary);
    animation: tbd-bounce-b-unr45cdzl4 1s infinite ease-in-out;
}

.tbd-spinner span:nth-child(2)[b-unr45cdzl4] { animation-delay: .15s; }
.tbd-spinner span:nth-child(3)[b-unr45cdzl4] { animation-delay: .3s; }

@keyframes tbd-bounce-b-unr45cdzl4 {
    0%, 80%, 100% { transform: scale(.6); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tbd-spinner span[b-unr45cdzl4] { animation: none; opacity: .8; }
}

@media (max-width: 640px) {
    .tbd[b-unr45cdzl4] { padding: 12px 10px 40px; }
    .tbd-title[b-unr45cdzl4] { font-size: 19px; }
}
/* /Pages/TourCloud/PrintVoucher.razor.rz.scp.css */
/* ============================================================================
   Tour voucher print studio.

   Screen: two panes — a toolbar and an A4 preview.
   Print:  only the document, sized to A4; the toolbar is removed entirely.

   Prefix: tvp- (tour voucher print). Same shape as the flight ticket studio's
   tkp-, kept separate so a change to one cannot silently reformat the other.
   ============================================================================ */

.tvp-page[b-3x9t3xy22z] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.tvp-loading[b-3x9t3xy22z],
.tvp-alert[b-3x9t3xy22z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px;
    font-size: 14px;
    color: #52525b;
}

.tvp-alert[b-3x9t3xy22z] { color: #b91c1c; }

.tvp-spinner[b-3x9t3xy22z] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #e4e4e7;
    border-top-color: #14b8a6;
    animation: tvp-spin-b-3x9t3xy22z .8s linear infinite;
}

@keyframes tvp-spin-b-3x9t3xy22z { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tvp-spinner[b-3x9t3xy22z] { animation-duration: 3s; }
}

/* ── Toolbar (screen only) ──────────────────────────────────────────── */

.tvp-toolbar[b-3x9t3xy22z] {
    flex: 0 0 300px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
}

.tvp-toolbar-head[b-3x9t3xy22z] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #f4f4f5;
    margin-bottom: 12px;
}

.tvp-back[b-3x9t3xy22z],
.tvp-export[b-3x9t3xy22z],
.tvp-print[b-3x9t3xy22z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid #d4d4d8;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tvp-back:hover[b-3x9t3xy22z],
.tvp-export:hover[b-3x9t3xy22z] { background: #f4f4f5; }

.tvp-print[b-3x9t3xy22z] {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.tvp-print:hover[b-3x9t3xy22z] { background: #115e59; }

.tvp-toolbar-head .material-symbols-outlined[b-3x9t3xy22z] { font-size: 16px; }

.tvp-disclaimer[b-3x9t3xy22z] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 14px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f0fdfa;
    color: #115e59;
    font-size: 11px;
    line-height: 1.4;
}

.tvp-disclaimer .material-symbols-outlined[b-3x9t3xy22z] { font-size: 15px; }

.tvp-group[b-3x9t3xy22z] { margin-bottom: 18px; }

.tvp-group h3[b-3x9t3xy22z] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #52525b;
}

.tvp-group h3 .material-symbols-outlined[b-3x9t3xy22z] { font-size: 16px; }

.tvp-lbl[b-3x9t3xy22z] {
    display: block;
    margin: 8px 0 3px;
    font-size: 11px;
    font-weight: 600;
    color: #71717a;
}

.tvp-input[b-3x9t3xy22z],
.tvp-textarea[b-3x9t3xy22z] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #d4d4d8;
    border-radius: 7px;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
    font-family: inherit;
}

.tvp-input:focus[b-3x9t3xy22z],
.tvp-textarea:focus[b-3x9t3xy22z] {
    outline: 2px solid #14b8a6;
    outline-offset: 1px;
    border-color: #14b8a6;
}

.tvp-input--short[b-3x9t3xy22z] { max-width: 110px; }
.tvp-input--num[b-3x9t3xy22z] { text-align: end; font-variant-numeric: tabular-nums; }
.tvp-textarea[b-3x9t3xy22z] { resize: vertical; }

.tvp-hint[b-3x9t3xy22z] {
    margin: 6px 0;
    font-size: 11px;
    color: #71717a;
    line-height: 1.4;
}

.tvp-check[b-3x9t3xy22z] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 7px 0;
    font-size: 12px;
    cursor: pointer;
}

.tvp-link[b-3x9t3xy22z] {
    display: inline-block;
    margin: 8px 0;
    padding: 0;
    border: none;
    background: none;
    color: #0f766e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.tvp-price-row[b-3x9t3xy22z] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.tvp-price-row .tvp-input:first-child[b-3x9t3xy22z] { flex: 1 1 auto; min-width: 0; }
.tvp-price-row .tvp-input--num[b-3x9t3xy22z] { flex: 0 0 90px; }

.tvp-icon-btn[b-3x9t3xy22z] {
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #71717a;
    cursor: pointer;
    line-height: 0;
}

.tvp-icon-btn:hover[b-3x9t3xy22z] { background: #fef2f2; color: #b91c1c; }
.tvp-icon-btn .material-symbols-outlined[b-3x9t3xy22z] { font-size: 17px; }

.tvp-logo-box[b-3x9t3xy22z] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.tvp-logo-preview[b-3x9t3xy22z] {
    max-width: 72px;
    max-height: 42px;
    object-fit: contain;
    border: 1px solid #e4e4e7;
    border-radius: 6px;
    padding: 3px;
}

.tvp-logo-actions[b-3x9t3xy22z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tvp-file[b-3x9t3xy22z] { font-size: 11px; max-width: 100%; }

/* ── The document ───────────────────────────────────────────────────── */

.tvp-doc-wrap[b-3x9t3xy22z] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.tvp-doc[b-3x9t3xy22z] {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    padding: 16mm 16mm 14mm;
    background: #fff;
    color: #18181b;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
    font-size: 11px;
    line-height: 1.5;
}

.tvp-doc-head[b-3x9t3xy22z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0f766e;
}

.tvp-doc-brand[b-3x9t3xy22z] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tvp-doc-logo[b-3x9t3xy22z] { max-height: 46px; max-width: 150px; object-fit: contain; }

.tvp-doc-agency[b-3x9t3xy22z] {
    font-size: 15px;
    font-weight: 700;
}

.tvp-doc-ref[b-3x9t3xy22z] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

.tvp-doc-kind[b-3x9t3xy22z] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0f766e;
}

.tvp-doc-number[b-3x9t3xy22z] {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tvp-doc-title[b-3x9t3xy22z] {
    margin: 14px 0 2px;
    font-size: 19px;
    font-weight: 700;
}

.tvp-doc-supplier[b-3x9t3xy22z] {
    margin: 0 0 4px;
    font-size: 11px;
    color: #52525b;
}

.tvp-sec[b-3x9t3xy22z] { margin-top: 16px; }

.tvp-sec-h[b-3x9t3xy22z] {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0f766e;
}

.tvp-two[b-3x9t3xy22z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tvp-k[b-3x9t3xy22z] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #71717a;
}

.tvp-v[b-3x9t3xy22z] {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.tvp-p[b-3x9t3xy22z] { margin: 3px 0; }
.tvp-pre[b-3x9t3xy22z] { white-space: pre-wrap; }
.tvp-small[b-3x9t3xy22z] { font-size: 10px; color: #52525b; }

.tvp-tbl[b-3x9t3xy22z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.tvp-tbl th[b-3x9t3xy22z],
.tvp-tbl td[b-3x9t3xy22z] {
    padding: 5px 7px;
    text-align: start;
    border-bottom: 1px solid #e4e4e7;
}

.tvp-tbl th[b-3x9t3xy22z] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #71717a;
    background: #fafafa;
}

.tvp-num[b-3x9t3xy22z] { text-align: end; font-variant-numeric: tabular-nums; }

.tvp-total-row td[b-3x9t3xy22z] {
    border-top: 2px solid #0f766e;
    border-bottom: none;
    font-size: 13px;
    font-weight: 700;
    padding-top: 8px;
}

/* Real inputs, not contenteditable: a typo fix has to be keyboard- and
   screen-reader-reachable, and contenteditable gives Blazor no value to bind.
   They are styled to read as plain text and print as plain text. */
.tvp-edit[b-3x9t3xy22z] {
    display: inline-block;
    width: 100%;
    min-width: 40px;
    padding: 1px 3px;
    border: none;
    border-bottom: 1px dashed #d4d4d8;
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.tvp-edit:focus[b-3x9t3xy22z] {
    outline: 2px solid #14b8a6;
    outline-offset: 1px;
    background: #f0fdfa;
}

/* The emergency contact is what a stranded traveller looks for, so it is the
   one block on the sheet that is allowed to shout. */
.tvp-help[b-3x9t3xy22z] {
    border: 1px solid #0f766e;
    border-radius: 4px;
    padding: 8px 10px;
    background: #f0fdfa;
}

.tvp-emergency[b-3x9t3xy22z] { margin-inline-start: 8px; }

.tvp-doc-foot[b-3x9t3xy22z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 8px;
    border-top: 1px solid #e4e4e7;
    /* 10px ≈ 7.5pt on paper. Below this Latin gets hard and Persian, which
       needs a size step more at equal legibility, becomes unreadable. */
    font-size: 10px;
    color: #71717a;
}

/* ── Responsive (screen) ────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .tvp-page[b-3x9t3xy22z] { flex-direction: column; }

    .tvp-toolbar[b-3x9t3xy22z] {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
    }

    /* The A4 sheet is wider than a phone, so it scrolls in its own box
       rather than pushing the whole page sideways. */
    .tvp-doc-wrap[b-3x9t3xy22z] { overflow-x: auto; justify-content: flex-start; }
}

/* ── Print ──────────────────────────────────────────────────────────── */

@media print {
    .tvp-toolbar[b-3x9t3xy22z] { display: none !important; }

    /* Backgrounds are information here — the table header band and the
       emergency block — and browsers drop them by default. */
    .tvp-doc[b-3x9t3xy22z],
    .tvp-tbl th[b-3x9t3xy22z],
    .tvp-help[b-3x9t3xy22z] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* A group of twenty repeats the traveller table across pages; without this
       every page after the first has an unlabelled table. */
    .tvp-tbl thead[b-3x9t3xy22z] { display: table-header-group; }
    .tvp-page[b-3x9t3xy22z] { display: block; gap: 0; }
    .tvp-doc-wrap[b-3x9t3xy22z] { display: block; overflow: visible; }

    .tvp-doc[b-3x9t3xy22z] {
        width: auto;
        min-height: 0;
        margin: 0;
        box-shadow: none;
        /* @page margin is 0, so the sheet owns its own edge margin. */
        padding: 14mm 14mm 12mm;
    }

    /* Dashed edit affordances are a screen thing; on paper they read as
       redaction marks. */
    .tvp-edit[b-3x9t3xy22z] { border-bottom: none; padding: 0; background: transparent; }

    .tvp-sec[b-3x9t3xy22z],
    .tvp-two[b-3x9t3xy22z],
    .tvp-doc-foot[b-3x9t3xy22z],
    .tvp-tbl tr[b-3x9t3xy22z] { break-inside: avoid; }
}
/* /Pages/TourCloud/Results.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Tour results grid (tr-*). Deliberately the same composition as the hotel
   (hr-*) and flight (fr-*) result pages — summary bar, collapsible filter rail,
   card list — so an agent working across the three services reads one layout.
   The tour-specific parts are the operator line and the price split.
   ─────────────────────────────────────────────────────────────────────────── */

.tr[b-0w5lkpbzc0] {
    --tr-primary: #0066ff;
    --tr-ink: #0f172a;
    --tr-muted: #64748b;
    --tr-line: #e3e5ee;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--tr-ink);
}

/* ─── Search summary ─── */
.tr-summary[b-0w5lkpbzc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.06);
}
.tr-summary__chips[b-0w5lkpbzc0] { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.tr-summary__chip[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #f6f7f9;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tr-ink);
}
.tr-summary__chip .material-symbols-outlined[b-0w5lkpbzc0] {
    font-size: 1.05rem !important;
    color: var(--tr-primary);
}
.tr-summary__edit[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--tr-line);
    border-radius: 0.7rem;
    background: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--tr-ink);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tr-summary__edit:hover[b-0w5lkpbzc0] {
    border-color: rgba(0, 102, 255, 0.45);
    color: var(--tr-primary);
}
.tr-summary__edit--on[b-0w5lkpbzc0] {
    background: rgba(0, 102, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.45);
    color: var(--tr-primary);
}
.tr-summary__edit .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 1.05rem !important; }

.tr-editor[b-0w5lkpbzc0] {
    padding: 1rem;
    background: #ffffff;
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.06);
}

/* ─── States ─── */
.tr-state[b-0w5lkpbzc0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 3rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tr-muted);
    text-align: center;
}
.tr-state--error[b-0w5lkpbzc0] { color: #b91c1c; flex-wrap: wrap; }
/* A failed page-load reported in place, so the rows already on screen stay. */
.tr-state--inline[b-0w5lkpbzc0] { padding: 0.85rem 1rem; gap: 0.75rem; }
.tr-state--empty[b-0w5lkpbzc0] { align-items: flex-start; text-align: start; }
.tr-state--empty p[b-0w5lkpbzc0] { margin: 0.3rem 0 0; font-weight: 500; }
.tr-state__icon[b-0w5lkpbzc0] { font-size: 2rem !important; color: var(--tr-primary); }

/* Why the grid is empty. One line per gate that dropped tours — the difference
   between a missing exchange rate and a supplier this agency blocked itself is
   not something an agent can work out from an empty page. */
.tr-why[b-0w5lkpbzc0] {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tr-why li[b-0w5lkpbzc0] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #52525b;
}

.tr-why .material-symbols-outlined[b-0w5lkpbzc0] {
    font-size: 1.05rem;
    color: var(--tr-primary);
    flex: 0 0 auto;
}

.tr-spinner[b-0w5lkpbzc0] { display: inline-flex; gap: 4px; }
.tr-spinner span[b-0w5lkpbzc0] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tr-primary);
    animation: tr-bounce-b-0w5lkpbzc0 0.9s infinite ease-in-out both;
}
.tr-spinner span:nth-child(2)[b-0w5lkpbzc0] { animation-delay: 0.12s; }
.tr-spinner span:nth-child(3)[b-0w5lkpbzc0] { animation-delay: 0.24s; }
@keyframes tr-bounce-b-0w5lkpbzc0 {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

.tr-btn[b-0w5lkpbzc0] {
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--tr-line);
    border-radius: 0.65rem;
    background: #ffffff;
    font: inherit;
    font-weight: 700;
    color: var(--tr-ink);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tr-btn:hover:not(:disabled)[b-0w5lkpbzc0] {
    border-color: rgba(0, 102, 255, 0.45);
    color: var(--tr-primary);
}
.tr-btn:disabled[b-0w5lkpbzc0] { opacity: 0.55; cursor: progress; }

/* ─── Layout ─── */
.tr-layout[b-0w5lkpbzc0] {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.tr-filters-toggle[b-0w5lkpbzc0] { display: none; }

.tr-filters[b-0w5lkpbzc0] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.06);
}
.tr-filters__head[b-0w5lkpbzc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--tr-line);
    font-size: 0.95rem;
}
.tr-clear[b-0w5lkpbzc0] {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tr-primary);
    cursor: pointer;
    padding: 0;
}
.tr-clear:hover[b-0w5lkpbzc0] { text-decoration: underline; }

.tr-fgroup[b-0w5lkpbzc0] { display: flex; flex-direction: column; gap: 0.45rem; }
.tr-fgroup__title[b-0w5lkpbzc0] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tr-muted);
}

.tr-check[b-0w5lkpbzc0] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--tr-ink);
    cursor: pointer;
}
.tr-check input[b-0w5lkpbzc0] { position: absolute; opacity: 0; width: 0; height: 0; }
.tr-check__box[b-0w5lkpbzc0] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}
.tr-check input[type="radio"] + .tr-check__box[b-0w5lkpbzc0] { border-radius: 50%; }
.tr-check input:checked + .tr-check__box[b-0w5lkpbzc0] {
    background: var(--tr-primary);
    border-color: var(--tr-primary);
}
.tr-check input:checked + .tr-check__box[b-0w5lkpbzc0]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}
.tr-check input:focus-visible + .tr-check__box[b-0w5lkpbzc0] {
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

.tr-range[b-0w5lkpbzc0] { width: 100%; accent-color: var(--tr-primary); }
.tr-range__val[b-0w5lkpbzc0] { font-size: 0.8rem; font-weight: 700; color: var(--tr-muted); }

/* ─── Toolbar ─── */
.tr-main[b-0w5lkpbzc0] { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.tr-toolbar[b-0w5lkpbzc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.15rem;
}
.tr-count[b-0w5lkpbzc0] { font-size: 0.9rem; font-weight: 800; color: var(--tr-ink); }
.tr-count__note[b-0w5lkpbzc0] { font-weight: 600; color: var(--tr-muted); }
.tr-sortwrap[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tr-muted);
}
.tr-sort[b-0w5lkpbzc0] {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tr-ink);
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--tr-line);
    border-radius: 0.6rem;
    background: #ffffff;
    cursor: pointer;
}
.tr-sort:focus[b-0w5lkpbzc0] { outline: none; border-color: var(--tr-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); }

/* ─── Card ─── */
/* The whole card is one link: the title anchor carries an ::after overlay that
   covers the card, so a click anywhere navigates while the keyboard gets a
   single real focus stop and screen readers get a titled link rather than a
   run-on button. The media column is narrower than a storefront's would be —
   a B2B buyer is reading the price, not the photograph. */
.tr-card[b-0w5lkpbzc0] {
    position: relative;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    background: #ffffff;
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.tr-card:hover[b-0w5lkpbzc0] {
    border-color: rgba(0, 102, 255, 0.4);
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.4);
    transform: translateY(-1px);
}
.tr-card:focus-within[b-0w5lkpbzc0] {
    outline: 3px solid rgba(0, 102, 255, 0.35);
    outline-offset: 2px;
}
.tr-card__link[b-0w5lkpbzc0] {
    color: inherit;
    text-decoration: none;
}
.tr-card__link[b-0w5lkpbzc0]::after {
    content: "";
    position: absolute;
    inset: 0;
}
.tr-card__link:focus[b-0w5lkpbzc0] { outline: none; }

.tr-card__media[b-0w5lkpbzc0] { position: relative; background: #eef1f7; min-height: 190px; }
.tr-card__img[b-0w5lkpbzc0] { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-card__placeholder[b-0w5lkpbzc0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.tr-card__placeholder .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 2.4rem !important; }
.tr-card__tags[b-0w5lkpbzc0] {
    position: absolute;
    top: 0.6rem;
    inset-inline-start: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.tr-tag[b-0w5lkpbzc0] {
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(2px);
}
/* Amber and emerald are too light to carry white text at this size; they take
   near-black ink instead. Red and indigo are dark enough to keep white. */
.tr-tag--specialoffer[b-0w5lkpbzc0] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #422006;
}
.tr-tag--lastminute[b-0w5lkpbzc0] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.tr-tag--discounted[b-0w5lkpbzc0] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #052e21;
}
.tr-tag--editorial[b-0w5lkpbzc0] { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

.tr-card__body[b-0w5lkpbzc0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1rem;
    padding: 1rem 1.1rem;
    min-width: 0;
}
.tr-card__main[b-0w5lkpbzc0] { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.tr-card__title[b-0w5lkpbzc0] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--tr-ink);
}
.tr-card__route[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tr-muted);
}
.tr-card__route .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 1rem !important; color: var(--tr-primary); }

.tr-card__meta[b-0w5lkpbzc0] { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; }
.tr-meta[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tr-muted);
}
.tr-meta .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 0.95rem !important; }
.tr-meta--warn[b-0w5lkpbzc0] { color: #b45309; }

.tr-card__supplier[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    align-self: flex-start;
    border-radius: 0.55rem;
    background: rgba(0, 102, 255, 0.07);
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e40af;
}
.tr-card__supplier .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 0.95rem !important; }

/* ─── Price block ─── */
.tr-card__side[b-0w5lkpbzc0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.6rem;
    text-align: end;
    border-inline-start: 1px dashed var(--tr-line);
    padding-inline-start: 1rem;
}
.tr-card__price-block[b-0w5lkpbzc0] { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-end; }
/* The resale price, never struck through — it is what the traveller pays, not
   a lapsed price — and never below AA contrast, because it is money. */
.tr-card__sell[b-0w5lkpbzc0] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--tr-muted);
}
.tr-card__sell strong[b-0w5lkpbzc0] { color: var(--tr-ink); font-weight: 800; }
.tr-card__margin[b-0w5lkpbzc0] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #047857;
}
.tr-card__price-now[b-0w5lkpbzc0] {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tr-ink);
    line-height: 1.15;
}
.tr-card__paylabel[b-0w5lkpbzc0] { font-size: 0.74rem; font-weight: 700; color: var(--tr-muted); }
/* Deliberately not the hotel funnel's green "+ commission" pill: there green
   means money the agency earns, here it is money off what the agency pays.
   Amber keeps the two from being read as the same thing at a glance. */
.tr-card__disc-pill[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: var(--b2b-warn-fg);
    font-size: 0.74rem;
    font-weight: 800;
}
.tr-card__disc-pill .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 0.9rem !important; }
.tr-card__fee[b-0w5lkpbzc0] {
    margin-top: 0.2rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tr-muted);
}

/* A tour with fewer seats than the party: the quote is replaced, not annotated,
   because a total the agent cannot actually book is worse than no total. */
.tr-card__short[b-0w5lkpbzc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: start;
}
.tr-card__short .material-symbols-outlined[b-0w5lkpbzc0] { font-size: 1rem !important; flex: 0 0 auto; }

.tr-loadmore[b-0w5lkpbzc0] { display: flex; justify-content: center; padding: 0.5rem 0 1rem; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .tr-layout[b-0w5lkpbzc0] { grid-template-columns: minmax(0, 1fr); }
    .tr-filters[b-0w5lkpbzc0] {
        position: static;
        display: none;
    }
    .tr-filters--open[b-0w5lkpbzc0] { display: flex; }
    .tr-filters-toggle[b-0w5lkpbzc0] {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        align-self: flex-start;
        padding: 0.55rem 1rem;
        border: 1px solid var(--tr-line);
        border-radius: 0.7rem;
        background: #ffffff;
        font: inherit;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--tr-ink);
        cursor: pointer;
    }
    .tr-filters-toggle__count[b-0w5lkpbzc0] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: var(--tr-primary);
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 800;
    }
}

@media (max-width: 768px) {
    .tr-card[b-0w5lkpbzc0] { grid-template-columns: minmax(0, 1fr); }
    .tr-card__media[b-0w5lkpbzc0] { min-height: 170px; }
    .tr-card__body[b-0w5lkpbzc0] { grid-template-columns: minmax(0, 1fr); }
    .tr-card__side[b-0w5lkpbzc0] {
        border-inline-start: none;
        border-top: 1px dashed var(--tr-line);
        padding-inline-start: 0;
        padding-top: 0.75rem;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        text-align: start;
    }
    .tr-card__price-block[b-0w5lkpbzc0] { align-items: flex-start; }
}
/* /Pages/TourCloud/TourDetail.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Tour detail (td-*). Content column + sticky booking panel, the same split the
   hotel detail page uses, with the Travelio storefront's section order — hero
   gallery, title, info strip, tabs — so a tour reads the same wherever it is
   sold. The panel's price breakdown is B2B-only.
   ─────────────────────────────────────────────────────────────────────────── */

.td[b-4vdz9879om] {
    --td-primary: #0066ff;
    --td-ink: #0f172a;
    --td-muted: #64748b;
    --td-line: #e3e5ee;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--td-ink);
}

.td-crumb[b-4vdz9879om] { display: flex; }
.td-back[b-4vdz9879om] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--td-line);
    border-radius: 0.65rem;
    background: #ffffff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--td-ink);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.td-back:hover[b-4vdz9879om] { border-color: rgba(0, 102, 255, 0.45); color: var(--td-primary); }
.td-back .material-symbols-outlined[b-4vdz9879om] { font-size: 1rem !important; }

/* ─── States ─── */
.td-state[b-4vdz9879om] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 3rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--td-line);
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--td-muted);
}
.td-state--error[b-4vdz9879om] { color: #b91c1c; flex-wrap: wrap; }
.td-spinner[b-4vdz9879om] { display: inline-flex; gap: 4px; }
.td-spinner span[b-4vdz9879om] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--td-primary);
    animation: td-bounce-b-4vdz9879om 0.9s infinite ease-in-out both;
}
.td-spinner span:nth-child(2)[b-4vdz9879om] { animation-delay: 0.12s; }
.td-spinner span:nth-child(3)[b-4vdz9879om] { animation-delay: 0.24s; }
@keyframes td-bounce-b-4vdz9879om {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}
.td-btn[b-4vdz9879om] {
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--td-line);
    border-radius: 0.65rem;
    background: #ffffff;
    font: inherit;
    font-weight: 700;
    color: var(--td-ink);
    cursor: pointer;
}
.td-btn:hover[b-4vdz9879om] { border-color: rgba(0, 102, 255, 0.45); color: var(--td-primary); }

/* ─── Layout ─── */
.td-layout[b-4vdz9879om] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}
.td-content[b-4vdz9879om] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ─── Gallery ─── */
.td-gallery[b-4vdz9879om] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.td-gallery__main[b-4vdz9879om] {
    position: relative;
    aspect-ratio: 16 / 8;
    border-radius: 14px;
    overflow: hidden;
    background: #eef1f7;
    border: 1px solid var(--td-line);
}
.td-gallery__img[b-4vdz9879om] { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-gallery__placeholder[b-4vdz9879om] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.td-gallery__placeholder .material-symbols-outlined[b-4vdz9879om] { font-size: 3rem !important; }
.td-gallery__tags[b-4vdz9879om] {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.td-tag[b-4vdz9879om] {
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.78);
}
/* Amber and emerald are too light to carry white text at this size. */
.td-tag--specialoffer[b-4vdz9879om] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #422006;
}
.td-tag--lastminute[b-4vdz9879om] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.td-tag--discounted[b-4vdz9879om] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #052e21;
}
.td-tag--editorial[b-4vdz9879om] { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

.td-gallery__strip[b-4vdz9879om] { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.15rem; }
.td-thumb[b-4vdz9879om] {
    flex: 0 0 auto;
    width: 84px;
    height: 58px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #eef1f7;
    cursor: pointer;
    transition: border-color 0.12s, opacity 0.12s;
    opacity: 0.75;
}
.td-thumb img[b-4vdz9879om] { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-thumb:hover[b-4vdz9879om] { opacity: 1; }
.td-thumb--on[b-4vdz9879om] { border-color: var(--td-primary); opacity: 1; }

/* ─── Title ─── */
.td-title[b-4vdz9879om] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1px solid var(--td-line);
    border-radius: 14px;
}
.td-title__h[b-4vdz9879om] {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.td-title__row[b-4vdz9879om] { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.td-title__loc[b-4vdz9879om] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--td-muted);
}
.td-title__loc .material-symbols-outlined[b-4vdz9879om] { font-size: 1rem !important; color: var(--td-primary); }
.td-title__supplier[b-4vdz9879om] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0.55rem;
    background: rgba(0, 102, 255, 0.07);
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e40af;
}
.td-title__supplier .material-symbols-outlined[b-4vdz9879om] { font-size: 0.95rem !important; }
.td-title__lede[b-4vdz9879om] { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--td-muted); }

/* ─── Info strip ─── */
.td-info[b-4vdz9879om] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: #ffffff;
    border: 1px solid var(--td-line);
    border-radius: 14px;
}
.td-info__item[b-4vdz9879om] { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.td-info__item > div[b-4vdz9879om] { display: flex; flex-direction: column; min-width: 0; }
.td-info__item .material-symbols-outlined[b-4vdz9879om] { font-size: 1.3rem !important; color: var(--td-primary); }
.td-info__label[b-4vdz9879om] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--td-muted);
}
.td-info__value[b-4vdz9879om] { font-size: 0.88rem; font-weight: 700; color: var(--td-ink); }

/* ─── Tabs ─── */
.td-tabs[b-4vdz9879om] {
    background: #ffffff;
    border: 1px solid var(--td-line);
    border-radius: 14px;
    overflow: hidden;
}
.td-tabnav[b-4vdz9879om] {
    display: flex;
    gap: 0.15rem;
    overflow-x: auto;
    padding: 0.4rem 0.5rem 0;
    border-bottom: 1px solid var(--td-line);
}
.td-tabnav__item[b-4vdz9879om] {
    flex: 0 0 auto;
    padding: 0.6rem 0.95rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--td-muted);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.td-tabnav__item:hover[b-4vdz9879om] { color: var(--td-ink); }
.td-tabnav__item--on[b-4vdz9879om] { color: var(--td-primary); border-bottom-color: var(--td-primary); }

.td-tabbody[b-4vdz9879om] { padding: 1rem 1.1rem 1.25rem; }
.td-tabbody:focus[b-4vdz9879om] { outline: none; }
.td-tabbody:focus-visible[b-4vdz9879om] { outline: 2px solid rgba(0, 102, 255, 0.35); outline-offset: -2px; }
.td-prose[b-4vdz9879om] { margin: 0 0 0.75rem; font-size: 0.92rem; line-height: 1.7; color: #334155; white-space: pre-line; }
.td-h3[b-4vdz9879om] {
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--td-ink);
}
.td-h3:first-child[b-4vdz9879om] { margin-top: 0; }

.td-list[b-4vdz9879om] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.td-list li[b-4vdz9879om] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #334155;
}
.td-list .material-symbols-outlined[b-4vdz9879om] { font-size: 1.05rem !important; flex: 0 0 auto; margin-top: 0.1rem; }
.td-list--check .material-symbols-outlined[b-4vdz9879om] { color: #059669; }
.td-list--cross .material-symbols-outlined[b-4vdz9879om] { color: #dc2626; }

.td-incl[b-4vdz9879om] { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }

.td-itinerary[b-4vdz9879om] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.td-day[b-4vdz9879om] { display: flex; gap: 0.75rem; }
.td-day__num[b-4vdz9879om] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.1);
    color: var(--td-primary);
    font-size: 0.85rem;
    font-weight: 800;
}
.td-day__body[b-4vdz9879om] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.td-day__title[b-4vdz9879om] { font-size: 0.92rem; font-weight: 800; color: var(--td-ink); }
.td-day__desc[b-4vdz9879om] { margin: 0; font-size: 0.87rem; line-height: 1.6; color: #334155; }
.td-day__acts[b-4vdz9879om] { margin: 0.1rem 0 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.td-day__acts li[b-4vdz9879om] { font-size: 0.84rem; color: var(--td-muted); }

.td-faq[b-4vdz9879om] { display: flex; flex-direction: column; gap: 0.5rem; }
.td-faq__item[b-4vdz9879om] {
    border: 1px solid var(--td-line);
    border-radius: 0.7rem;
    padding: 0.65rem 0.85rem;
}
.td-faq__item summary[b-4vdz9879om] {
    cursor: pointer;
    font-size: 0.89rem;
    font-weight: 700;
    color: var(--td-ink);
}
.td-faq__item p[b-4vdz9879om] { margin: 0.5rem 0 0; font-size: 0.87rem; line-height: 1.6; color: #334155; }

/* ─── Booking panel ─── */
/* Bounded and scrollable: with five ledger rows, four pax lines, the FX note
   and the CTA, an unbounded sticky panel exceeds a laptop viewport and its own
   total can no longer be scrolled to. */
.td-panel[b-4vdz9879om] {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.td-panel__card[b-4vdz9879om] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid var(--td-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.35);
}
.td-panel__empty[b-4vdz9879om],
.td-panel__warn[b-4vdz9879om] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.td-panel__empty[b-4vdz9879om] { background: #f6f7f9; color: var(--td-muted); }
.td-panel__warn[b-4vdz9879om] { background: rgba(239, 68, 68, 0.08); color: #b91c1c; }
.td-panel__empty .material-symbols-outlined[b-4vdz9879om],
.td-panel__warn .material-symbols-outlined[b-4vdz9879om] { font-size: 1.15rem !important; flex: 0 0 auto; }

.td-field[b-4vdz9879om] { display: flex; flex-direction: column; gap: 0.35rem; }
.td-field__label[b-4vdz9879om] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--td-muted);
}
.td-select[b-4vdz9879om] {
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--td-ink);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--td-line);
    border-radius: 0.65rem;
    background: #ffffff;
    cursor: pointer;
    width: 100%;
}
.td-select:focus[b-4vdz9879om] { outline: none; border-color: var(--td-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); }

.td-steppers[b-4vdz9879om] { display: flex; flex-direction: column; gap: 0.4rem; }
.td-step[b-4vdz9879om] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.td-step__meta[b-4vdz9879om] { display: flex; flex-direction: column; }
.td-step__label[b-4vdz9879om] { font-size: 0.85rem; font-weight: 700; color: var(--td-ink); }
.td-step__hint[b-4vdz9879om] { font-size: 0.72rem; color: var(--td-muted); font-weight: 500; }
.td-step__ctrl[b-4vdz9879om] { display: inline-flex; align-items: center; gap: 0.5rem; }
.td-step__btn[b-4vdz9879om] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: var(--td-ink);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.td-step__btn:hover:not(:disabled)[b-4vdz9879om] {
    background: rgba(0, 102, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.4);
    color: var(--td-primary);
}
.td-step__btn:disabled[b-4vdz9879om] { opacity: 0.4; cursor: not-allowed; }
.td-step__btn .material-symbols-outlined[b-4vdz9879om] { font-size: 1rem !important; }
.td-step__value[b-4vdz9879om] { min-width: 20px; text-align: center; font-size: 0.9rem; font-weight: 800; }
.td-step__cap[b-4vdz9879om] {
    margin: 0.35rem 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--b2b-warn-fg);
}

/* ─── Price ─── */
.td-price[b-4vdz9879om] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--td-line);
}
.td-price__head[b-4vdz9879om] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.td-price__label[b-4vdz9879om] { font-size: 0.8rem; font-weight: 700; color: var(--td-muted); }
.td-price__now[b-4vdz9879om] { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.td-price__sub[b-4vdz9879om] { font-size: 0.76rem; font-weight: 600; color: var(--td-muted); margin-top: -0.35rem; }
.td-price__busy[b-4vdz9879om] { color: var(--td-primary); }

.td-breakdown[b-4vdz9879om] { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.td-breakdown__row[b-4vdz9879om] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.81rem;
    color: #475569;
}
.td-breakdown__row dt[b-4vdz9879om] { margin: 0; }
.td-breakdown__row dd[b-4vdz9879om] { margin: 0; font-weight: 700; white-space: nowrap; }
.td-breakdown__row--credit[b-4vdz9879om] { color: #047857; }
.td-breakdown__row--total[b-4vdz9879om] {
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--td-line);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--td-ink);
}
/* The resale half of the ledger: what is added back on top of cost to reach the
   price the traveller pays. Set apart so the two halves are not read as one
   column that ought to sum to the last line. */
.td-breakdown__row--resale[b-4vdz9879om] { margin-top: 0.15rem; color: var(--td-muted); }
.td-breakdown__row--resale:first-of-type[b-4vdz9879om] { margin-top: 0.45rem; }
.td-breakdown__row--sell[b-4vdz9879om] {
    padding-top: 0.35rem;
    border-top: 1px dashed var(--td-line);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--td-ink);
}
/* The number the whole screen is for: what the agency makes on the sale. */
.td-breakdown__row--margin[b-4vdz9879om] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #047857;
}

.td-paxlines[b-4vdz9879om] { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.td-paxlines li[b-4vdz9879om] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--td-muted);
}

.td-fx[b-4vdz9879om],
.td-seats[b-4vdz9879om] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--td-muted);
}
.td-fx .material-symbols-outlined[b-4vdz9879om],
.td-seats .material-symbols-outlined[b-4vdz9879om] { font-size: 0.95rem !important; }

.td-cta[b-4vdz9879om] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 0.7rem;
    background: var(--td-primary);
    color: #ffffff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.12s;
}
.td-cta:hover:not(:disabled)[b-4vdz9879om] { filter: brightness(1.05); }
.td-cta:disabled[b-4vdz9879om] { background: #cbd5e1; cursor: not-allowed; }
.td-cta .material-symbols-outlined[b-4vdz9879om] { font-size: 1.1rem !important; }
.td-cta__note[b-4vdz9879om] { margin: -0.35rem 0 0; font-size: 0.72rem; text-align: center; color: var(--td-muted); }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .td-layout[b-4vdz9879om] { grid-template-columns: minmax(0, 1fr); }
    /* Static, and moved above the tabs, so the price is not below a full
       day-by-day itinerary on a phone. */
    .td-panel[b-4vdz9879om] { position: static; max-height: none; order: -1; }
    .td-content[b-4vdz9879om] { display: contents; }
}
/* /Pages/VisaCloud/BookingWizard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Visa booking wizard — the same visual language as the FlightCloud and
   HotelCloud wizards (bw-*): step indicator, white cards, tinted applicant
   cards with a lead accent, and one sticky navigation footer. An agent moves
   between the three funnels all day and should not have to learn a second set
   of controls for a visa.

   ::deep throughout, because the classes sit on MudBlazor components
   (MudPaper.bw-card, MudGrid.bw-guest__grid) whose markup this component does
   not itself render.

   The structural rules below are copied verbatim from the flight wizard so the
   three genuinely match rather than merely resemble each other. That includes
   its hardcoded palette (#0066ff and friends) rather than the --b2b-* tokens
   the rest of this funnel uses: making visa the one wizard on tokens would
   reintroduce exactly the inconsistency this file exists to remove. Moving all
   three onto tokens is worth doing — in one change, across all three.
   ─────────────────────────────────────────────────────────────────────────── */

.bw[b-rcpviuxeme]  .bw-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
}

.bw[b-rcpviuxeme]  .bw-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.bw[b-rcpviuxeme]  .bw-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.bw[b-rcpviuxeme]  .bw-step__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    background: #eef2f7;
    color: #94a3b8;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bw[b-rcpviuxeme]  .bw-step__num .material-symbols-outlined { font-size: 18px; }

.bw[b-rcpviuxeme]  .bw-step__label {
    font-size: 13.5px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}

.bw[b-rcpviuxeme]  .bw-step--active .bw-step__num {
    background: var(--bw-primary);
    color: #fff;
    border-color: rgba(0, 102, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}

.bw[b-rcpviuxeme]  .bw-step--active .bw-step__label { color: #111827; }

.bw[b-rcpviuxeme]  .bw-step--done .bw-step__num { background: #10b981; color: #fff; }

.bw[b-rcpviuxeme]  .bw-step--done .bw-step__label { color: #047857; }

.bw[b-rcpviuxeme]  .bw-step__bar {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}

.bw[b-rcpviuxeme]  .bw-step__bar--done { background: #10b981; }

.bw[b-rcpviuxeme]  .bw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.bw[b-rcpviuxeme]  .bw-main { min-width: 0; }

.bw[b-rcpviuxeme]  .bw-footer__deadline { display: none; }

@media (max-width: 900px) {
    .bw[b-rcpviuxeme]  .bw-layout { grid-template-columns: 1fr; }
    .bw[b-rcpviuxeme]  .bw-aside { position: static; order: -1; }

    /* Pin the footer to the viewport rather than to the end of the column, so
       the total, the deadline and the primary action stay on screen for the
       whole of a long passenger form. */
    .bw[b-rcpviuxeme]  .bw-footer {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        border-radius: 0;
        border-inline: none;
        border-block-end: none;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, 0.45);
    }
    .bw[b-rcpviuxeme]  .bw-footer__mid { flex: 1 1 100%; order: -1; align-items: flex-start; text-align: start; }
    .bw[b-rcpviuxeme]  .bw-footer__deadline { display: block; }
    .bw[b-rcpviuxeme]  .bw-back { flex: 0 0 auto; }
    .bw[b-rcpviuxeme]  .bw-continue,
    .bw[b-rcpviuxeme]  .bw-footer__actions { flex: 1 1 auto; }

    /* Clear the fixed footer so the last field is never trapped under it. */
    .bw[b-rcpviuxeme]  .bw-layout { padding-bottom: 108px; }
}

.bw[b-rcpviuxeme]  .bw-guest__extras {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
    border-top: 1px dashed #e2e8f0;
}

.bw[b-rcpviuxeme]  .bw-guest__extras-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.bw[b-rcpviuxeme]  .bw-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: none;
}

.bw[b-rcpviuxeme]  .bw-error { white-space: pre-line; }

.bw[b-rcpviuxeme]  .bw-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    position: sticky;
    bottom: 12px;
    box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.5);
}

.bw[b-rcpviuxeme]  .bw-footer__mid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.bw[b-rcpviuxeme]  .bw-footer__note { font-size: 12px; color: #6b7280; }

.bw[b-rcpviuxeme]  .bw-footer__total { font-size: 15px; color: #374151; }

.bw[b-rcpviuxeme]  .bw-footer__total strong { color: #111827; }

.bw[b-rcpviuxeme]  .bw-back,
.bw[b-rcpviuxeme]  .bw-continue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 11px;
    padding: 11px 20px;
    transition: filter 0.15s, background 0.15s, transform 0.12s, border-color 0.15s;
    flex: 0 0 auto;
}

.bw[b-rcpviuxeme]  .bw-back {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.bw[b-rcpviuxeme]  .bw-back:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; }

.bw[b-rcpviuxeme]  .bw-continue {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 10px 24px -12px rgba(249, 115, 22, 0.7);
}

.bw[b-rcpviuxeme]  .bw-continue:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }

.bw[b-rcpviuxeme]  .bw-continue--pay { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7); }

.bw[b-rcpviuxeme]  .bw-back:disabled,
.bw[b-rcpviuxeme]  .bw-continue:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

.bw[b-rcpviuxeme]  .bw-back .material-symbols-outlined,
.bw[b-rcpviuxeme]  .bw-continue .material-symbols-outlined { font-size: 18px; }

.bw[b-rcpviuxeme]  .bw-footer__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

@media (max-width: 640px) {
    .bw[b-rcpviuxeme]  .bw-footer { flex-wrap: wrap; }
    .bw[b-rcpviuxeme]  .bw-footer__mid { order: -1; flex-basis: 100%; }
    .bw[b-rcpviuxeme]  .bw-footer__actions { flex-basis: 100%; }
    .bw[b-rcpviuxeme]  .bw-footer__actions .bw-hold-btn,
    .bw[b-rcpviuxeme]  .bw-footer__actions .bw-continue { flex: 1 1 0; justify-content: center; }
}

.bw[b-rcpviuxeme]  .bw-guest {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px 4px;
    margin-top: 10px;
    transition: border-color 0.15s, background 0.15s;
}

.bw[b-rcpviuxeme]  .bw-guest:hover { border-color: #cbd5e1; }

.bw[b-rcpviuxeme]  .bw-guest:focus-within {
    background: #ffffff;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

.bw[b-rcpviuxeme]  .bw-guest--lead {
    border-inline-start: 3px solid var(--bw-primary);
    padding-inline-start: 12px;
}

.bw[b-rcpviuxeme]  .bw-guest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.bw[b-rcpviuxeme]  .bw-guest__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #334155;
}

.bw[b-rcpviuxeme]  .bw-guest__badge strong { color: #0f172a; }

.bw[b-rcpviuxeme]  .bw-guest__badge .material-symbols-outlined {
    font-size: 18px;
    color: var(--bw-primary);
}

.bw[b-rcpviuxeme]  .bw-guest__lead {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 102, 255, 0.12);
    color: var(--bw-primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 4px;
}

.bw[b-rcpviuxeme]  .bw-guest__grid { margin-bottom: 0 !important; }

.bw[b-rcpviuxeme]  .bw-spin {
    display: inline-block;
    animation: bw-spin-b-rcpviuxeme 0.9s linear infinite;
}

@keyframes bw-spin-b-rcpviuxeme { to { transform: rotate(360deg); } }

.bw[b-rcpviuxeme]  .bw-nat-item { display: flex; align-items: center; gap: 10px; }

.bw[b-rcpviuxeme]  .bw-nat-item__code {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1px 6px;
    min-width: 30px;
    text-align: center;
}

.bw[b-rcpviuxeme]  .bw-nat-item__name { font-size: 13.5px; color: #0f172a; }

.bw[b-rcpviuxeme]  .bw-nat-empty { padding: 8px 12px; font-size: 13px; color: #94a3b8; }

.bw[b-rcpviuxeme]  .bw-continue .bw-spin { font-size: 18px !important; }

/* ─── Aside ─── */

.bw[b-rcpviuxeme]  .bw-side {
    position: sticky;
    top: 84px;
    align-self: start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    min-width: 0;
}

.bw[b-rcpviuxeme]  .bw-side__title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}

/* ─── Visa-specific additions ─────────────────────────────────────────────── */

.bw[b-rcpviuxeme]  .bw-guest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bw[b-rcpviuxeme]  .bw-guest__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #111827;
}

.bw[b-rcpviuxeme]  .bw-guest__badge .material-symbols-outlined {
    font-size: 19px;
    color: var(--bw-primary);
}

.bw[b-rcpviuxeme]  .bw-guest__type {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11.5px;
    font-weight: 700;
}

.bw[b-rcpviuxeme]  .bw-guest__hint {
    font-size: 12px;
    color: #6b7280;
}

/* ─── Review recap ─── */

.bw[b-rcpviuxeme]  .bw-recap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bw[b-rcpviuxeme]  .bw-recap > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bw[b-rcpviuxeme]  .bw-recap__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bw[b-rcpviuxeme]  .bw-recap__v {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}

.bw[b-rcpviuxeme]  .bw-table { font-size: 13px; }
.bw[b-rcpviuxeme]  .bw-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bw[b-rcpviuxeme]  .bw-terms {
    line-height: 1.7;
    white-space: pre-line;
}

.bw[b-rcpviuxeme]  .bw-terms--strong {
    font-weight: 600;
    color: #111827;
}

/* ─── Payment ─── */

.bw[b-rcpviuxeme]  .bw-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.bw[b-rcpviuxeme]  .bw-pay > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}

.bw[b-rcpviuxeme]  .bw-pay__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bw[b-rcpviuxeme]  .bw-pay__v {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.bw[b-rcpviuxeme]  .bw-pay__na {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

/* ─── Aside ─── */

.bw[b-rcpviuxeme]  .bw-side__sub {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 12px;
}

.bw[b-rcpviuxeme]  .bw-side__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    color: #6b7280;
}

.bw[b-rcpviuxeme]  .bw-side__total strong {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}

/* ─── Footer additions ─── */

.bw[b-rcpviuxeme]  .bw-footer__mid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bw[b-rcpviuxeme]  .bw-footer__total {
    font-size: 13.5px;
    color: #4b5563;
}

.bw[b-rcpviuxeme]  .bw-footer__total strong {
    font-weight: 800;
    color: #111827;
}

/* A disabled Continue with no stated reason is where a funnel loses people. */
.bw[b-rcpviuxeme]  .bw-footer__reason {
    font-size: 12px;
    color: #b91c1c;
}

/* ─── Empty state ─── */

.bw[b-rcpviuxeme]  .bw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
}

.bw[b-rcpviuxeme]  .bw-empty__icon {
    font-size: 44px;
    color: #9ca3af;
}

.bw[b-rcpviuxeme]  .bw-empty__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

@media (max-width: 900px) {
    .bw[b-rcpviuxeme]  .bw-recap,
    .bw[b-rcpviuxeme]  .bw-pay {
        grid-template-columns: 1fr;
    }
}
/* /Pages/VisaCloud/Confirmation.razor.rz.scp.css */
.vcf[b-ydh0hh6oj0] { max-width: 820px; margin-inline: auto; padding-block-end: 48px; }

.vcf-head[b-ydh0hh6oj0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    margin-block-end: 16px;
}

/* Info blue, not success green: the payment landed, the visa did not. */
.vcf-head__icon[b-ydh0hh6oj0] { font-size: 40px; color: var(--b2b-info-fg); }

.vcf-head__title[b-ydh0hh6oj0] { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--b2b-on-surface); }
.vcf-head__sub[b-ydh0hh6oj0] { margin: 0; font-size: 14px; line-height: 1.7; color: var(--b2b-on-surface-variant); }

.vcf-refs[b-ydh0hh6oj0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-block-end: 8px;
}

.vcf-ref[b-ydh0hh6oj0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
}

.vcf-ref__label[b-ydh0hh6oj0] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vcf-ref__value[b-ydh0hh6oj0] { font-size: 15px; font-weight: 700; color: var(--b2b-on-surface); }

.vcf-ref__chip[b-ydh0hh6oj0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface);
    font-size: 14px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    cursor: pointer;
}

.vcf-ref__chip .material-symbols-outlined[b-ydh0hh6oj0] { font-size: 16px; color: var(--b2b-on-surface-variant); }

.vcf-copied[b-ydh0hh6oj0] { margin: 0 0 12px; font-size: 12px; color: var(--b2b-ok-fg); }

.vcf-next[b-ydh0hh6oj0] {
    padding: 20px 22px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    margin-block: 12px 16px;
}

.vcf-next__title[b-ydh0hh6oj0] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--b2b-on-surface); }

.vcf-next__list[b-ydh0hh6oj0] { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.vcf-next__list li[b-ydh0hh6oj0] { display: flex; align-items: flex-start; gap: 12px; }

.vcf-next__num[b-ydh0hh6oj0] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--b2b-primary);
    color: var(--b2b-on-primary);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vcf-next__step[b-ydh0hh6oj0] { margin: 0; font-size: 14px; font-weight: 700; color: var(--b2b-on-surface); }
.vcf-next__desc[b-ydh0hh6oj0] { margin: 2px 0 0; font-size: 13px; line-height: 1.7; color: var(--b2b-on-surface-variant); }

.vcf-actions[b-ydh0hh6oj0] { display: flex; flex-wrap: wrap; gap: 10px; }

.vcf-btn[b-ydh0hh6oj0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vcf-btn--primary[b-ydh0hh6oj0] {
    border: none;
    background: var(--b2b-action);
    color: var(--b2b-on-action);
}

.vcf-btn--primary:hover[b-ydh0hh6oj0] { background: var(--b2b-action-hover); }

.vcf-state[b-ydh0hh6oj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    text-align: center;
}

.vcf-state__icon[b-ydh0hh6oj0] { font-size: 44px; color: var(--b2b-outline); }
.vcf-state__title[b-ydh0hh6oj0] { margin: 0; font-size: 15px; font-weight: 600; color: var(--b2b-on-surface); }

.vcf-skeleton[b-ydh0hh6oj0] {
    height: 320px;
    border-radius: var(--b2b-r-lg);
    background: linear-gradient(90deg, var(--b2b-container-low) 25%, var(--b2b-container) 37%, var(--b2b-container-low) 63%);
    background-size: 400% 100%;
    animation: vcf-shimmer-b-ydh0hh6oj0 1.4s ease infinite;
}

@keyframes vcf-shimmer-b-ydh0hh6oj0 {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .vcf-skeleton[b-ydh0hh6oj0] { animation: none; }
}

@media (max-width: 768px) {
    .vcf-refs[b-ydh0hh6oj0] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .vcf-refs[b-ydh0hh6oj0] { grid-template-columns: 1fr; }
    .vcf-actions[b-ydh0hh6oj0] { flex-direction: column; }
    .vcf-btn[b-ydh0hh6oj0] { justify-content: center; }
}
/* /Pages/VisaCloud/MyOrderDetail.razor.rz.scp.css */
/* ============================================================================
   Visa order detail. Work column + commercial aside; the aside drops below the
   work at 1024px, because the workspace is what the page is for.
   ============================================================================ */

.vbd[b-4365b3n13i] { padding-block-end: 48px; }

/* ------------------------------- header ---------------------------------- */

.vbd-head[b-4365b3n13i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    margin-block-end: 14px;
}

.vbd-crumbs[b-4365b3n13i] { display: flex; gap: 8px; font-size: 12px; color: var(--b2b-on-surface-variant); margin-block-end: 6px; }
.vbd-crumbs a[b-4365b3n13i] { color: var(--b2b-primary); text-decoration: none; }
.vbd-crumbs a:hover[b-4365b3n13i] { text-decoration: underline; }

.vbd-head__title[b-4365b3n13i] { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: var(--b2b-on-surface); }
.vbd-head__sub[b-4365b3n13i] { margin: 0; font-size: 13px; color: var(--b2b-on-surface-variant); }

.vbd-head__refs[b-4365b3n13i] { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.vbd-status[b-4365b3n13i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.vbd-status .material-symbols-outlined[b-4365b3n13i] { font-size: 16px; }

.vbd-status--ok[b-4365b3n13i] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.vbd-status--warn[b-4365b3n13i] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.vbd-status--bad[b-4365b3n13i] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.vbd-status--info[b-4365b3n13i] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.vbd-status--neutral[b-4365b3n13i] { background: var(--b2b-container); color: var(--b2b-on-surface-variant); }

.vbd-copy[b-4365b3n13i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px dashed var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.vbd-copy .material-symbols-outlined[b-4365b3n13i] { font-size: 14px; }

/* ----------------------------- next action ------------------------------- */

.vbd-next[b-4365b3n13i] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--b2b-r-md);
    margin-block-end: 16px;
}

.vbd-next--ok[b-4365b3n13i] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.vbd-next--warn[b-4365b3n13i] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.vbd-next--bad[b-4365b3n13i] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }
.vbd-next--info[b-4365b3n13i] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.vbd-next--neutral[b-4365b3n13i] { background: var(--b2b-container); color: var(--b2b-on-surface-variant); }

.vbd-next__title[b-4365b3n13i] { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.vbd-next__desc[b-4365b3n13i] { margin: 0; font-size: 13px; line-height: 1.6; }

/* ------------------------------ layout ----------------------------------- */

.vbd-layout[b-4365b3n13i] { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }

.vbd-main[b-4365b3n13i] { min-width: 0; display: grid; gap: 14px; }
.vbd-aside[b-4365b3n13i] { display: grid; gap: 14px; }

.vbd-card[b-4365b3n13i] {
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    padding: 18px 20px;
}

.vbd-card__head[b-4365b3n13i] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.vbd-card__title[b-4365b3n13i] { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--b2b-on-surface); }
.vbd-card__lead[b-4365b3n13i] { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--b2b-on-surface-variant); }

.vbd-sub[b-4365b3n13i] { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--b2b-on-surface); }

.vbd-prose[b-4365b3n13i] { margin: 0; font-size: 13px; line-height: 1.75; color: var(--b2b-on-surface-variant); white-space: pre-line; }

.vbd-progresslabel[b-4365b3n13i] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant); }

/* ---------------------------- applicants --------------------------------- */

.vbd-applicant[b-4365b3n13i] {
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    margin-block-end: 10px;
    overflow: hidden;
}

.vbd-applicant__head[b-4365b3n13i] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: var(--b2b-container-low);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.vbd-applicant__head:focus-visible[b-4365b3n13i] { outline: 2px solid var(--b2b-primary); outline-offset: -2px; }

.vbd-applicant__name[b-4365b3n13i] { flex: 1; font-size: 14px; font-weight: 700; color: var(--b2b-on-surface); }

.vbd-applicant__bar[b-4365b3n13i] {
    flex: none;
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: var(--b2b-container-high);
    overflow: hidden;
}

.vbd-applicant__fill[b-4365b3n13i] { display: block; block-size: 100%; background: var(--b2b-primary); }

.vbd-applicant__counts[b-4365b3n13i] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant); white-space: nowrap; }

.vbd-applicant__rejected[b-4365b3n13i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--b2b-err-bg);
    color: var(--b2b-err-fg);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.vbd-applicant__rejected .material-symbols-outlined[b-4365b3n13i] { font-size: 14px; }

.vbd-applicant__body[b-4365b3n13i] { padding: 14px; }

.vbd-slots[b-4365b3n13i] { display: grid; gap: 8px; }

.vbd-list[b-4365b3n13i] { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.vbd-list li[b-4365b3n13i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
}

.vbd-list .material-symbols-outlined[b-4365b3n13i] { font-size: 18px; color: var(--b2b-on-surface-variant); }

.vbd-list__title[b-4365b3n13i] { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

.vbd-list__state[b-4365b3n13i] { font-size: 12px; font-weight: 700; color: var(--b2b-on-surface-variant); white-space: nowrap; }

.vbd-list__reason[b-4365b3n13i] { flex-basis: 100%; font-size: 12px; line-height: 1.6; color: var(--b2b-err-fg); }

/* A button, not a link: private-scope files are fetched with the agent's
   token and opened from memory, so there is no href to hang on it. */
.vbd-list__file[b-4365b3n13i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    color: var(--b2b-primary);
    text-decoration: none;
}

.vbd-list__file:hover[b-4365b3n13i] { text-decoration: underline; }

/* ----------------------------- timeline ---------------------------------- */

.vbd-timeline[b-4365b3n13i] { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.vbd-timeline li[b-4365b3n13i] { display: flex; align-items: flex-start; gap: 12px; }

.vbd-timeline__dot[b-4365b3n13i] {
    flex: none;
    width: 10px;
    height: 10px;
    margin-block-start: 5px;
    border-radius: 50%;
    background: var(--b2b-primary);
}

.vbd-timeline__msg[b-4365b3n13i] { margin: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }
.vbd-timeline__meta[b-4365b3n13i] { margin: 2px 0 0; font-size: 12px; color: var(--b2b-on-surface-variant); }

/* ------------------------------ tables ----------------------------------- */

.vbd-facts[b-4365b3n13i] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }

.vbd-facts > div[b-4365b3n13i] {
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.vbd-facts dt[b-4365b3n13i],
.vbd-pay dt[b-4365b3n13i],
.vbd-contact dt[b-4365b3n13i] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vbd-facts dd[b-4365b3n13i],
.vbd-contact dd[b-4365b3n13i] { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

.vbd-tablewrap[b-4365b3n13i] { overflow-x: auto; }

.vbd-table[b-4365b3n13i] { width: 100%; border-collapse: collapse; font-size: 13px; }

.vbd-table th[b-4365b3n13i],
.vbd-table td[b-4365b3n13i] {
    padding: 8px 10px;
    border-block-end: 1px solid var(--b2b-border);
    text-align: start;
    white-space: nowrap;
}

.vbd-table thead th[b-4365b3n13i] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vbd-pay[b-4365b3n13i] { display: grid; gap: 10px; margin: 0 0 12px; }

.vbd-pay dd[b-4365b3n13i] { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--b2b-on-surface); }

.vbd-pay .vbd-pay__discount dd[b-4365b3n13i] { color: #047857; }

.vbd-pay-note[b-4365b3n13i] { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--b2b-on-surface-variant); }

.vbd-contact[b-4365b3n13i] { display: grid; gap: 10px; margin: 0; }

/* ------------------------------- notes ----------------------------------- */

.vbd-notes[b-4365b3n13i] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.7;
    resize: vertical;
}

.vbd-notes:focus-visible[b-4365b3n13i] { outline: 2px solid var(--b2b-primary); outline-offset: 1px; }

.vbd-notes__actions[b-4365b3n13i] { display: flex; align-items: center; gap: 10px; margin-block-start: 10px; }

.vbd-saved[b-4365b3n13i] { font-size: 12px; color: var(--b2b-ok-fg); }

/* ------------------------------ buttons ---------------------------------- */

.vbd-btn[b-4365b3n13i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vbd-btn--block[b-4365b3n13i] { width: 100%; }

.vbd-btn:disabled[b-4365b3n13i] { background: var(--b2b-container-high); color: var(--b2b-outline); cursor: not-allowed; }

/* ------------------------------ states ----------------------------------- */

.vbd-state[b-4365b3n13i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    text-align: center;
}

.vbd-state__icon[b-4365b3n13i] { font-size: 44px; color: var(--b2b-outline); }
.vbd-state__title[b-4365b3n13i] { margin: 0; font-size: 15px; font-weight: 600; color: var(--b2b-on-surface); }

.vbd-skeleton[b-4365b3n13i] {
    height: 420px;
    border-radius: var(--b2b-r-lg);
    background: linear-gradient(90deg, var(--b2b-container-low) 25%, var(--b2b-container) 37%, var(--b2b-container-low) 63%);
    background-size: 400% 100%;
    animation: vbd-shimmer-b-4365b3n13i 1.4s ease infinite;
}

@keyframes vbd-shimmer-b-4365b3n13i {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .vbd-skeleton[b-4365b3n13i] { animation: none; }
}

/* --------------------------- breakpoints --------------------------------- */

@media (max-width: 1024px) {
    .vbd-layout[b-4365b3n13i] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .vbd-head[b-4365b3n13i] { flex-direction: column; }
    .vbd-head__refs[b-4365b3n13i] { align-items: flex-start; }
    .vbd-facts[b-4365b3n13i] { grid-template-columns: 1fr; }
    .vbd-applicant__bar[b-4365b3n13i] { display: none; }
}

/* ------------------------- per-applicant outcome ------------------------- */
/* The consulate answers one applicant at a time, so the booked-applicants
   table carries each person's own result rather than only the order's. */

.vbd-outcome[b-4365b3n13i] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant);
}

.vbd-outcome--1[b-4365b3n13i] { background: var(--b2b-info-bg); color: var(--b2b-info-fg); }
.vbd-outcome--2[b-4365b3n13i] { background: var(--b2b-ok-bg);   color: var(--b2b-ok-fg); }
.vbd-outcome--3[b-4365b3n13i] { background: var(--b2b-err-bg);  color: var(--b2b-err-fg); }

.vbd-outcome__note[b-4365b3n13i] {
    display: block;
    margin-block-start: 4px;
    font-size: 12px;
    color: var(--b2b-on-surface-variant);
}

/* ------------------------ files issued to the agency --------------------- */
/* What the order was placed for. Given its own visual weight above the
   timeline: an agent opening a finished order is here to collect the visa. */

.vbd-issued[b-4365b3n13i] { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.vbd-issued__row[b-4365b3n13i] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--b2b-container-low);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
}

.vbd-issued__icon[b-4365b3n13i] { color: var(--b2b-primary); font-size: 20px; }
.vbd-issued__body[b-4365b3n13i] { flex: 1; min-width: 0; }

.vbd-issued__title[b-4365b3n13i] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    color: var(--b2b-on-surface);
    overflow-wrap: anywhere;
}

.vbd-issued__title:hover[b-4365b3n13i] { color: var(--b2b-primary); text-decoration: underline; }

.vbd-issued__meta[b-4365b3n13i] { margin: 2px 0 0; font-size: 12px; color: var(--b2b-on-surface-variant); }
.vbd-issued__note[b-4365b3n13i] { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--b2b-on-surface-variant); }

.vbd-issued__download[b-4365b3n13i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--b2b-primary);
    border-radius: var(--b2b-r);
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--b2b-primary);
}

.vbd-issued__download:hover[b-4365b3n13i] { background: var(--b2b-primary); color: #fff; }

@media (max-width: 640px) {
    .vbd-issued__row[b-4365b3n13i] { flex-wrap: wrap; }
    .vbd-issued__download[b-4365b3n13i] { inline-size: 100%; justify-content: center; }
}

/* ── Cancellation (offered only before lodgement) ─────────────────────── */
.vbd-btn--danger[b-4365b3n13i] {
    color: var(--b2b-err, #b91c1c);
    border-color: color-mix(in srgb, var(--b2b-err, #b91c1c) 40%, transparent);
}
.vbd-btn--danger:hover:not(:disabled)[b-4365b3n13i] {
    background: var(--b2b-err-bg, #fee2e2);
}
.vbd-cancel[b-4365b3n13i] {
    display: grid;
    gap: 8px;
    margin-block-start: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--b2b-err, #b91c1c) 35%, transparent);
    border-radius: var(--b2b-radius-sm, 8px);
    background: var(--b2b-err-bg, #fee2e2);
}
.vbd-cancel__hint[b-4365b3n13i] { margin: 0; font-size: 13px; color: var(--b2b-on-surface, inherit); }
.vbd-cancel__label[b-4365b3n13i] { font-size: 12px; font-weight: 600; color: var(--b2b-on-surface-variant, inherit); }
.vbd-cancel__reason[b-4365b3n13i] {
    width: 100%;
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--b2b-outline, #d9e0dd);
    border-radius: var(--b2b-radius-sm, 8px);
    background: var(--b2b-surface, #fff);
    resize: vertical;
}
.vbd-cancel__reason:focus-visible[b-4365b3n13i] { outline: 2px solid var(--b2b-primary, #1d4ed8); outline-offset: 1px; }
.vbd-cancel__actions[b-4365b3n13i] { display: flex; gap: 8px; flex-wrap: wrap; }
.vbd-cancel__error[b-4365b3n13i] { margin: 0; font-size: 13px; color: var(--b2b-err, #b91c1c); }
/* /Pages/VisaCloud/Results.razor.rz.scp.css */
/*
    Visa results. All colours from --b2b-* tokens and only the four documented
    breakpoints (640/768/1024/1280) — no parallel palette and no ad-hoc widths.
*/

.vr[b-dr3j9ttu6a] {
    max-width: 1440px;
    margin-inline: auto;
    padding: 16px;
}

/* ── Search summary ───────────────────────────────────────────── */

.vr-summary[b-dr3j9ttu6a] {
    position: sticky;
    top: calc(var(--b2b-topbar-h) + 8px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    box-shadow: var(--b2b-shadow);
}

.vr-summary__chips[b-dr3j9ttu6a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vr-summary__chip[b-dr3j9ttu6a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--b2b-on-surface);
    background: var(--b2b-container-low);
    border-radius: 999px;
}

.vr-summary__chip .material-symbols-outlined[b-dr3j9ttu6a] {
    font-size: 16px;
    color: var(--b2b-on-surface-variant);
}

.vr-summary__edit[b-dr3j9ttu6a],
.vr-filters-toggle[b-dr3j9ttu6a],
.vr-btn[b-dr3j9ttu6a],
.vr-loadmore[b-dr3j9ttu6a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--b2b-primary);
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    cursor: pointer;
}

.vr-summary__edit--on[b-dr3j9ttu6a] {
    background: var(--b2b-container-low);
}

.vr-editor[b-dr3j9ttu6a] {
    margin-bottom: 16px;
}

/* ── Layout ───────────────────────────────────────────────────── */

.vr-layout[b-dr3j9ttu6a] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

.vr-filters[b-dr3j9ttu6a] {
    position: sticky;
    top: calc(var(--b2b-topbar-h) + 80px);
    padding: 16px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
}

.vr-main[b-dr3j9ttu6a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.vr-filters-toggle[b-dr3j9ttu6a] {
    display: none;
    margin-bottom: 12px;
}

.vr-filters-toggle__count[b-dr3j9ttu6a] {
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--b2b-on-primary);
    background: var(--b2b-primary);
    border-radius: 999px;
}

/* ── Toolbar ──────────────────────────────────────────────────── */

.vr-toolbar[b-dr3j9ttu6a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vr-count[b-dr3j9ttu6a] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Segmented rather than a select: this control is used on every search, and a
   select hides its options behind two clicks. */
.vr-seg[b-dr3j9ttu6a] {
    display: inline-flex;
    padding: 3px;
    background: var(--b2b-container-low);
    border-radius: var(--b2b-r);
}

.vr-seg__btn[b-dr3j9ttu6a] {
    padding: 7px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--b2b-on-surface-variant);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.vr-seg__btn--on[b-dr3j9ttu6a] {
    font-weight: 700;
    color: var(--b2b-primary);
    background: var(--b2b-card);
    box-shadow: var(--b2b-shadow);
}

.vr-chips[b-dr3j9ttu6a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vr-chip[b-dr3j9ttu6a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--b2b-primary);
    background: var(--b2b-tertiary-fixed);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.vr-chip__x[b-dr3j9ttu6a] {
    font-size: 14px;
}

.vr-chip--clear[b-dr3j9ttu6a] {
    color: var(--b2b-on-surface-variant);
    background: var(--b2b-container-low);
}

/* ── Result card ──────────────────────────────────────────────── */

















/* Name and feasibility share the first row: the flag has to be reached before
   the eye moves on. */








/* The only element on the card allowed a status colour. */
















/* Muted on purpose: metadata must not compete with the price. */




/* Largest text on the card, top of its column, aligned with the name. */










/* ── States ───────────────────────────────────────────────────── */

.vr-state[b-dr3j9ttu6a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
}

.vr-state__icon[b-dr3j9ttu6a] {
    font-size: 48px;
    color: var(--b2b-outline);
}

.vr-state__title[b-dr3j9ttu6a] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.vr-state__hint[b-dr3j9ttu6a] {
    margin: 0;
    max-width: 48ch;
    font-size: 13px;
    color: var(--b2b-on-surface-variant);
}

.vr-state--error .vr-state__icon[b-dr3j9ttu6a] {
    color: var(--b2b-err-fg);
}

.vr-loadmore[b-dr3j9ttu6a] {
    align-self: center;
    margin-top: 8px;
}

/* Skeletons match the real geometry so nothing shifts when results land. */
.vr-skeleton[b-dr3j9ttu6a] {
    border-radius: var(--b2b-r-lg);
    background: linear-gradient(90deg,
        var(--b2b-container-low) 25%,
        var(--b2b-container-high) 37%,
        var(--b2b-container-low) 63%);
    background-size: 400% 100%;
    animation: vr-shimmer-b-dr3j9ttu6a 1.4s ease infinite;
}

.vr-skeleton--card[b-dr3j9ttu6a] { height: 162px; }
.vr-skeleton--rail[b-dr3j9ttu6a] { height: 420px; }

@keyframes vr-shimmer-b-dr3j9ttu6a {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .vr-skeleton[b-dr3j9ttu6a] { animation: none; }
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .vr-layout[b-dr3j9ttu6a] {
        grid-template-columns: 1fr;
    }

    /* Rail becomes a drawer behind the toggle rather than stacking above the
       first result, where it would push every card off screen. */
    .vr-filters[b-dr3j9ttu6a] {
        display: none;
        position: static;
    }

    .vr-filters--open[b-dr3j9ttu6a] {
        display: block;
    }

    .vr-filters-toggle[b-dr3j9ttu6a] {
        display: inline-flex;
    }
}


/* /Pages/VisaCloud/VisaDetail.razor.rz.scp.css */
/* ============================================================================
   Visa detail. Content column + sticky purchase aside above 1024px; below it,
   the purchase block is promoted to position 2 so an agent never has to read
   fourteen sections to find out what it costs.
   Every colour comes from a --b2b-* token so white-label theming holds.
   ============================================================================ */

.vd[b-pht9uolbab] { padding-block-end: 48px; }

/* ------------------------------- hero ------------------------------------ */

.vd-hero[b-pht9uolbab] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    overflow: hidden;
    margin-block-end: 24px;
}

.vd-hero__media[b-pht9uolbab] { position: relative; min-height: 240px; background: var(--b2b-container-low); }

.vd-hero__media img[b-pht9uolbab] { width: 100%; height: 100%; object-fit: cover; display: block; }

.vd-hero__placeholder[b-pht9uolbab] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--b2b-outline);
}

.vd-hero__placeholder .material-symbols-outlined[b-pht9uolbab] { font-size: 56px; }

.vd-hero__gallery[b-pht9uolbab] {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--b2b-r);
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.vd-hero__body[b-pht9uolbab] { padding: 20px 24px 24px 0; }

.vd-crumbs[b-pht9uolbab] {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--b2b-on-surface-variant);
    margin-block-end: 8px;
}

.vd-crumbs a[b-pht9uolbab] { color: var(--b2b-primary); text-decoration: none; }
.vd-crumbs a:hover[b-pht9uolbab] { text-decoration: underline; }

.vd-hero__title[b-pht9uolbab] {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--b2b-on-surface);
}

.vd-hero__badges[b-pht9uolbab] { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }

.vd-badge[b-pht9uolbab] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
}

.vd-badge--type[b-pht9uolbab] {
    background: var(--b2b-tertiary-fixed);
    color: var(--b2b-on-tertiary-fixed);
}

.vd-badge .material-symbols-outlined[b-pht9uolbab] { font-size: 16px; }

.vd-hero__summary[b-pht9uolbab] {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--b2b-on-surface-variant);
}

.vd-keychips[b-pht9uolbab] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vd-keychip[b-pht9uolbab] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.vd-keychip .material-symbols-outlined[b-pht9uolbab] {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 20px;
    color: var(--b2b-primary);
}

.vd-keychip__label[b-pht9uolbab] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vd-keychip__value[b-pht9uolbab] { font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

/* ------------------------------ layout ----------------------------------- */

.vd-layout[b-pht9uolbab] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.vd-main[b-pht9uolbab] { min-width: 0; }

.vd-buy[b-pht9uolbab] {
    position: sticky;
    top: calc(var(--b2b-topbar-h) + 16px);
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.vd-buy__card[b-pht9uolbab] {
    /* Without this the price table's intrinsic width wins over the grid track
       and the card renders wider than its column, clipping the far edge. */
    min-width: 0;
    overflow: hidden;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    box-shadow: var(--b2b-shadow);
    padding: 18px;
}

.vd-buy__heading[b-pht9uolbab] { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--b2b-on-surface); }

.vd-buy__party[b-pht9uolbab] { margin: 0 0 14px; font-size: 12px; color: var(--b2b-on-surface-variant); }

.vd-buy__total[b-pht9uolbab] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 14px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--b2b-border);
    font-size: 13px;
    color: var(--b2b-on-surface-variant);
}

.vd-buy__total strong[b-pht9uolbab] { font-size: 22px; font-weight: 700; color: var(--b2b-on-surface); }

.vd-buy__currency[b-pht9uolbab],
.vd-buy__afternote[b-pht9uolbab] {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--b2b-on-surface-variant);
}

.vd-buy__unpriced[b-pht9uolbab] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--b2b-r);
    background: var(--b2b-err-bg);
    color: var(--b2b-err-fg);
    font-size: 13px;
    line-height: 1.6;
}

.vd-buy__cta[b-pht9uolbab] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-block-start: 16px;
    padding: 12px 16px;
    border: none;
    border-radius: var(--b2b-r);
    /* The action orange is reserved for the primary CTA — nothing else on this
       page is allowed to wear it. */
    background: var(--b2b-action);
    color: var(--b2b-on-action);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.vd-buy__cta:hover:not(:disabled)[b-pht9uolbab] { background: var(--b2b-action-hover); }

.vd-buy__cta:disabled[b-pht9uolbab] { background: var(--b2b-container-high); color: var(--b2b-outline); cursor: not-allowed; }

.vd-buy__blocked[b-pht9uolbab] {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--b2b-err-fg);
}

/* ----------------------------- content ----------------------------------- */

.vd-jump[b-pht9uolbab] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 16px;
}

.vd-jump a[b-pht9uolbab] {
    padding: 5px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: 999px;
    background: var(--b2b-card);
    color: var(--b2b-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.vd-jump a:hover[b-pht9uolbab] { border-color: var(--b2b-primary); color: var(--b2b-primary); }

.vd-feas[b-pht9uolbab] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--b2b-r-md);
    margin-block-end: 20px;
}

.vd-feas--ok[b-pht9uolbab] { background: var(--b2b-ok-bg); color: var(--b2b-ok-fg); }
.vd-feas--warn[b-pht9uolbab] { background: var(--b2b-warn-bg); color: var(--b2b-warn-fg); }
.vd-feas--bad[b-pht9uolbab] { background: var(--b2b-err-bg); color: var(--b2b-err-fg); }

.vd-feas__title[b-pht9uolbab] { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.vd-feas__detail[b-pht9uolbab] { margin: 0; font-size: 13px; line-height: 1.6; }

.vd-section[b-pht9uolbab] {
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    padding: 20px 22px;
    margin-block-end: 16px;
    /* Anchored jumps must not land under the sticky topbar. */
    scroll-margin-top: calc(var(--b2b-topbar-h) + 16px);
}

.vd-section__title[b-pht9uolbab] { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--b2b-on-surface); }

.vd-section__sub[b-pht9uolbab] { margin: 20px 0 8px; font-size: 14px; font-weight: 700; color: var(--b2b-on-surface); }

.vd-section__lead[b-pht9uolbab] { margin: 0 0 12px; font-size: 13px; color: var(--b2b-on-surface-variant); }

.vd-prose[b-pht9uolbab] {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--b2b-on-surface-variant);
    white-space: pre-line;
}

.vd-facts[b-pht9uolbab] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
}

.vd-facts > div[b-pht9uolbab] {
    padding: 10px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.vd-facts dt[b-pht9uolbab] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
    margin-block-end: 2px;
}

.vd-facts dd[b-pht9uolbab] { margin: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

.vd-split[b-pht9uolbab] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.vd-split__title[b-pht9uolbab] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--b2b-on-surface);
}

.vd-split__title .material-symbols-outlined[b-pht9uolbab] { font-size: 18px; color: var(--b2b-primary); }

.vd-split__empty[b-pht9uolbab] { margin: 0; font-size: 13px; color: var(--b2b-on-surface-variant); }

.vd-checklist[b-pht9uolbab] { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.vd-checklist li[b-pht9uolbab] { display: flex; align-items: flex-start; gap: 8px; }

.vd-checklist .material-symbols-outlined[b-pht9uolbab] { font-size: 18px; color: var(--b2b-ok-fg); flex: none; }

.vd-checklist__title[b-pht9uolbab] { margin: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }
.vd-checklist__desc[b-pht9uolbab] { margin: 2px 0 0; font-size: 12px; line-height: 1.6; color: var(--b2b-on-surface-variant); }

.vd-slots[b-pht9uolbab] { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.vd-slots li[b-pht9uolbab] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
}

.vd-slots .material-symbols-outlined[b-pht9uolbab] { font-size: 18px; color: var(--b2b-on-surface-variant); }

.vd-slots__title[b-pht9uolbab] { flex: 1; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }

.vd-slots__flag[b-pht9uolbab] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vd-timeline[b-pht9uolbab] { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.vd-timeline li[b-pht9uolbab] { display: flex; align-items: flex-start; gap: 12px; }

.vd-timeline__dot[b-pht9uolbab] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--b2b-primary);
    color: var(--b2b-on-primary);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vd-timeline__title[b-pht9uolbab] { margin: 0; font-size: 13px; font-weight: 700; color: var(--b2b-on-surface); }
.vd-timeline__desc[b-pht9uolbab] { margin: 2px 0 0; font-size: 13px; line-height: 1.7; color: var(--b2b-on-surface-variant); }

.vd-raci[b-pht9uolbab] { width: 100%; border-collapse: collapse; font-size: 13px; }

.vd-raci th[b-pht9uolbab],
.vd-raci td[b-pht9uolbab] {
    padding: 8px 10px;
    border-block-end: 1px solid var(--b2b-border);
    text-align: start;
}

.vd-raci thead th[b-pht9uolbab] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

.vd-raci td[b-pht9uolbab] { color: var(--b2b-on-surface-variant); }
.vd-raci td:last-child[b-pht9uolbab] { font-weight: 600; color: var(--b2b-on-surface); }

.vd-warn[b-pht9uolbab] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--b2b-r-md);
    background: var(--b2b-warn-bg);
    color: var(--b2b-warn-fg);
    margin-block: 12px;
}

.vd-warn__title[b-pht9uolbab] { margin: 0 0 2px; font-size: 13px; font-weight: 700; }
.vd-warn__desc[b-pht9uolbab] { margin: 0; font-size: 13px; line-height: 1.7; }

.vd-disclaimers[b-pht9uolbab] {
    margin: 12px 0 0;
    padding-inline-start: 20px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--b2b-on-surface-variant);
}

.vd-faqs[b-pht9uolbab] { display: grid; gap: 8px; }

.vd-faq[b-pht9uolbab] {
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    padding: 10px 14px;
}

.vd-faq summary[b-pht9uolbab] { font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); cursor: pointer; }

.vd-faq p[b-pht9uolbab] { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: var(--b2b-on-surface-variant); }

/* ---------------------------- lightbox ----------------------------------- */

.vd-lightbox[b-pht9uolbab] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, .88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
}

.vd-lightbox > img[b-pht9uolbab] { max-width: 92vw; max-height: 70vh; object-fit: contain; border-radius: var(--b2b-r-md); }

.vd-lightbox__close[b-pht9uolbab] {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.vd-lightbox__strip[b-pht9uolbab] { display: flex; gap: 8px; overflow-x: auto; max-width: 92vw; }

.vd-lightbox__thumb[b-pht9uolbab] {
    flex: none;
    width: 72px;
    height: 54px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--b2b-r);
    overflow: hidden;
    cursor: pointer;
    background: none;
}

.vd-lightbox__thumb--on[b-pht9uolbab] { border-color: var(--b2b-action); }

.vd-lightbox__thumb img[b-pht9uolbab] { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------- states ------------------------------------- */

.vd-state[b-pht9uolbab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    text-align: center;
}

.vd-state__icon[b-pht9uolbab] { font-size: 44px; color: var(--b2b-outline); }
.vd-state__title[b-pht9uolbab] { margin: 0; font-size: 15px; font-weight: 600; color: var(--b2b-on-surface); }
.vd-state__actions[b-pht9uolbab] { display: flex; gap: 8px; }

.vd-btn[b-pht9uolbab] {
    padding: 9px 18px;
    border: none;
    border-radius: var(--b2b-r);
    background: var(--b2b-primary);
    color: var(--b2b-on-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.vd-btn--ghost[b-pht9uolbab] {
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    color: var(--b2b-on-surface);
}

.vd-skeleton[b-pht9uolbab] {
    border-radius: var(--b2b-r-lg);
    background: linear-gradient(90deg, var(--b2b-container-low) 25%, var(--b2b-container) 37%, var(--b2b-container-low) 63%);
    background-size: 400% 100%;
    animation: vd-shimmer-b-pht9uolbab 1.4s ease infinite;
    margin-block-end: 16px;
}

.vd-skeleton--hero[b-pht9uolbab] { height: 260px; }
.vd-skeleton--body[b-pht9uolbab] { height: 420px; }

@keyframes vd-shimmer-b-pht9uolbab {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .vd-skeleton[b-pht9uolbab] { animation: none; }
}

/* --------------------------- breakpoints --------------------------------- */

@media (max-width: 1024px) {
    .vd-layout[b-pht9uolbab] { grid-template-columns: 1fr; }

    /* The purchase block moves to position 2 — under the hero, above the
       fourteen sections of content — rather than to the bottom of the page. */
    .vd-buy[b-pht9uolbab] { position: static; grid-column: 1; grid-row: 1; }
    .vd-main[b-pht9uolbab] { grid-column: 1; grid-row: 2; }
}

@media (max-width: 768px) {
    .vd-hero[b-pht9uolbab] { grid-template-columns: 1fr; }
    .vd-hero__body[b-pht9uolbab] { padding: 0 20px 20px; }
    .vd-keychips[b-pht9uolbab] { grid-template-columns: 1fr; }
    .vd-facts[b-pht9uolbab],
    .vd-split[b-pht9uolbab] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .vd-hero__title[b-pht9uolbab] { font-size: 21px; }
    .vd-section[b-pht9uolbab] { padding: 16px; }
}
/* /Shared/Advertising/AdSlotCard.razor.rz.scp.css */
/* Matches the result cards' border and radius so the banner belongs to the
   list's rhythm, but carries no hover lift: a result card rises because it is
   selectable, and a banner that borrows that affordance starts reading as an
   offer the agent can book. */
.ad-slot[b-rtwlp80p3p] {
    display: block;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f3f4f6;
    line-height: 0;
    text-decoration: none;
}

.ad-slot:hover[b-rtwlp80p3p] {
    border-color: #d1d5db;
}

/* The frame holds its height before the image loads. Without it every banner
   pushes the fares below it down mid-scan — the one moment an agent is
   comparing prices. 6.4:1 is the usual wide leaderboard ratio; the image is
   scaled to fit rather than cropped so nothing in the creative is lost. */
.ad-slot__img[b-rtwlp80p3p] {
    display: block;
    width: 100%;
    aspect-ratio: 6.4 / 1;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 719px) {
    /* Phones get a squarer creative (or the same one letterboxed less
       aggressively) — a 6.4:1 strip at 360px tall is an unreadable sliver. */
    .ad-slot__img[b-rtwlp80p3p] { aspect-ratio: 3 / 1; }
}
/* /Shared/FlightCloud/FareRulesText.razor.rz.scp.css */
/* Styled fare rules. Mirrored in TAM.AdminPanel — keep the two copies in sync. */
.frt[b-jh0g89oy56] {
    font-size: 12.5px; line-height: 1.6;
    color: var(--b2b-on-surface-variant, #475569);
    text-align: start;
    overflow-wrap: anywhere;
}
.frt--compact[b-jh0g89oy56] { font-size: 9.5px; line-height: 1.45; }

.frt-route[b-jh0g89oy56] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 14px 0 4px;
}
.frt-route:first-child[b-jh0g89oy56] { margin-top: 0; }
.frt-route__od[b-jh0g89oy56] {
    font-size: 1.08em; font-weight: 800; letter-spacing: .02em;
    color: var(--b2b-on-surface, #0f172a);
}
.frt-route__pax[b-jh0g89oy56], .frt-route__fb[b-jh0g89oy56] {
    font-size: .8em; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    background: var(--b2b-info-bg, #dbeafe); color: var(--b2b-info-fg, #1d4ed8);
}
.frt-route__fb[b-jh0g89oy56] { background: var(--b2b-container, #edeef0); color: var(--b2b-on-surface-variant, #475569); font-family: ui-monospace, monospace; }

.frt-cat[b-jh0g89oy56] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 14px 0 6px; padding-bottom: 4px;
    border-bottom: 2px solid var(--b2b-primary, #003d9b);
}
.frt-cat:first-child[b-jh0g89oy56] { margin-top: 0; }
.frt-cat__title[b-jh0g89oy56] {
    font-size: .92em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--b2b-primary, #003d9b);
}
.frt-cat__when[b-jh0g89oy56] {
    font-size: .8em; font-weight: 600; padding: 1px 8px; border-radius: 999px;
    background: var(--b2b-container-low, #f3f4f6); color: var(--b2b-on-surface-variant, #475569);
}

.frt-p[b-jh0g89oy56] { margin: 0 0 6px; unicode-bidi: plaintext; }
.frt-p--bullet[b-jh0g89oy56] { position: relative; padding-inline-start: 16px; }
.frt-p--bullet[b-jh0g89oy56]::before {
    content: ""; position: absolute; inset-inline-start: 4px; top: .68em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--b2b-outline, #94a3b8);
}
.frt-lead[b-jh0g89oy56] {
    display: block; font-weight: 700; font-size: .9em; letter-spacing: .02em;
    color: var(--b2b-on-surface, #0f172a);
}

.frt-note[b-jh0g89oy56] {
    margin: 0 0 8px; padding: 6px 10px; border-radius: 6px;
    background: var(--b2b-warn-bg, #fef9c3); color: var(--b2b-warn-fg, #a16207);
    font-size: .92em;
}
.frt-note__lbl[b-jh0g89oy56] { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-inline-end: 4px; }

.frt-div[b-jh0g89oy56] {
    border: 0; border-top: 1px dashed var(--b2b-border, #e3e5ee);
    margin: 8px 0;
}

.frt-amt[b-jh0g89oy56] { color: var(--b2b-on-surface, #0f172a); font-weight: 800; white-space: nowrap; }
.frt-dur[b-jh0g89oy56] { color: var(--b2b-on-surface, #0f172a); font-weight: 700; white-space: nowrap; }
.frt-pos[b-jh0g89oy56] { color: var(--b2b-ok-fg, #15803d); font-weight: 700; }
.frt-neg[b-jh0g89oy56] { color: var(--b2b-err-fg, #b91c1c); font-weight: 700; }

@media print {
    .frt[b-jh0g89oy56] { max-height: none !important; overflow: visible !important; }
    .frt-note[b-jh0g89oy56] { background: none; border: 1px solid #e2e8f0; }
}
/* /Shared/FlightCloud/FlightFareFacilities.razor.rz.scp.css */
.ff__head[b-ubnc2i35al] { margin-bottom: 10px; }
.ff__title[b-ubnc2i35al] { font-size: 14px; font-weight: 800; color: #0f172a; }

.ff__grid[b-ubnc2i35al] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px;
}

.ff__feat[b-ubnc2i35al] { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.ff__ic[b-ubnc2i35al] { display: inline-flex; flex: 0 0 auto; }
.ff__ic .ff-ic[b-ubnc2i35al] { width: 15px; height: 15px; }
.ff__txt[b-ubnc2i35al] { line-height: 1.2; }

.ff__feat--ok[b-ubnc2i35al] { color: #15803d; }
.ff__feat--ok .ff__ic[b-ubnc2i35al] { color: #16a34a; }
.ff__feat--fee[b-ubnc2i35al] { color: #b45309; }
.ff__feat--fee .ff__ic[b-ubnc2i35al] { color: #d97706; }
.ff__feat--no[b-ubnc2i35al] { color: #9ca3af; }
.ff__feat--no .ff__txt[b-ubnc2i35al] { text-decoration: line-through; }
/* /Shared/FlightCloud/FlightItineraryDetail.razor.rz.scp.css */
.fid__sec[b-a6qd2ily2l] { padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.fid__sec:first-child[b-a6qd2ily2l] { padding-top: 0; }
.fid__sec:last-child[b-a6qd2ily2l] { border-bottom: none; padding-bottom: 0; }

.fid__sec-head[b-a6qd2ily2l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fid__sec-title[b-a6qd2ily2l] { font-size: 14.5px; font-weight: 800; color: #111827; }
.fid__sec-meta[b-a6qd2ily2l] { font-size: 12.5px; color: #6b7280; }

.fid__seg[b-a6qd2ily2l] {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 14px;
    padding: 6px 0;
}
.fid__seg-rail[b-a6qd2ily2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
}
.fid__dot[b-a6qd2ily2l] {
    width: 9px;
    height: 9px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}
.fid__dot--end[b-a6qd2ily2l] { background: #0066ff; border-color: #0066ff; }
.fid__rail[b-a6qd2ily2l] { flex: 1 1 auto; width: 2px; background: #e2e8f0; margin: 2px 0; }

.fid__seg-times[b-a6qd2ily2l] { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.fid__pt[b-a6qd2ily2l] { display: flex; flex-direction: column; }
.fid__pt strong[b-a6qd2ily2l] { font-size: 15px; color: #111827; font-variant-numeric: tabular-nums; }
.fid__pt span[b-a6qd2ily2l] { font-size: 12.5px; color: #6b7280; }
.fid__pt-airport[b-a6qd2ily2l] { font-weight: 600; color: #111827 !important; }
.fid__pt-place[b-a6qd2ily2l] { font-size: 12px !important; }

.fid__seg-info[b-a6qd2ily2l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: #6b7280;
    padding-top: 4px;
}
.fid__seg-info strong[b-a6qd2ily2l] { font-size: 13.5px; color: #111827; }

.fid__layover[b-a6qd2ily2l] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 6px 28px;
    padding: 7px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #92400e;
    width: fit-content;
}
.fid__layover .material-symbols-outlined[b-a6qd2ily2l] { font-size: 16px; }

@media (max-width: 640px) {
    .fid__seg[b-a6qd2ily2l] { grid-template-columns: 14px 1fr; }
    .fid__seg-info[b-a6qd2ily2l] { grid-column: 2; padding-inline-start: 0; }
}
/* /Shared/FlightCloud/FlightPriceCalendar.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   Cheapest-fare-per-day strip, shown under the "Change search" bar on the
   flight results page. Deliberately wears the same card as .fr-summary (white,
   1px #e5e7eb, 14px radius, the same soft shadow) so it reads as part of the
   results top bar rather than something bolted above it.

   Colour note: elsewhere in the panel price is neutral ink, and green is
   reserved for success/refundable. Here green and red encode a COMPARISON, not
   a price, which is why the selected day and same-price days stay neutral and
   only days carrying a delta take colour. The arrow glyph and the aria-label
   repeat the signal, so colour is never the only carrier.
   --------------------------------------------------------------------------- */

.fpc[b-wtppsqfwu3] {
    --fpc-primary: #0066ff;
    --fpc-ink: #111827;
    --fpc-muted: #6b7280;
    --fpc-cheaper: #047857; /* AA on white: 4.9:1 */
    --fpc-pricier: #b91c1c; /* AA on white: 6.2:1 */
    --fpc-border: #e5e7eb;

    background: #ffffff;
    border: 1px solid var(--fpc-border);
    border-radius: 14px;
    /* Deliberately tight. This strip is context for the decision, not the
       decision: every pixel it takes is a flight card pushed below the fold,
       and it used to cost ~200px before the first result was visible. */
    padding: 8px 10px 10px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.4);
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--fpc-ink);
}

/* --- Header --- */
.fpc__head[b-wtppsqfwu3] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.fpc__head-icon[b-wtppsqfwu3] { font-size: 16px; color: var(--fpc-primary); }
.fpc__title[b-wtppsqfwu3] { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }

/* The currency is stated once here rather than on every chip: at IRR
   magnitudes an appended code roughly doubles the chip width and pushes the
   strip into a scroll it does not otherwise need. Each chip still carries the
   full amount-with-currency in its title and aria-label. */
.fpc__cur[b-wtppsqfwu3] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--fpc-muted);
    background: #f3f4f6;
    border-radius: 999px;
    padding: 2px 8px;
}
.fpc__hint[b-wtppsqfwu3] {
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    cursor: help;
}
.fpc__hint .material-symbols-outlined[b-wtppsqfwu3] { font-size: 16px; }

/* --- Rail --- */
.fpc__rail[b-wtppsqfwu3] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
/* No scrollbar, ever. The window is sized to the rail instead: the cells share
   the width evenly, and at narrower breakpoints the tail is dropped (below)
   rather than pushed under a scrollbar nobody looks for. */
.fpc__days[b-wtppsqfwu3] {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    /* Lets the row shrink inside .fpc__rail; without it the cells' content sets a
       floor and the rail overflows its card. */
    min-width: 0;
    overflow: hidden;
}

.fpc__nav[b-wtppsqfwu3] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: 1px solid var(--fpc-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--fpc-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.fpc__nav:hover:not(:disabled)[b-wtppsqfwu3] { background: #f9fafb; color: var(--fpc-ink); }
.fpc__nav:disabled[b-wtppsqfwu3] { opacity: 0.4; cursor: default; }
.fpc__nav .material-symbols-outlined[b-wtppsqfwu3] { font-size: 20px; }

/* Directional glyphs must follow the reading direction. The results root
   inherits document direction, so under a Persian/Arabic UI these flip. */
[dir="rtl"] .fpc__nav .material-symbols-outlined[b-wtppsqfwu3] { transform: scaleX(-1); }

/* --- Chip --- */
/* Cells share the rail evenly rather than sitting at a fixed width, so a full
   window reaches the edge of the results column instead of trailing off into
   empty space beside it. The floor is what a grouped price needs to render
   whole — money must never be clipped — and the breakpoints below drop days
   before that floor is ever reached. */
.fpc__day[b-wtppsqfwu3] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    justify-content: center;
    border: 1px solid var(--fpc-border);
    border-radius: 10px;
    background: #ffffff;
    padding: 6px 6px 7px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.fpc__day:hover[b-wtppsqfwu3] { border-color: #cbd5e1; background: #f9fafb; }
.fpc__day:focus-visible[b-wtppsqfwu3] {
    outline: 2px solid var(--fpc-primary);
    outline-offset: 2px;
}

/* Weekday and day-of-month read as one label on one line. */
.fpc__when[b-wtppsqfwu3] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.fpc__dow[b-wtppsqfwu3] { font-size: 11px; color: var(--fpc-muted); }
.fpc__date[b-wtppsqfwu3] { font-size: 12.5px; font-weight: 600; }
.fpc__price[b-wtppsqfwu3] {
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    /* Tabular figures so prices line up column-wise down the strip and can be
       compared by eye without reading every digit. */
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
/* No reserved height: an empty delta line on every unsearched day was a whole
   row of nothing across the strip. Rendered only when it carries a comparison. */
.fpc__delta[b-wtppsqfwu3] {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* --- States --- */
.fpc__day--anchor[b-wtppsqfwu3] {
    border-color: var(--fpc-primary);
    box-shadow: inset 0 0 0 1px var(--fpc-primary);
    background: #f5f9ff;
    cursor: default;
}
.fpc__day--anchor:hover[b-wtppsqfwu3] { background: #f5f9ff; }
.fpc__day--anchor .fpc__delta[b-wtppsqfwu3] { color: var(--fpc-primary); }

/* Colour marks the extremes of the strip: the cheapest day green, the dearest
   red, everything else neutral ink. Painting every day that merely beats the
   search would leave nothing standing out, and colour is worth most when it is
   scarce. The percentage under each price still says how it compares with the
   searched day, in text, for every day. */
.fpc__day--lowest .fpc__price[b-wtppsqfwu3] { color: var(--fpc-cheaper); }
.fpc__day--highest .fpc__price[b-wtppsqfwu3] { color: var(--fpc-pricier); }
.fpc__day--plain .fpc__price[b-wtppsqfwu3] { color: var(--fpc-ink); }

.fpc__delta[b-wtppsqfwu3] { color: var(--fpc-muted); }

/* Not searched yet. Still clickable on purpose: choosing the day runs the
   ordinary search, which is both the answer the agent wanted and the thing
   that fills this cell for whoever looks next. */
/* A day nobody has priced yet carries no information to compare, so it recedes:
   same size and hit area (it is still the button that searches that date), but
   a muted face, so the eye runs down the days that DO have a price. */
.fpc__day--unknown[b-wtppsqfwu3],
.fpc__day--none[b-wtppsqfwu3] { background: #fafbfc; border-color: #eef0f3; }
.fpc__day--unknown:hover[b-wtppsqfwu3],
.fpc__day--none:hover[b-wtppsqfwu3] { background: #f3f4f6; }
.fpc__day--unknown .fpc__when[b-wtppsqfwu3],
.fpc__day--none .fpc__when[b-wtppsqfwu3] { opacity: 0.65; }
.fpc__day--unknown .fpc__price[b-wtppsqfwu3] { color: #b6bcc6; font-weight: 600; }
.fpc__day--none .fpc__price[b-wtppsqfwu3] { color: #b6bcc6; font-weight: 600; font-size: 11.5px; }

/* Searched a while ago. Shown, but visibly softened - a price whose age is
   hidden reads as current no matter how old it is. */
.fpc__day--stale .fpc__price[b-wtppsqfwu3],
.fpc__day--stale .fpc__delta[b-wtppsqfwu3] { opacity: 0.65; }

/* --- Loading --- */
.fpc__day--skeleton[b-wtppsqfwu3] {
    min-height: 56px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9ebef 37%, #f3f4f6 63%);
    background-size: 400% 100%;
    animation: fpc-shimmer-b-wtppsqfwu3 1.4s ease-in-out infinite;
    border-color: transparent;
    cursor: default;
}

@keyframes fpc-shimmer-b-wtppsqfwu3 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Dropping days, not shrinking them past legibility. Each step keeps roughly
   100px per cell, which is what the widest grouped price this panel shows needs
   to render without being clipped. */
@media (max-width: 1800px) { .fpc__day:nth-child(n + 12)[b-wtppsqfwu3] { display: none; } }
@media (max-width: 1600px) { .fpc__day:nth-child(n + 10)[b-wtppsqfwu3] { display: none; } }
@media (max-width: 1390px) { .fpc__day:nth-child(n + 8)[b-wtppsqfwu3] { display: none; } }
@media (max-width: 1180px) { .fpc__day:nth-child(n + 6)[b-wtppsqfwu3] { display: none; } }
@media (max-width: 960px) { .fpc__day:nth-child(n + 5)[b-wtppsqfwu3] { display: none; } }
@media (max-width: 720px) {
    .fpc__day:nth-child(n + 4)[b-wtppsqfwu3] { display: none; }
    .fpc__price[b-wtppsqfwu3] { font-size: 13px; }
}
/* /Shared/FlightCloud/FlightPriceHistory.razor.rz.scp.css */
/*
    Price-history panel, rendered inside the results card's existing .fr-panel
    accordion — so it inherits that container's border, radius and padding and
    only styles its own contents.

    Colour rule, from the platform's visual language: price itself is neutral ink.
    Green and red appear only on a COMPARISON (this price against the one before
    it), never on an amount standing alone, and never as the only signal — every
    coloured figure carries an arrow glyph and a screen-reader word too.

    Spacing runs on the 4px scale and uses logical properties throughout, because
    the panel serves both directions. The time axis itself is deliberately NOT
    mirrored: a series runs oldest-to-newest left-to-right in any locale, and
    flipping it is the classic RTL charting bug.
*/

.fph[b-8n5591beh5] {
    --fph-ink: #111827;
    --fph-muted: #6b7280;
    --fph-line: #0066ff;
    --fph-route: #cbd5e1;
    --fph-up: #b91c1c;
    --fph-down: #047857;
    font-size: 13px;
    color: var(--fph-ink);
}

/* ---- Header ---- */

.fph__head[b-8n5591beh5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fph__head-icon[b-8n5591beh5] {
    font-size: 18px;
    color: var(--fph-line);
}
.fph__title[b-8n5591beh5] {
    font-size: 13px;
    font-weight: 700;
}
.fph__basis[b-8n5591beh5] {
    font-size: 11px;
    font-weight: 600;
    color: var(--fph-muted);
    background: #f1f5f9;
    border-radius: 999px;
    padding: 2px 8px;
    cursor: help;
    white-space: nowrap;
}
.fph__provenance[b-8n5591beh5] {
    margin: 4px 0 12px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--fph-muted);
}

/* ---- Verdict ---- */

.fph__verdict[b-8n5591beh5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e9ecf1;
    margin-bottom: 12px;
    line-height: 1.6;
}
.fph__verdict .material-symbols-outlined[b-8n5591beh5] { font-size: 18px; }
.fph__verdict-text[b-8n5591beh5] { flex: 1 1 220px; }
.fph__verdict--low[b-8n5591beh5] { border-color: #a7f3d0; background: #f0fdf4; }
.fph__verdict--low .material-symbols-outlined[b-8n5591beh5] { color: var(--fph-down); }
.fph__verdict--high[b-8n5591beh5] { border-color: #fecaca; background: #fef2f2; }
.fph__verdict--high .material-symbols-outlined[b-8n5591beh5] { color: var(--fph-up); }
.fph__verdict--typical .material-symbols-outlined[b-8n5591beh5],
.fph__verdict--insufficient .material-symbols-outlined[b-8n5591beh5] { color: var(--fph-muted); }

.fph__stale[b-8n5591beh5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--fph-muted);
    cursor: help;
}
.fph__stale .material-symbols-outlined[b-8n5591beh5] { font-size: 14px; }

/* ---- Chart ---- */

.fph__chart[b-8n5591beh5] {
    position: relative;
    margin-bottom: 8px;
}
.fph__chart svg[b-8n5591beh5] {
    display: block;
    width: 100%;
    height: 160px;
    overflow: visible;
}
.fph__grid[b-8n5591beh5] {
    stroke: #e9ecf1;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.fph__line[b-8n5591beh5] {
    fill: none;
    stroke: var(--fph-line);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* Keeps the stroke an even 2px however far the viewBox is stretched
       horizontally — without it, preserveAspectRatio="none" smears the line. */
    vector-effect: non-scaling-stroke;
}
.fph__route[b-8n5591beh5] {
    fill: none;
    stroke: var(--fph-route);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}
.fph__dot[b-8n5591beh5] {
    fill: #ffffff;
    stroke: var(--fph-line);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.fph__dot--newest[b-8n5591beh5] { fill: var(--fph-line); }

/* Amounts sit outside the stretched SVG so the type is never scaled unevenly. */
/* Outside the stretched SVG so the type is never scaled unevenly, and positioned
   from the same percentages the gridlines are drawn at so each amount sits on its
   own line rather than merely near it. */
.fph__axis[b-8n5591beh5] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fph-muted);
    white-space: nowrap;
}
.fph__axis-high[b-8n5591beh5],
.fph__axis-low[b-8n5591beh5] {
    position: absolute;
    inset-inline-end: 0;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    padding-inline: 4px;
    border-radius: 4px;
}

.fph__legend[b-8n5591beh5] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--fph-muted);
    margin-bottom: 12px;
}
.fph__legend-item[b-8n5591beh5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fph__swatch[b-8n5591beh5] {
    width: 14px;
    height: 0;
    border-top-width: 2px;
    border-top-style: solid;
}
.fph__swatch--flight[b-8n5591beh5] { border-top-color: var(--fph-line); }
.fph__swatch--route[b-8n5591beh5] {
    border-top-color: var(--fph-route);
    border-top-style: dashed;
}

/* ---- Single observation ---- */

.fph__single[b-8n5591beh5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px dashed #e9ecf1;
    border-radius: 10px;
    margin-bottom: 12px;
}
.fph__single-dot[b-8n5591beh5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fph-line);
}
.fph__single-price[b-8n5591beh5] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fph__single-when[b-8n5591beh5] { color: var(--fph-muted); }
.fph__single-note[b-8n5591beh5] {
    flex: 1 1 100%;
    font-size: 11px;
    color: var(--fph-muted);
}

/* ---- Table ---- */

.fph__tablewrap[b-8n5591beh5] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.fph__tablewrap[b-8n5591beh5]::-webkit-scrollbar { height: 6px; }
.fph__tablewrap[b-8n5591beh5]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.fph__table[b-8n5591beh5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fph__table th[b-8n5591beh5],
.fph__table td[b-8n5591beh5] {
    padding: 6px 8px;
    text-align: start;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}
.fph__table th[b-8n5591beh5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fph-muted);
}
.fph__num[b-8n5591beh5] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fph__delta--cheaper[b-8n5591beh5] { color: var(--fph-down); }
.fph__delta--pricier[b-8n5591beh5] { color: var(--fph-up); }
.fph__delta--same[b-8n5591beh5],
.fph__delta--none[b-8n5591beh5] { color: var(--fph-muted); }

/* ---- States ---- */

.fph__state[b-8n5591beh5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}
.fph__state--error[b-8n5591beh5] { color: #b91c1c; }
.fph__state .material-symbols-outlined[b-8n5591beh5] { font-size: 20px; }

.fph__skeleton-head[b-8n5591beh5],
.fph__skeleton-chart[b-8n5591beh5] {
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e9ecf1 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: fph-shimmer-b-8n5591beh5 1.2s ease-in-out infinite;
}
.fph__skeleton-head[b-8n5591beh5] {
    height: 14px;
    width: 40%;
    margin-bottom: 12px;
}
.fph__skeleton-chart[b-8n5591beh5] { height: 160px; }

@keyframes fph-shimmer-b-8n5591beh5 {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fph__skeleton-head[b-8n5591beh5],
    .fph__skeleton-chart[b-8n5591beh5] { animation: none; }
}

/* Available to assistive technology, absent from the visual layout. */
.fph__sr[b-8n5591beh5] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Shared/FlightCloud/FlightSearchBox.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Flight search box — a Blazor port of the Travelio FlightHeroSection search
   box, restyled to share the exact class language, palette (#0066ff · #fd8b00 —
   the same blue as the results, fare-selection and wizard surfaces)
   and field chrome of the B2B hotel/tour search boxes. Because Blazor scopes
   .razor.css per component, the shared field styles (.hac/.hdr/.hcm/.trow) are
   repeated here rather than inherited, and the flight-only pieces (trip pills,
   cabin/travellers chips, direct toggle, ⇄ swap, multi-city legs, IATA code
   badge) are layered on top with the .fhh / .fsb prefixes.
   ─────────────────────────────────────────────────────────────────────────── */

.hsb[b-4eorsvhn7x] {
    /* The hero column centres its children, which sizes a width-less flex item
       to max-content — so the card grew past the column instead of fitting it.
       The search box is the full width of its hero, always. */
    width: 100%;
    min-width: 0;
    --color-primary: #0066ff;
    position: relative;
    color: #0f172a;
    font-family: 'Inter', system-ui, sans-serif;
}

.hhs__catcher[b-4eorsvhn7x] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.hhs__search[b-4eorsvhn7x] {
    position: relative;
    z-index: 50;
    width: min(1200px, 100%);
    background: #ffffff;
    border: 1px solid #e3e5ee;
    border-radius: 20px;
    padding: 0.9rem 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 48px -24px rgba(6, 22, 52, 0.45),
        0 8px 20px -12px rgba(0, 102, 255, 0.25);
}

/* ─── Header: trip pills · cabin · travellers · direct ─── */
.fhh[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0 0.15rem 0.85rem;
    /* Boarding-pass perforation: the header is the "stub" that sets how the
       ticket below reads (trip type, cabin, party). */
    border-bottom: 2px dashed #e3e7f0;
}
.fhh__pills[b-4eorsvhn7x] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #f1f3f9;
    border: 1px solid #e3e5ee;
    border-radius: 999px;
}
.fhh__pill[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: #56607a;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fhh__pill:hover[b-4eorsvhn7x] { color: var(--color-primary); }
.fhh__pill--active[b-4eorsvhn7x],
.fhh__pill--active:hover[b-4eorsvhn7x] {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(0, 102, 255, 0.6);
}
.fhh__pillIcon[b-4eorsvhn7x] { font-size: 1rem !important; }

.fhh__controls[b-4eorsvhn7x] { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fhh__field[b-4eorsvhn7x] { position: relative; }
.fhh__chip[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.7rem;
    border: 1px solid #e3e5ee;
    background: #f6f7f9;
    color: #0f172a;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.fhh__chip:hover[b-4eorsvhn7x] { background: #ffffff; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1); }
.fhh__chipIcon[b-4eorsvhn7x] { font-size: 1rem !important; color: var(--color-primary); }
.fhh__chipText[b-4eorsvhn7x] { white-space: nowrap; }
.fhh__caret[b-4eorsvhn7x] { font-size: 1.05rem !important; color: #94a3b8; }

.fhh__pop[b-4eorsvhn7x] {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 18px 42px -18px rgba(15, 23, 42, 0.4), 0 4px 10px -6px rgba(15, 23, 42, 0.18);
    padding: 0.4rem;
    z-index: 60;
    animation: hac-fade-b-4eorsvhn7x 0.12s ease-out;
}
.fhh__pop--trav[b-4eorsvhn7x] { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem; min-width: 260px; }
.fhh__pop--nat[b-4eorsvhn7x] { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem; min-width: 280px; }
.fsb__natSearch[b-4eorsvhn7x] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    outline: none;
}
.fsb__natSearch:focus[b-4eorsvhn7x] { border-color: #0066ff; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12); }
.fsb__natList[b-4eorsvhn7x] { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.fsb__natCode[b-4eorsvhn7x] {
    display: inline-block;
    min-width: 2ch;
    margin-inline-end: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}
.fhh__opt[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: 0.55rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.fhh__opt:hover[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.08); }
.fhh__opt--active[b-4eorsvhn7x] { color: var(--color-primary); font-weight: 800; }
.fhh__check[b-4eorsvhn7x] { font-size: 1.05rem !important; color: var(--color-primary); }

.fhh__toggle[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e3e5ee;
    background: #f6f7f9;
    border-radius: 0.7rem;
    padding: 0.4rem 0.7rem 0.4rem 0.5rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #56607a;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fhh__toggle--on[b-4eorsvhn7x] { color: var(--color-primary); border-color: rgba(0, 102, 255, 0.4); background: rgba(0, 102, 255, 0.06); }
.fhh__track[b-4eorsvhn7x] {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s;
    flex: 0 0 auto;
}
.fhh__toggle--on .fhh__track[b-4eorsvhn7x] { background: var(--color-primary); }
.fhh__thumb[b-4eorsvhn7x] {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 0.15s ease;
}
.fhh__toggle--on .fhh__thumb[b-4eorsvhn7x] { transform: translateX(14px); }
.fhh__toggleText[b-4eorsvhn7x] { white-space: nowrap; }

/* ─── Body rows ─── */
/* From · ⇄ · To read as ONE route: the two fields share an edge and the swap
   button sits on the seam, in a zero-width track so it overlaps both. The
   gaps around the capsule come from margins, not column-gap. */
.fsb__row[b-4eorsvhn7x] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 0 minmax(0, 1.2fr) minmax(0, 1.5fr) auto;
    column-gap: 0;
    row-gap: 0.55rem;
    align-items: stretch;
}
.fsb__row > .fsb__date[b-4eorsvhn7x],
.fsb__row > .hhs__submit[b-4eorsvhn7x] { margin-inline-start: 0.55rem; }
.fsb__legs[b-4eorsvhn7x] { display: flex; flex-direction: column; gap: 0.55rem; }
.fsb__legRow[b-4eorsvhn7x] {
    display: grid;
    grid-template-columns: auto minmax(0, 1.2fr) 0 minmax(0, 1.2fr) minmax(0, 1.3fr) auto;
    column-gap: 0;
    row-gap: 0.55rem;
    align-items: stretch;
}
.fsb__legRow > .fsb__legNo[b-4eorsvhn7x] { margin-inline-end: 0.55rem; }
.fsb__legRow > .fsb__date[b-4eorsvhn7x],
.fsb__legRow > .fsb__legRemove[b-4eorsvhn7x] { margin-inline-start: 0.55rem; }

.hac.fsb__air--from[b-4eorsvhn7x] {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    padding-inline-end: 1.9rem;
}
.hac.fsb__air--to[b-4eorsvhn7x] {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start-color: transparent;
    padding-inline-start: 1.9rem;
}
.hac.fsb__air--to:focus-within[b-4eorsvhn7x] { border-inline-start-color: var(--color-primary, #0066ff); }
/* Keep the focused half's ring above its neighbour. */
.hac.fsb__air:focus-within[b-4eorsvhn7x] { z-index: 2; }
.fsb__legNo[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    align-self: center;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.1);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 auto;
}
.fsb__multiFoot[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-top: 0.1rem;
}
.fsb__addLeg[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px dashed rgba(0, 102, 255, 0.4);
    background: rgba(0, 102, 255, 0.05);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 1rem;
    border-radius: 0.7rem;
    cursor: pointer;
    transition: background 0.15s;
}
.fsb__addLeg:hover[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.1); }
.fsb__addLeg .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1.1rem !important; }

.fsb__swap[b-4eorsvhn7x] {
    position: relative;
    z-index: 3;
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e3e5ee;
    background: #ffffff;
    color: var(--color-primary);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.15s, background 0.15s;
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.2);
}
.fsb__swap:hover[b-4eorsvhn7x] { transform: rotate(180deg); border-color: var(--color-primary); background: rgba(0, 102, 255, 0.06); }
.fsb__swap .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1.2rem !important; }

.fsb__legRemove[b-4eorsvhn7x] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e3e5ee;
    background: #ffffff;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fsb__legRemove:hover[b-4eorsvhn7x] { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.06); }
.fsb__legRemove .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1.05rem !important; }
.fsb__legRemove--ph[b-4eorsvhn7x] { visibility: hidden; }

.fsb__code[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0.2rem 0.35rem;
    border-radius: 0.45rem;
    background: rgba(0, 102, 255, 0.1);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
}

/* ─── City-grouped autocomplete: city parent row + indented airport children ─── */
.fsb__cityItem[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.04); }
.fsb__cityItem:hover[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.1); }
.fsb__code--city[b-4eorsvhn7x] {
    background: rgba(253, 139, 0, 0.14);
    color: #c96f00;
}
.fsb__allAirports[b-4eorsvhn7x] {
    margin-left: 0.45rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 102, 255, 0.1);
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}
.fsb__cityIcon[b-4eorsvhn7x] {
    font-size: 1.05rem !important;
    color: #94a3b8;
    flex: 0 0 auto;
}
.fsb__childItem[b-4eorsvhn7x] { padding-left: 1.1rem; }
/* Keyboard highlight — the row Enter would take. */
.hac__item--active[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.1); }

.fsb__childItem .fsb__code[b-4eorsvhn7x] { background: rgba(15, 23, 42, 0.06); color: #475569; }
.fsb__childItem .hac__primary[b-4eorsvhn7x] { font-weight: 600; font-size: 0.88rem; }
.fsb__childBranch[b-4eorsvhn7x] {
    flex: 0 0 auto;
    width: 14px;
    height: 18px;
    margin-top: -8px;
    border-left: 2px solid #dbe1ec;
    border-bottom: 2px solid #dbe1ec;
    border-bottom-left-radius: 8px;
}

/* ─── Submit ─── */
.hhs__submit[b-4eorsvhn7x] {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 0 1.5rem;
    min-width: 160px;
    min-height: 56px;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #ff9d1c 0%, #fd8b00 45%, #f07400 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 8px 20px -10px rgba(253, 139, 0, 0.6);
}
.hhs__submit:hover[b-4eorsvhn7x] { background: linear-gradient(135deg, #fd8b00 0%, #e67e00 100%); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(253, 139, 0, 0.75); }
.hhs__submit:focus-visible[b-4eorsvhn7x] { outline: 3px solid rgba(253, 139, 0, 0.45); outline-offset: 2px; }
.hhs__submit:active[b-4eorsvhn7x] { transform: translateY(0); }
.hhs__submit-icon[b-4eorsvhn7x] { font-size: 1.1rem !important; }

.hhs__error[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding: 0.6rem 1rem;
    border-radius: 0.7rem;
    background: rgba(239, 68, 68, 0.92);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 24px -12px rgba(239, 68, 68, 0.7);
}
.hhs__error .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1.1rem !important; }

@media (max-width: 1080px) {
    .fsb__row[b-4eorsvhn7x] { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); }
    .fsb__row .fsb__date[b-4eorsvhn7x] { grid-column: 1 / -1; margin-inline-start: 0; }
    .fsb__row .hhs__submit[b-4eorsvhn7x] { grid-column: 1 / -1; min-height: 52px; margin-inline-start: 0; }
    .fsb__legRow[b-4eorsvhn7x] { grid-template-columns: auto minmax(0, 1fr) 0 minmax(0, 1fr); }
    .fsb__legRow .fsb__date[b-4eorsvhn7x] { grid-column: 2 / -1; margin-inline-start: 0; }
}
@media (max-width: 640px) {
    .hhs__search[b-4eorsvhn7x] { padding: 0.6rem 0.6rem 0.7rem; }

    /* The trip-type pills are the first control on the card and the one that
       changes what the rest of it means. Left inline they run out of room and
       break their own labels mid-word ("Multi-/city"), so at phone width they
       become one full-width segmented control with three equal thirds. */
    .fhh[b-4eorsvhn7x] { justify-content: stretch; gap: 0.5rem; }
    .fhh__pills[b-4eorsvhn7x] { display: flex; width: 100%; }
    .fhh__pill[b-4eorsvhn7x] {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        padding-inline: 0.5rem;
        font-size: 0.8rem;
    }

    /* Chips fill the row rather than leaving a lone centred "Nationality"
       under a pair — a ragged control block reads as broken layout. */
    .fhh__controls[b-4eorsvhn7x] { width: 100%; justify-content: flex-start; gap: 0.4rem; }
    .fhh__field[b-4eorsvhn7x] { flex: 1 1 auto; min-width: 0; }
    .fhh__chip[b-4eorsvhn7x] { width: 100%; justify-content: space-between; }
    .fhh__chipText[b-4eorsvhn7x] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fhh__toggle[b-4eorsvhn7x] { flex: 1 1 100%; justify-content: flex-start; }
}

@media (max-width: 560px) {
    /* Phone: the capsule stacks — From on top, To beneath, the swap button
       riding the seam on the trailing edge (negative block margins give it a
       zero-height row, so it overlaps instead of pushing the fields apart). */
    .fsb__row[b-4eorsvhn7x], .fsb__legRow[b-4eorsvhn7x] { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .fsb__row > .fsb__date[b-4eorsvhn7x], .fsb__row > .hhs__submit[b-4eorsvhn7x],
    .fsb__legRow > .fsb__date[b-4eorsvhn7x] { margin-top: 0.55rem; margin-inline-start: 0; }
    .fsb__legRow > .fsb__legRemove[b-4eorsvhn7x] { margin: 0.55rem 0 0; }
    .fsb__legRow > .fsb__legNo[b-4eorsvhn7x] { margin: 0 0 0.45rem; }
    .fsb__swap[b-4eorsvhn7x] {
        justify-self: end;
        margin-block: -19px;
        margin-inline-end: 1rem;
        transform: rotate(90deg);
    }
    .fsb__swap:hover[b-4eorsvhn7x] { transform: rotate(270deg); }
    .hac.fsb__air--from[b-4eorsvhn7x] {
        border-radius: 0.85rem 0.85rem 0 0;
        padding-inline-end: 0.85rem;
    }
    .hac.fsb__air--to[b-4eorsvhn7x] {
        border-radius: 0 0 0.85rem 0.85rem;
        border-inline-start-color: #e3e5ee;
        border-top-color: transparent;
        padding-inline-start: 0.85rem;
    }
    .hac.fsb__air--to:focus-within[b-4eorsvhn7x] { border-color: var(--color-primary, #0066ff); }
    .fsb__legNo[b-4eorsvhn7x], .fsb__legRemove[b-4eorsvhn7x] { justify-self: start; }
    /* The placeholder only holds a desktop column; stacked it is just a gap. */
    .fsb__legRemove--ph[b-4eorsvhn7x] { display: none; }
    .fsb__multiFoot .hhs__submit[b-4eorsvhn7x] { flex: 1 1 100%; min-height: 52px; }
}

/* ─── Airport autocomplete (shared .hac chrome) ─── */
.hac[b-4eorsvhn7x] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    background: #f6f7f9;
    border: 1px solid #e3e5ee;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 56px;
    justify-content: center;
}
.hac:focus-within[b-4eorsvhn7x] {
    background: #ffffff;
    border-color: var(--color-primary, #0066ff);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}
.hac__label[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.hac__icon[b-4eorsvhn7x] { font-size: 0.95rem !important; color: var(--color-primary, #0066ff); }
.hac__inputWrap[b-4eorsvhn7x] { position: relative; display: flex; align-items: center; }

/* Nearby airports (VIE → BTS by train): one strip under the fields, one line per
   chip; a click swaps the airport into its field. */
.fsb__nearby[b-4eorsvhn7x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #dbe3ef;
    font-size: 0.8rem;
}
.fsb__nearbyLabel[b-4eorsvhn7x] { display: inline-flex; align-items: center; gap: 0.3rem; color: #475569; font-weight: 600; }
.fsb__nearbyLabel .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1rem; color: #0066ff; }
.fsb__nearbyGroup[b-4eorsvhn7x] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; }
.fsb__nearbySide[b-4eorsvhn7x] { color: #64748b; white-space: nowrap; }
.fsb__nearbyChip[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(22rem, 100%);
    min-width: 0;
    padding: 0.2rem 0.65rem;
    border: 1px solid #c9d8ff;
    border-radius: 999px;
    background: #f2f6ff;
    color: #1e3a8a;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.fsb__nearbyChip:hover[b-4eorsvhn7x], .fsb__nearbyChip:focus-visible[b-4eorsvhn7x] { background: #e2ebff; border-color: #0066ff; outline: none; }
.fsb__nearbyChip b[b-4eorsvhn7x] { color: #0066ff; letter-spacing: 0.02em; }
.fsb__nearbyCity[b-4eorsvhn7x] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fsb__nearbyChip b[b-4eorsvhn7x], .fsb__nearbyHow[b-4eorsvhn7x] { flex: none; }
.fsb__nearbyHow[b-4eorsvhn7x] { color: #64748b; }
.hac__input[b-4eorsvhn7x] {
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    border: none;
    outline: none;
    /* Logical: the 1.6rem is clearance for the clear button, which is placed
       with inset-inline-end and so flips under RTL. */
    padding-block: 0;
    padding-inline: 0 1.6rem;
    background: transparent;
    width: 100%;
    min-width: 0;
    /* A selected airport reads "London (all airports), United Kingdom" and does
       not fit a phone column. Without this it is cut mid-word with nothing to
       say the value continues; an ellipsis at least reads as truncation, and
       the full value is still there on focus. */
    text-overflow: ellipsis;
}
.hac__input[b-4eorsvhn7x]::placeholder { color: #94a3b8; font-weight: 500; }

/* Picked airport: the IATA code leads in display size, the full name follows
   as the secondary line — the way a boarding pass prints a route. */
.hac__iata[b-4eorsvhn7x] {
    flex: 0 0 auto;
    margin-inline-end: 0.55rem;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #0b1f4b;
    font-variant-numeric: tabular-nums;
}
.hac__iata + .hac__input[b-4eorsvhn7x] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.hac__spinner[b-4eorsvhn7x] { position: absolute; inset-inline-end: 0; display: inline-flex; gap: 3px; }
.hac__spinnerDot[b-4eorsvhn7x] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: hac-bounce-b-4eorsvhn7x 1s infinite ease-in-out;
}
.hac__spinnerDot:nth-child(2)[b-4eorsvhn7x] { animation-delay: 0.15s; }
.hac__spinnerDot:nth-child(3)[b-4eorsvhn7x] { animation-delay: 0.3s; }
@keyframes hac-bounce-b-4eorsvhn7x {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.hac__menu[b-4eorsvhn7x] {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 18px 42px -18px rgba(15, 23, 42, 0.4), 0 4px 10px -6px rgba(15, 23, 42, 0.18);
    padding: 0.45rem;
    max-height: 360px;
    overflow-y: auto;
    z-index: 60;
    animation: hac-fade-b-4eorsvhn7x 0.12s ease-out;
}
@keyframes hac-fade-b-4eorsvhn7x {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.hac__group + .hac__group[b-4eorsvhn7x] { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed rgba(15, 23, 42, 0.08); }
.hac__groupHead[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.hac__groupHead .material-symbols-outlined[b-4eorsvhn7x] { font-size: 0.95rem !important; color: var(--color-primary, #0066ff); }
.hac__item[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: 0.6rem;
    font: inherit;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.hac__item:hover[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.08); }
.hac__main[b-4eorsvhn7x] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.hac__primary[b-4eorsvhn7x] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hac__secondary[b-4eorsvhn7x] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hac__loading[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}
.hac__loadingRipple[b-4eorsvhn7x] { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.hac__loadingRipple span[b-4eorsvhn7x] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-primary, #0066ff);
    opacity: 0;
    animation: hac-ripple-b-4eorsvhn7x 1.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hac__loadingRipple span:nth-child(2)[b-4eorsvhn7x] { animation-delay: -0.45s; }
.hac__loadingRipple span:nth-child(3)[b-4eorsvhn7x] { animation-delay: -0.9s; }
@keyframes hac-ripple-b-4eorsvhn7x {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
.hac__empty[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem 0.7rem;
    font-size: 0.88rem;
    color: #94a3b8;
}
.hac__emptyIcon[b-4eorsvhn7x] { font-size: 1.1rem !important; }

/* ─── Date field (shared .hdr chrome) ─── */
.hdr[b-4eorsvhn7x] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.85rem;
    background: #f6f7f9;
    border: 1px solid #e3e5ee;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 56px;
    justify-content: center;
}
.hdr:focus-within[b-4eorsvhn7x] {
    background: #ffffff;
    border-color: var(--color-primary, #0066ff);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}
.hdr__row[b-4eorsvhn7x] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.hdr__half[b-4eorsvhn7x] {
    background: transparent;
    border: none;
    padding: 0.3rem 0.45rem 0.35rem;
    border-radius: 0.6rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    transition: background 0.12s;
}
.hdr__half:hover[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.06); }
.hdr__half--active[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.25); }
.hdr__halfLabel[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
}
.hdr__halfIcon[b-4eorsvhn7x] { font-size: 0.85rem !important; color: var(--color-primary, #0066ff); flex: 0 0 auto; }
.hdr__halfValue[b-4eorsvhn7x] { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; }
.hdr__day[b-4eorsvhn7x] { font-size: 1.4rem; font-weight: 800; color: #0f172a; line-height: 1; }
.hdr__meta[b-4eorsvhn7x] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hdr__dow[b-4eorsvhn7x] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    line-height: 1;
}
.hdr__monthYear[b-4eorsvhn7x] { font-size: 0.7rem; color: #64748b; font-weight: 600; line-height: 1.2; }
.hdr__placeholder[b-4eorsvhn7x] { font-size: 0.9rem; font-weight: 500; color: #94a3b8; padding-top: 0.15rem; }
.hdr__divider[b-4eorsvhn7x] { display: inline-flex; align-items: center; justify-content: center; padding: 0 0.2rem; flex: 0 0 auto; }
.hdr__arrow[b-4eorsvhn7x] { font-size: 1.1rem !important; color: #cbd5e1; }
.hdr__nights[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.22rem 0.55rem 0.22rem 0.45rem;
    border-radius: 999px;
    background: #fd8b00;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(253, 139, 0, 0.7);
    animation: hdr-bloom-b-4eorsvhn7x 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hdr__nightsIcon[b-4eorsvhn7x] { font-size: 0.85rem !important; color: #fff; }
@keyframes hdr-bloom-b-4eorsvhn7x {
    from { transform: scale(0.6) translateY(2px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
/* Single-date field has no inner row — keep the trigger full-bleed. */
.fsb__date:not(.fsb__date--range) .hdr__half[b-4eorsvhn7x] { width: 100%; }

.hdr__pop[b-4eorsvhn7x] {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    padding: 0.85rem;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.45), 0 6px 14px -8px rgba(15, 23, 42, 0.2);
    z-index: 60;
    width: max(620px, 100%);
    max-width: calc(100vw - 2rem);
    animation: hdr-fade-b-4eorsvhn7x 0.16s ease-out;
}
/* On a desktop row the date field sits near the card's trailing end, so a
   620px calendar anchored at its start ran off the viewport (Done button cut
   off). Anchor it to the field's end instead; below 1080px the field spans the
   row and the start anchor is right again. */
@media (min-width: 1081px) {
    .fsb__date .hdr__pop[b-4eorsvhn7x] { inset-inline-start: auto; inset-inline-end: 0; }
}
@keyframes hdr-fade-b-4eorsvhn7x {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.hdr__pop-head[b-4eorsvhn7x] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.25rem 0.6rem; }
.hdr__pop-title[b-4eorsvhn7x] { font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.hdr__nav[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.hdr__nav:hover[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.08); border-color: rgba(0, 102, 255, 0.4); color: var(--color-primary, #0066ff); }
.hdr__nav .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1.1rem !important; }
.hdr__months[b-4eorsvhn7x] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hdr__pop-foot[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.hdr__footNights[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #fd8b00;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 6px 18px -6px rgba(253, 139, 0, 0.6);
}
.hdr__footNights .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1rem !important; }
.hdr__ghost[b-4eorsvhn7x] {
    background: transparent;
    border: none;
    font: inherit;
    font-weight: 700;
    color: #64748b;
    padding: 0.45rem 0.85rem;
    border-radius: 0.6rem;
    cursor: pointer;
}
.hdr__ghost:hover[b-4eorsvhn7x] { color: #0f172a; background: rgba(15, 23, 42, 0.04); }
.hdr__cta[b-4eorsvhn7x] {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--color-primary, #0066ff);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.hdr__cta:hover[b-4eorsvhn7x] { filter: brightness(1.05); }
.hdr__cta:disabled[b-4eorsvhn7x] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
    .hdr__pop[b-4eorsvhn7x] { width: calc(100vw - 2rem); }
    .hdr__months[b-4eorsvhn7x] { grid-template-columns: 1fr; }
    .hdr__day[b-4eorsvhn7x] { font-size: 1.15rem; }
}

/* ─── CalendarMonth ─── */
.hcm__title[b-4eorsvhn7x] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.hcm__grid[b-4eorsvhn7x] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hcm__grid--head[b-4eorsvhn7x] { margin-bottom: 0.2rem; }
.hcm__dow[b-4eorsvhn7x] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: center;
    padding: 0.25rem 0;
    letter-spacing: 0.04em;
}
.hcm__pad[b-4eorsvhn7x] { aspect-ratio: 1 / 1; }
.hcm__day[b-4eorsvhn7x] {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hcm__day:hover:not(:disabled)[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.1); color: var(--color-primary, #0066ff); }
.hcm__day--past[b-4eorsvhn7x] { color: #cbd5e1; cursor: not-allowed; }
.hcm__day--today[b-4eorsvhn7x] { border-color: rgba(0, 102, 255, 0.35); }
.hcm__day--mid[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.1); color: var(--color-primary, #0066ff); border-radius: 0; }
.hcm__day--sel[b-4eorsvhn7x] { background: var(--color-primary, #0066ff); color: #ffffff; }
.hcm__day--sel:hover[b-4eorsvhn7x] { background: var(--color-primary, #0066ff); color: #ffffff; }

/* ─── Stepper row (travellers) ─── */
.trow[b-4eorsvhn7x] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0; }
.trow__meta[b-4eorsvhn7x] { display: flex; flex-direction: column; gap: 1px; }
.trow__label[b-4eorsvhn7x] { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
/* Age bands are the rule the booking form later enforces, so they have to be
   readable — #94a3b8 on white was below the AA threshold at this size. */
.trow__hint[b-4eorsvhn7x] { font-size: 0.75rem; color: #64748b; font-weight: 500; }

/* Why the steppers stopped, shown only once the PNR seat cap is reached. */
.trow__note[b-4eorsvhn7x] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.75rem;
    line-height: 1.5;
}
.trow__note .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1rem !important; flex: 0 0 auto; }
.trow__ctrl[b-4eorsvhn7x] { display: inline-flex; align-items: center; gap: 0.55rem; }
.trow__btn[b-4eorsvhn7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.trow__btn:hover:not(:disabled)[b-4eorsvhn7x] { background: rgba(0, 102, 255, 0.08); border-color: rgba(0, 102, 255, 0.4); color: var(--color-primary, #0066ff); }
.trow__btn:disabled[b-4eorsvhn7x] { opacity: 0.4; cursor: not-allowed; }
.trow__btn .material-symbols-outlined[b-4eorsvhn7x] { font-size: 1rem !important; }
.trow__value[b-4eorsvhn7x] { min-width: 22px; text-align: center; font-size: 0.95rem; font-weight: 800; color: #0f172a; }

.htv__foot[b-4eorsvhn7x] { display: flex; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px dashed rgba(15, 23, 42, 0.08); }
.htv__cta[b-4eorsvhn7x] {
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--color-primary, #0066ff);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.htv__cta:hover[b-4eorsvhn7x] { filter: brightness(1.05); }

/* ─── Calendar fares (cached cheapest fare per day) ─── */
.hcm--priced .hcm__pad[b-4eorsvhn7x],
.hcm--priced .hcm__day[b-4eorsvhn7x] { aspect-ratio: auto; min-height: 3rem; }
.hcm__day[b-4eorsvhn7x] { flex-direction: column; gap: 1px; line-height: 1.1; }
.hcm__fare[b-4eorsvhn7x] {
    font-size: 0.66rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* The selection and the trip range always outrank the fare tint. */
.hcm__day--cheap:not(.hcm__day--sel):not(.hcm__day--mid)[b-4eorsvhn7x] { background: #e6f6f4; }
.hcm__day--cheap:not(.hcm__day--sel):not(.hcm__day--mid) .hcm__fare[b-4eorsvhn7x] { color: #0f766e; font-weight: 600; }
.hcm__day--lowest:not(.hcm__day--sel):not(.hcm__day--mid)[b-4eorsvhn7x] { background: #ccefea; }
.hcm__day--lowest:not(.hcm__day--sel):not(.hcm__day--mid) .hcm__fare[b-4eorsvhn7x] { color: #0f766e; font-weight: 800; }
.hcm__day--sel .hcm__fare[b-4eorsvhn7x],
.hcm__day--sel:hover .hcm__fare[b-4eorsvhn7x] { color: rgba(255, 255, 255, 0.9); }
.hcm__day--mid .hcm__fare[b-4eorsvhn7x] { color: var(--color-primary, #0066ff); }
.hdr__fareNote[b-4eorsvhn7x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: #64748b;
}
.hdr__fareNote .material-symbols-outlined[b-4eorsvhn7x] { font-size: 0.95rem !important; color: #0f766e; }
.hdr__fareNote--muted .material-symbols-outlined[b-4eorsvhn7x] { color: #94a3b8; }
.hdr__fareLoading[b-4eorsvhn7x] { margin-inline-start: auto; font-weight: 600; color: var(--color-primary, #0066ff); }

/* ─── Weekend days ─── */
.hcm__dow--weekend[b-4eorsvhn7x] { color: #1e40af; }
.hcm__day--weekend:not(.hcm__day--sel):not(.hcm__day--past):not(.hcm__day--mid) .hcm__num[b-4eorsvhn7x] { color: #1e40af; }
/* /Shared/GroupRequests/GroupPassengerEditor.razor.rz.scp.css */
/* The roster card is its own component, so the request page's scoped
   styles never reach it: the few it uses are restated here. */

.gr-pax-editor[b-rwboncy972] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--b2b-border, #e5e7eb);
    border-radius: var(--b2b-r, 12px);
    background: var(--b2b-container-low, #f8fafc);
}

.gr-pax-editor__tools[b-rwboncy972] { display: flex; justify-content: flex-end; margin-block-end: .5rem; }

.vbd-cancel__actions[b-rwboncy972] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .75rem; }
.vbd-cancel__error[b-rwboncy972] { margin: .5rem 0 0; font-size: 13px; color: var(--b2b-err, #b91c1c); }

.vbd-btn[b-rwboncy972] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.vbd-btn--primary[b-rwboncy972] { background: var(--b2b-primary); border-color: var(--b2b-primary); color: var(--b2b-on-primary); }
.vbd-btn--primary:hover:not(:disabled)[b-rwboncy972] { background: var(--b2b-primary-container); border-color: var(--b2b-primary-container); }
.vbd-btn:disabled[b-rwboncy972] { background: var(--b2b-container-high); border-color: var(--b2b-border); color: var(--b2b-outline); cursor: not-allowed; }
.vbd-btn:focus-visible[b-rwboncy972] { outline: 2px solid var(--b2b-primary); outline-offset: 2px; }
.vbd-btn--small[b-rwboncy972] { padding: 4px 8px; min-inline-size: 0; }
.vbd-btn--small .material-symbols-outlined[b-rwboncy972] { font-size: 18px; }
/* /Shared/HotelCloud/HotelGalleryDialog.razor.rz.scp.css */
.hg[b-gm2kxqzhgq] {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 16px;
    box-sizing: border-box;
    outline: none;
}

.hg__stage[b-gm2kxqzhgq] { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
.hg__img[b-gm2kxqzhgq] { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }

.hg__nav[b-gm2kxqzhgq] {
    grid-row: 1; align-self: center; width: 48px; height: 48px; border: 0; cursor: pointer;
    border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.hg__nav:hover[b-gm2kxqzhgq] { background: rgba(255, 255, 255, .25); }
.hg__nav--prev[b-gm2kxqzhgq] { grid-column: 1; }
.hg__nav--next[b-gm2kxqzhgq] { grid-column: 3; }

.hg__close[b-gm2kxqzhgq] {
    position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; cursor: pointer; z-index: 2;
    border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.hg__close:hover[b-gm2kxqzhgq] { background: rgba(255, 255, 255, .25); }

.hg__counter[b-gm2kxqzhgq] {
    position: absolute; top: 18px; left: 18px; color: #e5e7eb; font-size: 13.5px; font-weight: 700; z-index: 2;
    padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .10); font-variant-numeric: tabular-nums;
}

.hg__thumbs[b-gm2kxqzhgq] {
    grid-column: 1 / -1; grid-row: 2; display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 2px;
    justify-content: center; flex-wrap: nowrap;
}
.hg__thumb[b-gm2kxqzhgq] {
    flex: 0 0 auto; width: 84px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 6px;
    overflow: hidden; cursor: pointer; opacity: .55; background: none; transition: opacity .15s ease, border-color .15s ease;
}
.hg__thumb:hover[b-gm2kxqzhgq] { opacity: .85; }
.hg__thumb--on[b-gm2kxqzhgq] { opacity: 1; border-color: #fff; }
.hg__thumb img[b-gm2kxqzhgq] { width: 100%; height: 100%; object-fit: cover; display: block; }

.hg-ic[b-gm2kxqzhgq] { width: 26px; height: 26px; }
.hg__close .hg-ic[b-gm2kxqzhgq] { width: 22px; height: 22px; }

@media (max-width: 620px) {
    .hg__nav[b-gm2kxqzhgq] { width: 40px; height: 40px; }
    .hg__thumb[b-gm2kxqzhgq] { width: 64px; height: 44px; }
}
/* /Shared/HotelCloud/HotelSearchBox.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Hotel search hero — Blazor port of the Travelio storefront HotelHeroSection
   (themes/travelio/components/HotelHeroSection.tsx). Class names, colours,
   spacing and animations are kept 1:1 with the original styled-jsx so the B2B
   panel search box looks identical to the public site.
   ─────────────────────────────────────────────────────────────────────────── */

/* Component root — defines the accent var and font so the box renders the same
   whether it's inside the hero (Search page) or the results "Change search"
   accordion. */
.hsb[b-m79aodb4ys] {
    /* The hero column centres its children, which sizes a width-less flex item
       to max-content — so the card grew past the column instead of fitting it.
       The search box is the full width of its hero, always. */
    width: 100%;
    min-width: 0;
    --color-primary: #0052cc;
    position: relative;
    color: #0f172a;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Viewport-covering catcher so an outside click closes any open popover. The
   search box sits above it (higher z-index) and stays interactive. */
.hhs__catcher[b-m79aodb4ys] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* NOTE: the hero shell (.hhs, .hhs__hero, .hhs__copy, .hhs__title,
   .hhs__subtitle, .hhs__content and the photo backdrop) is rendered by the
   parent Search page and styled in Search.razor.css under that component's
   isolation scope. Only the search card and its fields below live in this
   component, so those hero rules were removed from here to avoid dead,
   conflicting duplicates. */

.hhs__search[b-m79aodb4ys] {
    position: relative;
    z-index: 50;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e3e5ee;
    border-radius: 20px;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: 1.5fr 1.6fr 1.2fr auto;
    gap: 0.6rem;
    align-items: stretch;
    /* Panel shadow token (--b2b-shadow-hi) so the white card sits on the hero
       the same way every other B2B card sits on the surface. */
    box-shadow:
        0 24px 48px -24px rgba(6, 22, 52, 0.45),
        0 8px 20px -12px rgba(0, 102, 255, 0.25);
}

.hhs__submit[b-m79aodb4ys] {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 0 1.25rem;
    min-width: 140px;
    min-height: 56px;
    border-radius: 0.85rem;
    /* The search-desk CTA: the panel action orange with a light gradient, the
       same button every search hero ends on. */
    background: linear-gradient(135deg, #ff9d1c 0%, #fd8b00 45%, #f07400 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 8px 20px -10px rgba(253, 139, 0, 0.6);
}
.hhs__submit:hover[b-m79aodb4ys] { background: linear-gradient(135deg, #fd8b00 0%, #e67e00 100%); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(253, 139, 0, 0.75); }
.hhs__submit:focus-visible[b-m79aodb4ys] { outline: 3px solid rgba(253, 139, 0, 0.45); outline-offset: 2px; }
.hhs__submit:active[b-m79aodb4ys] { transform: translateY(0); }
.hhs__submit-icon[b-m79aodb4ys] { font-size: 1.1rem !important; }

.hhs__error[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 0.7rem;
    background: rgba(239, 68, 68, 0.92);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 24px -12px rgba(239, 68, 68, 0.7);
}
.hhs__error .material-symbols-outlined[b-m79aodb4ys] { font-size: 1.1rem !important; }

@media (max-width: 1080px) {
    .hhs__search[b-m79aodb4ys] { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hhs__submit[b-m79aodb4ys] { grid-column: 1 / -1; min-height: 52px; }
}
@media (max-width: 560px) {
    .hhs__search[b-m79aodb4ys] { grid-template-columns: 1fr; }
}

/* ─── DestinationAutocomplete ─── */
.hac[b-m79aodb4ys] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    background: #f6f7f9;
    border: 1px solid #e3e5ee;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 56px;
    justify-content: center;
}
.hac:focus-within[b-m79aodb4ys] {
    background: #ffffff;
    border-color: var(--color-primary, #0066ff);
    box-shadow: 0 0 0 4px rgba(0, 82, 204, 0.12);
}
.hac__label[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.hac__icon[b-m79aodb4ys] { font-size: 0.95rem !important; color: var(--color-primary, #0066ff); }
.hac__inputWrap[b-m79aodb4ys] { position: relative; display: flex; align-items: center; }
.hac__input[b-m79aodb4ys] {
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    border: none;
    outline: none;
    padding: 0 1.6rem 0 0;
    background: transparent;
    width: 100%;
}
.hac__input[b-m79aodb4ys]::placeholder { color: #94a3b8; font-weight: 500; }
.hac__spinner[b-m79aodb4ys] { position: absolute; inset-inline-end: 0; display: inline-flex; align-items: center; gap: 3px; }
.hac__spinnerDot[b-m79aodb4ys] {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-primary, #0066ff);
    animation: hac-bounce-b-m79aodb4ys 0.9s infinite ease-in-out both;
}
.hac__spinnerDot:nth-child(2)[b-m79aodb4ys] { animation-delay: 0.12s; }
.hac__spinnerDot:nth-child(3)[b-m79aodb4ys] { animation-delay: 0.24s; }
@keyframes hac-bounce-b-m79aodb4ys {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}

.hac__menu[b-m79aodb4ys] {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 18px 42px -18px rgba(15, 23, 42, 0.4), 0 4px 10px -6px rgba(15, 23, 42, 0.18);
    padding: 0.45rem;
    max-height: 360px;
    overflow-y: auto;
    z-index: 60;
    animation: hac-fade-b-m79aodb4ys 0.12s ease-out;
}
@keyframes hac-fade-b-m79aodb4ys {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.hac__group + .hac__group[b-m79aodb4ys] { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed rgba(15, 23, 42, 0.08); }
.hac__groupHead[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.hac__groupHead .material-symbols-outlined[b-m79aodb4ys] { font-size: 0.95rem !important; color: var(--color-primary, #0066ff); }
.hac__item[b-m79aodb4ys] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: 0.6rem;
    font: inherit;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.hac__item:hover[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.08); }
.hac__pin[b-m79aodb4ys] { font-size: 1.05rem !important; color: #94a3b8; flex: 0 0 auto; }
.hac__item:hover .hac__pin[b-m79aodb4ys] { color: var(--color-primary, #0066ff); }
.hac__thumb[b-m79aodb4ys] {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 0.5rem;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hac__thumb--ph .material-symbols-outlined[b-m79aodb4ys] { font-size: 1.1rem !important; color: #94a3b8; }
.hac__main[b-m79aodb4ys] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.hac__primary[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hac__stars[b-m79aodb4ys] { color: #f59e0b; font-size: 0.78rem; letter-spacing: 0.05em; }
.hac__secondary[b-m79aodb4ys] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hac__count[b-m79aodb4ys] { color: var(--color-primary, #0066ff); font-weight: 700; }
.hac__loading[b-m79aodb4ys] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}
.hac__loadingRipple[b-m79aodb4ys] { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.hac__loadingRipple span[b-m79aodb4ys] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-primary, #0066ff);
    opacity: 0;
    animation: hac-ripple-b-m79aodb4ys 1.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hac__loadingRipple span:nth-child(2)[b-m79aodb4ys] { animation-delay: -0.45s; }
.hac__loadingRipple span:nth-child(3)[b-m79aodb4ys] { animation-delay: -0.9s; }
@keyframes hac-ripple-b-m79aodb4ys {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
.hac__empty[b-m79aodb4ys] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem 0.7rem;
    font-size: 0.88rem;
    color: #94a3b8;
}
.hac__emptyIcon[b-m79aodb4ys] { font-size: 1.1rem !important; }

/* ─── StayRangeField ─── */
.hdr[b-m79aodb4ys] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.85rem;
    background: #f6f7f9;
    border: 1px solid #e3e5ee;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 56px;
    justify-content: center;
}
.hdr:focus-within[b-m79aodb4ys] {
    background: #ffffff;
    border-color: var(--color-primary, #0066ff);
    box-shadow: 0 0 0 4px rgba(0, 82, 204, 0.12);
}
.hdr__row[b-m79aodb4ys] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.hdr__half[b-m79aodb4ys] {
    background: transparent;
    border: none;
    padding: 0.3rem 0.45rem 0.35rem;
    border-radius: 0.6rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    transition: background 0.12s;
}
.hdr__half:hover[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.06); }
.hdr__half--active[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.08); box-shadow: inset 0 0 0 1px rgba(0, 82, 204, 0.25); }
.hdr__halfLabel[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
    /* "CHECK-OUT" broke at its hyphen once the card sat inside the desk hero. */
    white-space: nowrap;
}
.hdr__halfIcon[b-m79aodb4ys] { font-size: 0.85rem !important; color: var(--color-primary, #0066ff); flex: 0 0 auto; }
.hdr__halfValue[b-m79aodb4ys] { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; }
.hdr__day[b-m79aodb4ys] { font-size: 1.4rem; font-weight: 800; color: #0f172a; line-height: 1; }
.hdr__meta[b-m79aodb4ys] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hdr__dow[b-m79aodb4ys] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    line-height: 1;
}
.hdr__monthYear[b-m79aodb4ys] { font-size: 0.7rem; color: #64748b; font-weight: 600; line-height: 1.2; }
.hdr__placeholder[b-m79aodb4ys] { font-size: 0.9rem; font-weight: 500; color: #94a3b8; padding-top: 0.15rem; }
.hdr__divider[b-m79aodb4ys] { display: inline-flex; align-items: center; justify-content: center; padding: 0 0.2rem; flex: 0 0 auto; }
.hdr__arrow[b-m79aodb4ys] { font-size: 1.1rem !important; color: #cbd5e1; }
.hdr__nights[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.22rem 0.55rem 0.22rem 0.45rem;
    border-radius: 999px;
    background: #fd8b00;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(253, 139, 0, 0.7);
    animation: hdr-bloom-b-m79aodb4ys 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hdr__nightsIcon[b-m79aodb4ys] { font-size: 0.85rem !important; color: #fff; }
@keyframes hdr-bloom-b-m79aodb4ys {
    from { transform: scale(0.6) translateY(2px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.hdr__pop[b-m79aodb4ys] {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    padding: 0.85rem;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.45), 0 6px 14px -8px rgba(15, 23, 42, 0.2);
    z-index: 60;
    width: max(620px, 100%);
    max-width: calc(100vw - 2rem);
    animation: hdr-fade-b-m79aodb4ys 0.16s ease-out;
}
@keyframes hdr-fade-b-m79aodb4ys {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.hdr__pop-head[b-m79aodb4ys] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.25rem 0.6rem; }
.hdr__pop-title[b-m79aodb4ys] { font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.hdr__nav[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.hdr__nav:hover[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.08); border-color: rgba(0, 82, 204, 0.4); color: var(--color-primary, #0066ff); }
.hdr__nav .material-symbols-outlined[b-m79aodb4ys] { font-size: 1.1rem !important; }
.hdr__months[b-m79aodb4ys] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hdr__pop-foot[b-m79aodb4ys] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.hdr__footNights[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #fd8b00;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 18px -6px rgba(253, 139, 0, 0.6);
}
.hdr__footNights .material-symbols-outlined[b-m79aodb4ys] { font-size: 1rem !important; }
.hdr__ghost[b-m79aodb4ys] {
    background: transparent;
    border: none;
    font: inherit;
    font-weight: 700;
    color: #64748b;
    padding: 0.45rem 0.85rem;
    border-radius: 0.6rem;
    cursor: pointer;
}
.hdr__ghost:hover[b-m79aodb4ys] { color: #0f172a; background: rgba(15, 23, 42, 0.04); }
.hdr__cta[b-m79aodb4ys] {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--color-primary, #0066ff);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.hdr__cta:hover[b-m79aodb4ys] { filter: brightness(1.05); }
.hdr__cta:disabled[b-m79aodb4ys] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
    .hdr__pop[b-m79aodb4ys] { width: calc(100vw - 2rem); }
    .hdr__months[b-m79aodb4ys] { grid-template-columns: 1fr; }
    .hdr__day[b-m79aodb4ys] { font-size: 1.15rem; }
}

/* ─── CalendarMonth ─── */
.hcm__title[b-m79aodb4ys] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.hcm__grid[b-m79aodb4ys] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hcm__grid--head[b-m79aodb4ys] { margin-bottom: 0.2rem; }
.hcm__dow[b-m79aodb4ys] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: center;
    padding: 0.25rem 0;
    letter-spacing: 0.04em;
}
.hcm__pad[b-m79aodb4ys] { aspect-ratio: 1 / 1; }
.hcm__day[b-m79aodb4ys] {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hcm__day:hover:not(:disabled)[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.1); color: var(--color-primary, #0066ff); }
.hcm__day--past[b-m79aodb4ys] { color: #cbd5e1; cursor: not-allowed; }
.hcm__day--today[b-m79aodb4ys] { border-color: rgba(0, 82, 204, 0.35); }
.hcm__day--mid[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.1); color: var(--color-primary, #0066ff); border-radius: 0; }
.hcm__day--sel[b-m79aodb4ys] { background: var(--color-primary, #0066ff); color: #ffffff; }
.hcm__day--sel:hover[b-m79aodb4ys] { background: var(--color-primary, #0066ff); color: #ffffff; }

/* ─── TravelersField ─── */
.htv[b-m79aodb4ys] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    background: #f6f7f9;
    border: 1px solid #e3e5ee;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 56px;
    justify-content: center;
}
.htv:focus-within[b-m79aodb4ys] { background: #ffffff; border-color: var(--color-primary, #0066ff); box-shadow: 0 0 0 4px rgba(0, 82, 204, 0.12); }
.htv__trigger[b-m79aodb4ys] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    outline: none;
    text-align: left;
}
.htv__caption[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    line-height: 1;
}
.htv__icon[b-m79aodb4ys] { font-size: 0.95rem !important; color: var(--color-primary, #0066ff); flex: 0 0 auto; }
.htv__summary[b-m79aodb4ys] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.htv__pop[b-m79aodb4ys] {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    padding: 0.85rem;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.45), 0 6px 14px -8px rgba(15, 23, 42, 0.2);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    animation: htv-fade-b-m79aodb4ys 0.16s ease-out;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}
@keyframes htv-fade-b-m79aodb4ys {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.htv__rooms[b-m79aodb4ys] { display: flex; flex-direction: column; gap: 0.65rem; }
.htv__roomCard[b-m79aodb4ys] {
    padding: 0.65rem 0.7rem 0.55rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.htv__roomHead[b-m79aodb4ys] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.htv__roomTitle[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.htv__roomTitle .material-symbols-outlined[b-m79aodb4ys] { font-size: 1rem !important; color: var(--color-primary, #0066ff); }
.htv__removeBtn[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.htv__removeBtn:hover[b-m79aodb4ys] { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.45); }
.htv__removeBtn .material-symbols-outlined[b-m79aodb4ys] { font-size: 0.95rem !important; }
.htv__ages[b-m79aodb4ys] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.25rem;
    margin-top: 0.1rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}
.htv__addRoom[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    border: 1px dashed rgba(0, 82, 204, 0.4);
    background: rgba(0, 82, 204, 0.04);
    color: var(--color-primary, #0066ff);
    border-radius: 0.65rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    justify-content: center;
}
.htv__addRoom:hover[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.08); border-color: rgba(0, 82, 204, 0.7); }
.htv__addRoom .material-symbols-outlined[b-m79aodb4ys] { font-size: 1.05rem !important; }
.htv__foot[b-m79aodb4ys] { display: flex; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px dashed rgba(15, 23, 42, 0.08); }
.htv__cta[b-m79aodb4ys] {
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--color-primary, #0066ff);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.htv__cta:hover[b-m79aodb4ys] { filter: brightness(1.05); }

/* ─── Stepper row ─── */
.trow[b-m79aodb4ys] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0; }
.trow__meta[b-m79aodb4ys] { display: flex; flex-direction: column; gap: 1px; }
.trow__label[b-m79aodb4ys] { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
.trow__hint[b-m79aodb4ys] { font-size: 0.7rem; color: #94a3b8; font-weight: 500; }
.trow__ctrl[b-m79aodb4ys] { display: inline-flex; align-items: center; gap: 0.55rem; }
.trow__btn[b-m79aodb4ys] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.trow__btn:hover:not(:disabled)[b-m79aodb4ys] { background: rgba(0, 82, 204, 0.08); border-color: rgba(0, 82, 204, 0.4); color: var(--color-primary, #0066ff); }
.trow__btn:disabled[b-m79aodb4ys] { opacity: 0.4; cursor: not-allowed; }
.trow__btn .material-symbols-outlined[b-m79aodb4ys] { font-size: 1rem !important; }
.trow__value[b-m79aodb4ys] { min-width: 22px; text-align: center; font-size: 0.95rem; font-weight: 800; color: #0f172a; }

/* ─── Child age picker ─── */
.cap[b-m79aodb4ys] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0; }
.cap__meta[b-m79aodb4ys] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cap__label[b-m79aodb4ys] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 700; color: #0f172a; }
.cap__icon[b-m79aodb4ys] { font-size: 0.95rem !important; color: var(--color-primary, #0066ff); }
.cap__hint[b-m79aodb4ys] { font-size: 0.7rem; color: #94a3b8; font-weight: 600; }
.cap__selectWrap[b-m79aodb4ys] { position: relative; display: inline-flex; align-items: center; }
.cap__select[b-m79aodb4ys] {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    padding: 0.3rem 1.8rem 0.3rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 0.5rem;
    background: #ffffff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 84px;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.cap__select:hover[b-m79aodb4ys] { border-color: rgba(0, 82, 204, 0.4); }
.cap__select:focus[b-m79aodb4ys] { outline: none; border-color: var(--color-primary, #0066ff); box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.15); }
.cap__caret[b-m79aodb4ys] { position: absolute; inset-inline-end: 0.4rem; color: #64748b; pointer-events: none; font-size: 1.05rem !important; }
/* /Shared/PassportScan/PassportScanReviewDialog.razor.rz.scp.css */
/* Review dialog: photograph beside fields, so "confirm" means comparing rather
   than trusting. Same type scale, spacing steps and radius family as the
   booking wizard. */

.ps-dlg__title[b-kr32n64cuk] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ps-dlg__title .material-symbols-outlined[b-kr32n64cuk] {
    font-size: 26px;
    color: #0066ff;
}
.ps-dlg__title > div[b-kr32n64cuk] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.ps-dlg__title strong[b-kr32n64cuk] { font-size: 16px; font-weight: 800; }
.ps-dlg__title-sub[b-kr32n64cuk] { font-size: 12.5px; color: #64748b; }

/* ─── Document pager ─── */
.ps-dlg__pager[b-kr32n64cuk] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.ps-pager__item[b-kr32n64cuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    /* 32px is the floor for a pointer-driven agent desk; these sit just above it. */
    min-height: 34px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ps-pager__item .material-symbols-outlined[b-kr32n64cuk] { font-size: 17px; }
.ps-pager__item:hover[b-kr32n64cuk] { border-color: #cbd5e1; }
.ps-pager__item.is-active[b-kr32n64cuk] {
    background: #fff;
    border-color: #0066ff;
    color: #0f2a5c;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}
/* State colour is carried by the icon too, never by hue alone. */
.ps-pager__item.is-ok .material-symbols-outlined[b-kr32n64cuk] { color: #16a34a; }
.ps-pager__item.is-review .material-symbols-outlined[b-kr32n64cuk] { color: #b45309; }
.ps-pager__item.is-failed .material-symbols-outlined[b-kr32n64cuk] { color: #dc2626; }

/* ─── Body ─── */
.ps-dlg__body[b-kr32n64cuk] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 18px;
    align-items: start;
}

.ps-dlg__image[b-kr32n64cuk] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ps-dlg__image img[b-kr32n64cuk] {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    background: #0f172a;
    border-radius: 10px;
    cursor: zoom-in;
}
.ps-dlg__image img.is-zoomed[b-kr32n64cuk] {
    max-height: none;
    object-fit: cover;
    cursor: zoom-out;
}
.ps-dlg__image-hint[b-kr32n64cuk] {
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
}

/* ─── Fields ─── */
[b-kr32n64cuk] .ps-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-kr32n64cuk] .ps-field {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
[b-kr32n64cuk] .ps-field__label {
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
}
[b-kr32n64cuk] .ps-field__hint {
    grid-column: 2 / -1;
    font-size: 11.5px;
    color: #b45309;
    line-height: 1.5;
}
/* A field wanting a second look gets a quiet marker on the inline start edge,
   which mirrors correctly under RTL. */
[b-kr32n64cuk] .ps-field--review {
    border-inline-start: 3px solid #f59e0b;
    padding-inline-start: 9px;
    margin-inline-start: -12px;
}

/* Latin islands - passport numbers, country codes, document names - must not be
   reordered by a right-to-left layout. */
[b-kr32n64cuk] .ps-field__latin input {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ─── Confidence badge ─── */
[b-kr32n64cuk] .ps-conf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
[b-kr32n64cuk] .ps-conf .material-symbols-outlined { font-size: 15px; }
[b-kr32n64cuk] .ps-conf--ok { background: #dcfce7; color: #14532d; }
[b-kr32n64cuk] .ps-conf--review { background: #fef3c7; color: #78350f; }
[b-kr32n64cuk] .ps-conf--missing { background: #f1f5f9; color: #475569; }

/* ─── Assignment + warnings ─── */
[b-kr32n64cuk] .ps-assign {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
[b-kr32n64cuk] .ps-assign__label {
    font-size: 12.5px;
    font-weight: 800;
    color: #0f2a5c;
}

[b-kr32n64cuk] .ps-warnings {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[b-kr32n64cuk] .ps-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #7f1d1d;
}
[b-kr32n64cuk] .ps-warning .material-symbols-outlined {
    font-size: 18px;
    color: #dc2626;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .ps-dlg__body[b-kr32n64cuk] { grid-template-columns: minmax(0, 1fr); }
    .ps-dlg__image[b-kr32n64cuk] { position: static; }
    .ps-dlg__image img[b-kr32n64cuk] { max-height: 260px; }
    .ps-field[b-kr32n64cuk] {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .ps-field__label[b-kr32n64cuk] { font-size: 12px; }
}

/* Sits with the actions, muted: information the operator needs before pressing
   Apply, not a warning that something has gone wrong. */
.ps-dlg__unassigned[b-kr32n64cuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: auto;
    font-size: 12.5px;
    color: #5b6b85;
}
.ps-dlg__unassigned .material-symbols-outlined[b-kr32n64cuk] {
    font-size: 17px;
    color: #8a97ad;
}
/* /Shared/PassportScan/PassportScanZone.razor.rz.scp.css */
/* Passport scan entry.

   Built as a card of the same family as the passenger cards it fills — same
   white ground, same radius, same left accent the lead passenger card carries —
   rather than as a tinted, dashed tip box. That styling is the shape of an
   advertisement, and agents skip advertisements, which would bury the one
   control on this step that removes the most work.

   Logical properties throughout: the panel mirrors under Persian and Arabic. */

.ps-zone[b-l9tbct4wk9] {
    margin-bottom: 14px;

    /* The breakpoints below measure this card, not the window. The component
       sits inside a content column inset by a 255px sidebar, so a viewport
       media query fires roughly 255px too late and leaves the copy squeezed
       into three cramped lines beside the button at exactly the widths agents
       use on a laptop. */
    container-type: inline-size;
    container-name: pszone;
}

/* ── The card ── */
.ps-zone__card[b-l9tbct4wk9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    background: #fff;
    border: 1px solid #dbe6f7;
    border-inline-start: 3px solid #0066ff;
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ps-zone__card:hover[b-l9tbct4wk9] {
    border-color: #b6d0ff;
    border-inline-start-color: #0066ff;
    box-shadow: 0 1px 3px rgba(15, 42, 92, 0.06);
}
.ps-zone__card.is-busy[b-l9tbct4wk9] { opacity: 0.8; }

/* Drag feedback, since the card accepts a drop as readily as a click. */
.ps-zone[b-l9tbct4wk9]  .image-drop-active .ps-zone__card {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14);
}

/* ── Icon tile ──
   A tile rather than a bare glyph: an icon floating in whitespace reads as
   decoration, a tile reads as an object with a job. The gradient is the one
   place this card is allowed to look unlike the form around it — it marks the
   row as the new, automated way of doing what the fields below do by hand. */
.ps-zone__icon[b-l9tbct4wk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0066ff 0%, #6d3bf5 100%);
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.28);
    flex: 0 0 auto;
}
.ps-zone__icon .material-symbols-outlined[b-l9tbct4wk9] {
    font-size: 23px;
    color: #fff;
}

/* ── AI badge ──
   Small and inline with the headline. It labels the capability rather than
   decorating the card: agents are being told which part of the screen is doing
   something they have not seen before, in one glance. */
.ps-zone__ai[b-l9tbct4wk9] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    margin-inline-end: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0066ff 0%, #6d3bf5 100%);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    vertical-align: 2px;
    white-space: nowrap;
}
.ps-zone__ai .material-symbols-outlined[b-l9tbct4wk9] {
    font-size: 13px;
    color: #fff;
}

/* ── Copy ──
   Title names the object and the outcome; the sub carries the reassurance that
   nothing lands without approval, which is what makes an agent willing to try
   it on a booking that carries a fine when it is wrong. */
.ps-zone__copy[b-l9tbct4wk9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ps-zone__title[b-l9tbct4wk9] {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f2a5c;
    line-height: 1.5;
}
.ps-zone__sub[b-l9tbct4wk9] {
    font-size: 12.5px;
    /* #5b6b85 on white clears 4.5:1; the lighter slates do not. */
    color: #5b6b85;
    line-height: 1.55;
}

/* ── Action ── */
.ps-zone__action[b-l9tbct4wk9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.ps-zone__hint[b-l9tbct4wk9] {
    font-size: 11px;
    color: #8a97ad;
    white-space: nowrap;
}

/* A wrapped "Choose / 3 photos" reads as a squeezed afterthought beside the
   form it replaces; the copy gives way instead of the label. */
.ps-zone[b-l9tbct4wk9]  .ps-zone__btn {
    white-space: nowrap;
    font-weight: 700;
    border-radius: 9px;
    padding-inline: 16px;
    min-height: 40px;
}

/* ── Progress ── */
.ps-zone__progress[b-l9tbct4wk9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.ps-zone__bar[b-l9tbct4wk9] {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 2px;
}
.ps-zone__progress-text[b-l9tbct4wk9] {
    font-size: 12px;
    color: #5b6b85;
    white-space: nowrap;
}

/* ── Pre-upload quality warnings ──
   Amber, never red: nothing has failed, and the operator may still choose to
   send the photo. Reserving red keeps it meaningful where it does appear. */
.ps-zone__warnings[b-l9tbct4wk9] {
    margin-top: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ps-zone__warning[b-l9tbct4wk9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #7c5c04;
    line-height: 1.6;
}
.ps-zone__warning .material-symbols-outlined[b-l9tbct4wk9] {
    font-size: 18px;
    color: #b45309;
    flex: 0 0 auto;
}
.ps-zone__dismiss[b-l9tbct4wk9] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 2px 0;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    cursor: pointer;
    text-decoration: underline;
}

/* ── Responsive ──
   Below ~720px of card width the button takes its own full-width row instead of
   squeezing the copy into a column a few words wide. The icon stays beside the
   title until the card is genuinely narrow, so it keeps its identity at every
   size. Viewport media queries mirror the container rules for browsers without
   container-query support; where both apply the container rule is the accurate
   one and wins on specificity of context. */
@container pszone (max-width: 720px) {
    .ps-zone__card[b-l9tbct4wk9] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 12px;
    }
    .ps-zone__action[b-l9tbct4wk9] {
        grid-column: 1 / -1;
        align-items: stretch;
    }
    .ps-zone[b-l9tbct4wk9]  .ps-zone__btn {
        width: 100%;
        /* Past the 44px touch target, since this surface is used on tablets. */
        min-height: 44px;
    }
    .ps-zone__hint[b-l9tbct4wk9] { text-align: center; }
}

@container pszone (max-width: 430px) {
    .ps-zone__card[b-l9tbct4wk9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 13px 14px;
    }
    .ps-zone__icon[b-l9tbct4wk9] { width: 38px; height: 38px; border-radius: 10px; }
    .ps-zone__icon .material-symbols-outlined[b-l9tbct4wk9] { font-size: 20px; }
    .ps-zone__title[b-l9tbct4wk9] { font-size: 14px; }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
    @media (max-width: 980px) {
        .ps-zone__card[b-l9tbct4wk9] {
            grid-template-columns: auto minmax(0, 1fr);
            row-gap: 12px;
        }
        .ps-zone__action[b-l9tbct4wk9] {
            grid-column: 1 / -1;
            align-items: stretch;
        }
        .ps-zone[b-l9tbct4wk9]  .ps-zone__btn { width: 100%; min-height: 44px; }
        .ps-zone__hint[b-l9tbct4wk9] { text-align: center; }
    }
    @media (max-width: 640px) {
        .ps-zone__card[b-l9tbct4wk9] { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 13px 14px; }
        .ps-zone__icon[b-l9tbct4wk9] { width: 38px; height: 38px; border-radius: 10px; }
        .ps-zone__title[b-l9tbct4wk9] { font-size: 14px; }
    }
}
/* /Shared/SearchDesk/RecentPasses.razor.rz.scp.css */
/* Recent searches as mini boarding passes — shared by every search desk page.
   Logical properties throughout so the passes mirror for RTL tenants. */

.rps[b-9wpl0pc0ch] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.75rem;
}
.rps__head[b-9wpl0pc0ch] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-inline: 0.25rem;
}
.rps__title[b-9wpl0pc0ch] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0b1f4b;
}
.rps__title .material-symbols-outlined[b-9wpl0pc0ch] { font-size: 1.25rem !important; color: #0066ff; }
.rps__hint[b-9wpl0pc0ch] { font-size: 0.8rem; color: #64748b; }

.rps__grid[b-9wpl0pc0ch] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.rps__pass[b-9wpl0pc0ch] {
    position: relative;
    display: flex;
    background: #ffffff;
    border: 1px solid #e3e5ee;
    border-radius: 16px;
    box-shadow: 0 6px 18px -12px rgba(6, 22, 52, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}
/* Coloured stub on the leading edge — the "tear-off" end of the pass. */
.rps__pass[b-9wpl0pc0ch]::before {
    content: "";
    flex: 0 0 6px;
    background: linear-gradient(180deg, #0066ff 0%, #0a2a66 100%);
}
.rps__pass:hover[b-9wpl0pc0ch] {
    transform: translateY(-2px);
    border-color: rgba(0, 102, 255, 0.45);
    box-shadow: 0 14px 28px -16px rgba(0, 102, 255, 0.55);
}
.rps__pass--stale[b-9wpl0pc0ch]::before { background: #cbd5e1; }

.rps__main[b-9wpl0pc0ch] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding-block: 0.8rem 0.85rem;
    padding-inline: 0.9rem 0.4rem;
    background: transparent;
    border: none;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
}
.rps__main > *[b-9wpl0pc0ch] { width: 100%; }
.rps__main:focus-visible[b-9wpl0pc0ch] { outline: 3px solid rgba(0, 102, 255, 0.35); outline-offset: -3px; border-radius: 14px; }

.rps__top[b-9wpl0pc0ch] { display: flex; align-items: center; gap: 0.5rem; }
.rps__kind[b-9wpl0pc0ch] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.rps__kind .material-symbols-outlined[b-9wpl0pc0ch] { font-size: 0.9rem !important; color: #0066ff; }
.rps__badge[b-9wpl0pc0ch] {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.66rem;
    font-weight: 700;
}
.rps__passTitle[b-9wpl0pc0ch] {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0b1f4b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rps__route[b-9wpl0pc0ch] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}
.rps__end[b-9wpl0pc0ch] { display: flex; flex-direction: column; min-width: 0; }
.rps__end--to[b-9wpl0pc0ch] { align-items: flex-end; text-align: end; }
.rps__big[b-9wpl0pc0ch] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #0b1f4b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Names (cities, countries) drop a step and may take two lines before they
   ellipsize; codes and dates never need to. */
.rps__big--long[b-9wpl0pc0ch] {
    font-size: 1.05rem;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rps__small[b-9wpl0pc0ch] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.rps__path[b-9wpl0pc0ch] { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.rps__pathLine[b-9wpl0pc0ch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 20px;
    background-image: linear-gradient(90deg, #cbd5e1 50%, transparent 50%);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    background-position: center;
}
.rps__pathIcon[b-9wpl0pc0ch] {
    font-size: 1.1rem !important;
    color: #0066ff;
    background: #ffffff;
    padding: 0 0.15rem;
}
/* The material "flight" glyph points up; turn it to fly toward the To end. */
.rps__pathIcon--flight[b-9wpl0pc0ch] { transform: rotate(90deg); }
.rps__pathIcon--flight:dir(rtl)[b-9wpl0pc0ch] { transform: rotate(-90deg); }
.rps__pathLabel[b-9wpl0pc0ch] {
    font-size: 0.66rem;
    font-weight: 800;
    color: #c96f00;
    white-space: nowrap;
}
.rps__pass--stale .rps__big[b-9wpl0pc0ch] { color: #64748b; }

.rps__meta[b-9wpl0pc0ch] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #e3e7f0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
}
.rps__meta > span[b-9wpl0pc0ch] { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.rps__meta .material-symbols-outlined[b-9wpl0pc0ch] { font-size: 0.95rem !important; color: #94a3b8; }

.rps__actions[b-9wpl0pc0ch] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.5rem;
    padding-inline: 0 0.5rem;
}
.rps__icon[b-9wpl0pc0ch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.rps__icon:hover[b-9wpl0pc0ch] { color: #0066ff; background: rgba(0, 102, 255, 0.08); border-color: rgba(0, 102, 255, 0.25); }
.rps__icon .material-symbols-outlined[b-9wpl0pc0ch] { font-size: 1.05rem !important; }

.rps__skeleton[b-9wpl0pc0ch] {
    height: 128px;
    border-radius: 16px;
    background: linear-gradient(90deg, #eef1f6 0%, #f6f8fb 50%, #eef1f6 100%);
    background-size: 200% 100%;
    animation: rps-shimmer-b-9wpl0pc0ch 1.2s linear infinite;
}
@keyframes rps-shimmer-b-9wpl0pc0ch { to { background-position: -200% 0; } }

.rps__empty[b-9wpl0pc0ch] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    border: 1.5px dashed #d5dbe8;
    background: #ffffff;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}
.rps__empty > .material-symbols-outlined[b-9wpl0pc0ch] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 102, 255, 0.08);
    color: #0066ff;
    font-size: 1.4rem !important;
}
.rps__empty > div[b-9wpl0pc0ch] { display: flex; flex-direction: column; gap: 0.1rem; }
.rps__empty strong[b-9wpl0pc0ch] { color: #0b1f4b; font-size: 0.92rem; }
/* /Shared/SearchDesk/SearchDeskHero.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Search desk hero — shared by the flight, hotel, tour, visa and group-request
   landing pages. Deep navy "night sky", soft blue/orange glows, a dot grid
   fading from the trailing corner, and one animated motif per vertical. The
   palette stays on the funnel's #0066ff blue and #fd8b00 orange CTA.
   ─────────────────────────────────────────────────────────────────────────── */

.sdh[b-isznbrtqr4] {
    --sdh-orange: #fd8b00;
    display: block;
    color: #191c1e;
}

.sdh__hero[b-isznbrtqr4] {
    position: relative;
    border-radius: 24px;
    background: linear-gradient(155deg, #061634 0%, #0a2a66 52%, #0d47b8 100%);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 24px 60px -32px rgba(6, 22, 52, 0.7);
}
.sdh--compact .sdh__hero[b-isznbrtqr4] {
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ─── Decoration layer (clipped; the hero itself must not clip popovers) ─── */
.sdh__sky[b-isznbrtqr4] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.sdh__glow[b-isznbrtqr4] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.sdh__glow--a[b-isznbrtqr4] {
    width: 420px;
    height: 420px;
    top: -180px;
    inset-inline-end: -60px;
    background: rgba(0, 140, 255, 0.45);
}
.sdh__glow--b[b-isznbrtqr4] {
    width: 360px;
    height: 360px;
    bottom: -220px;
    inset-inline-start: -120px;
    background: rgba(253, 139, 0, 0.22);
}
.sdh__dots[b-isznbrtqr4] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
}
.sdh__dots:dir(rtl)[b-isznbrtqr4] {
    -webkit-mask-image: radial-gradient(120% 90% at 15% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(120% 90% at 15% 0%, #000 0%, transparent 70%);
}

.sdh__art[b-isznbrtqr4] {
    position: absolute;
    top: 18px;
    inset-inline-end: 3%;
    width: min(420px, 36%);
    height: auto;
    opacity: 0.9;
}
/* A plane flying "backwards" is the classic RTL bug: mirror the whole motif. */
.sdh__art:dir(rtl)[b-isznbrtqr4] { transform: scaleX(-1); }
.sdh--compact .sdh__art[b-isznbrtqr4] { width: min(340px, 30%); top: 10px; }
/* Page actions sit in the motif's corner; step the art back behind them. */
.sdh--actions .sdh__art[b-isznbrtqr4] { opacity: 0.4; }

.sdh__twinkle[b-isznbrtqr4] { animation: sdh-twinkle-b-isznbrtqr4 3.2s ease-in-out infinite; }
.sdh__twinkle--2[b-isznbrtqr4] { animation-delay: -1.1s; }
.sdh__twinkle--3[b-isznbrtqr4] { animation-delay: -2.2s; }
@keyframes sdh-twinkle-b-isznbrtqr4 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.sdh__spin[b-isznbrtqr4] {
    transform-box: fill-box;
    transform-origin: center;
    animation: sdh-spin-b-isznbrtqr4 40s linear infinite;
}
.sdh__spin--rev[b-isznbrtqr4] { animation-duration: 60s; animation-direction: reverse; }
@keyframes sdh-spin-b-isznbrtqr4 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sdh__mover[b-isznbrtqr4] { display: none; }
    .sdh__twinkle[b-isznbrtqr4], .sdh__spin[b-isznbrtqr4] { animation: none; }
}
/* Below this the copy spans the hero, and the motif would run through it. */
@media (max-width: 1000px) {
    .sdh__art[b-isznbrtqr4] { display: none; }
}

/* ─── Content ─── */
.sdh__content[b-isznbrtqr4] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sdh--compact .sdh__content[b-isznbrtqr4] { gap: 1.1rem; }

.sdh__head[b-isznbrtqr4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}

.sdh__copy[b-isznbrtqr4] {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}
.sdh--compact .sdh__copy[b-isznbrtqr4] { gap: 0.5rem; }

.sdh__eyebrow[b-isznbrtqr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.32rem;
    padding-inline: 0.6rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.sdh__eyebrow .material-symbols-outlined[b-isznbrtqr4] { font-size: 1rem !important; color: var(--sdh-orange); }

.sdh__title[b-isznbrtqr4] {
    margin: 0;
    font-size: clamp(1.7rem, 3.3vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #ffffff;
}
.sdh--compact .sdh__title[b-isznbrtqr4] { font-size: clamp(1.45rem, 2.4vw, 2rem); }
.sdh__accent[b-isznbrtqr4] {
    background: linear-gradient(90deg, #ffb24d 0%, #fd8b00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sdh__subtitle[b-isznbrtqr4] {
    margin: 0;
    font-size: clamp(0.92rem, 1.1vw, 1rem);
    line-height: 1.65;
    color: rgba(226, 234, 255, 0.82);
}

/* Page actions (e.g. "New group request") sit level with the title. */
.sdh__actions[b-isznbrtqr4] { display: flex; gap: 0.5rem; flex-wrap: wrap; align-self: center; }

.sdh__facts[b-isznbrtqr4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Pulled up under the copy: the content gap is sized for the card. */
    margin-top: calc(-1 * clamp(0.25rem, 1vw, 0.6rem));
}
.sdh__fact[b-isznbrtqr4] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(226, 234, 255, 0.85);
    font-size: 0.8rem;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}
.sdh__fact strong[b-isznbrtqr4] { color: #ffffff; font-weight: 700; }
.sdh__fact .material-symbols-outlined[b-isznbrtqr4] { font-size: 1.1rem !important; color: #7fb2ff; }

.sdh__box[b-isznbrtqr4] { position: relative; }

@media (max-width: 720px) {
    .sdh__actions[b-isznbrtqr4] { width: 100%; }
    .sdh__facts[b-isznbrtqr4] { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sdh__fact[b-isznbrtqr4] {
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.55rem 0.4rem;
        text-align: center;
        white-space: normal;
        font-size: 0.74rem;
        line-height: 1.25;
    }
    .sdh__factRest[b-isznbrtqr4] { display: none; }
}
@media (max-width: 640px) {
    .sdh__hero[b-isznbrtqr4] { border-radius: 18px; padding-inline: 0.75rem; }
    .sdh__copy[b-isznbrtqr4] { padding-inline: 0.25rem; }
}
/* /Shared/TourCloud/TourHoldCountdown.razor.rz.scp.css */
/* Scoped to this component's own markup, so it carries its styling into any
   funnel page that hosts it without the host needing a ::deep rule. */

.thc[b-060b5bvwbp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e40af;
    line-height: 1.25;
}

.thc__icon[b-060b5bvwbp] { font-size: 22px; }

.thc__body[b-060b5bvwbp] {
    display: flex;
    flex-direction: column;
}

.thc__label[b-060b5bvwbp] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
}

.thc__value[b-060b5bvwbp] {
    font-size: 18px;
    font-weight: 700;
    /* Fixed-width digits, so the seconds ticking down do not make the whole
       footer jitter once a second. */
    font-variant-numeric: tabular-nums;
}

.thc__sub[b-060b5bvwbp] { font-size: 11px; opacity: .8; }

.thc--warn[b-060b5bvwbp] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #a16207;
}

.thc--danger[b-060b5bvwbp] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}
/* /Shared/TourCloud/TourSearchBox.razor.rz.scp.css */
/* Tour search box.

   One white bar of bordered fields with a caps label above the value, and an
   orange search button on the end. Its own `tsb-` prefix rather than the hotel
   box's classes: the two now look different on purpose, and sharing names would
   make either one impossible to change alone.

   Written in logical properties throughout, so the bar mirrors with the page in
   Persian instead of needing a direction override. */

.tsb[b-22ozt3ud9d] {
    position: relative;
    inline-size: 100%;
}

/* Swallows the click that closes a popover, so the first click outside only
   dismisses rather than also hitting whatever is under it. */
.tsb__catcher[b-22ozt3ud9d] {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
}

.tsb__bar[b-22ozt3ud9d] {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e3e5ee;
    box-shadow:
        0 24px 48px -24px rgba(6, 22, 52, .45),
        0 8px 20px -12px rgba(0, 102, 255, .25);
}

/* ── Field ──────────────────────────────────────────────────────────── */

.tsb__field[b-22ozt3ud9d] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-inline-size: 0;
    padding: 10px 14px;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}

.tsb__field--grow[b-22ozt3ud9d] { flex: 1 1 0; }

.tsb__field:focus-within[b-22ozt3ud9d] {
    border-color: var(--b2b-primary);
    box-shadow: 0 0 0 3px var(--b2b-primary-fixed);
}

.tsb__label[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #334155;
    white-space: nowrap;
}

.tsb__labelIcon[b-22ozt3ud9d] {
    font-size: 16px;
    color: var(--b2b-primary);
}

/* The typed field and the popover triggers share one look, so a field that
   opens a calendar does not read as less editable than one you type into. */
.tsb__input[b-22ozt3ud9d],
.tsb__value[b-22ozt3ud9d] {
    inline-size: 100%;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 22px;
    color: #0f172a;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsb__value[b-22ozt3ud9d] { cursor: pointer; }

.tsb__input:focus[b-22ozt3ud9d],
.tsb__value:focus[b-22ozt3ud9d] { outline: none; }

.tsb__input[b-22ozt3ud9d]::placeholder,
.tsb__placeholder[b-22ozt3ud9d] {
    color: #94a3b8;
}

/* ── Travellers stepper ─────────────────────────────────────────────── */

.tsb__field--travellers[b-22ozt3ud9d] {
    flex: 0 0 auto;
    align-items: center;
}

.tsb__stepper[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tsb__step[b-22ozt3ud9d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    padding: 0;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.tsb__step:hover:not(:disabled)[b-22ozt3ud9d] { background: #f4f4f5; border-color: #a1a1aa; }
.tsb__step:disabled[b-22ozt3ud9d] { opacity: .4; cursor: not-allowed; }
.tsb__step .material-symbols-outlined[b-22ozt3ud9d] { font-size: 18px; }

.tsb__count[b-22ozt3ud9d] {
    min-inline-size: 20px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

/* ── Submit ─────────────────────────────────────────────────────────── */

.tsb__submit[b-22ozt3ud9d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-block-size: 56px;
    padding-inline: 30px;
    border: none;
    border-radius: 14px;
    /* The search-desk CTA every search hero ends on. Fallbacks keep it orange
       outside the B2B shell, where the --b2b-* tokens are not defined. */
    background: linear-gradient(135deg, #ff9d1c 0%, var(--b2b-action, #fd8b00) 45%, #f07400 100%);
    color: var(--b2b-on-action, #fff);
    box-shadow: 0 8px 20px -10px rgba(253, 139, 0, .6);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, transform .12s, box-shadow .15s;
}

.tsb__submit:hover[b-22ozt3ud9d] {
    background: linear-gradient(135deg, var(--b2b-action, #fd8b00) 0%, var(--b2b-action-hover, #e67e00) 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(253, 139, 0, .75);
}

.tsb__submit:focus-visible[b-22ozt3ud9d] {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

.tsb__submitIcon[b-22ozt3ud9d] { font-size: 20px; }

/* ── Popovers ───────────────────────────────────────────────────────── */

.tsb__pop[b-22ozt3ud9d] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 40;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.tsb__pop--list[b-22ozt3ud9d] { min-inline-size: 300px; max-block-size: 340px; overflow-y: auto; }
.tsb__pop--menu[b-22ozt3ud9d] { min-inline-size: 220px; }
.tsb__pop--cal[b-22ozt3ud9d] { padding: 14px; }

/* Two months is wider than the field it hangs from; pinning the end edge keeps
   it inside the bar instead of running off the page. */
.tsb__pop--cal[b-22ozt3ud9d] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.tsb__popState[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    font-size: 13px;
    color: #71717a;
}

.tsb__option[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    text-align: start;
    cursor: pointer;
}

.tsb__option:hover[b-22ozt3ud9d] { background: var(--b2b-container-low); }
.tsb__option--on[b-22ozt3ud9d] { color: var(--b2b-primary); font-weight: 600; }

.tsb__optionTick[b-22ozt3ud9d] { margin-inline-start: auto; font-size: 18px; }
.tsb__optionPin[b-22ozt3ud9d] { font-size: 18px; color: #94a3b8; }

.tsb__optionMain[b-22ozt3ud9d] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.tsb__optionPrimary[b-22ozt3ud9d] { font-weight: 600; }
.tsb__optionSecondary[b-22ozt3ud9d] { font-size: 12px; color: #71717a; }

/* Loading pips for the city list. */
.tsb__ripple[b-22ozt3ud9d] { display: inline-flex; gap: 4px; }

.tsb__ripple span[b-22ozt3ud9d] {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--b2b-primary);
    animation: tsb-bounce-b-22ozt3ud9d 1s infinite ease-in-out;
}

.tsb__ripple span:nth-child(2)[b-22ozt3ud9d] { animation-delay: .15s; }
.tsb__ripple span:nth-child(3)[b-22ozt3ud9d] { animation-delay: .3s; }

@keyframes tsb-bounce-b-22ozt3ud9d {
    0%, 80%, 100% { transform: scale(.6); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tsb__ripple span[b-22ozt3ud9d] { animation: none; opacity: .8; }
}

/* ── Calendar ───────────────────────────────────────────────────────── */

.tsb__calHead[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 10px;
}

.tsb__calTitle[b-22ozt3ud9d] { font-size: 13px; font-weight: 700; color: #0f172a; }

.tsb__calNav[b-22ozt3ud9d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
}

.tsb__calNav:hover[b-22ozt3ud9d] { background: #f4f4f5; }

.tsb__months[b-22ozt3ud9d] {
    display: flex;
    gap: 20px;
}

.tsb__month[b-22ozt3ud9d] { min-inline-size: 232px; }

.tsb__monthTitle[b-22ozt3ud9d] {
    margin-block-end: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #0f172a;
}

.tsb__grid[b-22ozt3ud9d] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.tsb__dow[b-22ozt3ud9d] {
    padding-block: 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #94a3b8;
}

.tsb__day[b-22ozt3ud9d] {
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}

.tsb__day:hover:not(:disabled)[b-22ozt3ud9d] { background: var(--b2b-container-low); }

.tsb__day--past[b-22ozt3ud9d] {
    color: #d4d4d8;
    cursor: not-allowed;
}

.tsb__day--today[b-22ozt3ud9d] { box-shadow: inset 0 0 0 1px var(--b2b-primary); }

.tsb__day--mid[b-22ozt3ud9d] {
    background: var(--b2b-primary-fixed);
    border-radius: 0;
}

.tsb__day--sel[b-22ozt3ud9d] {
    background: var(--b2b-primary);
    color: #fff;
    font-weight: 700;
}

.tsb__pad[b-22ozt3ud9d] { aspect-ratio: 1; }

.tsb__calFoot[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid #f4f4f5;
}

.tsb__calNights[b-22ozt3ud9d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #52525b;
}

.tsb__calNights .material-symbols-outlined[b-22ozt3ud9d] { font-size: 16px; }

.tsb__ghost[b-22ozt3ud9d] {
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #52525b;
    cursor: pointer;
}

.tsb__ghost:hover[b-22ozt3ud9d] { background: #f4f4f5; color: #0f172a; }

.tsb__cta[b-22ozt3ud9d] {
    padding: 7px 18px;
    border: none;
    border-radius: 8px;
    background: var(--b2b-primary);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.tsb__cta:hover[b-22ozt3ud9d] { background: var(--b2b-primary-container); }

/* ── Error ──────────────────────────────────────────────────────────── */

.tsb__error[b-22ozt3ud9d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--b2b-err-bg);
    color: var(--b2b-err-fg);
    font-size: 13px;
    font-weight: 600;
}

.tsb__error .material-symbols-outlined[b-22ozt3ud9d] { font-size: 18px; }

/* ── Narrow screens ─────────────────────────────────────────────────── */

/* Below the point where five fields stop fitting, the bar stacks. Two per row
   first, then one, rather than shrinking every field until none is readable. */
@media (max-width: 1180px) {
    .tsb__bar[b-22ozt3ud9d] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 16px;
    }

    .tsb__field--travellers[b-22ozt3ud9d] { align-items: stretch; }

    .tsb__stepper[b-22ozt3ud9d] { justify-content: space-between; }

    .tsb__submit[b-22ozt3ud9d] {
        grid-column: 1 / -1;
        padding-block: 12px;
    }

    /* Anchored to the bar rather than the field: a popover hanging off a
       half-width field would sit half off-screen. */
    .tsb__pop[b-22ozt3ud9d] {
        inset-inline: 0;
        inset-inline-end: auto;
        min-inline-size: 0;
        inline-size: max-content;
        max-inline-size: min(92vw, 520px);
    }

    .tsb__pop--cal[b-22ozt3ud9d] { inset-inline-start: 0; }

    .tsb__months[b-22ozt3ud9d] { flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .tsb__bar[b-22ozt3ud9d] { grid-template-columns: 1fr; }
    .tsb__month[b-22ozt3ud9d] { min-inline-size: 0; inline-size: 100%; }
    .tsb__months[b-22ozt3ud9d] { gap: 14px; }
}
/* /Shared/VisaCloud/DocumentUploadRow.razor.rz.scp.css */
.dur[b-397gov2gvt] {
    padding: 12px 14px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
}

.dur--ok[b-397gov2gvt] { border-inline-start: 3px solid var(--b2b-ok-fg); }
.dur--todo[b-397gov2gvt] { border-inline-start: 3px solid var(--b2b-warn-fg); }

.dur__head[b-397gov2gvt] { display: flex; align-items: flex-start; gap: 10px; }

.dur__icon[b-397gov2gvt] { font-size: 20px; color: var(--b2b-on-surface-variant); }

.dur--ok .dur__icon[b-397gov2gvt] { color: var(--b2b-ok-fg); }

.dur__id[b-397gov2gvt] { flex: 1; min-width: 0; }

.dur__title[b-397gov2gvt] { margin: 0; font-size: 13px; font-weight: 600; color: var(--b2b-on-surface); }
.dur__desc[b-397gov2gvt] { margin: 2px 0 0; font-size: 12px; line-height: 1.6; color: var(--b2b-on-surface-variant); }

.dur__flag[b-397gov2gvt] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
    white-space: nowrap;
}

.dur__file[b-397gov2gvt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-start: 10px;
    padding: 8px 10px;
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    font-size: 13px;
}

.dur__file .material-symbols-outlined[b-397gov2gvt] { font-size: 18px; }

.dur__file--ok[b-397gov2gvt] { color: var(--b2b-ok-fg); }
.dur__file--bad[b-397gov2gvt] { color: var(--b2b-err-fg); }
.dur__file--pending[b-397gov2gvt] { color: var(--b2b-on-surface-variant); }

/* A button rather than a link: private-scope files are fetched with the
   agent's token and opened from memory, so there is no href to give it. */
.dur__filename[b-397gov2gvt] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
    color: var(--b2b-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.dur__filename:hover[b-397gov2gvt] { text-decoration: underline; }

.dur__review[b-397gov2gvt] { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* The reason and the fix sit together, on their own line, so neither can be
   missed while looking at the other. */
.dur__rejection[b-397gov2gvt] {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-start: 6px;
    padding-block-start: 6px;
    border-block-start: 1px dashed currentColor;
}

.dur__rejection-reason[b-397gov2gvt] { margin: 0; flex: 1; font-size: 12px; line-height: 1.6; }

.dur__replace[b-397gov2gvt],
.dur__upload[b-397gov2gvt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    background: var(--b2b-card);
    color: var(--b2b-on-surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.dur__upload[b-397gov2gvt] { margin-block-start: 10px; }

.dur__upload--busy[b-397gov2gvt] { color: var(--b2b-on-surface-variant); cursor: progress; }

/* The real input covers the label so the whole chip is the drop target, while
   the label keeps the accessible name. */
.dur__replace[b-397gov2gvt]  input[type="file"],
.dur__upload[b-397gov2gvt]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: inherit;
}

.dur__replace .material-symbols-outlined[b-397gov2gvt],
.dur__upload .material-symbols-outlined[b-397gov2gvt] { font-size: 16px; }

.dur__error[b-397gov2gvt] { margin: 8px 0 0; font-size: 12px; color: var(--b2b-err-fg); }
/* /Shared/VisaCloud/VisaFilterRail.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Results filter rail.

   Lives with the component rather than in Results.razor.css: Blazor scopes a
   stylesheet to the markup its own component renders, so page-level rules
   never reached these elements and the rail rendered as raw checkboxes.
   ─────────────────────────────────────────────────────────────────────────── */

.vfr[b-5e4tktgjqv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
}

/* A fieldset carries the grouping for a screen reader; the browser default
   border and padding would fight the card, so they are reset here rather than
   the grouping being dropped. */
.vfr__group[b-5e4tktgjqv] {
    margin: 0;
    padding: 12px 14px;
    border: none;
    border-block-end: 1px solid var(--b2b-border);
}

.vfr__group:last-child[b-5e4tktgjqv] {
    border-block-end: none;
}

.vfr__legend[b-5e4tktgjqv] {
    padding: 0;
    margin-block-end: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant);
}

.vfr__check[b-5e4tktgjqv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    margin-inline: -6px;
    border-radius: var(--b2b-r);
    font-size: 13px;
    color: var(--b2b-on-surface);
    cursor: pointer;
}

.vfr__check:hover[b-5e4tktgjqv] {
    background: var(--b2b-container-low);
}

.vfr__check input[b-5e4tktgjqv] {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--b2b-primary);
    cursor: pointer;
}

/* The facet name takes the space; the count is pinned to the far edge so the
   numbers form a readable column instead of trailing each label. */
.vfr__check > span:not(.vfr__count)[b-5e4tktgjqv] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vfr__count[b-5e4tktgjqv] {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--b2b-container-low);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--b2b-on-surface-variant);
}

.vfr__check:hover .vfr__count[b-5e4tktgjqv] {
    background: var(--b2b-container);
}

.vfr__fieldLabel[b-5e4tktgjqv] {
    display: block;
    margin-block: 10px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--b2b-on-surface-variant);
}

.vfr__select[b-5e4tktgjqv] {
    width: 100%;
    height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--b2b-on-surface);
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    box-sizing: border-box;
}

.vfr__select:focus-visible[b-5e4tktgjqv],
.vfr__check input:focus-visible[b-5e4tktgjqv] {
    outline: 2px solid var(--b2b-primary);
    outline-offset: 2px;
}

.vfr__hint[b-5e4tktgjqv] {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--b2b-on-surface-variant);
}
/* /Shared/VisaCloud/VisaPriceTable.razor.rz.scp.css */
/* The wide table can still meet a container narrower than its five columns,
   so it scrolls inside its own box rather than pushing the card open. */
.vpt__scroll[b-9u9vvlppwz] {
    width: 100%;
    overflow-x: auto;
}

.vpt[b-9u9vvlppwz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vpt__caption[b-9u9vvlppwz] {
    text-align: start;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
    padding-block-end: 8px;
}

.vpt th[b-9u9vvlppwz],
.vpt td[b-9u9vvlppwz] {
    padding: 8px 6px;
    border-block-end: 1px solid var(--b2b-border);
    text-align: start;
    font-weight: 500;
}

.vpt thead th[b-9u9vvlppwz] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--b2b-on-surface-variant);
}

/* Numbers align to the end of their column so the decimal points stack;
   under RTL the column flips but the digits inside stay LTR via <bdi>. */
.vpt__num[b-9u9vvlppwz] { text-align: end; white-space: nowrap; }
.vpt__num--strong[b-9u9vvlppwz] { font-weight: 700; }

.vpt tfoot th[b-9u9vvlppwz] { font-weight: 700; }
.vpt tfoot td[b-9u9vvlppwz],
.vpt tfoot th[b-9u9vvlppwz] { border-block-end: none; padding-block-start: 12px; }

.vpt__total[b-9u9vvlppwz] {
    font-size: 18px;
    font-weight: 700;
    color: var(--b2b-on-surface);
}


/* ── Compact: one stacked row per band, for the purchase aside ──────────── */

.vpt-compact[b-9u9vvlppwz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vpt-compact .vpt__caption[b-9u9vvlppwz] {
    margin: 0 0 8px;
    padding: 0;
}

.vpt-compact__row[b-9u9vvlppwz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-block: 8px;
    border-block-end: 1px solid var(--b2b-border);
}

.vpt-compact__row:last-child[b-9u9vvlppwz] {
    border-block-end: none;
}

.vpt-compact__band[b-9u9vvlppwz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vpt-compact__name[b-9u9vvlppwz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--b2b-on-surface);
}

.vpt-compact__qty[b-9u9vvlppwz] {
    margin-inline-start: 4px;
    font-weight: 700;
    color: var(--b2b-on-surface-variant);
}

/* The government/service split is the reason the wide table existed. Here it
   is a sub-line: still on screen, no longer costing two columns. */
.vpt-compact__split[b-9u9vvlppwz] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--b2b-on-surface-variant);
}

.vpt-compact__amount[b-9u9vvlppwz] {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--b2b-on-surface);
}
/* /Shared/VisaCloud/VisaResultCard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   Visa result card.

   These rules live here, not in Results.razor.css, because Blazor's CSS
   isolation scopes a component's stylesheet to the markup that component
   renders. The card's markup is rendered by THIS component, so page-level
   rules targeting .vr-card never matched it and the whole results list
   rendered unstyled.

   Two placement decisions are load-bearing and commented where they apply:
   the total is the largest text on the card and sits at the top of its
   column, and the feasibility chip is the only element allowed a status
   colour.
   ─────────────────────────────────────────────────────────────────────────── */

.vr-card[b-a5sj6d6oki] {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    gap: 16px;
    padding: 16px;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-lg);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.vr-card:hover[b-a5sj6d6oki],
.vr-card:focus-visible[b-a5sj6d6oki] {
    border-color: var(--b2b-primary);
    box-shadow: var(--b2b-shadow-hi);
}

.vr-card:focus-visible[b-a5sj6d6oki] {
    outline: 2px solid var(--b2b-primary);
    outline-offset: 2px;
}

.vr-card__media[b-a5sj6d6oki] {
    border-radius: var(--b2b-r-md);
    overflow: hidden;
    background: var(--b2b-container-low);
}

.vr-card__img[b-a5sj6d6oki] {
    width: 100%;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
    display: block;
}

.vr-card__placeholder[b-a5sj6d6oki] {
    display: grid;
    place-items: center;
    min-height: 130px;
    color: var(--b2b-outline);
}

.vr-card__placeholder .material-symbols-outlined[b-a5sj6d6oki] {
    font-size: 40px;
}

.vr-card__body[b-a5sj6d6oki] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vr-card__identity[b-a5sj6d6oki] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vr-card__title[b-a5sj6d6oki] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--b2b-on-surface);
}

.vr-card__feas[b-a5sj6d6oki] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
}

.vr-card__feasIcon[b-a5sj6d6oki] {
    font-size: 15px;
}

.vr-card__feas--ok[b-a5sj6d6oki] { color: var(--b2b-ok-fg); background: var(--b2b-ok-bg); }

.vr-card__feas--tight[b-a5sj6d6oki] { color: var(--b2b-warn-fg); background: var(--b2b-warn-bg); }

.vr-card__feas--notfeasible[b-a5sj6d6oki] { color: var(--b2b-err-fg); background: var(--b2b-err-bg); }

.vr-card__badges[b-a5sj6d6oki] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vr-card__type[b-a5sj6d6oki] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--b2b-on-tertiary-fixed);
    background: var(--b2b-tertiary-fixed);
    border-radius: 999px;
}

.vr-card__typeIcon[b-a5sj6d6oki] {
    font-size: 15px;
}

.vr-card__countries[b-a5sj6d6oki] {
    font-size: 13px;
    color: var(--b2b-on-surface-variant);
}

.vr-card__processing[b-a5sj6d6oki] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--b2b-on-surface);
}

.vr-card__processingIcon[b-a5sj6d6oki],
.vr-card__effortIcon[b-a5sj6d6oki] {
    font-size: 16px;
    color: var(--b2b-on-surface-variant);
}

.vr-card__meta[b-a5sj6d6oki],
.vr-card__effort[b-a5sj6d6oki] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--b2b-on-surface-variant);
}

.vr-card__pricing[b-a5sj6d6oki] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: end;
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--b2b-border);
}

.vr-card__total[b-a5sj6d6oki] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--b2b-on-surface);
    white-space: nowrap;
}

.vr-card__totalLabel[b-a5sj6d6oki] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant);
}

.vr-card__breakdown[b-a5sj6d6oki] {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--b2b-on-surface-variant);
}

.vr-card__cta[b-a5sj6d6oki] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--b2b-primary);
}

.vr-card__ctaIcon[b-a5sj6d6oki] {
    font-size: 16px;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .vr-card[b-a5sj6d6oki] {
        grid-template-columns: 1fr;
    }

    .vr-card__media[b-a5sj6d6oki] {
        max-height: 140px;
    }

    /* Price and CTA become a full-width footer band rather than a narrow
       far-side column nobody scrolls to. */
    .vr-card__pricing[b-a5sj6d6oki] {
        align-items: stretch;
        text-align: start;
        padding-inline-start: 0;
        padding-top: 12px;
        border-inline-start: none;
        border-top: 1px solid var(--b2b-border);
    }

    .vr-card__cta[b-a5sj6d6oki] {
        margin-top: 8px;
    }
}
/* /Shared/VisaCloud/VisaSearchBox.razor.rz.scp.css */
/*
    Visa search box. Every colour is a --b2b-* token: Pages/HotelCloud/
    Results.razor.css declares its own parallel palette, which silently breaks
    white-label tenant theming, and this funnel does not repeat that.

    Logical properties throughout (inline-start/end, not left/right) so the box
    mirrors correctly for the Persian and Arabic tenants.
*/

.vsb[b-jhr9v26mrv] {
    position: relative;
    background: var(--b2b-card, #fff);
    border: 1px solid var(--b2b-border, #e3e5ee);
    border-radius: 20px;
    box-shadow:
        0 24px 48px -24px rgba(6, 22, 52, 0.45),
        0 8px 20px -12px rgba(0, 102, 255, 0.25);
    padding: 16px;
}

/* Full-viewport catcher so a click anywhere closes an open popover. Sits
   below the box itself, which is why the box needs a stacking context. */
.vsb__catcher[b-jhr9v26mrv] {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.vsb__row[b-jhr9v26mrv] {
    position: relative;
    z-index: 11;
    display: grid;
    /* Nationality gets real width: a country name in a native <select> cannot
       ellipsize, so a narrow column clips the text outright. */
    grid-template-columns: 2fr 1.4fr 1.2fr auto;
    gap: 12px;
    align-items: start;
}

/* Three fixed rows — label, control, hint — shared by every field including
   the submit button's. Fields used to be flex columns bottom-aligned, so a
   label that wrapped to two lines or a hint that only some fields carried
   pushed those controls off the shared baseline. */
.vsb__field[b-jhr9v26mrv] {
    position: relative;
    display: grid;
    grid-template-rows: var(--vsb-label-h) auto var(--vsb-hint-h);
    row-gap: 6px;
    min-width: 0;
}

.vsb[b-jhr9v26mrv] {
    --vsb-label-h: 16px;
    --vsb-hint-h: 15px;
}

.vsb__label[b-jhr9v26mrv] {
    display: flex;
    align-items: center;
    gap: 6px;
    /* One line, always: the row height is fixed, so a wrap would clip rather
       than reflow. The labels are short enough that this never bites. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant);
}

.vsb__icon[b-jhr9v26mrv] {
    font-size: 16px;
}

.vsb__input[b-jhr9v26mrv],
.vsb__select[b-jhr9v26mrv],
.vsb__trigger[b-jhr9v26mrv] {
    width: 100%;
    min-width: 0;
    height: 44px; /* touch target for counter tablets, and one shared height */
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--b2b-on-surface);
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    box-sizing: border-box;
}

.vsb__trigger[b-jhr9v26mrv] {
    text-align: start;
    cursor: pointer;
}

/* The icon sits inside the field rather than beside the label, so the control
   reads as something you type into. */
.vsb__control[b-jhr9v26mrv] {
    position: relative;
    display: flex;
    align-items: center;
}

.vsb__controlIcon[b-jhr9v26mrv] {
    position: absolute;
    inset-inline-start: 12px;
    font-size: 18px;
    color: var(--b2b-outline);
    pointer-events: none;
}

.vsb__control:focus-within .vsb__controlIcon[b-jhr9v26mrv] {
    color: var(--b2b-primary);
}

.vsb__control .vsb__input[b-jhr9v26mrv] {
    padding-inline-start: 38px;
}

.vsb__control .vsb__input:not(:placeholder-shown)[b-jhr9v26mrv] {
    font-weight: 600;
}

.vsb__clear[b-jhr9v26mrv] {
    position: absolute;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--b2b-container-low);
    color: var(--b2b-on-surface-variant);
    cursor: pointer;
}

.vsb__clear:hover[b-jhr9v26mrv] {
    background: var(--b2b-container-high);
}

.vsb__clear .material-symbols-outlined[b-jhr9v26mrv] {
    font-size: 15px;
}

.vsb__input:focus[b-jhr9v26mrv],
.vsb__select:focus[b-jhr9v26mrv],
.vsb__trigger:focus[b-jhr9v26mrv] {
    border-color: var(--b2b-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.vsb__input:focus-visible[b-jhr9v26mrv],
.vsb__select:focus-visible[b-jhr9v26mrv],
.vsb__trigger:focus-visible[b-jhr9v26mrv],
.vsb__submit:focus-visible[b-jhr9v26mrv],
.vsb__option:focus-visible[b-jhr9v26mrv],
.vsb__step:focus-visible[b-jhr9v26mrv] {
    outline: 2px solid var(--b2b-primary);
    outline-offset: 2px;
}

.vsb__hint[b-jhr9v26mrv] {
    font-size: 11px;
    line-height: 15px;
    /* Two lines of hint would push this field's control out of line with the
       others, so the text stays on the row it was given. The strings are
       written to fit; the ellipsis is the safety net for a long translation. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--b2b-on-surface-variant);
}

/* The one saturated control on the box: the primary action, and nothing else. */
.vsb__submit[b-jhr9v26mrv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: var(--b2b-on-action, #fff);
    /* The search-desk CTA every search hero ends on. */
    background: linear-gradient(135deg, #ff9d1c 0%, var(--b2b-action, #fd8b00) 45%, #f07400 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 20px -10px rgba(253, 139, 0, 0.6);
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.vsb__submit:hover[b-jhr9v26mrv] {
    background: linear-gradient(135deg, var(--b2b-action, #fd8b00) 0%, var(--b2b-action-hover, #e67e00) 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(253, 139, 0, 0.75);
}

.vsb__menu[b-jhr9v26mrv],
.vsb__popover[b-jhr9v26mrv] {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    z-index: 12;
    min-width: 100%;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r-md);
    box-shadow: var(--b2b-shadow-hi);
    padding: 6px;
}

.vsb__menuState[b-jhr9v26mrv] {
    padding: 12px;
    font-size: 13px;
    color: var(--b2b-on-surface-variant);
}

/* Groups are separated by a rule rather than by whitespace alone: without it
   "Countries / United Arab Emirates / Visa types / Tourist" reads as one run
   of items with occasional bold words in it. */
.vsb__group + .vsb__group[b-jhr9v26mrv] {
    margin-block-start: 4px;
    padding-block-start: 4px;
    border-block-start: 1px solid var(--b2b-border);
}

.vsb__groupTitle[b-jhr9v26mrv] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px 6px;
    background: var(--b2b-card);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b2b-on-surface-variant);
}

.vsb__option[b-jhr9v26mrv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    text-align: start;
    color: var(--b2b-on-surface);
    background: none;
    border: none;
    border-radius: var(--b2b-r);
    cursor: pointer;
}

.vsb__option:hover[b-jhr9v26mrv],
.vsb__option[aria-selected="true"][b-jhr9v26mrv] {
    background: var(--b2b-container-low);
}

.vsb__option[aria-selected="true"][b-jhr9v26mrv] {
    font-weight: 600;
}

.vsb__optionIcon[b-jhr9v26mrv] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    font-size: 17px !important;
    color: var(--b2b-on-surface-variant);
}

.vsb__option:hover .vsb__optionIcon[b-jhr9v26mrv] {
    background: var(--b2b-tertiary-fixed);
    color: var(--b2b-on-tertiary-fixed);
}

.vsb__optionLabel[b-jhr9v26mrv] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Live count per suggestion: the facets already exclude anything unpriced in
   this zone, so a suggestion can never lead to an empty result set. */
.vsb__optionCount[b-jhr9v26mrv] {
    flex: none;
    min-width: 24px;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--b2b-container-low);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--b2b-on-surface-variant);
}

.vsb__option:hover .vsb__optionCount[b-jhr9v26mrv] {
    background: var(--b2b-container);
}

.vsb__popover[b-jhr9v26mrv] {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: 280px;
}

.vsb__stepper[b-jhr9v26mrv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px;
}

.vsb__stepperLabel[b-jhr9v26mrv] {
    font-size: 14px;
}

.vsb__stepperControls[b-jhr9v26mrv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vsb__step[b-jhr9v26mrv] {
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    color: var(--b2b-on-surface);
    background: var(--b2b-container-low);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-r);
    cursor: pointer;
}

.vsb__step:disabled[b-jhr9v26mrv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.vsb__stepperValue[b-jhr9v26mrv] {
    min-width: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.vsb__popoverHint[b-jhr9v26mrv] {
    margin: 8px 10px 2px;
    font-size: 11px;
    color: var(--b2b-on-surface-variant);
}

.vsb__error[b-jhr9v26mrv] {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--b2b-err-fg);
    background: var(--b2b-err-bg);
    border-radius: var(--b2b-r);
}

/* Non-blocking: the catalog failed to load, but the box still works and the
   agent can retry without losing what they have typed. */
.vsb__notice[b-jhr9v26mrv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--b2b-warn-fg);
    background: var(--b2b-warn-bg);
    border-radius: var(--b2b-r);
}

.vsb__notice .material-symbols-outlined[b-jhr9v26mrv] {
    font-size: 18px;
}

.vsb__retry[b-jhr9v26mrv] {
    margin-inline-start: auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: inherit;
    background: none;
    border: 1px solid currentColor;
    border-radius: var(--b2b-r);
    cursor: pointer;
}

/* Only the four documented breakpoints — no ad-hoc widths. */
@media (max-width: 1024px) {
    .vsb__row[b-jhr9v26mrv] {
        grid-template-columns: 1fr 1fr;
    }

    .vsb__field--wide[b-jhr9v26mrv] {
        grid-column: 1 / -1;
    }

    .vsb__field--action[b-jhr9v26mrv] {
        grid-column: 1 / -1;
    }

    /* Stacked, the button no longer needs a phantom label to hold its
       baseline — reclaim the rows so it does not sit in a 31px well. */
    .vsb__field--action[b-jhr9v26mrv] {
        grid-template-rows: auto;
    }

    .vsb__field--action .vsb__label[b-jhr9v26mrv],
    .vsb__field--action .vsb__hint[b-jhr9v26mrv] {
        display: none;
    }
}

@media (max-width: 640px) {
    .vsb__row[b-jhr9v26mrv] {
        grid-template-columns: 1fr;
    }

    .vsb__popover[b-jhr9v26mrv] {
        inset-inline: 0;
        min-width: 0;
    }
}
/* /Shared/VisaCloud/VisaSectionsRenderer.razor.rz.scp.css */
.vsr__heading[b-dop2110fg6] {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--b2b-on-surface);
}

.vsr__paragraph[b-dop2110fg6] {
    margin: 0 0 12px;
    font-size: 14px;
    /* 1.75 rather than the usual 1.5: Persian ascenders and descenders collide
       at tighter leading, and this page is read in fa as often as in en. */
    line-height: 1.75;
    color: var(--b2b-on-surface-variant);
}

.vsr__list[b-dop2110fg6] {
    margin: 0 0 12px;
    padding-inline-start: 20px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--b2b-on-surface-variant);
}

.vsr__note[b-dop2110fg6] {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-inline-start: 3px solid var(--b2b-primary);
    border-radius: var(--b2b-r);
    background: var(--b2b-container-low);
    font-size: 13px;
    line-height: 1.7;
    color: var(--b2b-on-surface);
}

.vsr__figure[b-dop2110fg6] { margin: 0 0 16px; }

.vsr__figure img[b-dop2110fg6] {
    width: 100%;
    border-radius: var(--b2b-r-md);
    display: block;
}

.vsr__figure figcaption[b-dop2110fg6] {
    margin-block-start: 6px;
    font-size: 12px;
    color: var(--b2b-on-surface-variant);
}