/* ══════════════════════════════════════════════════════════════════
   Mile Marker — create.html wizard chrome (v3: locked app screen)
   Presentation layer ONLY over the untouched personalizer engine.
   Mobile = a NON-SCROLLING app screen: nav / preview / controls / nav
   are fixed regions; only the controls area scrolls internally if a
   step ever overflows. Loaded AFTER the page's inline <style> so these
   rules win the cascade.
   NOTE: step animation is opacity-only — a transform here creates a
   WebKit containing block that breaks position:fixed children.
   ══════════════════════════════════════════════════════════════════ */

/* ── Step visibility (fade only — see NOTE above) ────────────────── */
[data-wstep] { display: none; }
[data-wstep].wstep-on { display: block; animation: wstepIn 0.22s ease both; }
@keyframes wstepIn { from { opacity: 0; } to { opacity: 1; } }
#layoutSection.wstep-on { display: none; }
#layoutSection.wstep-on.wstep-adv-open { display: block; }

/* "More details" fold inside the race step */
.wiz-more { display: none !important; }
body.wiz-more-open .wiz-more:not(#squarePhotoSection) { display: block !important; }
/* mini-photo keeps the engine's classic-only inline gating (no !important) */
body.wiz-more-open #squarePhotoSection { display: block; }
.wiz-more-btn {
  width: 100%; margin-top: 4px; padding: 11px;
  background: none; border: 1px dashed var(--border, #24354a);
  border-radius: 8px; color: var(--muted, #7a8694);
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
body.wiz-more-open .wiz-more-btn { border-style: solid; color: var(--gold, #d8a657); }

/* ── App bar: progress + step title (fixed on mobile) ────────────── */
.wiz-top {
  background: var(--bg, #0d1b2a);
  padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wiz-top__head { display: none; margin-bottom: 10px; }
.wiz-top__brand {
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.22em; color: var(--text, #f5f3ee); text-decoration: none;
}
.wiz-top__brand span { color: var(--gold, #d8a657); }
.wiz-progress { display: flex; gap: 4px; margin: 0 0 10px; }
.wiz-progress span {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.12); transition: background 0.3s;
}
.wiz-progress span.done    { background: var(--gold, #d8a657); }
.wiz-progress span.current { background: var(--gold, #d8a657); opacity: 0.55; }
.wiz-top__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wiz-top__row h1 {
  font-family: 'Inter', sans-serif; font-size: 1.02rem; font-weight: 800;
  letter-spacing: -0.01em; margin: 0; line-height: 1.2; color: var(--text, #f5f3ee);
}
.design-from-pill {
  display: none; font-size: 0.72rem; font-weight: 700;
  color: var(--gold, #d8a657); letter-spacing: 0.02em; white-space: nowrap;
}
body.wiz-step-1 .design-from-pill { display: block; }

/* old in-form header is gone; neutralize leftovers */
.personalizer__header { display: none; }
[data-wstep] .form-section__label { display: none; }
[data-wstep] .field > label { font-size: 0.72rem; letter-spacing: 0.02em; }
.form-section { margin-bottom: 12px; padding-bottom: 0; border-bottom: none; }

/* ── Kill page furniture the wizard doesn't want ─────────────────── */
.preview__label { display: none !important; }
.preview-enlarge-cta { display: none !important; }        /* tap poster instead */
.preview-view-toggle { display: none !important; }        /* wizard drives Flat/Wall itself */
.wall-caption { display: none !important; }
.form-tail-spacer { display: none !important; }
.transform-hint { display: none !important; }
.framed-badge-row { display: none !important; }           /* step 6 copy diet */
#finishHint { display: none !important; }

/* ── Dark-theme the engine's light inputs (pace/weather/etc) ─────── */
#pace, #pace[readonly], #pace.pace-manual, #weatherCondition, #weatherTemp,
#raceDate, #customDistance, #locationOverride, #bib, #customRaceName, #customRaceCity {
  background: var(--bg-card, #12233a) !important;
  border-color: var(--border, #24354a) !important;
  color: var(--text, #f5f3ee) !important;
}
#pace[readonly] { color: var(--muted, #9bb0c4) !important; }
#paceOverrideToggle, .weather-unit-btn {
  background: var(--bg-card, #12233a); border-color: var(--border, #24354a);
  color: var(--muted, #9bb0c4);
}
.weather-unit-btn.active { background: var(--gold, #d8a657); color: #0d1b2a; }
.weather-unit-toggle { border-color: var(--border, #24354a); }

/* ── Colour swatches: visible ring so midnight ≠ background ──────── */
.colour-swatch { border: 1.5px solid rgba(255,255,255,0.25) !important; }
.colour-swatch.active { border-color: var(--gold, #d8a657) !important; }

/* ── Step 1: design gallery ──────────────────────────────────────── */
.design-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.design-card {
  position: relative; border: 1.5px solid rgba(255,255,255,0.08); border-radius: 14px;
  overflow: hidden; padding: 0; background: var(--bg-card, #12233a);
  cursor: pointer; opacity: 0; display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.design-card.pop { animation: cardPop 0.4s cubic-bezier(0.22, 1.1, 0.36, 1) both; }
@keyframes cardPop { from { opacity: 0; } to { opacity: 1; } }
.design-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.design-card__name {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 9px; font-size: 0.74rem; font-weight: 700; color: var(--text, #f5f3ee);
  letter-spacing: 0.01em;
}
.design-card__dot { display: none; }
.design-card.selected { border-color: var(--gold, #d8a657); }
.design-card.selected::after {
  content: '✓'; position: absolute; top: 7px; right: 7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold, #d8a657); color: #0d1b2a;
  font-size: 0.75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.design-more {
  display: inline-block; margin-top: 8px; background: none; border: none;
  color: var(--muted, #7a8694); font-size: 0.74rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}

/* ── Step 2: photo — two options; sheet lives at body level ──────── */
.photo-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.photo-opt {
  border: 1px solid var(--border, #24354a); border-radius: 12px;
  background: var(--bg-card, #12233a); color: var(--text, #f5f3ee);
  padding: 14px 10px; cursor: pointer; text-align: center;
  font-size: 0.8rem; font-weight: 700;
}
.photo-opt span { display: block; font-size: 1.2rem; margin-bottom: 4px; }
.photo-opt:active { border-color: var(--gold, #d8a657); }
[data-wstep="2"] .upload-zone__empty { display: none !important; }
[data-wstep="2"] #uploadZone { border: none; padding: 0; background: none; min-height: 0; }
[data-wstep="2"] #uploadFilled { display: none !important; }   /* no filename clutter */
#removePhoto { display: block; margin: 8px auto 0 !important; text-align: center; }

/* zoom slider row stays (Tariq: slider > +/- buttons) */
[data-wstep="2"] #photoTransformControls { margin-top: 8px; }
[data-wstep="2"] .transform-row { display: flex; }

/* race-photo picker — INLINE panel under the two option buttons */
#bgSuggestionsSection { display: none !important; }
#bgSuggestionsSection.sheet-open {
  display: block !important; position: static;
  background: var(--bg-card, #12233a); border: 1px solid var(--border, #24354a);
  border-radius: 12px; padding: 12px; margin: 10px 0 0 !important;
}
#bgSuggestionsSection .bg-suggest-label { color: var(--text, #f5f3ee); padding-right: 26px; position: relative; }
#bgThumbs { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0 2px; }
#bgThumbs .bg-thumb { width: 64px; height: 64px; }
#bgSuggestionsSection { position: relative; }
.sheet-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: var(--muted, #7a8694); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px;
}

/* photo nudge — ONE row, one button style */
.photo-pad { display: none; margin-top: 10px; }
.photo-pad.on { display: block; }
.pad-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.pad-btn {
  width: 52px; height: 40px;
  border: 1px solid var(--border, #24354a); border-radius: 9px;
  background: var(--bg-card, #12233a); color: var(--text, #f5f3ee);
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pad-btn:active { background: var(--gold, #d8a657); color: #0d1b2a; }
.pad-reset {
  background: none; border: none; color: var(--muted, #7a8694);
  font-size: 0.74rem; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; padding: 0 4px;
}
.pad-hint { display: none; }

.colour-grid { justify-content: center; }

/* size/finish chips: anchor the "Popular" badge to its chip */
#sizeGroup .chip, #finishGroup .chip { position: relative; }

/* single photo option (race photos removed — personalization is the product) */
.photo-options--single { grid-template-columns: 1fr; }

/* race mode toggle: My race (custom) | Featured race */
.race-mode { display: flex; gap: 8px; margin-bottom: 12px; }
.race-mode .chip { flex: 1; text-align: center; }
body.wiz-race-custom #raceSelectField { display: none !important; }

/* review step: no wall zoom controls, ⓘ instead of copy */
body.wiz-step-7 #wallSizeRow { display: none !important; }
.wiz-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 6px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--muted, #7a8694);
  background: none; color: var(--muted, #7a8694);
  font-size: 0.62rem; font-weight: 700; font-style: italic; cursor: pointer;
}
.wiz-info-pop {
  display: none; position: fixed; left: 16px; right: 16px; bottom: 90px; z-index: 95;
  background: var(--bg-card, #12233a); border: 1px solid var(--border, #24354a);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
}
.wiz-info-pop.open { display: block; }
.wiz-info-pop h3 { font-family: 'Inter', sans-serif; font-size: 0.9rem; margin: 0 0 8px; color: var(--text, #f5f3ee); }
.wiz-info-pop p { font-size: 0.8rem; line-height: 1.5; color: var(--muted, #9bb0c4); margin: 0 0 8px; }
.wiz-info-pop p strong { color: var(--text, #f5f3ee); }

/* ── Step nav ────────────────────────────────────────────────────── */
.wiz-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(13,27,42,0.97);
  border-top: 1px solid var(--border, #24354a);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
}
.wiz-nav__inner { max-width: 640px; margin: 0 auto; display: flex; gap: 8px; align-items: center; }
.wiz-back {
  background: none; border: 1px solid var(--border, #24354a);
  color: var(--text, #f5f3ee); border-radius: 8px; padding: 13px 16px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.wiz-back[disabled] { display: none; }
.wiz-skip {
  background: none; border: none; color: var(--muted, #7a8694);
  font-size: 0.78rem; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; padding: 10px 4px; display: none;
}
.wiz-skip.on { display: block; }
.wiz-next {
  flex: 1; border: none; border-radius: 8px; padding: 14px 16px;
  background: var(--gold, #d8a657); color: #0d1b2a;
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer;
}
.wiz-next[disabled] { opacity: 0.4; cursor: default; }

.checkout-bar { display: none; }
body.wiz-final .checkout-bar { display: block; }
body.wiz-final .wiz-nav { display: none; }

/* ── Review ──────────────────────────────────────────────────────── */
.wiz-review { border: 1px solid var(--border, #24354a); border-radius: 12px; padding: 8px 14px; }
.wiz-review__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.8rem; }
.wiz-review__row + .wiz-review__row { border-top: 1px solid var(--border, #24354a); }
.wiz-review__k { color: var(--muted, #7a8694); }
.wiz-review__v { font-weight: 700; text-align: right; }
.wiz-review__edit {
  background: none; border: none; color: var(--gold, #d8a657);
  font-size: 0.72rem; cursor: pointer; padding: 0 0 0 8px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ══ MOBILE: LOCKED APP SCREEN — nothing scrolls but the controls ══ */
@media (max-width: 768px) {
  /* lock the page: no body scroll, no rubber-band, no URL-bar dance */
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; width: 100%; }

  #miniPreviewContainer { display: none !important; }
  .footer { display: none !important; }
  .nav { display: none !important; }         /* the app bar replaces the site nav */

  .wiz-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 55;
    padding-top: calc(10px + env(safe-area-inset-top));
  }
  .wiz-top__head { display: flex; justify-content: center; }

  /* app frame between the app bar and the bottom button bar */
  .personalizer {
    position: fixed; top: 96px; bottom: 0; left: 0; right: 0;
    padding: 0; min-height: 0; height: auto;   /* base css min-height:100vh would overflow the frame */
  }
  .personalizer__layout {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    grid-template-columns: none;
  }

  /* PREVIEW REGION — takes all space the controls don't need */
  .personalizer__preview-panel {
    order: -1; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 12px; border-bottom: 1px solid var(--border, #24354a);
    position: static;
  }
  .preview-frame-wrap { height: 100%; min-height: 0; display: flex; align-items: center; }
  #previewWrap {
    height: 100%; aspect-ratio: 3 / 4;
    width: auto; max-width: 84vw;
    /* when width caps at 84vw, cap height in the same 3:4 ratio —
       otherwise the svg letterboxes (the "bars" above/below the poster) */
    max-height: min(100%, 112vw);
    margin: 0; border-radius: 8px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  }
  #flatViewContainer { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; }
  #wallViewContainer {
    height: 100%; min-height: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 10px;
  }
  #wallScene { width: 100%; }
  #wallSizeRow { margin: 6px 0 0; }

  /* CONTROLS REGION — hugs the bottom, scrolls internally only if needed */
  .personalizer__form-panel {
    flex: 0 0 auto; min-height: 0; max-height: 52vh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(78px + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  /* step 1: no preview band — gallery owns the screen */
  body.wiz-step-1 .personalizer__preview-panel { display: none; }
  body.wiz-step-1 .personalizer__form-panel {
    display: flex; flex-direction: column; flex: 1 1 auto; max-height: none;
  }
  body.wiz-step-1 #personalizerForm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.wiz-step-1 [data-wstep="1"].wstep-on:not(#layoutSection) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  body.wiz-step-1 .design-gallery {
    flex: 1 1 auto; min-height: 0;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.wiz-step-1 .design-card img { aspect-ratio: auto; height: 100%; flex: 1; min-height: 0; }
  body.wiz-step-1 .personalizer__form-panel { overflow: hidden; }

  h1, .personalizer__header h1 { font-size: 1.05rem; }
  .field { margin-bottom: 8px; }
  .chip-group { gap: 6px; }
  input[type="text"], input[type="date"], select { font-size: 16px; }

  /* checkout bar: pinned to the bottom of the locked screen */
  body.wiz-final .checkout-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: rgba(13,27,42,0.97);
    border-top: 1px solid var(--border, #24354a);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Desktop: side-by-side stays; room for the fixed nav */
@media (min-width: 769px) {
  .personalizer__form-panel { padding-bottom: 140px; }
}