/* options.html (the order wizard) in redesign mode. Loaded only in the mode, after redesign.css (docs/redesign-mode.md).
   Two owners share this file, each in its own marked section: C (the wizard) first, A (pricing and checkout) last. Never edit
   inside the other owner's section. The page-level settings (--rd-header, --rd-footer, --rd-as-*) live only in C's section;
   A asks C to add its selectors to those lists.
   Old Safari: physical sides only, no :has()/:is()/:where(), :focus-visible in rules of its own. */

/* == C: wizard — options == */

/* The wizard keeps its own top bar: the shell's "הזמינו עכשיו" has no place on the order form itself, and the wizard's
   no-scroll layout is measured against the fixed nav (--nav-h) and the fixed Back/Next bar (--wizbar-h). */
html.rd {
  --rd-header: none;
  --rd-footer: none;
  --rd-as-btn: '.wiz-modal-card .btn, .code-btn';
  --rd-as-btn-arrow: '.wiz-bar .btn';
  --rd-as-btn-secondary: '.wiz-back';
}

/* ---- the top bar: the shell header's look (logo, ≡ with its pink middle line) on the wizard's own fixed nav ---- */
html.rd .nav {
  background: var(--color-ground);
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.rd .nav-logo img {
  height: 44px; /* inside the nav's fixed 60px (--nav-h) */
}
html.rd .nav-links a {
  font-family: var(--font-body);
  font-weight: var(--weight-label);
  color: var(--color-ink);
}
html.rd .nav-links a.nav-cta {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
html.rd .nav-toggle {
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  background: transparent;
}
html.rd .nav-toggle span,
html.rd .nav-toggle span::before,
html.rd .nav-toggle span::after {
  width: 22px;
  height: 2.4px;
  border-radius: 2px;
  background: var(--color-ink);
}
html.rd .nav-toggle span {
  background: var(--color-accent-pink);
}

/* ---- no desktop link row: the ≡ menu at every width, like the shell header ----
   The wizard's own nav fanned its links out into a row from 641px up (options.html's
   max-width:640px query is where they fold into the ≡ drawer), which is the old site's
   header — the shell header is a logo and a ≡ at every width. So in the mode the drawer
   rules hold at every width. The nav itself stays: it is fixed and the no-scroll layout is
   measured against it (--nav-h). */
html.rd .nav-toggle {
  display: flex;
}
html.rd .nav-links {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 8px 14px 14px;
  background: var(--color-ground);
  border-bottom: var(--border-thin) solid var(--color-ink);
  box-shadow: var(--shadow-sm);
  display: none;
}
html.rd .nav-links.open {
  display: flex;
}
html.rd .nav-links a {
  padding: 13px 10px;
}
html.rd .nav-links a.nav-cta {
  margin-top: 6px;
  text-align: center;
  justify-content: center;
}

/* ---- the step header: progress as a pill track with a pink fill ---- */
html.rd .wiz-steplabel {
  font: var(--weight-label) var(--text-small) / 1.3 var(--font-body);
  color: var(--color-ink);
}
html.rd .bar {
  height: 12px;
  background: var(--color-paper);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
}
html.rd .bar > i {
  background: var(--color-accent-pink);
  border-left: var(--border-thin) solid var(--color-ink);
}

/* ---- step titles: one clean heading in the body face, bold. The owner found the handwriting heading face messy on the
   wizard (2026-10-18), so the steps drop it and its coloured offset; the marketing pages keep it. ---- */
html.rd .wiz-title {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  letter-spacing: 0;
  font-size: 28px;
  line-height: 1.15;
}
html.rd .wiz-sub {
  color: var(--color-text-muted);
}

/* ---- the live preview: a card on the table ---- */
html.rd .preview-card {
  border: var(--border-hair) solid var(--color-ink);
  border-radius: var(--radius-review);
  box-shadow: var(--shadow);
}
html.rd .preview-stage {
  background: var(--color-ground);
  border-radius: var(--radius-box);
}
/* Collapsed on the later steps (title, pawns, details) the preview was only a reminder strip ("עיצוב פריז · צבע מקורי");
   the owner removed it there (2026-10-18). The design was chosen two steps back and the title step shows the real card. */
html.rd .preview-card.is-collapsed {
  display: none;
}
html.rd .preview-chip .continue-summary {
  background: var(--color-tag);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  color: var(--color-ink);
}
html.rd .preview-zoom-btn {
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
/* the front / back / board tabs, here and in the fullscreen view: chips, the chosen one in ink */
html.rd .tab,
html.rd .zoom-tab {
  font: var(--weight-label) var(--text-label) / 1.2 var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
html.rd .tab:hover {
  background: var(--color-tag);
}
html.rd .tab[aria-selected='true'],
html.rd .zoom-tab[aria-selected='true'] {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
  box-shadow: none;
}

/* ---- step 1: the design tiles ---- */
html.rd .design {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-press) var(--ease-pop),
    box-shadow var(--dur-press);
}
@media (hover: hover) {
  html.rd .design:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
html.rd .design[aria-pressed='true'] {
  background: var(--color-card-hot);
  border-color: var(--color-ink);
  box-shadow: var(--shadow);
  outline: var(--border-thin) solid var(--color-ink);
  outline-offset: 0;
}
html.rd .design .thumb {
  border-radius: 8px;
  background: var(--color-ground);
}
html.rd .design .dname {
  font-family: var(--font-body);
  font-weight: var(--weight-label);
  color: var(--color-ink);
}

/* ---- step 2: colour swatches, the chosen one ringed in ink ---- */
html.rd .swatch {
  border: var(--border-thin) solid var(--color-ink);
}
html.rd .swatch[aria-pressed='true'] {
  box-shadow:
    0 0 0 3px var(--color-ground),
    0 0 0 5.5px var(--color-ink);
}
html.rd .swatch .cname {
  font-family: var(--font-body);
  color: var(--color-ink);
}

/* ---- fields: the shell's field look (pill inputs, ink outline), kept at the wizard's own heights ---- */
html.rd .wiz-lbl {
  font: var(--weight-label) var(--text-small) / 1.3 var(--font-body);
  color: var(--color-ink);
}
html.rd .wiz-input {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  padding: 13px 20px;
  font: var(--weight-body) var(--text-button) / 1.4 var(--font-body);
}
html.rd textarea.wiz-input {
  border-radius: var(--radius-box);
}
html.rd .wiz-input:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
html.rd .wiz-hint {
  font-size: var(--text-micro);
  color: var(--color-text-muted);
}
html.rd .custom-title-warn {
  color: var(--color-ink);
  background: var(--color-tag);
  border-radius: var(--radius-tag);
  padding: 4px 8px;
}
html.rd .wiz-err {
  color: var(--color-error);
  background: var(--color-paper);
  border: var(--border-thin) solid var(--color-error);
  border-radius: var(--radius-box);
  font: var(--weight-label) var(--text-micro) / 1.4 var(--font-body);
}
html.rd .title-break {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-box);
  background: var(--color-paper);
  box-shadow: var(--shadow-sm);
}
html.rd .gender-opt span {
  font-family: var(--font-body);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
}
html.rd .gender-opt input:checked + span {
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: none;
}

/* the title step's font choice: chips, the chosen one in ink */
html.rd .font-opt {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-box);
  background: var(--color-paper);
}
html.rd .font-opt[aria-pressed='true'] {
  background: var(--color-ink);
}

/* the empty preview slot on the title step */
html.rd .preview-teaser {
  border-color: var(--color-ink);
  border-radius: var(--radius-box);
  background: var(--color-paper);
}
html.rd .pt-ghost {
  border-color: var(--color-ink);
}
html.rd .pt-spark {
  color: var(--color-brand-pink);
}

/* ---- the pawn step ---- */
html.rd .pawn-count-label {
  font-family: var(--font-body);
  letter-spacing: 0;
  font-weight: var(--weight-label);
}
html.rd .pawn-count button {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}
html.rd .pawn-count button[aria-pressed='true'] {
  background: var(--color-ink);
  color: var(--color-paper);
}
html.rd .pawn-slot {
  border-radius: var(--radius-box);
}

/* ---- the Back / Next bar: the ground, an ink rule, black pills ---- */
html.rd .wiz-bar {
  background: var(--color-ground);
  border-top: var(--border-thin) solid var(--color-ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* the old .btn's gradient, the white press wipe and the hover shine give way to the shell's pill and its drawn arrow */
html.rd .wiz-bar .btn,
html.rd .wiz-modal-card .btn {
  background: var(--color-ink);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: none;
  filter: none;
  font: var(--weight-strong) var(--text-button) / 1 var(--font-body);
  letter-spacing: var(--track-button);
  white-space: nowrap;
}
/* "צרו את המשחק" and its arrow stay on one line beside הקודם and עזרה at 360px */
html.rd .wiz-bar .btn {
  padding: 15px 18px;
}
/* under 400px the bar has no room for the arrow beside "צרו את המשחק" */
@media (max-width: 400px) {
  html.rd .wiz-bar .btn {
    padding: 15px 10px;
  }
  html.rd .wiz-back {
    padding-right: 14px;
    padding-left: 14px;
  }
  html.rd .wiz-bar .btn.arrow::after,
  html.rd .wiz-bar .btn.arrow:disabled::after {
    display: none;
  }
}
/* On a wide screen Next is a button, not a bar (owner, 2026-10-19): it keeps its own width and sits beside הקודם at
   the far end, instead of stretching across the gap. A phone keeps the stretched button, its thumb-sized target. */
@media (min-width: 700px) {
  html.rd .wiz-bar .btn {
    flex: 0 0 auto;
    min-width: 190px;
    padding: 15px 34px;
  }
  html.rd .wiz-back {
    margin-inline-start: auto; /* RTL: pushes הקודם and הבא together to the left end, עזרה stays on the right */
  }
}
html.rd .wiz-bar .btn::before,
html.rd .wiz-modal-card .btn::before,
html.rd .wiz-modal-card .btn::after {
  display: none;
}
html.rd .wiz-bar .btn::after {
  position: static;
  -webkit-transform: none;
  transform: none;
  transition: none;
}
@media (hover: hover) {
  html.rd .wiz-bar .btn:hover,
  html.rd .wiz-modal-card .btn:hover {
    transform: none;
    box-shadow: none;
    filter: none;
  }
}
html.rd .wiz-bar .btn:active {
  color: var(--color-paper);
  transform: translate(2px, 2px);
}
html.rd .wiz-bar .btn:disabled {
  opacity: 0.45;
}
html.rd .wiz-bar .btn:disabled::after {
  display: block;
}
html.rd .wiz-back {
  font: var(--weight-strong) var(--text-button) / 1 var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
html.rd .wiz-bar .wa-help--docked {
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}
html.rd .wiz-back:hover {
  background: var(--color-tag);
}

/* ---- the dialogs: the gender prompt, the fullscreen preview, the deck pictures ---- */
html.rd .wiz-modal {
  background: var(--color-scrim);
}
html.rd .wiz-modal-card {
  border: var(--border-heavy) solid var(--color-ink);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-review);
}
html.rd .wiz-modal-msg {
  font-family: var(--font-body);
}
html.rd .zoom-btn,
html.rd .deck-view-close {
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--border-bold) solid var(--color-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-heavy);
}
/* the fullscreen view's tab bar: a paper pill holding the chips. Centred by its left edge: the page's own
   inset-inline-start: 50% is the RIGHT edge in RTL, so translateX(-50%) left the bar off centre, and the wider chips
   would push it off the screen. */
html.rd .zoom-tabs {
  left: 50%;
  right: auto;
  background: var(--color-paper);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.rd .zoom-tab {
  font-size: var(--text-small);
  padding: 7px 14px;
  border-color: transparent;
}
html.rd .zoom-hint {
  font-family: var(--font-body);
}

/* ---- owner removals (2026-10-18): helper lines she found unnecessary; the page and its default look keep them ---- */
/* the title step's "מה שתכתבו כאן הוא בדיוק מה שיודפס…" and the preview's "כך זה ייראה עם השם:" */
html.rd #nameStepSub,
html.rd .name-preview-lbl {
  display: none;
}
html.rd [data-step='3'] .wiz-title {
  margin-bottom: 14px; /* the line under it is gone; keep the heading off the field's label */
}
/* the pawns step's "נסיר את הרקע אוטומטית…" and "הסרת הרקע והעיבוד… בבית הדפוס"; the ChatGPT tip stays */
html.rd .pawn-hint,
html.rd .pawn-tip [data-edit='options-photos-tip-shop'] {
  display: none;
}

/* ---- the chosen design on the title step (owner, 2026-10-18): a box with the shop's own pictures of it ---- */
html.rd .chosen-design {
  min-width: 0;
  max-width: 100%;
  overflow: hidden; /* the picture strip scrolls inside; the step never does */
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--color-paper);
  border: var(--border-hair) solid var(--color-ink);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-sm);
}
/* the step is a flex item of main.wrap; at min-width:auto it would grow to the strip's full width */
html.rd .wiz-step {
  min-width: 0;
  max-width: 100%;
}
html.rd .chosen-design[hidden] {
  display: none;
}
html.rd .cd-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 15px;
}
html.rd .cd-lbl {
  color: var(--color-text-muted);
}
html.rd .cd-name {
  font-weight: var(--weight-strong);
}
html.rd .cd-change {
  margin-right: auto; /* RTL: pushed to the far (left) end */
  padding: 4px 12px;
  background: var(--color-tag);
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-label);
  cursor: pointer;
}
/* The pictures are just the photos, big, in a row that scrolls sideways: a swipe on a phone, the wheel or the arrows
   on a wide screen (owner, 2026-10-20: no paper frame, no tape, no tilt, no outline; bigger). The first photo is most
   of the row's width on a phone, so the next one peeking in says there is more. */
