/* =========================================================
   countdown.css — Mascotas Ayacucho (quirúrgico + accesible)
   - Funciona en loop y single (Woo)
   - Hereda paleta y tipografías del tema
   - Estados: .is-urgent (<24h), .is-last-hour (<60m)
   - Motion-safe + RTL + dark friendly
   ========================================================= */

/* ---- Variables locales con fallbacks a tu paleta ---- */
:root{
  --cd-bg-soft: color-mix(in srgb, var(--brand, #FF0000) 8%, #fff);
  --cd-border:   var(--brand, #FF0000);
  --cd-ink:      #ffffff;

  --cd-urgent:   var(--accent, #FFB600);
  --cd-last1h-a: #ff4d4d;
  --cd-last1h-b: #ff0000;
  --cd-last1h-pill: #b10000;

  --cd-radius: .6rem;
  --cd-gap: .6rem;
  --cd-pad: .4rem .7rem;
  --cd-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* =========================
   Contenedores (loop/single)
   ========================= */
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown){
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--cd-gap);
  padding: var(--cd-pad);
  border-radius: var(--cd-radius);
  background: var(--cd-bg-soft);
  border: 1px solid var(--cd-border);
  color: var(--cd-ink);
  font: 600 1rem/1.2 var(--fuente-base, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  text-decoration: none;                 /* neutraliza estilos heredados */
}

/* Si el contador cae dentro de un <a>, no “pisa” el click del producto */
:where(.woocommerce) a :is(.ma-countdown, .regalos-countdown, .mascotas-countdown){
  color: var(--cd-ink);
  text-decoration: none;
  pointer-events: none;                  /* evita clic fantasma sobre el link */
}

/* Colores de hijos coherentes (títulos/labels/valores) */
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) *{
  color: var(--cd-ink);
  text-decoration: none;
}

/* =========================
   Píldoras / números / labels
   ========================= */
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) .pill{
  background: var(--cd-border);
  color: var(--cd-ink);
  padding: .4rem .6rem;
  border-radius: .45rem;
  min-width: 2.5rem;
  text-align:center;
  box-shadow: var(--cd-shadow);
  transform: translateZ(0);              /* perf */
}
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) .pill > span,
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) .pill .value,
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) :is(.days,.hours,.minutes,.seconds,.d,.h,.m,.s){
  font-size: 1rem;
  font-weight: 800;
  display:block;
  font-variant-numeric: tabular-nums;    /* evita “bailes” de dígitos */
}
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) .label{
  font-size:.7rem;
  font-weight:600;
  opacity:.95;
  margin-top:.15rem;
  display:block;
}

/* =========================
   Estados de urgencia
   ========================= */
@keyframes cdPulseSoft{
  0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--cd-urgent) 45%, transparent); }
  50%    { box-shadow: 0 0 0 10px transparent; }
}
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown).is-urgent{
  border-color: var(--cd-urgent);
  animation: cdPulseSoft 1.8s ease-out infinite;
}

@keyframes cdBeat{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.04); }
}
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown).is-last-hour{
  background: linear-gradient(90deg, var(--cd-last1h-a), var(--cd-last1h-b));
  border-color: var(--cd-last1h-pill);
  animation: cdBeat .9s ease-in-out infinite;
}
:where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown).is-last-hour .pill{
  background: var(--cd-last1h-pill);
}

/* Ocultar cuando llega con [hidden] */
:where(.ma-countdown[hidden], .regalos-countdown[hidden], .mascotas-countdown[hidden]){ display:none; }

/* =========================
   Responsive / Motion / RTL
   ========================= */
@media (max-width:480px){
  :where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown){
    gap:.4rem; padding:.35rem .5rem; font-size:.9rem;
  }
  :where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown) .pill{
    min-width:2rem; padding:.3rem .4rem;
  }
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  :where(.woocommerce) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown){
    animation: none !important;
    transition: none !important;
  }
}

/* Modo oscuro suave (si el usuario lo prefiere) */
@media (prefers-color-scheme: dark){
  :root{
    --cd-bg-soft: color-mix(in srgb, var(--brand, #FF0000) 20%, #0f172a);
    --cd-ink: #fff;
  }
}

/* RTL: sin cambios necesarios (todo centrado), pero dejamos hook */
:where(html[dir="rtl"]) :is(.ma-countdown, .regalos-countdown, .mascotas-countdown){ direction: rtl; }