/*
 * reserve-seat.css — Shared styling for the "Reserve Your Seat" CTA + modal.
 *
 * Loaded by index.html, founder.html, article.html. Uses the site's existing
 * CSS variables (--gold, --gold-bright, --bg-deep, --text-hero, --ff-body,
 * --ff-display, --ease-lux) so it inherits the dark+gold palette automatically.
 *
 * Design brief (Boss 2026-08-31):
 *   - Gold, clickable, matches .btn geometry
 *   - Modal: dark surface, gold accents, RTL-correct, Fraunces title,
 *     Alexandria body
 *   - Mobile-safe at 390/360px — no overflow
 *
 * IMPORTANT: We deliberately do NOT rely on the older `.btn--soon` selector.
 * Those chips are gone. The new CTA uses `.btn--reserve`.
 */

/* ======== CLICKABLE GOLD CTA (replaces .btn--soon chips) ======== */
.btn--reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--ff-body, "Alexandria", sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--bg-void, #050403);
  background: linear-gradient(135deg, var(--gold-bright, #f0d488), var(--gold, #c9a24c));
  border: 1px solid var(--gold, #c9a24c);
  box-shadow: 0 6px 22px rgba(201, 162, 76, 0.28);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    transform 0.35s var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.35s var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1)),
    filter 0.35s var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1));
  -webkit-tap-highlight-color: transparent;
}
.btn--reserve:hover,
.btn--reserve:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(201, 162, 76, 0.42);
  filter: brightness(1.05);
  outline: none;
}
.btn--reserve:active { transform: translateY(0); filter: brightness(0.98); }

/* Small article-page variant that inherits the same look but a hair smaller. */
.article-cta__btn--reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--ff-body, "Alexandria", sans-serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--bg-void, #050403);
  background: linear-gradient(135deg, var(--gold-bright, #f0d488), var(--gold, #c9a24c));
  border: 1px solid var(--gold, #c9a24c);
  box-shadow: 0 6px 22px rgba(201, 162, 76, 0.28);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}
.article-cta__btn--reserve:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(201, 162, 76, 0.42);
  filter: brightness(1.05);
}

/* ======== MODAL ======== */
.reserve-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 3, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.reserve-modal.open { display: flex; }

.reserve-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: linear-gradient(180deg, #12100b 0%, #0a0806 100%);
  border: 1px solid rgba(201, 162, 76, 0.28);
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 162, 76, 0.08);
  color: var(--text-primary, #e9e2d2);
  animation: reserveIn 0.35s var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes reserveIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.reserve-modal__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 246, 224, 0.04);
  border: 1px solid rgba(201, 162, 76, 0.18);
  color: var(--text-hero, #fbf6e9);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.reserve-modal__close:hover { background: var(--gold-dim, rgba(201, 162, 76, 0.10)); transform: rotate(90deg); }

.reserve-modal__title {
  font-family: var(--ff-display, "Fraunces", serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-hero, #fbf6e9);
  margin: 0 0 8px;
}
[dir="rtl"] .reserve-modal__title { font-family: var(--ff-body, "Alexandria", sans-serif); font-weight: 700; }

.reserve-modal__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary, #a39c8c);
  margin: 0 0 20px;
}

.reserve-modal__field { margin-bottom: 14px; }
.reserve-modal__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #c9a24c);
  margin-bottom: 6px;
}
.reserve-modal__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 246, 224, 0.03);
  border: 1px solid rgba(201, 162, 76, 0.18);
  color: var(--text-hero, #fbf6e9);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  min-width: 0; /* prevent flex/grid overflow on mobile */
}
.reserve-modal__input:focus {
  outline: none;
  border-color: var(--gold, #c9a24c);
  background: rgba(255, 246, 224, 0.05);
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.18);
}
.reserve-modal__input::placeholder { color: var(--text-muted, #857f72); opacity: 0.7; }
[dir="rtl"] .reserve-modal__input { text-align: right; }

.reserve-modal__actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reserve-modal__submit {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright, #f0d488), var(--gold, #c9a24c));
  border: 1px solid var(--gold, #c9a24c);
  color: var(--bg-void, #050403);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 22px rgba(201, 162, 76, 0.28);
}
.reserve-modal__submit:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.05); }
.reserve-modal__submit[disabled] { opacity: 0.6; cursor: not-allowed; }

.reserve-modal__error {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(220, 80, 60, 0.10);
  border: 1px solid rgba(220, 80, 60, 0.35);
  color: #f4b8ae;
  font-size: 13px;
  line-height: 1.5;
}
.reserve-modal__error.show { display: block; }

.reserve-modal__success {
  display: none;
  padding: 20px 4px 4px;
  text-align: center;
}
.reserve-modal__success.show { display: block; }
.reserve-modal__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-dim, rgba(201, 162, 76, 0.10));
  border: 1px solid var(--gold, #c9a24c);
  color: var(--gold-bright, #f0d488);
  font-size: 28px;
  line-height: 54px;
  margin: 0 auto 14px;
}
.reserve-modal__success-text {
  font-family: var(--ff-display, "Fraunces", serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-hero, #fbf6e9);
  max-width: 32ch;
  margin: 0 auto;
}
[dir="rtl"] .reserve-modal__success-text { font-family: var(--ff-body, "Alexandria", sans-serif); font-weight: 600; }

/* Mobile safety: never let the modal or its inputs push a horizontal
   scrollbar at 390px or 360px (site's tightest known viewports). */
@media (max-width: 420px) {
  .reserve-modal { padding: 12px; }
  .reserve-modal__panel { padding: 26px 20px 22px; border-radius: 14px; }
  .reserve-modal__title { font-size: 20px; }
  .reserve-modal__input { font-size: 16px; /* prevents iOS zoom-on-focus */ }
  .btn--reserve, .article-cta__btn--reserve { max-width: 100%; }
}