/* ============================================================
   kiosk.css — the entrance tablet.
   A full-screen, customer-facing skin that sits on top of the app.
   Big type and big touch targets: this is read standing up, at arm's
   length, by someone holding a dog leash.

   Unlike the rest of the app, the kiosk does NOT follow the shop's
   chosen theme. It always wears the logo's own colours so the entrance
   looks like the brand no matter which theme is set inside. Blue leads;
   pink is an accent, used sparingly to keep it looking like a business
   front desk rather than a toy.
   ============================================================ */

.kiosk {
  --k-teal: #2E9EC4;        /* primary — the dominant colour */
  --k-teal-deep: #1B6E8E;
  --k-teal-dark: #14566F;
  --k-sky: #7FCCE8;
  --k-sky-soft: #E8F4FA;
  --k-pink: #EC5B98;        /* accent — used sparingly */
  --k-pink-deep: #CE3D7B;
  --k-pink-soft: #FCE8F1;
  --k-ink: #22262e;
  --k-muted: #667085;
  --k-line: #DCE7EE;
  --k-white: #fff;

  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  color: var(--k-ink);
  overflow: hidden;
  /* a shared device: never offer to autofill, select or translate */
  -webkit-user-select: none;
  user-select: none;

  /* Mostly a cool blue wash, with just a hint of pink in one corner. */
  background:
    radial-gradient(95% 70% at 85% 4%, var(--k-pink-soft) 0%, transparent 48%),
    radial-gradient(120% 90% at 10% 100%, #DCEEF7 0%, transparent 62%),
    linear-gradient(165deg, #FBFDFE 0%, #F1F8FC 48%, #E9F3F9 100%);
}

/* While the kiosk is up, the app behind it must not scroll or bounce —
   a customer dragging the screen should never reveal the real app. */
body.kiosk-on { overflow: hidden; }

/* ---------------- Soap bubbles ----------------
   The logo is a dog in a bubble bath, so the background is bubbles
   drifting up. Kept faint on purpose: movement, not confetti. */

.kiosk-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Everything that drifts upward shares this. */
.kiosk-float {
  position: absolute;
  bottom: -20vmin;
  opacity: 0;
  animation: kiosk-rise linear infinite;
  will-change: transform, opacity;
}

@keyframes kiosk-rise {
  0%   { transform: translateY(0) translateX(0) scale(.85); opacity: 0; }
  14%  { opacity: .62; }
  86%  { opacity: .5; }
  100% { transform: translateY(-122vh) translateX(var(--drift, 14px)) scale(1.06); opacity: 0; }
}

/* ---- Soap bubbles: glassy, with a real specular highlight ----
   A bubble reads as 3D from three things, all of them here: a tiny hard
   highlight where the light source is, a soft bounce light on the opposite
   side, and a thin iridescent film at the rim with nothing in the middle
   (you can see through a bubble). */
.kiosk-bubble {
  border-radius: 50%;
  background:
    /* 1. hard specular dot — the actual reflection of the light */
    radial-gradient(circle at 29% 25%, rgba(255, 255, 255, 1) 0 5%, rgba(255, 255, 255, 0) 13%),
    /* 2. soft glow around it */
    radial-gradient(circle at 33% 29%, rgba(255, 255, 255, .72) 0 13%, rgba(255, 255, 255, 0) 38%),
    /* 3. bounce light coming back off the lower-right edge */
    radial-gradient(circle at 71% 76%, rgba(255, 255, 255, .5) 0 7%, rgba(255, 255, 255, 0) 25%),
    /* 4. the film itself: clear in the middle, denser towards the rim */
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0) 55%,
      rgba(255, 255, 255, .22) 80%,
      rgba(255, 255, 255, .4) 93%,
      rgba(255, 255, 255, .12) 100%);
  box-shadow:
    inset -5px -7px 16px rgba(46, 158, 196, .22),  /* shaded far edge = volume */
    inset 4px 5px 14px rgba(255, 255, 255, .55),
    0 3px 14px rgba(46, 158, 196, .14);
}

/* The oil-slick sheen on the film. A conic gradient masked down to a ring,
   so it only tints the rim and leaves the middle see-through. */
