/* Reservation wizard — page-specific extras on top of the shared fiz-*
   design system (fields, buttons, cards, steppers, choice cards already
   come from ins_web/ins_temps/faiz_template/css). */

.fiz-reservation__panel {
    padding: var(--fiz-space-8);
}

.fiz-reservation__main--full {
    grid-column: 1 / -1 !important;
}

.fiz-reservation__aside > .fiz-card {
    margin-bottom: var(--fiz-space-4);
}

/* Icon sizing — the shared CSS only sizes SVGs inside .fiz-step__marker;
   these are the other spots this page drops an inline currentColor SVG. */
.fiz-choice-card__icon svg,
.fiz-field__icon svg,
.fiz-flight-card__icon-btn svg,
.fiz-info-check svg {
    width: 25px;
    height: 25px;
}

.fiz-field__icon--calendar {
    cursor: pointer;
    pointer-events: auto;
}

.fiz-step {
    cursor: pointer;
}

.res-stat {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    padding: var(--fiz-space-3) var(--fiz-space-4);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-md);
    font-size: var(--fiz-fs-b5);
    line-height: 1.2;
}

.res-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
       width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--fiz-radius-circle);
    background: var(--fiz-color-primary-main);
    color: var(--fiz-color-primary-white);
}


.res-stat__icon svg{
        width: 24px;
}

.res-stat__num {
    font-size: 20px;
}
.res-guest-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--fiz-border-default);
    font-size: var(--fiz-fs-b5);
}
.res-guest-table th {
    background: var(--fiz-color-primary-bg-light);
    font-weight: var(--fiz-fw-medium);
    text-align: left;
}
.res-guest-table th,
.res-guest-table td {
    padding: var(--fiz-space-3) var(--fiz-space-4);
    border-bottom: 1px solid var(--fiz-border-default);
}
.res-notice {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    margin-bottom: var(--fiz-space-4);
    padding: var(--fiz-space-3) var(--fiz-space-4);
    background: var(--fiz-color-primary-bg-light);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-md);
    font-size: var(--fiz-fs-b6);
}
.res-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1c1c1c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
}

.fiz-info-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: var(--fiz-radius-circle);
    background: var(--fiz-color-primary-main);
    color: var(--fiz-color-primary-white);
}

.fiz-reservation__review-section {
    padding-bottom: var(--fiz-space-6);
    margin-bottom: var(--fiz-space-6);
    border-bottom: 1px solid var(--fiz-border-default);
}
.fiz-reservation__review-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.fiz-reservation__review-row {
    padding-block: var(--fiz-space-2);
}
.fiz-reservation__review-row + .fiz-reservation__review-row {
    border-top: 1px solid var(--fiz-border-default);
}



.fiz-res-container {
    max-width: 1024px;
    padding: 0;
}

/* Arrival/departure date-range picker: the shared
   faiz_template/css/fiz-daterange.css (loaded by fiz-main.css). Step 1
   lays its three fields (guest count, arrival, departure) out as ins-col-4
   columns, which the shared 16px gap would wrap onto two lines; two classes
   so this wins over the shared rule, which loads after this file. */
.fiz-daterange.ins-flex {
    gap: 0;
}

strong, b {

    color: inherit;
}

/* Reservations panel — the wizard's landing page (see
   app_reservation_tour_panel.py): a status card per upcoming reservation
   (arrival date today or later) + a History table for past ones, both
   linking into the wizard via ?action=edit&id=.

   Values follow the Figma "Step-1" frame (1143:14000). Selectors that
   override a shared fiz-* rule are doubled up (.fiz-x.res-y) so they win
   regardless of the order the app stylesheet lands in <head>. */

/* Card shadow shared by the panel and the wizard step windows. */
.fiz-res-container {
    --res-shadow-card: 0 8px 8px -4px rgba(41, 22, 29, 0.12);
}

.fiz-section.res-panel-section {
    padding-block: var(--fiz-space-8);
}

/* Window: the header rule runs edge to edge, so the padding lives on the
   header and body rather than on the card. */
.fiz-card.res-panel {
    max-width: 1016px;
    margin-inline: auto;
    padding: 0;
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-lg);
    box-shadow: var(--res-shadow-card);
}

.res-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-6);
    border-bottom: 1px solid var(--fiz-border-default);
}

/* Sans, not the serif .fiz-h* family — the design sets this title in Geist. */
.res-panel-head__title,
.res-step-card__title {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-h4);
    line-height: var(--fiz-lh-h4);
    font-weight: var(--fiz-fw-bold);
    letter-spacing: -0.01em;
    color: var(--fiz-text-heading);
}

.fiz-btn-tertiary.res-panel-head__link,
.fiz-btn-tertiary.res-step-card__link {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: 20px;
    letter-spacing: -0.01em;
}

/* .fiz-btn forces 48px / 12px 24px with !important, so .fiz-btn-lg never
   takes effect — answer in kind to reach the design's 40px pill. */
.fiz-btn.res-panel-head__cta,
.fiz-btn.res-btn {
    height: 40px !important;
    padding: 10px var(--fiz-space-4) !important;
    border-radius: var(--fiz-radius-pill);
    font-weight: var(--fiz-fw-bold);
    line-height: 20px;
}

.res-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-6);
    padding: var(--fiz-space-6);
}

/* ── Upcoming reservation cards ─────────────────────────────────────── */

.res-reservation-list {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
}

.fiz-card.res-reservation-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fiz-space-3);
    padding: var(--fiz-space-3) var(--fiz-space-4);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-md);
    box-shadow: var(--res-shadow-card);
}

/* The icon+content is its own <a> (not the whole card) so the kebab's
   dropdown can sit beside it without a click in the menu also navigating. */
