/* VOYAGER_FORMS_CSS_V1 - customer/passenger details, payment, status,
   check-in, legal pages. One shared "page card" shell + form styling. */
.voy-page-shell{padding:28px 0 72px}
.voy-page-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.voy-page-back{
  width:38px;height:38px;border-radius:var(--voy-radius-pill);border:1px solid var(--voy-color-border);
  background:var(--voy-color-surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.voy-page-head h1{font-size:24px}
.voy-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.voy-card{background:var(--voy-color-surface);border:1px solid var(--voy-color-border);border-radius:var(--voy-radius-lg);
  padding:22px;margin-bottom:16px}
.voy-card h2{font-size:15px;font-family:var(--voy-font-body);font-weight:700;margin-bottom:14px}
.voy-card-step{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--voy-color-primary-tint);color:var(--voy-color-primary-dark);font-size:12px;font-weight:800;margin-right:8px;
}
.voy-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voy-form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.voy-form-field label{font-size:12px;font-weight:700;color:var(--voy-color-ink-soft)}
.voy-form-field input,.voy-form-field select,.voy-form-field textarea{
  padding:11px 13px;border-radius:var(--voy-radius-md);border:1px solid var(--voy-color-border);font:inherit;font-size:14px;
  background:var(--voy-color-surface);color:var(--voy-color-ink);width:100%;
}
.voy-form-field input:focus,.voy-form-field select:focus,.voy-form-field textarea:focus{
  outline:none;border-color:var(--voy-color-primary);box-shadow:0 0 0 3px var(--voy-color-primary-tint);
}
.voy-form-field .voy-field-error{font-size:12px;color:var(--voy-color-error)}
.voy-radio-row{display:flex;gap:16px}
.voy-radio-row label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.voy-passenger-block + .voy-passenger-block{margin-top:18px;padding-top:18px;border-top:1px solid var(--voy-color-border)}
/* P0_CORRECTIVE_HOTFIX_V1: one shared heading class for every passenger
   type (adult/child/infant) - was a repeated inline style attribute
   before, which happened to already compute identically for all three,
   but was not obviously/auditably so. This class is the single source
   of truth the acceptance test compares computed styles
   against. */
.voy-passenger-heading{
  font-family:var(--voy-font-body);font-size:13px;font-weight:700;line-height:1.4;
  color:var(--voy-color-ink-soft);margin:0 0 10px;
}

/* BOOKING_FLOW_REDESIGN_V1: compact title dropdown replacing the old
   large gender-radio group.
   BOOKING_FLOW_UI_CORRECTION_V1: extended to a single desktop row for
   title + first + last + date of birth (was title/first/last only,
   with date of birth on its own separate row below) - flex instead of
   a fixed grid-template-columns so a row with no date of birth (adult
   rows never show one, see requires_dob in public_views.py) simply has
   one fewer flex child instead of leaving a dead empty grid cell. Each
   field keeps an explicit basis so the row reads as clearly separated
   columns, not a ragged auto layout; flex-wrap lets it degrade
   gracefully rather than overflow at in-between widths, and the
   existing <=900px breakpoint still stacks one field per line exactly
   as before. */
.voy-form-grid-title{display:flex;flex-wrap:wrap;gap:12px}
.voy-form-grid-title .voy-form-field{flex:1 1 140px;min-width:0}
.voy-form-grid-title .voy-form-field:first-child{flex:0 1 84px;min-width:84px}
.voy-form-grid-title .voy-form-field:last-child:nth-child(4){flex:0 1 160px;min-width:150px}
@media (max-width:900px){.voy-form-grid-title{flex-direction:column}
  .voy-form-grid-title .voy-form-field,
  .voy-form-grid-title .voy-form-field:first-child,
  .voy-form-grid-title .voy-form-field:last-child:nth-child(4){flex:1 1 auto;min-width:0}}

/* BOOKING_FLOW_UI_CORRECTION_V1: per-passenger, per-leg baggage
   selection is now two compact dropdowns (outbound/return) instead of
   the previous radio-card grid (BOOKING_FLOW_REDESIGN_V1 above,
   superseded) - same real BaggageOption rows, same
   outbound_bag_{index}/return_bag_{index} submit names (so the server
   side (_selected_bags/_missing_indexed_baggage in
   bookings/public_views.py) and the live quote refresh in this file's
   own <script> block did not need to change their field-name contract),
   just a <select> instead of a radio-card group. Every dropdown opens
   on a non-selectable placeholder (see book.html) - nothing is
   preselected any more, so an explicit choice is always required. */
/* P0_CORRECTIVE_HOTFIX_V1: both dropdowns (outbound/return) now share
   ONE row - a 2-column grid, ~50/50 with a normal gap, per the admin's
   explicit requirement - instead of each being its own full-width
   block-level div (which simply stacked vertically; confirmed live via
   a real production screenshot). min-width:0 on the group is required
   for a grid/flex child containing a <select> to actually shrink below
   its intrinsic content width instead of overflowing the row - without
   it the two columns silently break out to 430/390px widths. Single-
   column only when there is no return leg (.voy-baggage-select-row-
   single, one-way bookings), where the one visible group uses the full
   row width, exactly as asked. Never collapses to one column at any
   narrower width - the admin was explicit that 430/390px must keep the
   two-column structure with compact fields. */
.voy-baggage-select-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voy-baggage-select-row.voy-baggage-select-row-single{grid-template-columns:1fr}
.voy-baggage-select-group{min-width:0;margin:10px 0 16px}
.voy-baggage-select-group-label{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--voy-color-muted);margin-bottom:6px}
.voy-baggage-select{
  width:100%;min-width:0;padding:11px 13px;border-radius:var(--voy-radius-md);border:1px solid var(--voy-color-border);
  font:inherit;font-size:14px;background:var(--voy-color-surface);color:var(--voy-color-ink);
}
.voy-baggage-select:invalid{color:var(--voy-color-muted)}
.voy-baggage-select:focus{outline:none;border-color:var(--voy-color-primary);box-shadow:0 0 0 3px var(--voy-color-primary-tint)}
.voy-baggage-select-empty{font-size:12px;color:var(--voy-color-ink-soft)}
@media (max-width:430px){
  .voy-baggage-select-group-label{font-size:10px}
  .voy-baggage-select{padding:9px 8px;font-size:12.5px}
}

