/*
 * Aperina Bazm — countdown tiles, promo-quantity meter, and the offer panel on the product page.
 * Theme tokens with fallbacks. The homepage band («بزمِ مزه» block) is styled by the theme (blocks.css).
 */

/* ---------- Countdown ---------- */
.bazm-clock { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-3, 12px); }
.bazm-clock__label { font-size: var(--text-label, 0.875rem); font-weight: 500; }
.bazm-clock__units { display: inline-flex; align-items: flex-start; gap: 6px; }
.bazm-clock__unit { display: grid; justify-items: center; gap: 2px; }
.bazm-clock__unit[hidden] { display: none; }
.bazm-clock__unit b {
  display: grid; place-items: center; min-width: 2.3em; padding: 2px 6px; overflow: hidden;
  border-radius: var(--radius-field, 8px); background: var(--bazm-tile, var(--bg-sunken, #E6DED5));
  font-size: 1.125rem; font-weight: 600; line-height: 1.5;
}
.bazm-clock__unit small { font-size: var(--text-micro, 0.75rem); line-height: 1.4; color: var(--bazm-muted, var(--text-muted, #6B6159)); }
.bazm-clock__unit.is-tick b { animation: bazm-tick 360ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); }
@keyframes bazm-tick { from { opacity: 0.35; transform: translateY(-35%); } }
.bazm-clock.is-ended { opacity: 0.55; }

/* ---------- Promo quantity ---------- */
.bazm-stock { display: flex; align-items: center; gap: var(--space-2, 8px); min-width: 0; font-size: var(--text-caption, 0.8125rem); line-height: 1.6; color: var(--bazm-muted, var(--text-muted, #6B6159)); }
.bazm-stock__bar { position: relative; flex: 0 1 72px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--bazm-track, var(--bg-sunken, #E6DED5)); }
.bazm-stock__bar span { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--bazm-left, 1) * 100%); border-radius: inherit; background: var(--bazm-fill, var(--primary, #72383D)); }
.bazm-stock.is-low { color: var(--warning, #7A5718); font-weight: 600; }
.bazm-stock.is-low .bazm-stock__bar span { background: var(--warning, #7A5718); }
.bazm-stock.is-out .bazm-stock__bar { display: none; }

/* ---------- Product page panel ---------- */
.bazm-panel {
  --bazm-tile: color-mix(in oklab, var(--ap-cream, #EFE9E1) 14%, transparent);
  --bazm-muted: var(--ap-wine-mist, #E3CFCF);
  --bazm-track: color-mix(in oklab, var(--ap-cream, #EFE9E1) 22%, transparent);
  --bazm-fill: var(--ap-cream, #EFE9E1);
  display: grid; gap: var(--space-3, 12px); margin-block: var(--space-4, 16px); padding: var(--space-4, 16px);
  border-radius: var(--radius-panel, 12px); background: var(--ap-wine, #72383D); color: var(--ap-cream, #EFE9E1);
}
.bazm-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-3, 12px); margin: 0; }
.bazm-panel__head b { font-size: var(--text-body, 1rem); font-weight: 600; }
.bazm-panel__head span { font-size: var(--text-caption, 0.8125rem); color: var(--ap-wine-mist, #E3CFCF); }
.bazm-panel__text { margin: 0; font-size: var(--text-small, 0.9375rem); }
.bazm-panel .bazm-stock.is-low { color: var(--ap-cream, #EFE9E1); }
.bazm-panel .bazm-stock.is-low .bazm-stock__bar span { background: var(--ap-cream, #EFE9E1); }
.bazm-panel.is-upcoming, .bazm-panel.is-sold-out {
  --bazm-tile: var(--bg-raised, #F7F3EE); --bazm-muted: var(--text-muted, #6B6159);
  background: var(--bg-sunken, #E6DED5); color: var(--text, #322D29);
}
.bazm-panel.is-upcoming .bazm-panel__head span, .bazm-panel.is-sold-out .bazm-panel__head span { color: var(--text-muted, #6B6159); }

@media (prefers-reduced-motion: reduce) {
  .bazm-clock__unit.is-tick b { animation: none; }
}