.res-reservation-card__link {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-4);
    flex: 1 1 260px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.fiz-card-icon.res-reservation-card__icon {
    border-radius: var(--fiz-radius-sm);
    color: var(--fiz-color-primary-main);
}

.res-reservation-card__body {
    min-width: 0;
}

.res-reservation-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fiz-space-2);
}

.res-reservation-card__sep {
    width: 1px;
    height: 16px;
    background: var(--fiz-border-default);
}

.res-reservation-card__actions {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    flex-shrink: 0;
    margin-left: auto;
}

/* Status chip — colours come from the shared .fiz-tag--success/--warning/
   --danger tints; the design adds a same-hue border and a squarer shape. */
/* Figma strokes the chip inside its 28px box — take the 1px border out of
   the 4px/12px padding so the outer size matches. */
.fiz-tag.res-tag {
    padding: 3px 11px;
    border: 1px solid currentColor;
    border-radius: var(--fiz-radius-sm);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.res-card-menu {
    position: relative;
}

.res-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    background: var(--fiz-color-primary-bg-header);
    border-radius: var(--fiz-radius-circle);
    border: 1px solid var(--fiz-color-primary-border-header);
    color: var(--fiz-color-primary-main);
    line-height: 1;
    cursor: pointer;
}

.res-kebab svg {
    width: 20px;
    height: 20px;
}

.res-kebab[aria-expanded="true"] {
    background: var(--fiz-color-primary-bg-light);
}

/* Dropdown — Figma "menu" frame (1143:15379): flush 44px rows split by
   hairlines, no inner padding, so the panel clips the row hovers to its
   corners. */
.res-card-menu__panel {
    position: absolute;
    top: calc(100% + var(--fiz-space-2));
    right: 0;
    z-index: var(--fiz-z-dropdown);
    display: flex;
    flex-direction: column;
    min-width: 172px;
    padding: 0;
    overflow: hidden;
    background: var(--fiz-surface-card);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-sm);
    box-shadow: 0 6px 12px -3px rgba(41, 22, 29, 0.12);
}

/* script.js toggles the `hidden` attribute; the display:flex above would
   otherwise beat the UA's [hidden] rule and leave every menu open. */
.res-card-menu__panel[hidden] {
    display: none;
}

/* The items are an <a> and a <button>; ins.css styles bare buttons, so
   every box property is set explicitly. */
.res-card-menu__item {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-2);
    width: 100%;
    margin: 0;
    padding: var(--fiz-space-3);
    border: none;
    border-radius: 0;
    background: none;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.res-card-menu__item + .res-card-menu__item {
    border-top: 1px solid var(--fiz-border-default);
}

.res-card-menu__item:hover {
    background: var(--fiz-color-primary-bg-light);
}

/* 16px glyph centred in the design's 20px icon slot. */
.res-card-menu__item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px;
}

.res-card-menu__item--danger {
    color: var(--fiz-color-danger-main);
}

.res-panel-empty {
    padding: var(--fiz-space-6);
    text-align: center;
}

/* ── History ────────────────────────────────────────────────────────── */

.res-history {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-3);
}

.res-history__title {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-bold);
    letter-spacing: -0.01em;
    color: var(--fiz-text-heading);
}

/* Fixed layout so the ID column stays narrow and the other three share
   the rest evenly, as drawn. */
.fiz-table.res-history-table {
    table-layout: fixed;
    min-width: 720px;
}

.fiz-table.res-history-table thead th,
.fiz-table.res-history-table tbody td {
    padding: 14px var(--fiz-space-3);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
}

.fiz-table.res-history-table thead th:first-child {
    width: 12%;
}

/* The whole row opens the View page: the ID cell's link is stretched over
   the row (a <tr> can't carry an href), so it stays a real link — middle
   click, keyboard focus, "open in new tab". */
.res-history-row {
    position: relative;
}

.res-history-row__link {
    color: inherit;
    text-decoration: none;
}

.res-history-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.res-history-row__link:focus-visible {
    outline: none;
}

.res-history-row:has(.res-history-row__link:focus-visible) {
    outline: 2px solid var(--fiz-color-primary-main);
    outline-offset: -2px;
}

/* ── Wizard chrome — stepper (every step) ───────────────────────────────
   Figma "stepper-master" (1143:12451). Overrides the shared fiz-steppers.css
   here rather than there; the stepper only appears in this app today. */

.fiz-reservation > .fiz-section {
    padding-top: var(--fiz-space-10);
    padding-bottom: var(--fiz-space-6);
}

.fiz-reservation .fiz-stepper {
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-4);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-lg);
    box-shadow: 0 4px 4px -2px rgba(41, 22, 29, 0.08);
}

.fiz-reservation .fiz-stepper__back {
    gap: var(--fiz-space-1);
    padding-bottom: var(--fiz-space-3);
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-heading);
    text-decoration: none;
}

.fiz-reservation .fiz-stepper__back svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.fiz-reservation .fiz-stepper__steps {
    gap: var(--fiz-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Connector lines stretch to fill the row, as drawn: each step but the
   last grows, and its ::after rule takes up the slack. */
.fiz-reservation .fiz-step {
    gap: var(--fiz-space-2);
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-heading);
}

.fiz-reservation .fiz-step:not(:last-child) {
    flex: 1 1 auto;
}

.fiz-reservation .fiz-step:not(:last-child)::after {
    flex: 1 1 24px;
    min-width: 24px;
    width: auto;
    margin-left: var(--fiz-space-2);
    background: rgba(41, 22, 29, 0.1);
}

.fiz-reservation .fiz-step__link {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-2);
    color: inherit;
    text-decoration: none;
}

.fiz-reservation .fiz-step__marker svg {
    width: 27px;
    height: 27px;
}

