/* ============================================================================
   NAUTIKA · Search result tickets (public site)
   ----------------------------------------------------------------------------
   The sailing card on /book/search, styled to match the Agency and BackOffice
   New Booking results so the two read as one product.

   These rules are LIFTED from GoNautika.Web.Shared's ferry-search-panel.css
   rather than that stylesheet being loaded, because it and this site's design
   system define 40 classes in common — the whole search deck among them
   (.bk-field, .trip-leg, .swap-btn, .nk-dropdown...) — so loading it whole
   would restyle the dark hero deck into the admin panel's light one.

   What is taken is every rule anchored to a ticket class, compound selectors
   included: ".nk-ticket.fsp-ticket" cannot match anything but a ticket, and it
   is what turns the card into a column. A rule that could reach the rest of the
   site is left behind, and each @media block keeps its own rules — flattening
   those into the base is what put a full-width mobile Book Now on the desktop.

   Keep in step with ferry-search-panel.css if the portals' ticket changes.
   ========================================================================== */

.nk-ticket.fsp-ticket { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .9rem; border-color: var(--nk-primary); border-width: 1.5px; }
[data-theme="dusk"] .nk-ticket.fsp-ticket { border-color: var(--nk-secondary); }
.nk-ticket.fsp-ticket + .nk-ticket.fsp-ticket { margin-top: .9rem; }
.fsp-ticket-head { display: flex; align-items: center; gap: .8rem; }
.fsp-ticket-badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.fsp-ticket-head-date { flex: 0 0 auto; white-space: nowrap; }
.fsp-ticket-info-text { min-width: 0; flex: 1 1 auto; }
.fsp-ticket-info-text .nk-route-port, .fsp-ticket-info-text .nk-route-name, .fsp-ticket-info-text .nk-route-time, .fsp-via-leg-row .nk-route-port, .fsp-via-leg-row .nk-route-name, .fsp-via-leg-row .nk-route-time { min-width: 0; }
.fsp-ticket-row { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; }
.fsp-ticket-info { display: flex; align-items: center; gap: .8rem; flex: 1 1 auto; min-width: 14rem; }
.fsp-booknow-col { flex: 0 0 auto; }
.fsp-booknow-col .nk-btn { min-width: 9rem; }
.fsp-booknow-row { justify-content: flex-end; border-top: 1px solid var(--nk-line); padding-top: .85rem; }
.fsp-via-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--nk-text-xs); font-weight: 600; font-family: var(--nk-font-body); color: var(--nk-primary-700); background: var(--nk-primary-50); border: 1px solid var(--nk-primary-200); border-radius: var(--nk-radius-pill); padding: .1rem .55rem; margin: .3rem 0 .15rem; max-width: 100%; }
.fsp-via-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsp-via-badge-secondary { color: var(--nk-secondary-700); background: var(--nk-secondary-50); border-color: var(--nk-secondary-200); }
.fsp-via-badge-neutral { color: var(--nk-ink-soft); background: var(--nk-surface-2); border-color: var(--nk-line); }
.fsp-via-info { cursor: pointer; color: inherit; }
.fsp-via-info-icon { font-size: .95rem; vertical-align: -.15em; }
.fsp-via-info.nk-tooltip::before { white-space: normal; width: 15rem; max-width: 70vw; text-align: left; line-height: 1.4; }
.fsp-via-legs { display: grid; grid-template-columns: minmax(12rem, 1fr) max-content; align-items: center; row-gap: .6rem; column-gap: 1.25rem; }
.fsp-via-legs .fsp-via-leg-row { display: contents; }
.fsp-via-leg-row .nk-route.fsp-via-route { min-width: 12rem; padding: .1rem 0; }
.fsp-via-route .nk-route-path { height: auto; min-height: 2rem; padding-block: .2rem; }
.fsp-via-route .nk-route-path > span { flex-direction: column; gap: .05rem; line-height: 1.2; }
.fsp-via-leg-vessel { font-size: .6rem; font-weight: 600; color: var(--nk-muted); text-transform: uppercase; letter-spacing: .03em; }
.fsp-via-leg-duration { font-size: var(--nk-text-xs); font-weight: 700; color: var(--nk-ink-soft); }
.fsp-via-connector { display: flex; align-items: center; gap: .35rem; font-size: var(--nk-text-xs); color: var(--nk-ink-soft); padding-left: .1rem; border-left: 2px dashed var(--nk-line-strong); margin-left: .35rem; padding: .1rem 0 .1rem .6rem; grid-column: 1 / -1; }
.fsp-via-connector .material-symbols-outlined { font-size: 1rem; }
.fsp-via-total { font-size: var(--nk-text-xs); color: var(--nk-ink-soft); margin-top: .1rem; }
.op-mark { width: 2.5rem; height: 2.5rem; border-radius: var(--nk-radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 1.2rem; }
.fsp-ticket-classes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; flex: 0 0 auto; border-left: 2px dashed var(--nk-line-strong); padding-left: 1.1rem; }
.fsp-class-col { position: relative; z-index: 1; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: .35rem; padding: .35rem .55rem; border: 1px solid var(--nk-line); border-radius: var(--nk-radius-sm); min-width: 8rem; max-width: 11rem; flex: 0 1 8rem; transition: border-color var(--nk-dur-fast), background var(--nk-dur-fast); }
.fsp-class-col:hover { border-color: var(--nk-primary-200); }
.fsp-class-col.is-full { opacity: .55; cursor: not-allowed; }
.fsp-class-col.is-selected { background: var(--nk-primary-50); border-color: var(--nk-primary-200); }
.fsp-class-col.fsp-info-active { z-index: 2; }
.fsp-class-col-head { display: flex; align-items: center; gap: .3rem; }
.fsp-class-col-radio { flex-shrink: 0; }
.fsp-class-name { display: flex; align-items: center; gap: .25rem; font-weight: 700; font-size: var(--nk-text-xs); font-family: var(--nk-font-display); }
.fsp-class-price { font-family: var(--nk-font-display); font-weight: 800; font-size: var(--nk-text-sm); font-variant-numeric: tabular-nums; }
.fsp-class-col-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.fsp-class-col-seats { font-size: var(--nk-text-xs); white-space: nowrap; }
.fsp-class-col-seats.fsp-seats-good { color: var(--nk-success-700); }
.fsp-class-col-seats.fsp-seats-low { color: var(--nk-warning-700); }
.fsp-class-col-seats.fsp-seats-critical { color: var(--nk-error-700); }
.fsp-leg-tabs-nav { margin-bottom: 0; }
.fsp-leg-tab.nk-active { border-bottom: 2px solid var(--nk-primary); margin-bottom: -1px; }
.fsp-leg-tabs .nk-tabs-panels { padding-top: 1rem; }

