/* ==========================================================================
   Estilos del Plugin WooCommerce Wholesale Variations
   ========================================================================== */

/* Ocultar formulario nativo de WooCommerce */
form.cart.variations_form { 
    display: none !important; 
}

/* Estilos de Contenedor y Tabla */
.wholesale-container { 
    margin-bottom: 2em; 
    background: #fdfdfd; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid #eaeaea; 
}

.wholesale-table { 
    width: 100%; 
    text-align: left; 
    border-collapse: collapse; 
    margin-bottom: 20px;
}

.wholesale-table th, 
.wholesale-table td { 
    padding: 12px 10px; 
    border-bottom: 1px solid #ddd; 
    vertical-align: middle; 
}

/* Estilos de Botones de Color (Swatches) */
.wholesale-swatches { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 20px; 
}

.swatch-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    padding: 8px 16px; 
    border: 2px solid #ccc; 
    background: #fff; 
    cursor: pointer; 
    border-radius: 6px; 
    transition: all 0.2s ease;
}

.swatch-btn.active { 
    border-color: #000; 
    background: #f0f0f0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.swatch-btn:hover:not(.active) { 
    border-color: #999; 
}

.color-circle { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    border: 1px solid rgba(0,0,0,0.15); 
}

/* Selectores de Cantidad */
.qty-selector { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

.qty-btn { 
    background: #eee; 
    border: 1px solid #ccc; 
    width: 32px; 
    height: 32px; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 4px;
}

.qty-btn:hover { 
    background: #e0e0e0; 
}

.qty-input { 
    width: 70px !important; 
    text-align: center; 
    padding: 5px !important; 
    margin: 0 !important; 
    -moz-appearance: textfield; 
}

.qty-input::-webkit-outer-spin-button, 
.qty-input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* Botón de Enviar */
#wholesale-add-to-cart { 
    width: 100%; 
    padding: 15px; 
    font-size: 1.1em; 
    transition: background 0.3s; 
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .wholesale-table th, 
    .wholesale-table td { 
        padding: 8px 5px; 
        font-size: 0.9em; 
    }
    .qty-input { 
        width: 50px !important; 
    }
}