/* KEA Registration — Kingdom Excellence
   Editorial, premium light theme: cream surfaces, Kingdom Gold accents over a
   deep-teal counterpoint, pill shapes, and diffuse warm shadows instead of
   hard borders. See stitch_kogi_assembly_portal_redesign/DESIGN.md.

   The --kea-* variable names are load-bearing: admin.css consumes them and is
   loaded alongside this file, so they are re-pointed here rather than renamed. */

:root {
  --kea-bg: #fff8f0;
  --kea-card: #ffffff;
  --kea-text: #1f1b13;
  --kea-text-muted: #4d4635;
  --kea-text-faint: #7f7663;
  --kea-field-bg: #fbf3e5;
  --kea-border: #e6ddcd;
  --kea-field-border: #d0c5af;
  --kea-accent-a: #735c00;
  --kea-accent-b: #006874;
  --kea-accent-solid: #735c00;
  --kea-error: #ba1a1a;
  --kea-error-bg: #ffdad6;
  --kea-radius-lg: 28px;
  --kea-radius-md: 16px;
  --kea-radius-sm: 10px;
  --kea-radius-pill: 999px;
  --kea-shadow: 0 4px 24px rgba(115, 92, 0, 0.06);
  --kea-shadow-lg: 0 12px 40px rgba(115, 92, 0, 0.10);

  --kea-gold: #d4af37;
  --kea-teal: #006874;
  --kea-surface-low: #fbf3e5;
  --kea-surface-high: #efe7da;
  --kea-font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--kea-bg);
  color: var(--kea-text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The mesh wash from the reference — three low-saturation blobs (teal, gold,
   cool blue) fading into the cream base. A ::before pinned to the viewport
   rather than a background-image on body: the form is often taller than one
   screen, and a page-anchored gradient (positioned as a % of the full
   scrollable height) ends up scrolled out of view within the first screenful,
   leaving flat color for the rest of the page. position:fixed keeps the wash
   visible at every scroll position without the background-attachment:fixed
   quirks some mobile Safari versions have. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(at 10% 20%, hsla(186, 40%, 90%, 0.9) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(43, 80%, 90%, 0.9) 0px, transparent 50%),
    radial-gradient(at 40% 60%, hsla(220, 30%, 95%, 0.9) 0px, transparent 50%);
  background-repeat: no-repeat;
}

/* -------------------------------------------------------------- topbar */

.kea-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 240, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(115, 92, 0, 0.07);
}

.kea-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kea-wordmark {
  display: block;
  height: 28px;
  width: auto;
}

/* ------------------------------------------------------------- layout */

.kea-page {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* Bottom padding clears the fixed .kea-sticky-bar so the last content
     (or the open form's submit button) is never hidden underneath it. */
  padding: 40px 24px 120px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The empty / unavailable state. It is the whole page when it shows, so it
   gets the same card treatment as the event page rather than bare text
   floating on the wash — centred in the viewport, not stuck to the top. */
.kea-empty {
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.kea-empty-card {
  width: 100%;
  max-width: 440px;
  background: var(--kea-card);
  border: 1px solid var(--kea-border);
  border-radius: var(--kea-radius-lg);
  box-shadow: var(--kea-shadow-lg);
  padding: 48px 32px 44px;
  text-align: center;
}

.kea-empty-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--kea-teal);
  background: var(--kea-surface-low);
}

.kea-empty-mark svg {
  width: 26px;
  height: 26px;
}

.kea-empty-card h1 {
  margin: 0 0 10px;
  font-family: var(--kea-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kea-text);
}

.kea-empty-card p {
  margin: 0;
  color: var(--kea-text-muted);
}

.kea-ig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--kea-accent-a);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.kea-ig:hover {
  text-decoration: underline;
}

.kea-ig svg {
  width: 15px;
  height: 15px;
}

.kea-empty-sub {
  margin-top: 14px !important;
  padding-top: 16px;
  border-top: 1px solid var(--kea-border);
  font-size: 14px;
  color: var(--kea-text-faint) !important;
}

/* --------------------------------------------------------------- flier */

.kea-flier {
  width: 100%;
  border-radius: var(--kea-radius-lg);
  overflow: hidden;
  box-shadow: var(--kea-shadow-lg);
  background: var(--kea-surface-low);
  /* aspect-ratio set inline per event so the browser reserves the exact
     space before the image loads — the page must never jump. */
}

.kea-flier img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

/* -------------------------------------------------------------- header */

.kea-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(255, 224, 136, 0.35);
  border: 1px solid rgba(255, 224, 136, 0.8);
  color: #554300;
  border-radius: var(--kea-radius-pill);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.kea-date-chip svg { width: 14px; height: 14px; }

