/* =========================================================
   PURCHASE A GIFT — no hand; the swirl carries the page.
   ========================================================= */
body[data-page="purchase-a-gift"] {
  --cw: 44%;
  --cleft: 5.9%;
  /* --ctop unused — the block is centred (see below) */
}

/* quieter ribbon with no hand in front of it to hold it down */
body[data-page="purchase-a-gift"] .swirl-back {
  opacity: .45;
}

/* the amount picker — just an arrangement of the shared .choice cell */
body[data-page="purchase-a-gift"] .amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 0 0 1.1rem;
}

/* ---- wired additions (booking.js) ------------------------------------- */

/* price over hours in each amount cell */
body[data-page="purchase-a-gift"] .amounts .choice {
  padding: .5em .2em;
  gap: .05em;
}

/* the card well is a field like the others — its label comes from .field,
   so it drops the component's own bottom margin */
body[data-page="purchase-a-gift"] .stripe-box--card {
  margin: 0;
}

/* after the gift goes out the panel keeps only the good news */
body[data-page="purchase-a-gift"] form[data-stage="done"] .amounts,
body[data-page="purchase-a-gift"] form[data-stage="done"] .fields,
body[data-page="purchase-a-gift"] form[data-stage="done"] .formnote,
body[data-page="purchase-a-gift"] form[data-stage="done"] .gift-hours,
body[data-page="purchase-a-gift"] form[data-stage="done"] .btn {
  display: none;
}

/* …and, where the controls were, the way home. Hidden until then; the extra
   class outranks the .btn hide above. */
body[data-page="purchase-a-gift"] .gift-return {
  display: none;
}

body[data-page="purchase-a-gift"] form[data-stage="done"] .btn.gift-return {
  display: inline-flex;
  width: fit-content;
  margin-top: .4rem;
}

/* Turnstile widget — only present when the backend has a site key */
body[data-page="purchase-a-gift"] .turnstile-box {
  margin: .2rem 0 .6rem;
}
body[data-page="purchase-a-gift"] form[data-stage="done"] .turnstile-box {
  display: none;
}

/* the fifth cell — "pick your own" — spans the row under the presets */
body[data-page="purchase-a-gift"] .amounts .choice:last-child {
  grid-column: 1 / -1;
}

/* the custom stepper (shown only while the custom cell is chosen) */
body[data-page="purchase-a-gift"] .gift-hours {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
}

body[data-page="purchase-a-gift"] .gift-hours[hidden] {
  display: none;
}

body[data-page="purchase-a-gift"] .gift-hours .hours-step {
  width: 2.1em;
  aspect-ratio: 1;
  padding: 0;
}

body[data-page="purchase-a-gift"] .hours-value {
  font-weight: 700;
  min-width: 6ch;
  text-align: center;
}

/* ---- the form must FIT the screen (the step-5 pattern) -----------------
   Amounts + recipient fields + the card well + Turnstile + Send outgrow a
   phone viewport, and this centred column could not scroll — the security
   check and the Send button simply fell off the page. Cap the panel to the
   column and scroll INTERNALLY; children keep their natural height. */
body[data-page="purchase-a-gift"] form.panel {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 227, 198, .55) transparent;
  overscroll-behavior: contain;
}

body[data-page="purchase-a-gift"] form.panel > * {
  flex: none;
}