/* Donation widget — self-contained, brand-aligned with the merchant portal.
   The same .dn-* markup renders in two places: the public page (body.dn) and the
   live preview inside /portal/donations. Every variable is --dn-* prefixed so the
   card can be dropped into the portal without clobbering its CSS variables. */
:root {
    --dn-bg:#0a1120; --dn-card:#111a2b; --dn-card-2:#0d1524;
    --dn-ink:#eef2f8; --dn-ink-2:#cbd5e1; --dn-muted:#94a3b8;
    --dn-line:rgba(148,163,184,.16); --dn-line-2:rgba(148,163,184,.28); --dn-field:#0d1524;
    --dn-accent:#08a05a; --dn-radius:20px;
}
[data-theme="light"] {
    --dn-bg:#f4f7fb; --dn-card:#ffffff; --dn-card-2:#f8fafc;
    --dn-ink:#0f172a; --dn-ink-2:#334155; --dn-muted:#64748b;
    --dn-line:#e6ebf2; --dn-line-2:#d3dbe6; --dn-field:#f8fafc;
}

/* Public page chrome (the portal preview reuses .dn-card only, not body.dn). */
body.dn * { box-sizing:border-box; }
body.dn {
    margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--dn-ink); background:var(--dn-bg);
    background-image:
        radial-gradient(900px 460px at 50% -220px, color-mix(in srgb, var(--dn-accent) 20%, transparent), transparent 68%),
        radial-gradient(700px 380px at 100% 110%, color-mix(in srgb, var(--dn-accent) 8%, transparent), transparent 60%);
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:44px 18px;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.dn-card {
    width:100%; max-width:456px; background:var(--dn-card); border:1px solid var(--dn-line);
    border-radius:var(--dn-radius); box-shadow:0 40px 90px -50px rgba(0,0,0,.72); padding:26px 26px 22px;
}
[data-theme="light"] .dn-card { box-shadow:0 30px 70px -46px rgba(15,23,42,.4); }

/* Header: brand on the left, a small "Donation" pill on the right. */
.dn-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.dn-brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; letter-spacing:-.3px; color:var(--dn-ink); }
.dn-brand img { width:24px; height:24px; }
.dn-pill { font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.7px;
    padding:6px 12px; border:1px solid var(--dn-line-2); border-radius:999px; color:var(--dn-muted); }

/* Intro: avatar (emoji or monogram), merchant eyebrow, title, headline. */
.dn-intro { text-align:center; margin-bottom:22px; }
.dn-emoji {
    width:66px; height:66px; margin:0 auto 15px; border-radius:50%; display:grid; place-items:center;
    font-size:30px; font-weight:800; line-height:1; color:var(--dn-accent);
    background:color-mix(in srgb, var(--dn-accent) 12%, var(--dn-card));
    border:1px solid color-mix(in srgb, var(--dn-accent) 30%, transparent);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--dn-accent) 7%, transparent);
    /* Defensive: a single emoji or initial fits; clip anything longer so a
       legacy multi-character value can never distort the round avatar. */
    overflow:hidden; white-space:nowrap; padding:0 4px;
}
.dn-merchant { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--dn-muted); font-weight:700; }
.dn-title { font-size:23px; font-weight:800; margin:7px 0 0; letter-spacing:-.4px; line-height:1.2; }
.dn-headline { color:var(--dn-muted); margin:9px 0 0; font-size:14px; line-height:1.55; }
.dn-desc { color:var(--dn-ink-2); font-size:13.5px; line-height:1.6; margin:0 0 4px; white-space:pre-line;
    padding:14px 16px; background:var(--dn-card-2); border:1px solid var(--dn-line); border-radius:14px; }

.dn-alert { background:rgba(248,113,113,.12); color:#b91c1c; border:1px solid rgba(248,113,113,.3);
    padding:11px 14px; border-radius:12px; font-size:13px; margin-bottom:16px; }
[data-theme="dark"] .dn-alert { color:#fca5a5; }

/* Labels + fields. */
.dn-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--dn-muted); font-weight:700; margin:20px 0 9px; }

/* Preset amounts — an even grid so they read as one intentional control. */
.dn-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.dn-chip { padding:11px 8px; border-radius:12px; cursor:pointer; font-size:14.5px; font-weight:700;
    border:1px solid var(--dn-line-2); background:var(--dn-card-2); color:var(--dn-ink);
    transition:border-color .15s, background .15s, color .15s, transform .12s; }
.dn-chip:hover { border-color:var(--dn-accent); transform:translateY(-1px); }
.dn-chip.on { border-color:var(--dn-accent); color:var(--dn-accent);
    background:color-mix(in srgb, var(--dn-accent) 14%, transparent);
    box-shadow:0 0 0 1px var(--dn-accent) inset; }

.dn-amtrow { display:flex; gap:10px; }
.dn-amtfield { position:relative; flex:1; }
.dn-cursym { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--dn-muted); font-weight:800; font-size:18px; pointer-events:none; }
.dn-input, .dn-select {
    width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--dn-line-2);
    background:var(--dn-field); color:var(--dn-ink); font-size:15px; font-family:inherit;
    transition:border-color .15s, box-shadow .15s;
}
.dn-amtfield .dn-input { padding-left:34px; font-weight:800; font-size:19px; }
.dn-select { flex:0 0 auto; width:104px; font-weight:600; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--dn-muted) 50%),linear-gradient(135deg,var(--dn-muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.dn-input:focus, .dn-select:focus { outline:none; border-color:var(--dn-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--dn-accent) 18%, transparent); }
.dn-field { margin-top:2px; }
textarea.dn-input { resize:vertical; min-height:64px; font-weight:400; font-size:14px; line-height:1.5; }

.dn-btn {
    width:100%; margin-top:24px; padding:15px; border:0; border-radius:13px; cursor:pointer; font-family:inherit;
    font-weight:800; font-size:15px; letter-spacing:.1px; color:#fff;
    background:linear-gradient(135deg, var(--dn-accent), color-mix(in srgb, var(--dn-accent) 82%, #000 8%));
    box-shadow:0 12px 24px -12px color-mix(in srgb, var(--dn-accent) 70%, transparent);
    transition:filter .15s, transform .1s, box-shadow .15s;
}
.dn-btn:hover { filter:brightness(1.05); }
.dn-btn:active { transform:translateY(1px); }

.dn-foot { margin-top:20px; padding-top:18px; border-top:1px solid var(--dn-line); text-align:center; font-size:12px; color:var(--dn-muted); line-height:1.7; }
.dn-foot a { color:var(--dn-muted); text-decoration:none; }
.dn-foot a:hover { color:var(--dn-accent); text-decoration:underline; }
.dn-secure { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.dn-secure svg { width:14px; height:14px; flex:0 0 auto; }
.dn-foot .dn-sep { opacity:.5; margin:0 3px; }