@media (max-width: 767px) {
  .fsp-ticket-row { flex-direction: column; align-items: stretch; }
  .fsp-via-legs { grid-template-columns: 1fr; row-gap: .85rem; }
  .fsp-ticket-info, .fsp-via-leg-row .nk-route.fsp-via-route { flex: 0 0 auto; width: 100%; min-width: 0; }
  .fsp-booknow-row { justify-content: flex-start; }
  .fsp-ticket-classes { border-left: none; padding-left: 0; flex-basis: 100%; width: 100%; min-width: 0; }
  .fsp-class-col { min-width: 100%; max-width: none; }
  .fsp-booknow-col { margin-left: 0; width: 100%; }
  .fsp-booknow-col .nk-btn { width: 100%; }
  .fsp-ticket-head .nk-route-path, .fsp-ticket-info .nk-route-path { flex-direction: column; justify-content: flex-start; height: 2.2rem; gap: .3rem; }
  .fsp-ticket-head .nk-route-path::before, .fsp-ticket-info .nk-route-path::before { top: auto; bottom: 0; margin-top: 0; }
  .fsp-ticket-head .nk-route-path::after, .fsp-ticket-info .nk-route-path::after { top: auto; bottom: -3px; margin-top: 0; }
  .fsp-ticket-head .nk-route-path > span, .fsp-ticket-info .nk-route-path > span { background: none; border: none; padding: 0; font-size: var(--nk-text-xs); color: var(--nk-muted); }
}

@media (min-width: 900px) and (max-height: 820px) {
  .nk-ticket.fsp-ticket { padding: .75rem .9rem; gap: .6rem; }
  .nk-ticket.fsp-ticket + .nk-ticket.fsp-ticket { margin-top: .7rem; }
  .fsp-booknow-row { padding-top: .6rem; }
}

@media (min-width: 900px) {
  .nk-ticket.fsp-ticket > .fsp-booknow-row { padding-top: .5rem; }
}

