/* RESET DAN ISOLASI CSS - CRITICAL */
.dsf-campaign-wrapper {
    /* all: initial;  Removed: too aggressive, breaks form & layout */
    font-family: 'Poppins', sans-serif !important;
    display: block !important;
    isolation: isolate !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.dsf-campaign-wrapper *:not(i):not(.fas):not(.fab):not(.far):not(.fa) {
    box-sizing: border-box !important;
    font-family: 'Poppins', sans-serif !important;
}


/* Form element safety (minimal) */
.dsf-campaign-wrapper button,
.dsf-campaign-wrapper input,
.dsf-campaign-wrapper select,
.dsf-campaign-wrapper textarea {
    font-family: 'Poppins', sans-serif !important;
}
/* Hide all WordPress theme elements inside our wrapper */
.dsf-campaign-wrapper .entry-header,
.dsf-campaign-wrapper .entry-footer,
.dsf-campaign-wrapper .post-navigation,
.dsf-campaign-wrapper .comments-area,
.dsf-campaign-wrapper .elementor-section,
.dsf-campaign-wrapper .elementor-widget,
.dsf-campaign-wrapper .wp-block-group,
.dsf-campaign-wrapper .site-header,
.dsf-campaign-wrapper .site-footer {
    display: none !important;
}

/* Sembunyikan container default WordPress */
.dsf-campaign-wrapper > .site-content,
.dsf-campaign-wrapper > .content-area,
.dsf-campaign-wrapper > .container,
.dsf-campaign-wrapper > .wrap {
    display: none !important;
}

/* Tampilkan hanya konten campaign kita */
.dsf-campaign-wrapper .dsf-campaign {
    display: block !important;
}

/* CSS dari template HTML - dengan scope */
.dsf-campaign-wrapper .dsf-campaign{
  --dsf-primary:#18438c;
  --dsf-secondary:#379e20;
  --dsf-cta-1:#0e5d3e;
  --dsf-cta-2:#56a42c;
  --dsf-bg:#ffffff;
  --dsf-muted:#6b7280;
  --dsf-text:#0f172a;
  --dsf-border:#e5e7eb;
  --dsf-soft:#f8fafc;
  --dsf-shadow: 0 10px 30px rgba(2,6,23,.08);
  --dsf-shadow-soft: 0 8px 20px rgba(2,6,23,.06);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  color:var(--dsf-text) !important;
  background:var(--dsf-bg) !important;
  line-height:1.55 !important;
}

.dsf-campaign-wrapper .dsf-campaign *{ box-sizing:border-box !important; }
.dsf-campaign-wrapper .dsf-campaign a{ color:var(--dsf-primary) !important; text-decoration:none !important; }
.dsf-campaign-wrapper .dsf-campaign a:hover{ text-decoration:underline !important; }
.dsf-campaign-wrapper .dsf-campaign img{ max-width:100% !important; display:block !important; }

.dsf-campaign-wrapper .dsf-container{
  max-width:1200px !important;
  margin:0 auto !important;
  padding:18px 16px 110px !important;
}

/* Top cover */
.dsf-campaign-wrapper .dsf-cover{
  border:1px solid var(--dsf-border) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:var(--dsf-soft) !important;
  box-shadow:var(--dsf-shadow-soft) !important;
  position:relative !important;
}
.dsf-campaign-wrapper .dsf-cover-media{
  position:relative !important;
  aspect-ratio: 16 / 9 !important;
  background:
    radial-gradient(1200px 400px at 20% 20%, rgba(24,67,140,.18), transparent 60%),
    radial-gradient(900px 350px at 80% 60%, rgba(55,158,32,.18), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02)) !important;
}
.dsf-campaign-wrapper .dsf-cover-badges{
  position:absolute !important;
  left:14px !important; top:14px !important;
  display:flex !important; gap:8px !important; flex-wrap:wrap !important;
  z-index:2 !important;
}
.dsf-campaign-wrapper .dsf-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid var(--dsf-border) !important;
  box-shadow:0 6px 16px rgba(2,6,23,.06) !important;
  font-size:12px !important;
  color:var(--dsf-text) !important;
  white-space:nowrap !important;
}
.dsf-campaign-wrapper .dsf-badge--primary{
  color:var(--dsf-primary) !important;
  border-color:rgba(24,67,140,.25) !important;
  background:rgba(24,67,140,.06) !important;
}
.dsf-campaign-wrapper .dsf-cover-actions{
  position:absolute !important;
  right:14px !important; top:14px !important;
  display:flex !important; gap:8px !important;
  z-index:2 !important;
}
.dsf-campaign-wrapper .dsf-iconbtn{
  border:1px solid var(--dsf-border) !important;
  background:#fff !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  font-size:12px !important;
  cursor:pointer !important;
  box-shadow:0 6px 16px rgba(2,6,23,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.dsf-campaign-wrapper .dsf-iconbtn:hover{
  transform: translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(2,6,23,.10) !important;
}
.dsf-campaign-wrapper .dsf-cover-thumbs{
  display:flex !important;
  gap:10px !important;
  padding:12px !important;
  border-top:1px solid var(--dsf-border) !important;
  background:#fff !important;
  overflow:auto !important;
}
.dsf-campaign-wrapper .dsf-thumb{
  width:110px !important;
  min-width:110px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius:12px !important;
  border:1px solid var(--dsf-border) !important;
  background:
    linear-gradient(135deg, rgba(24,67,140,.10), rgba(55,158,32,.10)) !important;
  cursor:pointer !important;
  transition: transform .18s ease !important;
}
.dsf-campaign-wrapper .dsf-thumb:hover{ transform: translateY(-1px) !important; }
.dsf-campaign-wrapper .dsf-thumb[aria-current="true"]{
  outline:2px solid rgba(24,67,140,.45) !important;
  border-color:rgba(24,67,140,.35) !important;
}

/* Two column layout */
.dsf-campaign-wrapper .dsf-grid{
  display:grid !important;
  grid-template-columns: 1.85fr 1fr !important;
  gap:24px !important;
  margin-top:18px !important;
  align-items:start !important;
}

/* Left header */
.dsf-campaign-wrapper .dsf-breadcrumb{
  font-size:12px !important;
  color:var(--dsf-muted) !important;
  margin:8px 0 10px !important;
}
.dsf-campaign-wrapper .dsf-title{
  font-size:28px !important;
  line-height:1.25 !important;
  margin:0 0 10px !important;
  letter-spacing:-.2px !important;
}
.dsf-campaign-wrapper .dsf-orgbar{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  padding:12px 14px !important;
  border:1px solid var(--dsf-border) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:var(--dsf-shadow-soft) !important;
}
.dsf-campaign-wrapper .dsf-avatar{
  width:44px !important;height:44px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg, rgba(24,67,140,.20), rgba(55,158,32,.20)) !important;
  border:1px solid var(--dsf-border) !important;
  flex:0 0 auto !important;
}

/* Avatar image support (icon from plugin assets) */
.dsf-campaign-wrapper .dsf-avatar.dsf-hasImg{
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.dsf-campaign-wrapper .dsf-avatar.dsf-hasImg img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:6px !important;
  display:block !important;
  filter: drop-shadow(0 2px 6px rgba(2,6,23,.14)) !important;
}

/* Mobile Sheet (Opsi A) */
.dsf-campaign-wrapper .dsf-sheet{ display:none; }
@media (max-width: 767px){
  .dsf-campaign-wrapper .dsf-sheet{
    display:none;
    position:fixed !important;
    inset:0 !important;
    z-index:1200 !important;
  }
  .dsf-campaign-wrapper .dsf-sheet.dsf-open{ display:block !important; }
  .dsf-campaign-wrapper .dsf-sheetBackdrop{
    position:absolute !important;
    inset:0 !important;
    background:rgba(2,6,23,.55) !important;
  }
  .dsf-campaign-wrapper .dsf-sheetPanel{
    position:absolute !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    background:#fff !important;
    border-radius:18px 18px 0 0 !important;
    padding:12px 14px 16px !important;
    border-top:1px solid var(--dsf-border) !important;
    box-shadow: 0 -20px 50px rgba(2,6,23,.20) !important;
  }
  .dsf-campaign-wrapper .dsf-sheetHandle{
    width:44px !important;height:5px !important;
    background:rgba(2,6,23,.16) !important;
    border-radius:999px !important;
    margin:6px auto 10px !important;
  }
  .dsf-campaign-wrapper .dsf-sheetHead{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }
  .dsf-campaign-wrapper .dsf-sheetX{
    border:1px solid var(--dsf-border) !important;
    background:#fff !important;
    border-radius:12px !important;
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
    cursor:pointer !important;
  }
  .dsf-campaign-wrapper .dsf-sheetGrid{
    display:grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:8px !important;
    margin:8px 0 12px !important;
  }
  .dsf-campaign-wrapper .dsf-sheetAmt{
    border:1px solid var(--dsf-border) !important;
    background:rgba(2,6,23,.02) !important;
    border-radius:14px !important;
    padding:12px 10px !important;
    font-weight:800 !important;
    cursor:pointer !important;
  }
  .dsf-campaign-wrapper .dsf-sheetAmt.dsf-active{
    border-color:rgba(24,67,140,.35) !important;
    background:rgba(24,67,140,.08) !important;
    color:var(--dsf-primary) !important;
  }
  .dsf-campaign-wrapper .dsf-sheetField{ margin-top:6px !important; }
}

.dsf-campaign-wrapper .dsf-orgmeta{ flex:1 !important; min-width:0 !important; }
.dsf-campaign-wrapper .dsf-orgname{
  font-weight:600 !important;
  font-size:14px !important;
  margin:0 !important;
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
.dsf-campaign-wrapper .dsf-verified{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:rgba(24,67,140,.08) !important;
  color:var(--dsf-primary) !important;
  border:1px solid rgba(24,67,140,.20) !important;
}
.dsf-campaign-wrapper .dsf-orgsub{
  margin:2px 0 0 !important;
  font-size:12px !important;
  color:var(--dsf-muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.dsf-campaign-wrapper .dsf-metaRow{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin:12px 0 8px !important;
  color:var(--dsf-muted) !important;
  font-size:12px !important;
}
.dsf-campaign-wrapper .dsf-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:1px solid var(--dsf-border) !important;
  background:rgba(2,6,23,.02) !important;
}

/* Sticky tabs (left) */
.dsf-campaign-wrapper .dsf-tabsWrap{
  margin-top:14px !important;
  position:sticky !important;
  top:12px !important;
  z-index:10 !important;
}
.dsf-campaign-wrapper .dsf-tabs{
  display:flex !important;
  gap:8px !important;
  padding:10px !important;
  border-radius:14px !important;
  border:1px solid var(--dsf-border) !important;
  background:#fff !important;
  box-shadow:var(--dsf-shadow-soft) !important;
  overflow:auto !important;
}
.dsf-campaign-wrapper .dsf-tab{
  appearance:none !important;
  border:1px solid transparent !important;
  background:transparent !important;
  padding:9px 12px !important;
  border-radius:12px !important;
  cursor:pointer !important;
  font-size:13px !important;
  color:var(--dsf-muted) !important;
  white-space:nowrap !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.dsf-campaign-wrapper .dsf-tab:hover{
  background:rgba(24,67,140,.06) !important;
  color:var(--dsf-primary) !important;
}
.dsf-campaign-wrapper .dsf-tab[aria-selected="true"]{
  background:rgba(24,67,140,.10) !important;
  color:var(--dsf-primary) !important;
  border-color:rgba(24,67,140,.22) !important;
  font-weight:600 !important;
}

/* Sections (left) */
.dsf-campaign-wrapper .dsf-section{
  margin-top:16px !important;
  padding:16px !important;
  border:1px solid var(--dsf-border) !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:var(--dsf-shadow-soft) !important;
  scroll-margin-top: 86px !important;
}
.dsf-campaign-wrapper .dsf-section h2{
  margin:0 0 10px !important;
  font-size:18px !important;
  letter-spacing:-.1px !important;
}
.dsf-campaign-wrapper .dsf-section p{ margin:0 0 10px !important; color:#111827 !important; }
.dsf-campaign-wrapper .dsf-muted{ color:var(--dsf-muted) !important; }
.dsf-campaign-wrapper .dsf-list{
  margin:10px 0 0 !important;
  padding-left:18px !important;
  color:#111827 !important;
}
.dsf-campaign-wrapper .dsf-inlineMedia{
  margin:12px 0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  border:1px solid var(--dsf-border) !important;
  background:
    linear-gradient(135deg, rgba(24,67,140,.08), rgba(55,158,32,.08)) !important;
  aspect-ratio: 16/9 !important;
}

/* Update cards */
.dsf-campaign-wrapper .dsf-cards{ display:grid !important; gap:10px !important; }
.dsf-campaign-wrapper .dsf-card{
  border:1px solid var(--dsf-border) !important;
  border-radius:14px !important;
  padding:12px !important;
  background:rgba(2,6,23,.02) !important;
}
.dsf-campaign-wrapper .dsf-cardTop{
  display:flex !important; justify-content:space-between !important; gap:10px !important; align-items:center !important;
  font-size:12px !important; color:var(--dsf-muted) !important;
  margin-bottom:6px !important;
}
.dsf-campaign-wrapper .dsf-cardTitle{
  margin:0 !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:#0f172a !important;
}
.dsf-campaign-wrapper .dsf-card p{ margin:6px 0 0 !important; font-size:13px !important; color:#111827 !important; }

/* Donor list */
.dsf-campaign-wrapper .dsf-rowList{ display:grid !important; gap:10px !important; }
.dsf-campaign-wrapper .dsf-row{
  display:flex !important; gap:10px !important; align-items:center !important;
  padding:10px 12px !important;
  border:1px solid var(--dsf-border) !important;
  border-radius:14px !important;
  background:rgba(2,6,23,.02) !important;
}
.dsf-campaign-wrapper .dsf-row .dsf-avatar{ width:38px !important; height:38px !important; border-radius:12px !important; }
.dsf-campaign-wrapper .dsf-rowMain{ flex:1 !important; min-width:0 !important; }
.dsf-campaign-wrapper .dsf-rowName{ margin:0 !important; font-size:13px !important; font-weight:600 !important; }
.dsf-campaign-wrapper .dsf-rowMeta{ margin:2px 0 0 !important; font-size:12px !important; color:var(--dsf-muted) !important; }
.dsf-campaign-wrapper .dsf-rowAmt{ font-size:13px !important; font-weight:600 !important; color:var(--dsf-primary) !important; white-space:nowrap !important; }

/* Prayer item */
.dsf-campaign-wrapper .dsf-prayer{
  display:flex !important; gap:12px !important; align-items:flex-start !important;
  padding:12px !important;
  border:1px solid var(--dsf-border) !important;
  border-radius:14px !important;
  background:rgba(2,6,23,.02) !important;
}
.dsf-campaign-wrapper .dsf-prayerText{ flex:1 !important; }
.dsf-campaign-wrapper .dsf-amiin{
  border:1px solid rgba(24,67,140,.25) !important;
  background:rgba(24,67,140,.08) !important;
  color:var(--dsf-primary) !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  cursor:pointer !important;
  font-size:12px !important;
  font-weight:600 !important;
  transition: transform .18s ease, background .18s ease !important;
  white-space:nowrap !important;
}
.dsf-campaign-wrapper .dsf-amiin:hover{ transform: translateY(-1px) !important; background:rgba(24,67,140,.12) !important; }

/* Right donation card */
.dsf-campaign-wrapper .dsf-side{
  position:sticky !important;
  top:12px !important;
}
.dsf-campaign-wrapper .dsf-donateCard{
  border:1px solid var(--dsf-border) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:var(--dsf-shadow) !important;
  padding:16px !important;
  overflow:hidden !important;
}
.dsf-campaign-wrapper .dsf-donateTop{
  display:flex !important; justify-content:space-between !important; align-items:flex-end !important; gap:10px !important;
  margin-bottom:10px !important;
}
.dsf-campaign-wrapper .dsf-donateTop small{ color:var(--dsf-muted) !important; font-weight:500 !important; }
.dsf-campaign-wrapper .dsf-money{
  font-size:22px !important;
  font-weight:700 !important;
  color:#0f172a !important;
  letter-spacing:-.2px !important;
}
.dsf-campaign-wrapper .dsf-target{
  color:var(--dsf-muted) !important;
  font-size:12px !important;
  margin-top:2px !important;
}
.dsf-campaign-wrapper .dsf-progress{
  height:10px !important;
  background:rgba(2,6,23,.08) !important;
  border-radius:999px !important;
  overflow:hidden !important;
  margin:10px 0 8px !important;
}
.dsf-campaign-wrapper #dsfProgressBar{
  display:block !important;
  height:100% !important;
  width:0% !important;
  background:var(--dsf-primary) !important;
  border-radius:999px !important;
  transition:width 900ms ease !important;
}

.dsf-campaign-wrapper .dsf-donateMeta{
  display:flex !important; justify-content:space-between !important; gap:10px !important;
  color:var(--dsf-muted) !important;
  font-size:12px !important;
  margin-bottom:12px !important;
}

.dsf-campaign-wrapper .dsf-quick{
  margin:12px 0 10px !important;
}
.dsf-campaign-wrapper .dsf-quickLabel{
  font-size:12px !important;
  color:var(--dsf-muted) !important;
  margin:0 0 8px !important;
  font-weight:500 !important;
}
.dsf-campaign-wrapper .dsf-quickGrid{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:8px !important;
}
.dsf-campaign-wrapper .dsf-quickBtn{
  border:1px solid var(--dsf-border) !important;
  background:rgba(2,6,23,.02) !important;
  border-radius:12px !important;
  padding:10px 10px !important;
  cursor:pointer !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:#0f172a !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}
.dsf-campaign-wrapper .dsf-quickBtn:hover{
  transform: translateY(-1px) !important;
  border-color:rgba(24,67,140,.25) !important;
  background:rgba(24,67,140,.06) !important;
}

.dsf-campaign-wrapper .dsf-field{
  margin-top:10px !important;
}
.dsf-campaign-wrapper .dsf-fieldLabel{
  font-size:12px !important;
  color:var(--dsf-muted) !important;
  margin:0 0 6px !important;
  font-weight:500 !important;
}
.dsf-campaign-wrapper .dsf-inputWrap{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 12px !important;
  border:1px solid var(--dsf-border) !important;
  border-radius:14px !important;
  background:#fff !important;
}
.dsf-campaign-wrapper .dsf-prefix{
  font-weight:700 !important;
  color:var(--dsf-primary) !important;
  font-size:13px !important;
}
.dsf-campaign-wrapper .dsf-input{
  border:none !important;
  outline:none !important;
  width:100% !important;
  font-size:14px !important;
  font-family:inherit !important;
  color:#0f172a !important;
  background:transparent !important;
}

/* CTA button gradient + hover animation */
.dsf-campaign-wrapper .dsf-cta{
  margin-top:12px !important;
  width:100% !important;
  border:none !important;
  cursor:pointer !important;
  padding:14px 14px !important;
  border-radius:16px !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:.2px !important;
  background: linear-gradient(135deg, var(--dsf-cta-1), var(--dsf-cta-2)) !important;
  box-shadow: 0 14px 26px rgba(14,93,62,.22) !important;
  transition: transform .18s ease, filter .25s ease !important;
  position:relative !important;
  overflow:hidden !important;
}
.dsf-campaign-wrapper .dsf-cta::after{
  content:"" !important;
  position:absolute !important;
  inset:-40% !important;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%) !important;
  transform: translateX(-20%) !important;
  transition: transform .6s ease !important;
}
.dsf-campaign-wrapper .dsf-cta:hover{
  transform: translateY(-1px) !important;
  filter:saturate(1.08) !important;
}
.dsf-campaign-wrapper .dsf-cta:hover::after{
  transform: translateX(18%) !important;
}

/* Share row */
.dsf-campaign-wrapper .dsf-shareRow{
  margin-top:12px !important;
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.dsf-campaign-wrapper .dsf-shareBtn{
  border:1px solid var(--dsf-border) !important;
  background:rgba(2,6,23,.02) !important;
  border-radius:12px !important;
  padding:9px 10px !important;
  cursor:pointer !important;
  font-size:12px !important;
  font-weight:600 !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}
.dsf-campaign-wrapper .dsf-shareBtn:hover{
  transform: translateY(-1px) !important;
  border-color:rgba(24,67,140,.25) !important;
  background:rgba(24,67,140,.06) !important;
}

/* Mobile bottom sticky donate bar */
.dsf-campaign-wrapper .dsf-mobileBar{
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  background:rgba(255,255,255,.92) !important;
  border-top:1px solid var(--dsf-border) !important;
  backdrop-filter: blur(10px) !important;
  padding:10px 12px !important;
  display:none !important;
  z-index:1000 !important;
}
.dsf-campaign-wrapper .dsf-mobileBarInner{
  max-width:1200px !important;
  margin:0 auto !important;
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}
.dsf-campaign-wrapper .dsf-mobileAmt{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  border:1px solid var(--dsf-border) !important;
  border-radius:14px !important;
  padding:10px 12px !important;
  background:#fff !important;
}
.dsf-campaign-wrapper .dsf-mobileAmt input{
  border:none !important; outline:none !important; width:100% !important;
  font-family:inherit !important; font-size:14px !important; background:transparent !important;
}
.dsf-campaign-wrapper .dsf-mobileBtn{
  flex:0 0 auto !important;
  border:none !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  color:#fff !important;
  font-weight:800 !important;
  background: linear-gradient(135deg, var(--dsf-cta-1), var(--dsf-cta-2)) !important;
  cursor:pointer !important;
  box-shadow: 0 12px 22px rgba(14,93,62,.20) !important;
}

/* Toast */
.dsf-campaign-wrapper .dsf-toast{
  position:fixed !important;
  right:14px !important; bottom:90px !important;
  background:#0f172a !important;
  color:#fff !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  font-size:12px !important;
  opacity:0 !important;
  transform: translateY(10px) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  z-index:1100 !important;
  pointer-events:none !important;
}
.dsf-campaign-wrapper .dsf-toast.dsf-show{
  opacity:1 !important;
  transform: translateY(0) !important;
}

/* Mobile fund summary (single campaign) */
.dsf-campaign-wrapper .dsf-mobile-fund-summary{
  display:none !important;
}

/* Force Poppins + neutral colors for checkout modal (modal is outside wrapper) */
#dsfDonationModal, #dsfDonationModal *{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #0f172a !important;
}
#dsfDonationModal input, #dsfDonationModal textarea, #dsfDonationModal select{
  color:#0f172a !important;
}
#dsfDonationModal label{ color:#0f172a !important; }
#dsfDonationModal small{ color:#64748b !important; }

/* Responsive */
@media (max-width: 960px){
  .dsf-campaign-wrapper .dsf-grid{ grid-template-columns: 1fr !important; }
  .dsf-campaign-wrapper .dsf-side{ position:relative !important; top:auto !important; }
}
@media (max-width: 767px){
  .dsf-campaign-wrapper .dsf-container{ padding-bottom:140px !important; }
  .dsf-campaign-wrapper .dsf-title{ font-size:22px !important; }
  .dsf-campaign-wrapper .dsf-tabsWrap{ top:8px !important; }
  .dsf-campaign-wrapper .dsf-mobileBar{ display:block !important; }
  .dsf-campaign-wrapper .dsf-side{ display:none !important; }

  .dsf-campaign-wrapper .dsf-mobile-fund-summary{
    display:block !important;
    margin: 14px 0 8px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid var(--dsf-border) !important;
    background:#fff !important;
    box-shadow: 0 10px 20px rgba(2,6,23,.06) !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-item{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-item + .dsf-mobile-fund-item{
    margin-top:10px !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-icon{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:15px !important;
    color:#fff !important;
    background: linear-gradient(135deg, #2f7d39, #56a42c) !important;
    box-shadow: 0 7px 16px rgba(47, 125, 57, 0.18) !important;
    flex: 0 0 42px !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-icon--raised{
    background: linear-gradient(135deg, #20bfa7, #27c978) !important;
    box-shadow: 0 7px 16px rgba(39, 201, 120, 0.2) !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-text{
    min-width:0 !important;
    flex:1 !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-label{
    margin:0 !important;
    font-size:13px !important;
    font-weight:600 !important;
    color:#111827 !important;
    line-height:1.2 !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-sub{
    margin:4px 0 0 !important;
    font-size:12px !important;
    color:#8a94a6 !important;
    line-height:1.2 !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-value{
    text-align:right !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    letter-spacing:-0.2px !important;
    color:#1e40af !important;
    min-width: 120px !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-value--goal{
    color:#57a83b !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-value--raised{
    color:#21b49b !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-meta{
    display:block !important;
    margin-top:3px !important;
    font-size:11px !important;
    font-weight:500 !important;
    color:#97a0af !important;
    letter-spacing:0 !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-progress{
    margin-top:10px !important;
    height:7px !important;
    border-radius:999px !important;
    background:rgba(2,6,23,.08) !important;
    overflow:hidden !important;
    border:1px solid rgba(24,67,140,.08) !important;
  }

  .dsf-campaign-wrapper .dsf-mobile-fund-progress > span{
    display:block !important;
    height:100% !important;
    background:linear-gradient(90deg, #19c2ac 0%, #3cd47d 48%, #65c73c 100%) !important;
    border-radius:999px !important;
    transition:width .8s ease !important;
  }
}

/* Samakan font Donatur dengan Doa & Pesan (lebih spesifik + override) */
.dsf-campaign-wrapper #dsf-donatur .dsf-rowName,
.dsf-campaign-wrapper #dsf-donatur .dsf-rowMeta,
.dsf-campaign-wrapper #dsf-donatur .dsf-rowAmt{
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.dsf-campaign-wrapper #dsf-donatur .dsf-rowMain p,
.dsf-campaign-wrapper #dsf-donatur .dsf-rowMain span {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* =========================
   MOBILE sticky donate bar
   ========================= */
@media (max-width: 768px) {
  .dsf-mobileBar{
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 999999 !important; /* pastikan di atas footer */
    pointer-events: auto !important;
  }

  .dsf-mobileBarInner{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* tombolnya biar center secara vertikal */
  button#dsfMobileDonate.dsf-mobileBtn{
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* supaya konten halaman tidak ketutup bar */
  body{
    padding-bottom: 120px !important;
  }
}

/* =========================
   DESKTOP: jangan tampil
   ========================= */
@media (min-width: 769px) {
  .dsf-mobileBar{
    display: none !important;
  }
  body{
    padding-bottom: 0 !important;
  }
}

/* =========================
   Sheet Donasi: hijau gradasi
   ========================= */

/* 1) Tombol nominal (25k, 50k, dst) */
.dsf-sheet .dsf-sheetAmt{
  border: 0 !important;
  background: linear-gradient(135deg, var(--dsf-cta-1), var(--dsf-cta-2)) !important;
  color: #fff !important;
}

/* kalau ada state aktif/terpilih, tetap hijau */
.dsf-sheet .dsf-sheetAmt.is-active,
.dsf-sheet .dsf-sheetAmt.active,
.dsf-sheet .dsf-sheetAmt[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--dsf-cta-1), var(--dsf-cta-2)) !important;
  color: #fff !important;
}

/* 2) Tombol X (close) — ambil semua button di header sheet yang biasanya ikon X */
.dsf-sheet .dsf-sheetHead button{
  background: linear-gradient(135deg, var(--dsf-cta-1), var(--dsf-cta-2)) !important;
  border: 0 !important;
  color: #fff !important;
}

/* pastikan icon X (svg / span) ikut putih */
.dsf-sheet .dsf-sheetHead button svg,
.dsf-sheet .dsf-sheetHead button span{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================
   FIX posisi X nominal (center)
   ========================= */
.dsf-sheet .dsf-sheetHead button{
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  border-radius: 50% !important;
}

/* Pastikan icon X di dalamnya benar-benar center */
.dsf-sheet .dsf-sheetHead button svg,
.dsf-sheet .dsf-sheetHead button span,
.dsf-sheet .dsf-sheetHead button i{
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: translateY(0) !important;
}

/* =========================
   Modal: Logo center & besar
   ========================= */
#dsfDonationModal .dsf-modal-content img {
  display: block !important;
  margin: 0 auto 12px auto !important; /* center + jarak ke title */
  height: 64px !important;             /* BESARIN di sini */
  max-width: none !important;
  object-fit: contain;
}

/* =========================
   BUTTON: LANJUTKAN DONASI
   ========================= */
#dsfDonationModal button#dsfSubmitDonation{
  background-image: linear-gradient(to bottom, #4CAF50, #2C6E2F) !important;
  background-color: transparent !important;

  color: #ffffff !important;          /* FONT PUTIH */
  border: none !important;
  border-radius: 12px !important;

  font-weight: 700 !important;
  font-size: 16px !important;

  padding: 14px 18px !important;
  height: 52px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
}

/* hover & active (biar terasa hidup) */
#dsfDonationModal button#dsfSubmitDonation:hover{
  filter: brightness(1.05);
}

#dsfDonationModal button#dsfSubmitDonation:active{
  transform: scale(0.97);
}

/* =========================
   PROGRESS BAR CAMPAIGN
   ========================= */
   
   /* Track */
.dsf-progress{
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(2,6,23,.08);
}

/* Fill (ini yang “jalan”) */
.dsf-progress::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--dsf-progress, 0%);
  background: linear-gradient(to right, #4CAF50, #2C6E2F);
  border-radius: 999px;
  transition: width .9s ease;
}
/* ===================================================================
   PATCH 2026-02-04 — Progress bar fix + modal close gradient + payment strip
   - Tidak menghapus style lama; ini override paling akhir agar pasti kepakai
   =================================================================== */

/* PROGRESS BAR: support 2 mode (inner #dsfProgressBar + CSS variable fallback) */
.dsf-campaign-wrapper .dsf-progress{
  position: relative !important;
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(2,6,23,.08) !important;
}
.dsf-campaign-wrapper .dsf-progress #dsfProgressBar{
  display:block !important;
  height:100% !important;
  width:0% !important;
  background: linear-gradient(to right, #4CAF50, #2C6E2F) !important;
  border-radius:999px !important;
  transition: width .9s ease !important;
}
/* fallback bila inner div tidak ada */
.dsf-campaign-wrapper .dsf-progress::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; top:0 !important; bottom:0 !important;
  width: var(--dsf-progress, 0%) !important;
  background: linear-gradient(to right, #4CAF50, #2C6E2F) !important;
  border-radius:999px !important;
  transition: width .9s ease !important;
  pointer-events:none !important;
}

/* Mobile bar: pastikan klik tidak ketimpa footer */
@media (max-width: 767px){
  .dsf-campaign-wrapper .dsf-mobileBar{
    z-index: 999999 !important;
    pointer-events: auto !important;
  }
  .dsf-campaign-wrapper .dsf-mobileBar,
  .dsf-campaign-wrapper .dsf-mobileBar *{
    pointer-events: auto !important;
  }
}
@media (min-width: 768px){
  .dsf-campaign-wrapper .dsf-mobileBar{ display:none !important; }
}

/* Modal close button: hijau gradasi + putih */
#dsfDonationModal #dsfCloseDonationForm{
  background: linear-gradient(135deg, #0e5d3e, #56a42c) !important;
  border: 0 !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Payment logo strip: lebar penuh biar muat banyak */
#dsfDonationModal img[alt="Metode pembayaran"],
#dsfDonationModal img[src*="logo-payments-strip"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:34px !important;
  object-fit:contain !important;
}

/* =========================
   FORCE SHARE BUTTON COLORS DENGAN ICON FONT AWESOME - FIXED CENTER
   ========================= */

.dsf-campaign-wrapper .dsf-shareRow {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn{
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.15) !important;
  position: relative !important;
  padding: 10px 14px 10px 36px !important; /* Padding kiri lebih besar untuk icon */
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important; /* Tinggi minimum untuk konsistensi */
  flex: 1 !important; /* Tombol ukuran sama */
  min-width: 120px !important; /* Lebar minimum */
  text-align: center !important;
}

/* Tambahkan icon menggunakan pseudo-element */
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn::before {
  font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* WhatsApp */
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="wa"]{
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
}
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="wa"]::before {
  content: "\f232" !important; /* WhatsApp icon */
}

/* Facebook */
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="fb"]{
  background: linear-gradient(135deg, #1877F2, #0A5EB8) !important;
}
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="fb"]::before {
  content: "\f09a" !important; /* Facebook icon */
}

/* X/Twitter */
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="x"]{
  background: linear-gradient(135deg, #000000, #333333) !important;
}
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="x"]::before {
  content: "\f099" !important; /* Twitter icon */
}

/* Copy Link */
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="copy"]{
  background: linear-gradient(135deg, #e8593b, #d04527) !important;
}
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn[data-share="copy"]::before {
  content: "\f0c5" !important; /* Copy icon */
  font-family: "Font Awesome 6 Free" !important;
}

/* Efek hover */
.dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.25) !important;
  filter: brightness(1.1) !important;
}

/* Responsif untuk mobile */
@media (max-width: 480px) {
  .dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn {
    min-width: calc(50% - 4px) !important; /* 2 kolom di mobile */
    padding: 10px 10px 10px 32px !important; /* Padding lebih kecil di mobile */
  }
  
  .dsf-campaign-wrapper .dsf-shareRow .dsf-shareBtn::before {
    left: 10px !important;
    font-size: 13px !important;
  }
}

/* Pastikan icon juga muncul di tombol share yang ada di cover */
.dsf-campaign-wrapper .dsf-cover-actions {
  display: flex !important;
  gap: 8px !important;
  z-index: 2 !important;
}

.dsf-campaign-wrapper .dsf-cover-actions .dsf-iconbtn {
  position: relative !important;
  padding: 8px 12px 8px 32px !important;
  border: 1px solid var(--dsf-border) !important;
  background: #fff !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(2,6,23,.06) !important;
  transition: all 0.18s ease !important;
  color: var(--dsf-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
}

/* Icon untuk tombol Bagikan di cover */
.dsf-campaign-wrapper .dsf-cover-actions #dsfShareTop::before {
  content: "\f1e0" !important; /* Share icon */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dsf-primary) !important;
}

/* Icon untuk tombol Copy Link di cover */
.dsf-campaign-wrapper .dsf-cover-actions #dsfCopyTop::before {
  content: "\f0c5" !important; /* Copy icon */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dsf-primary) !important;
}

/* =========================
   HADITS BOX STYLING
   ========================= */
   
.dsf-campaign-wrapper .dsf-hadith-box {
    margin-top: 16px !important;
    padding: 14px !important;
    background: linear-gradient(135deg, rgba(24,67,140,0.05), rgba(55,158,32,0.05)) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(24,67,140,0.15) !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06) !important;
}

.dsf-campaign-wrapper .dsf-hadith-box .arabic-text {
    font-family: 'Traditional Arabic', 'Amiri', 'Scheherazade', 'Noto Naskh Arabic', serif !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #18438c !important;
    margin-bottom: 8px !important;
    direction: rtl !important;
    font-weight: 500 !important;
}

.dsf-campaign-wrapper .dsf-hadith-box .translation {
    font-style: italic !important;
    font-size: 13px !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

.dsf-campaign-wrapper .dsf-hadith-box .source {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
}

/* Responsif untuk mobile */
@media (max-width: 480px) {
    .dsf-campaign-wrapper .dsf-hadith-box .arabic-text {
        font-size: 16px !important;
    }
    
    .dsf-campaign-wrapper .dsf-hadith-box .translation {
        font-size: 12px !important;
    }
}

/* FIX: hide mobile sticky donate bar when bottom sheet is open to prevent overlapping buttons */
body.dsf-sheetOpen .dsf-campaign-wrapper .dsf-mobileBar{display:none !important;}

/* === Mobile sticky CTA refinements (no progress bar; percent badge only) === */
@media (max-width: 768px){
  .dsf-campaign-wrapper .dsf-mobileBar{
    left:0 !important;
    right:0 !important;
    bottom:0 !important; /* no gap */
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0 !important;
  }
  .dsf-campaign-wrapper .dsf-mobileBarInner{
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .dsf-campaign-wrapper .dsf-mobileBtn{
    position: relative;
    width: 100% !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    border-radius: 14px;
    overflow:hidden;
    font-family: Poppins, sans-serif;
    background: linear-gradient(to bottom,#4CAF50,#2C6E2F);
    box-shadow: 0 12px 26px rgba(2,6,23,.18);
  }

  /* shimmer loop for CTA (subtle) */
  .dsf-campaign-wrapper .dsf-mobileBtn::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 35%, transparent 70%);
    transform: translateX(-120%);
    animation: dsfCtaShimmer 2.2s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes dsfCtaShimmer{
    0%{ transform: translateX(-120%); }
    55%{ transform: translateX(120%); }
    100%{ transform: translateX(120%); }
  }

  .dsf-campaign-wrapper .dsf-mobileCtaText{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:800;
    letter-spacing:.2px;
    text-transform:uppercase;
  }
  .dsf-campaign-wrapper .dsf-mobileIcon{
    font-size: 18px;
    line-height: 1;
    color:#fff; /* keep elegant, not red */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
    animation: dsfIconPulse 2.2s ease-in-out infinite;
  }
  @keyframes dsfIconPulse{
    0%, 100%{ transform: translateY(0) scale(1); opacity: .95; }
    50%{ transform: translateY(-1px) scale(1.06); opacity: 1; }
  }
  .dsf-campaign-wrapper .dsf-mobileLabel{
    display:inline-block;
    animation: dsfTextBreath 2.2s ease-in-out infinite;
  }
  @keyframes dsfTextBreath{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-1px); }
  }

  /* percent badge: orange + white poppins */
  .dsf-campaign-wrapper .dsf-mobilePct{
    position:relative;
    z-index:2;
    background: linear-gradient(135deg,#FF9F1A,#FF7A00);
    color:#fff;
    font-weight:800;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(255,122,0,.26);
    white-space:nowrap;
  }

  /* Ensure nothing overlays the button (tap must work) */
  .dsf-campaign-wrapper .dsf-mobileBar,
  .dsf-campaign-wrapper .dsf-mobileBarInner,
  .dsf-campaign-wrapper .dsf-mobileBtn{
    pointer-events: auto;
  }
}

/* === Highlight 'Nominal custom' field in sheet (subtle green shadow) === */
.dsf-campaign-wrapper #dsfAmountSheet .dsf-sheetField .dsf-inputWrap{
  border: 1px solid rgba(76,175,80,.28);
  box-shadow: 0 10px 22px rgba(76,175,80,.14);
}
.dsf-campaign-wrapper #dsfAmountSheet .dsf-sheetField .dsf-inputWrap:focus-within{
  border-color: rgba(76,175,80,.55);
  box-shadow: 0 12px 26px rgba(76,175,80,.22);
}

/* === Mobile CTA: icon + title centered & larger === */
.dsf-mobileBtn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* bikin konten utama benar2 di tengah */
  gap: 10px;
  padding: 14px 14px; /* sesuaikan jika perlu */
}

.dsf-mobileCtaMain{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-align: center;
  pointer-events: none; /* biar tap selalu ke button */
}

.dsf-mobileIcon{
  font-size: 20px;
  line-height: 1;
  color: #ffffff; /* icon putih serasi tombol hijau */
  filter: drop-shadow(0 2px 6px rgba(2,6,23,.18));
}

.dsf-mobileCtaTitle{
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 18px;  /* BESARIN title */
  letter-spacing: .2px;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
}

/* Badge persen tetap di kanan, tidak mengganggu center */
.dsf-mobilePct{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* === Hide gallery thumbnail preview under campaign cover === */
.dsf-cover-thumbs {
  display: none !important;
}

/* =========================================================
   Mobile compact modal checkout (fit screen + cleaner style)
   ========================================================= */
@media (max-width: 767px){
  #dsfDonationModal{
    padding: 8px !important;
    align-items: center !important;
    backdrop-filter: blur(2px) !important;
  }

  #dsfDonationModal .dsf-modal-content{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.28) !important;
  }

  #dsfDonationModal .dsf-modal-content > div:first-child{
    margin-bottom: 10px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  #dsfDonationModal .dsf-modal-content h2{
    margin: 4px 0 0 0 !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.1px !important;
    color: #0f1f45 !important;
  }

  #dsfDonationModal .dsf-modal-content img[alt="Logo"]{
    height: 30px !important;
    margin-bottom: 6px !important;
  }

  #dsfDonationModal #dsfCloseDonationForm{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    box-shadow: 0 8px 18px rgba(47, 125, 57, 0.26) !important;
  }

  #dsfDonationModal form{
    display: grid !important;
    gap: 8px !important;
  }

  #dsfDonationModal form > div{
    margin: 0 !important;
  }

  #dsfDonationModal label{
    margin-bottom: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #10224e !important;
  }

  #dsfDonationModal input[type="text"],
  #dsfDonationModal input[type="email"],
  #dsfDonationModal textarea,
  #dsfDonationModal select{
    border-radius: 11px !important;
    border: 1px solid #d6ddeb !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    min-height: 42px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  }

  #dsfDonationModal textarea{
    min-height: 58px !important;
    max-height: 70px !important;
    resize: none !important;
  }

  #dsfDonationModal small{
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #6f7c92 !important;
  }

  #dsfDonationModal .dsf-modal-userbox{
    padding: 10px 11px !important;
    border-radius: 10px !important;
    border-left-width: 3px !important;
    background: linear-gradient(135deg, #edf5ff, #f2f9ff) !important;
  }

  #dsfDonationModal .dsf-modal-payment-box{
    padding: 10px !important;
    border-radius: 12px !important;
    border-color: #d5def0 !important;
    background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
  }

  #dsfDonationModal .dsf-modal-payment-box > div > div:first-child{
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #153a7a !important;
  }

  #dsfDonationModal .dsf-modal-payment-box > div > div:nth-child(2){
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #607088 !important;
  }

  #dsfDonationModal img[alt="Metode pembayaran"],
  #dsfDonationModal img[src*="logo-payments-strip"]{
    max-height: 18px !important;
    width: 100% !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
  }

  #dsfDonationModal #dsfAnon{
    transform: scale(0.95) !important;
  }

  #dsfDonationModal #dsfSubmitDonation{
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15px !important;
    box-shadow: 0 10px 22px rgba(44, 110, 47, 0.26) !important;
    background-image: linear-gradient(135deg, #2f7d39, #56a42c) !important;
  }

  #dsfDonationModal #dsfCancelDonationForm{
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid #d0d8e8 !important;
    background: #f4f7fc !important;
    color: #1f355e !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  #dsfDonationModal #dsfSubmitDonation:active,
  #dsfDonationModal #dsfCancelDonationForm:active{
    transform: translateY(1px) !important;
  }
}

