/* Open Day Page - Premium */

.open-day-page {
  padding: 72px 24px 80px;
  direction: rtl;
}

.open-day-inner {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

.open-day-title {
  font-size: 48px;
  font-weight: 800;
  color: var(--text-color);
  margin-bottom: 18px;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.open-day-lead {
  font-size: 20px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 56px;
  font-weight: 400;
  font-family: var(--font-body);
}

.open-day-lead__logo svg {
  height: 1em;
  /* transform: translateY(-1px); */
}

.open-day-card {
  background: linear-gradient(135deg, var(--bg-card-start, #E0ECFF) 0%, var(--bg-card-end, #EDF3FF) 100%);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  margin-bottom: 56px;
  box-shadow: var(--shadow-sm);
}

.open-day-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 14px;
  font-family: var(--font-display);
}

.open-day-card p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 400;
}

.open-day-benefits {
  text-align: right;
  margin-bottom: 56px;
}

.open-day-benefits h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 24px;
  font-family: var(--font-display);
}

.open-day-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.open-day-benefits li {
  padding: 14px 22px 14px 0;
  position: relative;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  font-weight: 400;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--border-light);
}

.open-day-benefits li::before {
  content: '';
  position: absolute;
  right: 0;
  top: 20px;
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
}

.open-day-benefits li:last-child {
  border-bottom: none;
}

.open-day-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Wizard ─────────────────────────────────── */

.wizard-container {
  max-width: 680px;
}

/* ── Compact embeddable variant ──────────────────────────────────
   Used by the /lp/go open-day two-column section (OpenDayWizard :compact).
   Fills its column, forces every option grid to a single column, and
   tightens type + spacing so the whole flow fits a ~400px-wide card. */
.wizard-container--compact {
  max-width: 100%;
}
.wizard-container--compact .wizard-progress {
  margin-bottom: 28px;
}
.wizard-container--compact .wizard-step-label {
  font-size: 13px;
}
.wizard-container--compact .wizard-question {
  font-size: 21px;
  line-height: 1.35;
  margin-bottom: 22px;
}
/* Single-column option grids (the narrow column can't hold the multi-up
   layouts the full-page wizard uses). */
.wizard-container--compact .wizard-options,
.wizard-container--compact .wizard-options--rich,
.wizard-container--compact .wizard-options--rich-compact,
.wizard-container--compact .wizard-options--courses {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 26px;
  max-width: 100%;
}
/* Plain label options: shorter + tighter. */
.wizard-container--compact .wizard-option {
  min-height: 58px;
  padding: 14px 18px 14px 46px;
}
.wizard-container--compact .wizard-option-label {
  font-size: 15px;
}
/* Rich info-cards: smaller hero + padding. */
.wizard-container--compact .wizard-option--rich {
  padding: 18px 14px 16px;
}
.wizard-container--compact .wizard-option-hero {
  width: 52px;
  height: 52px;
  font-size: 22px;
}
/* Course cards: shorter blocks in the narrow column. */
.wizard-container--compact .wizard-options--courses .wizard-course-card {
  min-height: 0;
  padding: 20px 18px;
}
.wizard-container--compact .wizard-options--courses .wizard-course-card--bundle {
  min-height: 0;
  padding: 24px 18px;
}
/* Contact-info: stack the first/last-name pair; keep inputs full-width. */
.wizard-container--compact .wizard-form {
  max-width: 100%;
}
.wizard-container--compact .wizard-form-row {
  flex-direction: column;
}
.wizard-container--compact .wizard-nav {
  margin-top: 24px;
}
/* Consent row: one step down in type so the required tick and the button
   still fit the LP column without pushing the ask down the page. */
.wizard-container--compact .wizard-consent {
  margin-top: 1rem;
}
.wizard-container--compact .wizard-consent .consent__text {
  font-size: 0.85rem;
}

.wizard-progress {
  width: 100%;
  height: 4px;
  background: #e8e8e8;
  border-radius: 2px;
  margin-bottom: 48px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.wizard-step {
  animation: wizardFadeIn 0.35s ease;
}

@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wizard-step-label {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-weight: 500;
}

.wizard-question {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 32px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  line-height: 1.4;
}

.wizard-question-hint {
  font-size: 14px;
  color: #6e6e73;
  margin-top: -24px;
  margin-bottom: 24px;
  font-style: italic;
}

/* ── Survey-note callout (poll questions) ──────────────────────
   On the questions whose aggregate answers set the real course
   schedule/format (frequency, days, format), this banner frames the
   pick as a vote. Styled to stand out as a call-to-action: brand-blue
   field, a scarce three-stop gradient accent rail, an icon chip, and
   confident solid-blue copy (gradient never sits on the bold text). */
.wizard-poll-note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -8px auto 26px;
  max-width: 560px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 113, 227, 0.24);
  border-radius: 14px;
  background: rgba(0, 113, 227, 0.06);
  box-shadow: 0 6px 20px rgba(0, 60, 130, 0.08);
  overflow: hidden;
  text-align: start;
}

