/*
 * Archivo de estilos para el plugin Cotizar por WhatsApp para WoodMart
 * Versión 7.1 (Tu Lógica 50/50 + Hook Hijack + Spinner)
 */

/* ========================================================================
 * 1. ESTILOS PARA PÁGINA DE PRODUCTO INDIVIDUAL (Sin cambios)
 * ======================================================================== */
.cotizar-whatsapp-button-single {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}
.cotizar-whatsapp-button-single:hover,
.cotizar-whatsapp-button-single:focus {
    background-color: #128C7E !important;
    border-color: #128C7E !important;
    color: #fff !important;
}
.cotizar-whatsapp-wrapper {
    margin-top: 15px;
}
.cotizar-whatsapp-button-single .wd-icon-whatsapp {
    margin-right: 5px;
    color: #fff !important;
}

/* ========================================================================
 * 2. ESTILOS PARA LOOP DE TIENDA (Tu Lógica 50/50 - Corregida)
 * ======================================================================== */

/* 1. Flexbox container (Tu lógica - CORRECTO) */
.wd-product-footer .wd-add-btn {
    display: flex !important;
    gap: 8px; 
    align-items: center;
    width: 100%;
}

/* 2. ESTADO INICIAL (Normal) para AMBOS botones ('a') */
.wd-product-footer .wd-add-btn > a.button { 
    /* ¡TU LÓGICA 50/50! */
    flex-basis: 50%; 
    flex-grow: 1;
    flex-shrink: 1;

    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 42px; 
    padding: 0 10px !important; 
    
    /* ¡TU BORDE REDONDO! */
    border-radius: 100px !important; 
    
    overflow: hidden; 
    transition: all 0.3s ease !important; 
    white-space: nowrap;
    
    font-size: 14px !important; 
    position: relative; /* ¡NUEVO! Para el spinner */
}

/* 3. ESTADO HOVER (Expandido) */
.wd-product-footer .wd-add-btn > a.button:hover {
    /* ¡TU LÓGICA DE EXPANSIÓN! */
    flex-grow: 5; 
    flex-basis: 70%; 
    border-radius: 35px !important; /* Tu "píldora" */
    font-size: 14px !important;
}

/* 4. ESTADO HOVER (El otro botón) */
.wd-product-footer .wd-add-btn:hover > a.button:not(:hover) {
    /* ¡TU LÓGICA DE ENCOGER! */
    flex-grow: 1;
    flex-basis: 30%; 
    flex-shrink: 5;
}

/* 5. ESTILOS DEL TEXTO (span) DENTRO DE LOS BOTONES */
/* Ocultamos AMBOS spans por defecto */
.wd-product-footer .wd-add-btn > a.button > span {
    display: none; 
    font-size: 0.8rem; 
    line-height: 1;
}
/* Mostramos AMBOS spans en hover */
.wd-product-footer .wd-add-btn > a.button:hover > span {
    display: inline-block; 
}

/* 6. ESTILOS DE NUESTRO BOTÓN (WhatsApp) */
.wd-add-btn .cww-whatsapp-link-btn {
    background-color: #25D366 !important; 
    border-color: #25D366 !important;
    color: #ffffff !important;
}
.wd-add-btn .cww-whatsapp-link-btn:hover {
    background-color: #128C7E !important; 
    border-color: #128C7E !important;
}

/* 7. Icono de WA (SVG) */
.cww-whatsapp-link-btn .cww-svg-icon {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    flex-shrink: 0; 
    display: block; /* Visible por defecto */
    transition: all 0.3s ease;
}
/* TU REGLA: Ocultar icono de WA en hover */
.wd-product-footer .wd-add-btn > a.cww-whatsapp-link-btn:hover > .cww-svg-icon {
    display: none;
}
/* Span de WA */
.wd-product-footer .wd-add-btn > a.cww-whatsapp-link-btn > span.cww-text {
    font-size: 0.8rem;
    margin: 0;
}

/* 8. ESTILOS DEL BOTÓN DE CARRITO (Icono) */
/* El SVG que añadimos en el PHP */
.cww-custom-cart-btn .cww-cart-svg-icon {
    width: 16px; 
    height: 16px;
    fill: #ffffff;
    flex-shrink: 0; 
    display: block; /* Visible por defecto */
    transition: all 0.3s ease;
    margin: 0;
}
/* TU LÓGICA (aplicada al botón de carrito): Ocultar icono en hover */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn:hover > .cww-cart-svg-icon {
    display: none;
}
/* Span de Carrito */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn > span.cww-cart-text {
    font-size: 0.8rem;
    margin: 0;
}
/* Damos el color morado al botón de carrito */
.wd-add-btn .cww-custom-cart-btn {
    background-color: #6a32e2 !important; 
    border-color: #6a32e2 !important;
    color: #ffffff !important;
}
.wd-add-btn .cww-custom-cart-btn:hover {
    background-color: #5527b8 !important; 
    border-color: #5527b8 !important;
}

