/* ============================================================
   Guest sign-up — KIOSK variant. Same brand tokens and layout as
   join.css, sized up for an unattended touchscreen a guest walks up
   to directly (no phone, no QR) and built to reset itself after each
   visitor rather than needing staff to touch the screen.

   Every size below is a clamp() keyed to viewport height, not a fixed
   px value — a kiosk tablet's actual height varies a lot (a small 7"
   tablet vs. a wall-mounted display), and the one thing that must
   never happen here is the Join button sliding below the fold: on a
   walk-up kiosk there's no "scroll down" affordance a guest would
   think to try. Everything scales down together instead of needing
   the card's own scrollbar (kept only as a last-resort safety net).
   ============================================================ */

* { box-sizing: border-box; }

/* [hidden] must win over any element's own `display` rule — several
   elements below (.kiosk-field, .kiosk-panel) set `display: block/flex`
   at the same specificity as the browser's own `[hidden]` rule, and
   being later in this stylesheet would otherwise let them win and
   silently show a field that's meant to stay hidden (caught live: an
   "other" title's free-text box rendered even with the title dropdown
   left on "No title"). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* a kiosk screen never scrolls */
  background: var(--paper);
  color: var(--ink);
  font-family: "Mulish", "Segoe UI", sans-serif;
  /* Repeated taps on one screen all day — no accidental text selection
     or the blue tap-highlight flash phones/tablets show on every tap. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

.kiosk-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 3vh, 24px);
}

.kiosk-card {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow-y: auto; /* safety net only — sizing below aims to never need it */
  background: var(--canvas-bg, #fff);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(20px, 4vh, 48px) clamp(20px, 5vw, 44px) clamp(16px, 3vh, 36px);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.kiosk-mark {
  display: block;
  width: clamp(40px, 8vh, 72px);
  height: auto;
  margin: 0 auto clamp(4px, 1vh, 8px);
}

/* Real HTML text standing in for the wordmark half of mark-01.svg's
   lockup — mark-icon.svg is icon-only, so the name/tagline are typed
   here instead, in the logo's own font pairing and exact ink colour
   (--logo-ink) rather than baked into the image. */
.kiosk-wordmark {
  text-align: center;
  margin: 0 auto clamp(10px, 2.2vh, 22px);
}

.kiosk-word-name {
  display: block;
  font-family: "Jost", "Century Gothic", sans-serif;
  font-size: clamp(13px, 2vh, 16px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-ink, var(--primary));
}

.kiosk-word-tag {
  display: block;
  font-family: "Jost", "Century Gothic", sans-serif;
  font-size: clamp(9px, 1.3vh, 10.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}

.kiosk-title {
  font-family: "Jost", "Century Gothic", sans-serif;
  font-size: clamp(22px, 5.5vh, 38px);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--primary);
}

.kiosk-title-ar {
  font-family: "Noto Kufi Arabic", sans-serif;
  font-size: clamp(14px, 3vh, 21px);
  color: var(--accent);
  margin: 0 0 clamp(8px, 2vh, 20px);
}

.kiosk-lede {
  font-size: clamp(13px, 2.4vh, 19px);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 clamp(12px, 3.5vh, 36px);
}

.kiosk-form {
  text-align: start;
}

.kiosk-field {
  display: block;
  margin-bottom: clamp(10px, 2.2vh, 22px);
}