.wizard-poll-note::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

.wizard-poll-note__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 16px;
}

.wizard-poll-note__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary-color);
  letter-spacing: 0.005em;
}

/* The multi-select hint normally tucks up under the heading; when the
   poll banner sits between them, cancel that pull so they don't overlap. */
.wizard-poll-note + .wizard-question-hint {
  margin-top: 0;
}

/* ── Wizard Options (single-choice card grid) ── */

.wizard-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.wizard-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  width: 100%;
  padding: 20px 26px 20px 52px;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  background: #fff;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  color: #2d2d2d;
  cursor: pointer;
  text-align: right;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.wizard-option:hover {
  border-color: var(--primary-color);
  background: rgba(0, 113, 227, 0.035);
  box-shadow: 0 6px 18px rgba(0, 113, 227, 0.08);
  transform: translateY(-2px);
}

.wizard-option:focus-visible {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
}

.wizard-option.selected {
  border-color: var(--primary-color);
  background: rgba(0, 113, 227, 0.08);
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.14);
}

.wizard-option-label {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-option.selected .wizard-option-label {
  color: var(--primary-color);
  font-weight: 600;
}

.wizard-option-sublabel {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #6b6b6b;
}

.wizard-option.selected .wizard-option-sublabel {
  color: var(--primary-color);
  opacity: 0.85;
  font-weight: 400;
}

.wizard-option-check {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wizard-option.selected .wizard-option-check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ── Option with inline free-text input (e.g. "Other: ___") ──── */

.wizard-option-wrap {
  display: contents;
}

.wizard-option-wrap.has-text-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
}

.wizard-option-text-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  background: #fff;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-size: 1rem;
  color: #2d2d2d;
  box-shadow: 0 1px 2px rgba(0, 113, 227, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  direction: rtl;
  text-align: right;
}

.wizard-option-text-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.wizard-option-text-input::placeholder {
  color: #999;
}

/* ── Rich info-card variant (q6-session-frequency) ────────────────
   A vertical card with a hero icon at the top, short title, tagline,
   and a three-bullet stat row. Intended to replace a long paragraph
   with at-a-glance infographic bullets. Three cards sit side-by-side
   on desktop and stack on mobile. */

.wizard-options--rich {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Exclusive opt-out options (e.g. "אין לי העדפה") span the full row below
   the other options so they read as a row-wide opt-out rather than as just
   another card. Applies to both the rich-card grid (q6) and the plain
   auto-fit grid (q7 days). */
.wizard-option-wrap.is-exclusive {
  display: block;
  grid-column: 1 / -1;
}

/* Because it spans the full row, the opt-out reads as a centred row-wide
   action rather than a left-edge list item. Symmetric inline padding keeps
   the label optically centred despite the absolutely-positioned check
   circle (mirrors the .wizard-options--rich-compact meta-option treatment). */
.wizard-option-wrap.is-exclusive .wizard-option {
  justify-content: center;
  text-align: center;
  padding-inline: 52px;
}

.wizard-option-wrap.is-exclusive .wizard-option-label {
  align-items: center;
}

.wizard-option--rich {
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
  padding: 22px 14px 18px;
  gap: 10px;
  overflow: hidden;
}

/* Brand-gradient rail that "unlocks" on selection */
.wizard-option--rich::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s ease;
  border-radius: 16px 16px 0 0;
}

.wizard-option--rich.selected::before {
  transform: scaleX(1);
}

.wizard-option-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(0, 113, 227, 0.12) 0%, rgba(189, 50, 214, 0.10) 100%);
  color: var(--primary-color);
  font-size: 28px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.wizard-option--rich:hover .wizard-option-hero {
  transform: translateY(-2px) scale(1.04);
}

.wizard-option--rich.selected .wizard-option-hero {
  background: linear-gradient(140deg, #0894ff 0%, #bd32d6 100%);
  color: #fff;
  transform: scale(1.06);
}

.wizard-option-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1f;
}

.wizard-option--rich.selected .wizard-option-title {
  color: var(--primary-color);
}