@media (min-width: 900px) {
  .nk-ticket.fsp-ticket { padding: .55rem .85rem .6rem; gap: .35rem; }
  .nk-ticket.fsp-ticket + .nk-ticket.fsp-ticket { margin-top: .6rem; }
  .fsp-ticket-head { gap: .55rem; }
  .fsp-ticket-head .op-mark { width: 1.9rem; height: 1.9rem; border-radius: 7px; }
  .fsp-ticket-head .op-mark .material-symbols-outlined { font-size: 1.1rem; }
  .fsp-ticket-head > .fsp-ticket-info-text { display: flex; align-items: center; gap: .55rem; min-width: 0; }
  .fsp-ticket-head > .fsp-ticket-info-text > .nk-truncate { flex: 0 1 auto; font-size: var(--nk-text-sm); }
  .fsp-ticket-badge-row { flex-wrap: nowrap; gap: .35rem; }
  .fsp-ticket .nk-route-time { font-size: var(--nk-text-lg); }
  .fsp-ticket .nk-route-path { height: 1.5rem; }
  .fsp-ticket .nk-route { gap: .75rem; }
  .fsp-ticket-row { gap: .6rem 1rem; }
  .fsp-booknow-col .nk-btn { padding: .6em 1.1em; min-width: 7.5rem; }
  .fsp-ticket-classes { gap: .45rem; padding-left: .85rem; }
  .fsp-class-col { gap: .15rem; padding: .25rem .5rem; min-width: 7rem; flex-basis: 7rem; }
}

/* ============================================================================
   NAUTIKA · Passengers & Seats / Payment steps (public site)
   ----------------------------------------------------------------------------
   The booking flow's geometry, lifted from the same ferry-search-panel.css the
   ticket rules above come from, so /book/trip reads as the Agency and BackOffice
   New Booking screen rather than as a different product wearing the same colours.

   The flow it lays out is the portals' flow, in the portals' order: passenger
   details first, in their own card; the seat map and fare pane revealed only
   once those validate; then a Payment step that reviews the trips and the
   passengers beside the fare and the payment mode.

   Same discipline as above — only rules anchored to an fsp- class the public
   flow actually uses. The portals' tab bars, remarks, trade discount, agency
   commission and passenger manifest table are all deliberately left behind:
   this site has one ticket type, no agent and no discount.

   --fsp-topbar-h is the height of the site navbar, which is sticky on every page
   (see nautika.site.css): the rail, the fare pane and the seat-map head all pin
   *under* the bar rather than to the top of the viewport, or the bar would cover
   them. --fsp-rail-h is measured in nautika.booking-trip.js, as in the portals.
   ========================================================================== */

:root { --fsp-topbar-h: var(--site-navbar-h, 0rem); }

/* ---- Back-toolbar above a step ------------------------------------------- */
.fsp-results-toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.fsp-results-toolbar-label { font-size: var(--nk-text-sm); font-weight: 600; color: var(--nk-ink-soft); }
.fsp-step2-toolbar, .fsp-step3-toolbar { margin-bottom: 1.25rem; }

/* ---- Progress rail: steps + seat-hold countdown, pinned ------------------- */
.fsp-progress-rail { position: sticky; top: var(--fsp-topbar-h, 0rem); z-index: 40;
  background: var(--nk-surface); padding: .75rem 0 .6rem;
  box-shadow: 0 6px 12px -10px rgb(0 0 0 / .35); margin-bottom: 1.25rem; }
.fsp-steps { max-width: 520px; margin-inline: auto; }
@media (min-width: 768px) {
  .fsp-steps { max-width: none; width: 100%; }
  .fsp-steps .nk-step { white-space: nowrap; }
}
.fsp-progress-rail > .fsp-hold-countdown { display: inline-flex; margin: .6rem 0 0; }
.fsp-hold-countdown { display: flex; align-items: center; gap: .35rem; margin: 0 0 .6rem;
  padding: .35rem .7rem; border-radius: var(--nk-radius-pill); background: var(--nk-secondary-500);
  color: #000; border: 1px solid var(--nk-secondary-200);
  font-size: var(--nk-text-xs); font-weight: 700; }
