/* Wizard page (apply.html). Loaded after tokens/base/components. Owner: T5.
   Mobile first: one card per step, sticky step bar, full-width fields, 48px yes/no buttons.
   Desktop (>=900px): two columns of fields + a sticky price summary on the side. */

.wizard { padding-block: var(--space-5) var(--space-8); }

/* ---------- Layout ---------- */
.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.wizard-main, .wizard-card, .wizard-step, .step-inner { min-width: 0; }
.wizard-side { display: none; }
@media (min-width: 900px) {
  .wizard-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); }
  .wizard-side { display: block; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* ---------- Step bar ---------- */
.wizard-top {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: #F2F8FE;   /* the page background: the bar reads as part of the page, not a white strip */
  padding: var(--space-3) 0 var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(15, 63, 140, .10);
}
.wizard-top__title { font-weight: 500; color: var(--blue-900); margin-bottom: var(--space-2); font-size: .95rem; }
.wizard-top .progress-steps { margin-bottom: var(--space-3); }
.progress-steps__btn { color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.progress-steps__btn:hover { color: var(--blue-700); }
.progress-steps__btn:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 6px; }
@media (min-width: 900px) {
  .wizard-top { position: static; border-bottom: 0; padding-top: 0; background: transparent; }
}
/* Phones: a slimmer sticky bar (final design review #9). No labels under the circles (the line above already
   says "שלב 2 מתוך 6: זכאות"), 28px circles. The labels stay in the DOM, visually hidden, so every step button
   keeps its name; the button itself becomes a 44x44 target over its circle (final a11y review #5). */
@media (max-width: 639.98px) {
  .wizard-top { padding-block: 8px; }
  .wizard-top__title { margin-bottom: 6px; font-size: .9rem; }
  .wizard-top .progress-steps { margin-bottom: 8px; }
  .wizard-top .progress-steps li { gap: 0; }
  .wizard-top .progress-steps li .progress-steps__label {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .wizard-top .progress-steps li::before { width: 28px; height: 28px; font-size: .8rem; }
  .wizard-top .progress-steps li:not(:last-child)::after { top: 13px; }
  .wizard-top .progress-steps__btn {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    padding: 0;
    border-radius: 50%;
    z-index: 2;
    text-decoration: none;
  }
  .wizard-top .progress-steps__btn:focus-visible { outline-offset: -4px; border-radius: 50%; }
}
/* High zoom / landscape phone: the sticky header + step bar covered most of the screen (final a11y review #6).
   The site header itself is in components.css (shell owner, see handoff); here only the step bar. */
@media (max-height: 560px) {
  .wizard-top { position: static; }
}

/* ---------- Page + cards: the site's newer visual language (final design review #8) ---------- */
.apply-page { background: #F2F8FE; }
.apply-page .site-footer { margin-top: 0; }
.wizard-card,
.wizard-side .card,
.wiz-resume {
  background: var(--white);
  border: 1px solid rgba(15, 63, 140, .08);
  border-radius: var(--radius-card, 20px);
  box-shadow: var(--shadow-soft);
}
.wiz-req-note { font-size: .9rem; color: var(--muted); margin-bottom: var(--space-4); }
.wiz-req-note .req { color: var(--red-600); font-weight: 700; }
.wiz-section__title:focus:not(:focus-visible) { outline: none; }

/* ---------- Card, sections, nav ---------- */
.wizard-card { padding: var(--space-5) var(--space-4); }
@media (min-width: 640px) { .wizard-card { padding: var(--space-6); } }
.wizard.is-busy .wizard-card { opacity: .7; pointer-events: none; }

.wiz-section + .wiz-section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.wiz-section__head { margin-bottom: var(--space-5); }
.wiz-section__title { margin-bottom: var(--space-2); }
.wiz-section__lead { max-width: 60ch; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.wizard-nav--single { justify-content: flex-end; }
.wizard-nav .btn { flex: 1 1 0; }
/* stop screen: "הבא" looks disabled but stays focusable and explains itself when pressed (e2e #6, design #22) */
.wizard-nav .btn[aria-disabled="true"],
#btn-pay[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pay-blocked { margin-top: var(--space-3); color: var(--red-600); font-weight: 500; font-size: .95rem; }
@media (min-width: 640px) { .wizard-nav .btn { flex: 0 0 auto; min-width: 160px; } }
.draft-note { margin-top: var(--space-3); font-size: .9rem; text-align: center; }
.draft-note.is-error { color: var(--red-600); }

.wiz-errors { margin-bottom: var(--space-5); flex-direction: column; }
.wiz-errors ul { margin: 6px 0 0; padding-inline-start: 1.2em; }
#wiz-alert { margin-bottom: var(--space-5); }

/* ---------- Form grid ---------- */
.form-grid { display: grid; gap: 0 var(--space-4); }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field--yesno .field__label { margin-bottom: 2px; }
.field--checkbox { margin-bottom: var(--space-4); }
.field__hint--latin, .field__hint--digits { display: block; }
.input.hl-critical { border-color: var(--blue-300); background: #FFFDF2; }
/* Latin fields are saved in capitals, like the passport (e2e #3): shown in capitals while typing, converted on blur */
.wizard [data-latin]:not([data-latin="handle"]) { text-transform: uppercase; }
.wizard [data-latin]:not([data-latin="handle"])::placeholder { text-transform: none; }
/* Links inside running text are underlined, not only colored (final a11y review #1, scoped to the wizard) */
.wizard .privacy-note a, .wizard .consents a, .wizard .precontract a, .wizard .declaration a,
.wizard .warn-box a:not(.btn), .wizard .q-card__help a, .wizard .q-risk a, .wizard .alert a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* step 4: after "למלא UNKNOWN" the State hint is highlighted before any error (e2e #12) */
.field__hint.field__hint--focus { color: var(--blue-900); font-weight: 500; background: var(--sky-100); padding: 6px 10px; border-radius: 8px; }
.link-btn { color: var(--blue-700); text-decoration: underline; font: inherit; padding: 0; }
/* step 4: the "UNKNOWN" button sat right on top of the first label */
.wiz-section p:has(> #btn-unknown) { margin-bottom: var(--space-4); }

/* ---------- Side summary ---------- */
.wiz-side__label { font-weight: 700; color: var(--blue-900); margin-bottom: var(--space-2); }
.wiz-side__plan { margin-bottom: var(--space-2); }
.wiz-side__total { margin: var(--space-2) 0; }
.wiz-side__fee { margin-top: var(--space-3); padding: 10px 12px; background: var(--sky-50); border-radius: var(--radius-sm); font-size: .95rem; }
.wiz-side__note { font-size: .875rem; margin: var(--space-3) 0 var(--space-4); }

/* ---------- Step 1: plan cards, counter, summary ----------
   Same composition as the pricing cards on the home page: centered name and big price, the crown centered on
   the top edge, the ribbon in its corner, gold frame on premium. Each card is a <label> around a visually hidden
   native radio (arrow keys move between plans). "✓ נבחר" has its own reserved strip at the bottom, so selecting
   a card never shifts its content (final design review #8, #13). */
.plan-cards { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 18px 0 0; border: 0; min-width: 0; min-inline-size: 0; }
@media (min-width: 640px) { .plan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 26px var(--space-4) 52px;
  border: 2px solid rgba(15, 63, 140, .12);
  border-radius: 18px;
  background-color: var(--white);   /* background-color only: .gold-frame paints the premium card's frame with background-image */
  box-shadow: 0 6px 18px rgba(15, 63, 140, .06);
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .plan-card:hover { border-color: var(--blue-300); }
}
.plan-card:active { transform: scale(.985); }
.plan-card.is-selected { border-color: var(--blue-700); background-color: var(--sky-50); box-shadow: 0 0 0 3px rgba(15, 63, 140, .14), var(--shadow-soft); }
/* premium: the gold frame stays gold on hover and when selected (selection = light fill + blue ring + "✓ נבחר") */
.plan-card.gold-frame { border-width: 3px; padding-top: 44px; }
.plan-card.gold-frame, .plan-card.gold-frame:hover, .plan-card.gold-frame.is-selected { border-color: transparent; }
.plan-card.gold-frame.is-selected {
  --gold-fill: var(--sky-50);
  box-shadow: 0 0 0 3px rgba(15, 63, 140, .22), 0 12px 30px rgba(166, 124, 0, .16);
}
.plan-card:has(input:focus-visible) { outline: 3px solid var(--blue-500); outline-offset: 3px; }
.plan-card--featured { order: -1; }
@media (min-width: 640px) { .plan-card--featured { order: 0; } }
.plan-card__crown {
  position: absolute;
  top: -21px;
  inset-inline-start: 50%;
  transform: translateX(50%);   /* RTL: inset-inline-start is right, so +50% centers it */
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 2;
}
.plan-card__crown svg { width: 24px; height: 24px; }
.plan-card__ribbon { position: absolute; top: 12px; inset-inline-end: 12px; }
.plan-card__name { font-weight: 700; font-size: 1.2rem; color: var(--blue-900); }
.plan-card__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; font-weight: 700; color: var(--blue-900); line-height: 1.15; }
.plan-card__num { font-size: 1.9rem; }
.plan-card__price small { font-weight: 500; font-size: .85rem; color: var(--muted); }
.plan-card__sla { display: inline-flex; padding: 3px 12px; border-radius: 999px; background: var(--sky-100); font-size: .88rem; font-weight: 500; color: var(--blue-900); }
.plan-card--featured .plan-card__sla { background: var(--blue-700); color: var(--white); }
.plan-card__list { display: grid; justify-items: start; gap: 4px; width: 100%; margin: 6px 0 2px; font-size: .9rem; text-align: start; }
.plan-card__item { display: flex; gap: 6px; align-items: flex-start; }
.plan-card__list svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 3px; }
.plan-card__fee { font-size: .85rem; }
.plan-card__chosen {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 10px;
  border-radius: 999px;
  background: var(--blue-700);
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.plan-card__chosen svg { width: 14px; height: 14px; }
.plan-card.is-selected .plan-card__chosen { display: inline-flex; }

/* ---------- Step 1, W2 (Dudu 8.11): premium folds the other cards, the regular → premium note, the count block ----------
   The note sits right after the cards, just above "how many travelers": after tapping "רגיל" the page scrolls until
   the count block is on screen, and the note above it is seen on the way (on phones a note between the regular and
   family cards was scrolled away under the sticky bar). On wider screens a small caret points up at the regular card. */
.plan-upsell { order: 1; }
.plan-switch { order: 2; }
@media (min-width: 640px) {
  .plan-upsell { grid-column: 1 / -1; }
  .plan-switch { grid-column: 1 / -1; }
  /* folded: the premium card keeps its column width (no reflow inside it), the switch sits beside it */
  .plan-cards.is-collapsed .plan-switch { grid-column: 2 / -1; align-self: center; }
}

/* the note: quiet, in the premium card's gold (the bold line in a darker gold for contrast, 6.5:1) */
.plan-upsell {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFCF0 0%, var(--white) 100%);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.5;
}
.plan-upsell__mark {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-100);
  border: 1px solid var(--gold-500);
  color: var(--gold-700);
}
.plan-upsell__mark svg { width: 17px; height: 17px; }
.plan-upsell__text { flex: 1 1 200px; margin: 0; min-width: 0; }
.plan-upsell__text strong { color: #7A5300; font-weight: 700; }
.plan-upsell__btn {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--gold-500);
  border-radius: var(--radius-btn, 12px);
  background: var(--white);
  color: #7A5300;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .plan-upsell__btn:hover { background: var(--gold-100); border-color: var(--gold-700); }
}
.plan-upsell__btn:active { transform: scale(.97); }
.plan-upsell__btn:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
@media (min-width: 640px) {
  /* caret up at the regular card (the first column; RTL: inset-inline-start is the right side) */
  .plan-upsell::before {
    content: '';
    position: absolute;
    top: -7px;
    inset-inline-start: calc((100% - 2 * var(--space-3)) / 6 - 6px);
    width: 12px; height: 12px;
    background: #FFFCF0;
    border-top: 1px solid rgba(212, 175, 55, .55);
    border-inline-start: 1px solid rgba(212, 175, 55, .55);
    transform: rotate(45deg);
  }
}
/* appearing without a view transition (keyboard, older browsers): a short fade, no movement when motion is reduced */
.plan-upsell, .plan-switch {
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.23, 1, .32, 1);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}

.plan-switch { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.plan-switch__more { font-size: .9rem; color: var(--muted); }
@media (min-width: 640px) {
  .plan-cards.is-collapsed .plan-switch { flex-direction: column; align-items: flex-start; padding-inline-start: var(--space-3); }
}
.plan-switch__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-700);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.plan-switch__btn svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .plan-switch__btn:hover { border-color: var(--blue-300); background: var(--sky-50); }
}
.plan-switch__btn:active { transform: scale(.97); }
.plan-switch__btn:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }

/* how many travelers: its own block, so it reads as the second decision of the step */
.count-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius-card, 20px);
  background: var(--white);
  box-shadow: 0 6px 18px rgba(15, 63, 140, .06);
  margin-bottom: 0;
  /* the sticky header + step bar on phones; scrolling into view keeps the block clear of them */
  scroll-margin-top: calc(var(--header-h) + 112px);
  scroll-margin-bottom: var(--space-4);
}
@media (min-width: 900px) { .count-block { scroll-margin-top: calc(var(--header-h) + var(--space-4)); } }
.count-block__text { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.count-block__label { font-size: 1.15rem; font-weight: 700; color: var(--blue-900); }
.count-block .counter { margin-top: 0; }
.count-block > .field__error { flex-basis: 100%; }
.count-block > .field__error:empty { display: none; }
.count-block.field--error { border-color: var(--red-600); }

/* soft transitions (View Transitions API, only when motion is allowed: wizard/step-plan.js decides) */
.plan-card[data-plan-card="regular"] { view-transition-name: plan-regular; }
.plan-card[data-plan-card="premium"] { view-transition-name: plan-premium; }
.plan-card[data-plan-card="family"] { view-transition-name: plan-family; }
.plan-upsell { view-transition-name: plan-upsell; }
.plan-switch { view-transition-name: plan-switch; }
.count-block { view-transition-name: plan-count; }
.plan-summary { view-transition-name: plan-summary; }
.step-inner > .wiz-section:nth-of-type(2):has(#orderer-title) { view-transition-name: plan-orderer; }
#wiz-nav { view-transition-name: wiz-nav; }
#wiz-draft-note { view-transition-name: wiz-draft; }
/* the sticky bars stay above whatever moves under them */
.apply-page .site-header { view-transition-name: site-header; }
.apply-page .wizard-top { view-transition-name: wiz-top; }
::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
::view-transition-old(plan-regular):only-child,
::view-transition-old(plan-family):only-child,
::view-transition-old(plan-upsell):only-child,
::view-transition-old(plan-switch):only-child { animation: plan-out 180ms cubic-bezier(.23, 1, .32, 1) both; }
::view-transition-new(plan-regular):only-child,
::view-transition-new(plan-family):only-child,
::view-transition-new(plan-upsell):only-child,
::view-transition-new(plan-switch):only-child { animation: plan-in 260ms cubic-bezier(.23, 1, .32, 1) 40ms both; }
@keyframes plan-out { to { opacity: 0; transform: scale(.97); } }
@keyframes plan-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .plan-upsell, .plan-switch { transition: opacity 160ms ease; @starting-style { opacity: 0; transform: none; } }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.counter { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: 6px; }
.counter__btn {
  width: 48px; height: 48px;
  border: 2px solid var(--blue-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--blue-700);
  font-size: 1.5rem; font-weight: 700;
  display: grid; place-items: center;
}
.counter__btn:hover { background: var(--sky-100); }
.counter__btn:disabled { opacity: .4; cursor: not-allowed; }
.counter__value { min-width: 48px; text-align: center; font-size: 1.75rem; font-weight: 700; color: var(--blue-900); }

.plan-summary { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card, 20px); background: var(--sky-50); border: 1px solid var(--sky-200); display: grid; gap: var(--space-2); }
.plan-summary__total { font-size: 1.1rem; }
.plan-summary__total strong { font-size: 1.5rem; color: var(--blue-900); }
.plan-summary .alert { margin-top: var(--space-2); }

/* ---------- Traveler by traveler (W2, Dudu 8.11): the small "1 · 2 · 3" strip + "נוסע/ת 2 מתוך 3" ----------
   One circle per traveler. Reached travelers are buttons (back to them), the current one is filled, the rest are
   plain numbers. A small colored dot = that traveler's status (ready / warning / stop). Wraps to a second row
   with 10 travelers at 375px instead of scrolling sideways. */
.trav-seq { margin: 0 0 var(--space-4); }
.trav-seq__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trav-seq__item { display: flex; align-items: center; gap: 8px; }
.trav-seq__item:not(:last-child)::after { content: ''; width: 12px; height: 2px; border-radius: 2px; background: var(--line); }
.trav-seq__dot {
  position: relative;
  width: 40px; height: 40px;
  border: 2px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.trav-seq__dot.is-reached { border-color: var(--blue-700); color: var(--blue-700); cursor: pointer; transition: background-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .trav-seq__dot.is-reached:hover { background: var(--sky-100); } }
.trav-seq__dot.is-reached:active { transform: scale(.95); }
.trav-seq__dot.is-reached:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.trav-seq__dot.is-current { border-color: var(--blue-700); background: var(--blue-700); color: var(--white); box-shadow: 0 0 0 4px rgba(15, 63, 140, .14); }
.trav-seq__dot--ok::after, .trav-seq__dot--warn::after, .trav-seq__dot--stop::after {
  content: '';
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--white);
}
.trav-seq__dot--ok::after { background: var(--ok); }
.trav-seq__dot--warn::after { background: var(--warn); }
.trav-seq__dot--stop::after { background: var(--red-600); }
.traveler-panel__title { margin-bottom: var(--space-4); color: var(--blue-700); scroll-margin-top: calc(var(--header-h) + 112px); }
.traveler-panel__title:focus:not(:focus-visible) { outline: none; }

/* ---------- Step 2: option buttons, stop screen, warn ---------- */
.option-list { display: grid; gap: var(--space-2); margin-top: 6px; }
.option-btn {
  position: relative;
  display: grid; gap: 2px;
  text-align: start;
  padding: 12px 16px;
  min-height: var(--control-h);
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .option-btn:hover { border-color: var(--blue-300); background: var(--sky-50); }
}
.option-btn.is-selected, .option-btn:has(input:checked) { border-color: var(--blue-700); background: var(--blue-700); color: var(--white); }
.option-btn:has(input:focus-visible) { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.field--error .option-btn { border-color: var(--red-600); }
.option-btn__label { font-weight: 500; }
.option-btn__hint { font-size: .85rem; opacity: .85; }
.q-list .field--yesno { padding-top: var(--space-2); }
.verdict { margin-top: var(--space-4); }
.stop-screen {
  padding: var(--space-5);
  border-radius: var(--radius-card, 20px);
  background: var(--red-100);
  border: 1px solid #F5C3CA;
  display: grid; gap: var(--space-3);
}
.stop-screen__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--red-600); display: grid; place-items: center; }
.stop-screen__icon svg { width: 26px; height: 26px; }
.stop-screen__title { color: #8E1A2A; }
.stop-screen__nocharge { padding: 10px 12px; background: var(--white); border-radius: var(--radius-sm); }
.stop-screen__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stop-screen__actions .btn { flex: 1 1 auto; white-space: normal; text-align: center; padding-block: 10px; line-height: 1.3; min-width: 0; }
.stop-screen:focus { outline: none; }
.stop-screen:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; }
.stop-screen__age { padding: 10px 12px; background: var(--white); border-radius: var(--radius-sm); font-weight: 500; }