.wizard-option-tagline {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5a6475;
  background: rgba(0, 113, 227, 0.06);
  border: 1px solid rgba(0, 113, 227, 0.12);
}

.wizard-option--rich.selected .wizard-option-tagline {
  color: var(--primary-color);
  background: rgba(0, 113, 227, 0.12);
  border-color: rgba(0, 113, 227, 0.22);
}

.wizard-option-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.wizard-option-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(0, 113, 227, 0.04);
  font-size: 13px;
  line-height: 1.35;
  color: #3c4455;
  text-align: start;
  transition: background 0.2s ease, color 0.2s ease;
}

.wizard-option-bullets li i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--primary-color);
  background: rgba(0, 113, 227, 0.10);
  border-radius: 6px;
}

.wizard-option--rich.selected .wizard-option-bullets li {
  background: rgba(0, 113, 227, 0.08);
  color: #1d1d1f;
}

.wizard-option--rich.selected .wizard-option-bullets li i {
  background: rgba(0, 113, 227, 0.18);
}

.wizard-option--rich .wizard-option-check {
  top: 14px;
  inset-inline-end: 14px;
  left: auto;
  transform: scale(0.6);
}

.wizard-option--rich.selected .wizard-option-check {
  transform: scale(1);
}

/* ── Compact rich grid (icon + title + tagline, no stat-bullets) ──
   Used by the "other technological background" question. Four
   category cards sit 2-up and centred; the brand-gradient rail and
   the hero-icon fill-on-select (inherited from .wizard-option--rich)
   keep the step playful without inventing fake stats. The plain
   meta-options ("אחר" with its text input, and the "לא" opt-out)
   span the full row beneath the category grid. */
.wizard-options--rich-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
  margin-inline: auto;
}

.wizard-options--rich-compact .wizard-option--rich {
  padding: 26px 18px 24px;
  gap: 12px;
}

/* The two plain meta-options ("לא" opt-out at the top, "אחר" free-text at
   the bottom) span the full row and read as centred opt-in/out actions
   rather than left-edge list rows. Symmetric inline padding keeps the
   label optically centred despite the absolutely-positioned check circle. */
.wizard-options--rich-compact .wizard-option-wrap .wizard-option {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
  padding-inline: 52px;
}

.wizard-options--rich-compact .wizard-option-wrap .wizard-option-label {
  align-items: center;
}

/* ── Course-of-interest cards ──────────────────────────────────
   Bespoke step layout: the two single courses share the top row;
   the full study track and the "undecided" opt-out each span both
   columns. The brand wordmarks (Logo10x / Logo10xArchitect /
   Logo10xCourse) act as the card title, a factual subtitle sits
   beneath, and a three-stop gradient rail unlocks on selection. */
.wizard-options--courses {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 680px;
  margin-inline: auto;
}

.wizard-options--courses .wizard-course-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 128px;
  padding: 26px 22px;
  gap: 12px;
  overflow: hidden;
}

.wizard-options--courses .wizard-course-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s ease;
  border-radius: 16px 16px 0 0;
}

.wizard-options--courses .wizard-course-card.selected::before {
  transform: scaleX(1);
}

.wizard-options--courses .wizard-course-card__logo {
  line-height: 0;
}

.wizard-options--courses .wizard-course-card__logo svg {
  display: block;
  height: 30px;
  width: auto;
}

.wizard-options--courses .wizard-course-card__sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #5a6475;
  max-width: 320px;
}

.wizard-options--courses .wizard-course-card.selected .wizard-course-card__sub {
  color: #3c4455;
}

.wizard-options--courses .wizard-course-card .wizard-option-check {
  top: 14px;
  inset-inline-start: auto;
  inset-inline-end: 14px;
  transform: scale(0.6);
}

.wizard-options--courses .wizard-course-card.selected .wizard-option-check {
  transform: scale(1);
}

/* Full study track + undecided opt-out span both columns. */
.wizard-options--courses .wizard-course-card--bundle,
.wizard-options--courses .wizard-course-card--plain {
  grid-column: 1 / -1;
}

/* Full study track - the most prominent card: taller, a soft brand
   glow that deepens on selection, and a wide single-line wordmark. */
.wizard-options--courses .wizard-course-card--bundle {
  min-height: 176px;
  padding: 32px 26px;
  gap: 14px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 148, 255, 0.05) 0%, rgba(189, 50, 214, 0.035) 45%, transparent 70%),
    #fff;
}

