/* Panfili palette on a cream ground. Hanken Grotesk throughout: it stays
   legible at list sizes, where Didot's hairlines shimmer on a phone. Didot is
   kept only for the one italic accent on the receipt total. */

@font-face{font-family:'Hanken Grotesk';src:url('/fonts/HankenGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/HankenGrotesk-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/HankenGrotesk-DemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Didot';src:url('/fonts/Didot-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root {
  --ink: #0D0D0D;
  --crimson: #6B0000;
  --gold: #C9A74C;
  --gold-d: #A8853C;
  --cream: #EAE3D0;
  --cream-soft: #FBF3E2;

  --bg: var(--cream-soft);
  --surface: #FFFDF7;
  --text: var(--ink);
  --hint: #7D766A;
  --line: #E0D5BC;

  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Didot', Georgia, serif;
  --r: 14px;
  --bar: 76px;
  /* Set by telegram.js. In fullscreen these keep content clear of the status
     bar and Telegram's floating close button. */
  --inset-top: 0px;
  --inset-bottom: 0px;
}

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

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  color-scheme: light;
  /* No pinch-zoom, no double-tap zoom. */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }
@supports (height: 100dvh) { #app { min-height: 100dvh; } }

/* ---------------- gate ---------------- */
.gate {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  padding: calc(40px + var(--inset-top)) 24px 40px;
}
.gate p { margin: 0; color: var(--hint); font-size: 17px; }
.gate .id {
  font: 600 30px/1 var(--sans); letter-spacing: .04em; color: var(--ink);
  padding: 16px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}

/* ---------------- search ---------------- */
.searchwrap {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: calc(14px + var(--inset-top)) 16px 12px;
}
.searchfield { position: relative; }
.searchfield .mag {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; stroke: var(--crimson); fill: none;
  stroke-width: 2; pointer-events: none;
}
.search {
  width: 100%; padding: 18px 18px 18px 48px;
  font: 500 17px var(--sans); color: var(--ink);
  background: #fff; border: 2px solid var(--crimson);
  border-radius: var(--r); outline: none;
  box-shadow: 0 2px 10px rgba(107,0,0,.08);
}
.search::placeholder { color: #9B948A; font-weight: 400; }
.search:focus { box-shadow: 0 0 0 4px rgba(107,0,0,.12); }

/* ---------------- list ---------------- */
.list { flex: 1; padding: 4px 16px calc(var(--bar) + 28px); }
/* Screens with no search bar carry the inset themselves. */
.list.topinset { padding-top: calc(4px + var(--inset-top)); }

.group {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 19px 20px; margin-top: 10px;
  font: 600 17px var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); text-align: left; cursor: pointer;
}
.group .chev { color: var(--crimson); font-size: 16px; transition: transform .15s; }
.group[aria-expanded="true"] { border-color: var(--crimson); }
.group[aria-expanded="true"] .chev { transform: rotate(90deg); }

.cat {
  padding: 18px 6px 8px;
  font: 600 10px var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-d);
}

/* Row card: services, options, stylists. */
.row {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 17px 18px; margin-top: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.row[aria-selected="true"] {
  border-color: var(--crimson);
  box-shadow: 0 0 0 1px var(--crimson);
}
.row .body { flex: 1; min-width: 0; }
.row .name { font: 500 16px/1.35 var(--sans); }
.row .meta {
  margin-top: 6px; font: 400 14px var(--sans); color: var(--hint);
}
.row .meta .sep { color: var(--gold-d); margin: 0 7px; }
.row .meta .pr { font-weight: 600; color: var(--ink); }

/* Check: grid-centred so the mark sits dead centre of the circle. */
.tick {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #CFC5AE; background: #fff;
  display: grid; place-items: center;
}
.tick svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.5;
  fill: none; opacity: 0; }
[aria-selected="true"] > .tick, [aria-selected="true"] .tick {
  background: var(--crimson); border-color: var(--crimson);
}
[aria-selected="true"] .tick svg { opacity: 1; }

/* ---------------- avatars ---------------- */
.av {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--cream);
}
.av.initials, .av.any {
  display: grid; place-items: center;
  font: 600 18px var(--sans); color: var(--gold-d);
}

/* ---------------- section heading ---------------- */
.card { margin-top: 22px; }
.card > h2 {
  margin: 0 0 6px; padding: 0 6px;
  font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-d);
}

