/* Polling de stock en vivo (frontend tienda). Prefijo fs- por convención.
   El botón "Consultar stock" se estiliza con utilidades Tailwind directamente en
   assets/js/fs-stock-poll-product.js (clase de marca: .fs-stock-check-btn). Aquí
   quedan solo los estilos que se aplican a elementos del TEMA (el número de stock
   y el botón de compra), donde Tailwind no llega. */

/* Estado "verificando stock en vivo" sobre el número de stock. Pulsa la
   opacidad para que se note que el dato se está actualizando (no un atenuado
   estático) + spinner al lado. */
.fs-stock-updating {
    animation: fs-stock-pulse 1s ease-in-out infinite;
}

.fs-stock-updating::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fs-stock-spin .6s linear infinite;
}

@keyframes fs-stock-spin {
    to { transform: rotate(360deg); }
}

@keyframes fs-stock-pulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: .85; }
}

.fs-stock-blocked {
    cursor: not-allowed !important;
    opacity: .6 !important;
    position: relative;
}

/* Candado en hover sobre "Añadir al carrito" cuando está agotado. Refuerza que
   el botón está bloqueado por falta de stock (no por un error). El glyph va en
   ::after para no tocar el texto del botón (que es markup del tema). */
.single_add_to_cart_button.fs-stock-blocked:hover::after,
.single_add_to_cart_button.fs-stock-blocked:focus-visible::after {
    content: "\1F512"; /* 🔒 */
    margin-left: 8px;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
}

/* Formulario de compra en estado agotado/no disponible: la cantidad queda
   VISIBLE pero DESACTIVADA (atenuada y no interactiva), nunca oculta. El botón
   queda visible pero deshabilitado. Ambos se reactivan en vivo al reponer stock
   (listener fs:stock-updated del tema + paintStock del plugin togglean el atributo
   `disabled` real del input/botón). */
form.cart.tm-purchase--out .quantity {
    opacity: .55;
    pointer-events: none;
}

form.cart.tm-purchase--out .qty {
    background: #f1f5f9 !important;
    cursor: not-allowed !important;
}