.wizard-options--courses .wizard-course-card--bundle:hover {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 148, 255, 0.08) 0%, rgba(189, 50, 214, 0.05) 45%, transparent 72%),
    rgba(0, 113, 227, 0.035);
}

.wizard-options--courses .wizard-course-card--bundle.selected {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 148, 255, 0.11) 0%, rgba(189, 50, 214, 0.06) 45%, transparent 72%),
    rgba(0, 113, 227, 0.05);
}

.wizard-options--courses .wizard-course-card__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-color);
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.16);
}

.wizard-options--courses .wizard-course-card--bundle.selected .wizard-course-card__badge {
  background: rgba(0, 113, 227, 0.14);
  border-color: rgba(0, 113, 227, 0.26);
}

.wizard-options--courses .wizard-course-card__logo--course svg {
  height: auto;
  width: 100%;
  max-width: 380px;
}

/* Undecided - deliberately plain and short: no logo, no rail,
   understated text that turns brand-blue when chosen. */
.wizard-options--courses .wizard-course-card--plain {
  min-height: 60px;
  padding: 18px 22px;
  gap: 0;
}

.wizard-options--courses .wizard-course-card--plain::before {
  display: none;
}

.wizard-options--courses .wizard-course-card__plain {
  font-size: 16px;
  font-weight: 400;
  color: #5a6475;
}

.wizard-options--courses .wizard-course-card--plain.selected .wizard-course-card__plain {
  color: var(--primary-color);
}

/* ── Slider (scale question) ─────────────────── */

/* ── Wizard Slider (scale / likert) ──────────────
   Minimalist stepped slider in the Apple / Anthropic register: a thin rail,
   a small clean thumb, restrained typography, and a discrete per-step icon
   row as a segmented shortcut. Layout vars are chosen so pip/step-dot
   centers align pixel-exactly with the native thumb center at each value. */
.wizard-slider-container {
  --thumb-size: 22px;
  --track-height: 4px;
  --pip-size: 4px;
  /* Step-box width lives with the other layout vars: the centring margin on
     .wizard-slider-step, the phone override and the end-of-row overhang all
     derive from it, so they cannot drift apart. */
  --step-width: 76px;
  /* Bare ratio 0..1, set by OpenDayWizard. Not a percentage: see the fill
     rule below, which scales it by the thumb's travel rather than the rail. */
  --slider-fill: 0;
  /* Apple-like system-blue fill - single brand hue with a whisper of
     top-to-bottom shade for dimensionality. The brand gradient stays
     rare; this single-hue fill matches iOS slider restraint. */
  --slider-track-gradient: linear-gradient(180deg, #1A85EC 0%, #0071E3 100%);
  --slider-track-shadow: rgba(0, 113, 227, 0.16);

  margin: 16px auto 32px;
  max-width: 520px;
  padding: 0;
  direction: rtl;
}

.wizard-slider-value-display {
  text-align: center;
  min-height: 48px;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.wizard-slider-icon {
  font-size: 22px;
  color: var(--text-secondary);
  animation: wizardSliderValuePop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform: translateY(3px);
}

.wizard-slider-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.02em;
  animation: wizardSliderValuePop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes wizardSliderValuePop {
  0%   { transform: translateY(4px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

.wizard-slider-value { animation-name: wizardSliderValuePop; }
.wizard-slider-icon { animation-name: wizardSliderValuePop; }

.wizard-slider-placeholder {
  font-size: 13.5px;
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Track + thumb ───────────────────────────── */

.wizard-slider-track {
  position: relative;
  padding: 0 calc(var(--thumb-size) / 2);
  height: var(--thumb-size);
  display: flex;
  align-items: center;
}

/* base track */
.wizard-slider-track::before {
  content: "";
  position: absolute;
  inset: calc(50% - var(--track-height) / 2) calc(var(--thumb-size) / 2);
  height: var(--track-height);
  border-radius: 999px;
  background: #E8EDF4;
}

/* live fill, driven by --slider-fill; RTL-aware via `inset-inline-end` */
.wizard-slider-track::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--track-height) / 2);
  height: var(--track-height);
  /* Anchor at inline-start (the min side: right in RTL, left in LTR) so
     the fill grows from min toward the thumb. Previously anchored on
     inline-end, which in RTL visually fills from the max side → "backwards". */
  inset-inline-start: calc(var(--thumb-size) / 2);
  /* Scale the ratio by the thumb's TRAVEL, not by the rail. This element's
     containing block is the whole track, but the thumb only crosses the track
     minus its own width, so a plain percentage ran ahead of the thumb by up to
     half a thumb per step and poked past the end of the rail at max. */
  width: calc(var(--slider-fill) * (100% - var(--thumb-size)));
  border-radius: 999px;
  background: var(--slider-track-gradient);
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.wizard-slider-container.is-unset .wizard-slider-track::after {
  opacity: 0;
}

/* Tick pips - tiny dots on the rail. Restrained: visible only as a hint that
   the scale is discrete. Inset compensates for pip radius so first/last pip
   CENTERS align with the thumb center at min/max. */
.wizard-slider-pips {
  position: absolute;
  inset: 0 calc(var(--thumb-size) / 2 - var(--pip-size) / 2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.wizard-slider-pip {
  width: var(--pip-size);
  height: var(--pip-size);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 60, 130, 0.22);
  transition: opacity 0.2s ease;
}

.wizard-slider-pip.is-filled {
  opacity: 0;
}

/* Native range input - invisible track, visible thumb on top */
.wizard-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  margin: 0;
  padding: 0;
  cursor: grab;
  direction: rtl;
}

.wizard-slider:active { cursor: grabbing; }

.wizard-slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
  border: none;
}

.wizard-slider::-moz-range-track {
  height: 100%;
  background: transparent;
  border: none;
}

.wizard-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.14),
    0 2px 6px rgba(0, 60, 130, 0.12),
    0 0 0 0 rgba(0, 113, 227, 0);
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.18s ease;
}

.wizard-slider::-webkit-slider-thumb:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.18),
    0 3px 10px rgba(0, 60, 130, 0.16);
}