.kiosk-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    rgba(255, 196, 228, .55), rgba(186, 230, 255, .5), rgba(198, 255, 228, .45),
    rgba(255, 246, 193, .5), rgba(255, 196, 228, .55));
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 76%, #000 100%);
  mask: radial-gradient(circle, transparent 56%, #000 76%, #000 100%);
  /* No blend mode on purpose: `screen` over this near-white background would
     wash the sheen out to plain white and lose the effect entirely. */
}

/* A rare pink-tinted one, so the accent colour shows up in the motion too. */
.kiosk-bubble:nth-child(5n) {
  box-shadow:
    inset -5px -7px 16px rgba(236, 91, 152, .2),
    inset 4px 5px 14px rgba(255, 255, 255, .55),
    0 3px 14px rgba(236, 91, 152, .14);
}

/* ---- Bones and balls ----
   Same drift, plus a slow tumble so they don't look pasted on. */
.kiosk-toy {
  aspect-ratio: 1;           /* balls are square; the bone overrides this */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation-name: kiosk-rise, kiosk-tumble;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  filter: drop-shadow(0 4px 8px rgba(27, 110, 142, .2));
}
/* The bone is wider than it is tall; the balls are square. */
.kiosk-toy--bone   { background-image: url('../img/toy-bone.svg'); aspect-ratio: 64 / 36; }
.kiosk-toy--teal   { background-image: url('../img/toy-ball-teal.svg'); }
.kiosk-toy--pink   { background-image: url('../img/toy-ball-pink.svg'); }
.kiosk-toy--tennis { background-image: url('../img/toy-ball-tennis.svg'); }

@keyframes kiosk-tumble {
  0%   { rotate: var(--spin-from, -18deg); }
  100% { rotate: var(--spin-to, 20deg); }
}

/* ---------------- Screens ---------------- */

.kiosk__screen {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 3vmin, 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kiosk__screen.d-none { display: none; }

/* Keep a comfortable reading column on a wide screen. A tablet fills this
   edge to edge; a desktop monitor centres it instead of stretching the
   fields across a metre of glass. */
.kiosk__screen > * {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

/* Vertically centred screens (welcome, thank-you) use auto margins on the
   first and last child rather than `justify-content: center`. Centring a
   flex column that overflows clips the TOP of the content and makes it
   unreachable — which is exactly what cut off "WELCOME TO". With auto
   margins the group still centres when it fits, and scrolls properly when
   it doesn't. */
.kiosk-centred { justify-content: flex-start; align-items: center; text-align: center; }
.kiosk-centred > :first-child { margin-top: auto; }
.kiosk-centred > :last-child { margin-bottom: auto; }

/* ---------------- Welcome ---------------- */

.kiosk-welcome { gap: clamp(6px, 1.5vmin, 16px); }

.kiosk-welcome__hi {
  font-size: clamp(13px, 2vmin, 20px);
  color: var(--k-teal-deep);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.kiosk-welcome__shop {
  font-size: clamp(27px, 5.6vmin, 60px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
  /* blue first, pink only at the tail */
  background: linear-gradient(100deg, var(--k-teal-dark) 0%, var(--k-teal) 46%, var(--k-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* a gradient on text needs a little breathing room or glyphs get clipped */
  padding: .08em .04em .14em;
}
.kiosk-welcome__tagline {
  font-size: clamp(13px, 2vmin, 20px);
  color: var(--k-muted);
  max-width: 36ch;
  margin: 0;
}

/* ---- The frame ----
   The welcome content sits on a card floating over the background, the way a
   modal does, so the bubbles and toys drift around and behind it. The card is
   slightly translucent and blurs what passes underneath, which keeps the
   movement visible without the text ever losing contrast. */
.kiosk-frame {
  width: 100%;
  padding: clamp(18px, 3.2vmin, 46px);
  border-radius: clamp(22px, 3vmin, 40px);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 28px 64px rgba(27, 110, 142, .17),
    0 4px 14px rgba(27, 110, 142, .07);
}

/* ---- The split: brand on one half, the two choices on the other ---- */

/* Narrow or portrait screens (phone, tablet held upright) stack the same
   markup instead — a 50/50 split needs width to breathe. */
.kiosk-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vmin, 22px);
}
.kiosk-split__visual,
.kiosk-split__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 18px);
  min-width: 0;
}

/* Cut-out photo: real transparency, so no card or frame around it —
   the dogs simply stand on the background. */
.kiosk-hero {
  max-width: 100%;
  /* Height-first, because the photo is tall and portrait: on a landscape
     tablet, sizing by width alone would make it taller than the screen. */
  max-height: min(52vh, 460px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(27, 110, 142, .26));
  animation: kiosk-float 6s ease-in-out infinite;
}

@keyframes kiosk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Tablet landscape and desktop: the actual half-and-half. */
@media (min-width: 900px) {
  .kiosk-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vmin, 64px);
    width: 100%;
  }
  .kiosk-split__panel {
    align-items: flex-start;
    text-align: left;
  }

  /* With the logo gone, the photo owns its whole half: it grows until either
     the half's width or the screen height runs out, whichever comes first.
     On a wide monitor width is now the limit, which is exactly what we want —
     the dogs fill their side. The cap allows for the frame's padding on top
     of the screen's own, so nothing ever gets clipped. */
  .kiosk-hero { max-height: min(78vh, 900px); }

  /* Each half is narrower than the full screen, so the choices stack. */
  .kiosk-choices { flex-direction: column; max-width: none; }
}