/* ---------------- big choice cards ---------------- */
.big {
  width: 100%; display: block; text-align: left;
  padding: 22px 20px; margin-top: 14px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 18px; color: var(--ink); cursor: pointer;
}
.big[aria-selected="true"] {
  border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson);
}
.big .top { display: flex; align-items: center; gap: 12px; }
.big .name { font: 600 22px var(--sans); flex: 1; letter-spacing: -.01em; }
.big .desc { margin-top: 10px; font: 400 15px/1.5 var(--sans); color: var(--hint); }

/* ---------------- receipt ---------------- */
.receipt {
  margin-top: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
}
.rhead {
  padding: 16px 20px; background: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.rhead .h {
  font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-soft);
}
.rhead .n { font: 500 12px var(--sans); color: var(--gold); }
.rbody { padding: 4px 20px 0; }

.rline { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rline .body { flex: 1; min-width: 0; }
.rline .svc { font: 500 16px/1.35 var(--sans); }
.rline .opt { margin-top: 5px; font: 400 14px var(--sans); color: var(--hint); }
.rline .opt .sep { color: var(--gold-d); margin: 0 7px; }
.rline .who { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.rline .who img, .rline .who .avs {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  background: var(--cream); display: grid; place-items: center;
  font: 600 12px var(--sans); color: var(--gold-d);
}
.rline .who span { font: 500 15px var(--sans); }
.rline .price {
  font: 600 16px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.rtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 20px;
}
.rtotal .lbl { font: italic 400 20px var(--serif); color: var(--crimson); }
.rtotal .sum {
  font: 600 22px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
}

.rkind {
  margin-top: 12px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; justify-content: space-between; align-items: center;
}
.rkind .k { font: 600 16px var(--sans); }
.rkind .v {
  font: 600 10px var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-d);
}

/* ---------------- result ---------------- */
.result {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: calc(24px + var(--inset-top)) 16px 24px;
}
.shortline {
  margin-top: 16px;
  font: 600 15px var(--sans); letter-spacing: .01em; color: var(--crimson);
  min-height: 20px; word-break: break-all;
}
.qrwrap { display: flex; justify-content: center; width: 100%; }
.qr {
  width: 68%; max-width: 280px;
  background: #fff; padding: 16px;
  border: 1px solid var(--line); border-radius: 18px;
}
.qr svg { display: block; width: 100%; height: auto; }
.copybtn {
  display: block; width: 100%; max-width: 280px; margin: 14px auto 0;
  padding: 17px; font: 600 12px var(--sans); letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff; background: var(--crimson);
  border: none; border-radius: var(--r); cursor: pointer;
}
.copybtn.done { background: var(--ink); }

/* ---------------- bottom bar ---------------- */
.bar {
  position: sticky; bottom: 0; z-index: 5; margin-top: auto;
  display: flex; gap: 10px; padding: 12px 16px;
  padding-bottom: calc(12px + max(env(safe-area-inset-bottom), var(--inset-bottom)));
  background: var(--bg); border-top: 1px solid var(--line);
}
.bar button {
  flex: 1; padding: 17px;
  font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--r); cursor: pointer; border: 1.5px solid transparent;
}
.bar .back { flex: 0 0 32%; color: var(--ink); background: transparent; border-color: var(--line); }
.bar .next { color: #fff; background: var(--crimson); border-color: var(--crimson); }
.bar .next:disabled { opacity: .28; cursor: default; }
.bar .ghost { color: var(--crimson); background: transparent; border-color: var(--crimson); }

.empty { padding: 48px 6px; text-align: center; color: var(--hint); font-size: 16px; }

/* ---------------- confirm dialog ---------------- */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(13,13,13,.45);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.dialog {
  width: 100%; max-width: 320px; padding: 26px 22px 18px;
  background: var(--surface); border-radius: 18px; text-align: center;
}
.dialog .t { font: 600 19px var(--sans); }
.dialog .m { margin-top: 8px; font: 400 15px/1.5 var(--sans); color: var(--hint); }
.dialog .acts { display: flex; gap: 10px; margin-top: 22px; }
.dialog button {
  flex: 1; padding: 15px;
  font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink);
}
.dialog button.danger {
  background: var(--crimson); color: #fff; border-color: var(--crimson);
}