.wizard-slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.18),
    0 2px 6px rgba(0, 60, 130, 0.12),
    0 0 0 4px rgba(0, 113, 227, 0.18);
}

.wizard-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.22),
    0 4px 12px rgba(0, 60, 130, 0.22);
}

.wizard-slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 60, 130, 0.14);
  box-shadow: 0 2px 6px rgba(0, 60, 130, 0.12);
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.wizard-slider::-moz-range-thumb:hover { transform: scale(1.05); }

/* ── Stepped icon row (clickable shortcut, visible at-a-glance scale) ──
   The inner box is inset by half the thumb on each side so its width equals
   the thumb's traversal distance. Each button is absolutely positioned at
   `inset-inline-start: (idx/(N-1))*100%` and pulled back by half its own
   width, so the box, and the dot centred inside it, sits on that anchor:
   pixel-exact alignment with the pip / thumb center. The two end buttons
   therefore reach half a box less the half-thumb inset past the row: 27px
   at --step-width 76px, 21px at 64px. The host card's inline padding has to
   clear that (see .lp-openday__wizard-wrap in lp.css). */
.wizard-slider-steps {
  margin-top: 10px;
}

.wizard-slider-steps-inner {
  position: relative;
  height: 62px;
  margin-inline: calc(var(--thumb-size) / 2);
}

.wizard-slider-step {
  all: unset;
  /* `all: unset` reverts box-sizing to content-box and outranks the global
     reset, so restate it: the centring margin below is half of the BORDER
     box, and any padding added here would silently widen the box again and
     narrow the label's content column. */
  box-sizing: border-box;
  position: absolute;
  top: 0;
  /* Logical centring on the anchor: pull the box back by half its own width.
     A physical translateX(50%) only lands right while the container is RTL,
     and every rule that touches `transform` has to restate it (the hover
     lift below used to carry a copy). */
  margin-inline-start: calc(-1 * var(--step-width) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: var(--step-width);
  border-radius: var(--radius-sm);
  transition: transform 0.18s ease;
}

.wizard-slider-step:hover { transform: translateY(-1px); }

.wizard-slider-step:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.wizard-slider-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-size: 11px;
  transition: border-color 0.18s ease,
              color 0.18s ease,
              background 0.18s ease,
              transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.18s ease;
}

.wizard-slider-step:hover .wizard-slider-step-dot {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

.wizard-slider-step.is-passed .wizard-slider-step-dot {
  border-color: transparent;
  color: #FFFFFF;
  background: var(--slider-track-gradient);
}

.wizard-slider-step.is-active .wizard-slider-step-dot {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(94, 107, 133, 0.12);
}

.wizard-slider-step-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
  transition: color 0.18s ease, font-weight 0.18s ease;
  letter-spacing: 0.005em;
}

.wizard-slider-step:hover .wizard-slider-step-label { color: var(--text-secondary); }

.wizard-slider-step.is-active .wizard-slider-step-label {
  color: var(--text-color);
  font-weight: 600;
}