.fsp-hold-countdown .material-symbols-outlined { font-size: 1rem; }
.fsp-hold-countdown-expired { background: var(--nk-error-50, #fdecea); color: var(--nk-error); }

/* ---- Passenger details: first, and in its own card ------------------------ */
.fsp-passengers-pane { margin-bottom: 1rem; }
.fsp-passengers-card { border: 1px solid var(--nk-line); border-radius: var(--nk-radius); background: var(--nk-surface);
  box-shadow: var(--nk-shadow); padding: .75rem .9rem .9rem; }
.fsp-passengers-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: .75rem; }
.fsp-passengers-actions-hint { font-size: var(--nk-text-sm); color: var(--nk-muted); margin-right: auto; }
.fsp-passengers-error { font-size: var(--nk-text-sm); color: var(--nk-error); margin: .6rem 0 0; }

/* ---- Seats: map (left) + fare pane (right) -------------------------------- */
.fsp-step2-inner { --fsp-seatmap-max: 42rem;
  display: flex; align-items: flex-start; gap: 1.25rem;
  border: 1px solid var(--nk-line); border-radius: var(--nk-radius); background: var(--nk-surface);
  box-shadow: var(--nk-shadow); padding: 1rem 1.1rem 1.1rem;
  scroll-margin-top: calc(var(--fsp-topbar-h, 0rem) + var(--fsp-rail-h, 0px) + 1rem); }
.fsp-seatmap-pane { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.fsp-seatmap-leg { max-width: var(--fsp-seatmap-max, 42rem); margin: 0 auto; }
.fsp-fare-pane { flex: 0 0 15rem; position: sticky;
  top: calc(var(--fsp-topbar-h, 0rem) + var(--fsp-rail-h, 0px) + 1rem); }
@media (max-width: 900px) {
  .fsp-step2-inner { flex-direction: column; }
  .fsp-fare-pane { flex: 1 1 auto; width: 100%; position: static; }
}
@media (min-width: 1600px) {
  .fsp-step2-inner { --fsp-seatmap-max: 54rem; }
  .fsp-fare-pane { flex-basis: 19rem; }
}

/* A date field that cannot be used yet — a later leg's Return on a multi-leg round trip, which is
   shown but belongs to the first journey alone. flatpickr's visible field is a readonly text input,
   so the theme's own .form-control colours would otherwise leave it looking live. */
.nk-datepicker-alt.nk-datepicker-disabled { opacity: .5; cursor: not-allowed; }

/* Class picker and legend, above the deck plan — the portals' .fsp-seatmap-head. Sticky, so both stay
   on screen while the page scrolls through a deck taller than the viewport: they are what you consult
   while choosing, and a legend that scrolls away explains nothing. Under the rail's own z-index. */
.fsp-seatmap-head { position: sticky; z-index: 20;
  top: calc(var(--fsp-topbar-h, 0rem) + var(--fsp-rail-h, 0px));
  background: var(--nk-surface); padding: .4rem 0 .35rem; margin-bottom: .35rem;
  box-shadow: 0 10px 10px -10px rgb(0 0 0 / .18); }
/* The results ticket's own class row hugs a route line, behind a dashed divider; here it is the whole
   width of the pane and reads left to right. */
.fsp-step2-classes { border-left: none; padding-left: 0; justify-content: flex-start; margin-bottom: .5rem; }
.fsp-seatmap-legend:empty { display: none; }

/* The seat map's own legend, drawn by the shared seat map into [data-seatmap-legend]. The rule is the
   portals' (ferry-search-panel.css), which this site does not load — without it the swatches have no
   size and the entries run together as one word. Two entries here, never six: see PublicSeatMap. */
.nk-sm-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.nk-sm-legend .nk-sm-leg { display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--nk-text-xs); color: var(--nk-ink-soft); }
.nk-sm-legend i { width: .95rem; height: .95rem; border-radius: 4px; border: 1.5px solid; display: inline-block; }

/* ---- The fare card, on both steps ---------------------------------------- */
.fsp-fare-card { border: 1.5px solid var(--nk-primary-200); border-radius: var(--nk-radius); background: var(--nk-surface);
  box-shadow: var(--nk-shadow); padding: 1rem; }
.fsp-fare-legs { display: flex; flex-direction: column; gap: .85rem; margin-bottom: .85rem; }
.fsp-fare-leg-block { padding-top: .7rem; border-top: 1px solid var(--nk-line); }
.fsp-fare-leg-block:first-child { padding-top: 0; border-top: none; }
.fsp-fare-leg-vessel { display: flex; align-items: baseline; gap: .5rem; font-family: var(--nk-font-display);
  margin-bottom: .35rem; }
.fsp-fare-leg-vessel-name { font-weight: 700; font-size: var(--nk-text-sm); flex: 0 0 auto; }
.fsp-fare-leg-route { flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: var(--nk-text-xs);
  color: var(--nk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsp-fare-seat-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; }
.fsp-fare-seat-row-pending { font-size: var(--nk-text-sm); font-style: italic; color: var(--nk-muted); }
.fsp-fare-leg-surcharge { display: flex; justify-content: space-between; align-items: center;
  font-size: var(--nk-text-xs); color: var(--nk-ink-soft); margin-top: .25rem; }
/* A fare line's arithmetic — "\20B950 \D7 2" — under its label rather than beside it, so a long seat
   class name and its calculation never fight for the same line. */
.fsp-fare-leg-surcharge > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.fsp-fare-leg-surcharge > span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fsp-fare-calc { font-size: var(--nk-text-xs); color: var(--nk-muted); font-variant-numeric: tabular-nums; }
.fsp-fare-class-line { font-weight: 600; color: var(--nk-ink); }
.fsp-fare-leg-total { display: flex; justify-content: space-between; font-size: var(--nk-text-sm); font-weight: 700;
  margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--nk-line); }
.fsp-fare-leg-caption { font-size: var(--nk-text-xs); font-weight: 700; color: var(--nk-muted);
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: .3rem; }
.fsp-fare-total-so-far { display: flex; justify-content: space-between; font-size: var(--nk-text-xs);
  font-weight: 700; color: var(--nk-ink-soft); background: var(--nk-surface-2);
  border-radius: var(--nk-radius-sm); padding: .45rem .6rem; margin: -.35rem 0 .85rem; }
.fsp-fare-total-block { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--nk-line); font-weight: 700;
  font-size: var(--nk-text-lg); }