.fiz-reservation .fiz-step.fiz-is-current {
    font-size: 16px;
    font-weight: var(--fiz-fw-semibold);
}

/* ── Step body layout ───────────────────────────────────────────────────
   Defaults reproduce the previous inline styles, so steps not redesigned
   yet render as before; res-step-body--N opts a step into the design. */

.res-step-main {
    flex: 2 1 480px;
    min-width: 320px;
    overflow: visible;
}

.res-step-aside {
    flex: 1 1 300px;
    min-width: 280px;
}

.fiz-reservation__body.res-step-body--1,
.fiz-reservation__body.res-step-body--2,
.fiz-reservation__body.res-step-body--4 {
    align-items: flex-start;
    gap: var(--fiz-space-4);
    margin-bottom: var(--fiz-space-20);
}

.res-step-body--1 > .res-step-main,
.res-step-body--2 > .res-step-main,
.res-step-body--4 > .res-step-main {
    flex: 1 1 0;
    min-width: 0;
}

.res-step-body--1 > .res-step-aside,
.res-step-body--2 > .res-step-aside,
.res-step-body--4 > .res-step-aside {
    flex: 0 0 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-3);
}

@media (max-width: 900px) {
    .res-step-body--1 > .res-step-main,
    .res-step-body--1 > .res-step-aside,
    .res-step-body--2 > .res-step-main,
    .res-step-body--2 > .res-step-aside,
    .res-step-body--4 > .res-step-main,
    .res-step-body--4 > .res-step-aside {
        flex-basis: 100%;
    }
}

/* ── Step window — Figma "step-window": header / body / CTA bands ────── */

.fiz-card.res-step-card {
    padding: 0;
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-lg);
    box-shadow: var(--res-shadow-card);
}

.res-step-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-1);
    padding: var(--fiz-space-6);
    border-bottom: 1px solid var(--fiz-border-default);
}

.res-step-card__desc {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-regular);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
}

.res-step-card__body {
    padding: var(--fiz-space-6);
}

/* "Why can't I continue?" - the site's note card (fiz-note.css) on its
   own row above the buttons; only the placement is special here. */
.res-step-hint {
    flex: 1 0 100%;
    margin-bottom: 0;
    text-align: start;
}

.res-step-hint[hidden] {
    display: none;
}

/* The lookup's message is the note card; it only needs its spacing. */
.res-flight-lookup__msg {
    margin-bottom: 0;
}

.res-flight-lookup__msg[hidden] {
    display: none;
}

/* Trouble with the ITS numbers just typed sits under the guest field. */
.res-guests__msg {
    margin-top: var(--fiz-space-3);
    margin-bottom: 0;
}

.res-guests__msg[hidden] {
    display: none;
}

.res-step-card__foot {
    display: flex;
    flex-wrap: wrap;            /* lets .res-step-hint take a row of its own */
    justify-content: flex-end;
    gap: var(--fiz-space-2);
    padding: var(--fiz-space-4);
    border-top: 1px solid var(--fiz-border-default);
}

/* Fields — Figma "Input-master": 16px semibold label, 48px control,
   14px value, 20px orange calendar glyph. */
.res-step-card .fiz-field {
    gap: var(--fiz-space-2);
}

.res-step-card .fiz-field__label {
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

.res-step-card .fiz-input {
    height: 48px;
    margin: 0;
    padding: 0 var(--fiz-space-10) 0 var(--fiz-space-3);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-sm);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-step-card .fiz-field__icon {
    right: var(--fiz-space-3);
    color: var(--fiz-color-primary-main);
}

.res-step-card .fiz-field__icon svg {
    width: 20px;
    height: 20px;
}

/* ── Sidebar info card — Figma "info" ───────────────────────────────── */

.fiz-card.res-info-card {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-4);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-lg);
    box-shadow: none;
}

.res-info-card__title {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--fiz-fw-semibold);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
}

/* ins.css styles bare ul/li/p, so every box property is reset here. */
.res-info-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-info-list__item {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-2);
    margin: 0;
    padding: 0;
}

.res-info-list__item + .res-info-list__item {
    margin-top: var(--fiz-space-3);
    padding-top: var(--fiz-space-3);
    border-top: 1px solid var(--fiz-border-default);
}

.res-info-list__icon {
    display: inline-flex;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--fiz-color-primary-main);
}

.res-info-list__icon svg {
    width: 20px;
    height: 20px;
}

.res-info-list__text {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-info-list__text strong {
    font-weight: var(--fiz-fw-semibold);
    color: inherit;
}

/* Plain variant — no rules between rows (Step 2's "Important information"). */
.res-info-list--plain .res-info-list__item + .res-info-list__item {
    padding-top: 0;
    border-top: 0;
}

/* ── Step 2 "Arrival & departure" — Figma section "Step - 5" (1143:12337) ─ */

/* Anything this step toggles with the `hidden` attribute must really hide —
   several of these blocks set their own display. */
.res-step-card [hidden] {
    display: none !important;
}

.res-step-card__section {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-3);
}

.res-step-card__section--divided {
    border-top: 1px solid var(--fiz-border-default);
}

.res-step-card__section-title {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

.res-step-card__foot--split {
    align-items: center;
}

.res-step-card__foot--split .res-step-card__link {
    margin-right: auto;
}

.fiz-btn.res-btn.fiz-btn-secondary {
    padding-inline: var(--fiz-space-6) !important;
}

/* Choice cards — "By Flight" / "By Road" */
.res-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fiz-space-4);
}

.res-step-card .fiz-choice-card {
    align-items: center;
    gap: var(--fiz-space-4);
    min-height: 0;
    padding: var(--fiz-space-3) var(--fiz-space-4) var(--fiz-space-3) var(--fiz-space-3);
    border-radius: var(--fiz-radius-sm);
    background: var(--fiz-surface-card);
}

