/* ═══════════════════════════════════════════════════════
   BYBUU EFECTOS VISUALES — efectos.css v3.0
   NO modifica dimensiones, márgenes ni layout del tema.
   NO toca el badge de porcentaje de oferta de WoodMart.
═══════════════════════════════════════════════════════ */

/* ─── BARRA LÁSER ─────────────────────────────────────
   IMPORTANTE: usamos ::before en lugar de ::after
   porque WoodMart usa ::after para el badge de oferta (-30%).
   Con ::before no interfiere con nada del tema.
─────────────────────────────────────────────────────── */
ul.products li.product {
    position: relative !important;
}

ul.products li.product::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(
        90deg,
        #ff4400 0%,
        #ff8800 20%,
        #ffcc00 50%,
        #ff8800 80%,
        #ff4400 100%
    ) !important;
    background-size: 300% 100% !important;
    animation: byefLaser 1.8s linear infinite !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

@keyframes byefLaser {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* ─── TICKER VERTICAL ─────────────────────────────────
   Altura fija, overflow hidden, textos se mueven en Y
─────────────────────────────────────────────────────── */
.byef-ticker-wrap {
    width: 100%;
    height: 20px;
    overflow: hidden;
    position: relative;
    margin: 4px 0 5px;
}

.byef-ticker-inner {
    display: flex;
    flex-direction: column;
}

.byef-ticker-item {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.byef-tick-verified { color: #2e7d32; }
.byef-tick-verified::before {
    content: '✓';
    font-weight: 900;
    color: #2e7d32;
    margin-right: 3px;
}

.byef-tick-shipping { color: #555555; }
.byef-tick-shipping::before {
    content: '🚚';
    margin-right: 3px;
    font-size: 11px;
}

.byef-tick-urgent {
    color: #ff4400;
    font-weight: 700;
    animation: byefBlink 1.2s ease-in-out infinite;
}
.byef-tick-urgent::before {
    content: '⚠️';
    margin-right: 3px;
    font-size: 11px;
    animation: none;
}

@keyframes byefBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Transición vertical — sale por arriba, entra por abajo */
.byef-ticker-inner.slide-out {
    animation: byefSlideOut 0.35s cubic-bezier(.4,0,.2,1) forwards;
}
.byef-ticker-inner.slide-in {
    animation: byefSlideIn 0.35s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes byefSlideOut {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0; }
}
@keyframes byefSlideIn {
    from { transform: translateY(100%);  opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ─── COUNTDOWN ───────────────────────────────────────*/
.byef-countdown {
    font-size: 10px;
    color: #888;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.byef-cd-val {
    font-weight: 700;
    color: #ff4400;
    font-variant-numeric: tabular-nums;
}

/* ─── URGENCIA EN CARRITO ─────────────────────────────*/
.byef-cart-urgency {
    background: #fff5f3;
    border: 1px solid rgba(255,68,0,.25);
    border-left: 4px solid #ff4400;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #cc2200;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.byef-cart-urgency strong { color: #ff4400; }
.byef-cart-timer {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #ff4400;
    font-size: 14px;
}

/* ─── RIPPLE ──────────────────────────────────────────*/
.byef-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transform: scale(0);
    animation: byefRipple 0.55s linear;
    pointer-events: none;
    z-index: 99;
}
@keyframes byefRipple {
    to { transform: scale(4); opacity: 0; }
}

/* ─── CANVAS CONFETTI ─────────────────────────────────*/
#byef-confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 999999;
}

/* ─── COLOR PRECIO — solo color, sin tocar nada más ──*/
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price bdi { color: #111 !important; }

ul.products li.product .price ins .woocommerce-Price-amount,
ul.products li.product .price ins bdi { color: #ff4400 !important; }

ul.products li.product .price del .woocommerce-Price-amount,
ul.products li.product .price del bdi { color: #aaa !important; }

.woocommerce div.product .price ins .woocommerce-Price-amount,
.woocommerce div.product .price ins bdi { color: #ff4400 !important; }

/* ─── COLOR BOTÓN — solo color, sin tocar tamaño ─────*/
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product .add_to_cart_button {
    background-color: #ff4400 !important;
    color: #fff !important;
    border-color: #ff4400 !important;
}
ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product .add_to_cart_button:hover {
    background-color: #e03a00 !important;
    border-color: #e03a00 !important;
    color: #fff !important;
}