/* ============================================================
   NGO Derma Manager — Public CSS v1.1
   ============================================================ */
:root {
    --ndm-hijau:     #2ecc71;
    --ndm-hijau-drk: #27ae60;
    --ndm-biru:      #3498db;
    --ndm-putih:     #ffffff;
    --ndm-kelabu:    #f5f6fa;
    --ndm-teks:      #2d3436;
    --ndm-teks-muda: #636e72;
    --ndm-border:    #dfe6e9;
    --ndm-radius:    12px;
    --ndm-bayang:    0 4px 20px rgba(0,0,0,0.08);
}

/* ── Grid ───────────────────────────────────────────────────── */
.ndm-grid-wrapper { max-width:1200px; margin:0 auto; padding:20px; }
.ndm-filter-bar { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.ndm-filter-bar select { padding:10px 16px; border:2px solid var(--ndm-border); border-radius:8px; font-size:14px; background:var(--ndm-putih); cursor:pointer; color:var(--ndm-teks); font-weight:500; }
.ndm-filter-bar select:focus { outline:none; border-color:var(--ndm-hijau); }

.ndm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ── Kad ────────────────────────────────────────────────────── */
.ndm-kad { background:var(--ndm-putih); border-radius:var(--ndm-radius); box-shadow:var(--ndm-bayang); overflow:hidden; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; }
.ndm-kad:hover { transform:translateY(-5px); box-shadow:0 10px 32px rgba(0,0,0,0.13); }

/* ── Gambar Kad — clickable ─────────────────────────────────── */
.ndm-kad__gambar-link { display:block; text-decoration:none; }
.ndm-kad__gambar { position:relative; overflow:hidden; height:200px; background:var(--ndm-kelabu); }
.ndm-kad__gambar img { width:100%; height:100%; object-fit:cover; transition:transform .35s; display:block; }
.ndm-kad:hover .ndm-kad__gambar img { transform:scale(1.06); }
.ndm-kad__gambar--empty { display:flex; align-items:center; justify-content:center; }

/* ── Badge Kategori ─────────────────────────────────────────── */
.ndm-badge { position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(4px); padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.ndm-badge--kategori { background:rgba(46,204,113,.85); }

/* ── Body Kad ───────────────────────────────────────────────── */
.ndm-kad__body { padding:18px; flex:1; display:flex; flex-direction:column; gap:10px; }
.ndm-ngo-info { display:flex; align-items:center; gap:8px; }
.ndm-ngo-logo { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.ndm-ngo-nama { font-size:12px; color:var(--ndm-teks-muda); font-weight:600; }
.ndm-kad__tajuk { margin:0; font-size:16px; line-height:1.4; }
.ndm-kad__tajuk a { color:var(--ndm-teks); text-decoration:none; }
.ndm-kad__tajuk a:hover { color:var(--ndm-hijau); }
.ndm-kad__cerita { font-size:13px; color:var(--ndm-teks-muda); margin:0; line-height:1.6; }

/* ── Progress ───────────────────────────────────────────────── */
.ndm-progress { margin-top:auto; }
.ndm-progress__bar { height:8px; background:var(--ndm-kelabu); border-radius:100px; overflow:hidden; margin-bottom:8px; }
.ndm-progress__fill { height:100%; background:linear-gradient(90deg,var(--ndm-hijau),var(--ndm-biru)); border-radius:100px; transition:width .6s; }
.ndm-progress__info { display:flex; justify-content:space-between; font-size:12px; }
.ndm-progress__info .ndm-label { display:block; color:var(--ndm-teks-muda); font-size:11px; }
.ndm-progress__info strong { color:var(--ndm-teks); font-size:13px; }
.ndm-peratus strong { color:var(--ndm-hijau); font-size:14px; }
.ndm-penderma-count { font-size:12px; color:var(--ndm-teks-muda); margin:0; }

/* ── Butang ─────────────────────────────────────────────────── */
.ndm-btn { display:inline-block; padding:10px 20px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none; text-align:center; cursor:pointer; transition:background .2s,transform .1s; border:none; }
.ndm-btn--derma { background:var(--ndm-hijau); color:var(--ndm-putih); width:100%; box-sizing:border-box; }
.ndm-btn--derma:hover { background:var(--ndm-hijau-drk); color:#fff; transform:scale(1.02); }
.ndm-btn--submit { background:var(--ndm-hijau); color:var(--ndm-putih); width:100%; padding:14px; font-size:16px; box-sizing:border-box; border-radius:8px; cursor:pointer; }
.ndm-btn--submit:hover { background:var(--ndm-hijau-drk); }
.ndm-btn--submit:disabled { background:#aaa; cursor:not-allowed; }

/* ── Halaman Single ─────────────────────────────────────────── */
.ndm-single { max-width:1100px; margin:0 auto; padding:20px; }
.ndm-single__gambar { width:100%; max-height:420px; object-fit:cover; border-radius:var(--ndm-radius); margin-bottom:30px; }
.ndm-single__layout { display:grid; grid-template-columns:1fr 380px; gap:40px; }
.ndm-cerita { line-height:1.85; font-size:15px; color:var(--ndm-teks); }
.ndm-cerita img { max-width:100%; border-radius:8px; margin:10px 0; }

/* Progress besar */
.ndm-progress--besar { background:var(--ndm-putih); padding:20px; border-radius:var(--ndm-radius); box-shadow:var(--ndm-bayang); margin-bottom:20px; }
.ndm-progress--besar .ndm-progress__bar { height:14px; margin-bottom:16px; }
.ndm-progress__stats { display:flex; justify-content:space-between; text-align:center; }
.ndm-progress__stats div { display:flex; flex-direction:column; }
.ndm-progress__stats strong { font-size:18px; color:var(--ndm-teks); }
.ndm-progress__stats span { font-size:12px; color:var(--ndm-teks-muda); margin-top:2px; }

/* Donor Wall */
.ndm-donor-wall { margin-top:30px; }
.ndm-donor-list { list-style:none; padding:0; margin:0; }
.ndm-donor-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--ndm-border); }
.ndm-donor-avatar { font-size:20px; }
.ndm-donor-nama { flex:1; font-size:14px; }
.ndm-donor-jumlah { font-weight:700; color:var(--ndm-hijau); }

/* ── QR Code ────────────────────────────────────────────────── */
.ndm-qr-wrapper { text-align:center; margin-bottom:20px; padding:16px; background:#f0fff4; border-radius:12px; border:2px dashed var(--ndm-hijau); }
.ndm-qr-label { font-weight:600; color:var(--ndm-teks); margin-bottom:10px; font-size:14px; }
.ndm-qr-box { display:inline-block; padding:10px; background:white; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.ndm-qr-img { width:180px; height:180px; object-fit:contain; display:block; }
.ndm-qr-atau { font-size:12px; color:var(--ndm-teks-muda); margin-top:12px; }

/* ── Borang Derma ───────────────────────────────────────────── */
.ndm-borang-wrapper { background:var(--ndm-putih); padding:24px; border-radius:var(--ndm-radius); box-shadow:var(--ndm-bayang); position:sticky; top:20px; }
.ndm-borang-wrapper h3 { margin-top:0; }
.ndm-jumlah-pilihan { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ndm-btn-jumlah { flex:1; padding:10px; border:2px solid var(--ndm-border); border-radius:8px; cursor:pointer; font-weight:700; font-size:14px; background:var(--ndm-putih); color:var(--ndm-teks); transition:all .2s; }
.ndm-btn-jumlah:hover,.ndm-btn-jumlah.active { border-color:var(--ndm-hijau); color:var(--ndm-hijau); background:#f0fff4; transform:scale(1.03); }
.ndm-field { margin-bottom:14px; }
.ndm-field label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--ndm-teks); }
.ndm-field input[type="text"],.ndm-field input[type="email"],.ndm-field input[type="tel"],.ndm-field input[type="number"] { width:100%; padding:10px 12px; border:1px solid var(--ndm-border); border-radius:8px; font-size:14px; box-sizing:border-box; transition:border-color .2s; color:var(--ndm-teks); }
.ndm-field input:focus { outline:none; border-color:var(--ndm-hijau); }
.ndm-field--checkbox label { font-weight:400; display:flex; align-items:center; gap:8px; }

/* Alert */
.ndm-alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.ndm-alert--berjaya { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.ndm-alert--gagal   { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.ndm-tiada { color:var(--ndm-teks-muda); text-align:center; padding:40px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:960px) {
    .ndm-grid { grid-template-columns:repeat(2,1fr); }
    .ndm-single__layout { grid-template-columns:1fr; }
    .ndm-single__kanan { position:static; }
    .ndm-qr-img { width:160px; height:160px; }
}
@media (max-width:600px) {
    .ndm-grid { grid-template-columns:1fr; }
    .ndm-filter-bar { flex-direction:column; }
    .ndm-filter-bar select { width:100%; }
    .ndm-kad__gambar { height:220px; }
    .ndm-borang-wrapper { padding:16px; }
    .ndm-qr-img { width:140px; height:140px; }
    .ndm-progress__stats strong { font-size:15px; }
}

/* ── QR Overlay pada Kad ────────────────────────────────────── */
.ndm-kad__gambar-wrapper { position:relative; }

.ndm-kad__qr-overlay {
    position:absolute; top:10px; right:10px; z-index:10;
}
.ndm-kad__qr-link { display:block; text-decoration:none; }
.ndm-kad__qr-box {
    background:white; border-radius:8px;
    padding:6px 6px 4px;
    box-shadow:0 2px 12px rgba(0,0,0,0.25);
    text-align:center;
    transition:transform .2s, box-shadow .2s;
    width:72px;
}
.ndm-kad__qr-box:hover { transform:scale(1.08); box-shadow:0 4px 20px rgba(0,0,0,0.35); }
.ndm-kad__qr-img { width:60px; height:60px; object-fit:contain; display:block; }
.ndm-kad__qr-label {
    display:block; font-size:7px; font-weight:700;
    color:#555; margin-top:3px; letter-spacing:0.3px;
    line-height:1.2;
}

/* QR Lightbox (desktop) */
.ndm-qr-lightbox {
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    display:flex; align-items:center; justify-content:center;
    z-index:99999; backdrop-filter:blur(4px);
}
.ndm-qr-lightbox__inner {
    background:#fff; border-radius:16px; padding:30px;
    text-align:center; max-width:320px; width:90%;
    position:relative; box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.ndm-qr-lightbox__inner img { width:240px; height:240px; object-fit:contain; display:block; margin:0 auto 12px; }
.ndm-qr-lightbox__inner p { font-weight:600; color:#333; margin:0 0 12px; font-size:14px; }
.ndm-qr-lightbox__tutup {
    position:absolute; top:12px; right:14px;
    background:none; border:none; font-size:20px;
    cursor:pointer; color:#999; line-height:1;
}
.ndm-qr-lightbox__tutup:hover { color:#333; }

/* ── Donor Wall Baru ────────────────────────────────────────── */
.ndm-donor-wall { margin-top:28px; background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.ndm-donor-wall__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ndm-donor-wall__header h3 { margin:0; font-size:16px; color:#2d3436; }
.ndm-donor-badge { background:#2ecc71; color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }

.ndm-donor-list { list-style:none; padding:0; margin:0; }
.ndm-donor-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f1f2f6; }
.ndm-donor-item:last-child { border-bottom:none; }
.ndm-donor-avatar { font-size:22px; flex-shrink:0; }
.ndm-donor-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.ndm-donor-nama { font-size:14px; font-weight:600; color:#2d3436; }
.ndm-donor-masa { font-size:11px; color:#b2bec3; }
.ndm-donor-jumlah { font-weight:700; color:#27ae60; font-size:14px; white-space:nowrap; }

.ndm-donor-empty { text-align:center; padding:30px 20px; color:#b2bec3; }
.ndm-donor-empty span { font-size:36px; display:block; margin-bottom:8px; }
.ndm-donor-empty p { margin:0; font-size:14px; }

/* Load More */
.ndm-load-more-wrapper { text-align:center; padding:16px 0 4px; }
.ndm-btn-load-more {
    background:none; border:2px solid #dfe6e9;
    color:#636e72; padding:10px 24px;
    border-radius:30px; font-size:13px; font-weight:600;
    cursor:pointer; transition:all .2s;
}
.ndm-btn-load-more:hover { border-color:#2ecc71; color:#27ae60; background:#f0fff4; }
.ndm-btn-load-more:disabled { opacity:.6; cursor:not-allowed; }

/* ── Mobile QR ──────────────────────────────────────────────── */
@media (max-width:600px) {
    .ndm-kad__qr-box { width:60px; }
    .ndm-kad__qr-img { width:48px; height:48px; }
    .ndm-kad__qr-label { font-size:6px; }
}