/* ============================================================================
   Donate page — donation form (Credit/Debit Card) + success / cancel results.
   Pairs with _Layout.cshtml and donate.js. Figma: "15.png", "Thank you for
   donation.png", "Your subscription has been canceled.png".
   ========================================================================== */

.donate-intro {
  /* Figma (frame "12 Donate2 W"): 18/25px, #333, flush to the container's left edge
     (x=406 = the 1200px container start), full width — not centred. The section--tight
     wrapper already supplies the top gap below the banner — don't add another 60px. */
  text-align: start;
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
  margin: 0 0 30px;
}

/* ------- Card shell ------------------------------------------------------- */
/* Figma: white outer card, 1px #DADADA border, radius 6 — wraps the tab row
   and the grey form panel. */
.donate-card {
  margin: 0 auto 30px;
  background: var(--color-white);
  border: 1px solid #DADADA;   /* Figma export (wire_transfare.svg) card border */
  border-radius: 6px;
}

/* ------- Payment-method tabs --------------------------------------------- */
/* Tabs sit inset at the top of the white card (Figma: 30px inset, 200px tabs). */
.donate-tabs {
  display: flex;
  gap: 20px;                        /* Booktime .tabs__list */
  /* #6409 — Figma "12 Donate2 W": card 1200x511 (stroke inside), tabs at x=436/
     y=487 i.e. 30px in from the card's outer edge, tab 84 tall, grey panel
     starting at y=581 and ending flush with the card bottom (968).
     So the CSS box, whose 1px border sits OUTSIDE the padding box, needs
     29/29/9: 1 + 29 + 84 + 9 + 387 + 1 = 511. (Booktime uses 30/30/15 here, but
     6409 is measured against the approved design.) */
  padding: 29px 29px 9px;
  flex-wrap: wrap;
}

/* Booktime .tabs__item + .tabs__button: the icon sits on its own line with the
   label BELOW it (flex column, left-aligned) — not icon-and-text on one line. */
.donate-tab {
  /* Booktime .tabs__item: min-width:min(20rem,100%); max-width:100%; flex-shrink:1.
     It must be allowed to SHRINK and to grow to the card width — a fixed
     `flex:0 0 auto` + min-width:200px left the tabs stuck at content width
     inside a full-width card, which is the layout-ratio mismatch in #6525. */
  flex: 0 1 auto;
  min-width: min(200px, 100%);
  max-width: 100%;
  min-height: 83px;                 /* Booktime .tabs__item: 8.3rem */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* #6409 — exact Figma tab card ("12 Donate2 W", Group 389/390/391: 200x84):
       icon   18px at x=20, y=20      -> padding-top 20, padding-inline 20
       label  18px/24.5 at x=20, y=49 -> 11px below the icon (38 -> 49)
       card bottom at 84              -> padding-bottom 10  (74 + 10)
     20 + 18 + 11 + 24.5 + 10 = 84. It previously rendered 91px because the label
     inherited the body line-height (~31px) instead of the design's 24.5, with
     18/18/12 padding. Booktime lands on 83px, so this agrees with both. */
  gap: 11px;
  /* 19/19/9, not 20/20/10: Figma measures the icon at x=20,y=20 from the card's
     OUTER edge and the card's 1px stroke sits inside that 200x84 box, whereas the
     CSS border sits outside the padding box. Subtracting it lands the icon on
     Figma's 20px and the card on exactly 84px:
     1 + 19 + 18 + 11 + 25 + 9 + 1 = 84. */
  padding: 19px 19px 9px;
  background: var(--color-white);
  border: 1px solid #DADADA;        /* Figma "12 Donate2 W": #DADADA (matches card) */
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--font-size-lg);   /* Booktime: 18px */
  font-weight: var(--font-weight-bold);   /* Booktime: 700 */
  color: var(--color-body-strong);
  cursor: pointer;
  text-align: start;
  transition: border-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.donate-tab i { font-size: 18px; line-height: 1; }   /* Booktime: 18px icon */
.donate-tab > span:last-child { line-height: 25px; }   /* Figma label box: 18px, 25px tall */

/* Credit/Debit card tab icon — the solid filled card from the Figma export
   (wire_transfare.svg), coloured via currentColor so it follows the tab's
   active (orange) / inactive (#333) state like the other tab icons. */
