/* ============================================================
   CTA FORM — reserve + offer + email capture. Shared by the hero,
   the final section and the mobile sticky dock (each of those has
   its own small positioning override in its own section file —
   .panel-hero .cta, .cta.hero-cta-dock, .final-inner .cta — but the
   component's own look-and-feel lives entirely here).
   ============================================================ */
.cta {
  /* matches .reserve's own desktop cap (520px) below, so the form never
     has to fight its parent for width */
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-height: 150px; /* fixed height prevents layout shift on done state */
}
@media (min-width: 768px) {
  .cta.done .reserve-msg { order: -1; margin-top: 0; }
}
@media (max-width: 767px) {
  .cta.done .reserve-msg { position: absolute; margin-top: 0; }
}
.cta-head {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.cta-head-lg {
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cta-badge {
  display: inline-block;
  margin-top: var(--s2);
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--primary-subtle);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  color: var(--primary-hover);
}
.cta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.cta-top .cta-badge { margin-top: 0; }
@media (min-width: 768px) {
  /* label + badge read as one compact, evenly-spaced group */
  .cta-top { gap: 18px; }
}

/* the email bar — compact and premium, not a full-width heavy slab.
   Desktop caps at 520px; mobile caps even tighter (360px) and centres
   itself in the hero instead of stretching edge-to-edge. */
.reserve {
  margin-top: var(--s3);
  display: flex;
  align-items: stretch;
  width: min(520px, 100%);
  height: var(--control-h-lg);
  border: 1.5px solid var(--text-primary);
  /* full pill, same shape language as the header CTA and the offer badge —
     the email field + attached submit read as one capsule button. Cards
     keep their larger container radius (a different hierarchy tier). */
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-surface);
  transition: box-shadow var(--duration) var(--ease-standard);
}
@media (max-width: 767px) {
  .reserve {
    width: 100%;
    max-width: 360px;
    height: var(--control-h-sm);
    /* inherits the base full-pill radius — no override needed */
    margin-inline: auto; /* centred in the hero; the label/badge above are too (see .panel-hero .cta) */
  }
}
.reserve:focus-within { box-shadow: var(--focus-ring); }
.reserve.invalid { border-color: var(--danger); }
/* in the error state the field is focused, so the dark --focus-ring would
   sit outside the now-red border and read as a second, black frame. Drop it
   there so only the single red border shows. */
.reserve.invalid:focus-within { box-shadow: none; }
.reserve-email {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding-left: 22px;
  padding-right: 22px;
  font-family: inherit;
  font-size: 16px; /* >=16px so iOS doesn't zoom on focus */
  font-weight: 300;
  color: var(--text-primary);
}
.reserve-email::placeholder { color: var(--text-muted); }
.reserve-btn {
  flex: 0 0 auto;
  width: var(--control-h-lg);
  border: 0;
  background: var(--text-primary);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--duration) var(--ease-standard), opacity var(--duration) var(--ease-standard);
}
@media (max-width: 767px) {
  .reserve-btn { width: var(--control-h-sm); }
}
.reserve-btn:hover { background: var(--gray-700); }
.reserve.loading .reserve-btn { opacity: 0.55; cursor: default; }
.reserve.done { visibility: hidden; }
.cta.done .cta-head,
.cta.done .cta-badge { visibility: hidden; }

.reserve-msg {
  margin-top: var(--s2);
  min-height: 1em;
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.reserve-msg.ok {
  font-size: var(--t-desc);
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--text-primary);
  align-self: center;
  text-align: center;
}
.reserve-msg.err { color: var(--danger); }