/* Boonchoo donation flow */
.bkb-dn{--g:#0E7A2E;--g2:#3DA537;--lime:#9BD64A;--sun:#FF8A1E;--sun2:#E9690B;--ink:#1E2A22;--soft:#4C5A4F;--faint:#7C8A80;--line:rgba(30,42,34,.13);--paper:#FFFCF6;--cream:#FFF8EC;--bad:#B3261E;
	max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:2rem;box-shadow:0 20px 50px rgba(30,42,34,.08);color:var(--ink);font-size:1rem;line-height:1.5;box-sizing:border-box;}
.bkb-dn *,.bkb-dn *::before,.bkb-dn *::after{box-sizing:border-box;}
.bkb-dn h3{font-size:1.45rem;font-weight:700;margin:0 0 1.1rem;outline:none;}
.bkb-dn__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.bkb-dn__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.bkb-dn [hidden]{display:none!important;}

/* progress */
.bkb-dn__progress{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;list-style:none;margin:0 0 1.8rem;padding:0;counter-reset:s;}
.bkb-dn__progress li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--faint);text-align:center;}
.bkb-dn__progress li::before{content:'';position:absolute;top:15px;left:calc(-50% + 18px);right:calc(50% + 18px);height:3px;border-radius:3px;background:var(--line);}
.bkb-dn__progress li:first-child::before{display:none;}
.bkb-dn__progress span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:2px solid var(--line);font-size:.85rem;transition:all .25s;position:relative;z-index:1;}
.bkb-dn__progress li.is-on{color:var(--ink);}
.bkb-dn__progress li.is-on span{background:var(--sun);border-color:var(--sun);color:#fff;box-shadow:0 0 0 5px rgba(255,138,30,.18);}
.bkb-dn__progress li.is-done span{background:var(--g);border-color:var(--g);color:#fff;}
.bkb-dn__progress li.is-done::before,.bkb-dn__progress li.is-on::before{background:var(--g);}

/* step 1 */
.bkb-dn__amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;}
.bkb-dn__amt{padding:.95rem .4rem;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);font:inherit;font-weight:700;font-size:1.05rem;color:var(--ink);cursor:pointer;transition:all .18s;}
.bkb-dn__amt:hover{border-color:var(--g2);}
.bkb-dn__amt.is-on{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 6px 16px rgba(14,122,46,.25);}
.bkb-dn__custom{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden;}
.bkb-dn__custom span{padding:0 0 0 .7rem;font-weight:700;color:var(--soft);}
.bkb-dn__custom input{width:100%;min-width:0;border:0;background:transparent;padding:.9rem .35rem;font:inherit;font-weight:700;font-size:1.05rem;color:var(--ink);outline:none;}
.bkb-dn__custom:focus-within{border-color:var(--g);}
.bkb-dn__impact{margin:1rem 0 1.4rem;padding:.9rem 1.1rem;border-radius:14px;background:linear-gradient(135deg,#F2FAEA,#FFF6E8);color:var(--soft);font-size:.95rem;}
.bkb-dn__impact strong{color:var(--g);}

/* fields */
.bkb-dn__label{display:block;font-size:.88rem;font-weight:600;color:var(--soft);margin:1rem 0 .4rem;}
.bkb-dn__label em{color:var(--sun2);font-style:normal;}
.bkb-dn__opt{font-weight:400;color:var(--faint);}
.bkb-dn__input,.bkb-dn__select{display:block;width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;}
.bkb-dn__input:focus,.bkb-dn__select:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(14,122,46,.12);}
.bkb-dn__input.is-bad{border-color:var(--bad);box-shadow:0 0 0 4px rgba(179,38,30,.1);}
textarea.bkb-dn__input{resize:vertical;}
.bkb-dn__hint{font-size:.9rem;color:var(--soft);margin:0 0 .6rem;}
.bkb-dn__center{text-align:center;}
.bkb-dn__err{margin:.45rem 0 0;font-size:.88rem;font-weight:600;color:var(--bad);}
.bkb-dn__err--form{margin-top:1rem;padding:.8rem 1rem;background:#FDECEA;border-radius:10px;}

/* nav */
.bkb-dn__nav{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:1.6rem;}
.bkb-dn__nav:has(> :only-child){justify-content:flex-end;}
.bkb-dn__next,.bkb-dn__submit{margin-left:auto;padding:1rem 1.8rem;border:0;border-radius:100px;background:var(--sun);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(255,138,30,.35);transition:all .18s;}
.bkb-dn__next:hover,.bkb-dn__submit:hover{background:var(--sun2);transform:translateY(-1px);}
.bkb-dn__submit[disabled]{opacity:.7;cursor:wait;transform:none;}
.bkb-dn__back{padding:.9rem .4rem;border:0;background:none;color:var(--soft);font:inherit;font-weight:600;cursor:pointer;}
.bkb-dn__ghost{padding:.65rem 1.2rem;border:1.5px solid var(--line);border-radius:100px;background:#fff;color:var(--ink);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;}
.bkb-dn__ghost:hover{border-color:var(--g);color:var(--g);}

/* step 3 */
.bkb-dn__tabs{display:flex;gap:.4rem;padding:.3rem;background:var(--cream);border-radius:100px;margin-bottom:1.2rem;}
.bkb-dn__tab{flex:1;padding:.7rem .5rem;border:0;border-radius:100px;background:transparent;font:inherit;font-weight:700;font-size:.92rem;color:var(--soft);cursor:pointer;transition:all .18s;}
.bkb-dn__tab.is-on{background:#fff;color:var(--g);box-shadow:0 3px 10px rgba(30,42,34,.1);}
.bkb-dn__refbox{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem .8rem;padding:.9rem 1.1rem;border:1.5px dashed rgba(14,122,46,.35);border-radius:14px;margin-bottom:1.4rem;background:#F7FCF3;}
.bkb-dn__refbox > span{font-size:.8rem;font-weight:600;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;}
.bkb-dn__refbox strong{grid-column:1;font-family:ui-monospace,Menlo,monospace;font-size:1.25rem;letter-spacing:.06em;color:var(--g);}
.bkb-dn__refbox .bkb-dn__copy{grid-column:2;grid-row:1 / span 2;}
.bkb-dn__refbox small{grid-column:1 / -1;font-size:.8rem;color:var(--soft);}
.bkb-dn__copy{padding:.4rem .9rem;border:1.5px solid var(--g);border-radius:100px;background:#fff;color:var(--g);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;}
.bkb-dn__qrwrap{position:relative;width:max-content;margin:0 auto 1.1rem;padding:14px;background:#fff;border-radius:20px;box-shadow:0 12px 32px rgba(30,42,34,.12);}
.bkb-dn__qr{width:240px;height:240px;display:grid;place-items:center;}
.bkb-dn__qr img,.bkb-dn__qr canvas{display:block;max-width:100%;}
.bkb-dn__qr.is-loading{background:linear-gradient(90deg,#f3f3f3 25%,#e9e9e9 50%,#f3f3f3 75%);background-size:200% 100%;animation:bkbShimmer 1.1s infinite;border-radius:10px;}
@keyframes bkbShimmer{to{background-position:-200% 0;}}
.bkb-dn__qrtag{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);background:#113566;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:.25rem .9rem;border-radius:100px;}
.bkb-dn__qramt{text-align:center;color:var(--soft);margin:1.2rem 0 .4rem;}
.bkb-dn__qramt strong{color:var(--g);font-size:1.35rem;}
.bkb-dn__bank{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.bkb-dn__bank div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;border-top:1px solid var(--line);}
.bkb-dn__bank div:first-child{border-top:0;}
.bkb-dn__bank dt{color:var(--soft);font-size:.9rem;}
.bkb-dn__bank dd{margin:0;font-weight:700;text-align:right;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end;}
.bkb-dn__cardbtn{display:block;text-align:center;padding:1rem;border-radius:14px;background:var(--ink);color:#fff!important;font-weight:700;text-decoration:none;}

/* step 4 */
.bkb-dn__file{position:absolute;width:1px;height:1px;opacity:0;}
.bkb-dn__drop{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.8rem 1rem;border:2px dashed rgba(14,122,46,.35);border-radius:18px;background:#F7FCF3;text-align:center;cursor:pointer;transition:all .18s;}
.bkb-dn__drop:hover,.bkb-dn__slipzone.is-over .bkb-dn__drop{border-color:var(--g);background:#EEF8E6;}
.bkb-dn__file:focus-visible + .bkb-dn__drop{box-shadow:0 0 0 4px rgba(14,122,46,.2);}
.bkb-dn__drop-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff;font-size:1.5rem;}
.bkb-dn__drop strong{font-size:1.05rem;}
.bkb-dn__drop span{font-size:.88rem;color:var(--soft);}
.bkb-dn__slipzone.has-file .bkb-dn__drop{display:none;}
.bkb-dn__preview{display:flex;align-items:center;gap:1rem;padding:.8rem;border:1.5px solid var(--g);border-radius:16px;background:#F7FCF3;}
.bkb-dn__preview img{width:64px;height:84px;object-fit:cover;border-radius:8px;background:#fff;}
.bkb-dn__preview-name{flex:1;font-size:.88rem;font-weight:600;word-break:break-all;}
.bkb-dn__slipnote{margin:.6rem 0 0;font-size:.82rem;}
.bkb-dn__summary{display:grid;gap:.5rem;margin-top:1.2rem;padding:1rem 1.1rem;border-radius:14px;background:var(--cream);}
.bkb-dn__summary div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;}
.bkb-dn__summary strong{color:var(--ink);}
.bkb-dn__summary span{color:var(--soft);text-align:right;}

/* done */
.bkb-dn__done{background:var(--ink);color:#fff;border-radius:18px;padding:2rem;outline:none;}
.bkb-dn__done-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;white-space:nowrap;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.12);font-family:ui-monospace,Menlo,monospace;font-size:.8rem;letter-spacing:.1em;color:var(--lime);}
.bkb-dn__done-head code{margin-left:auto;color:rgba(255,255,255,.6);background:none;}
.bkb-dn__dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(155,214,74,.22);animation:bkbPulse 1.8s infinite;}
@keyframes bkbPulse{50%{box-shadow:0 0 0 8px rgba(155,214,74,0);}}
.bkb-dn__done-steps{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.5rem;}
.bkb-dn__done-steps li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:rgba(255,255,255,.7);}
.bkb-dn__done-steps b{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--lime);font-weight:600;}
.bkb-dn__done h3{color:#fff;font-size:1.4rem;}
.bkb-dn__done p{color:rgba(255,255,255,.8);margin:0;}

.bkb-dn__credit{margin:1.4rem 0 0;text-align:center;font-size:.78rem;color:var(--faint);}
.bkb-dn__credit a{color:var(--g);font-weight:600;text-decoration:none;}

@media (max-width:520px){
	.bkb-dn{padding:1.3rem;border-radius:20px;}
	.bkb-dn__progress{font-size:.7rem;}
	.bkb-dn__amt{font-size:.98rem;padding:.85rem .2rem;}
	.bkb-dn__qr{width:220px;height:220px;}
	.bkb-dn__done{padding:1.5rem;}
	.bkb-dn__done-head{font-size:.72rem;letter-spacing:.06em;}
	.bkb-dn__custom input::placeholder{font-size:.9rem;}
	.bkb-dn__next,.bkb-dn__submit{padding:.95rem 1.3rem;}
}
@media (prefers-reduced-motion:reduce){
	.bkb-dn *{animation:none!important;transition:none!important;}
}

/* purpose cards — general support is the default */
.bkb-dn__purpose{border:0;margin:0;padding:0;display:grid;gap:.6rem;}
.bkb-dn__purpose legend{padding:0;margin-bottom:.5rem;}
.bkb-dn__pcard{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem;border:1.5px solid var(--line);border-radius:16px;background:var(--paper);cursor:pointer;transition:all .18s;}
.bkb-dn__pcard:hover{border-color:var(--g2);}
.bkb-dn__pcard.is-on{border-color:var(--g);background:#F4FBEF;box-shadow:0 0 0 1px var(--g) inset;}
.bkb-dn__pcard input{position:absolute;opacity:0;width:1px;height:1px;}
.bkb-dn__pcard:focus-within{box-shadow:0 0 0 4px rgba(14,122,46,.18);}
.bkb-dn__pico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;font-size:1.3rem;box-shadow:0 2px 8px rgba(30,42,34,.08);}
.bkb-dn__ptxt{display:flex;flex-direction:column;gap:.15rem;flex:1;}
.bkb-dn__ptxt strong{font-size:1rem;}
.bkb-dn__ptxt small{font-size:.86rem;color:var(--soft);line-height:1.45;}
.bkb-dn__pcard::after{content:'';flex:none;width:22px;height:22px;margin-top:.6rem;border-radius:50%;border:2px solid var(--line);background:#fff;transition:all .18s;}
.bkb-dn__pcard.is-on::after{border-color:var(--g);background:var(--g);box-shadow:inset 0 0 0 4px #fff;}
.bkb-dn__projwrap{margin:-.1rem 0 .2rem 0;}