.kea-page h1 {
  font-family: var(--kea-font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.kea-meta {
  font-size: 14px;
  color: var(--kea-text-muted);
  margin: 0;
}

.kea-description {
  font-size: 18px;
  color: var(--kea-text-muted);
  margin: 0;
  max-width: 65ch;
}

/* ---------------------------------------------------------- info cards */

.kea-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.kea-info-card {
  background: var(--kea-card);
  border: 1px solid var(--kea-border);
  border-radius: var(--kea-radius-lg);
  box-shadow: var(--kea-shadow);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.3s;
}

.kea-info-card:hover { box-shadow: var(--kea-shadow-lg); }

.kea-info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kea-surface-high);
  color: var(--kea-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kea-info-icon svg { width: 20px; height: 20px; }

.kea-info-card h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kea-text-faint);
}

.kea-info-card p {
  margin: 0;
  font-size: 15px;
  color: var(--kea-text-muted);
}

.kea-info-card p.kea-info-strong {
  color: var(--kea-text);
  font-weight: 600;
}

.kea-info-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kea-accent-a);
  text-decoration: none;
}

.kea-info-link:hover { text-decoration: underline; }
.kea-info-link svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ speakers */

.kea-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--kea-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kea-section-heading svg {
  width: 22px;
  height: 22px;
  color: var(--kea-accent-a);
}

.kea-speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.kea-speaker-card {
  background: var(--kea-card);
  border: 1px solid var(--kea-border);
  border-radius: var(--kea-radius-lg);
  box-shadow: var(--kea-shadow);
  padding: 24px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.kea-speaker-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kea-shadow-lg);
}

