/* ============================================================
   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.

   Typeface is Red Hat Display throughout, same swap as join.css — see
   website/assets/website fonts.docx.

   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: "Red Hat Display", "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);
}

/* The full lockup (icon + wordmark + tagline) as one inline SVG — see the
   comment in joinus.html. Sized as a whole rather than as icon+separate
   text, since the text is now vector art positioned by the artwork's own
   geometry, not a stack of HTML lines this stylesheet lays out itself. */
.kiosk-mark {
  display: block;
  width: clamp(92px, 17vh, 168px);
  /* aspect-ratio matches the crop's own viewBox (349.23 / 452.23) so the
     box never depends on intrinsic-ratio resolution before the SVG paints. */
  aspect-ratio: 349.23 / 452.23;
  height: auto;
  /* Was clamp(10px, 2.2vh, 22px) — tightened on request ("reduce space
     between logo and the sentence under it"). The lockup's own crop
     already carries some blank space below "LEARN · CREATE · PERFORM"
     (part of the source artwork, not this margin), so this only needed
     to be a small nudge, not removed outright. */
  margin: 0 auto clamp(2px, 0.6vh, 6px);
  overflow: visible;   /* tiles drift outside the viewBox on hover */
}

.kiosk-title {
  font-family: "Red Hat Display", "Segoe UI", sans-serif;
  font-size: clamp(22px, 5.5vh, 38px);
  font-weight: 700;
  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(--primary); /* was --accent (orange) — matched to .kiosk-title's blue on request */
  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: "Red Hat Display", "Segoe UI", 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: "Red Hat Display", "Segoe UI", 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: "Red Hat Display", "Segoe UI", sans-serif;
  font-size: clamp(20px, 3.6vh, 30px);
  font-weight: 700;
  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: "Red Hat Display", "Segoe UI", 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; }
}