/* ============================================================================
   booking.css  -  Sina's Laundry, mobile booking site
   ----------------------------------------------------------------------------
   Implements "Sina Laundry Mobile Site.dc.html".

   The source design is drawn as a 390px phone mockup floating on a desktop
   backdrop. That is a presentation of the design, not the design itself:
   almost everyone arrives by scanning a QR code with a phone, so below 430px
   the frame drops away entirely and the site is full-bleed. The mockup only
   survives on wide screens, where it is the honest way to show a phone site.
   ==========================================================================*/

:root {
  --bg:          #EFE9DC;
  --card:        #FFFDF4;
  --ink:         #1D1814;
  --teal:        #16717A;
  --teal-dark:   #0F5157;
  --yellow:      #F7C948;
  --border:      #DCD5C5;
  --rule:        #EDE6D6;
  --muted:       #4A423B;
  --faint:       #8A8078;
  --placeholder: #A79E92;
  --bar:         #E4DCCB;
  --dot:         #B5AC9E;
  --danger:      #A4341F;

  --display: Caveat, 'Brush Script MT', cursive;
  --body:    'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: 18px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 0;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

input, select, textarea, button { font-family: var(--body); }
::placeholder { color: var(--placeholder); opacity: 1; }

/* Focus. The design has no focus states at all; a form you can only use with a
   mouse is not finished. Keyboard users get a ring, pointer users do not. */
:focus-visible {
  outline: 2.5px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tap targets. Two controls are drawn smaller than a finger: the header's
   TEXT SINA pill (29px) and the form's back arrow (34px). Rather than redraw
   them and lose the design, each gets an invisible centred hit area of at
   least 44px. The control looks identical and stops being a thumb lottery. */
.head__cta, .btn--back { position: relative; }
.head__cta::after, .btn--back::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the frame ──────────────────────────────────────────────────────────── */

.phone {
  width: 390px;
  min-height: 844px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(29, 24, 20, .13);
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 430px) {
  body { padding: 0; }
  .phone {
    width: 100%;
    min-height: 100svh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── header ─────────────────────────────────────────────────────────────── */

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 5;
}

.head__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  color: var(--ink);
}

.head__cta {
  /* Was an <a>, is now a <button> that opens the booker. Reset the UA button
     styling so the pill looks exactly as it did. */
  background: none;
  font-family: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.head__cta:hover { background: var(--ink); color: var(--card); }

/* ── screens ────────────────────────────────────────────────────────────── */

.screen { flex: 1; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

/* ── home ───────────────────────────────────────────────────────────────── */

.hero {
  padding: 26px var(--pad) 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 52px;
  line-height: .92;
  letter-spacing: -.5px;
}
.hero__title em { font-style: normal; color: var(--teal); }

.hero__lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.hero__art {
  width: 170px;
  align-self: center;
  display: block;
  margin: -6px 0;
  mix-blend-mode: multiply;
  height: auto;
}

/* stats strip */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--yellow);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  margin: 0;
}
.stat { padding: 12px 14px; }
.stat + .stat { border-left: 1.5px solid var(--ink); }
.stat__v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
}
.stat__k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

/* how it works */
.how {
  padding: 22px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.how__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--faint);
  text-transform: uppercase;
}
.step-row { display: flex; gap: 13px; align-items: flex-start; }
.step-row__n {
  flex: none;
  width: 26px; height: 26px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
}
.step-row__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.step-row__d { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* promise */
.promise {
  margin: 0 var(--pad) 22px;
  border: 1.5px solid var(--teal);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.promise__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
}
.promise__d { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.promise__sig {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  color: var(--teal);
  line-height: 1;
  margin-top: 2px;
}

/* ── sticky footer ──────────────────────────────────────────────────────── */

.foot {
  margin-top: auto;
  padding: 14px var(--pad) 20px;
  border-top: 1px solid var(--rule);
  background: var(--card);
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foot__note {
  text-align: center;
  font-size: 11.5px;
  color: var(--faint);
  margin: 0;
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  border: none;
  background: var(--teal);
  color: var(--card);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 17px;
  border-radius: 14px;
  cursor: pointer;
  min-height: 52px;
  text-align: center;
  display: block;
  width: 100%;
}
.btn:hover { background: var(--teal-dark); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--ghost {
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px;
  min-height: 48px;
}
.btn--ghost:hover { background: var(--bg); border-color: var(--dot); }

.btn--back {
  border: 1px solid var(--border);
  background: var(--card);
  width: 34px; height: 34px;
  min-height: 34px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.btn--back:hover { background: var(--bg); }

/* ── progress ───────────────────────────────────────────────────────────── */

.progress {
  padding: 14px var(--pad) 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress__bars { flex: 1; display: flex; gap: 5px; }
.progress__bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bar);
  transition: background .25s ease;
}
.progress__bar.is-on { background: var(--teal); }
.progress__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: .6px;
  white-space: nowrap;
}

/* ── form panels ────────────────────────────────────────────────────────── */

.panel {
  padding: 20px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel[hidden] { display: none; }

.panel__h {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.02;
}
.panel__h:focus { outline: none; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
}

.input {
  font-size: 16px;               /* 16px min, or iOS zooms the whole page */
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  min-height: 50px;
  width: 100%;
}
.input:hover { border-color: var(--dot); }
/* 16px, not the design's 15px. Any font-size below 16px makes iOS Safari zoom
   the whole page when the field takes focus, and it does not zoom back out.
   One pixel is not worth that. */
textarea.input { resize: none; font-size: 16px; padding: 13px; min-height: 0; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field.is-bad .input { border-color: var(--danger); }
.err {
  font-size: 12.5px;
  color: var(--danger);
  font-weight: 600;
  min-height: 0;
}
.err:empty { display: none; }

.hint { font-size: 12.5px; color: var(--faint); line-height: 1.45; }

/* ── chips (real radios underneath) ─────────────────────────────────────── */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips--col { display: flex; flex-direction: column; gap: 8px; }
.chips--even { display: flex; gap: 8px; }
.chips--even .chip { flex: 1; }

.chip {
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 13px 16px;
  border-radius: 12px;
  cursor: pointer;
  min-height: 46px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: background .12s ease, border-color .12s ease;
}
.chips--col .chip { justify-content: flex-start; text-align: left; }

.chip:hover { border-color: var(--dot); background: var(--bg); }

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

.chip:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--card);
  font-weight: 700;
}
.chip:has(input:focus-visible) {
  outline: 2.5px solid var(--teal);
  outline-offset: 2px;
}

/* :has() is broadly supported now, but a chip that cannot show which option is
   selected is a broken form, not a degraded one. This is the fallback. */
.chip.is-on {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--card);
  font-weight: 700;
}

/* ── checkbox row ───────────────────────────────────────────────────────── */

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  min-height: 52px;
  font-size: 14.5px;
}
.check:hover { border-color: var(--dot); }
.check input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; margin: 0; }