.donate-tab__icon--card {
  display: inline-block;
  width: 22px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("/images/donate/card-icon.svg") no-repeat center / contain;
          mask: url("/images/donate/card-icon.svg") no-repeat center / contain;
}

.donate-tab.is-active {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.donate-tab--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------- Grey form panel ------------------------------------------------- */

.donate-form {
  /* Tab-content panel: #EFEFEF (Figma export), bottom corners rounded. Fields sit in
     a 3-column grid (Frequency | Amount | Email, then First | Last | Phone) with
     21px gutters — the 1200px form card, matching the Booktime donation layout. */
  background: #EFEFEF;
  border-radius: 0 0 6px 6px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 21px;
  row-gap: 30px;
  align-items: start;
}

.donate-field { min-width: 0; }   /* grid track; the row-gap provides spacing */

/* Items that span the whole form width. */
.donate-field--full,
.donate-global-error,
.donate-sep,
.donate-actions { grid-column: 1 / -1; }

/* Figma: a 1px #D9D9D9 rule separates the contact details from the card fields.
   The grid row-gap supplies the 30px space above and below. */
.donate-sep {
  border: 0;
  border-top: 1px solid #D9D9D9;
  margin: 0;
  width: 100%;
}

/* Card row — full width: Card Number (~66%) + Expiry + CVV (Figma 753/173/173). */
.donate-row--card {
  grid-column: 1 / -1;
  display: grid;
  /* #6533 — Booktime puts Card Number on its own full-width row and splits
     Expiry + CVV 50/50 on the next one. Measured on the live donate page with a
     fresh load at each width:
        1440: card 1138 | expiry 560 + cvv 560   (2 rows)
        1024: card  922 | expiry 452 + cvv 452   (2 rows)
         768: card  666 | expiry 324 + cvv 324   (2 rows)
        <=640: all three full width               (3 rows)
     Folios previously packed all three into ONE row (753fr/173fr/173fr), which
     is what #6533 is actually about — the earlier `align-items: end` only fixed
     their vertical alignment within that single row. */
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 30px;
  /* #6533 — each cell stacks its own label above its own field, so once a label
     wrapped to two lines (which the "CVV/CVC Code" and Arabic expiry labels do
     between 641px and 899px) that cell's field was pushed ~26px below the others.
     Booktime aligns the same row's bottoms rather than its tops:
       .donate-page .donation-form__form .form-row { align-items: flex-end }
     so the inputs line up regardless of how tall each label runs. */
  align-items: end;
}

/* Card Number spans the whole row; Expiry and CVV then share the next one. */
.donate-field--card { grid-column: 1 / -1; }

.donate-label {
  display: block;
  font-size: var(--font-size-md);   /* Figma: 16/22px labels, #333 */
  color: var(--color-body-strong);
  /* #6708 — 5px, matching Booktime's
       .donate-page .donation-form__form label { margin-bottom: .5rem }
     (its root is html{font-size:10px}, so .5rem = 5px). This was
     var(--space-2) = 8px, which also read as inconsistent next to the
     radio row's larger gap. */
  margin-bottom: 5px;
}

/* ------- Inputs ---------------------------------------------------------- */

.donate-input {
  width: 100%;
  height: 55px;                       /* Figma/Booktime: 55px fields */
  padding: 0 var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;                 /* Figma: 6px field radius */
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-heading);
}

/* Hide native number spinners on the amount field — not in the design. */
.donate-amount input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.donate-amount input[type="number"]::-webkit-outer-spin-button,
.donate-amount input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.donate-input:focus {
  outline: none;
  border-color: var(--color-orange);
}

/* Braintree hosted fields render an <iframe> inside these. */
.donate-hosted {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
}
.donate-hosted.braintree-hosted-fields-focused {
  border-color: var(--color-orange);
}
.donate-hosted.braintree-hosted-fields-invalid {
  border-color: var(--color-error);
}
.donate-hosted iframe { width: 100%; height: 100%; }

/* CVV field icon (Figma): small card-with-CVC glyph pinned to the end of the field. */
.donate-cvv-wrap { position: relative; }
.donate-cvv-icon {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: auto;
  pointer-events: none;
}
.donate-field--cvv .donate-hosted { padding-inline-end: 48px; }

