/* ==========================================================================
   gift-card.css — Digital Gift Cards (ITT Heal / Integrative Touch Therapies)
   Shared by /gift (purchase) and /redeem (redemption). Same brand palette as
   wallet.css (DESIGN_SYSTEM.md §2), own `giftcard__` namespace — gift cards
   and the wallet are distinct systems (see api/gift-cards.cjs header), so
   this file does not depend on wallet.css loading.
   All styling external. Mobile-first; breakpoints at 480 / 768 / 1200. WCAG 2.1 AA.
   ========================================================================== */

:root {
  --g-sage:        #8aa77b;
  --g-sage-deep:   #5a685a;
  --g-sage-soft:   #e8ece8;
  --g-cream:       #f5f1e8;
  --g-cream-warm:  #faf7f0;
  --g-gold:        #c9a961;
  --g-ink:         #2f3830;
  --g-ink-soft:    #5b6459;
  --g-white:       #ffffff;
  --g-teal:        #608c8d;   /* focus rings — matches wallet.css contrast rationale */
  --g-sage-cta:    #5c7350;   /* 5.22:1 with white. --g-sage is 2.66:1 and cannot carry white text
                                 or a UI boundary. NOT a redefinition of --g-sage (brand identity) —
                                 a separate token for contrast-bearing surfaces. */
  --g-line:        #e6e1d4;   /* hairline rules/borders on the cream ground */
  --g-line-input:  #dcd6c9;   /* the slightly deeper hairline used on form controls */
  --g-disabled-bg: #f4f2ec;
  --g-error:       #b1483d;
  --g-error-bg:    #f6e5e2;

  --g-space-1: 0.25rem; --g-space-2: 0.5rem;  --g-space-3: 0.75rem;
  --g-space-4: 1rem;    --g-space-5: 1.5rem;  --g-space-6: 2rem;
  --g-space-7: 3rem;    --g-space-8: 4rem;

  --g-radius-sm: 6px;
  --g-radius-md: 14px;
  --g-radius-lg: 22px;
  --g-radius-pill: 999px;

  --g-shadow-sm: 0 2px 8px rgba(90, 104, 90, 0.08);
  --g-shadow-md: 0 10px 30px -12px rgba(90, 104, 90, 0.28);

  --g-font-display: 'Playfair Display', Georgia, serif;
  --g-font-body: 'Open Sans', system-ui, sans-serif;
  --g-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }

body.giftcard-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--g-font-body);
  color: var(--g-ink);
  line-height: 1.6;
  /* `background-attachment: fixed` sized this gradient to the VIEWPORT, not the document, so on a
     long page the cream stopped dead at about one viewport height and everything below it was bare
     white — a hard seam that cut through the middle of the form on desktop. Scrolling with the
     document keeps one continuous ground for the full page height. */
  background:
    radial-gradient(1200px 600px at 50% -10%, #eef3ea 0%, transparent 60%),
    linear-gradient(180deg, var(--g-cream-warm) 0%, var(--g-cream) 45%, var(--g-cream) 100%);
  background-repeat: no-repeat;
}

.giftcard { width: 100%; min-width: 0; }

/* ---------- Shell ---------- */
.giftcard__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-space-3);
  padding: var(--g-space-5) var(--g-space-4) var(--g-space-3);
}
.giftcard__logo-link { display: inline-flex; line-height: 0; }
.giftcard__logo { width: 38px; height: 38px; flex: none; object-fit: contain; }
.giftcard__brand {
  font-family: var(--g-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--g-sage-deep);
  margin: 0;
}
.giftcard__main {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--g-space-3) var(--g-space-4) var(--g-space-8);
  min-width: 0;
  overflow-x: hidden;
}

.giftcard__state { display: none; animation: giftcard-fade 0.5s var(--g-ease) both; }
.giftcard__state.is-active { display: block; }
.giftcard__state [tabindex="-1"]:focus { outline: none; }

@keyframes giftcard-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Intro / titles ---------- */
.giftcard__intro { text-align: center; margin: 0 0 var(--g-space-6); }
.giftcard__title {
  font-family: var(--g-font-display);
  font-weight: 500;
  font-size: 1.75rem;
  /* display type was inheriting the body's 1.6, costing ~34px of the 344px fold on a 3-line title */
  line-height: 1.2;
  color: var(--g-ink);
  margin: 0 0 var(--g-space-2);
}
.giftcard__subtitle {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--g-ink-soft);
  margin: 0;
  max-width: 42ch;
  margin-inline: auto;
}