.res-step-card .fiz-choice-card.fiz-is-selected {
    background: var(--fiz-color-primary-bg-header);
}

.res-step-card .fiz-choice-card__icon svg {
    width: 27px;
    height: 27px;
}

.res-step-card .fiz-choice-card__title {
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

.res-step-card .fiz-choice-card__desc {
    margin-top: var(--fiz-space-1);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

/* The block under the choice: a rule, then the flight lookup / card, or
   the road time (which sits directly under the cards, no rule). */
.res-leg-flight {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-6);
    margin-top: var(--fiz-space-3);
    padding-top: var(--fiz-space-6);
    border-top: 1px solid var(--fiz-border-default);
}

.res-leg-road {
    margin-top: var(--fiz-space-3);
}

.res-leg-road .fiz-field {
    width: 220px;
}

/* Early check-in note under the By Road arrival time (fiz-note card). */
.res-road-early .fiz-note {
    margin: var(--fiz-space-3) 0 0;
}

.res-flight-lookup {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-2);
}

.res-flight-lookup__row {
    display: flex;
    align-items: flex-end;
    gap: var(--fiz-space-2);
}

.res-flight-lookup__row .fiz-field {
    flex: 1 1 auto;
    min-width: 0;
}

.res-flight-lookup__row .res-btn {
    flex-shrink: 0;
    margin-bottom: var(--fiz-space-1);
}

.res-flight-lookup__msg {
    margin: 0;
    font-size: var(--fiz-fs-b6);
    color: var(--fiz-color-danger-main);
}

.res-flight-manual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fiz-space-4);
}

/* Native time picker — the clock glyph opens it, so hide Chrome's own. */
.res-step-card input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

/* Flight summary card — Figma "flight-card" */
.fiz-flight-card.res-flight-card {
    display: block;
    padding: var(--fiz-space-3) var(--fiz-space-4);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-lg);
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.06);
    overflow: hidden;   /* the foot strip's corners follow the card's */
}

/* Early check-in strip (fiz-misc.css .fiz-flight-card__note): 16px under
   the row, then out over the card's side and bottom padding. */
.res-flight-card .fiz-flight-card__note {
    margin: var(--fiz-space-4) calc(-1 * var(--fiz-space-4)) calc(-1 * var(--fiz-space-3));
}

.res-flight-card__row {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
}

.res-flight-card__info {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    flex: 1 1 auto;
    min-width: 0;
}

.res-flight-card__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.res-flight-card__title {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

.res-flight-card__sub {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-subtle);
}

.res-flight-card__sep {
    align-self: stretch;
    width: 1px;
    background: var(--fiz-border-default);
}

.res-flight-card .fiz-flight-card__head-actions {
    gap: var(--fiz-space-3);
}

.res-flight-card .fiz-flight-card__icon-btn {
    width: 28px;
    height: 28px;
    padding: 4px;
    margin: 0;
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-xs);
    background: var(--fiz-color-primary-bg-header);
    color: var(--fiz-color-primary-main);
    cursor: pointer;
}

.res-flight-card .fiz-flight-card__icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Uploaded ticket chip; wireUpload() toggles the name and its × — the
   chip itself follows them. */
.res-flight-card .res-ticket {
    gap: var(--fiz-space-1);
    height: 28px;
    padding: 6px;
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-xs);
    background: var(--fiz-surface-card);
    color: var(--fiz-color-primary-main);
}

.res-flight-card .res-ticket:has(> .res-ticket__name[hidden]) {
    display: none;
}

.res-ticket svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.res-ticket__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
}

.res-ticket__sep {
    width: 1px;
    height: 12px;
    background: var(--fiz-border-default);
}

.res-ticket__remove {
    display: inline-flex;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--fiz-color-primary-main);
    cursor: pointer;
}

@media (max-width: 576px) {
    .res-choice-grid,
    .res-flight-manual {
        grid-template-columns: 1fr;
    }
    .res-flight-card__row {
        flex-wrap: wrap;
    }
}

/* ── Step 3 "Members info" — Figma section "Step - 6" (1650:22267) ───────
   Full width (no sidebar). The step window, head, footer, fields and
   buttons are the shared res-step-card pieces above. */

.fiz-reservation__body.res-step-body--3 {
    margin-bottom: var(--fiz-space-20);
}

.res-step-card__body.res-guests {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-6);
    padding: var(--fiz-space-4) var(--fiz-space-6) 0;
}

/* ITS row: the input grows to several lines (Figma 1650:22289), and the
   button stays centred on the input box — not on the row, which also
   holds the label and hint. Flattening the field into the row's grid
   puts label / control / hint on their own rows, so the button can share
   the control's row only. */
.res-guests .res-flight-lookup__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--fiz-space-2);
}

.res-guests .res-flight-lookup__row .fiz-field {
    display: contents;
}

.res-guests .res-flight-lookup__row .fiz-field__label   { grid-column: 1; grid-row: 1; }
.res-guests .res-flight-lookup__row .fiz-field__control { grid-column: 1; grid-row: 2; }
.res-guests .res-flight-lookup__row .fiz-field__hint    { grid-column: 1; grid-row: 3; }

.res-guests .res-flight-lookup__row .res-btn {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin: 0;
}

/* 13px + the 1px border = Figma's 14px padding on a 20px line → 48px. */
.res-step-card .fiz-input-grow {
    height: auto;
    min-height: 48px;
    padding-block: 13px;
}

.res-step-card .fiz-field__hint {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-guests__details {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
    padding-top: var(--fiz-space-6);
    border-top: 1px solid var(--fiz-border-default);
}

/* Counts — Guest details (3 cards) beside Khidmat guzar (1 split card) */
.res-guests__stats {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--fiz-space-4);
}

