/* Donate page — dedicated presentation */
.page-donate {
    --donate-ink: #082a47;
    --donate-blue: #004790;
    --donate-deep: #03223e;
    --donate-gold: #d2ae6d;
    --donate-paper: #f4f1e8;
    --donate-line: #d5dfe5;
    color: #455c70;
    background: var(--donate-paper);
    overflow: hidden;
}
.page-donate *, .page-donate *::before, .page-donate *::after { box-sizing: border-box; }
.page-donate .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.page-donate h1, .page-donate h2, .page-donate h3, .page-donate h4 { color: var(--donate-ink); font-family: var(--fog-font-display, 'Toroka Wide', serif); text-wrap: balance; }
.page-donate p { line-height: 1.7; }

.donate-hero { position: relative; padding: calc(var(--fog-header-h, 76px) + 90px) 0 150px; color: #fff; background: var(--donate-deep); overflow: hidden; }
.donate-hero::before { position: absolute; inset: 0; content: ''; background: radial-gradient(circle at 82% 20%, rgba(20, 101, 161, .55), transparent 35%); }
.donate-hero::after { position: absolute; right: -180px; bottom: -450px; width: 720px; height: 720px; border: 1px solid rgba(210, 174, 109, .3); border-radius: 50%; content: ''; box-shadow: 0 0 0 90px rgba(210, 174, 109, .035); }
.donate-hero .hero-content { position: relative; z-index: 1; max-width: 820px; margin: 0; text-align: left; }
.donate-hero .hero-badge { display: inline-flex; align-items: center; gap: 9px; color: #efd58c; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.donate-hero .hero-badge .fog-i { width: 18px; }
.donate-hero h1 { margin: 24px 0; color: #fff; font-size: clamp(3.3rem, 7vw, 6.8rem); letter-spacing: -.06em; line-height: .92; }
.donate-hero .hero-subtitle { max-width: 680px; margin: 0; color: #cad8e3; font-size: clamp(1rem, 1.7vw, 1.16rem); }

.donate-container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 26px; align-items: start; margin-top: -80px !important; padding-bottom: 95px; }
.donation-form-wrapper { padding: clamp(28px, 5vw, 54px); background: #fff; border: 1px solid #ddd6c8; box-shadow: 0 28px 80px rgba(7, 42, 72, .12); }
.donation-form-wrapper .form-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--donate-line); text-align: left; }
.donation-form-wrapper .form-header h2 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 3.2rem); }
.donation-form-wrapper .form-header p { margin: 0; }
.donation-form .form-group { margin-bottom: 23px; }
.donation-form .form-label { display: block; margin-bottom: 8px; color: var(--donate-ink); font-size: .77rem; font-weight: 800; }
.donation-form .required::after { color: #a3241d; content: ' *'; }
.donation-form input:not([type='checkbox']), .donation-form select { width: 100%; min-height: 50px; padding: 13px 14px; color: #15324b; background: #fbfcfc; border: 1px solid #aebdc8; border-radius: 3px; font: inherit; }
.donation-form input:focus, .donation-form select:focus, .currency-option:focus-visible, .amount-option:focus-visible, .payment-option:focus-visible { outline: 3px solid rgba(0, 71, 144, .16); outline-offset: 2px; border-color: var(--donate-blue); }
.anonymous-option { display: flex; align-items: center; gap: 9px; color: #40586b; font-size: .77rem; cursor: pointer; }
.anonymous-option input { width: 17px; height: 17px; accent-color: var(--donate-blue); }
.currency-selector, .amount-grid, .payment-grid { display: grid; gap: 9px; }
.currency-selector, .payment-grid { grid-template-columns: repeat(2, 1fr); }
.amount-grid { grid-template-columns: repeat(3, 1fr); }
.currency-option, .amount-option, .payment-option { padding: 15px; color: #40586b; background: #fff; border: 1px solid #b7c5cf; border-radius: 0; font: 800 .72rem var(--fog-font-body, inherit); cursor: pointer; }
.currency-option:hover, .amount-option:hover, .payment-option:hover { background: #f0f5f8; }
.currency-option.selected, .amount-option.selected, .payment-option.selected { color: #fff; background: var(--donate-blue); border-color: var(--donate-blue); }
.custom-amount-wrapper { display: none; margin-top: 10px; }
.amount-input-wrapper { position: relative; }
.currency-prefix { position: absolute; top: 50%; left: 15px; z-index: 1; color: var(--donate-ink); font-weight: 900; transform: translateY(-50%); }
.amount-input-wrapper input { padding-left: 38px !important; }
#purpose_other { display: none; margin-top: 10px; }
.payment-methods { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--donate-line); }
.payment-methods > h3 { margin: 0 0 14px; font-size: 1rem; }
.payment-option { min-height: 118px; }
.payment-option h4, .payment-option p { margin: 5px 0; color: inherit; }
.payment-option p { font-size: .67rem; }
.payment-icon .fog-i { width: 25px; }
.donate-button { width: 100%; min-height: 56px; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 26px; color: #fff; background: var(--donate-blue); border: 0; font-weight: 900; cursor: pointer; }
.donate-button:hover { background: #003a76; }
.donate-button .fog-i { width: 19px; }
.donate-button:disabled { opacity: .65; cursor: wait; }

.alert { display: flex; align-items: center; gap: 10px; padding: 14px 15px; margin-bottom: 20px; border-left: 4px solid; }
.alert-success { color: #195c3e; background: #e7f3ec; border-color: #24754f; }
.alert-error { color: #8b201a; background: #f8e8e6; border-color: #a92b22; }
.alert .fog-i { width: 18px; }
.alert-close { width: 28px; height: 28px; display: grid; place-items: center; margin-left: auto; color: currentColor; background: transparent; border: 0; cursor: pointer; }
.alert-close .fog-i { width: 13px; }

.donation-info-sidebar { position: sticky; top: 100px; color: #fff; background: var(--donate-deep); }
.info-card { padding: 28px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.info-card:last-child { border-bottom: 0; }
.info-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #fff; font-size: 1rem; }
.info-card h3 .fog-i { width: 19px; color: var(--donate-gold); }
.info-card p { margin: 0; color: #beced9; font-size: .76rem; }
.info-card a { color: #efd58b; font-weight: 800; }
.info-followup { margin-top: 12px !important; }
.impact-examples { margin-top: 17px; }
.impact-item { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .72rem; }
.impact-label { color: #fff; font-weight: 900; }
.impact-value { color: #efd58b; }

.page-donate > section.container { padding-bottom: 95px; }
.transparency-note { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 40px; background: #fff; border: 1px solid #d8d1c4; }
.transparency-note h3 { margin: 0 0 8px; font-size: 1.5rem; }
.transparency-note p { max-width: 760px; margin: 0; }
.transparency-note .btn { padding: 12px 15px; color: var(--donate-blue); border: 1px solid var(--donate-blue); font-size: .7rem; font-weight: 900; text-decoration: none; }

.other-ways { padding: 105px 0; color: #fff; background: var(--donate-deep); }
.other-ways .section-header { display: grid; grid-template-columns: .4fr .6fr; gap: 40px; align-items: end; margin-bottom: 46px; text-align: left; }
.other-ways .section-title { margin: 0; color: #fff; font-size: clamp(2.3rem, 4.6vw, 4.3rem); line-height: 1.02; }
.other-ways .section-subtitle { max-width: 480px; margin: 0; color: #beced9; }
.ways-grid { display: grid; grid-template-columns: 1.25fr .875fr .875fr; border-top: 1px solid rgba(255, 255, 255, .18); border-left: 1px solid rgba(255, 255, 255, .18); }
.way-card { padding: 31px; border-right: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.way-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--donate-deep); background: var(--donate-gold); border-radius: 50%; }
.way-icon .fog-i { width: 21px; }
.way-card h3 { margin: 22px 0 9px; color: #fff; }
.way-card p { color: #beced9; font-size: .78rem; }
.bank-details { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); }
.bank-detail-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); font-size: .7rem; }
.bank-label { color: #aebfcc; }
.bank-value, .method-details { color: #fff; font-weight: 800; overflow-wrap: anywhere; }
.way-action { display: inline-block; margin-top: 12px; color: #efd58b; font-size: .72rem; font-weight: 800; }

.page-donate .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.page-donate .reveal.active { opacity: 1; transform: none; }
.page-donate :focus-visible { outline: 3px solid var(--donate-gold); outline-offset: 4px; }

@media (max-width: 900px) {
    .donate-container { grid-template-columns: 1fr; }
    .donation-info-sidebar { position: static; display: grid; grid-template-columns: repeat(3, 1fr); }
    .info-card { border-right: 1px solid rgba(255,255,255,.16); border-bottom: 0; }
    .other-ways .section-header { grid-template-columns: 1fr; }
    .ways-grid { grid-template-columns: 1fr 1fr; }
    .way-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .page-donate .container { width: calc(100% - 28px); }
    .donate-hero { padding: calc(var(--fog-header-h, 66px) + 55px) 0 120px; }
    .donate-hero h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
    .donate-container { margin-top: -65px !important; padding-bottom: 70px; }
    .donation-form-wrapper { padding: 26px 18px; }
    .amount-grid { grid-template-columns: repeat(2, 1fr); }
    .currency-selector, .payment-grid, .donation-info-sidebar, .ways-grid { grid-template-columns: 1fr; }
    .info-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
    .transparency-note { grid-template-columns: 1fr; padding: 28px 20px; }
    .other-ways { padding: 75px 0; }
    .way-card:first-child { grid-column: auto; }
    .bank-detail-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-donate * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .page-donate .reveal { opacity: 1; transform: none; }
}
.custom-amount-wrapper.is-visible { display: block; }
#purpose_other.is-visible { display: block; }
.donation-form .has-error { border-color: #a3241d !important; }

/* Donation type choice — General fund vs a specific campaign */
.fund-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.fund-option { display: flex; align-items: center; gap: 12px; padding: 15px; color: #40586b; background: #fff; border: 1px solid #b7c5cf; border-radius: 0; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.fund-option:hover { background: #f0f5f8; }
.fund-option.selected { color: #fff; background: var(--donate-blue); border-color: var(--donate-blue); }
.fund-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: rgba(0, 71, 144, .08); color: var(--donate-blue); }
.fund-option.selected .fund-icon { background: rgba(255, 255, 255, .16); color: #efd58c; }
.fund-icon .fog-i { width: 18px; height: 18px; }
.fund-copy { display: grid; gap: 2px; min-width: 0; }
.fund-copy strong { font-size: .78rem; font-weight: 800; }
.fund-copy small { font-size: .66rem; opacity: .82; line-height: 1.4; }

/* Campaign picker — list of selectable campaign cards */
.fund-campaign-picker { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height .2s ease, opacity .2s ease, margin .2s ease; }
.fund-campaign-picker.is-visible { max-height: 640px; opacity: 1; margin-top: 12px; overflow-y: auto; }
.picker-hint { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: #40586b; font-size: .7rem; font-weight: 800; }
.picker-hint .fog-i { width: 13px; height: 13px; color: var(--donate-blue); flex-shrink: 0; }
.picker-hint .picker-picked { color: var(--donate-blue); }
.fund-campaign-list { display: grid; gap: 9px; }
.campaign-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; color: #40586b; background: #fff; border: 1px solid #b7c5cf; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.campaign-option:hover { background: #f0f5f8; }
.campaign-option.selected { border-color: var(--donate-blue); background: #eef4f9; box-shadow: inset 0 0 0 1px var(--donate-blue); }
.campaign-option input { position: absolute; opacity: 0; pointer-events: none; }
.campaign-option input:focus-visible ~ .campaign-thumb { outline: 3px solid rgba(0, 71, 144, .35); outline-offset: 2px; }
.campaign-thumb { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; border-radius: 4px; background: #e8eef3; color: var(--donate-blue); font-weight: 900; font-size: 1.1rem; }
.campaign-thumb img { width: 100%; height: 100%; object-fit: cover; }
.campaign-option-body { display: grid; gap: 7px; flex: 1; min-width: 0; }
.campaign-option-title { color: var(--donate-ink); font-size: .78rem; font-weight: 800; line-height: 1.35; }
.campaign-option-progress { display: grid; gap: 4px; }
.campaign-option-progress progress { appearance: none; -webkit-appearance: none; width: 100%; height: 5px; border: 0; border-radius: 999px; overflow: hidden; background: #e3e9ee; accent-color: var(--donate-blue); }
.campaign-option-progress progress::-webkit-progress-bar { background: #e3e9ee; }
.campaign-option-progress progress::-webkit-progress-value { background: var(--donate-blue); border-radius: 999px; }
.campaign-option-progress progress::-moz-progress-bar { background: var(--donate-blue); border-radius: 999px; }
.campaign-option-figures { display: flex; justify-content: space-between; gap: 8px; font-size: .62rem; }
.campaign-option-figures strong { color: var(--donate-blue); }
.campaign-option-figures span { color: #7a93a5; }
.campaign-option-days { justify-self: start; padding: 3px 8px; border-radius: 999px; background: #fdf3df; color: #8a6d1f; font-size: .58rem; font-weight: 800; }

@media (max-width: 620px) {
    .fund-choice { grid-template-columns: 1fr; }
    .fund-campaign-picker.is-visible { max-height: 420px; }
}