:root {
  --bg: #071912;
  --bg-soft: #0d2d23;
  --surface: rgba(8, 19, 15, 0.88);
  --surface-soft: rgba(18, 43, 34, 0.9);
  --text: #f5efe5;
  --muted: rgba(245, 239, 229, 0.72);
  --gold: #d8a64a;
  --gold-deep: #b98122;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --field-bg: rgba(255, 255, 255, 0.05);
  --field-bg-hover: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 54px rgba(0, 0, 0, 0.38);
  --danger: #d36262;
  --success: #69c48f;
  --title-font: "Cormorant Garamond", serif;
  --script-font: "Great Vibes", cursive;
  --caps-font: "Oswald", sans-serif;
  --body-font: "Manrope", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top right, rgba(216, 166, 74, 0.15), transparent 32%),
    radial-gradient(circle at 20% 16%, rgba(29, 111, 83, 0.4), transparent 34%),
    linear-gradient(180deg, #08150f 0%, #040b09 100%);
  color: var(--text);
  font-family: var(--body-font);
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.page-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(136deg, transparent 0 9.2%, rgba(216, 166, 74, 0.56) 9.4%, transparent 10.1%);
}

.page-shell > * {
  position: relative;
  z-index: 1;
}

.card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface);
  border-radius: 30px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.card {
  padding: 24px;
}

.card.has-open-picker {
  z-index: 4;
}

.page-header {
  display: grid;
  grid-template-columns: minmax(118px, 170px) 1fr;
  gap: 18px;
  align-items: center;
  margin: 4px 0 18px;
  padding: 10px 4px 4px;
}

.header-logo {
  width: 100%;
  max-width: 168px;
  height: auto;
}

.header-copy {
  min-width: 0;
}