/* ---------- Practitioner byline (authority: the credential was previously only in og: meta) ---------- */
.giftcard__by {
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  margin: var(--g-space-4) auto 0;
  max-width: 46ch;
  text-align: left;
  font-size: 0.875rem;
  color: var(--g-ink-soft);
}
.giftcard__by-photo {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--g-white);
  box-shadow: var(--g-shadow-sm);
}
.giftcard__by strong { color: var(--g-ink); }

/* ---------- Panel (used by sent / cancelled / error / success / preview) ---------- */
.giftcard__panel {
  background: var(--g-white);
  border-radius: var(--g-radius-lg);
  box-shadow: var(--g-shadow-md);
  padding: var(--g-space-7) var(--g-space-5);
  text-align: center;
}
.giftcard__panel-title {
  font-family: var(--g-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--g-ink);
  margin: var(--g-space-4) 0 var(--g-space-3);
}
.giftcard__panel-text {
  font-size: 0.975rem;
  color: var(--g-ink-soft);
  margin: 0 0 var(--g-space-5);
}
.giftcard__state-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.giftcard__state-icon--success { background: var(--g-sage-soft); color: var(--g-sage-deep); }
.giftcard__state-icon--calm    { background: var(--g-sage-soft); color: var(--g-sage-deep); }
.giftcard__state-icon--error   { background: var(--g-error-bg); color: var(--g-error); }

/* ---------- Forms ---------- */
.giftcard__form { display: flex; flex-direction: column; gap: var(--g-space-5); }
.giftcard__section { display: flex; flex-direction: column; gap: var(--g-space-3); }
.giftcard__section-title {
  font-family: var(--g-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--g-sage-deep);
  margin: 0;
}
.giftcard__field { display: flex; flex-direction: column; gap: var(--g-space-2); }
.giftcard__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g-ink);
}
.giftcard__optional, .giftcard__hint { font-weight: 400; color: var(--g-ink-soft); }
/* neutral helper text — distinct from .giftcard__error-text, which is red and reserved for errors */
.giftcard__field-hint {
  font-size: 0.8125rem;
  color: var(--g-ink-soft);
  margin: 0;
}

.giftcard__input-wrap { position: relative; display: flex; align-items: center; }
.giftcard__input-prefix {
  position: absolute; left: var(--g-space-4);
  color: var(--g-ink-soft); font-weight: 600; pointer-events: none;
}
.giftcard__input {
  width: 100%;
  font-family: var(--g-font-body);
  font-size: 1rem;
  padding: 0.85rem var(--g-space-4);
  border: 1.5px solid var(--g-line-input);
  border-radius: var(--g-radius-sm);
  background: var(--g-white);
  color: var(--g-ink);
  min-height: 48px;
}
.giftcard__input-wrap .giftcard__input { padding-left: 1.75rem; }
.giftcard__input:focus-visible {
  outline: 3px solid var(--g-teal);
  outline-offset: 1px;
  border-color: var(--g-teal);
}
.giftcard__textarea { min-height: 84px; resize: vertical; }
.giftcard__input--code {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  text-align: center;
}
.giftcard__error-text {
  font-size: 0.825rem;
  color: var(--g-error);
  margin: 0;
  min-height: 1.1em;
}