/* A short landscape tablet: give the photo less height so nothing clips. */
@media (max-height: 700px) {
  .kiosk-hero { max-height: 76vh; }
}
@media (max-height: 560px) {
  .kiosk-welcome__tagline { display: none; }
}

/* ---------------- The two big choices ---------------- */

.kiosk-choices {
  display: flex;
  gap: clamp(12px, 2.2vmin, 26px);
  width: 100%;
  max-width: 820px;
  margin-top: clamp(6px, 1.6vmin, 16px);
}
@media (max-width: 640px) {
  .kiosk-choices { flex-direction: column; }
}

.kiosk-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(16px, 2.8vmin, 32px) clamp(12px, 2vmin, 22px);
  border-radius: 24px;
  border: none;
  color: var(--k-white);
  font-size: clamp(17px, 2.6vmin, 26px);
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: clamp(96px, 14vmin, 124px);
}
.kiosk-choice i { font-size: clamp(28px, 4.4vmin, 46px); }
.kiosk-choice:active { transform: scale(.97); }

/* Blue is the lead action; pink is the second. */
.kiosk-choice--new {
  background: linear-gradient(150deg, var(--k-teal) 0%, var(--k-teal-deep) 60%, var(--k-teal-dark) 100%);
  box-shadow: 0 12px 28px rgba(27, 110, 142, .34);
}
.kiosk-choice--find {
  background: linear-gradient(150deg, #F277A9 0%, var(--k-pink) 55%, var(--k-pink-deep) 100%);
  box-shadow: 0 12px 28px rgba(206, 61, 123, .3);
}

/* ---- Discreet staff exit, always visible, always asks for the PIN ---- */
.kiosk-exitbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(10px, 2vmin, 22px);
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--k-line);
  background: rgba(255, 255, 255, .75);
  color: var(--k-muted);
  font-size: clamp(12px, 1.7vmin, 15px);
  font-weight: 700;
  cursor: pointer;
}
.kiosk-exitbtn:active { transform: scale(.96); }
.kiosk-exitbtn i { font-size: 1.1em; }

/* ---------------- Shared furniture ---------------- */

.kiosk-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(10px, 2vmin, 22px);
}
.kiosk-title {
  font-size: clamp(21px, 3.4vmin, 36px);
  font-weight: 900;
  margin: 0;
  color: var(--k-teal-deep);
}

.kiosk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px clamp(20px, 3vmin, 32px);
  border-radius: 999px;
  border: 2px solid var(--k-line);
  background: var(--k-white);
  color: var(--k-teal-deep);
  font-size: clamp(15px, 2.1vmin, 20px);
  font-weight: 800;
  cursor: pointer;
  min-height: 58px;
}
.kiosk-btn:active { transform: scale(.96); }
.kiosk-btn--primary {
  background: linear-gradient(140deg, var(--k-teal), var(--k-teal-deep) 70%, var(--k-teal-dark));
  border-color: transparent;
  color: var(--k-white);
  box-shadow: 0 8px 22px rgba(27, 110, 142, .3);
}
.kiosk-btn--primary:disabled { opacity: .65; }
.kiosk-btn--lg { width: 100%; font-size: clamp(17px, 2.5vmin, 23px); min-height: 70px; }