/* =========================================================
   Mobile modal compact v2 (lebih fit, lebih rapih)
   ========================================================= */
@media (max-width: 767px){
  #dsfDonationModal{
    padding: 4px !important;
  }

  #dsfDonationModal .dsf-modal-content{
    max-height: calc(100dvh - 8px) !important;
    padding: 10px 10px 12px !important;
    border-radius: 16px !important;
  }

  #dsfDonationModal .dsf-modal-content > div:first-child{
    margin-bottom: 6px !important;
    gap: 8px !important;
  }

  #dsfDonationModal .dsf-modal-content h2{
    font-size: 14px !important;
    line-height: 1.22 !important;
    margin-top: 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #dsfDonationModal .dsf-modal-content img[alt="Logo"]{
    height: 32px !important;
    margin-bottom: 4px !important;
  }

  #dsfDonationModal #dsfCloseDonationForm{
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 24px !important;
  }

  #dsfDonationModal .fa-solid,
  #dsfDonationModal .fa-regular,
  #dsfDonationModal .fa-brands{
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #dsfDonationModal form{
    gap: 6px !important;
  }

  #dsfDonationModal label{
    font-size: 12px !important;
    margin-bottom: 3px !important;
  }

  #dsfDonationModal input[type="text"],
  #dsfDonationModal input[type="email"],
  #dsfDonationModal textarea,
  #dsfDonationModal select{
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  #dsfDonationModal textarea{
    min-height: 52px !important;
    max-height: 64px !important;
  }

  #dsfDonationModal small{
    font-size: 10px !important;
    margin-top: 3px !important;
  }

  #dsfDonationModal .dsf-modal-userbox{
    padding: 8px 10px !important;
  }

  #dsfDonationModal .dsf-modal-payment-box{
    padding: 8px !important;
    gap: 6px !important;
  }

  #dsfDonationModal .dsf-modal-payment-box > div{
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  #dsfDonationModal .dsf-modal-payment-box > div > div:first-child{
    font-size: 12px !important;
  }

  #dsfDonationModal .dsf-modal-payment-box > div > div:nth-child(2){
    font-size: 10.5px !important;
  }

  #dsfDonationModal img[alt="Metode pembayaran"],
  #dsfDonationModal img[src*="logo-payments-strip"]{
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    max-height: 17px !important;
    margin: 3px auto 0 !important;
    object-fit: contain !important;
    opacity: 0.98 !important;
  }

  #dsfDonationModal #dsfAnon{
    width: 17px !important;
    height: 17px !important;
    transform: none !important;
  }

  #dsfDonationModal label[for="dsfAnon"]{
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  #dsfDonationModal .dsf-modal-actions-wrap{
    margin-top: 8px !important;
  }

  #dsfDonationModal .dsf-modal-actions-row{
    gap: 8px !important;
    align-items: stretch !important;
  }

  #dsfDonationModal #dsfSubmitDonation,
  #dsfDonationModal #dsfCancelDonationForm{
    min-height: 37px !important;
    font-size: 12.5px !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
  }

  #dsfDonationModal #dsfSubmitDonation{
    position: relative !important;
    overflow: hidden !important;
    background-image: linear-gradient(135deg, #2f7d39, #56a42c) !important;
    box-shadow: 0 8px 18px rgba(44, 110, 47, 0.24) !important;
    animation: cbbdDonatePulse 2.2s ease-in-out infinite !important;
    isolation: isolate !important;
  }

  #dsfDonationModal #dsfSubmitDonation::after{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 48% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%) !important;
    transform: skewX(-18deg) !important;
    animation: cbbdDonateShine 2.8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #dsfDonationModal #dsfSubmitDonation > *{
    position: relative !important;
    z-index: 1 !important;
  }

  #dsfDonationModal #dsfSubmitDonation:hover{
    filter: brightness(1.04) !important;
  }

  #dsfDonationModal #dsfCancelDonationForm{
    background: #f2f5fb !important;
    border-color: #cdd6e8 !important;
    color: #253d6a !important;
  }
}

