/* ═══════════════════════════════════════════════════════
   WOO COUNTDOWN TIMER — DATXALE v6.0
   Woodmart + Elementor Pro + WooCommerce
   ═══════════════════════════════════════════════════════ */

:root {
    --cd-fondo:  #FF4500;
    --cd-texto:  #ffffff;
    --cd-borde:  #ff006e;
}

/* ── WRAPPER con borde animado ──────────────────────── */
.wcd-wrapper {
    position: relative;
    padding: 3px;
    border-radius: 8px;
    margin: 8px 0 6px;
    background: linear-gradient(
        90deg,
        var(--cd-borde),
        color-mix(in srgb, var(--cd-borde) 50%, #fff 50%),
        var(--cd-fondo),
        color-mix(in srgb, var(--cd-borde) 50%, #000 50%),
        var(--cd-borde)
    );
    background-size: 300% 100%;
    animation: wcd-borde 3s linear infinite;
    box-shadow: 0 0 10px color-mix(in srgb, var(--cd-borde) 35%, transparent);
    width: 100%;
    box-sizing: border-box;
}

/* Fallback para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .wcd-wrapper {
        background: linear-gradient(90deg, var(--cd-borde), var(--cd-fondo), var(--cd-borde));
        background-size: 300% 100%;
    }
}

@keyframes wcd-borde {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ── INNER ──────────────────────────────────────────── */
.wcd-inner {
    background: var(--cd-fondo);
    color: var(--cd-texto);
    border-radius: 6px;
    padding: 7px 10px 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* ── LABEL ──────────────────────────────────────────── */
.wcd-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: var(--cd-texto) !important;
    opacity: 0.9;
    line-height: 1.2;
}

/* ── DÍGITOS ────────────────────────────────────────── */
.wcd-digits {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.wcd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
}

.wcd-num {
    display: block !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--cd-texto) !important;
    font-family: 'Courier New', 'Lucida Console', monospace !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    margin: 0 !important;
    padding: 0 !important;
}

.wcd-name {
    font-size: 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    opacity: 0.8;
    color: var(--cd-texto) !important;
    margin-top: 2px;
    display: block;
}

.wcd-sep {
    font-size: 16px !important;
    font-weight: 800;
    color: var(--cd-texto) !important;
    opacity: 0.7;
    margin-bottom: 10px;
    padding: 0 1px;
    line-height: 1;
}

/* ── Pulso segundos ──────────────────────────────────── */
.wcd-num.wcd-s {
    animation: wcd-pulse 1s ease-in-out infinite;
}
@keyframes wcd-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── CONTEXTOS ───────────────────────────────────────── */

/* Loop / Tienda / Woodmart cards */
.wcd-ctx-loop .wcd-num   { font-size: 18px !important; }
.wcd-ctx-loop .wcd-label { font-size: 9px !important; }
.wcd-ctx-loop .wcd-sep   { font-size: 14px !important; }
.wcd-ctx-loop .wcd-unit  { min-width: 28px; }
.wcd-ctx-loop .wcd-inner { padding: 5px 8px 4px; }

/* Grid personalizado */
.wcd-ctx-grid .wcd-num   { font-size: 17px !important; }
.wcd-ctx-grid .wcd-label { font-size: 9px !important; }
.wcd-ctx-grid .wcd-unit  { min-width: 26px; }
.wcd-ctx-grid .wcd-inner { padding: 5px 7px 4px; }

/* Producto individual */
.wcd-ctx-single .wcd-num   { font-size: 26px !important; }
.wcd-ctx-single .wcd-label { font-size: 11px !important; }
.wcd-ctx-single .wcd-inner { padding: 10px 14px 8px; }
.wcd-ctx-single .wcd-unit  { min-width: 40px; }

/* ── WOODMART COMPAT ─────────────────────────────────── */
.wcd-wrapper,
.wcd-wrapper * {
    box-sizing: border-box;
}

/* Dentro del loop de Woodmart */
.products .product .wcd-wrapper,
.wd-products-grid .product .wcd-wrapper,
.wd-entities-list .product .wcd-wrapper,
li.product .wcd-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 !important;
}

/* Forzar visibilidad en Elementor Products widget */
.elementor-widget-woocommerce-archive-products .wcd-wrapper,
.elementor-products-grid .wcd-wrapper {
    display: block !important;
}

/* Evitar que Woodmart oculte el countdown al hover */
.product-inner:hover .wcd-wrapper,
.wd-product-grid-item:hover .wcd-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── FORZAR layout horizontal en TODOS los contextos ──────────────────────── */
.wcd-wrapper .wcd-digits,
.wcd-wrapper .wcd-digits * {
    display: flex !important;
    flex-direction: row !important;
}
.wcd-wrapper .wcd-unit {
    flex-direction: column !important;
    align-items: center !important;
}
.wcd-wrapper .wcd-sep {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: center;
    padding-bottom: 12px;
}