/* Ikrar counters widget — [ikrar_counters]
   Markup (owned by M2): .ikrar-counters > .counter(.counter-num#ikrar-stat-*, .counter-label) ... + .goal(.goal-bar#ikrar-goal-bar > span, .goal-text#ikrar-goal-text)
   Uses theme tokens when present, with fallbacks so the plugin also looks right without the theme. */
.ikrar-counters {
  --c-bg: var(--g700, #0b5d3b);
  --c-accent: var(--lime, #b9e24b);
  background: var(--c-bg);
  color: #fff;
  border-radius: 20px;
  padding: clamp(18px, 4vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 20px;
  align-content: center;
  margin: 24px 0;
}
.ikrar-counters .counter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ikrar-counters .counter-num {
  font-family: var(--font-head, "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  color: var(--c-accent);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ikrar-counters .counter-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 800;
  color: #e6f2ea;
}

/* Decision D2 (default B): "orang telah berikrar" is hidden until a real pledger
   count exists. The script currently feeds it the pesantren total, which would be
   a misleading number. To show it (option A), M2 adds data-pledgers="1" to the
   .ikrar-counters wrapper; nothing else changes. */
.ikrar-counters:not([data-pledgers="1"]) .counter:has(> #ikrar-stat-pledgers) {
  display: none;
}

.ikrar-counters .goal {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.ikrar-counters .goal-bar {
  height: 14px;
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  overflow: hidden;
}
.ikrar-counters .goal-bar span {
  display: block;
  height: 100%;
  width: 0;
  min-width: 6px;           /* a sliver stays visible at very low percentages */
  background: var(--c-accent);
  border-radius: 999px;
  transition: width 1s ease;
}
.ikrar-counters .goal-text {
  font-size: .85rem;
  line-height: 1.4;
  margin: 8px 0 0;
  color: #e6f2ea;
}

/* Glass variant inside the hero (dark gradient behind) */
.hero .ikrar-counters {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .ikrar-counters .goal-bar span { transition: none; }
}