.fsp-fare-total-amount { color: var(--nk-primary); font-size: var(--nk-text-lg); font-family: var(--nk-font-display); }
.fsp-fare-payment-btn { width: 100%; margin-top: 1rem; }
@media (max-width: 639px) {
  .fsp-fare-pane .fsp-fare-payment-btn { flex: 1 1 100%; width: 100%; }
}

/* ---- Payment step: review (left) + fare and payment mode (right) ---------- */
.fsp-pay-inner { display: flex; align-items: flex-start; gap: 1.5rem; }
.fsp-pay-main { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.fsp-pay-main > :empty, .fsp-pay-main > [hidden] { display: none; }
.fsp-pay-side { flex: 1 1 45%; min-width: 0; max-width: 34rem; position: sticky;
  top: calc(var(--fsp-topbar-h, 0rem) + var(--fsp-rail-h, 0px) + 1rem); }
@media (max-width: 1023px) {
  .fsp-pay-inner { flex-direction: column; }
  .fsp-pay-main, .fsp-pay-side { flex: 1 1 auto; width: 100%; max-width: none; }
  .fsp-pay-side { position: static; }
}
.fsp-pay-side .fsp-fare-leg-vessel { display: none; }
.fsp-pay-side .fsp-fare-leg-caption { font-weight: 700; color: var(--nk-ink); margin-bottom: .35rem; }
.fsp-pay-side .fsp-fare-leg-surcharge { font-size: var(--nk-text-sm); color: var(--nk-ink); padding: .2rem 0; }
.fsp-pay-side .fsp-fare-leg-surcharge > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.fsp-pay-side .fsp-fare-leg-total { font-size: var(--nk-text-base); color: var(--nk-ink); }
.fsp-pay-side .fsp-fare-leg-total > span:last-child { font-weight: 800; }
.fsp-pay-card { border: 1px solid var(--nk-line); border-radius: var(--nk-radius); background: var(--nk-surface);
  box-shadow: var(--nk-shadow); padding: .75rem .9rem .9rem; }
.fsp-pay-title { margin: 0 0 .6rem; font-family: var(--nk-font-display); }
.fsp-pay-trip { padding-top: .7rem; border-top: 1px solid var(--nk-line); }
.fsp-pay-trip:first-child { padding-top: 0; border-top: none; }
.fsp-pay-trip + .fsp-pay-trip { margin-top: .7rem; }
.fsp-pay-trip-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 .4rem; }
.fsp-pay-trip-vessel { font-size: var(--nk-text-sm); color: var(--nk-ink-soft); }
.fsp-pay-pax-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.fsp-pay-pax-head .fsp-pay-title { margin: 0; flex: 1 1 auto; }
.fsp-pay-pax-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .8rem;
  padding: .5rem 0; border-top: 1px solid var(--nk-line); }