html.rd .cd-strip {
  position: relative;
  min-width: 0;
}
/* The step shrink-wraps to its content (.wiz-step's auto margins in main.wrap's column), and with the photo row
   contained that content is the title field: 283px on a wide screen, too narrow for a photo bigger than the prints
   were. So the title step is given its own width: the whole column on a phone, 600px on a wide screen. */
html.rd .wiz-step[data-step='3'] {
  width: min(100%, 600px);
}
html.rd .cd-pics {
  --cdw: clamp(220px, 74vw, 320px);
  min-width: 0;
  contain: inline-size; /* the photos scroll inside the column; they never widen the step to fit them all */
  display: flex;
  align-items: center; /* a portrait photo stands taller than a landscape one; they share a centre line */
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html.rd .cd-pics::-webkit-scrollbar {
  display: none;
}
/* each photo is a button that opens the photo viewer (#deckView) on it */
html.rd .cd-pic {
  flex: 0 0 auto;
  display: block;
  width: var(--cdw);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  scroll-snap-align: start;
  cursor: zoom-in;
}
html.rd .cd-pic:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: -3px;
}
/* The window is the photo's own shape, so every photo shows whole, edge to edge, with nothing cut and no bands
   (owner, 2026-10-20: "too big or too small for the frame"). The page sets each window's aspect-ratio from its photo
   once it loads (paintChosenDesign); until then it is 5:4, the shape of 37 of the shop's 40 photos (#702), so the
   row does not jump. `cover` only absorbs the sub-pixel rounding between the two.
   The photo is shown once it has fully arrived: a baseline JPEG paints from the top down as it loads, and a
   half-arrived one is a strip at the top of an empty window. Until then the window is the ground colour. */
