/* ==========================================================================
   Bradobrey Landing — interactive kiosk / live-queue demo (Supabase-style dark)
   Styles the #kiosk section. Behaviour in assets/js/kiosk.js
   ========================================================================== */

.kiosk-section { position: relative; z-index: 1; }

.kiosk-shell { display: grid; gap: clamp(1rem, 0.5rem + 2vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .kiosk-shell { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }

/* ---- Terminal frame ---- */
.terminal {
  position: relative; border-radius: var(--card-radius); padding: clamp(1.1rem, 0.6rem + 2vw, 1.8rem);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow-lg);
  color: var(--text); overflow: hidden;
}
.terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); }
.terminal__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.terminal__bar .brand__word { font-family: var(--font-mono); color: var(--accent); font-size: 0.82rem; font-weight: 500; }
.terminal__clock { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Step progress ---- */
.kiosk-steps { position: relative; z-index: 1; display: flex; gap: 0.5rem; margin-bottom: 1.3rem; padding: 0; }
.kiosk-steps li {
  flex: 1; list-style: none; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.02em; text-transform: none;
  font-weight: 500; color: var(--text-faint); padding-top: 0.65rem; border-top: 2px solid var(--line);
  transition: color var(--dur), border-color var(--dur);
}
.kiosk-steps li.active { color: var(--accent); border-top-color: var(--accent); }
.kiosk-steps li.done { color: var(--text-muted); border-top-color: var(--accent-soft); }

/* ---- Panels ---- */
.kiosk-stage { position: relative; z-index: 1; min-height: 340px; }
.kiosk-panel { display: none; }
.kiosk-panel.active { display: block; animation: panelIn var(--dur) var(--ease-out-expo); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.kiosk-panel h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--n-0); }
.kiosk-panel .hint { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 1.1rem; }

/* Selectable cards */
.pick-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .pick-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.pick {
  position: relative; text-align: left; padding: 0.9rem 0.95rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out-expo), border-color var(--dur), background var(--dur);
}
.pick:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pick.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.pick__check { position: absolute; top: 0.65rem; right: 0.65rem; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--n-950); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out-back); }
.pick.selected .pick__check { opacity: 1; transform: scale(1); }
.pick__title { font-weight: 600; font-size: 0.94rem; margin-bottom: 0.15rem; color: var(--n-50); }
.pick__meta { font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 0.7rem; font-family: var(--font-mono); }
.pick__meta b { color: var(--accent); font-weight: 500; }
.pick__ava { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; background: var(--accent-dim); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); margin-bottom: 0.55rem; }
.pick__free { font-size: 0.72rem; color: var(--accent); font-weight: 500; font-family: var(--font-mono); }
.pick__busy { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); }

/* Form fields */
.field { margin-bottom: 0.85rem; }
.field label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 500; }
.field input {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: 8px; font-size: 0.96rem;
  background: var(--n-900); border: 1px solid var(--line); color: var(--n-50); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pay-opts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pay-opt { flex: 1; min-width: 90px; padding: 0.68rem; text-align: center; border-radius: 8px; font-size: 0.85rem; font-weight: 500; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); transition: border-color var(--dur-fast), background var(--dur); }
.pay-opt.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent-strong); }

/* Footer actions */
.kiosk-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; }
.kiosk-summary { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.kiosk-summary b { color: var(--accent); font-weight: 500; }
.kiosk-btns { display: flex; gap: 0.5rem; }
.kbtn { padding: 0.7rem 1.2rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur), background var(--dur), border-color var(--dur); }
.kbtn--next { background: var(--accent); color: var(--n-950); border: 1px solid color-mix(in srgb, var(--accent) 60%, white); }
.kbtn--next:hover { background: var(--accent-strong); }
.kbtn--back { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
.kbtn[disabled] { opacity: 0.35; pointer-events: none; }

/* ---- Ticket result ---- */
.ticket { text-align: center; padding: 1rem 0.5rem; }
.ticket__num { font-family: var(--font-mono); font-size: clamp(3.5rem, 2rem + 8vw, 5.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(120deg, var(--green-200), var(--green-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 0.5rem; }
.ticket__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.5rem; }
.ticket__cell { padding: 0.9rem 0.6rem; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.ticket__cell b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--n-50); font-family: var(--font-mono); }
.ticket__cell span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ticket__note { margin-top: 1.3rem; font-size: 0.86rem; color: var(--text-muted); }
.ticket__note b { color: var(--accent); }

/* ---- Live board side panel ---- */
.livepanel { border-radius: var(--card-radius); padding: 1.3rem 1.3rem 1.5rem; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.livepanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.livepanel__head h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--n-0); }
.livepanel__live { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.livepanel__live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.qrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.8rem; border-radius: 9px; margin-bottom: 0.5rem;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out-expo);
}
.qrow.is-mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.qrow.is-serving { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.qrow__pos { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; background: var(--n-900); color: var(--n-100); border: 1px solid var(--line); }
.qrow.is-mine .qrow__pos { background: var(--accent); color: var(--n-950); border-color: transparent; }
.qrow__name { display: block; font-weight: 600; font-size: 0.9rem; color: var(--n-50); }
.qrow__sub { display: block; font-size: 0.74rem; color: var(--text-muted); }
.qrow__eta { text-align: right; font-size: 0.8rem; font-family: var(--font-mono); }
.qrow__eta b { color: var(--accent); font-weight: 700; }
.qrow__eta span { display: block; font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.qrow__status { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; padding: 0.2rem 0.45rem; border-radius: 5px; }
.qrow__status.serving { background: var(--accent-dim); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.qrow__status.waiting { background: var(--n-900); color: var(--text-muted); border: 1px solid var(--line-strong); }

.livepanel__foot { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; }
.livepanel__foot svg { width: 15px; height: 15px; color: var(--accent); flex: none; }