/* ── bag stepper ────────────────────────────────────────────────────────── */

.counter {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.counter__btn {
  width: 40px; height: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--card);
  font-size: 20px;
  cursor: pointer;
  color: var(--ink);
  flex: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.counter__btn:hover:not([disabled]) { background: var(--ink); color: var(--card); }
.counter__btn[disabled] { opacity: .35; cursor: not-allowed; }
.counter__out { flex: 1; text-align: center; }
.counter__n { font-family: var(--display); font-weight: 700; font-size: 30px; }
.counter__w { font-size: 13px; color: var(--muted); }

/* ── summary lines ──────────────────────────────────────────────────────── */

.summary {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
}
.summary__row { display: flex; justify-content: space-between; gap: 12px; }
.summary__row span:first-child { color: var(--muted); }
.summary__row span:last-child { font-weight: 700; }
.summary__row--teal span:last-child { color: var(--teal); }
.summary__row--total {
  border-top: 1px solid var(--rule);
  padding-top: 7px;
  font-size: 15px;
}
.summary__row--total span:first-child { color: var(--ink); font-weight: 600; }
.summary__row--total span:last-child { font-weight: 700; }
.summary__fine { font-size: 12px; color: var(--faint); line-height: 1.45; }

/* ── done ───────────────────────────────────────────────────────────────── */

.done {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px var(--pad) 20px;
  gap: 18px;
}
.done__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--teal);
  text-transform: uppercase;
}
.done__h {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
}
.done__p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.track {
  border: 1.5px solid var(--ink);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.track__item { display: flex; gap: 12px; align-items: flex-start; }
.track__dot {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 5px;
}
.track__dot--todo { background: none; border: 1.5px solid var(--dot); }
.track__t { font-size: 14.5px; font-weight: 700; }
.track__d { font-size: 13px; color: var(--muted); }

.note-card {
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.45;
}

.done__cta { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* ── motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}