/* ---------- Amount presets (mirrors the radiogroup pattern) ---------- */
.giftcard__presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--g-space-3);
  margin: 0 0 var(--g-space-3);
}
.giftcard__preset {
  /* a <button> defaults to inline-block — without this `display`, flex-direction/gap below are inert */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.25;
  font-family: var(--g-font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--g-sage-deep);
  background: var(--g-sage-soft);
  border: 2px solid transparent;
  border-radius: var(--g-radius-md);
  padding: var(--g-space-3) var(--g-space-2);
  cursor: pointer;
  transition: border-color 0.2s var(--g-ease), transform 0.15s var(--g-ease);
  min-height: 48px;
}
.giftcard__preset-amt { display: block; font-size: 1.25rem; font-weight: 700; }
.giftcard__preset-for {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--g-ink-soft);
}
.giftcard__preset:hover { transform: translateY(-1px); }
.giftcard__preset:focus-visible { outline: 3px solid var(--g-teal); outline-offset: 2px; }
.giftcard__preset.is-selected {
  /* was --g-sage: measured 2.66:1 against the white selected background, under WCAG 1.4.11's 3:1
     floor for a state-indicating boundary. --g-sage-deep measures 5.89:1. (--g-gold was considered
     and rejected here at 2.25:1 — it cannot carry state on this ground.) */
  border-color: var(--g-sage-deep);
  background: var(--g-white);
  box-shadow: var(--g-shadow-sm);
}
.giftcard__custom { display: flex; flex-direction: column; gap: var(--g-space-2); }

/* ---------- Buttons ---------- */
.giftcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0.9rem var(--g-space-5);
  font-family: var(--g-font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--g-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s var(--g-ease), box-shadow 0.2s var(--g-ease), opacity 0.2s var(--g-ease);
}
.giftcard__btn--primary {
  /* was --g-sage: white on #8aa77b measures 2.66:1, failing WCAG 1.4.3's 4.5:1 text floor and even
     the 3:1 large-text floor. --g-sage-cta measures 5.22:1. Size and shadow were treating the
     symptom (the white assurance card out-weighting the CTA); the fill colour was the cause. */
  background: var(--g-sage-cta);
  color: var(--g-white);
  font-size: 1.0625rem;
  min-height: 56px;
  box-shadow: 0 6px 18px -6px rgba(90, 104, 90, 0.45);
}
.giftcard__btn--primary:hover { transform: translateY(-1px); box-shadow: var(--g-shadow-md); }
.giftcard__btn--primary:focus-visible { outline: 3px solid var(--g-teal); outline-offset: 2px; }
.giftcard__btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.giftcard__btn--primary.is-loading { opacity: 0.85; cursor: progress; }

.giftcard__why {
  display: flex; align-items: center; justify-content: center; gap: var(--g-space-2);
  font-size: 0.825rem;
  color: var(--g-ink-soft);
  margin: 0;
  text-align: center;
}
.giftcard__why a { color: var(--g-sage-deep); }

/* ---------- Gift preview (redeem page) ---------- */
.giftcard__gift-preview {
  background: linear-gradient(135deg, var(--g-sage-soft), var(--g-cream));
  border-radius: var(--g-radius-md);
  padding: var(--g-space-6) var(--g-space-4);
  margin: 0 0 var(--g-space-5);
}
.giftcard__gift-amount {
  font-family: var(--g-font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--g-sage-deep);
  margin: 0 0 var(--g-space-1);
}
.giftcard__gift-from {
  font-size: 0.95rem;
  color: var(--g-ink-soft);
  margin: 0;
}
.giftcard__gift-message {
  font-size: 0.9rem;
  color: var(--g-ink);
  font-style: italic;
  margin: var(--g-space-3) 0 0;
  padding-top: var(--g-space-3);
  border-top: 1px solid rgba(90, 104, 90, 0.2);
}

.giftcard__hero-amount {
  font-family: var(--g-font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--g-sage-deep);
  margin: 0 0 var(--g-space-5);
}

/* ---------- Footer ---------- */
.giftcard__footer {
  text-align: center;
  padding: var(--g-space-6) var(--g-space-4) var(--g-space-7);
  font-size: 0.825rem;
  color: var(--g-ink-soft);
}
.giftcard__footer a { color: var(--g-sage-deep); }
.giftcard__stripe {
  display: inline-flex; align-items: center; gap: var(--g-space-1);
  margin: 0 0 var(--g-space-2);
  color: var(--g-ink-soft);
}
.giftcard__fineprint { max-width: 46ch; margin: var(--g-space-2) auto 0; }

/* sr-only utility (screen-reader-only text, mirrors wallet.css convention) */
.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;
}

/* ---------- Assurance strip ----------
   Lifts the never-expires / no-fee facts out of footer fineprint and puts them directly under the
   hero, where they read as proof of the promise the headline makes rather than as legal small print. */