.res-guests__group {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-2);
    min-width: 0;
}

.res-guests__group-title {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-semibold);
    text-transform: uppercase;
    color: var(--fiz-text-body);
}

.res-guests__group-row {
    display: flex;
    gap: var(--fiz-space-4);
}

.res-guests__group-row > .res-stat {
    flex: 1 1 0;
}

.res-guests .res-stat {
    gap: var(--fiz-space-4);
    min-width: 0;
    padding: 10px var(--fiz-space-4);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-sm);
    background: var(--fiz-surface-card);
}

.res-guests .res-stat__icon svg {
    width: 24px;
    height: 24px;
}

.res-stat__text {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-1);
    flex: 1 1 0;
    min-width: 0;
}

.res-guests .res-stat__num {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-bold);
    color: var(--fiz-text-heading);
}

.res-stat__label {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-stat__sep {
    align-self: stretch;
    width: 1px;
    background: var(--fiz-border-default);
}

/* "Remove guest" — only while rows are ticked (script.js toggles it) */
.res-guests__table-head {
    display: flex;
    justify-content: flex-end;
}

.res-guests__table-head:has(> [hidden]) {
    display: none;
}

.fiz-btn.res-btn.res-btn--danger {
    height: 32px !important;
    padding: 6px var(--fiz-space-4) !important;
    border-color: var(--fiz-color-danger-main);
    color: var(--fiz-color-danger-main);
}

/* Guests table — Figma rows: 36px head, 40px body, 8/12 cell padding */
.fiz-table.res-guest-table {
    border: 0;
    border-collapse: collapse;
}

.fiz-table.res-guest-table thead th,
.fiz-table.res-guest-table tbody td {
    padding: var(--fiz-space-2) var(--fiz-space-3);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
    vertical-align: middle;
}

.fiz-table.res-guest-table thead th {
    background: var(--fiz-color-primary-bg-header);
}

.fiz-table.res-guest-table .res-guest-table__check {
    width: 48px;
    padding: 6px var(--fiz-space-3);
}

.fiz-table.res-guest-table .res-guest-table__contact {
    width: 204px;
    text-align: center;
}

.fiz-table.res-guest-table tbody tr:last-child td {
    border-bottom: 0;
}

.res-guest-table__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fiz-space-2);
}

/* The contact-person tick sits with the name; the Khidmat Guzar badge
   still gets pushed to the far side by .res-guest-table__name. */
.res-guest-table__who {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-2);
    min-width: 0;
}

.res-guest-table__mark {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--fiz-color-primary-main);
}

.res-guest-table__mark svg {
    width: 14px;
    height: 14px;
}

/* Contact person's row — number + email under the chosen guest */
.fiz-table.res-guest-table tr.res-contact-row td {
    padding: var(--fiz-space-3);
    background: var(--fiz-color-primary-bg-header);
}

.res-contact-row__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 307px));
    gap: var(--fiz-space-4);
}

.res-step-card .fiz-input:disabled {
    background: var(--fiz-color-grey-divider);
    border-color: var(--fiz-color-grey-divider);
}

.res-contact-row .fiz-input:disabled ~ .fiz-field__icon {
    color: var(--fiz-text-body);
}

/* Checkbox / radio — Figma "Checkbox" (17px, 4px radius) and "Radio" */
.res-check,
.res-radio {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--fiz-text-body);
    background: var(--fiz-surface-card);
    cursor: pointer;
    vertical-align: middle;
}

.res-check {
    border-radius: var(--fiz-radius-xs);
}

.res-check:checked {
    border-color: var(--fiz-color-primary-main);
    background: var(--fiz-color-primary-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.res-radio {
    border-radius: var(--fiz-radius-circle);
}

.res-radio:checked {
    border: 1.5px solid var(--fiz-color-primary-main);
    background: radial-gradient(circle, var(--fiz-color-primary-main) 0 4px, var(--fiz-surface-card) 4.5px);
}

/* Remarks + English toilet */
.res-step-card__body.res-guests__extra {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
    margin-top: var(--fiz-space-6);
    padding: 0 var(--fiz-space-6) var(--fiz-space-6);
}

.res-guests__extra > .fiz-field,
.res-guests__extra > .res-check-label {
    padding-top: var(--fiz-space-4);
    border-top: 1px solid var(--fiz-border-default);
}

/* Members info placeholders are grey-900 at 80% (Figma layer opacity). */
.res-guests .fiz-input::placeholder,
.res-guests__extra .fiz-textarea::placeholder {
    color: rgba(41, 22, 29, 0.8);
}

.res-step-card .fiz-textarea {
    width: 100%;
    min-height: 90px;
    margin: 0;
    padding: 14px var(--fiz-space-3);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-sm);
    background: var(--fiz-surface-card);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
    resize: vertical;
}

.res-check-label {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-2);
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
    cursor: pointer;
}

.res-guests__extra .res-notice,
.res-it .res-notice,
.res-pkg .res-notice {
    align-items: center;
    gap: var(--fiz-space-2);
    margin: 0;
    padding: 10px var(--fiz-space-2);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-sm);
    background: var(--fiz-color-primary-bg-header);
}

.res-guests__extra .res-notice__icon,
.res-it .res-notice__icon,
.res-pkg .res-notice__icon {
    width: 18px;
    height: 18px;
    background: none;
    color: var(--fiz-text-body);
}

.res-guests__extra .res-notice__icon svg,
.res-it .res-notice__icon svg,
.res-pkg .res-notice__icon svg {
    width: 18px;
    height: 18px;
}

.res-notice__text {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-regular);
    letter-spacing: -0.01em;
    color: var(--fiz-text-body);
}

/* Text with a link under it (Step 3's English-toilet notice): the column
   beside the info icon, then "Learn more" with the toilet-chair icon. */