.fsp-pay-pax-row:first-child { border-top: none; padding-top: 0; }
.fsp-pay-pax-name { flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; gap: .4rem;
  font-family: var(--nk-font-display); font-weight: 700; font-size: var(--nk-text-sm); }
.fsp-pay-pax-facts { flex: 1 1 12rem; min-width: 0; font-size: var(--nk-text-sm); color: var(--nk-ink-soft); }
.fsp-pay-pax-seats { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
/* The live passenger form is MOVED here while it is being edited, never copied — so its own card
   chrome and its "Select seats" action, which mean nothing on this step, are hidden rather than
   removed: the node handed back to the seats step is exactly the one it lent out. */
.fsp-pay-pax-slot .fsp-passengers-pane { margin-bottom: 0; }
.fsp-pay-pax-slot .fsp-passengers-card { border: none; box-shadow: none; padding: 0; }
.fsp-editing-pax .fsp-passengers-actions { display: none; }
.fsp-payment-mode-field { margin: .8rem 0 0; }
/* The dropdown fills its field the way a select would, rather than shrinking to its own label. */
.fsp-payment-mode-field .nk-dropdown { width: 100%; }
.fsp-payment-mode-field .nk-dropdown-toggle { width: 100%; justify-content: space-between; }

/* ============================================================================
   NAUTIKA · Passenger details (public site)
   ----------------------------------------------------------------------------
   The Agency/BackOffice New Booking passenger card, lifted from the same
   ferry-search-panel.css as everything above it: a roster row per passenger
   (number · name · facts · Lead chip · status) over a collapsible form.

   One substitution runs through the whole block. The portals build their
   passenger fields out of .bk-field, which in THEIR design system is a light
   field on a white card. In Nautika.Components — this site's copy — .bk-field
   is the dark hero search deck's field (white text on a translucent navy slab),
   because that is the only place the public site uses it. Reusing it here would
   paint a row of dark slabs across a white card, so the same field is spelled
   .fsp-field, defined below with the internal portals' values.
   ========================================================================== */

/* ---- The field itself: the internal portals' .bk-field, under a name this
        site's design system does not already spend on the dark deck. --------- */
.fsp-field { display: flex; flex-direction: column; gap: .15rem; padding: .4rem .65rem;
  border-radius: var(--nk-radius); border: 1.5px solid var(--nk-line); background: var(--nk-surface);
  transition: border-color var(--nk-dur-fast), box-shadow var(--nk-dur-fast); min-width: 0; }
.fsp-field:focus-within { border-color: var(--nk-primary); box-shadow: 0 0 0 4px var(--nk-primary-50); }
.fsp-field > label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--nk-muted); }
.fsp-field input { border: none; outline: none; font-size: var(--nk-text-base); font-weight: 600;
  font-family: var(--nk-font-display); background: none; padding: 0; width: 100%; color: var(--nk-ink); }
.fsp-field input::placeholder { font-weight: 400; color: var(--nk-faint); }
/* The passenger form is filled on a phone more than anywhere else, and its inputs sat just under
   the 16px at which iOS Safari stops zooming a focused field. Zooming mid-roster loses the page's
   place for every passenger after the first. */
@media (max-width: 820px) { .fsp-field input { font-size: max(16px, var(--nk-text-base)); } }
.fsp-dd { flex: 1; min-width: 0; }
.fsp-dd .nk-dropdown-toggle { border: none; background: none; padding: 0; min-width: 0; width: 100%;
  font-family: var(--nk-font-display); font-weight: 600; font-size: var(--nk-text-base); }
