/*
Theme Name: CharityGlow BD Demo
Theme URI: https://charityglow.com/
Author: CharityGlow
Description: Lightweight, mobile-first Bangla demo theme for the CharityGlow donation plugin (demobd.charityglow.com). Includes one-click demo import (Appearance > BD Demo Import).
Version: 1.0.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: charityglow-bd-demo
*/
:root{--p:#16645A;--d:#0E3B36;--dd:#0A2B27;--a:#F5A623;--a2:#E2940F;--bg:#F6F8F7;--ink:#13201E;--mut:#5B6B68;--line:#E3EAE8;--r:18px;--sh:0 10px 30px rgba(14,59,54,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Hind Siliguri',system-ui,sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--p);text-decoration:none}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em;color:var(--dd)}
h2{font-size:clamp(24px,4vw,36px)}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
.narrow{max-width:860px}
.center{text-align:center}
.mut{color:var(--mut)}
.mut-w{color:rgba(255,255,255,.72)}
.ico{flex:none;vertical-align:middle}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;font-weight:600;font-size:16px;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:.2s;white-space:nowrap;line-height:1.2}
.btn-lg{padding:15px 28px;font-size:17px}
.btn-a{background:var(--a);color:#2B1B00}.btn-a:hover{background:var(--a2)}
.btn-g{background:#E8F2F0;color:var(--p)}.btn-g:hover{background:#d6ebe7}
.btn-o{border-color:rgba(255,255,255,.6);color:#fff}.btn-o:hover{background:rgba(255,255,255,.1)}
.demo-bar{background:var(--a);color:#2B1B00;font-size:13.5px;text-align:center;padding:6px 14px;line-height:1.45}
.demo-bar a{color:#2B1B00;font-weight:700;text-decoration:underline}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--dd)}
.brand small{display:block;font-size:11.5px;font-weight:500;color:var(--mut);line-height:1}
.brand span{line-height:1.25}
.mark{width:42px;height:42px;border-radius:12px;background:var(--d);color:var(--a);display:grid;place-items:center}
.links{display:flex;gap:4px;margin-left:auto}
.links a{padding:8px 12px;border-radius:10px;color:var(--ink);font-weight:500;font-size:16px}
.links a:hover,.links a.on{background:#E8F2F0;color:var(--p)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:0;color:var(--dd);padding:6px;cursor:pointer}
.mob-only{display:none}
@media(max-width:1020px){.links{position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:10px 18px 18px;border-bottom:1px solid var(--line);display:none;box-shadow:var(--sh)}.links.open{display:flex}.links a{padding:12px}.burger{display:block}.nav-cta{margin-left:auto}.mob-only{display:block}.hide-m{display:none}}
@media(max-width:480px){.brand{font-size:17px}.mark{width:36px;height:36px}.nav-cta .btn{padding:9px 12px;font-size:15px}.nav-in{gap:10px}}
/* hero */
.hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(245,166,35,.25),transparent 60%),linear-gradient(160deg,var(--p),var(--dd) 70%);color:#fff;padding:56px 0 40px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative}
.hero h1{color:#fff;font-size:clamp(32px,5.2vw,56px);margin:.35em 0 .35em}
.hero h1 span{color:var(--a)}
.hero p{font-size:19px;color:rgba(255,255,255,.85);max-width:560px}
.pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:99px;font-size:14.5px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:rgba(255,255,255,.9)}
.trust .ico{color:var(--a)}
.hero-art img{border-radius:28px;box-shadow:0 30px 60px rgba(0,0,0,.3);border:6px solid rgba(255,255,255,.08)}
.hero-bar{position:relative;margin-top:36px}
.hero-bar .charityglow-donation-form-wrapper,.hero-bar>*{margin:0!important}
@media(max-width:860px){.hero{padding:30px 0 28px}.hero-in{grid-template-columns:1fr;gap:18px}.hero-art{display:none}.hero p{font-size:17px}.hero-bar{margin-top:22px}}
/* sections */
.section{padding:72px 0}
.section.alt{background:var(--bg)}
@media(max-width:700px){.section{padding:48px 0}}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:30px;flex-wrap:wrap}
.sh.center{display:block;text-align:center;max-width:720px;margin:0 auto 34px}
.sh h2{margin:0}
.sh.center p{margin-top:8px}
.kick{color:var(--p);font-weight:700;font-size:14px;letter-spacing:.04em;margin-bottom:6px;display:inline-flex;align-items:center;gap:8px}
.kick:before{content:"";width:22px;height:3px;border-radius:3px;background:var(--a)}
.light h2,.light .kick{color:#fff}.light p{color:rgba(255,255,255,.7)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:4px;transition:.2s;color:var(--ink)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:#cfe3df}
.tile b{font-size:18px;color:var(--dd)}
.tile small{color:var(--mut);font-size:14px}
.ti{width:52px;height:52px;border-radius:14px;background:#E8F2F0;color:var(--p);display:grid;place-items:center;margin-bottom:8px}
.ti.big{width:68px;height:68px;background:rgba(245,166,35,.18);color:var(--a2)}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);gap:12px}.tile{padding:16px}}
/* impact */
.impact{background:linear-gradient(135deg,var(--d),var(--dd));color:#fff;padding:70px 0}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.counter{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:26px;text-align:center}
.counter b{font-size:clamp(30px,4vw,44px);color:var(--a);line-height:1}
.counter .suf{color:var(--a);font-weight:700;font-size:22px;margin-left:2px}
.counter p{margin:8px 0 0;color:rgba(255,255,255,.8)}
@media(max-width:860px){.counters{grid-template-columns:repeat(2,1fr);gap:12px}.counter{padding:18px 10px}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;position:relative;box-shadow:var(--sh)}
.step .ico{color:var(--p)}
.step h3{margin:14px 0 6px;font-size:21px}
.step p{color:var(--mut);margin:0}
.num{position:absolute;top:18px;right:22px;font-size:46px;font-weight:700;color:#EAF2F0;line-height:1}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:34px}}
.pay-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.pay{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;gap:2px}
.pay .ico{color:var(--p);margin-bottom:6px}
.pay small{color:var(--mut);font-size:13.5px;line-height:1.4}
@media(max-width:480px){.pay-cards{grid-template-columns:1fr}.pay{flex-direction:row;align-items:center;gap:12px}.pay .ico{margin:0}}
.trust-list ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px}
.trust-list li{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.trust-list li .ico{color:var(--a2);margin-top:3px}
.trust-list li p{margin:2px 0 0;color:var(--mut);font-size:15.5px}
.zakat-cta{background:linear-gradient(150deg,#FFF6E6,#FDEBC8);border-radius:24px;padding:36px}
.zakat-cta p{color:#5b4a2b}
/* layouts showcase */
.layouts{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.lay{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:.2s}
.lay:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.lay img{aspect-ratio:16/8;object-fit:cover;width:100%}
.lay b{padding:16px 20px 0;font-size:19px;color:var(--dd)}
.lay small{padding:0 20px 18px;color:var(--mut)}
@media(max-width:700px){.layouts{grid-template-columns:1fr}}
/* faq */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--dd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:24px;color:var(--p);line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--mut);margin:0 0 16px}
/* cta + footer */
.cta-band{background:linear-gradient(120deg,var(--p),var(--d));color:#fff;padding:50px 0}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-in h2{color:#fff;font-size:clamp(22px,3.2vw,30px)}
.cta-in p{color:rgba(255,255,255,.8);margin:0;max-width:640px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.foot{background:var(--dd);color:#fff;padding:56px 0 0;font-size:15.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:30px}
.foot h4{color:#fff;font-size:17px;margin-bottom:14px}
.foot a{color:rgba(255,255,255,.78);display:block;padding:3px 0}
.foot a:hover{color:var(--a)}
.foot .brand{display:flex;color:#fff;margin-bottom:14px}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pay-row span{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.08);border-radius:10px;padding:6px 10px;font-size:14px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:18px 18px;font-size:14px;color:rgba(255,255,255,.6)}
.foot-bottom a{display:inline;color:var(--a)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}
.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#0084FF,#A033FF);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:60}
/* inner pages */
.page-hero{background:linear-gradient(160deg,var(--p),var(--dd));color:#fff;padding:44px 0 40px}
.page-hero h1{color:#fff;font-size:clamp(28px,4.4vw,44px);margin:.2em 0}
.page-hero p{color:rgba(255,255,255,.8);margin:0;max-width:720px}
.crumb{font-size:14px;color:rgba(255,255,255,.7)}.crumb a{color:var(--a)}
.page-body{padding-top:40px;padding-bottom:64px}
.camp-single{padding-top:24px}
.filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:24px;scrollbar-width:none}
.filter a{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;padding:9px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:15px}
.filter a.on,.filter a:hover{background:var(--p);border-color:var(--p);color:#fff}
.empty{background:var(--bg);border-radius:var(--r);padding:36px;text-align:center}
.bar-wrap{margin-top:40px}
.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.side-card{background:var(--bg);border-radius:var(--r);padding:26px;position:sticky;top:96px}
.ticks{list-style:none;padding:0}.ticks li{padding:6px 0 6px 28px;position:relative}.ticks li:before{content:"✓";position:absolute;left:0;color:var(--p);font-weight:700}
.note-box{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)}.card .ico{color:var(--p)}.card h3{margin:10px 0 4px}.card p{color:var(--mut);margin:0}
@media(max-width:760px){.cards3{grid-template-columns:1fr}}
.round{border-radius:24px}
.about h2.center{margin-top:20px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.timeline div{border-left:3px solid var(--a);padding:6px 14px;background:var(--bg);border-radius:0 12px 12px 0}
.timeline b{color:var(--p);font-size:22px}.timeline p{margin:0;color:var(--mut);font-size:15px}
@media(max-width:760px){.timeline{grid-template-columns:1fr 1fr}}
.contact-list{list-style:none;padding:0;display:grid;gap:12px}
.contact-list li{display:flex;gap:14px;background:var(--bg);border-radius:14px;padding:14px 16px}.contact-list .ico{color:var(--p);margin-top:3px}.contact-list span{display:block;color:var(--mut)}
.contact-form,.zk-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh);display:grid;gap:14px}
.contact-form label,.zk-grid label{display:grid;gap:6px;font-weight:600;font-size:15px}
.contact-form input,.contact-form select,.contact-form textarea,.zk-grid input{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;width:100%;background:#fff}
.contact-form input:focus,.zk-grid input:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 3px rgba(22,100,90,.15)}
.zakat{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.zk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zk-grid .neg input{border-color:#f3c6c6}.zk-grid .nisab{grid-column:1/-1}
.zk-out{background:linear-gradient(160deg,var(--p),var(--dd));color:#fff;border-radius:var(--r);padding:28px;display:grid;gap:4px;position:sticky;top:96px}
.zk-out b{font-size:28px;color:#fff;margin-bottom:10px}.zk-out b.big{font-size:42px;color:var(--a)}
.zk-msg{background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;margin:6px 0 14px}
@media(max-width:860px){.zakat{grid-template-columns:1fr}.zk-grid{grid-template-columns:1fr}.zk-out{position:static}}
/* plugin output harmonising (light touch) */
.charityglow-campaigns-grid,.charityglow-donation-form-wrapper{font-family:inherit}
.faq+.center{margin-top:22px}
.charityglow-campaigns-grid{display:grid!important;gap:22px;grid-template-columns:1fr!important}
@media(min-width:700px){.charityglow-campaigns-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:1024px){.charityglow-campaigns-grid.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.charityglow-campaigns-grid>*{width:auto!important;max-width:none!important;margin:0!important}
.demo-cred{max-width:1000px;margin:0 auto 22px;background:#fff8e6;border:1px dashed var(--accent,#F5A623);border-radius:14px;padding:16px 20px}.demo-cred h3{margin:0 0 6px}.demo-cred code{background:#fff;padding:2px 8px;border-radius:6px;font-weight:700}
.cg-dd{font-family:inherit}

.hero-art img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
.lay img,.about img.round{object-fit:cover;aspect-ratio:4/3;width:100%;height:auto}
.tile--photo{position:relative;overflow:hidden;padding-top:0!important}
.tile--photo .tp{display:block;height:110px;margin:0 -16px 12px;background:center/cover no-repeat;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.tile--photo .ti{margin-top:-34px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.credits{margin-top:40px;font-size:14px}.credits ul{padding-left:18px;line-height:1.7}.credits a{color:inherit}