.kiosk-foot {
  margin-top: auto;
  padding-top: clamp(12px, 2.2vmin, 22px);
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ---------------- Search ---------------- */

.kiosk-search__row { display: flex; gap: 12px; margin-bottom: clamp(12px, 2.2vmin, 22px); }
.kiosk-search__input {
  flex: 1;
  min-width: 0; /* let it shrink inside the flex row instead of overflowing */
  padding: 16px 24px;
  font-size: clamp(17px, 2.6vmin, 25px);
  border-radius: 999px;
  border: 2px solid var(--k-line);
  background: var(--k-white);
  color: var(--k-ink);
  min-height: 66px;
  box-shadow: 0 4px 16px rgba(46, 158, 196, .1);
}
.kiosk-search__input::placeholder { color: #9aa4b2; }
.kiosk-search__input:focus { outline: none; border-color: var(--k-teal); }

/* ---- Results: a big horizontal carousel ---- */

.kiosk-carousel__wrap { position: relative; }

.kiosk-carousel {
  display: flex;
  gap: clamp(14px, 2.2vmin, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 18px;
  scroll-padding-inline: 8px;
}
.kiosk-carousel::-webkit-scrollbar { height: 8px; }
.kiosk-carousel::-webkit-scrollbar-thumb { background: rgba(46, 158, 196, .4); border-radius: 999px; }
.kiosk-carousel::-webkit-scrollbar-track { background: transparent; }

.kiosk-result {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: clamp(224px, 29vmin, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 2vmin, 22px) 16px clamp(16px, 2.2vmin, 24px);
  border-radius: 26px;
  background: var(--k-white);
  border: 2px solid var(--k-line);
  box-shadow: 0 10px 28px rgba(27, 110, 142, .12);
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kiosk-result:active { transform: scale(.97); border-color: var(--k-teal); }

/* The photo is the point — make it fill the card. */
.kiosk-result__pic {
  width: clamp(176px, 23vmin, 256px);
  height: clamp(176px, 23vmin, 256px);
  border-radius: 20px;
  object-fit: cover;
  background: var(--k-sky-soft);
}
.kiosk-result__pic--empty {
  display: grid;
  place-items: center;
  color: var(--k-sky);
  font-size: clamp(64px, 11vmin, 108px);
}
.kiosk-result__name { font-size: clamp(20px, 3vmin, 29px); font-weight: 900; color: var(--k-teal-deep); }
.kiosk-result__sub { font-size: clamp(13px, 1.9vmin, 17px); color: var(--k-muted); }

/* Carousel arrows — only shown while the row actually overflows. */
.kiosk-carousel__nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--k-line);
  background: var(--k-white);
  color: var(--k-teal-deep);
  font-size: 28px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(27, 110, 142, .18);
  cursor: pointer;
  z-index: 2;
}
.kiosk-carousel__nav:active { transform: translateY(-50%) scale(.92); }
.kiosk-carousel__nav--prev { left: -4px; }
.kiosk-carousel__nav--next { right: -4px; }
.kiosk-carousel__nav[hidden] { display: none; }

.kiosk-hint-strong {
  font-size: clamp(14px, 2.1vmin, 19px);
  font-weight: 700;
  color: var(--k-muted);
  margin: 0 0 10px;
}

.kiosk-empty {
  text-align: center;
  padding: clamp(24px, 5vmin, 56px) 16px;
  color: var(--k-muted);
}
.kiosk-empty i { font-size: clamp(48px, 9vmin, 84px); color: var(--k-sky); display: block; margin-bottom: 12px; }
.kiosk-empty__title { font-size: clamp(18px, 2.6vmin, 25px); font-weight: 800; color: var(--k-ink); }

/* ---------------- Dog card ---------------- */

.kiosk-card__hero {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vmin, 26px);
  margin-bottom: clamp(14px, 2.2vmin, 24px);
}
.kiosk-card__pic {
  width: clamp(100px, 16vmin, 172px);
  height: clamp(100px, 16vmin, 172px);
  border-radius: 26px;
  object-fit: cover;
  background: var(--k-sky-soft);
  border: 4px solid var(--k-white);
  box-shadow: 0 10px 26px rgba(27, 110, 142, .18);
  flex-shrink: 0;
}
.kiosk-card__pic--empty { display: grid; place-items: center; color: var(--k-sky); font-size: clamp(42px, 8vmin, 70px); }
.kiosk-card__name {
  font-size: clamp(27px, 5vmin, 50px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--k-teal-deep);
}
.kiosk-card__sub { font-size: clamp(14px, 2.1vmin, 19px); color: var(--k-muted); margin-top: 4px; }

.kiosk-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: clamp(10px, 1.6vmin, 16px);
}
.kiosk-spec {
  background: var(--k-white);
  border: 2px solid var(--k-line);
  border-radius: 18px;
  padding: clamp(12px, 1.9vmin, 18px);
}
.kiosk-spec__lbl {
  font-size: clamp(11px, 1.6vmin, 14px);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--k-teal);
  font-weight: 800;
}
.kiosk-spec__val { font-size: clamp(17px, 2.4vmin, 23px); font-weight: 800; margin-top: 4px; }

