/* Feature landing page donations only (its mock UI from src/features/donations.ts).
   Split from the former site.css; rules keep their original order. Page types and files: Base.astro. */
.doh { --w: 620; --h: 600; max-width: 620px; margin-left: auto; }
.doh__obj { position: absolute; opacity: 0; translate: 0 50px; rotate: var(--r, 0deg); filter: blur(10px); transition: opacity .9s var(--ease-out), translate 1.4s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--o) * .3s); }
.doh.is-in .doh__obj { opacity: 1; translate: 0 0; filter: none; }
.doh__phone { left: 190px; top: 10px; width: 280px; height: 580px; padding: 10px; border-radius: 46px; background: #fff; box-shadow: var(--shadow-frame), 0 0 0 1px var(--line-100); }
.doh__phone .mex__title { margin-top: 4px; }
.doh__to { display: inline-flex; align-items: center; gap: 6px; margin-top: -8px; font-size: 12.5px; color: var(--ink-450); }
.doh__amount { font-size: 54px; line-height: 1; letter-spacing: -0.05em; text-align: center; margin: 4px 0; }
.doh__amount i { font-style: normal; font-size: 26px; vertical-align: .5em; margin-right: 4px; color: var(--ink-400); }
.doh__btn { margin-top: auto; }
.doh__phone .nfh__screen { gap: 12px; }
.doh__card { left: -30px; top: 380px; --r: -9deg; width: 250px; height: 156px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px 20px; border-radius: 20px; color: #fff; text-align: left; background: radial-gradient(120% 90% at 100% 0%, rgba(157, 191, 245, .55), transparent 60%), linear-gradient(150deg, #2e3a8c, #10102a); box-shadow: var(--shadow-ink-card); }
.doh__card .i { position: absolute; right: 18px; top: 18px; color: rgba(255, 255, 255, .8); }
.doh__card b { font-size: 17px; font-weight: 500; letter-spacing: .08em; }
.doh__card small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.doh__chip { position: absolute; left: 20px; top: 20px; width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f3e3b0, #c9a95c); }
.doh__card--flat { position: relative; left: auto; top: auto; rotate: -4deg; width: 220px; height: 136px; }
.doh__toast { left: 380px; top: 120px; --r: 2deg; width: 220px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; box-shadow: var(--shadow-float); text-align: left; transition-delay: 1.7s; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.doh__toast > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.doh__toast b { font-weight: 500; }
.doh__toast small { font-size: 12px; color: var(--ink-450); }
.doh__pledge { left: 410px; top: 420px; --r: -2deg; width: 200px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; text-align: left; box-shadow: var(--shadow-float); transition-delay: 2.1s; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.doh__pledge small { font-size: 12px; color: var(--ink-450); }
.doh__pledge b { font-size: 16px; font-weight: 500; }
.doh .fin-bar i, .do-ways .fin-bar i { scale: 1 1; }
.reduce-motion .doh__obj { opacity: 1; translate: none; filter: none; transition: none; }
.do-promise { max-width: 480px; }
.do-promise__val { font-size: 22px; letter-spacing: -0.03em; }
.do-promise__val small { margin-left: 6px; font-size: 13px; color: var(--ink-450); letter-spacing: 0; }
.do-promise__bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; height: 210px; margin-top: 8px; }
.do-promise__m { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.do-promise__col { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 12px; background: var(--surface-1); overflow: hidden; }
.do-promise__col i { display: block; width: 100%; height: calc(var(--p) * 100%); border-radius: 12px; background: linear-gradient(180deg, var(--blue-380), var(--blue-500)); transform-origin: 50% 100%; scale: 1 0; transition: scale 1s var(--ease-out); transition-delay: calc(var(--k) * .08s); }
.do-promise.is-in .do-promise__col i, .reduce-motion .do-promise__col i { scale: 1 1; }
.do-promise__m small { font-size: 12px; color: var(--ink-400); }
.do-promise__m em { font-style: normal; font-size: 12.5px; color: var(--ink-700); }
.do-promise__foot { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13.5px; color: var(--ink-500); }
.do-promise__foot span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-600); }
.do-acct { max-width: 460px; }
.do-acct__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.do-acct__head > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 16px; }
.do-acct__head b { font-weight: 500; }
.do-acct__head small { font-size: 12.5px; color: var(--ink-450); }
.do-acct__head .mk-av { width: 44px; height: 44px; }
.do-acct__ring { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--blue-500) calc(var(--p) * 360deg), var(--surface-3) 0); }
.do-acct__ring b { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 13px; font-weight: 500; }
.do-acct__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-0); font-size: 15px; }
.do-acct__row b { font-weight: 500; }
.do-acct__row small { font-size: 12.5px; color: var(--ink-450); }
.do-acct__private { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-450); }
.do-freq { max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.do-freq__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: var(--surface-1); }
.do-freq__opts span { padding: 10px 0; border-radius: 12px; text-align: center; font-size: 13.5px; color: var(--ink-500); }
.do-freq__opts span.is-on { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-soft); }
.do-freq__custom { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); }
.do-freq__custom > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.do-freq__custom b { font-weight: 500; }
.do-freq__custom small { font-size: 12.5px; color: var(--ink-450); }
.do-freq__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.do-freq__methods span { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-0); font-size: 14px; color: var(--ink-700); }
.do-freq__methods span.is-on { background: var(--ink-950); color: #fff; }
.do-set { max-width: 480px; }
.do-set .mk-field { margin-top: 8px; }
.do-set__iban { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-0); font-size: 14px; }
.do-set__iban b { font-weight: 500; letter-spacing: .02em; }
.do-set__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.do-ways__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.do-way { display: flex; flex-direction: column; padding: 24px 24px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line-100); box-shadow: var(--shadow-soft); }
.do-way__visual { position: relative; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; border-radius: 20px; background: var(--surface-0); }
.do-way__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--ink-500); }
.do-way__cal { display: grid; grid-template-columns: repeat(7, 26px); gap: 6px; }
.do-way__cal i { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff; font-style: normal; font-size: 11px; color: var(--ink-400); }
.do-way__cal i.is-on { background: var(--blue-500); color: #fff; }
.do-way__pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 200px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid var(--line-200); font-size: 15px; font-weight: 500; }
.do-way__pay--dark { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.do-way__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.do-way__note { margin-top: 12px; font-size: 12.5px; color: var(--ink-400); }
.doh__card { background: radial-gradient(120% 90% at 100% 0%, rgba(157, 191, 245, .45), transparent 60%), linear-gradient(150deg, rgba(46, 58, 140, .86), rgba(16, 16, 42, .9)); border: 1px solid rgba(255, 255, 255, .14); }
@media (max-width: 1100px) {
  .do-ways__row { grid-template-columns: minmax(0, 1fr); }
  .do-way__visual { order: 2; margin: 22px 0 0; }
  .do-way .flv-card__title { margin-top: 0; }
}
@media (max-width: 720px) {
  .doh { --w: 440; --h: 640; }
  .doh__phone { left: 150px; top: 0; }
  .doh .doh__card { left: 0; top: 400px; }
  .doh__toast { left: 0; top: 90px; }
  .doh__pledge { left: 220px; top: 590px; }
}