/* ── Context anchors (min / max narrative framing) ──
   Intentionally quiet - a whisper beneath the control, not a frame. */
.wizard-slider-anchors {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 calc(var(--thumb-size) / 2);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  font-family: var(--font-body);
}

.wizard-slider-anchor {
  opacity: 0.85;
}

/* ── Wizard Slider Description (live per-step format note) ── */
/* Used only when the question's ScaleOptions defines a `descriptions[]`
   array. Subtle card below the anchors that cross-fades on each step
   change - a quiet, gamifying reveal of what the pace actually means. */

.wizard-slider-description {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #F8FAFD 0%, #F1F4FA 100%);
  border: 1px solid rgba(0, 60, 130, 0.08);
  text-align: center;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Minimalist top accent - a 2px three-stop brand-gradient rail that scales
   in from center once the user engages the slider, so the panel "unlocks"
   visibly when a choice is made. */
.wizard-slider-description::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.wizard-slider-description:not(.is-unset)::before {
  transform: scaleX(1);
}

.wizard-slider-description.is-unset {
  background: rgba(245, 247, 250, 0.5);
}

.wizard-slider-description-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #191A23;
  font-family: var(--font-body);
  max-width: 520px;
}

.wizard-slider-description-text--placeholder {
  color: #8E8F9E;
  font-style: italic;
}

/* Cross-fade transition when stepping between values. */
.wizard-desc-enter-active,
.wizard-desc-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.wizard-desc-enter-from {
  opacity: 0;
  transform: translateY(4px);
}
.wizard-desc-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Wizard Form (personal info) ────────────── */

.wizard-form {
  max-width: 400px;
  margin: 0 auto 40px;
}

.wizard-form-row {
  display: flex;
  gap: 12px;
}

.wizard-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 17px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-weight: 400;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
  background: #fff;
}

.wizard-input:focus {
  border-color: var(--primary-color);
}

.wizard-input::placeholder {
  color: #bbb;
}

.wizard-input.is-invalid {
  border-color: #d93025;
}

.wizard-input.is-invalid:focus {
  border-color: #d93025;
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12);
}

.wizard-input-error {
  margin: 8px 4px 0;
  font-size: 14px;
  color: #d93025;
  text-align: right;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
}

/* ── Date step (uses OpenDayUpcomingDates in selectable mode) ──── */

/* The date step renders <OpenDayUpcomingDates selectable> directly.
   All visual styling for the cards lives in open-day-upcoming-dates.css. */

/* ── Summary ────────────────────────────────── */

.wizard-summary {
  text-align: right;
  margin-bottom: 40px;
}

.wizard-summary-section {
  background: #fafaf9;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.wizard-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.wizard-summary-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0;
}

.wizard-edit-link {
  font-size: 13px;
  color: var(--primary-color);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.wizard-edit-link:hover {
  background: rgba(0, 113, 227, 0.08);
}

.wizard-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  color: #333;
  gap: 16px;
  min-width: 0;
}

.wizard-summary-row:last-child {
  border-bottom: none;
}

.wizard-summary-label {
  font-weight: 500;
  color: #666;
  flex-shrink: 0;
  min-width: 0;
}

.wizard-summary-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 0;
}

