/* ============================================================================
 *  components.css — buttons, badges, glass cards, stars, forms, hours,
 *  quotes, age-gate. Reusable pieces on the deep-space surface.
 * ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.78em 1.35em; font: inherit; font-weight: 600; line-height: 1;
  color: var(--accent-text); background: var(--gold);
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none; box-shadow: var(--glow-gold-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { color: var(--accent-text); transform: translateY(-2px); box-shadow: var(--glow-gold); background: var(--gold-soft); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--lg { padding: 0.95em 1.7em; font-size: var(--step-0); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong); box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { color: var(--ink); background: var(--glass); border-color: var(--gold); box-shadow: var(--glow-gold-sm); }

.btn--cyan { background: var(--cyan); color: oklch(18% 0.04 230); box-shadow: var(--glow-cyan); }
.btn--cyan:hover { background: var(--cyan-ink); color: oklch(16% 0.04 230); box-shadow: 0 0 30px oklch(80% 0.13 222 / 0.55); }

.btn[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* ---- Pills / badges ---------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.85em; border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink);
  backdrop-filter: blur(8px);
}
.pill svg { width: 1.05em; height: 1.05em; }
.badge-21 {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.04em; color: var(--lime-ink);
  padding: 0.32em 0.7em; border: 1.5px solid color-mix(in oklab, var(--lime) 60%, transparent);
  border-radius: var(--r-sm); box-shadow: var(--glow-lime);
}

/* ---- Stars ------------------------------------------------------------- */
.stars { display: inline-flex; gap: 0.12em; color: var(--star); filter: drop-shadow(0 0 6px oklch(83% 0.16 86 / 0.5)); }
.stars svg { width: 1.05em; height: 1.05em; }

/* ---- Glass card -------------------------------------------------------- */
.card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-l);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.card::before {  /* top hairline glow */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---- Forms ------------------------------------------------------------- */
.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4em; }
.field label { font-size: var(--step--1); font-weight: 600; color: color-mix(in oklab, var(--ink) 85%, var(--space)); }
.req { color: var(--gold); }
.input, .select, .textarea {
  width: 100%; padding: 0.8em 0.95em; font: inherit; color: var(--ink);
  background: oklch(12% 0.025 264 / 0.7); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px oklch(83% 0.165 88 / 0.18);
}
.textarea { min-height: 116px; resize: vertical; }
.select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.check { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--step--1); color: var(--muted); line-height: 1.4; cursor: pointer; }
.check input { margin-top: 0.15em; accent-color: var(--gold); width: 1.05em; height: 1.05em; }
.form__status { min-height: 1.2em; margin-top: calc(-1 * var(--space-2xs)); }

/* ---- Hours table ------------------------------------------------------- */
.hours { width: 100%; border-collapse: collapse; margin-top: var(--space-s); font-size: var(--step--1); }
.hours th, .hours td { text-align: left; padding: 0.5em 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 500; color: var(--muted); }
.hours td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours .closed { color: color-mix(in oklab, var(--muted) 90%, transparent); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--lime-ink); font-weight: 700; }
.hours tr.is-today th::before { content: "● "; color: var(--lime); font-size: 0.7em; vertical-align: middle; }

/* ---- Quote (review) card ---------------------------------------------- */
.quote {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--space-l); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: var(--space-s);
  box-shadow: var(--shadow-1);
}
.quote__text { font-size: var(--step-1); line-height: 1.5; color: var(--ink); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.quote__foot { display: flex; align-items: center; gap: 0.7em; margin-top: auto; }
.quote__avatar {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), var(--magenta)); color: oklch(18% 0.03 90);
  font-weight: 700; font-family: var(--font-display); flex: none;
}
.quote__who { font-weight: 600; color: var(--ink); }
.quote__src { font-size: var(--step--1); color: var(--muted); }
.quote__loc { color: var(--cyan-ink); }

/* ---- Trust item -------------------------------------------------------- */
.trust__item { display: inline-flex; align-items: center; gap: 0.55em; color: color-mix(in oklab, var(--ink) 88%, var(--space)); font-weight: 500; font-size: var(--step--1); white-space: nowrap; }
.trust__item svg { width: 1.2em; height: 1.2em; color: var(--gold); flex: none; }

/* ---- Age gate ---------------------------------------------------------- */
.agegate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: var(--gutter);
  background: oklch(8% 0.02 264 / 0.86); backdrop-filter: blur(10px);
}
.agegate[hidden] { display: none; }
.agegate__card {
  max-width: 30rem; width: 100%; text-align: center;
  background: linear-gradient(180deg, var(--space-rise), var(--space-deep));
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  padding: var(--space-xl) var(--space-l); box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.agegate__card::before {
  content: ""; position: absolute; inset: -40% 20% auto 20%; height: 60%;
  background: radial-gradient(50% 100% at 50% 0%, oklch(83% 0.165 88 / 0.5), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.agegate__mark { width: 56px; height: 56px; margin: 0 auto var(--space-s); color: var(--gold); filter: drop-shadow(0 0 14px oklch(83% 0.16 86 / 0.6)); }
.agegate h2 { font-size: var(--step-3); }
.agegate p { color: var(--muted); margin-top: var(--space-2xs); }
.agegate__actions { display: flex; gap: var(--space-s); justify-content: center; margin-top: var(--space-l); flex-wrap: wrap; }
.agegate__fine { font-size: var(--step--1); margin-top: var(--space-m); color: color-mix(in oklab, var(--muted) 85%, transparent); }
.agegate__deny { display: none; }
.agegate.is-denied .agegate__prompt { display: none; }
.agegate.is-denied .agegate__deny { display: block; }
body.gate-locked { overflow: hidden; }