.form-stack {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.section-kicker {
  margin: 0 0 8px;
  color: var(--gold);
  font-family: var(--caps-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  font-family: var(--script-font);
  font-size: clamp(44px, 8vw, 72px);
  font-weight: 400;
  line-height: 0.86;
  text-align: left;
}

.page-copy,
.helper-copy {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.helper-copy {
  text-align: left;
}

.helper-copy-tight {
  margin-top: 14px;
}

/* Hyphenation comes with the justification: without it, a narrow phone column
   pulls the words apart into rivers of white space. */
.helper-copy-justify {
  text-align: justify;
  hyphens: auto;
}

.section-head {
  margin-bottom: 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-title {
  /* No CSS shrinks text to fit its box. A heading too long for a narrow card
     still wraps; this only makes the two lines split evenly rather than leaving
     one word stranded on its own. */
  text-wrap: balance;
  margin: 0;
  font-family: var(--script-font);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 400;
  line-height: 0.9;
}

.suite-grid {
  display: grid;
  gap: 16px;
}

.suite-option {
  display: block;
  cursor: pointer;
}

.suite-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.suite-card {
  position: relative;
  display: grid;
  gap: 14px;
  border-radius: 26px;
  border: 3px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.suite-option:not(.is-selected):hover .suite-card,
.suite-option:not(.is-selected):focus-within .suite-card {
  border-color: rgba(216, 166, 74, 0.38);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.suite-option.is-selected,
.suite-option.is-selected .suite-card {
  cursor: default;
}

.suite-option.is-selected .suite-card,
.suite-input:checked + .suite-card {
  border-color: rgba(216, 166, 74, 0.72);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.26),
    0 0 0 5px rgba(216, 166, 74, 0.38);
  transform: translateY(-2px);
}

.suite-selection-indicator {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(216, 166, 74, 0.22);
  background: rgba(7, 25, 18, 0.78);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.96);
  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.suite-option.is-selected .suite-selection-indicator,
.suite-input:checked + .suite-card .suite-selection-indicator {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  border-color: rgba(216, 166, 74, 0.42);
  background: rgba(9, 32, 24, 0.94);
}

.suite-selection-badge {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #efc56c 0%, #c78d2f 100%);
  color: #1f1404;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.suite-selection-check {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.suite-selection-text {
  color: var(--text);
  font-family: var(--caps-font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.suite-image-frame {
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.suite-image {
  width: 100%;
  height: auto;
  transition: transform 220ms ease;
}

.suite-option:not(.is-selected):hover .suite-image,
.suite-option:not(.is-selected):focus-within .suite-image {
  transform: scale(1.02);
}

/* The script face sits high in its line box, so the name reads as if glued to the
   image without a little room above it. */
.suite-content {
  display: grid;
  gap: 8px;
  padding: 8px 18px 20px;
}

.suite-name {
  font-family: var(--script-font);
  font-size: 46px;
  line-height: 0.92;
}

.suite-price {
  font-family: var(--caps-font);
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.suite-list-label {
  margin-top: 2px;
  color: var(--gold);
  font-family: var(--caps-font);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.suite-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.suite-list li::marker {
  color: var(--gold);
}

.field-grid {
  display: grid;
  gap: 16px;
}

.field-group {
  display: grid;
  gap: 10px;
  position: relative;
}

.field-label {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--caps-font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field-group:focus-within .field-label {
  color: var(--text);
}

.field,
.textarea,
.stepper-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--field-bg);
  color: var(--text);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.field {
  min-height: 56px;
  padding: 14px 16px;
}

/* The native arrow is drawn hard against the right edge, inside the padding box,
   so it crowds the border and the longest option can run underneath it. This
   draws the same chevron the pickers use, with room around it. */
/* The native arrow is drawn hard against the right edge, inside the padding box,
   so it crowds the border and the longest option can run underneath it. This is
   the same thin chevron the pickers draw, with room around it. */
select.field {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-opacity=%27.96%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.field:hover,
.textarea:hover,
.stepper-input:hover {
  border-color: var(--line-strong);
  /* background-color, not the shorthand: the shorthand resets background-image
     and would wipe the chevron a select draws there. */
  background-color: var(--field-bg-hover);
}

.field:focus,
.textarea:focus,
.stepper-input:focus {
  outline: 2px solid rgba(216, 166, 74, 0.32);
  outline-offset: 2px;
}

.picker-control {
  position: relative;
}

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  appearance: none;
  cursor: pointer;
}

.picker-trigger:focus-visible,
.stepper-button:focus-visible,
.button:focus-visible,
.ghost-button:focus-visible,
.checkbox-input:focus-visible {
  outline: 2px solid rgba(216, 166, 74, 0.32);
  outline-offset: 2px;
}

.picker-trigger-value {
  min-width: 0;
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.4;
}

.picker-control.is-empty .picker-trigger-value {
  color: var(--muted);
}

.picker-trigger-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  position: relative;
}

/* A single rotated box corner draws a crisp downward chevron. */
.picker-trigger-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 0 0 2px 0;
  transform: translateX(-50%) rotate(45deg);
  transition:
    transform 180ms ease,
    top 180ms ease;
}

.picker-control.is-open .picker-trigger {
  border-color: rgba(216, 166, 74, 0.42);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.1), rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 1px rgba(216, 166, 74, 0.08);
}

.picker-control.is-open .picker-trigger-icon::before {
  top: 5px;
  transform: translateX(-50%) rotate(225deg);
}

.picker-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 20;
}

/* Only the shell is a box. The time menu lives inside one, so decorating it too
   drew a second border and background within the first. */
.popover-shell {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Fully opaque: these float over the cards below, and even a couple of percent
     of translucency left the section behind legible through the calendar. */
  background: linear-gradient(180deg, rgb(17, 45, 35) 0%, rgb(8, 23, 18) 100%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
}

.popover-shell {
  padding: 18px 16px 16px;
}

.date-popover-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 10px;
  align-items: center;
}

.popover-title {
  margin: 0;
  text-align: center;
  font-family: var(--title-font);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.popover-nav {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.popover-nav:hover,
.stepper-button:hover,
.button:hover,
.ghost-button:hover {
  border-color: rgba(216, 166, 74, 0.38);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--caps-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.date-cell {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--caps-font);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.date-cell:hover,
.date-cell:focus-visible,
.time-option:hover,
.time-option:focus-visible {
  border-color: rgba(216, 166, 74, 0.32);
  background: rgba(216, 166, 74, 0.12);
  outline: none;
}

.date-cell.is-outside-month {
  color: rgba(255, 255, 255, 0.4);
}

.date-cell:disabled,
.popover-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.date-cell:disabled:hover,
.date-cell:disabled:focus-visible,
.popover-nav:disabled:hover,
.popover-nav:disabled:focus-visible {
  border-color: transparent;
  background: transparent;
  outline: none;
}

.date-cell.is-today {
  border-color: rgba(255, 255, 255, 0.16);
}

.date-cell.is-selected,
.time-option.is-selected {
  border-color: rgba(216, 166, 74, 0.42);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.24), rgba(216, 166, 74, 0.1));
  color: var(--text);
}

/* Stay range: the two ends are solid gold, the nights between them are tinted. */
.date-cell.is-range-start,
.date-cell.is-range-end {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #1f1404;
  font-weight: 700;
}

.date-cell.is-in-range {
  border-color: transparent;
  border-radius: 6px;
  background: rgba(216, 166, 74, 0.16);
  color: var(--text);
}

.date-cell.is-range-start {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.date-cell.is-range-end {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* One row per pet: name and breed side by side. */
.pet-rows {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.pet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Grid children default to min-width:auto, which lets a long label push the
   column wider than its share and overflow the card on a narrow screen. */
.pet-row .field-group {
  min-width: 0;
}

/* Name and breed stay side by side on a phone too — they belong to the same pet,
   and stacking them made a single dog take four rows. */
@media (max-width: 620px) {
  .pet-row { gap: 10px; }
}

.range-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.time-menu {
  display: grid;
  gap: 4px;
  max-height: 272px;
  overflow: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.78) rgba(255, 255, 255, 0.08);
}

.time-menu::-webkit-scrollbar {
  width: 10px;
}

.time-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.time-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.time-option {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.time-option:hover,
.time-option:focus-visible {
  transform: translateY(-1px);
}

.textarea {
  min-height: 140px;
  resize: vertical;
  padding: 16px;
}

.stepper-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-names-field-group {
  margin-top: 18px;
}

.stepper-card {
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.stepper-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stepper-label {
  font-family: var(--caps-font);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stepper-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.stepper-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: var(--caps-font);
  font-size: 22px;
  line-height: 1;
}

.stepper-input {
  min-height: 56px;
  padding: 0 8px;
  text-align: center;
  font-family: var(--caps-font);
  font-size: 32px;
  appearance: textfield;
}

.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* Luxe add-ons — picked like the suites, but each one toggles on its own. */
.addon-grid {
  display: grid;
  gap: 16px;
}

/* Tracks are half the row rather than a share of it, so the card keeps its size
   when the bath is not offered; auto-fit drops the empty track and the centring
   leaves the one that remains in the middle instead of hard against the left. */
@media (min-width: 760px) {
  .addon-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, calc(50% - 8px)));
    justify-content: center;
  }
}

.addon-option {
  display: block;
  cursor: pointer;
}

.addon-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.addon-card {
  position: relative;
  display: grid;
  gap: 12px;
  border-radius: 26px;
  border: 3px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.addon-option:hover .addon-card,
.addon-option:focus-within .addon-card {
  border-color: rgba(216, 166, 74, 0.38);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.addon-input:checked + .addon-card {
  border-color: rgba(216, 166, 74, 0.72);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.26),
    0 0 0 5px rgba(216, 166, 74, 0.38);
  transform: translateY(-2px);
}

.addon-input:focus-visible + .addon-card {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.addon-indicator {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(8, 19, 15, 0.82);
  border: 1px solid rgba(216, 166, 74, 0.5);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.addon-input:checked + .addon-card .addon-indicator {
  opacity: 1;
  transform: translateY(0);
}

.addon-badge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
}

.addon-check {
  color: #0b1a14;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.addon-indicator-text {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.addon-image-frame {
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.addon-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Deliberately the same type as .suite-content above it: the two pickers sit on
   one page and must read as one family. */
.addon-content {
  display: grid;
  gap: 8px;
  padding: 8px 18px 20px;
}

.addon-name {
  font-family: var(--script-font);
  font-size: 46px;
  line-height: 0.92;
}

.addon-price {
  font-family: var(--caps-font);
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* display:block above would otherwise beat the hidden attribute. */
.addon-option[hidden] {
  display: none;
}


.checkbox-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.checkbox-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.checkbox-row:hover,
.checkbox-row:focus-within {
  border-color: rgba(216, 166, 74, 0.24);
  background: rgba(255, 255, 255, 0.07);
}

.checkbox-input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--gold);
}

.checkbox-copy {
  display: block;
  font-size: 15px;
  line-height: 1.5;
}

/* The form-stack grid already spaces its children; a margin here doubled it. */
.submit-block {
  margin-top: 0;
}

/* Generator mode: discounts + one-click "Generate quote" pinned at the top. */
.generate-block {
  display: grid;
  gap: 10px;
}

.discount-section.is-generator-top {
  margin: 0;
}

.button,
.ghost-button {
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--caps-font);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.button {
  background: linear-gradient(180deg, #efc56c 0%, #c78d2f 100%);
  color: #1f1404;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.button:hover {
  background: linear-gradient(180deg, #f3cf81 0%, #d69a38 100%);
}

.button.is-loading {
  position: relative;
  padding-left: 48px;
}

.button.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(31, 20, 4, 0.3);
  border-top-color: rgba(31, 20, 4, 0.92);
  border-radius: 999px;
  animation: button-spin 0.8s linear infinite;
}

.button:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.ghost-button {
  border-color: rgba(216, 166, 74, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.ghost-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.success-page {
  min-height: 100vh;
  padding: 24px 20px 48px;
}

.success-page-shell {
  max-width: 900px;
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.success-card {
  width: 100%;
  padding-top: 28px;
}

.success-title {
  margin: 0;
  font-family: var(--script-font);
  font-size: clamp(28px, 5.8vw, 54px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.01em;
}

.success-copy {
  text-align: left;
  max-width: 34rem;
}

.summary-grid {
  display: grid;
  gap: 14px;
  margin: 26px 0 22px;
}

.summary-item {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.summary-item.is-featured {
  padding: 18px;
  border-color: rgba(216, 166, 74, 0.24);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.1), rgba(255, 255, 255, 0.04));
}

.summary-item.is-wide {
  grid-column: 1 / -1;
}

.summary-label {
  display: block;
  color: var(--muted);
  font-family: var(--caps-font);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.summary-value {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.45;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 780px) {
  .intro-card,
  .card {
    padding: 28px;
  }

  .suite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-item.is-featured,
  .summary-item.is-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .page-shell {
    padding-inline: 16px;
  }

  .success-page {
    padding-inline: 16px;
  }

  .page-header {
    grid-template-columns: 112px 1fr;
    gap: 14px;
    margin-top: 0;
    padding-top: 6px;
  }

  .header-logo {
    max-width: 112px;
  }

  .field-grid,
  .stepper-grid {
    grid-template-columns: 1fr;
  }

  .picker-popover {
    left: 0;
    right: 0;
  }

  .page-title {
    font-size: clamp(40px, 10vw, 54px);
  }

  .suite-name {
    font-size: 40px;
  }

  .suite-price {
    font-size: 24px;
  }

  .suite-selection-indicator {
    top: 12px;
    right: 12px;
    gap: 6px;
    padding-right: 10px;
  }

  .suite-selection-text {
    font-size: 10px;
  }

  .button,
  .ghost-button {
    font-size: 15px;
  }
}

/* ---- Team discount panel (internal only) -------------------------------- */
.discount-section[hidden] {
  /* The HTML `hidden` attribute must win over the display:grid below. */
  display: none;
}

.discount-section {
  margin: 8px 0 20px;
  padding: 22px;
  border: 1px dashed rgba(216, 166, 74, 0.5);
  border-radius: 22px;
  background: rgba(216, 166, 74, 0.06);
  display: grid;
  gap: 18px;
}

.discount-head {
  display: grid;
  gap: 4px;
}

.discount-note {
  color: var(--muted);
  font-size: 13px;
}

.discount-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.discount-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--field-bg);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.discount-pill:hover {
  border-color: var(--line-strong);
  background: var(--field-bg-hover);
}

.discount-pill input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold);
}

.discount-pill:has(input:checked) {
  border-color: rgba(216, 166, 74, 0.7);
  background: rgba(216, 166, 74, 0.16);
  color: var(--gold);
}

.discount-waivers {
  display: grid;
  gap: 12px;
}

@media (min-width: 540px) {
  .discount-waivers {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Combined date + time picker ---------------------------------------- */
.datetime-time {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.datetime-time-label {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--caps-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The time list lives inside the shared popover shell, so strip its own frame. */
.datetime-popover .time-menu {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  max-height: 180px;
  padding: 0;
}

.datetime-done {
  margin-top: 14px;
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(216, 166, 74, 0.42);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.18), rgba(216, 166, 74, 0.06));
  color: var(--gold);
  font-family: var(--caps-font);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.datetime-done:hover {
  border-color: rgba(216, 166, 74, 0.7);
  background: linear-gradient(180deg, rgba(216, 166, 74, 0.26), rgba(216, 166, 74, 0.1));
  transform: translateY(-1px);
}