.giftcard__assure {
  list-style: none;
  /* sits inside .giftcard__section's flex column — flex `gap` does not collapse against child
     margins, so its own bottom margin would double the form's spacing rhythm here */
  margin: 0;
  padding: var(--g-space-4);
  display: grid;
  gap: var(--g-space-4);
  background: var(--g-white);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-sm);
}
.giftcard__assure-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.giftcard__assure-head {
  font-family: var(--g-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--g-sage-deep);
}
.giftcard__assure-text { font-size: 0.875rem; color: var(--g-ink-soft); }

/* ---------- Below-form marketing blocks ---------- */
.giftcard__aside {
  margin-top: var(--g-space-7);
  padding-top: var(--g-space-6);
  border-top: 1px solid var(--g-line);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-7);
}
.giftcard__block { min-width: 0; }
.giftcard__block-title {
  font-family: var(--g-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--g-ink);
  margin: 0 0 var(--g-space-4);
}
.giftcard__block-text {
  font-size: 0.95rem;
  color: var(--g-ink-soft);
  margin: 0 0 var(--g-space-4);
  max-width: 46ch;
}
.giftcard__block-title--sub { font-size: 1.05rem; color: var(--g-ink-soft); }
.giftcard__note--presets { margin-top: var(--g-space-3); }

/* ---------- Closing CTA ----------
   The marketing argument sat below the only CTA, so a reader persuaded by the FAQ had nowhere to
   act and had to scroll back up through the whole form. */
.giftcard__block--close {
  text-align: center;
  padding-top: var(--g-space-5);
  border-top: 1px solid var(--g-line);
}
.giftcard__close-line {
  font-family: var(--g-font-display);
  font-size: 1.15rem;
  color: var(--g-ink);
  margin: 0 0 var(--g-space-4);
}
.giftcard__tertiary { font-size: 0.875rem; margin: var(--g-space-4) 0 0; }
.giftcard__tertiary a { color: var(--g-sage-deep); }
.giftcard__block-text a, .giftcard__note a { color: var(--g-sage-deep); }
.giftcard__note {
  font-size: 0.875rem;
  color: var(--g-ink-soft);
  margin: 0;
  max-width: 52ch;
}

/* ---------- Numbered steps ---------- */
.giftcard__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--g-space-5);
}
.giftcard__step { display: flex; gap: var(--g-space-4); align-items: flex-start; min-width: 0; }
.giftcard__step-num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--g-sage-soft);
  color: var(--g-sage-deep);
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.giftcard__step-body { font-size: 0.925rem; color: var(--g-ink-soft); min-width: 0; }
.giftcard__step-head {
  display: block;
  font-size: 0.975rem;
  color: var(--g-ink);
  margin-bottom: 2px;
}

/* ---------- Occasion chips ---------- */
.giftcard__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-space-2);
}
.giftcard__chip {
  font-size: 0.825rem;
  color: var(--g-sage-deep);      /* 4.94:1 on --g-sage-soft — measured, passes WCAG AA */
  background: var(--g-sage-soft);
  border-radius: var(--g-radius-pill);
  padding: var(--g-space-2) var(--g-space-4);
}

/* ---------- Client quote (real and attributed — sourced from the homepage testimonials) ---------- */
.giftcard__quote {
  margin: var(--g-space-6) 0 0;
  padding: 0 0 0 var(--g-space-4);
  /* the one place --g-gold is used: pure ornament carrying no state or information, so WCAG 1.4.11's
     3:1 floor does not apply (it measures 2.00:1 on cream and cannot be used for anything that does). */
  border-left: 4px solid var(--g-gold);
}
.giftcard__quote-text {
  margin: 0;
  font-family: var(--g-font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--g-ink);
  max-width: 44ch;
}
.giftcard__quote-by {
  margin-top: var(--g-space-2);
  font-size: 0.825rem;
  color: var(--g-ink-soft);
}