.wizard-summary-row--stacked .wizard-summary-question {
  flex-shrink: 1;
  font-weight: 500;
  color: #666;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.wizard-summary-row--stacked .wizard-summary-answer {
  color: #1d1d1f;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── Success ────────────────────────────────── */

.wizard-success {
  text-align: center;
  padding: 40px 0;
}

.wizard-success-icon {
  font-size: 64px;
  color: #34c759;
  margin-bottom: 24px;
}

.wizard-success h2 {
  font-size: 32px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
}

.wizard-success p {
  font-size: 18px;
  color: #555;
  font-weight: 400;
}

.wizard-success-detail {
  font-size: 16px;
  color: #777;
  margin-bottom: 28px;
}

/* "המועד שביקשתם:" prefix on the date line. The wizard records a request,
   not a booking (owner 2026-08-06), so the date is labelled as the one the
   visitor asked for - the label carries that meaning and is weighted a
   notch heavier than the date itself. */
.wizard-success-detail-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.wizard-success-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.wizard-success-calendar-note {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
}

.wizard-success-home {
  margin-top: 4px;
}

/* Arrival details card (in person or Zoom, then car + license plate): sits
   directly below the calendar/navigation pills, above the recap. A quiet
   bordered card so the one actionable ask on the screen reads as such without
   shouting. ONE card, not two - the car question is a consequence of the
   attendance answer above it (owner D1/D7, 2026-08-16). */
.wizard-success-arrival {
  max-width: 480px;
  margin: 0 auto 32px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wizard-arrival-title {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0 0 6px;
}

.wizard-success .wizard-arrival-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.wizard-arrival-choices {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.wizard-arrival-choice {
  min-height: 42px;
  padding: 8px 22px;
  background: #fff;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wizard-arrival-choice:hover {
  border-color: var(--primary-color);
}

.wizard-arrival-choice--selected {
  border-color: var(--primary-color);
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
}

/* The revealed half of the card: separated by a hairline rather than a second
   box, so the two questions still read as one ask. */
.wizard-arrival-car {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.wizard-arrival-subtitle {
  font-size: 15.5px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0 0 6px;
}

.wizard-arrival-plate {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* The shared text-input style is grid-aware; here it lives in a flex row.
   The plate reads left-to-right (dir=ltr on the input, matching the admin
   panel's plate convention). */
.wizard-arrival-plate .wizard-arrival-input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.wizard-arrival-save {
  flex: none;
  min-height: 44px;
  padding: 10px 26px;
}

/* Scoped under .wizard-success: the generic `.wizard-success p` rule
   (0-1-1) would otherwise out-specify the status/error colors and sizes. */
.wizard-success .wizard-arrival-status {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: #1d7a3e;
  font-weight: 500;
}

/* The live region stays mounted while empty (screen readers need it in the
   tree before the text lands) - collapse its footprint until then. */
.wizard-success .wizard-arrival-status:empty {
  margin: 0;
}

.wizard-success .wizard-arrival-error {
  margin: 12px 0 0;
  font-size: 15px;
  color: #dc2626;
}

@media (max-width: 767px) {
  .wizard-arrival-plate {
    flex-direction: column;
  }
  .wizard-arrival-save {
    width: 100%;
  }
}

/* Registration recap on the success screen (moved from the old summary step).
   The success screen is centre-aligned, so constrain the box and restore the
   right-aligned reading direction the summary rows expect. */
.wizard-success-summary {
  max-width: 480px;
  margin: 8px auto 32px;
  text-align: right;
}

.wizard-success-summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0 0 16px;
  text-align: center;
}

.wizard-success-summary .wizard-summary {
  margin-bottom: 0;
}

/* ── Navigation ─────────────────────────────── */

.wizard-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.wizard-skip-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.wizard-skip-link {
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.wizard-skip-link:hover {
  color: var(--primary-color);
  background: var(--fsp-hover-bg);
}

.wizard-skip-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.wizard-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wizard-error {
  background: #fef2f2;
  color: #dc2626;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 16px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  text-align: center;
}

/* ── Tablet ────────────────────────────────────── */

@media (max-width: 1024px) {
  .open-day-title {
    font-size: 38px;
  }

  .open-day-lead {
    font-size: 18px;
  }

  .wizard-question {
    font-size: 24px;
  }
}

/* ── Phone ─────────────────────────────────────── */

@media (max-width: 767px) {
  .open-day-page {
    padding: 44px 20px 60px;
  }

  .open-day-title {
    font-size: 32px;
  }

  .open-day-lead {
    font-size: 18px;
    margin-bottom: 36px;
    line-height: 1.6;
  }

  .open-day-card {
    padding: 32px 24px;
    margin-bottom: 40px;
  }

  .open-day-card h2 {
    font-size: 22px;
  }

  .open-day-card p {
    font-size: 17px;
  }

  .open-day-benefits h3 {
    font-size: 22px;
  }

  .open-day-benefits li {
    font-size: 17px;
    padding: 14px 22px 14px 0;
  }

  .open-day-actions {
    flex-direction: column;
    align-items: center;
  }

  .wizard-question {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .wizard-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .wizard-option {
    min-height: 60px;
    padding: 16px 20px 16px 46px;
  }

  .wizard-option-label {
    font-size: 15px;
  }

  .wizard-options--rich {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Keep the tech-background categories 2-up on phones - the cards
     are compact (icon + title + tagline) so two fit comfortably. */
  .wizard-options--rich-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .wizard-options--rich-compact .wizard-option--rich {
    padding: 20px 12px 18px;
  }

  .wizard-options--courses {
    gap: 12px;
  }

  .wizard-options--courses .wizard-course-card {
    min-height: 112px;
    padding: 22px 18px;
  }

  .wizard-options--courses .wizard-course-card--bundle {
    min-height: 150px;
    padding: 26px 20px;
  }

  .wizard-options--courses .wizard-course-card__logo svg {
    height: 26px;
  }

  .wizard-options--courses .wizard-course-card__sub {
    font-size: 13px;
  }

  .wizard-option--rich {
    padding: 22px 18px 18px;
    gap: 8px;
  }

  .wizard-option-hero {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .wizard-option-title {
    font-size: 17px;
  }

  .wizard-option-bullets li {
    font-size: 13.5px;
    padding: 7px 10px;
  }

  .wizard-slider-container {
    --thumb-size: 22px;
    --step-width: 64px;
    max-width: 100%;
  }

  .wizard-slider-value { font-size: 20px; }
  .wizard-slider-icon { font-size: 20px; }

  .wizard-slider-step-dot {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .wizard-slider-step-label {
    font-size: 10.5px;
    letter-spacing: 0;
    line-height: 1.25;
  }

  .wizard-slider-anchors {
    font-size: 10.5px;
    padding: 0 calc(var(--thumb-size) / 2);
    letter-spacing: 0.02em;
  }

  .wizard-slider-description {
    margin-top: 16px;
    padding: 14px 16px;
    min-height: 64px;
  }

  .wizard-slider-description-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .wizard-form-row {
    flex-direction: column;
  }

  .wizard-input {
    padding: 14px 16px;
    font-size: 16px;
  }

  .wizard-summary-row {
    flex-direction: column;
    gap: 4px;
  }

  .wizard-success h2 {
    font-size: 24px;
  }

  .wizard-success-icon {
    font-size: 48px;
  }

  .open-day-actions .btn-primary,
  .open-day-actions .btn-secondary {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* ── Contact-permission consent (phone step) ───────────────────
   The required tick that lets us approach the person on WhatsApp or by
   phone. It reuses the shared .consent / .consent__checkbox / .consent__text
   recipe from contact-view.css (loaded before this file, so these rules win
   at equal specificity) and only re-states what differs here: the wizard's
   centred measure, its type scale and its red.
   RTL: `display: flex` under the page's global `direction: rtl` already puts
   the box at the reading start (right) - no side-specific rule needed. */
.wizard-consent {
  max-width: 460px;
  margin: 1.25rem auto 0;
  text-align: right;
}

/* Finger-sized target. The whole label toggles, but the box is what people
   aim at, and 18px is a miss on a phone. */
.wizard-consent .consent__checkbox {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.wizard-consent .consent__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  /* Never strand the trailing inline brand mark alone on its own line. */
  text-wrap: pretty;
}

.wizard-consent--error .consent__text {
  color: #d93025;
}

.wizard-consent--error .consent__checkbox {
  accent-color: #d93025;
  /* box-shadow, not outline - outline would suppress the UA focus ring. */
  box-shadow: 0 0 0 1.5px #d93025;
  border-radius: 3px;
}

/* Sits under the consent row on the same measure. The base
   .wizard-input-error margin is tuned for a full-width input, so it is
   restated here (this rule is later in the file, so it wins). */
.wizard-consent-error {
  max-width: 460px;
  margin: 6px auto 0;
}

.wizard-consent-note {
  margin: 1rem 0 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
}

/* ── Privacy reassurance (green, near email/phone/submit) ──────
   Reads as a calm, trustworthy promise rather than a marketing
   shout - subtle leaf icon, restrained green, paragraph weight. */
.wizard-privacy-note {
  margin: 14px auto 0;
  max-width: 460px;
  padding: 12px 16px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.06);
  border-radius: 12px;
  color: #15803d;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.005em;
}

/* ── Min-selection warning (q7-days) ────────────────────────
   Inline calm-red message above the wizard nav. Appears when
   the user has at least one selection but is still under the
   per-question minimum. Pairs with the disabled "המשך" button. */
.wizard-min-selection-warning {
  margin: 8px auto 0;
  max-width: 460px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(217, 48, 37, 0.06);
  border: 1px solid rgba(217, 48, 37, 0.18);
  color: #d93025;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.005em;
}

/* ── Rich-card grid: 2-card variant (q8-format) ────────────
   The default rich grid is 3 columns (q6 has 3 cards). For 2
   cards we want them centered side-by-side, not stretched
   across the full width. count-N reflects card options only
   (the full-row "אין לי העדפה" opt-out is excluded), so
   q8-format's two format cards + opt-out still match count-2:
   the cards share this 600px row and the opt-out spans it
   full-width beneath them. */
.wizard-options--rich.wizard-options--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 600px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .wizard-options--rich.wizard-options--count-2 {
    grid-template-columns: 1fr;
  }
}