/* Initials rather than an uploaded photo — see migrations/schema.sql. */
.kea-speaker-avatar {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--kea-surface-high);
  color: var(--kea-accent-a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kea-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* A speaker with a photo renders <img class="kea-speaker-avatar">, sharing
   the same 48px circle as the initials fallback — object-fit is the only
   thing an image needs on top of that. */
img.kea-speaker-avatar {
  object-fit: cover;
}

.kea-speaker-card h4 {
  margin: 0 0 4px;
  font-family: var(--kea-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kea-speaker-card p {
  margin: 0;
  font-size: 13px;
  color: var(--kea-teal);
  line-height: 1.5;
}

.kea-speaker-card .kea-speaker-bio {
  margin-top: 10px;
  font-size: 14px;
  color: var(--kea-text-muted);
}

/* -------------------------------------------------------- form panel */

.kea-form-panel {
  background: var(--kea-card);
  border: 1px solid var(--kea-border);
  border-radius: var(--kea-radius-lg);
  box-shadow: var(--kea-shadow-lg);
  overflow: hidden;
}

.kea-form-panel[hidden] { display: none; }

.kea-panel-body { padding: 24px; }

/* ---------------------------------------------------------- sticky bar */

/* Price + Register live here, pinned to the viewport rather than the page,
   so the call to action stays reachable no matter how long the event
   details or speaker panel run. Hidden (not removed) once the form opens —
   see openForm() in app.js — since at that point the price is restated in
   the form's own total box and a persistent bar would just crowd the steps. */
.kea-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(255, 248, 240, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--kea-border);
  box-shadow: 0 -8px 24px rgba(115, 92, 0, 0.08);
}

.kea-sticky-bar[hidden] { display: none; }

.kea-sticky-bar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.kea-sticky-bar .kea-price-block { flex-shrink: 0; }
.kea-sticky-bar .kea-btn-primary { width: auto; padding-left: 32px; padding-right: 32px; }

.kea-price-block .kea-price-tier {
  font-size: 12px;
  font-weight: 700;
  color: var(--kea-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.kea-price-block .kea-price-amount {
  font-family: var(--kea-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.kea-price-block .kea-price-amount small {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--kea-text-muted);
}

.kea-price-block .kea-price-note {
  font-size: 13px;
  color: var(--kea-text-muted);
  margin-top: 4px;
}

.kea-closed {
  background: var(--kea-error-bg);
  color: #93000a;
  border-radius: var(--kea-radius-md);
  padding: 16px;
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------- buttons */

.kea-btn-primary {
  display: block;
  width: 100%;
  background: var(--kea-accent-a);
  color: #fff;
  border: none;
  border-radius: var(--kea-radius-pill);
  padding: 15px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.kea-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(115, 92, 0, 0.22);
}

.kea-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.kea-btn-secondary {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--kea-teal);
  border: 1px solid var(--kea-teal);
  border-radius: var(--kea-radius-pill);
  padding: 14px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.kea-btn-secondary:hover { background: rgba(0, 104, 116, 0.06); }

/* ----------------------------------------------------------------- form */

#kea-form[hidden] { display: none; }

/* --------------------------------------------------------------- stepper */

.kea-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: 24px;
}

/* The connector sits behind the numbered circles; each item paints its own
   panel-coloured background so the line appears to break around it. */
.kea-stepper::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 2px;
  background: var(--kea-border);
}

.kea-stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--kea-card);
  padding: 0 6px;
}

.kea-stepper-item b {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kea-surface-high);
  color: var(--kea-text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

.kea-stepper-item span {
  font-size: 12px;
  font-weight: 500;
  color: var(--kea-text-faint);
  line-height: 1.4;
}

.kea-stepper-item.on b {
  background: var(--kea-accent-a);
  color: #fff;
}

.kea-stepper-item.on span { color: var(--kea-accent-a); }

.kea-step { display: none; }
.kea-step.active { display: block; }

.kea-card {
  background: var(--kea-card);
  border-radius: var(--kea-radius-lg);
  padding: 24px;
  box-shadow: var(--kea-shadow);
}

/* Inside the registration panel the step already sits on a white card, so it
   drops its own frame and keeps only the vertical rhythm. */
.kea-panel-body .kea-card {
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.kea-step-label {
  font-family: var(--kea-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--kea-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kea-border);
  margin-bottom: 20px;
}

.kea-field { margin-bottom: 16px; }

.kea-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--kea-text);
  margin-bottom: 6px;
}

.kea-field .kea-help {
  font-size: 12px;
  color: var(--kea-text-faint);
  margin: 4px 0 0;
}

.kea-field input[type="text"],
.kea-field input[type="email"],
.kea-field input[type="password"],
.kea-field input[type="tel"],
.kea-field input[type="number"],
.kea-field input[type="date"],
.kea-field input[type="search"],
.kea-field select,
.kea-field textarea {
  width: 100%;
  background: var(--kea-bg);
  border: 1px solid var(--kea-field-border);
  border-radius: var(--kea-radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--kea-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kea-field input:disabled,
.kea-field select:disabled,
.kea-field textarea:disabled {
  background: var(--kea-surface-high);
  border-style: dashed;
  color: var(--kea-text-faint);
  cursor: not-allowed;
}

.kea-field input:focus,
.kea-field select:focus,
.kea-field textarea:focus {
  outline: none;
  border-color: var(--kea-teal);
  box-shadow: 0 0 0 1px var(--kea-teal);
  background: #fff;
}

.kea-field textarea { resize: vertical; min-height: 80px; }

.kea-field-error {
  display: block;
  color: var(--kea-error);
  font-size: 13px;
  margin-top: 5px;
}

.kea-field.has-error input,
.kea-field.has-error select,
.kea-field.has-error textarea {
  border-color: var(--kea-error);
  background: var(--kea-error-bg);
}

.kea-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400 !important;
  color: var(--kea-text-muted);
  cursor: pointer;
}

.kea-checkbox input {
  margin-top: 4px;
  accent-color: var(--kea-accent-a);
}

/* Honeypot — visually hidden but present in the DOM and tab order excluded,
   so simple bots that skip display:none inputs still fill it in. */
.kea-hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kea-attendee-names { margin-top: 4px; }

/* -------------------------------------------------------------- summary */

.kea-total-box {
  background: var(--kea-teal);
  border-radius: var(--kea-radius-md);
  padding: 20px;
  color: #fff;
  margin-bottom: 16px;
}

.kea-total-box .kea-total-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.kea-total-box .kea-total-amount {
  font-family: var(--kea-font-display);
  font-size: 30px;
  font-weight: 700;
  margin-top: 2px;
}

.kea-bank-details {
  background: var(--kea-surface-low);
  border: 1px solid var(--kea-border);
  border-radius: var(--kea-radius-md);
  padding: 16px;
  font-size: 14px;
  white-space: pre-line;
  margin-bottom: 16px;
}

.kea-nav-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.kea-nav-buttons .kea-btn-primary,
.kea-nav-buttons .kea-btn-secondary {
  margin-top: 0;
}

/* ---------------------------------------------------------------- misc */

.kea-success {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 32px;
}

.kea-success .kea-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--kea-surface-low);
  color: #2d6a4f;
  font-size: 32px;
  line-height: 64px;
}

.kea-success h1 {
  font-family: var(--kea-font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

@media (max-width: 560px) {
  .kea-page { padding: 24px 16px 116px; }
  .kea-topbar-inner { padding: 12px 16px; }
  .kea-panel-body { padding: 20px; }
  .kea-sticky-bar-inner { padding: 12px 16px; }
}