/* =========================
   Variables & Base (NAMESPACED)
   ========================= */
.dmcount {
  --c-bg:#fff;
  --c-outline:#1f2937;
  --c-value:#111827;   /* numbers */
  --c-unit:#374151;    /* unit labels */
  --c-label:#6b7280;   /* label text */
  --c-radius:10px;     /* NEW: border radius */
  --c-box-w:78px;      /* NEW: box width (min-width) */
  --c-box-h:78px;      /* NEW: box height */

  color: var(--c-unit);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Visible by default so cached/blocked JS still shows content */
  opacity: 1;
  transform: none;
}

/* JS briefly adds this before animating */
.dmcount.fx-pending {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  will-change: opacity, transform;
}

/* Alignment (applies to entire stack) */
.dmcount.align-left  { text-align: left; }
.dmcount.align-center{ text-align: center; }
.dmcount.align-right { text-align: right; }

/* Stack holds timer + label together */
.dmcount_stack {
  display: inline-flex;          /* inline so it respects text-align */
  flex-direction: column;
  gap: 10px;
  align-items: center;           /* default */
}

/* Stack follows alignment */
.dmcount.align-left  .dmcount_stack { align-items: flex-start; }
.dmcount.align-center .dmcount_stack { align-items: center; }
dmcount.align-right .dmcount_stack { align-items: flex-end; }

/* Timer row */
.dmcount_timer_wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* Unit boxes */
.dmcount_square_wrap {
  position: relative;
  min-width: var(--c-box-w);
  text-align: center;
  background: var(--c-bg);
  border: 2px solid var(--c-outline);
  border-radius: var(--c-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Inner layout */
.dmcount_table { display: table; width: 100%; height: var(--c-box-h); }
.dmcount_table_cell { display: table-cell; vertical-align: middle; font-weight: 700; }

/* Numbers & units */
.dmv {
  display: block;
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 2px;
  color: var(--c-value);
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center;
}
.dmu {
  display: inline-block;
  font-size: 12px;
  color: var(--c-unit);
  opacity: .9;
}

/* Decorative divider */
.dmcount_border {
  height: 4px;
  background: var(--c-outline);
  opacity: .18;
}

/* Label under timer (always aligned with stack) */
.dmnote {
  font-size: 14px;
  color: var(--c-label);
  margin: 0; /* spacing handled by flex gap */
}

/* Responsive text sizing only */
@media (max-width: 480px) {
  .dmv { font-size: 20px; }
}

/* =========================
   Digit Tick Animation
   ========================= */
.dmv.tick {
  animation: dmcount-tick .28s ease;
}
@keyframes dmcount-tick {
  0%   { transform: translateY(4px) scale(0.98); opacity: .4; }
  60%  { transform: translateY(-1px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

/* =========================
   Entrance Effects
   JS toggles .fx-pending and adds .entered
   ========================= */

/* Fade */
.dmcount.effect-fade.fx-pending.entered {
  animation: dmcount-fade-in .45s ease forwards;
}
@keyframes dmcount-fade-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slide Up */
.dmcount.effect-slide-up.fx-pending.entered {
  animation: dmcount-slide-up .50s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes dmcount-slide-up {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Zoom */
.dmcount.effect-zoom.fx-pending.entered {
  animation: dmcount-zoom-in .40s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes dmcount-zoom-in {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* No effect (visible immediately) */
.dmcount.effect-none {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile fixes: center + prevent overflow */
@media (max-width: 640px){
  /* Force the whole stack to center on mobile */
  .dmcount .dmcount_stack{
    align-items: center !important;
    text-align: center !important;
  }

  /* Wrap boxes and center the row */
  .dmcount .dmcount_timer_wrap{
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Make boxes responsive and allow wrapping without overflow */
  .dmcount .dmcount_square_wrap{
    flex: 0 1 var(--c-box-w);
  }

  /* Safe defaults for small screens (overridable per-shortcode) */
  .dmcount{
    --c-box-w: clamp(56px, 22vw, 96px);
    --c-box-h: clamp(48px, 18vw, 88px);
  }

  /* Responsive digit size */
  .dmcount .dmv{
    font-size: clamp(18px, 5vw, 22px);
  }
}