.res-notice__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fiz-space-2);
    flex: 1;
    min-width: 0;
}

.res-notice__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-color-primary-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.res-notice__link:hover {
    color: var(--fiz-color-primary-dark);
}

.res-notice__link-icon {
    width: 10px;
    height: 14px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .res-guests__stats {
        grid-template-columns: 1fr;
    }
    .res-guests__group-row {
        flex-wrap: wrap;
    }
    .res-contact-row__fields {
        grid-template-columns: 1fr;
    }
}

/* ── Step 4 "Review reservation" — Figma section "Step - 4" (1143:12006) ─ */

.fiz-reservation__top {
    margin-bottom: var(--fiz-space-6);
}

/* Checkin | Checkout | Members bar above the step body */
.res-summary {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-3) var(--fiz-space-4);
    border-radius: var(--fiz-radius-md);
    background: var(--fiz-color-primary-border-header);
    box-shadow: 0 4px 4px -2px rgba(41, 22, 29, 0.08);
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-heading);
}

.res-summary__item {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* The review step's longer dates ("01 Nov 2026 at 2:00 PM") don't always
   fit one line: the items wrap instead of running into each other. */
.res-summary {
    flex-wrap: wrap;
    row-gap: var(--fiz-space-2);
}

.res-summary__item b {
    font-weight: var(--fiz-fw-semibold);
    color: inherit;
}

.res-summary__sep {
    flex-shrink: 0;
    width: 1px;
    height: 20px;
    background: var(--fiz-color-primary-main);
}

.res-review,
.res-review__packages {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
}

/* Package cards — collapsed: head + description; selected: + check items
   and the package's options under a rule. */
.fiz-card.res-pkg {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-2);
    padding: var(--fiz-space-3) var(--fiz-space-4);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-md);
    box-shadow: var(--res-shadow-card);
}

.fiz-card.res-pkg--selected {
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-4) var(--fiz-space-6);
}

.res-pkg__head {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-2);
    margin: 0;
    cursor: pointer;
}

.res-pkg--selected .res-pkg__head {
    padding-bottom: var(--fiz-space-3);
    border-bottom: 1px solid var(--fiz-border-default);
}

.res-pkg__title-row {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-4);
}

.res-pkg__name {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    flex: 1 1 auto;
    min-width: 0;
}

.res-pkg__title {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
}

.res-pkg__prices {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-4);
    flex-shrink: 0;
}

.res-pkg__price {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
    white-space: nowrap;
}

.res-pkg__price small {
    margin-left: var(--fiz-space-1);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-subtle);
}

.res-pkg__price-sep {
    width: 1px;
    height: 28px;
    background: var(--fiz-border-default);
}

.res-pkg__des {
    padding-left: 28px;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-heading);
}

.res-pkg__body {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
}

.res-pkg__items {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-pkg__item {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-pkg__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
    border-radius: var(--fiz-radius-circle);
    background: var(--fiz-color-primary-bg-header);
    color: var(--fiz-color-primary-main);
}

.res-pkg__item-icon svg {
    width: 14px;
    height: 14px;
}

.res-pkg__options {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-2);
}

/* The head already ends in a rule, so the options only take their own
   when check items sit between the two. */
.res-pkg__items + .res-pkg__options {
    padding-top: var(--fiz-space-3);
    border-top: 1px solid var(--fiz-border-default);
}

.res-pkg__options:empty {
    display: none;
}

/* Every package card with a list is drawn open (both show their ✓ / ✗
   items and note); only the selected one also has its options. */
.fiz-card.res-pkg--open {
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-4) var(--fiz-space-6);
}

.res-pkg--open .res-pkg__head {
    padding-bottom: var(--fiz-space-3);
    border-bottom: 1px solid var(--fiz-border-default);
}

/* "(Recommended)" / "(Set Routes)" after the title */
.res-pkg__tag {
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-subtle);
}

/* Not included: red cross on a red tint */
.res-pkg__item-icon--no {
    background: var(--fiz-color-danger-bg);
    color: var(--fiz-color-danger-main);
}

.res-option {
    display: flex;
    align-items: flex-start;
    gap: var(--fiz-space-2);
    margin: 0;
    cursor: pointer;
}

.res-option .res-check {
    margin-top: 3px;
}

.res-option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.res-option__title {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

.res-option__des {
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.fiz-card.res-pkg--empty {
    padding: var(--fiz-space-4) var(--fiz-space-6);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    color: var(--fiz-text-body);
}

/* Tentative itinerary — a date chip per day on a faint rail; program days
   carry their visits on a white card with an orange guide line. */
.res-step-card__body.res-it {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.res-it__days {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.res-it__days::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    width: 1px;
    /* 6px dash / 6px gap */
    background: repeating-linear-gradient(to bottom, var(--fiz-color-primary-border-header) 0 6px, transparent 6px 12px);
}

.res-it__day {
    display: flex;
    align-items: flex-start;
    gap: var(--fiz-space-4);
}

.res-it__date {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 0 0 57px;
    overflow: hidden;
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-xs);
    background: var(--fiz-surface-card);
    font-family: var(--fiz-font-sans);
    text-align: center;
}

.res-it__year {
    padding: 4px;
    background: var(--fiz-color-primary-main);
    font-size: 10px;
    line-height: 12px;
    font-weight: var(--fiz-fw-medium);
    color: var(--fiz-color-primary-white);
}

.res-it__dm {
    display: flex;
    flex-direction: column;
    padding: 4px;
    background: var(--fiz-color-primary-bg-header);
}

.res-it__dm b {
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
}

.res-it__dm small {
    font-size: 10px;
    line-height: 12px;
    color: var(--fiz-text-body);
}

.res-it__line {
    align-self: center;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-subtle);
}

.res-it__line b {
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

.res-it__card {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--fiz-space-3);
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-md);
    background: var(--fiz-color-primary-bg-header);
}