/* BOOKING_FLOW_REDESIGN_V1: explicit guest-vs-register choice - guest
   is the default (selected) state, matching the requested behaviour. */
.voy-account-mode-row{display:flex;gap:10px;margin-bottom:14px}
.voy-account-mode-btn{
  flex:1;padding:11px;border-radius:var(--voy-radius-md);border:1px solid var(--voy-color-border);
  background:var(--voy-color-surface);font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--voy-color-ink-soft);
}
.voy-account-mode-btn[aria-pressed="true"]{border-color:var(--voy-color-primary);color:var(--voy-color-primary-dark);background:var(--voy-color-primary-tint)}
.voy-account-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--voy-color-border)}
.voy-account-signed-in{font-size:13px;color:var(--voy-color-ink-soft)}

/* BOOKING_FLOW_REDESIGN_V1: richer summary rail on /book/ - leg rows
   with real times, per-passenger-type price rows, a real breakdown,
   the same visual language results.css already uses for its own
   summary rail (kept as a second, page-scoped copy on purpose - book.html
   only loads forms.css, results.css only loads on the results page). */
.voy-summary-leg{font-size:13px;padding:8px 0;border-bottom:1px solid var(--voy-color-border)}
.voy-summary-leg-route{display:flex;justify-content:space-between;color:var(--voy-color-ink);font-weight:600}
.voy-summary-leg-times{display:flex;justify-content:space-between;font-size:12px;color:var(--voy-color-ink-soft);margin-top:2px}
.voy-summary-breakdown-row{display:flex;justify-content:space-between;font-size:13px;color:var(--voy-color-ink-soft);padding:4px 0}
.voy-summary-breakdown-row.voy-summary-discount-row{color:var(--voy-color-success)}
/* BOOKING_FLOW_REDESIGN_V1: without this, the [hidden] attribute the
   template/JS toggle on the baggage/markup/promo rows loses to the
   plain class selector's own `display:flex` above (a class selector
   always beats the browser's built-in [hidden]{display:none} UA rule,
   which has only attribute-selector specificity) - the row rendered
   visible at 0,00 even when explicitly marked hidden. */
.voy-summary-breakdown-row[hidden]{display:none}
.voy-summary-updating{font-size:11px;color:var(--voy-color-muted)}

.voy-alert{border-radius:var(--voy-radius-md);padding:14px 16px;font-size:13px;margin-bottom:16px;display:flex;gap:10px}
.voy-alert-info{background:var(--voy-color-primary-tint);color:var(--voy-color-primary-dark)}
.voy-alert-warning{background:var(--voy-color-warning-tint);color:var(--voy-color-warning)}
.voy-alert-error{background:var(--voy-color-error-tint);color:var(--voy-color-error)}
.voy-alert-success{background:var(--voy-color-success-tint);color:var(--voy-color-success)}

