/* ==========================================================================
   CBB Donasi - Campaign Cards (Mobile-first)
   File: assets/css/cbb-campaign.css
   Tone: hijau tua -> hijau muda (match single campaign)
   ========================================================================== */

:root{
  /* ikut tone single-campaign (dsf) tapi versi global cbb */
  --cbb-primary:#18438c;
  --cbb-secondary:#379e20;
  --cbb-cta-1:#0e5d3e;   /* hijau tua */
  --cbb-cta-2:#56a42c;   /* hijau muda */
  --cbb-bg:#ffffff;
  --cbb-soft:#f8fafc;
  --cbb-text:#0f172a;
  --cbb-muted:#6b7280;
  --cbb-border:#e5e7eb;
  --cbb-shadow-soft: 0 8px 20px rgba(2,6,23,.06);
  --cbb-shadow: 0 10px 30px rgba(2,6,23,.08);
  --cbb-radius:16px;
}

/* wrapper */
.cbb-campaigns{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--cbb-text);
}

.cbb-campaigns *{ box-sizing:border-box; }

.cbb-campaigns a{ color:inherit; text-decoration:none; }
.cbb-campaigns a:hover{ text-decoration:none; }

/* Section header (optional) */
.cbb-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0 14px;
}
.cbb-section-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.2px;
  margin:0;
}
.cbb-section-subtitle{
  font-size:12px;
  color:var(--cbb-muted);
  margin:2px 0 0;
}
.cbb-section-link{
  font-size:12px;
  font-weight:700;
  color: var(--cbb-primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Layout containers */
.cbb-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cbb-grid{
  display:grid;
  grid-template-columns: 1fr; /* mobile default */
  gap:12px;
}

/* desktop/tablet columns via data attributes */
@media (min-width: 640px){
  .cbb-grid[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cbb-grid[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cbb-grid[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cbb-grid[data-cols="5"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cbb-grid[data-cols="6"]{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* mobile override columns (WAJIB scoped ke mobile agar tidak menimpa desktop) */
@media (max-width: 639px){
  .cbb-grid[data-mcols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cbb-grid[data-mcols="1"]{ grid-template-columns: 1fr; }
}

/* Horizontal scroll (mobile) */
.cbb-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.cbb-scroll::-webkit-scrollbar{ height:8px; }
.cbb-scroll::-webkit-scrollbar-thumb{ background:rgba(2,6,23,.12); border-radius:999px; }

.cbb-scroll .cbb-card{
  min-width: 78%;
  max-width: 78%;
  scroll-snap-align:start;
}
@media (min-width: 640px){
  .cbb-scroll .cbb-card{ min-width: 340px; max-width: 340px; }
}

/* Card */
.cbb-card{
  border:1px solid var(--cbb-border);
  border-radius: var(--cbb-radius);
  overflow:hidden;
  background: var(--cbb-bg);

  box-shadow:
    0 6px 18px rgba(2,6,23,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* hover desktop saja */
@media (hover:hover){
  .cbb-card:hover{
    transform: translateY(-4px);
    box-shadow:
      0 14px 36px rgba(2,6,23,.10);
  }
}


.cbb-card-media{
  position:relative;
  aspect-ratio: 16/9;
  background:
    radial-gradient(900px 350px at 20% 20%, rgba(14,93,62,.14), transparent 60%),
    radial-gradient(900px 350px at 80% 60%, rgba(86,164,44,.14), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02));
}

.cbb-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cbb-badges{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  z-index:2;
}
.cbb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--cbb-border);
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  font-size:12px;
  font-weight:700;
  color: var(--cbb-primary);
}

/* Body */
.cbb-card-body{
  padding:12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cbb-title{
  margin:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.2px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: 2.5em;
}

.cbb-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: var(--cbb-muted);
}

.cbb-money{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.cbb-money strong{
  font-size:14px;
  color: var(--cbb-text);
}
.cbb-money span{
  font-size:12px;
  color: var(--cbb-muted);
}

/* =========================================
   Progress Bar (Smooth + Elegant)
========================================= */
.cbb-progress{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.06);
  position:relative;
}

.cbb-progress > i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;

  background: linear-gradient(
    135deg,
    var(--cbb-cta-1),
    var(--cbb-cta-2)
  );

  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* subtle glossy highlight */
.cbb-progress > i::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.35),
    rgba(255,255,255,0)
  );
}



.cbb-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:2px;
}

.cbb-btn{
  position: relative;
  overflow: hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:11px 14px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  color:#fff;

  background: linear-gradient(135deg, var(--cbb-cta-1), var(--cbb-cta-2));
  box-shadow:
    0 6px 14px rgba(14,93,62,.22),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* hover (desktop) */
.cbb-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(14,93,62,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
  filter: brightness(1.03);
}

/* active / tap (mobile feel) */
.cbb-btn:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(14,93,62,.18),
    inset 0 2px 4px rgba(0,0,0,.15);
}

.cbb-btn:hover{ filter:brightness(.98); }
.cbb-btn:active{ transform: translateY(1px); }

/* List layout card tweak */
.cbb-card.is-list{
  flex-direction:row;
  align-items:stretch;
}
.cbb-card.is-list .cbb-card-media{
  width:120px;
  aspect-ratio:auto;
  height:auto;
  min-height:120px;
}
.cbb-card.is-list .cbb-card-body{
  padding:12px;
  width:100%;
}
@media (max-width: 520px){
  .cbb-card.is-list{
    flex-direction:column;
  }
  .cbb-card.is-list .cbb-card-media{
    width:100%;
    aspect-ratio:16/9;
  }
}


/* =========================================================
   Program Dropdown Switch (Shortcode: [cbb_campaigns_program])
   - Simple, clean, orange (selaras badge persentase)
   ========================================================= */
.cbb-campaigns{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.cbb-campaigns a{
  text-decoration: none !important;
}

/* Hide horizontal scrollbar indicator but keep swipe */
.cbb-campaigns .cbb-scroll,
.cbb-campaigns .cbb-list,
.cbb-campaigns .cbb-grid{
  scrollbar-width: none; /* Firefox */
}
.cbb-campaigns .cbb-scroll::-webkit-scrollbar,
.cbb-campaigns .cbb-list::-webkit-scrollbar,
.cbb-campaigns .cbb-grid::-webkit-scrollbar{
  display: none; /* Chrome/Safari */
}

/* Sticky container */
.cbb-programSwitch{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* remember: wrapper .cbb-campaigns already has padding from theme? keep button centered */
.cbb-programBtn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 0, .35);
  background: #fff;
  color: #111827;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
}
.cbb-programBtnIcon{
  font-size: 14px;
  opacity: .9;
  transform: translateY(-1px);
}

/* when selected (via data-selected-program != '') make it orange */
.cbb-has-program-filter[data-selected-program]:not([data-selected-program=""]) .cbb-programBtn{
  border-color: rgba(255, 122, 0, .45);
  background: linear-gradient(135deg,#ff9f1a,#ff7a00);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 122, 0, .22);
}
.cbb-has-program-filter[data-selected-program]:not([data-selected-program=""]) .cbb-programBtnIcon{
  opacity: 1;
}

/* dropdown menu */
.cbb-programMenu{
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
  display: none;
  max-height: 320px;
  overflow: auto;
  scrollbar-width: none;
}
.cbb-programMenu::-webkit-scrollbar{display:none;}

.cbb-programSwitch.is-open .cbb-programMenu{
  display: block;
}

.cbb-programItem{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #0f172a;
  font-weight: 600;
}
.cbb-programItem:hover{
  background: rgba(255, 122, 0, .08);
}
.cbb-programItem.is-active{
  background: linear-gradient(135deg, rgba(255,159,26,.22), rgba(255,122,0,.16));
  border: 1px solid rgba(255, 122, 0, .20);
}

/* Progress badge (orange) on listing cards */
.cbb-progress{
  position: relative;
}
.cbb-progressBadge{
  position: absolute;
  right: 0;
  top: -18px;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ff9f1a,#ff7a00);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(255, 122, 0, .22);
}

/* Smooth progress animation */
.cbb-progress > i{
  will-change: width;
}

/* Small screens tweaks */
@media (max-width: 480px){
  .cbb-programSwitch{ padding: 10px 0 10px; }
  .cbb-programBtn{ padding: 12px 14px; }
  .cbb-progressBadge{ top: -16px; font-size: 10px; }
}



/* ==========================================================================
   PATCH FIX - Program Dropdown + Grid (scoped)
   - Fix "Semua Program" style ketimpa theme (naikkan specificity)
   - Card lebih rounded
   - Listing selalu GRID (bukan slide/scroll) untuk shortcode program
   ========================================================================== */

.cbb-campaigns.cbb-has-program-filter{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Kill underline yang suka kebawa theme (scoped agar aman) */
.cbb-campaigns.cbb-has-program-filter a{
  text-decoration: none !important;
}

/* Button dropdown: paksa style default (sering ketimpa style theme/global button) */
.cbb-campaigns.cbb-has-program-filter .cbb-programBtn{
  border: 1px solid rgba(255, 122, 0, .35) !important;
  background: #fff !important;
  color: #111827 !important;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Wrapper grid: selalu grid, tidak boleh horizontal scroll */
.cbb-campaigns.cbb-has-program-filter .cbb-campaignsGrid,
.cbb-campaigns.cbb-has-program-filter .cbb-campaigns-grid,
.cbb-campaigns.cbb-has-program-filter .cbb-grid{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

/* desktop grid */
@media (min-width: 768px){
  .cbb-campaigns.cbb-has-program-filter .cbb-campaignsGrid,
  .cbb-campaigns.cbb-has-program-filter .cbb-campaigns-grid,
  .cbb-campaigns.cbb-has-program-filter .cbb-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1100px){
  .cbb-campaigns.cbb-has-program-filter .cbb-campaignsGrid,
  .cbb-campaigns.cbb-has-program-filter .cbb-campaigns-grid,
  .cbb-campaigns.cbb-has-program-filter .cbb-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Jika columns di-set via shortcode, hormati hingga 6 kolom pada desktop */
@media (min-width: 768px){
  .cbb-campaigns.cbb-has-program-filter .cbb-grid[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cbb-campaigns.cbb-has-program-filter .cbb-grid[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cbb-campaigns.cbb-has-program-filter .cbb-grid[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cbb-campaigns.cbb-has-program-filter .cbb-grid[data-cols="5"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cbb-campaigns.cbb-has-program-filter .cbb-grid[data-cols="6"]{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Hilangkan indikator scrollbar (kalau ada container yang masih overflow) */
.cbb-campaigns.cbb-has-program-filter *::-webkit-scrollbar{ height:0; width:0; }
.cbb-campaigns.cbb-has-program-filter *{ scrollbar-width: none; }

/* Card lebih elegan rounded */
.cbb-campaigns.cbb-has-program-filter .cbb-card,
.cbb-campaigns.cbb-has-program-filter .cbb-campaignCard{
  border-radius: 22px !important;
  overflow: hidden;
}
.cbb-campaigns.cbb-has-program-filter .cbb-card img,
.cbb-campaigns.cbb-has-program-filter .cbb-campaignCard img{
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
}

/* Progress bar + badge (pastikan tetap konsisten) */
.cbb-campaigns.cbb-has-program-filter .cbb-progress{
  border-radius: 999px !important;
  overflow: hidden;
}
.cbb-campaigns.cbb-has-program-filter .cbb-progress > span{
  border-radius: 999px !important;
}