.res-it__visits {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-3);
    margin: 0;
    padding: var(--fiz-space-3);
    list-style: none;
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-sm);
    background: var(--fiz-surface-card);
}

/* Guide line from the first dot's centre to the last one's. */
.res-it__visits::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    width: 1px;
    /* orange at 30%, 4px dash / 4px gap */
    background: repeating-linear-gradient(to bottom, rgba(207, 138, 64, 0.3) 0 4px, transparent 4px 8px);
}

.res-it__visit {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--fiz-space-4);
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-regular);
}

.res-it__visit::before {
    content: "";
    position: relative;
    z-index: 1;
    flex: 0 0 10px;
    height: 10px;
    margin: 3px;
    border: 1px solid var(--fiz-color-primary-main);
    border-radius: var(--fiz-radius-circle);
    background: var(--fiz-surface-card);
    box-sizing: border-box;
}

.res-it__time {
    flex: 0 0 64px;
    margin-left: calc(-1 * var(--fiz-space-2));
    color: var(--fiz-text-subtle);
}

.res-it__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fiz-text-body);
}

/* Package cost breakdown (sidebar; swapped whole by the select AJAX) */
.fiz-card.res-breakdown {
    padding: 0;
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-lg);
    box-shadow: none;
}

.res-breakdown__head {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-2);
    padding: var(--fiz-space-4);
    border-bottom: 1px solid var(--fiz-border-default);
}

.res-breakdown__heading {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-bold);
    color: var(--fiz-text-heading);
}

.res-breakdown__days {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-heading);
}

.res-breakdown__days b {
    font-weight: var(--fiz-fw-semibold);
    color: inherit;
}

.res-breakdown__body {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
    padding: var(--fiz-space-4);
}

.res-breakdown__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.res-breakdown__title {
    text-transform: uppercase;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-body);
}

/* an extra charge's description, under its title */
.res-breakdown__note {
    margin: -4px 0 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    color: var(--fiz-color-placeholder);
}

.res-breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-breakdown__row > span:first-child {
    font-weight: var(--fiz-fw-medium);
}

/* Per-line labels are grey-900 at 70% (Figma layer opacity); the "+ extra"
   labels and the totals stay full strength. */
.res-breakdown__group:first-child .res-breakdown__row > span:first-child,
.res-breakdown__row--sub > span:first-child {
    color: rgba(41, 22, 29, 0.7);
}

.res-breakdown__row--sub {
    padding-left: var(--fiz-space-4);
}

.res-breakdown__row--total,
.res-breakdown__row--total > span:first-child {
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--fiz-fw-semibold);
    letter-spacing: -0.01em;
}

.res-breakdown__rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: rgba(41, 22, 29, 0.1);
}

/* 4px dash / 4px gap, as drawn — border-style: dashed can't set lengths. */
.res-breakdown__rule--dashed {
    background: repeating-linear-gradient(to right, rgba(41, 22, 29, 0.1) 0 4px, transparent 4px 8px);
}

/* "Arrival & departure detail pending" — above the breakdown */
.res-alert-card {
    overflow: hidden;
    border: 1px solid var(--fiz-color-primary-divider-header);
    border-radius: var(--fiz-radius-lg);
}

.res-alert-card__head {
    margin: 0;
    padding: var(--fiz-space-2) var(--fiz-space-3) var(--fiz-space-1);
    background: var(--fiz-color-primary-divider-header);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: 20px;
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
}

.res-alert-card__body {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    padding: var(--fiz-space-2) var(--fiz-space-3);
    background: var(--fiz-color-primary-border-header);
}

.res-alert-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    height: 32px;
    border-radius: var(--fiz-radius-circle);
    background: var(--fiz-color-primary-main);
    color: var(--fiz-color-primary-white);
}

.res-alert-card__icon svg {
    width: 18px;
    height: 18px;
}

.res-alert-card__text {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
}

@media (max-width: 767px) {
    .res-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fiz-space-1);
    }
    .res-summary__sep {
        display: none;
    }
    .res-pkg__title-row {
        flex-wrap: wrap;
    }
}

/* ── Confirmation — Figma "Step_3 - Default" (1143:15399) ───────────────
   Replaces the wizard after "Confirm reservation" (see script.js). */

.res-done-section {
    padding: var(--fiz-space-6) 0 var(--fiz-space-20);
}

.fiz-card.res-done {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-8);
    max-width: 668px;
    margin-inline: auto;
    padding: var(--fiz-space-8);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-lg);
    box-shadow: var(--res-shadow-card);
}

.res-done__head {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-1);
    text-align: center;
}

.res-done__title {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-h4);
    line-height: var(--fiz-lh-h4);
    font-weight: var(--fiz-fw-bold);
    letter-spacing: -0.01em;
    color: var(--fiz-text-heading);
}

.res-done__sub {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-done__inbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px var(--fiz-space-6);
    border: 1px solid var(--fiz-color-primary-border-header);
    border-radius: var(--fiz-radius-md);
    background: var(--fiz-color-primary-bg-header);
    text-align: center;
}

.res-done__inbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--fiz-space-6);
    border-radius: var(--fiz-radius-md);
    background: var(--fiz-surface-card);
    color: var(--fiz-color-primary-main);
}

.res-done__inbox-icon svg {
    width: 36px;
    height: 36px;
}

.res-done__inbox-title {
    margin: 0 0 var(--fiz-space-2);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
}