.voy-status-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:var(--voy-radius-pill)}
.voy-status-badge[data-tone="success"]{background:var(--voy-color-success-tint);color:var(--voy-color-success)}
.voy-status-badge[data-tone="warning"]{background:var(--voy-color-warning-tint);color:var(--voy-color-warning)}
.voy-status-badge[data-tone="muted"]{background:var(--voy-color-surface-alt);color:var(--voy-color-muted)}

.voy-summary-rail .voy-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0}

@media (max-width:900px){
  .voy-page-grid{grid-template-columns:1fr}
  .voy-form-grid{grid-template-columns:1fr}
}

/* demo gate modal, reuses .voy-soon-modal styling from app.css */
.voy-demo-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:var(--voy-color-warning-tint);color:var(--voy-color-warning);border-radius:var(--voy-radius-pill);padding:5px 12px;margin-bottom:10px;
}


.voy-cselect{position:relative;min-width:0}
.voy-cselect-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.voy-cselect-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border:1px solid var(--voy-color-border);border-radius:var(--voy-radius-md,10px);
  background:var(--voy-color-surface);font:inherit;font-size:13px;cursor:pointer;text-align:left;color:var(--voy-color-ink-soft)
}
.voy-cselect-trigger:focus{outline:none;border-color:var(--voy-color-primary);box-shadow:0 0 0 3px var(--voy-color-primary-tint)}
.voy-cselect-trigger.voy-cselect-invalid{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.15)}
.voy-cselect-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.voy-cselect-chevron{flex-shrink:0;color:var(--voy-color-muted);transition:transform .15s ease}
.voy-cselect-trigger[aria-expanded="true"] .voy-cselect-chevron{transform:rotate(180deg)}
.voy-cselect-listbox{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:4px;list-style:none;
  background:var(--voy-color-surface);border:1px solid var(--voy-color-border);border-radius:var(--voy-radius-md,10px);
  box-shadow:0 8px 24px rgba(16,24,40,.12);max-height:260px;overflow-y:auto
}
.voy-cselect-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:7px;
  font-size:13px;cursor:pointer;white-space:nowrap
}
.voy-cselect-option:hover,.voy-cselect-option:focus{background:var(--voy-color-surface-alt);outline:none}
.voy-cselect-option[aria-selected="true"]{background:var(--voy-color-primary-tint)}
.voy-cselect-option-name{color:var(--voy-color-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.voy-cselect-option-price{color:var(--voy-color-accent);font-weight:800;flex-shrink:0}
@media (max-width:760px){
  .voy-cselect-trigger{padding:9px 10px;font-size:12.5px}
  .voy-cselect-option{font-size:12.5px}
}

/* PHONE_COUNTRY_PICKER_V1: country dial-code picker (same behaviour as the other public themes) */
.voy-form-field .phone-field-v65{position:relative;display:flex;align-items:stretch;border:1px solid var(--voy-border,#cfd6e3);border-radius:10px;background:#fff}
.voy-form-field .phone-country-trigger-v65{display:flex;align-items:center;gap:4px;flex:0 0 auto;border:0;border-right:1px solid var(--voy-border,#e3e7ee);background:transparent;padding:0 10px;cursor:pointer;font-size:18px;color:inherit}
.voy-form-field .phone-country-trigger-v65 i{font-style:normal;font-size:11px;opacity:.6}
.voy-form-field .phone-code-input-v65{width:64px;flex:0 0 64px;min-width:0;border:0;border-right:1px solid var(--voy-border,#e3e7ee);border-radius:0;padding:12px 6px 12px 10px;font-weight:800;background:transparent;box-shadow:none}
.voy-form-field .phone-number-input-v65{flex:1 1 auto;width:auto;min-width:0;border:0;border-radius:0;padding:12px 12px;background:transparent;box-shadow:none}
.voy-form-field .phone-code-input-v65:focus,.voy-form-field .phone-number-input-v65:focus{outline:0}
.voy-form-field .phone-field-v65:focus-within{border-color:var(--voy-accent,#2f6fe4)}
.voy-form-field .phone-country-list-v65{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(320px,calc(100vw - 48px));max-height:280px;overflow:auto;background:#fff;color:#172033;border:1px solid var(--voy-border,#cfd6e3);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px}
.voy-form-field .phone-country-list-v65[hidden]{display:none}
.voy-form-field .phone-country-option-v65{display:flex;align-items:center;gap:9px;width:100%;border:0;border-radius:8px;background:transparent;color:inherit;padding:8px 10px;text-align:left;cursor:pointer;font-size:14px}
.voy-form-field .phone-country-option-v65:hover{background:#f1f4fa}
.voy-form-field .phone-country-option-v65 small{margin-left:auto;font-weight:800;opacity:.65}