/* Rockafairy — donate, thank-you, manage gift (light, warm theme on site.css tokens) */
.donate-page { background: var(--paper); }
.btn-outline { color: var(--jazz); background: transparent; border-color: var(--jazz); }
.btn-outline:hover { background: var(--jazz-tint); }
.flash-info-light { background: var(--jazz-tint); color: var(--jazz-dark); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 15px; margin-bottom: 16px; }
.opt { font-weight: 500; color: var(--ink-3); }

.dn-hero { padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(56px, 8vw, 96px); background: radial-gradient(70% 60% at 0% 0%, #fbe6f1 0%, var(--paper) 60%); }
.dn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(32px, 6vw, 80px); align-items: start; }
.dn-title { font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: clamp(40px, 5.6vw, 66px); line-height: 1.04; }
.dn-lede { margin-top: 18px; font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-2); max-width: 560px; }

.dn-photos { position: relative; height: 300px; margin: 36px 0 40px; max-width: 520px; }
.dn-ph { position: absolute; overflow: hidden; border-radius: 20px; border: 6px solid #fff; box-shadow: var(--shadow-lg); }
.dn-ph img { width: 100%; height: 100%; object-fit: cover; }
.dn-ph-1 { width: 62%; height: 100%; left: 0; top: 0; transform: rotate(-2.5deg); }
.dn-ph-2 { width: 46%; height: 72%; right: 0; bottom: -10px; transform: rotate(3deg); }

.dn-why { display: grid; gap: 22px; max-width: 560px; }
.dn-why li { display: flex; gap: 16px; }
.dn-why .icon-badge { margin: 0; width: 46px; height: 46px; font-size: 22px; flex-shrink: 0; }
.dn-why strong { font-size: 17px; }
.dn-why p { color: var(--ink-2); font-size: 15.5px; margin-top: 2px; }

/* form card */
.dn-card { position: sticky; top: calc(var(--header-h) + 20px); background: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.dn-freq { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 999px; padding: 5px; border: 0; }
.dn-freq label { position: relative; cursor: pointer; }
.dn-freq input { position: absolute; opacity: 0; }
.dn-freq span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 999px; font-weight: 700; color: var(--ink-2); transition: background .2s, color .2s, box-shadow .2s; }
.dn-freq input:checked + span { background: #fff; color: var(--jazz); box-shadow: 0 1px 4px rgba(29, 18, 25, .14); }
.dn-freq input:focus-visible + span { outline: 3px solid var(--jazz-bright); outline-offset: 2px; }
.dn-freq svg { width: 16px; height: 16px; }
.dn-monthly-note { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: -6px; }

.dn-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0; }
.dn-amt { position: relative; cursor: pointer; }
.dn-amt > input { position: absolute; opacity: 0; }
.dn-amt > span { display: grid; place-items: center; height: 58px; border: 2px solid var(--line); border-radius: 14px; font-size: 20px; font-weight: 700; transition: border-color .15s, background .15s, color .15s; }
.dn-amt:hover > span { border-color: #d9aac4; }
.dn-amt > input:checked + span { border-color: var(--jazz); background: var(--jazz); color: #fff; }
.dn-amt > input:focus-visible + span { outline: 3px solid var(--jazz-bright); outline-offset: 2px; }
.dn-other { grid-column: span 2; }
.dn-other-wrap { display: flex !important; align-items: center; justify-content: flex-start !important; padding: 0 16px; gap: 6px; }
.dn-cur { color: var(--ink-3); }
.dn-other-wrap input { border: 0; outline: 0; background: transparent; font: 700 20px var(--f-text); color: inherit; width: 100%; -moz-appearance: textfield; appearance: textfield; }
.dn-other-wrap input::-webkit-inner-spin-button, .dn-other-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dn-other > input:checked + .dn-other-wrap { background: #fff !important; color: var(--ink) !important; }
.dn-other > input:checked + .dn-other-wrap .dn-cur { color: var(--jazz); }

.dn-field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.dn-field small { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.dn-field input, .dn-field select, .dn-field textarea, .dn-dedicate select, .dn-dedicate input {
  width: 100%; font: 500 16px var(--f-text); color: var(--ink); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper);
}
.dn-field textarea { resize: vertical; }
.dn-field :focus, .dn-dedicate :focus { outline: none; border-color: var(--jazz); box-shadow: 0 0 0 4px rgba(165, 11, 94, .12); background: #fff; }
.dn-who { display: grid; gap: 12px; }
.dn-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.dn-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--jazz); flex-shrink: 0; }
.dn-dedicate { display: grid; grid-template-columns: 150px 1fr; gap: 8px; margin-top: -6px; }
.dn-cover { margin: 0; }
.dn-submit span { font-variant-numeric: tabular-nums; }
.dn-manage-link { text-align: center; font-size: 14px; }

@media (max-width: 980px) {
  .dn-grid { grid-template-columns: 1fr; }
  .dn-card { position: static; order: -1; }
  .dn-photos { height: 240px; margin: 28px 0 32px; }
}
@media (max-width: 560px) {
  .dn-hero { padding-top: calc(var(--header-h) + 24px); }
  .dn-photos { display: none; }
  .dn-story .dn-why { margin-top: 28px; }
  .dn-dedicate { grid-template-columns: 1fr; }
  .dn-amt > span { height: 54px; font-size: 18px; }
}
/* card first on small screens, story after */
@media (max-width: 980px) { .dn-story { order: 2; } }

/* thanks / manage */
.dn-thanks { padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) 0 clamp(64px, 8vw, 112px); background: radial-gradient(70% 60% at 50% 0%, #fbe6f1 0%, var(--paper) 65%); min-height: 70vh; }
.dn-thanks .narrow { max-width: 680px; }
.dn-heart { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--jazz); color: #fff; font-size: 34px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(165, 11, 94, .35); }
.dn-heart svg { fill: currentColor; stroke: none; }
.dn-receipt { margin-top: 28px; background: #fff; border-radius: 18px; padding: 8px 22px; box-shadow: var(--shadow); }
.dn-receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dn-receipt div:last-child { border-bottom: 0; }
.dn-receipt dt { color: var(--ink-3); }
.dn-receipt dd { font-weight: 600; text-align: right; }
.dn-thanks-actions, .dn-manage-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.dn-cancel { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.donate-page .find-form input { border: 1.5px solid var(--line); }
.dn-other-ways { padding-top: clamp(56px, 8vw, 96px); }