/* Ultra small phones */
@media (max-width: 390px){
  #dsfDonationModal .dsf-modal-content{
    padding: 9px 9px 10px !important;
  }

  #dsfDonationModal .dsf-modal-content h2{
    font-size: 13px !important;
  }

  #dsfDonationModal label{
    font-size: 11.5px !important;
  }

  #dsfDonationModal input[type="text"],
  #dsfDonationModal input[type="email"],
  #dsfDonationModal textarea{
    font-size: 13px !important;
  }

  #dsfDonationModal img[alt="Metode pembayaran"],
  #dsfDonationModal img[src*="logo-payments-strip"]{
    max-height: 15px !important;
  }
}

@keyframes cbbdDonatePulse{
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 18px rgba(44, 110, 47, 0.22); }
  50% { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(44, 110, 47, 0.30); }
}

@keyframes cbbdDonateShine{
  0%, 22% { left: -120%; }
  56%, 100% { left: 130%; }
}

/* =========================================================
   FINAL OVERRIDE: modal visual consistency (mobile)
   ========================================================= */
@media (max-width: 900px){
  #dsfDonationModal .dsf-modal-logo{
    width: min(180px, 48vw) !important;
    min-width: 124px !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto 8px !important;
  }

  #dsfDonationModal .dsf-payment-strip{
    display: block !important;
    width: 154% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 6px 0 0 -27% !important;
  }

  #dsfDonationModal .dsf-modal-payment-box{
    overflow: hidden !important;
  }

  #dsfDonationModal .dsf-submit-cta{
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    background-image: linear-gradient(135deg, #2f7d39 0%, #4cae3f 52%, #60b63f 100%) !important;
    background-size: 220% 220% !important;
    box-shadow: 0 8px 20px rgba(44, 110, 47, 0.28) !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    animation: cbbdSubmitPulseStrong 1.35s ease-in-out infinite, cbbdSubmitGradientStrong 3.2s linear infinite !important;
  }

  #dsfDonationModal .dsf-submit-cta::after{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 52% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%) !important;
    transform: skewX(-18deg) !important;
    animation: cbbdSubmitShineStrong 2s linear infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #dsfDonationModal .dsf-submit-cta:hover{
    filter: brightness(1.06) saturate(1.04) !important;
  }

  #dsfDonationModal .dsf-submit-cta:active{
    transform: translateY(1px) scale(0.995) !important;
  }

  #dsfDonationModal .dsf-submit-cta,
  #dsfDonationModal .dsf-cancel-cta{
    flex: 1 1 0 !important;
  }

  #dsfDonationModal .dsf-cancel-cta{
    min-height: 39px !important;
    padding: 8px 12px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    border: 1px solid #cdd6e8 !important;
    background: #f2f5fb !important;
    color: #253d6a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
  }
}

@keyframes cbbdSubmitPulseStrong{
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(44, 110, 47, 0.26);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 13px 28px rgba(44, 110, 47, 0.4);
  }
}

@keyframes cbbdSubmitShineStrong{
  0% { left: -120%; }
  100% { left: 130%; }
}

@keyframes cbbdSubmitGradientStrong{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}