/* ==========================================================================
   Delivered counter (partials/mf_delivered_counter.php) - service pages.
   Odometer tiles: white rounded tile, hairline border, split-flap mid-line,
   bold tabular numerals in heading slate. Brand gradient only as accents:
   the bolt badge, the card's top line and a soft glow behind the tiles.
   Tile width is derived from the card width (container query units) and the
   digit/comma count, so 9-10 digits always fit on one row at 360px+.
   ========================================================================== */
.mf-dcount { padding-block: 24px 8px; position: relative; }
@media (min-width: 992px) { .mf-dcount { padding-block: 40px 16px; } }

.mf-dcount__card {
  position: relative; max-width: 880px; margin: 0 auto; padding: 28px 16px 22px;
  border-radius: var(--r-card-xl, 24px); background: var(--surface-warm, #FAF9F7);
  box-shadow: 0 0 0 1px rgba(41, 47, 59, .06); text-align: center; overflow: hidden;
  container-type: inline-size; isolation: isolate;
}
@media (min-width: 576px) { .mf-dcount__card { padding: 36px 32px 28px; } }
.mf-dcount__card::before { /* thin logo-gradient accent line */
  content: ""; position: absolute; top: 0; left: 50%; width: min(160px, 40%); height: 3px;
  transform: translateX(-50%); border-radius: 0 0 4px 4px; background: var(--brand-grad, linear-gradient(90deg, #FA1593, #FB5C06));
}
.mf-dcount__card::after { /* soft brand glow behind the tiles */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: 70%; height: 46%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--brand-grad, linear-gradient(90deg, #FA1593, #FB5C06)); opacity: .10; filter: blur(36px);
}

.mf-dcount__title {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px;
  font: 700 clamp(1.0625rem, 1rem + .6vw, 1.375rem)/1.3 var(--font-display); color: var(--heading); letter-spacing: -.01em;
}
.mf-dcount__badge {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box;
}
.mf-dcount__badge .mf-bolt { width: 16px; height: 16px; background: var(--brand-grad); }

/* ---- Tiles ---------------------------------------------------------------- */
.mf-dcount__row {
  --gap: clamp(2px, 1cqi, 6px);
  --sep: clamp(7px, 2.6cqi, 16px);
  --w: min(62px, calc((100cqi - var(--groups) * var(--sep) - (var(--digits) + var(--groups) - 1) * var(--gap)) / var(--digits)));
  --h: calc(var(--w) * 1.34);
  display: flex; justify-content: center; align-items: stretch; gap: var(--gap); margin: 0; flex-wrap: nowrap;
}
.mf-dcount__tile {
  position: relative; flex: 0 0 var(--w); width: var(--w); height: var(--h); overflow: hidden;
  border-radius: clamp(6px, calc(var(--w) * .2), 12px);
  border: 1px solid var(--border, #E3E5E9);
  background: linear-gradient(180deg, #fff 0 50%, #F8F9FB 50% 100%);
  box-shadow: 0 1px 0 var(--border-strong, #D7DCE6), 0 10px 18px -12px rgba(41, 47, 59, .35);
  color: var(--heading, #292F3B);
  font: 800 calc(var(--w) * .84)/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
}
.mf-dcount__tile::before { /* split-flap mid-line, drawn under the numeral */
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; pointer-events: none;
  background: rgba(41, 47, 59, .12); box-shadow: 0 1px 0 #fff;
}
.mf-dcount__tile::after { /* hinge notches at the mid-line */
  content: ""; position: absolute; left: -1px; right: -1px; top: calc(50% - 2px); height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--border-strong, #D7DCE6) 0 3px, transparent 3px calc(100% - 3px), var(--border-strong, #D7DCE6) calc(100% - 3px));
  border-radius: 2px;
}
.mf-dcount__reel {
  position: relative; display: block; transform: translateY(calc((10 + var(--d)) * var(--h) * -1)); will-change: transform;
}
.mf-dcount__reel > span { display: grid; place-items: center; height: var(--h); padding-top: .04em; }
.mf-dcount__sep {
  flex: 0 0 var(--sep); align-self: flex-end; width: var(--sep); text-align: center;
  font: 800 calc(var(--w) * .84)/1 var(--font-display); color: var(--heading, #292F3B); transform: translateY(.1em);
}

/* JS: reels park on 0 until the row scrolls into view, then roll once */
.mf-dcount.is-armed .mf-dcount__reel { transform: translateY(0); transition: none; }
.mf-dcount.is-rolling .mf-dcount__reel {
  transition: transform calc(1400ms + var(--i) * 90ms) cubic-bezier(.16, .84, .24, 1) calc(var(--i) * 40ms);
}

.mf-dcount__label {
  margin: 16px 0 0; font: 600 clamp(.9375rem, .9rem + .3vw, 1.0625rem)/1.4 var(--font-body); color: var(--body, #484F5E);
}
.mf-dcount__live {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0;
  font-size: .8125rem; line-height: 1.4; color: var(--muted, #626976);
}
.mf-dcount__dot { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--success, #1E9E6A); }
.mf-dcount__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--success, #1E9E6A);
  opacity: 0; animation: mf-dcount-pulse 2.4s ease-out infinite;
}
@keyframes mf-dcount-pulse { 0% { opacity: .5; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.4); } }

@media (prefers-reduced-motion: reduce) {
  .mf-dcount.is-rolling .mf-dcount__reel { transition: none; }
  .mf-dcount__dot::after { animation: none; }
}