html.rd .cd-pics img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}
html.rd .cd-pics img.is-loaded {
  opacity: 1;
}
html.rd .cd-pic:has(img:not(.is-loaded)) {
  background: var(--color-ground);
}
@media (prefers-reduced-motion: reduce) {
  html.rd .cd-pics img {
    transition: none;
  }
}
/* the arrows: a wide screen only (a phone swipes), over the row's ends, and only where there is somewhere to go */
html.rd .cd-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
html.rd .cd-prev {
  right: 6px; /* RTL: the row starts at the right */
}
html.rd .cd-next {
  left: 6px;
}
html.rd .cd-arrow[hidden] {
  display: none;
}
html.rd .cd-arrow:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
html.rd .cd-arrow:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
@media (max-width: 699px) {
  html.rd .cd-arrow {
    display: none;
  }
}

/* the live preview, smaller (owner, 2026-10-20): the card and its back at 280px, the landscape board at 480px. The
   card's title and words still read at that size. */
html.rd .name-preview-viewport {
  max-width: 280px;
}
html.rd .name-preview-viewport.is-board-view {
  max-width: min(100%, 480px);
}

/* the live preview's arrows, either side of its dots (built by the page in this mode only); the views go round */
html.rd .np-nav {
  display: flex;
  direction: ltr; /* the filmstrip's direction: the card is on the left, so next is the right-hand arrow */
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
html.rd .np-nav[hidden] {
  display: none;
}
html.rd .np-nav .name-preview-dots {
  margin-top: 0;
}
html.rd .np-arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
html.rd .np-arrow:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
html.rd .np-arrow:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* the viewer's arrows: the chosen design's pictures, desktop only (a phone swipes) */
html.rd .deck-view-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}
html.rd .deck-view-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* physical sides, not inline: in RTL the next picture is to the left */
html.rd .deck-view-prev {
  right: 14px;
}
html.rd .deck-view-next {
  left: 14px;
}
html.rd .deck-view-nav[hidden] {
  display: none;
}
@media (hover: none), (pointer: coarse) {
  html.rd .deck-view-nav {
    display: none;
  }
}

/* == end C == */

/* == A: commerce — options (pricing) == */
/* Written by C for A while A's session was down (owner feedback 2026-10-18, relayed by the integrator); A owns it from here.
   The owner removed the price from the wizard: the "החל מ- 199 ₪" pill at the top of every step, and the order recap box
   above the details step's fields. The price is still on the product pages and at checkout. */
html.rd .plan-pill,
html.rd .order-summary {
  display: none;
}
/* == end A == */