/**
 * Fix para el layout del carrito en vista de producto
 * Usa CSS Grid para colocar cantidad y botón lado a lado
 */

/* =========================================================================
   FONDO TRANSPARENTE PARA LA SECCIÓN STICKY
   ========================================================================= */

/* Fondo blanco con transparencia al 30% para toda la sección sticky */
.wd-sticky-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Asegurar que el contenedor también tenga el fondo */
.wd-sticky-btn .wd-sticky-btn-container {
    background: transparent !important;
}

/* Quitar position absolute de la cantidad para evitar problemas de layout */
.wd-quantity-overlap div.quantity {
    position: static !important;
    inset-inline-start: auto !important;
    z-index: auto !important;
    height: auto !important;
    filter: none !important;
    transform: none !important;
}

/* =========================================================================
   FIX CON CSS GRID PARA CARRITO EN VISTA DE PRODUCTO - MOBILE
   ========================================================================= */

@media (max-width: 768.98px) {
    /* Contenedor principal del carrito con CSS Grid */
    .wd-sticky-btn form.cart {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
    }
    
    /* Botón de añadir al carrito - columna izquierda (más ancha) */
    .wd-sticky-btn form.cart .single_add_to_cart_button {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        float: none !important;
        clear: none !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* Contenedor de cantidad - columna derecha (más pequeña) */
    .wd-sticky-btn form.cart .quantity {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
    }
    
    /* Ajustar botones de cantidad para que se vean bien */
    .wd-sticky-btn form.cart .quantity .btn {
        width: 35px !important;
        height: 35px !important;
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: bold !important;
        border: 1px solid #ddd !important;
        background: white !important;
        color: #333 !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Input de cantidad */
    .wd-sticky-btn form.cart .quantity input[type="number"] {
        width: 50px !important;
        height: 35px !important;
        text-align: center !important;
        margin: 0 5px !important;
        padding: 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

/* =========================================================================
   FIX PARA DESKTOP - Mantener layout horizontal
   ========================================================================= */

@media (min-width: 769px) {
    .wd-sticky-btn form.cart {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .wd-sticky-btn form.cart .quantity {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
    }
    
    .wd-sticky-btn form.cart .single_add_to_cart_button {
        flex: 1 !important;
        margin: 0 !important;
    }
}