.res-done__inbox-text {
    max-width: 360px;
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-done__details {
    display: flex;
    flex-direction: column;
    padding: var(--fiz-space-2) 0;
    border: 1px solid var(--fiz-border-default);
    border-radius: var(--fiz-radius-sm);
}

.res-done__row {
    display: flex;
    justify-content: space-between;
    gap: var(--fiz-space-4);
    padding: 4px var(--fiz-space-3);
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-done__row b {
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
    text-align: right;
}

/* Charges applied: a charge's description (package form) under its row. */
.res-done__note {
    margin: 0;
    padding: 0 var(--fiz-space-3) 4px;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b6);
    line-height: var(--fiz-lh-b6);
    color: var(--fiz-color-placeholder);
}

.res-done__next {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.res-done__next-title {
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: var(--fiz-fs-b3);
    line-height: var(--fiz-lh-b3);
    font-weight: var(--fiz-fw-bold);
    color: var(--fiz-text-heading);
}

.res-done__steps {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.res-done__step {
    display: flex;
    align-items: center;
    gap: var(--fiz-space-3);
    margin: 0;
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-regular);
    color: var(--fiz-text-body);
}

.res-done__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    height: 28px;
    border: 1px solid var(--fiz-color-primary-divider-header);
    border-radius: 6px;
    background: var(--fiz-color-primary-bg-header);
    font-size: var(--fiz-fs-b5);
    line-height: 1;
    color: var(--fiz-color-primary-main);
}

/* "Reservation Summary" heading inside the details box */
.res-done__details-title {
    margin: 0;
    padding: 4px var(--fiz-space-3) var(--fiz-space-2);
    font-family: var(--fiz-font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fiz-fw-bold);
    color: var(--fiz-text-heading);
}

/* What's Next: a bold step title with its line under it, the number
   beside the title */
.res-done__steps .res-done__step {
    align-items: flex-start;
}

.res-done__step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.res-done__step-title {
    font-weight: var(--fiz-fw-semibold);
    color: var(--fiz-text-heading);
}

.res-done__step-text {
    font-size: var(--fiz-fs-b5);
    line-height: var(--fiz-lh-b5);
    color: var(--fiz-text-body);
}

.res-done__actions {
    display: flex;
    justify-content: center;
    gap: var(--fiz-space-4);
    margin-top: var(--fiz-space-2);
}

/* ── View reservation — Figma "Step-4" (1143:14704) ─────────────────────
   /reservation/do/action/view/rid/N/: the stepper card holds the back link
   and a stacked Checkin | Checkout | Members summary; below it Step 4's
   itinerary window and cost breakdown (res-step-body--4 layout). */

.res-view .fiz-stepper {
    margin-bottom: var(--fiz-space-6);
}

.res-view .res-step-body--4 {
    margin-bottom: 0;
}

/* the Guests card, then the itinerary */
.res-view .res-step-main {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
}

/* --stacked: value over label, no band. Figma trims these texts to cap
   height, so text-box reproduces its 12px value/label gap exactly. */
.res-summary.res-summary--stacked {
    gap: var(--fiz-space-6);
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.res-summary--stacked .res-summary__item {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-3);
    flex: 1 1 0;
    white-space: normal;
}

.res-summary--stacked .res-summary__item > * {
    display: block;
    text-box: trim-both cap alphabetic;
}

.res-summary--stacked .res-summary__sep {
    height: 34px;
    background: var(--fiz-border-default);
}

@media (max-width: 900px) {
    .res-summary.res-summary--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: var(--fiz-space-4);
    }
    .res-summary--stacked .res-summary__sep {
        display: none;
    }
}

/* Step 1 — group leader */
.res-leader {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
    margin-top: var(--fiz-space-6);
    padding-top: var(--fiz-space-4);
    border-top: 1px solid var(--fiz-border-default);
}

.res-leader__box {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-4);
}

.res-leader__box[hidden],
.res-leader__card[hidden] {
    display: none;
}

.res-leader__card .fiz-input:disabled {
    background: var(--fiz-bg-disabled, #ebe9e9);
}

/* ── Tour login — Figma "Login" (836:23499 / 23606 / 23713) ─────────────
   The shared step window (res-step-card) as a 460px sign-in card inside
   .fiz-hero--login (fiz-hero.css). Step 1 is the design's frame with the
   password field dropped (sign-in is an emailed code); step 2 swaps the
   body for the six code boxes. app_reservation_tour_login.py builds it,
   the "Tour-company login" block in script.js drives it. */

.fiz-card.res-login {
    width: 460px;
    max-width: 100%;
    border-radius: var(--fiz-radius-xl);
}

.res-login .res-step-card__title {
    font-size: var(--fiz-fs-h3);
    line-height: var(--fiz-lh-h3);
}

.res-login__step {
    display: flex;
    flex-direction: column;
    gap: var(--fiz-space-6);
}

.fiz-btn.res-login__submit {
    width: 100%;
}

.res-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--fiz-space-2);
}

.res-step-card .fiz-input.res-otp__box {
    padding: 0;
    text-align: center;
    font-size: var(--fiz-fs-b4);
    font-weight: var(--fiz-fw-semibold);
}

.res-login__links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--fiz-space-4);
}

.fiz-btn-tertiary.res-login__link {
    display: inline-flex;
    align-items: center;
    gap: var(--fiz-space-1);
    font-size: var(--fiz-fs-b5);
}

.res-login__link svg {
    width: 16px;
    height: 16px;
}

.fiz-btn-tertiary.res-login__link:disabled {
    color: var(--fiz-text-body);
    text-decoration: none;
    cursor: default;
}

/* .res-step-card's hint/input rules outrank fiz-forms.css's error state —
   put it back for the login card. */
.res-login .fiz-field-error .fiz-field__hint {
    color: var(--fiz-color-danger-main);
}

.res-login .fiz-field-error .fiz-input {
    border-color: var(--fiz-color-danger-main);
}