:root{ --saffron:#e2711d; --gold:#d9a94e; --deep:#a8410b; --cream:#fff7ec; --ink:#3a2410; --green:#1f8a4c; }
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:'Segoe UI',system-ui,Roboto,sans-serif; color:var(--ink); line-height:1.5;
  background:var(--cream);
  background-image:radial-gradient(circle at 10% 6%, rgba(226,113,29,.07) 0 12%, transparent 12%),radial-gradient(circle at 90% 18%, rgba(217,169,78,.10) 0 10%, transparent 10%);
  padding-bottom:calc(74px + env(safe-area-inset-bottom));}

#tab-donate{padding-bottom:calc(90px + env(safe-area-inset-bottom));}

.sharebtn{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.22); color:#fff; border:1.5px solid rgba(255,255,255,.6); border-radius:20px; padding:6px 12px; font-size:13px; font-weight:800; cursor:pointer; z-index:5}

/* language: default Hindi -> hide English */
.en{display:none} body.lang-en .en{display:inline} body.lang-en .hi{display:none}
.langbtn{position:absolute; top:14px; right:14px; background:rgba(255,255,255,.22); color:#fff; border:1.5px solid rgba(255,255,255,.6); border-radius:20px; padding:6px 12px; font-size:13px; font-weight:800; cursor:pointer; z-index:5}

header{background:linear-gradient(135deg,var(--saffron),var(--deep)); color:#fff; text-align:center; padding:20px 16px 22px; border-radius:0 0 28px 28px; box-shadow:0 8px 22px rgba(168,65,11,.28); position:relative; overflow:hidden}
header::after{content:"🕉️"; position:absolute; font-size:150px; opacity:.06; right:-10px; top:-20px}
header .om{font-size:28px}
header h1{margin:4px 0 2px; font-size:22px; font-weight:800}
header h2{margin:0; font-size:13px; font-weight:500; opacity:.95}
header .loc{margin-top:9px; font-size:12.5px; background:rgba(255,255,255,.2); display:inline-block; padding:4px 12px; border-radius:20px}
header .prez{margin-top:8px; font-size:12.5px; font-weight:700}
header .prez b{background:#fff; color:var(--deep); padding:2px 10px; border-radius:14px}

.topnav{display:none}
.wrap{max-width:520px; margin:0 auto; padding:0}
.content{padding:4px 0 12px}
.tab{display:none; animation:fade .35s ease both}
.tab.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.card{background:#fff; margin:14px; border-radius:18px; padding:16px; box-shadow:0 5px 18px rgba(120,70,20,.09)}
.sec-title{font-size:15px; font-weight:800; color:var(--deep); margin:0 0 8px; display:flex; align-items:center; gap:8px}
.sec-title small,.sec-title .en{font-weight:500; opacity:.75}

.photo{width:100%; border-radius:14px; display:block; aspect-ratio:3/3.4; object-fit:contain; background:radial-gradient(circle at 50% 35%, #ffe9b8, #f0932b)}

.video-frame{background:linear-gradient(135deg,#2a1608,#000); padding:10px; border-radius:16px; border:2px solid var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.25)}
.video-frame video{width:100%; height:56vw; max-height:70vh; border-radius:10px; display:block; background:#000; object-fit:contain}
.video-cap{display:flex; align-items:center; justify-content:center; gap:8px; color:#ffdf9e; font-weight:700; font-size:13px; margin-top:8px}

.map{width:100%; height:260px; border:0; border-radius:14px; display:block}

.gal{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gal .g-item{position:relative; border-radius:12px; overflow:hidden; background:#f6e6c8; aspect-ratio:1/1; box-shadow:0 3px 10px rgba(120,70,20,.12)}
.gal .g-item img{width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; transition:.2s}
.gal .g-item img:hover{transform:scale(1.05)}
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px}
.lightbox img{max-width:100%; max-height:100%; border-radius:10px}

.amt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px}
.amt-btn{border:2px solid var(--gold); background:#fff; border-radius:12px; padding:10px 4px; font-size:16px; font-weight:800; color:var(--deep); cursor:pointer; transition:.15s}
.amt-btn.active{background:var(--saffron); color:#fff; border-color:var(--saffron); transform:scale(1.05); box-shadow:0 4px 12px rgba(226,113,29,.35)}
label{font-size:13px; font-weight:700; display:block; margin:8px 0 4px}
label .en{font-weight:500; opacity:.7}
input{width:100%; padding:11px 12px; font-size:16px; border:2px solid #e4d5bd; border-radius:12px; outline:none; background:#fffdf9}
input:focus{border-color:var(--saffron)}
.err{color:#c0271a; font-size:12.5px; margin-top:5px; font-weight:600}

.prez-card{background:linear-gradient(135deg,#fff6e4,#ffe9c6); border:1.5px solid var(--gold); border-radius:12px; padding:8px 12px; margin-bottom:10px; font-size:13px; display:flex; align-items:center; gap:8px}
.prez-card .t{font-weight:800; color:var(--deep); font-size:15px}

.pay-btn{display:block; width:100%; text-align:center; text-decoration:none; background:linear-gradient(135deg,var(--saffron),var(--deep)); color:#fff; font-size:18px; font-weight:800; padding:15px; border:none; border-radius:14px; margin-top:10px; cursor:pointer; box-shadow:0 6px 16px rgba(226,113,29,.35)}
.pay-btn.gpay{background:linear-gradient(135deg,#1a73e8,#0b57d0); box-shadow:0 6px 16px rgba(26,115,232,.35)}
.pay-btn:active{transform:translateY(1px)}
.ghost{display:block; text-align:center; text-decoration:none; color:var(--deep); font-weight:700; border:2px solid var(--gold); border-radius:12px; padding:12px; margin-top:10px; cursor:pointer; background:none; width:100%; font-size:15px}
@media(max-width:899px){
  #tab-donate .card{padding-bottom:120px;}
  .amt-grid{display:none;}
  #tab-donate .pay-actions{position:relative; left:auto; right:auto; bottom:auto; z-index:auto; background:transparent; padding:0; box-shadow:none; margin-top:10px;}
  #tab-donate .pay-actions .note{margin-top:8px;}
}
.link-btn{display:inline-block; text-decoration:none; background:var(--green); color:#fff; font-weight:700; padding:10px 16px; border-radius:10px; margin-top:12px; font-size:14px}
.note{font-size:12.5px; color:#7a5a2e; margin-top:10px}

.verify{background:#fff3cd; border:1.5px solid var(--gold); border-radius:12px; padding:12px; margin:12px 0; font-size:13.5px}
.verify b{color:var(--deep)}
.payee{font-size:22px; font-weight:900; color:var(--deep); text-align:center; margin:4px 0}
.amount-big{text-align:center; font-size:32px; font-weight:900; color:var(--saffron); margin:4px 0}
.qr-box{text-align:center}
.qr-box img{width:230px; height:230px; border:8px solid #fff; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.12)}
.qr-dl{display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; max-width:260px; text-decoration:none; background:linear-gradient(135deg,var(--saffron),var(--deep)); color:#fff; font-size:16px; font-weight:800; padding:12px 16px; border-radius:12px; margin:10px auto 0; box-shadow:0 5px 14px rgba(226,113,29,.35)}
.qr-dl:active{transform:translateY(1px)}
.qr-help{max-width:300px; margin-left:auto; margin-right:auto}
footer{text-align:center; font-size:12px; color:#9a7a4e; padding:14px 14px 4px}

.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:space-around;
  background:#fff; border-top:1px solid #f0dcc0; box-shadow:0 -4px 18px rgba(120,70,20,.12); padding:8px 2px calc(8px + env(safe-area-inset-bottom));}
.navbtn{flex:1; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; color:#a98b63; font-size:10.5px; font-weight:700; padding:4px 2px}
.navbtn .ic{font-size:20px; line-height:1; transition:.15s}
.navbtn.active{color:var(--saffron)}
.navbtn.active .ic{transform:translateY(-3px) scale(1.15)}
.navbtn.donate-cta{color:var(--deep)}
.navbtn.donate-cta .ic{background:linear-gradient(135deg,var(--saffron),var(--deep)); color:#fff; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:-22px; box-shadow:0 6px 14px rgba(226,113,29,.45); border:3px solid #fff}

.admin-tbl{width:100%; border-collapse:collapse; font-size:13px}
.admin-tbl th,.admin-tbl td{border:1px solid var(--gold); padding:7px}
.admin-tbl th{background:var(--saffron); color:#fff}

@media(min-width:900px){
  body{padding-bottom:0}
  .bottomnav{display:none}
  .wrap{max-width:1040px; padding:0 20px}
  .topnav{display:flex; justify-content:center; gap:8px; margin:16px 0 4px; flex-wrap:wrap}
  .topnav button{background:#fff; border:2px solid var(--gold); color:var(--deep); font-weight:700; padding:9px 16px; border-radius:30px; cursor:pointer; font-size:14px}
  .topnav button.active{background:var(--saffron); color:#fff; border-color:var(--saffron)}
  .tab{display:block!important; animation:none}
  .content{display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start;
    grid-template-areas:"photo donate" "gallery donate" "video donate" "location donate"; padding:10px 0 40px}
  #tab-home{grid-area:photo} #tab-gallery{grid-area:gallery} #tab-video{grid-area:video} #tab-location{grid-area:location}
  #tab-donate{grid-area:donate; position:sticky; top:16px}
  .card{margin:0}
  .photo{aspect-ratio:auto; max-height:460px}
  .video-frame video{height:auto; aspect-ratio:16/9}
  .qr-box img{width:200px; height:200px}
}