/* donate — owned by TASK 11. Loaded after css/style.css (locked), so every rule here overrides
   the ported base without touching it. Styles templates/donate.html.twig + user/pages/10.donate.
   .amounts / .amount / .field / .panel / .form-grid / .btn are already-shipped classes from
   style.css — reused, then extended below for the radio-chip pattern and this page's new
   sections. See TASK-11-donate.md ## Result for the design decisions. */

.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; }

/* ---------------------------------------------------------------------------------------
   Headline band: eyebrow + heading + line/mountain/line divider + lead paragraph.
   --------------------------------------------------------------------------------------- */
.donate-headline { text-align: center; max-width: 780px; margin: 0 auto; }
.donate-eyebrow { color: var(--red); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; margin-bottom: 6px; }
.donate-heading { font-size: 36px; text-transform: uppercase; font-weight: 1000; margin: 0 0 20px; line-height: 1.15; }
.donate-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 22px; max-width: 460px; }
.donate-divider .line { flex: 1; height: 2px; background: var(--red); }
.donate-divider-mark { width: 34px; height: 20px; color: var(--red); flex: 0 0 auto; }
.donate-divider-mark svg { width: 100%; height: 100%; fill: currentColor; }
.donate-lead { font-size: 17px; line-height: 1.75; color: #333; margin: 0 0 40px; }
.donate-lead strong { color: var(--ink); }

/* ---------------------------------------------------------------------------------------
   "Choose an Amount" divider + chips. Chips are <label class="amount"> wrapping a visually
   hidden radio + text — selection state is pure CSS (:has()), no JS anywhere on this page.
   --------------------------------------------------------------------------------------- */
.donate-amounts-heading { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto 22px; text-align: center; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; }
.donate-amounts-heading .line { flex: 1; height: 2px; background: var(--red); }

.donate-amounts { margin-bottom: 36px; }
fieldset.amounts { border: 0; margin: 0; padding: 0; min-width: 0; }

.amount { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.amount input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.amount-value { font-family: var(--font-head, Arial, Helvetica, sans-serif); font-size: 18px; }
.amount-caption { font-size: 11px; color: var(--muted); }
.amount-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); font-weight: 900; }
.amount:hover { border-color: var(--red); }
.amount:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.amount:has(input:checked) { background: var(--red); border-color: var(--red); color: #fff; }
.amount:has(input:checked) .amount-tag,
.amount:has(input:checked) .amount-caption { color: #fff; }

.custom-amount { display: none; max-width: 260px; margin: 14px auto 0; }
.donate-amounts:has(#donate-amount-other:checked) .custom-amount { display: block; }

/* ---------------------------------------------------------------------------------------
   Two-column "Make a Donation" / "Your Support Makes a Difference" — reuses .form-grid/.panel.
   --------------------------------------------------------------------------------------- */
.donate-columns { margin-bottom: 40px; align-items: start; }
.donate-name-row { margin-bottom: 0; }
.donate-form h3, .donate-support h3 { color: var(--ink); position: relative; padding-bottom: 12px; margin-bottom: 18px; }
.donate-form h3::after, .donate-support h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--red); border-radius: 999px; }

.donate-consent { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 18px; font-size: 14px; cursor: pointer; }
.donate-consent input { margin-top: 3px; }

.donate-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.donate-submit .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.donate-submit .icon svg { width: 100%; height: 100%; fill: currentColor; }

.donate-secure-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.donate-secure-note .icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink); }
.donate-secure-note .icon svg { width: 100%; height: 100%; fill: currentColor; }
.donate-processor-note { font-size: 12px; color: var(--muted); font-style: italic; margin: 8px 0 0; }

.donate-support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.donate-support-list li { display: flex; gap: 16px; align-items: flex-start; }
.donate-support-list .icon { width: 32px; height: 32px; flex: 0 0 auto; color: var(--red); }
.donate-support-list .icon svg { width: 100%; height: 100%; fill: currentColor; }
.donate-support-list li span:last-child { font-size: 14px; line-height: 1.55; padding-top: 4px; }

/* ---------------------------------------------------------------------------------------
   "IMPORTANT" legal notice box.
   --------------------------------------------------------------------------------------- */