.kiosk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kiosk-chip {
  background: var(--k-sky-soft);
  color: var(--k-teal-deep);
  border: 2px solid var(--k-sky);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: clamp(13px, 1.9vmin, 17px);
  font-weight: 800;
}

.kiosk-note {
  margin-top: clamp(10px, 1.7vmin, 18px);
  background: var(--k-white);
  border: 2px solid var(--k-line);
  border-radius: 18px;
  padding: clamp(12px, 1.9vmin, 18px);
}
/* The customer's own words are the one pink highlight on this screen. */
.kiosk-note--accent { border-color: var(--k-pink); background: linear-gradient(180deg, var(--k-pink-soft), #fff 70%); }
.kiosk-note--accent .kiosk-spec__lbl { color: var(--k-pink-deep); }
.kiosk-note p { margin: 6px 0 0; font-size: clamp(15px, 2.1vmin, 20px); white-space: pre-wrap; }

/* ---- Owner block (dog card only, never the search results) ---- */
.kiosk-specs--owner { margin-bottom: 6px; }
.kiosk-hint--owner {
  margin: 0 0 clamp(10px, 1.7vmin, 18px);
  text-align: center;
}

/* ---- Vaccines (read-only for the customer) ---- */
.kiosk-vax__head {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 16px; border-radius: 999px;
  font-size: clamp(14px, 2vmin, 18px); font-weight: 800;
}
.kiosk-vax__head--upToDate { background: #e6f6ec; color: #1b7a3a; border: 2px solid #9fd9b4; }
.kiosk-vax__head--renewal { background: #fff3e0; color: #a35b00; border: 2px solid #f2c687; }
.kiosk-vax__head--missing { background: #fdeaea; color: #a32020; border: 2px solid #f0a9a9; }

.kiosk-vax-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kiosk-vax {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 14px;
  border: 2px solid var(--k-line); background: var(--k-white);
}
.kiosk-vax__name { font-weight: 800; font-size: clamp(14px, 2vmin, 18px); }
.kiosk-vax__state { font-size: clamp(13px, 1.8vmin, 16px); color: var(--k-muted); font-weight: 700; }
/* Only the two that need the customer to do something are coloured; "up to
   date" stays neutral so the exceptions are what catches the eye. */
.kiosk-vax--renewal { border-color: #f2c687; background: #fffaf2; }
.kiosk-vax--renewal .kiosk-vax__state { color: #a35b00; }
.kiosk-vax--missing { border-color: #f0a9a9; background: #fff7f7; }
.kiosk-vax--missing .kiosk-vax__state { color: #a32020; }

/* ---------------- New-dog form ---------------- */

.kiosk-form { display: flex; flex-direction: column; gap: clamp(10px, 1.6vmin, 16px); }
.kiosk-form__section {
  font-size: clamp(15px, 2.2vmin, 21px);
  font-weight: 900;
  margin: clamp(6px, 1.2vmin, 12px) 0 0;
  color: var(--k-teal-deep);
}
.kiosk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: clamp(10px, 1.6vmin, 16px);
}
.kiosk-field { display: flex; flex-direction: column; gap: 6px; }
.kiosk-field__lbl { font-size: clamp(13px, 1.8vmin, 16px); font-weight: 800; color: #4a5565; }
.kiosk-field__opt { font-weight: 500; color: #98a2b3; }
.kiosk-input,
.kiosk-select,
.kiosk-textarea {
  padding: 14px 18px;
  font-size: clamp(16px, 2.2vmin, 20px);
  border-radius: 16px;
  border: 2px solid var(--k-line);
  background: var(--k-white);
  color: var(--k-ink);
  min-height: 58px;
  width: 100%;
  font-family: inherit;
}
.kiosk-textarea { min-height: 112px; resize: none; }
.kiosk-input:focus,
.kiosk-select:focus,
.kiosk-textarea:focus { outline: none; border-color: var(--k-teal); }

.kiosk-hint { font-size: clamp(12px, 1.7vmin, 15px); color: var(--k-muted); margin: 2px 0 0; }

.kiosk-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kiosk-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid var(--k-line);
  background: var(--k-white);
  font-size: clamp(14px, 2vmin, 18px);
  font-weight: 700;
  cursor: pointer;
  min-height: 60px;
}
.kiosk-check input { width: 26px; height: 26px; accent-color: var(--k-teal); flex-shrink: 0; }

.kiosk-error {
  background: var(--k-pink-soft);
  color: var(--k-pink-deep);
  border: 2px solid var(--k-pink);
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: clamp(14px, 2vmin, 18px);
}

/* ---------------- Thank you ---------------- */

.kiosk-thanks { gap: clamp(10px, 2vmin, 20px); }
.kiosk-thanks__ico {
  width: clamp(96px, 16vmin, 160px);
  height: clamp(96px, 16vmin, 160px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--k-sky), var(--k-teal) 55%, var(--k-teal-deep));
  color: var(--k-white);
  font-size: clamp(48px, 8.5vmin, 84px);
  box-shadow: 0 14px 34px rgba(27, 110, 142, .34);
  animation: kiosk-pop .45s cubic-bezier(.22, 1.2, .4, 1);
}
@keyframes kiosk-pop {
  0%   { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.kiosk-thanks__title {
  font-size: clamp(28px, 5.2vmin, 54px);
  font-weight: 900;
  margin: 0;
  color: var(--k-teal-deep);
}
.kiosk-thanks__sub { font-size: clamp(15px, 2.3vmin, 22px); color: var(--k-muted); max-width: 34ch; margin: 0; }

/* ---------------- PIN pad (staff only) ---------------- */

.kiosk-pin {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(16, 32, 42, .84);
  backdrop-filter: blur(6px);
}
.kiosk-pin.d-none { display: none; }
.kiosk-pin__title { color: #fff; font-size: clamp(18px, 2.6vmin, 25px); font-weight: 800; }
.kiosk-pin__dots { display: flex; gap: 14px; }
.kiosk-pin__dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6);
}
.kiosk-pin__dot.is-on { background: #7FCCE8; border-color: #7FCCE8; }
.kiosk-pin__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kiosk-pin__key {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}
.kiosk-pin__key:active { background: rgba(255, 255, 255, .32); }
.kiosk-pin__key--wide { font-size: 20px; }
.kiosk-pin__err { color: #FF9BB8; font-weight: 800; min-height: 22px; }

/* The invisible long-press target. A third way in for staff, alongside the
   visible button and the triple-tap on the logo. */
.kiosk-exit {
  position: absolute;
  top: 0; right: 0;
  width: 92px; height: 92px;
  z-index: 3;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- Pending review (shop side, inside the normal app) -------- */

.pending-panel {
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.pending-panel__head { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.pending-panel__count {
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: 12px;
}
.pending-panel__desc { color: var(--text-muted); font-size: 12px; margin: 4px 0 10px; }
.pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
}
.pending-item__pic {
  width: 42px; height: 42px; border-radius: 12px; object-fit: cover;
  background: var(--brand-soft); flex-shrink: 0;
}
.pending-item__pic--empty { display: grid; place-items: center; color: var(--brand); }
.pending-item__info { flex: 1; min-width: 0; }
.pending-item__name { font-weight: 700; }
.pending-item__sub {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pending-item__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Someone who asked for less motion gets a still, but still colourful, page. */
@media (prefers-reduced-motion: reduce) {
  .kiosk-hero,
  .kiosk-thanks__ico { animation: none; }
  .kiosk-float { display: none; }
}