/* Card-scheme logos pinned to the end of the card-number field (Booktime). */
.donate-cardnum-wrap { position: relative; }
.donate-card-logos {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.donate-card-logos img { height: 24px; width: auto; display: block; }
.donate-card-logos .donate-card-logos__visa { height: 18px; }
.donate-field--card .donate-hosted { padding-inline-end: 110px; }

/* ------- Amount + currency ----------------------------------------------- */

.donate-amount {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: visible;
  position: relative;
}
.donate-amount:focus-within { border-color: var(--color-orange); }

.donate-amount .donate-input {
  border: 0;
  flex: 1;
  /* Round the inline-start corners to match the wrapper so the white field
     background doesn't square off the wrapper's rounded border at those 2 corners
     (the currency side is transparent, so its corners already round correctly). */
  border-radius: 0;
  border-start-start-radius: 6px;
  border-end-start-radius: 6px;
}
.donate-amount .donate-input:focus { border: 0; }

.currency-select { position: relative; display: flex; }

.currency-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 55px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-inline-start: 1px solid var(--color-border);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);   /* Figma: currency code is regular, not bold */
  color: var(--color-heading);
  cursor: pointer;
}

.currency-select__arrow {
  width: 0; height: 0;
  border-inline-start: 5px solid transparent;
  border-inline-end: 5px solid transparent;
  border-top: 6px solid var(--color-body);
}

.currency-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  width: 320px;
  max-width: 80vw;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.currency-select__dropdown[hidden] { display: none; }

.currency-select__list { list-style: none; margin: 0; padding: var(--space-2) 0; }

.currency-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.currency-select__option:hover,
.currency-select__option:focus,
.currency-select__option.is-active {
  background: var(--color-pink-soft);
  outline: none;
}
.currency-select__code { font-weight: var(--font-weight-normal); color: var(--color-heading); }
.currency-select__sep { color: var(--color-border); }
.currency-select__name { color: var(--color-body); }

/* ------- Radios ---------------------------------------------------------- */

.donate-radios { display: flex; gap: var(--space-7); }

.donate-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-md);
  color: var(--color-body-strong);
}
/* Custom radio to match Figma: unselected = white circle w/ 2px #333 ring;
   selected = orange ring + orange centre dot (native accent-color rendered wrong). */
.donate-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--color-body-strong);
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
  position: relative;
}
.donate-radio input:checked { border-color: var(--color-orange); }
.donate-radio input:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--color-orange);
}
.donate-radio input:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* ------- Errors ---------------------------------------------------------- */

.donate-error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-error);   /* red, like Booktime — not the brand pink */
}
.donate-error.is-shown { display: block; }

.donate-global-error {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-error-soft);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* ------- Submit + secured note ------------------------------------------- */

.donate-submit {
  /* Figma: full-width rounded-rect (not pill), ~55px tall, 16/700 white, heart + label. */
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: 6px;
  padding: 16px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.donate-secured {
  /* Figma "15": 15px below the Donate button; the 30px panel padding-bottom
     supplies the gap beneath it. Lives inside .donate-actions so the grid
     row-gap no longer applies between the button and this note. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 15px 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ------- Contact note below the card ------------------------------------- */

.donate-contact {
  /* Figma: same as .donate-intro — 18/25px, flush left at the container edge, full width. */
  text-align: start;
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);   /* Figma: 18/25px */
  line-height: 25px;
  margin: 0 auto;
  max-width: none;
}
.donate-contact a { color: var(--color-pink); }

/* ------- Wire transfer panel --------------------------------------------- */

.donate-wire {
  background: #EFEFEF;   /* Figma "12 Donate2 W": #EFEFEF panel */
  border-radius: 0 0 6px 6px;
  padding: 30px;         /* Figma: rows group is inset 30px (top 611 vs panel 581) */
}
/* Robustly hide whichever panel is inactive (beats the .donate-form class). */
[data-panel][hidden] { display: none; }
/* Bank-details rows per Figma "12 Donate2 W": grey label (#737373) + bold value
   (#333) on a 22px line at the TOP of each row; 18px down to a 1px #D9D9D9
   separator, then a 20px gap to the next row → 61px label-to-label pitch. */
.donate-wire__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.donate-wire__row {
  display: flex;
  align-items: baseline;
  font-size: var(--font-size-md);   /* 16px */
  line-height: 22px;
}
.donate-wire__row:not(:last-child) {
  padding-bottom: 18px;
  border-bottom: 1px solid #D9D9D9;
}
.donate-wire__row dt {
  flex: 0 0 188px;                  /* Figma: label column (label x=436 → value x=624) */
  color: #737373;                   /* Figma label colour */
}
.donate-wire__row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: var(--font-weight-semibold);   /* 600 */
  color: var(--color-heading);      /* #333 */
  word-break: break-word;
}