/* ---------- FAQ (native details/summary — zero JS, so it needs no CSP exception) ---------- */
.giftcard__faq { border-bottom: 1px solid var(--g-line); padding: var(--g-space-3) 0; }
.giftcard__faq:first-of-type { border-top: 1px solid var(--g-line); }
.giftcard__faq-q {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--g-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-3);
  min-height: 44px;
  padding: var(--g-space-2) 0;
}
.giftcard__faq-q::-webkit-details-marker { display: none; }
.giftcard__faq-q::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--g-sage-deep);
  transition: transform 0.2s var(--g-ease);
}
.giftcard__faq[open] .giftcard__faq-q::after { content: "\2212"; }
.giftcard__faq-q:focus-visible { outline: 3px solid var(--g-teal); outline-offset: 2px; }
.giftcard__faq-a {
  font-size: 0.9rem;
  color: var(--g-ink-soft);
  margin: 0 0 var(--g-space-2);
  max-width: 56ch;
}
.giftcard__faq-a a { color: var(--g-sage-deep); }

/* ---------- Ghost button (secondary cross-sell action) ---------- */
.giftcard__btn--ghost {
  background: transparent;
  /* text stays --g-sage-deep: 5.90:1 on white and 4.94:1 on the :hover sage-soft. Switching it to
     --g-sage-cta would have DROPPED hover to 4.37:1 — the fix introducing a new failure. */
  color: var(--g-sage-deep);
  /* border was --g-sage at 2.66:1, under WCAG 1.4.11's 3:1 floor for a UI boundary */
  border: 1.5px solid var(--g-sage-cta);
  margin-top: var(--g-space-3);
}
.giftcard__btn--ghost:hover { background: var(--g-sage-soft); transform: translateY(-1px); }
.giftcard__btn--ghost:focus-visible { outline: 3px solid var(--g-teal); outline-offset: 2px; }

/* ---------- Pressed feedback ----------
   Previously :hover and the pressed state collapsed to one visual, so a click gave no tactile
   acknowledgement until the page state actually changed. */
.giftcard__btn:active:not([disabled]) { transform: translateY(1px); box-shadow: var(--g-shadow-sm); }
.giftcard__preset:active { transform: translateY(1px); }

/* ---------- Invalid / disabled inputs ----------
   :user-invalid only matches AFTER the user has interacted, so an untouched required field is never
   pre-reddened. The forms carry `novalidate`, which suppresses the browser's own bubble UI but
   leaves constraint-validation state intact, so this still applies. Until now only the error TEXT
   below a field changed colour; the field itself stayed neutral. */
.giftcard__input:user-invalid {
  border-color: var(--g-error);
  background: var(--g-error-bg);
}
.giftcard__input:disabled {
  background: var(--g-disabled-bg);
  color: var(--g-ink-soft);
  cursor: not-allowed;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 480px) {
  .giftcard__presets { grid-template-columns: repeat(4, 1fr); }
  .giftcard__preset { font-size: 1rem; padding: var(--g-space-4) var(--g-space-1); }
  .giftcard__assure { grid-template-columns: repeat(3, 1fr); gap: var(--g-space-3); }
}

@media (min-width: 768px) {
  .giftcard__main { padding-top: var(--g-space-5); }
  .giftcard__title { font-size: 2.1rem; }
  .giftcard__panel { padding: var(--g-space-8) var(--g-space-7); }
  /* the form kept its 344px spacing all the way up and read cramped once the column widened */
  .giftcard__form { gap: var(--g-space-6); }
  .giftcard__assure { padding: var(--g-space-5); }
  .giftcard__block-title { font-size: 1.4rem; }
  /* must live INSIDE this block: the base --sub rule is earlier in source at equal specificity
     (media queries add none), so the 1.4rem above would otherwise win from 768px up and the
     demotion would be inert at 2 of 3 viewports. Media ranges are additive, so this covers 1200+. */
  .giftcard__block-title--sub { font-size: 1.15rem; }
  .giftcard__aside { gap: var(--g-space-8); }
}

@media (min-width: 1200px) {
  .giftcard__main { max-width: 660px; }
  /* the headline previously computed identically at 768 and above — desktop was centred mobile */
  .giftcard__title { font-size: 2.6rem; }
  .giftcard__quote-text { font-size: 1.15rem; }
  .giftcard__step-body { font-size: 0.95rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .giftcard__state, .giftcard__preset, .giftcard__btn { animation: none; transition: none; }
  .giftcard__faq-q::after { transition: none; }
  .giftcard__btn:active:not([disabled]), .giftcard__preset:active { transform: none; }
}