/* Age vs. 5-year passport (e2e #1): the stop next to the date of birth in step 3, and on the traveler card in step 6.
   The box itself is the error message, so the generic error line under it stays hidden. */
.age-conflict { margin: 0 0 var(--space-4); }
.age-conflict[hidden] { display: none; }
.age-conflict .field__error { display: none !important; }
.age-conflict.field--error .age-conflict__box { box-shadow: 0 0 0 2px var(--red-600); }
.age-conflict__box strong { display: block; margin-bottom: 4px; }
.age-conflict__actions { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.validity-warn, .dup-warn { margin: 0 0 var(--space-4); }
.validity-warn[hidden], .dup-warn[hidden] { display: none; }
.validity-warn strong { display: block; }
.contact-prefill { font-size: .9rem; margin: 0 0 var(--space-3); padding: 8px 12px; background: var(--sky-50); border-radius: var(--radius-sm); }
.warn-box { flex-direction: row; }
.warn-box p { margin: 6px 0; }
.warn-box__actions { margin-bottom: var(--space-3); }
.warn-box .field { margin: var(--space-2) 0 0; }

/* ---------- Step 3: photos, lists ---------- */
.privacy-note { font-size: .9rem; margin-bottom: var(--space-5); padding: 10px 12px; background: var(--sky-50); border-radius: var(--radius-sm); }
.photo-block { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .photo-block { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.photo-example img { width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--sky-50); }
.photo-example figcaption { font-size: .85rem; margin-top: 6px; text-align: center; }
.photo-tips { margin: 0 0 var(--space-4); padding-inline-start: 1.3em; display: grid; gap: 6px; font-size: .95rem; }
.list-rows { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.list-row { padding: var(--space-3) var(--space-4) var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--sky-50); }
.list-row .btn { margin-bottom: var(--space-2); }
.reveal { padding: var(--space-3) var(--space-4) 0; margin: -6px 0 var(--space-4); border-inline-start: 3px solid var(--sky-200); }

/* ---------- Step 5: questions ---------- */
.q-progress { margin-bottom: var(--space-4); }
.q-card { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.q-card:last-of-type { border-bottom: 1px solid var(--line); }
.q-card__num { font-size: .85rem; font-weight: 700; color: var(--blue-700); margin-bottom: 4px; letter-spacing: .02em; }
.q-card .field__label { font-weight: 500; line-height: 1.55; }
.q-card .field--yesno { margin-bottom: var(--space-3); }
.q-details { margin: -4px 0 var(--space-3); font-size: .95rem; }
.q-details summary { cursor: pointer; color: var(--blue-700); font-weight: 500; }
.q-details ul { margin-top: 8px; display: grid; gap: 4px; }
.q-details p { margin-top: 8px; }
.q-card__help { font-size: .9rem; }
.q-card__risk .alert { margin-top: var(--space-3); }

/* ---------- Step 6: summary, consents, signature, pay ---------- */
.sum-grid { display: grid; gap: var(--space-4); }
.sum-traveler { padding: var(--space-4); }
@media (min-width: 640px) { .sum-traveler { padding: var(--space-5); } }
.sum-traveler__title { margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sum-block + .sum-block { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.sum-block__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: 6px; }
.sum-block__head h4 { color: var(--blue-700); }
.sum-list { margin: 0; display: grid; gap: 4px; }
.sum-row { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: .95rem; }
.sum-row dt { color: var(--muted); }
.sum-row dd { margin: 0; overflow-wrap: anywhere; }
/* LTR values (names, dates, phone, mail) keep their own direction but sit against the label, like the Hebrew
   values. text-align: start inside a .ltr cell meant "left", 390px away from the label (final design review #4). */
.sum-row dd.ltr { text-align: right; }
.sum-row--critical dd { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; direction: rtl; }
.sum-row--note dd { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-check { background: #FFE98A; color: var(--ink); padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; }
.sum-row__note { font-size: .8rem; color: #7A5300; font-weight: 500; direction: rtl; }

.precontract { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card, 20px); background: var(--sky-50); margin-bottom: var(--space-5); font-size: .95rem; line-height: 1.65; }
.precontract h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.precontract strong { color: var(--blue-900); }

.consents { display: grid; gap: var(--space-3); }
.consents .field { margin-bottom: 0; }
.consents .checkbox { line-height: 1.55; font-size: .95rem; }

.declaration { padding: var(--space-5); border-radius: var(--radius-card, 20px); box-shadow: var(--shadow-soft); border: 1px solid var(--line); background: var(--white); margin-bottom: var(--space-5); }
.declaration h3 { margin-bottom: var(--space-3); }
.declaration ol { display: grid; gap: var(--space-2); margin: var(--space-3) 0; line-height: 1.6; }

.signature { display: grid; gap: var(--space-3); }
.signature__modes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sig-mode {
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink); font-weight: 500;
}
.sig-mode.is-active, .sig-mode[aria-pressed="true"] { border-color: var(--blue-700); background: var(--sky-100); color: var(--blue-900); box-shadow: inset 0 0 0 1px var(--blue-700); }
.signature__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: .9rem; }
.signature__saved { max-width: 100%; height: 180px; object-fit: contain; border: 1px solid var(--blue-500); border-radius: var(--radius-sm); background: var(--white); }
.signature.field--error .signature-pad { border-color: var(--red-600); }

.pay-section { text-align: center; }
.pay-disclosure { font-size: .9rem; color: var(--blue-900); background: var(--sky-100); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
#btn-pay { font-size: 1.15rem; }

/* ---------- Resume card ---------- */
.wiz-resume { max-width: 640px; margin: 0 auto; display: grid; gap: var(--space-4); text-align: center; }
.wiz-resume__actions { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .wiz-resume__actions { grid-template-columns: 1fr 1fr; } }

/* ---------- Misc ---------- */
.image-picker { margin-top: var(--space-2); }
@media print { .wizard-nav, .wizard-side, .wizard-top { display: none; } }

/* ---------- Step 3, round 2 (E): passport autofill, confirm fields, selfie attest, social rows ---------- */
/* Blue note above the passport details after the photo was read */
.autofill-note { margin-bottom: var(--space-5); border-color: var(--blue-300); }
.autofill-note strong { color: var(--blue-900); font-size: 1.05rem; }
.autofill-note__more, .autofill-note__conflicts { display: block; font-size: .92rem; }
.autofill-note__conflicts { margin-top: 6px; font-weight: 500; color: #7A5300; }
/* השם: "בדקו במיוחד את האיות" או "לא הצלחנו לקרוא את השם" (ביקורת סבב 2, ח-1) */
.autofill-note__name { display: block; margin: 4px 0 6px; font-weight: 600; color: var(--blue-900); }
.autofill-note__name[hidden] { display: none; }
.autofill-note__name--unread { padding: 8px 10px; border-radius: var(--radius-sm, 8px); background: #FFF6DB; color: #5C3D00; }
/* "מהדרכון" tag next to the label of a field that was filled from the photo */
.field__label .from-passport { font-size: .75rem; line-height: 1.5; padding: 0 8px; vertical-align: 1px; }
.field.is-autofilled .input, .field.is-autofilled .select { border-color: var(--blue-300); }
/* a name read from the passport has no check digit: yellow like the passport number, "בדקו את האיות" (e2e #5) */
.field.is-spellcheck .input { background: #FFFDF2; border-color: #D9A800; }
.field.is-autofilled .input.hl-critical { background: #FFFDF2; }

/* Second entry of date of birth / passport number: green check when it matches, note when paste is blocked */
.confirm-ok { display: inline-flex; align-items: center; gap: 6px; color: #12683D; font-weight: 500; font-size: .9rem; }
.confirm-ok[hidden], .confirm-paste[hidden] { display: none; }
.confirm-ok svg { flex: none; }
.confirm-paste { display: block; color: var(--red-600); font-weight: 500; font-size: .9rem; }
.field--error .confirm-ok { display: none; }

/* Selfie: the mandatory "no glasses / no hat / looking at the camera / light background" box */
.selfie-attest { margin-top: var(--space-4); }
.selfie-attest.field--error .checkbox--boxed { border-color: var(--red-600); background: var(--red-100); }

/* Lists in step 3 (other names, other documents): the add button is as wide as the rows */
.list-add { width: 100%; min-height: var(--control-h); border-style: dashed; }

/* Social accounts: [platform][username][remove] on one row; both controls 48px, top-aligned on the same line,
   and the remove button sits on that line too (an invisible label above it takes the label's height). */
.social-rows { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.social-row {
  display: grid;
  /* בנייד: פלטפורמה מעל, שם משתמש ברוחב מלא (ביקורת סבב 2, ק-7); מ-640px באותה שורה */
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-3) 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--sky-50);
}
.social-row > .field { margin-bottom: var(--space-3); min-width: 0; }
.social-row__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-2)) 0 var(--space-2); }
.social-row__spacer { display: none; }
.social-row__remove { min-height: 40px; padding: 0 12px; font-size: .95rem; }
.social-add { width: 100%; min-height: var(--control-h); border-style: dashed; }
@media (min-width: 640px) {
  .social-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; padding: var(--space-3) var(--space-4) 0; }
  .social-row__actions { grid-column: auto; display: grid; gap: 6px; margin: 0 0 var(--space-3); align-content: start; }
  .social-row__spacer { display: block; visibility: hidden; }
  .social-row__remove { min-height: var(--control-h); height: var(--control-h); }
}

/* כפתור הוואטסאפ הצף לא מסתיר את סוף הטופס בנייד: המקום בסוף כל דף ב-components.css (main::after) */