.fsp-dd .nk-dropdown-toggle:hover { box-shadow: none; }
.fsp-dd .nk-dropdown-menu { min-width: min(240px, calc(100vw - 2.5rem)); max-height: 16rem; overflow-y: auto; }
.fsp-dd .nk-dropdown-toggle [data-nk-dd-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Toolbar: title, how many are still outstanding, and the two shortcuts -- */
.fsp-passengers-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .6rem; }
.fsp-passengers-toolbar-main { display: flex; align-items: baseline; gap: .6rem; flex: 1 1 auto; min-width: 0; }
.fsp-passengers-title { margin: 0; font-family: var(--nk-font-display); }
.fsp-passengers-progress { font-size: var(--nk-text-sm); color: var(--nk-muted); white-space: nowrap; }
.fsp-passengers-progress[data-state="ok"] { color: var(--nk-success-700); font-weight: 600; }
.fsp-passengers-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
.fsp-passengers-tools > [hidden] { display: none; }

/* ---- Roster: one row per passenger, its form collapsing under it ------------
   overflow must stay visible — the gender / nationality / dial-code menus open
   past the card's edge — and the open card (or any with focus inside) is lifted
   above its siblings so a menu never ends up under the next row. */
.fsp-passengers-list { display: flex; flex-direction: column; gap: .45rem; }
.fsp-passengers-card, .fsp-passengers-list, .fsp-passenger-body { overflow: visible; }
.fsp-passenger-card { border: 1px solid var(--nk-line); border-radius: var(--nk-radius);
  background: var(--nk-surface); padding: 0; overflow: visible; position: relative; z-index: 1; }
.fsp-passenger-card.is-open { z-index: 2; border-color: var(--nk-primary-200); box-shadow: var(--nk-shadow-xs); }
.fsp-passenger-card:focus-within, .fsp-passenger-card:has(.nk-dropdown.nk-open) { z-index: 5; }
.fsp-passenger-card.has-error { border-color: var(--nk-error); }
.fsp-passenger-card-infant { border-color: var(--nk-secondary-200, var(--nk-line)); }
.fsp-passenger-card .nk-dropdown-menu { z-index: var(--nk-z-dropdown); }

.fsp-pax-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .7rem;
  background: none; border: none; border-radius: var(--nk-radius) var(--nk-radius) 0 0;
  text-align: left; font: inherit; color: var(--nk-ink); cursor: pointer; }
.fsp-pax-row:hover { background: var(--nk-surface-2); }
.fsp-pax-row-num { flex: 0 0 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--nk-surface-2); border: 1px solid var(--nk-line);
  font-size: var(--nk-text-xs); font-weight: 700; font-family: var(--nk-font-display); color: var(--nk-ink-soft); }