.kiosk-field span {
  display: block;
  font-size: clamp(13px, 1.8vh, 18px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: clamp(4px, 1vh, 10px);
}

.kiosk-field span em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.kiosk-field input,
.kiosk-field select {
  width: 100%;
  padding: clamp(10px, 1.8vh, 20px) 20px;
  font-size: clamp(16px, 2.2vh, 24px); /* never below 16px — smaller triggers iOS zoom-on-focus */
  font-family: inherit;
  border: 2px solid var(--line);
  border-radius: var(--btn-radius, 10px);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}

.kiosk-field select { cursor: pointer; }

.kiosk-field input:focus,
.kiosk-field select:focus {
  border-color: var(--primary);
}

/* Required-field error state — every field but Name (Arabic) and
   WhatsApp is mandatory now, validated in joinus.js and again
   server-side, so a visible marker matters here (not just a status
   message a guest might not connect to the right field). */
.kiosk-field.has-error input,
.kiosk-field.has-error select {
  border-color: var(--brand-2, #C4451C);
  background: #FBEAE6;
}

.kiosk-chip-group.has-error .kiosk-chip-label {
  color: var(--brand-2, #C4451C);
}

.kiosk-chip-group.has-error .kiosk-chips {
  outline: 2px solid var(--brand-2, #C4451C);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ── Step indicator ─────────────────────────────────────────────── */
.kiosk-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 clamp(12px, 2.5vh, 22px);
}

.kiosk-step {
  width: clamp(22px, 3.6vh, 28px);
  height: clamp(22px, 3.6vh, 28px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 1.6vh, 13px);
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border: 2px solid var(--line);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kiosk-step.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.kiosk-step-line {
  width: clamp(28px, 6vw, 48px);
  height: 2px;
  background: var(--line);
}

/* ── Checkbox rows ──────────────────────────────────────────────── */
.kiosk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 2.2vh, 20px);
  cursor: pointer;
}

.kiosk-check input {
  width: clamp(20px, 3vh, 24px);
  height: clamp(20px, 3vh, 24px);
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.kiosk-check span {
  font-size: clamp(13px, 1.8vh, 16px);
  color: var(--ink);
  line-height: 1.35;
}

/* ── Tap-to-select chips (interests / category / age) ──────────────── */
.kiosk-chip-group {
  margin-bottom: clamp(12px, 2.4vh, 20px);
}

.kiosk-chip-label {
  display: block;
  font-size: clamp(13px, 1.7vh, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: clamp(6px, 1.2vh, 10px);
}

.kiosk-chip-label em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.kiosk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kiosk-chip {
  padding: 8px 14px;
  font-size: clamp(12.5px, 1.7vh, 14.5px);
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kiosk-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Step action buttons ─────────────────────────────────────────────
   Deliberately NOT position:sticky. A sticky footer pins to the bottom
   of the scroll viewport from the very first frame — before the guest
   has scrolled at all — which visually covers whatever field happens
   to render underneath it. With Phone sitting further down step 1's
   panel than "Name", that meant the one required field could load
   hidden behind the Next button. Normal flow means the buttons sit
   after the fields, exactly where scrolling down naturally reveals
   them. */
.kiosk-step-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(10px, 2vh, 18px);
}

.kiosk-back {
  width: 100%;
  padding: clamp(12px, 2vh, 22px) 16px;
  font-family: "Jost", sans-serif;
  font-size: clamp(15px, 2vh, 20px);
  font-weight: 500;
  color: var(--primary);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--btn-radius, 10px);
  cursor: pointer;
}

.kiosk-back:active { background: var(--surface-2); }

.kiosk-panel .kiosk-step-actions { flex-direction: row; }
.kiosk-panel .kiosk-step-actions .kiosk-submit,
.kiosk-panel .kiosk-step-actions .kiosk-back { flex: 1; margin-top: 0; }
#kioskStep1 .kiosk-step-actions { flex-direction: column; }

/* Honeypot — visually hidden, but not display:none/visibility:hidden,
   since some bots skip fields those rules mark uninteresting. */
.kiosk-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kiosk-submit {
  width: 100%;
  padding: clamp(12px, 2vh, 22px) 16px;
  margin-top: 10px;
  font-family: "Jost", sans-serif;
  font-size: clamp(16px, 2.2vh, 24px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-primary, #fff);
  background: var(--accent);
  border: none;
  border-radius: var(--btn-radius, 10px);
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.kiosk-submit:active { filter: brightness(0.94); }
.kiosk-submit:disabled { opacity: 0.6; cursor: default; }

.kiosk-status {
  min-height: 22px;
  font-size: clamp(13px, 1.8vh, 17px);
  margin: clamp(8px, 1.6vh, 16px) 0 0;
  color: var(--muted);
  text-align: center;
}

.kiosk-status.is-error { color: var(--brand-2, #C4451C); }

.kiosk-success {
  padding: 8px 0 4px;
}

.kiosk-success-icon {
  width: clamp(48px, 9vh, 84px);
  height: clamp(48px, 9vh, 84px);
  margin: 0 auto clamp(10px, 2vh, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-3, #6B785C);
  color: #fff;
  font-size: clamp(22px, 4vh, 42px);
}

.kiosk-success-title {
  font-family: "Jost", sans-serif;
  font-size: clamp(20px, 3.6vh, 30px);
  font-weight: 500;
  color: var(--primary);
  margin: 0 0 10px;
}

.kiosk-success-text {
  font-size: clamp(14px, 2.2vh, 19px);
  color: var(--muted);
  margin: 0 0 clamp(14px, 3.2vh, 32px);
  line-height: 1.5;
}

.kiosk-next {
  width: 100%;
  padding: clamp(12px, 2vh, 20px) 16px;
  font-family: "Jost", sans-serif;
  font-size: clamp(14px, 2vh, 20px);
  font-weight: 500;
  color: var(--primary);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--btn-radius, 10px);
  cursor: pointer;
}

.kiosk-next:active { background: var(--surface-2); }

.kiosk-countdown {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  opacity: 0.75;
}

.kiosk-privacy {
  margin: clamp(12px, 3vh, 30px) 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0.85;
}

/* Below this, even a hidden-but-shrunk privacy line starts crowding the
   form on a genuinely short screen — drop it rather than shrink it to
   the point of being unreadable. It's a nice-to-have footnote, not
   part of the job the screen exists to do. */
@media (max-height: 560px) {
  .kiosk-privacy { display: none; }
}

/* A wall-mounted display or a large tablet in landscape has room to
   spare — let the card breathe a bit more rather than stay pinned to
   its portrait max-width. */
@media (min-width: 900px) and (min-height: 700px) {
  .kiosk-card { max-width: 640px; }
}