/* ------- Loading state (submit in flight) -------------------------------- */

.donate-card.is-loading { opacity: 0.6; pointer-events: none; }

/* ========================================================================
   Result pages — Thank you / Subscription canceled
   ====================================================================== */

.donate-result {
  text-align: center;
  padding: var(--space-11) var(--space-5);
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donate-result__icon {
  width: 150px;                       /* Figma "success" vector: 150×147 */
  height: auto;
  /* base.css makes <img> display:block, so centre it explicitly (text-align won't). */
  margin: 0 auto var(--space-7);
}
.donate-result__message {
  font-size: var(--font-size-2xl);   /* Figma: ~24px */
  line-height: 33px;
  color: var(--color-body-strong);
  margin: 0 0 var(--space-3);
}
.donate-result__link { font-size: var(--font-size-lg); color: var(--color-body-strong); }
.donate-result__link a { color: var(--color-pink); }

/* ------- Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .donate-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .donate-form { grid-template-columns: 1fr; padding: var(--space-5); }
  .donate-row--card { grid-template-columns: 1fr; }
  /* NOTE: the tab label is deliberately NOT shrunk here. Live Booktime measures
     18px on .tabs__button at 430/390/375/360 and only drops to 1.4rem at <=325px
     (see the <=325 block below). A var(--font-size-xs) (12px) override used to
     sit here and was the size mismatch reported in #6525. */
}

/* ------- Payment-method tabs: Booktime responsive parity (#6525) ----------
   Booktime's rules, read straight from its stylesheet's media contexts:
     <=700px  .tabs__list   { align-items: stretch }
     <=640px  .tabs__list   { padding:1.5rem 1.5rem 1rem; gap:1rem;
                              justify-content: space-between }
              .tabs__item   { width: max(20rem, 100%) }   <- fills the row
              .tabs__button { padding: 1rem }
     <=325px  .tabs__item   { width: 100% }
              .tabs__button { font-size: 1.4rem }
   (Booktime's root is html{font-size:10px}, so 1rem = 10px.)

   640px is the same breakpoint that drops the page banner (#6709), so the two
   method cards go full-width and stack into two rows exactly when the title
   disappears. An earlier pass keyed this block to 475px, which left them side by
   side at 476-640px where Booktime already stacks them. */
@media (max-width: 700px) {
  .donate-tabs { align-items: stretch; }
}
@media (max-width: 640px) {
  .donate-tabs {
    padding: 15px 15px 10px;
    gap: 10px;
    justify-content: space-between;
  }
  .donate-tab {
    width: max(200px, 100%);
    padding: 10px;
  }
}
@media (max-width: 325px) {
  .donate-tab {
    width: 100%;
    font-size: var(--font-size-sm);   /* Booktime: 1.4rem */
  }
}

/* ------- #6709: no page title / intro on phones --------------------------
   Booktime's rule, verbatim from its stylesheet:
     @media (max-width:640px) { .donate-page .page-banner { display: none } }
   and confirmed by loading the live donate page fresh at each width — its banner
   is present at 641px and gone at 640px. (An earlier pass here used 475px, which
   came from resizing a single page rather than reloading; that measurement was
   wrong and left the title visible from 476-640px, where Booktime hides it.)
   Folios keeps its description in a separate section from the banner, so both
   have to be hidden; the donate card lives in that same section and must stay. */
@media (max-width: 640px) {
  .page--donate .page-banner,
  .page--donate .donate-intro {
    display: none;
  }

  /* With the title and intro gone, `.section--tight`'s 50px top padding left a
     visible gap above the card. Booktime sits its card 20px below the header
     once the banner is hidden (measured 21px header->card). */
  .page--donate .section--tight { padding-top: 20px; }
}

/* Frequency radios stack one-per-row on small phones, exactly as Booktime does:
   its `.radio-group` is `row` with a 40px gap above 375px and switches to
   `column` with a 20px gap at <=375px. Folios kept them on one row at every
   width because `.donate-radios` had no small-screen rule. */
@media (max-width: 375px) {
  .donate-radios {
    flex-direction: column;
    gap: 20px;
  }
}