.fsp-passenger-card.is-complete .fsp-pax-row-num { background: var(--nk-success); border-color: var(--nk-success); color: #fff; }
.fsp-pax-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.fsp-pax-row-name { font-weight: 700; font-family: var(--nk-font-display); font-size: var(--nk-text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fsp-pax-row-facts { font-size: var(--nk-text-xs); color: var(--nk-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fsp-pax-row-lead { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 999px; background: var(--nk-primary-50); color: var(--nk-primary-700); flex-shrink: 0; }
.fsp-pax-row-status { font-size: var(--nk-text-xs); font-weight: 600; padding: .15rem .55rem;
  border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.fsp-pax-row-status[data-state="empty"] { background: var(--nk-surface-2); color: var(--nk-muted); }
.fsp-pax-row-status[data-state="partial"] { background: var(--nk-warning-50); color: var(--nk-warning-700); }
.fsp-pax-row-status[data-state="ok"] { background: var(--nk-success-50); color: var(--nk-success-700); }
.fsp-pax-row-caret { font-size: 1.25rem; color: var(--nk-muted); transition: transform var(--nk-dur); flex-shrink: 0; }
.fsp-passenger-card.is-open .fsp-pax-row-caret { transform: rotate(180deg); }

.fsp-passenger-body { padding: .25rem .75rem .7rem; border-top: 1px dashed var(--nk-line); }
.fsp-passenger-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.fsp-passenger-lead { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--nk-text-sm);
  color: var(--nk-ink-soft); cursor: pointer; user-select: none; }
.fsp-passenger-infant-badge { display: inline-flex; align-items: center; font-size: var(--nk-text-xs);
  font-weight: 700; color: var(--nk-secondary-700, var(--nk-ink-soft));
  background: var(--nk-secondary-50, var(--nk-surface-2));
  border: 1px solid var(--nk-secondary-200, var(--nk-line)); border-radius: var(--nk-radius-pill); padding: .1rem .55rem; }
.fsp-pax-error { color: var(--nk-error); font-size: var(--nk-text-xs); margin: .4rem 0 0; }

/* ---- The fields: flex, not grid, so a narrowed field (Age) is followed by the
        next one rather than by the rest of a grid column. ------------------- */
.fsp-passenger-grid { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.fsp-passenger-grid > .fsp-field { flex: 1 1 11rem; min-width: 0; }
.fsp-passenger-grid > .fsp-field.fsp-pax-age { flex: 0 0 5.5rem; }
.fsp-passenger-grid > .fsp-field.fsp-pax-dob { flex: 0 0 9.5rem; }
.fsp-passenger-grid > .fsp-pax-contact { flex: 1 1 26rem; min-width: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.fsp-pax-contact > .fsp-field.fsp-pax-phone { flex: 0 0 15rem; min-width: 0; }
.fsp-pax-contact > .fsp-field:not(.fsp-pax-phone) { flex: 1 1 10rem; min-width: 0; }
/* .fsp-field's own column direction stretches children across the full width; align-self keeps this
   row hugging its (now narrow) content instead of re-introducing the dead space it was narrowed to remove. */
.fsp-phone-group { display: flex; align-items: center; align-self: flex-start; gap: .5rem; }
.fsp-phone-group .fsp-dialcode-dd { flex: 0 0 auto; width: auto; }
.fsp-phone-group .fsp-dialcode-dd .nk-dropdown-toggle { width: auto; display: inline-flex; align-items: center; gap: .15rem; }
.fsp-phone-group .fsp-dialcode-dd .nk-dropdown-toggle [data-nk-dd-label] { overflow: visible; }
.fsp-phone-group .fsp-dialcode-dd .nk-caret { margin-left: 0; }
.fsp-phone-group input[data-pax-role="phone"] { width: 100%; max-width: 7rem; }

@media (max-width: 520px) {
  /* Every field's 11rem basis already exceeds the row at this width, so Age's fixed narrow box buys
     nothing and just floats alone on its own row — it grows like the rest instead. */
  .fsp-passenger-grid > .fsp-field.fsp-pax-age { flex: 1 1 11rem; }
  .fsp-pax-contact { flex-direction: column; }
}
@media (max-width: 639px) {
  .fsp-pax-row-facts { display: none; }
  .fsp-passengers-tools .nk-btn { padding-inline: .6em; }
}
/* Laptop and up: one row per passenger. Proportional shares with small minimums instead of fixed
   bases, so the row squeezes to fit rather than wrapping Phone + Email onto a second line. */
@media (min-width: 1340px) {
  .fsp-passenger-grid { flex-wrap: nowrap; gap: .45rem; }
  .fsp-passenger-grid > .fsp-pax-contact { gap: .45rem; flex: 2.4 1 0; min-width: 23rem; flex-wrap: nowrap; }
  .fsp-passenger-grid > .fsp-field { flex: 1 1 0; min-width: 6rem; }
  .fsp-passenger-grid > .fsp-field.fsp-pax-age { flex: 0 0 5rem; min-width: 0; }
  .fsp-passenger-grid > .fsp-field.fsp-pax-gender { flex: 0 0 7rem; min-width: 0; }
  .fsp-passenger-grid > .fsp-field.fsp-pax-nationality { flex: 0 0 10rem; min-width: 0; }
  .fsp-pax-contact > .fsp-field.fsp-pax-phone { flex: 0 0 auto; }
  .fsp-pax-contact .fsp-phone-group input[data-pax-role="phone"] { width: 6.8rem; }
  .fsp-pax-contact > .fsp-field:not(.fsp-pax-phone) { flex: 1 1 0; min-width: 9rem; }
  /* A non-Indian nationality adds two more fields, and the one-row minimums stop fitting — the row
     goes back to wrapping rather than running off the edge of the card. */
  .fsp-passenger-grid:has([data-pax-natid]:not([hidden])) { flex-wrap: wrap; }
  .fsp-passenger-grid:has([data-pax-natid]:not([hidden])) > .fsp-field { flex: 1 1 11rem; }
  .fsp-passenger-grid:has([data-pax-natid]:not([hidden])) > .fsp-field.fsp-pax-age { flex: 0 0 5.5rem; }
  .fsp-passenger-grid:has([data-pax-natid]:not([hidden])) > .fsp-pax-contact { flex: 1 1 26rem; flex-wrap: wrap; }
}