/* Tensa v7 - Estilos del Frontend */

/* Ocultar botón duplicado de Astra */
.ast-on-card-button { display: none !important; }

/* ==========================================================================
   CATÁLOGO - Botones uno AL LADO del otro
   ========================================================================== */

/* Botón WhatsApp - IGUAL que "Agregar al carrito" */
/* FORZAR estilos específicos para botón en loop de productos */
.products li .tensa-whatsapp-loop-btn,
.woocommerce ul.products li.product .tensa-whatsapp-loop-btn {
    /* Reset de estilos de WooCommerce */
    all: unset !important;

    /* Flexbox para alineación */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;

    /* Estilos visuales */
    background: #2BB826 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;

    /* Tamaño consistente */
    min-height: 35px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin: 8px 4px !important;

    /* Tipografía */
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;

    /* Comportamiento */
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* Efecto hover */
.products li .tensa-whatsapp-loop-btn:hover,
.woocommerce ul.products li.product .tensa-whatsapp-loop-btn:hover {
    background: #128C7E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

a.tensa-whatsapp-loop-btn:hover {
    background: #1DA851 !important;
    color: #ffffff !important;
}

/* Ícono WhatsApp - visible */
.tensa-whatsapp-icon-loop {
    width: 35px !important;
    height: 26px !important;
    vertical-align: middle !important;
    margin-bottom: .2em!important;
    margin-left: .5rem!important;
}

/* ==========================================================================
   PÁGINA INDIVIDUAL - Al lado del botón azul
   ========================================================================== */

/* Form con flexbox */
body.single-product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Orden */
body.single-product form.cart .quantity { order: 1 !important; }
body.single-product form.cart button.single_add_to_cart_button { order: 2 !important; }
body.single-product a.tensa-whatsapp-button { order: 3 !important; }

/* Botón WhatsApp individual - MISMO estilo que botón azul */
body.single-product a.tensa-whatsapp-button {
    display: inline-block !important;

    /* Estilo */
    background: #2BB826 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;

    /* Tamaño - MISMO padding que single_add_to_cart_button */
    padding: 13px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.618 !important;

    /* Otros */
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: background 0.3s ease !important;
}

body.single-product a.tensa-whatsapp-button:hover {
    background: #1DA851 !important;
    color: #ffffff !important;
}

/* Ícono WhatsApp individual */
body.single-product .tensa-whatsapp-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    /* SIN filter - mantener verde original */
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Catálogo: full width en móvil */
    a.tensa-whatsapp-loop-btn {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }

    /* Individual: stack vertical */
    body.single-product form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.single-product form.cart .quantity,
    body.single-product form.cart button.single_add_to_cart_button,
    body.single-product a.tensa-whatsapp-button {
        width: 100% !important;
        margin: 8px 0 !important;
    }
}

/* ==========================================================================
   FORMULARIO DE REGISTRO - Mostrar/ocultar taller
   ========================================================================== */

#billing_company { display: block !important; }
.oculto { display: none; }