.donate-important { display: grid; grid-template-columns: auto 1fr 1fr; gap: 22px; align-items: start; border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-bottom: 46px; background: #fafafa; }
.donate-important .icon { width: 36px; height: 36px; color: var(--red); flex: 0 0 auto; }
.donate-important .icon svg { width: 100%; height: 100%; fill: currentColor; }
.donate-important-col strong { display: block; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; margin-bottom: 6px; }
.donate-important-col p { margin: 0; font-size: 14px; line-height: 1.6; }
.donate-important-col a { color: var(--red); font-weight: 800; display: inline-block; margin-top: 8px; }

/* ---------------------------------------------------------------------------------------
   Thank-you line + pull quote.
   --------------------------------------------------------------------------------------- */
.donate-thanks { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; padding: 10px 0 20px; }
.donate-thanks-main { text-align: center; }
.donate-heart { display: inline-flex; width: 38px; height: 38px; color: var(--red); margin-bottom: 10px; }
.donate-heart svg { width: 100%; height: 100%; fill: currentColor; }
.donate-thanks-main h3 { text-transform: uppercase; font-size: 26px; margin: 0 0 10px; }
.donate-thanks-main p { max-width: 420px; margin: 0 auto 10px; font-size: 15px; line-height: 1.6; }
.donate-signature { font-family: 'Brush Script MT', cursive; font-style: italic; color: var(--red); font-size: 26px; }
.donate-thanks-divider { width: 1px; align-self: stretch; background: var(--line); }
.donate-quote { text-align: center; font-style: italic; font-weight: 700; max-width: 340px; }
.donate-quote p { margin: 0 0 6px; }
.donate-quote .quote-mark { display: block; color: var(--red); font-size: 34px; font-style: normal; line-height: 1; }
.donate-quote .quote-mark-end { margin-top: 4px; }

@media (max-width: 780px) {
    .donate-heading { font-size: 27px; }
    .donate-lead { font-size: 15px; margin-bottom: 30px; }
    .donate-important { grid-template-columns: 1fr; text-align: left; }
    .donate-thanks { grid-template-columns: 1fr; gap: 26px; }
    .donate-thanks-divider { display: none; }
    .donate-quote { max-width: none; margin: 0 auto; }
}

/* ---- Read-only donate page (2026-09-09, client): no processor yet. Loud red banner, and the
   whole donation flow sits under a real grey overlay — not just reduced opacity, so it reads as
   switched off rather than badly styled. ---- */
.donate-preparing{
  max-width:820px;margin:0 auto 30px;padding:16px 22px;
  background:var(--red);color:#fff;border:0;border-radius:12px;
  text-align:center;font-size:15px;line-height:1.5;font-weight:800;
  box-shadow:0 10px 26px rgba(201,8,11,.25);
}
.donate-readonly .donate-amounts,
.donate-readonly .donate-columns{position:relative;filter:grayscale(1)}
.donate-readonly .donate-amounts::after,
.donate-readonly .donate-columns::after{
  content:"";position:absolute;inset:-10px;border-radius:16px;
  background:rgba(232,232,229,.72);backdrop-filter:saturate(.2);
  pointer-events:none;z-index:2;
}
.donate-readonly .donate-amounts *,
.donate-readonly .donate-columns input,
.donate-readonly .donate-columns select,
.donate-readonly .donate-columns .amount{cursor:not-allowed}
.donate-readonly .amount:hover{transform:none}


/* "Other amount" carries the legal cap (2026-09-09) — value from site.campaign.contribution_limit */
.amount-limit{font-size:10px;line-height:1.2;color:var(--muted);text-align:center}
.amount:has(input:checked) .amount-limit{color:rgba(255,255,255,.85)}

/* Task 17: the eligibility <select> got a longer (LECFA-correct) option text; a select's
   intrinsic width is its longest option, which forced the grid column to 654px on a 390px
   phone. Pin it to its column and let grid items shrink. */
.donate-columns > *{min-width:0}
.donate-form select{width:100%;max-width:100%;box-sizing:border-box}


/* ---------------------------------------------------------------------------------------
   2026-09-12 — live flow: three ways to give, real contributor form, thank-you page.
   The .donate-readonly overlay rules above are kept for the day donations are paused again;
   the template no longer sets that class.
   --------------------------------------------------------------------------------------- */
/* Two cards since 2026-09-16 (cheque dropped, client). */
.donate-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 44px; }
.donate-method { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px 22px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.donate-method-etransfer { border-color: var(--red); box-shadow: 0 10px 26px rgba(201,8,11,.10); }
.donate-method h3 { margin: 0; text-transform: uppercase; font-size: 17px; }
.donate-method p { margin: 0; font-size: 14px; line-height: 1.6; color: #333; flex: 1; }
.donate-method-tag { position: absolute; top: -11px; left: 20px; background: var(--red); color: #fff; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 900; padding: 4px 10px; border-radius: 999px; }
.donate-method-link { color: var(--red); font-weight: 800; font-size: 14px; }
.donate-card-btn { align-self: flex-start; }
.donate-method-soon { font-size: 12px !important; color: var(--muted) !important; font-style: italic; flex: 0 !important; }
/* Card option while the Stripe link is not set (2026-09-18): greyed out, not clickable. */
.donate-method-disabled { background: #f3f3f1; border-color: var(--line); filter: grayscale(1); cursor: not-allowed; user-select: none; }
.donate-method-disabled h3, .donate-method-disabled p { color: #8a8a86; }
.donate-method-disabled .donate-method-tag { background: #8a8a86; }
.donate-method-disabled .btn { background: #c9c9c5; border-color: #c9c9c5; color: #fff; box-shadow: none; pointer-events: none; }

.donate-form-intro { font-size: 14px; color: #333; margin: -6px 0 16px; line-height: 1.55; }
.donate-errors { margin: 0 0 16px; padding: 12px 16px 12px 32px; background: #fff3f3; border: 1px solid var(--red); border-radius: 12px; color: #7a0004; font-size: 14px; }
.donate-errors li { margin: 2px 0; }
.donate-eligibility { font-weight: 700; }
.donate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.donate-flow { position: relative; }
.donate-form input[type="number"] { width: 100%; }

/* thank-you */
.donate-thanks-page .donate-next { max-width: 820px; margin: 0 auto 30px; }
.donate-thanks-page .donate-next h2 { text-transform: uppercase; font-size: 24px; margin: 0 0 14px; }
.donate-steps { margin: 0 0 14px; padding-left: 22px; font-size: 16px; line-height: 1.65; }
.donate-steps li { margin: 6px 0; }
.donate-next-note { font-size: 14px; color: var(--muted); margin: 0; }
.donate-recorded { grid-template-columns: auto 1fr; max-width: 820px; margin: 0 auto 30px; }
.donate-recorded-col ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.donate-back { text-align: center; margin: 0; }

@media (max-width: 780px) {
    .donate-methods { grid-template-columns: 1fr; gap: 18px; }
    .donate-recorded { grid-template-columns: 1fr; }
}

/* "We play fair" disclosure note above the amount chips (2026-09-12, client): the $100
   publication rule, stated before the donor picks an amount. */
.donate-fair { display: flex; gap: 16px; align-items: flex-start; max-width: 820px; margin: 0 auto 30px; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 14px; background: #fafafa; }
.donate-fair .icon { width: 30px; height: 30px; flex: 0 0 auto; color: var(--red); }
.donate-fair .icon svg { width: 100%; height: 100%; fill: currentColor; }
.donate-fair > div > strong { display: block; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; margin-bottom: 6px; }
.donate-fair p strong { display: inline; text-transform: none; font-size: inherit; letter-spacing: 0; margin: 0; }
.donate-fair p { margin: 0; font-size: 14px; line-height: 1.6; }
.amount:has(input:checked) .amount-caption { color: rgba(255,255,255,.85); }

/* ---- Thank-you e-Transfer steps (2026-09-17, client): the address to send to and the name to put
   in the message field are what the donor copies into their banking app — make them impossible to
   miss and selectable in one tap (user-select: all). ---- */
.donate-key {
    display: inline-block; font-weight: 800; font-size: 1.12em; line-height: 1.35; color: var(--red);
    background: #fdeeee; border: 1px solid rgba(200, 30, 30, .3); border-radius: 6px;
    padding: 2px 10px; margin: 2px 0; white-space: nowrap; user-select: all; -webkit-user-select: all;
}
@media (max-width: 480px) { .donate-key { white-space: normal; word-break: break-word; } }

/* ---- e-Transfer card (2026-09-17, client: "nedá sa to celé lepšie?"): the three values in one
   labelled box above the steps, big and one-tap selectable. ---- */
.donate-next-intro { margin: 0 0 10px; font-size: 16px; }
.etransfer-card { display: grid; gap: 10px; margin: 0 0 12px; padding: 14px 18px; background: #fdeeee;
    border: 1px solid rgba(200, 30, 30, .25); border-radius: 10px; }
.etransfer-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.etransfer-row dt { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.etransfer-row dd { margin: 0; }
.etransfer-card .donate-key { font-size: 20px; background: #fff; }
.etransfer-fallback { font-weight: 600; }
.donate-thanks-page .donate-next .donate-next-note { margin: 0 0 14px; }
@media (max-width: 480px) {
    .etransfer-row { grid-template-columns: 1fr; gap: 2px; }
    .etransfer-card .donate-key { font-size: 18px; }
}