/* indomaret.css — halaman SEDEKAH INDOMARET · LAZISMU Mandailing Natal
   Gaya: modern terang (light), aksen oranye–keemasan, kartu kaca lembut. */
:root{
  --idm: #EE7B1A; --idm2: #F5A524; --idm3: #FFD77A; --emas: #C8912A;
  --tinta: #241304; --tinta2: #6B4A22; --kaca: rgba(255,255,255,.78);
  --biru: #0F7B6C; --merah: #C0392B; --hijau: #1F7A4D;
  --bg1: #FFF9F1; --bg2: #FFF3E2; --garis: rgba(200,145,42,.22);
  --bayang: 0 10px 30px rgba(180,110,20,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body.idm{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);color:var(--tinta);min-height:100vh}
body.idm a{color:inherit;text-decoration:none}
.idm-bungkus{max-width:820px;margin:0 auto;padding:14px 14px 96px}
/* ---------- kepala ---------- */
.idm-kepala{display:flex;align-items:center;gap:10px;padding:6px 2px 12px}
.idm-kepala .logo{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#FFF3D6,var(--idm3));border:1px solid var(--garis);box-shadow:0 6px 16px rgba(238,123,26,.25);font-size:20px}
.idm-kepala .teks{display:flex;flex-direction:column;line-height:1.2}
.idm-kepala .teks b{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.idm-kepala .teks span{font-size:11.5px;color:var(--tinta2);font-weight:600}
.idm-kembali{margin-left:auto;font-size:12px;font-weight:800;color:var(--idm);background:var(--kaca);border:1px solid var(--garis);padding:8px 12px;border-radius:999px}
/* ---------- hero ---------- */
.idm-hero{position:relative;overflow:hidden;border-radius:22px;padding:16px 16px 14px;background:linear-gradient(150deg,#FFF6E7 0%,#FFE9C9 55%,#FFDCB0 100%);border:1px solid var(--garis);box-shadow:var(--bayang)}
.idm-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 34%);pointer-events:none}
.idm-hero h1{margin:0 0 2px;font-size:16.5px;font-weight:900;letter-spacing:-.3px}
.idm-hero .sub{font-size:11.8px;color:var(--tinta2);font-weight:600;margin-bottom:12px}
.idm-angka{display:grid;grid-template-columns:1fr 1fr;gap:9px;position:relative;z-index:2}
.idm-kotak-angka{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:15px;padding:10px 11px;box-shadow:0 4px 14px rgba(190,120,30,.10)}
.idm-kotak-angka small{display:block;font-size:10.6px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--emas);margin-bottom:3px}
.idm-kotak-angka b{font-size:17px;font-weight:900;letter-spacing:-.5px;display:block}
.idm-kotak-angka i{font-size:10.8px;font-style:normal;color:var(--tinta2);font-weight:600}
.idm-pita{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;position:relative;z-index:2}
.idm-pita span{background:rgba(255,255,255,.75);border:1px solid var(--garis);border-radius:999px;padding:5px 10px;font-size:10.8px;font-weight:800;color:var(--tinta2)}
/* ---------- pintasan ---------- */
.idm-jalan{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.idm-jalan button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 3px;border-radius:16px;background:var(--kaca);border:1px solid var(--garis);box-shadow:0 4px 12px rgba(190,120,30,.08);font:800 10.8px/1.2 inherit;color:var(--tinta)}
.idm-jalan button i{font-style:normal;font-size:19px}
.idm-jalan button.on{border-color:var(--idm);box-shadow:0 6px 18px rgba(238,123,26,.24)}
/* ---------- tab ---------- */
.idm-tab{display:flex;gap:6px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.idm-tab::-webkit-scrollbar{display:none}
.idm-tab button{white-space:nowrap;border:1px solid var(--garis);background:var(--kaca);color:var(--tinta2);font:800 12px/1 inherit;padding:9px 13px;border-radius:999px}
.idm-tab button.on{background:linear-gradient(135deg,var(--idm),var(--idm2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(238,123,26,.3);background-origin:border-box;background-clip:border-box}
/* ---------- kartu ---------- */
.idm-kartu{background:var(--kaca);border:1px solid var(--garis);border-radius:18px;padding:14px;box-shadow:0 6px 20px rgba(190,120,30,.08);margin-top:12px}
.idm-kartu h3{margin:0 0 10px;font-size:13.6px;font-weight:900;display:flex;align-items:center;gap:7px}
.idm-kartu h3 small{margin-left:auto;font-size:10.6px;font-weight:700;color:var(--tinta2)}
.idm-baris{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--garis)}
.idm-baris:last-child{border-bottom:0}
.idm-baris .kiri{display:flex;flex-direction:column;gap:2px;min-width:0}
.idm-baris .kiri b{font-size:12.6px;font-weight:800;overflow-wrap:break-word}
.idm-baris .kiri span{font-size:10.8px;color:var(--tinta2);font-weight:600}
.idm-baris .kanan{text-align:right;white-space:nowrap}
.idm-baris .kanan b{font-size:12.8px;font-weight:900;display:block}
.idm-baris .kanan span{font-size:10.4px;color:var(--tinta2);font-weight:700}
@media(max-width:380px){.idm-angka{grid-template-columns:1fr}.idm-kotak-angka b{font-size:16px}}

/* ---------- peta gerai ---------- */
#idmPeta{height:280px;border-radius:16px;border:1px solid var(--garis);overflow:hidden;background:#FFF6E8}
#idmPeta .leaflet-container{font:inherit}
.idm-tanda{background:linear-gradient(135deg,var(--idm),var(--idm2));color:#fff;border-radius:999px;padding:4px 8px;font:800 11px/1 inherit;box-shadow:0 4px 12px rgba(238,123,26,.35);white-space:nowrap}
/* ---------- petak gerai ---------- */
.idm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.idm-gerai{border:1px solid var(--garis);border-radius:15px;padding:11px;background:linear-gradient(168deg,#FFFDF9,#FFF4E4);display:flex;flex-direction:column;gap:5px;cursor:pointer;position:relative;overflow:hidden}
.idm-gerai .no{position:absolute;right:8px;top:7px;font-size:10px;font-weight:900;color:var(--emas);background:rgba(255,255,255,.85);border:1px solid var(--garis);border-radius:999px;padding:2px 6px}
.idm-gerai b{font-size:12.2px;font-weight:800;padding-right:34px;line-height:1.25}
.idm-gerai .kec{font-size:10.5px;color:var(--tinta2);font-weight:700}
.idm-gerai .rp{font-size:13.4px;font-weight:900;color:var(--idm)}
.idm-gerai .kaki{font-size:10.3px;color:var(--tinta2);font-weight:700;display:flex;gap:6px;flex-wrap:wrap}
/* ---------- tombol ---------- */
.idm-tbl{display:block;width:100%;border:0;border-radius:14px;padding:13px;font:900 13.4px/1 inherit;color:#fff;background:linear-gradient(135deg,var(--idm),var(--idm2));box-shadow:0 8px 20px rgba(238,123,26,.3);cursor:pointer}
.idm-tbl.putih{background:#fff;color:var(--idm);border:1.5px solid var(--idm);box-shadow:none}
.idm-tbl.hijau{background:linear-gradient(135deg,#0F7B6C,#14A88F);box-shadow:0 8px 20px rgba(15,123,108,.26)}
.idm-tbl:disabled{opacity:.55}
.idm-tbl2{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--garis);background:#fff;border-radius:999px;padding:8px 12px;font:800 11.6px/1 inherit;color:var(--tinta2);cursor:pointer}
/* ---------- pilihan ---------- */
.idm-pil{display:flex;flex-wrap:wrap;gap:7px}
.idm-pil button{border:1px solid var(--garis);background:#fff;border-radius:13px;padding:9px 11px;font:800 11.6px/1.15 inherit;color:var(--tinta);cursor:pointer;text-align:left}
.idm-pil button.on{border-color:var(--idm);background:#FFF3E2;box-shadow:0 4px 12px rgba(238,123,26,.18)}
.idm-pil.nominal button{min-width:74px;text-align:center}
.idm-isian{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.idm-isian label{font-size:11px;font-weight:800;color:var(--tinta2)}
.idm-isian input,.idm-isian select,.idm-isian textarea{font:700 13px/1.3 inherit;padding:11px;border-radius:12px;border:1px solid var(--garis);background:#fff;color:var(--tinta);width:100%}
.idm-2kolom{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* ---------- struk ---------- */
.idm-struk{margin-top:12px;border:1.5px dashed var(--idm);border-radius:16px;padding:14px;background:linear-gradient(180deg,#FFFDF8,#FFF6E9)}
.idm-struk h4{margin:0 0 8px;font-size:13px;font-weight:900;text-align:center}
.idm-struk .barkod{border-top:1px dashed var(--garis);border-bottom:1px dashed var(--garis);padding:8px 0;margin:8px 0;font:800 12.4px/1.5 'Courier New',monospace;text-align:center;letter-spacing:.6px}
.idm-ucap{margin-top:10px;font-size:11.6px;font-style:italic;color:var(--tinta2);text-align:center;line-height:1.5}
/* ---------- grafik ---------- */
.idm-grafik{display:flex;align-items:flex-end;gap:5px;height:150px;padding:8px 2px 0;overflow-x:auto}
.idm-grafik .btg{flex:1 0 auto;min-width:22px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.idm-grafik .btg i{width:100%;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--idm2),var(--idm));box-shadow:0 3px 10px rgba(238,123,26,.25);min-height:4px}
.idm-grafik .btg s{font-size:9.6px;text-decoration:none;font-weight:800;color:var(--tinta2);white-space:nowrap}
.idm-grafik .btg em{font-size:9.4px;font-style:normal;font-weight:700;color:var(--emas)}
/* ---------- lencana & bilah ---------- */
.idm-lencana{display:inline-block;font:800 10px/1 inherit;padding:4px 8px;border-radius:999px;background:#FFF3E2;color:var(--emas);border:1px solid var(--garis)}
.idm-lencana.hijau{background:#E9F7F1;color:#0F7B6C;border-color:rgba(15,123,108,.25)}
.idm-bilah{height:9px;border-radius:999px;background:#F2E4CE;overflow:hidden;margin:7px 0 4px}
.idm-bilah i{display:block;height:100%;background:linear-gradient(90deg,var(--idm),var(--idm2),var(--idm3))}
.idm-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.idm-foto img{width:100%;height:78px;object-fit:cover;border-radius:11px;border:1px solid var(--garis)}
/* ---------- umpan ---------- */
.idm-umpan{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}
.idm-umpan .isib{padding:9px 10px;border-radius:13px;background:#fff;border:1px solid var(--garis)}
.idm-umpan .isib b{font-size:11.8px;font-weight:800;display:block}
.idm-umpan .isib span{font-size:10.6px;color:var(--tinta2);font-weight:600}
.idm-umpan .isib s{font-size:9.8px;text-decoration:none;color:var(--emas);font-weight:800;float:right}
/* ---------- lain-lain ---------- */
.idm-kosong{text-align:center;padding:18px 8px;color:var(--tinta2);font-size:12px;font-weight:600}
.idm-muat{text-align:center;padding:16px;font-size:12px;color:var(--tinta2);font-weight:700}
.idm-tutup{font-size:11px;color:var(--tinta2);text-align:center;line-height:1.6;margin-top:18px;font-weight:600}
.idm-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#241304;color:#fff;font:800 12px/1.3 inherit;padding:11px 15px;border-radius:13px;box-shadow:0 10px 26px rgba(0,0,0,.28);z-index:99;max-width:88vw;text-align:center}