/* 9. ESTILOS PARA "LEER MÁS" (Producto Viejo) */
/* Aseguramos que el botón "Leer más" se vea normal */
.wd-product-footer .wd-add-btn > a.button:not(.cww-custom-cart-btn):not(.cww-whatsapp-link-btn) {
    width: 100%;
    flex-basis: 100%;
    border-radius: 35px !important;
    font-size: 14px !important;
}
.wd-product-footer .wd-add-btn > a.button:not(.cww-custom-cart-btn):not(.cww-whatsapp-link-btn) > span {
    display: inline-block;
}


/* ========================================================================
 * 10. ¡NUEVO! ANIMACIÓN DE CARGA (SPINNER)
 * ======================================================================== */

/* El spinner en sí (oculto por defecto) */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn::after {
    content: '';
    display: none; /* Oculto por defecto */
    width: 16px;   /* Tamaño del spinner (igual que el icono) */
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3); /* Círculo base */
    border-top-color: #ffffff; /* Color del giro */
    border-radius: 50%;
    animation: cww-spin 0.8s linear infinite;
    
    /* Centrado absoluto (el 'a' tiene position: relative) */
    position: absolute; 
    top: 50%;
    left: 50%;
    margin-top: -8px; /* -(height/2) */
    margin-left: -8px; /* -(width/2) */
}

/* Animación del spinner */
@keyframes cww-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cuando el botón de carrito está .loading... */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn.loading {
    /* 1. Forzarlo a NO expandirse, incluso en hover */
    /* (Usamos tus reglas de "encoger") */
    flex-grow: 1 !important;
    flex-basis: 30% !important; 
    flex-shrink: 5 !important;
    border-radius: 100px !important; /* Mantenerlo redondo */
}
/* Si el usuario NO está en hover, forzar estado 50/50 */
.wd-product-footer .wd-add-btn:not(:hover) > a.cww-custom-cart-btn.loading {
    flex-basis: 50% !important;
}

/* 2. Ocultar el SVG del carrito */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn.loading > .cww-cart-svg-icon {
    display: none !important;
}

/* 3. Ocultar el texto (por si acaso estaba en hover) */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn.loading > span {
    display: none !important;
}

/* 4. Mostrar el spinner */
.wd-product-footer .wd-add-btn > a.cww-custom-cart-btn.loading::after {
    display: block;
}

.cww-whatsapp-checkout-button { 
    text-align: center; 
    display: flex; 
    width: 100%;
}

/*
 * =========================================================================
 * 7. BOTONES "AL LADO" EN PÁGINA DE PRODUCTO Y VISTA PREVIA
 * =========================================================================
 */

/* * Usamos Flexbox en el contenedor principal de los botones 
 * (tanto en la página de producto como en la vista previa)
 */
.wd-single-add-to-cart {
    display: flex;
    flex-direction: row; /* Alinea los hijos en fila */
    flex-wrap: wrap;     /* Permite que se apilen si no caben */
    gap: 10px;           /* Espacio entre los botones */
}

/* * Hacemos que cada "botón" (el formulario de 'Añadir' y nuestro
 * contenedor de 'Cotizar') crezcan y ocupen el espacio disponible.
 */
.wd-single-add-to-cart .cart,
.wd-single-add-to-cart .cotizar-whatsapp-wrapper {
    flex: 1 1 200px; /* Crece, se encoge, y base de 200px */
    margin: 0 !important; /* Resetea márgenes de WoodMart */
}

/* * Forzamos que los botones internos ocupen el 100% de su contenedor.
 */
.wd-single-add-to-cart .cart .button,
.wd-single-add-to-cart .cotizar-whatsapp-wrapper .button {
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    margin: 0 !important;
    padding-top: 10px;    /* Ajuste de padding para que se vean iguales */
    padding-bottom: 10px;
    height: auto;
}

/* * Ajuste específico para el botón de cantidad, 
 * para que no se separe del botón "Añadir".
 */
.wd-single-add-to-cart .cart .quantity {
    margin-right: 0; 
}

a.button.wd-add-to-cart-btn.wd-size-s.cotizar-whatsapp-button-single {
    flex: 0 0 auto;
    border-radius: 100px;
}

a.button.wd-add-to-cart-btn.wd-size-s.cotizar-whatsapp-button-single svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    margin-right: 5px;
}

a.button.checkout.wc-forward.cww-whatsapp-checkout-button, a.checkout-button.button.alt.wc-forward {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 100px;
    background-color: #25D366; 
    border-color: #25D366;
    color: #ffffff;
    width: 100%;
}

a.button.checkout.wc-forward.cww-whatsapp-checkout-button:hover, a.checkout-button.button.alt.wc-forward:hover {
    background-color: #128C7E; 
    border-color: #128C7E;
    color: #ffffff;
}

a.button.checkout.wc-forward.cww-whatsapp-checkout-button svg, a.checkout-button.button.alt.wc-forward svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    margin-right: 5px;
}