/* Estilos base - estos serán sobrescritos por el CSS dinámico si se configuran colores personalizados */
.qty-up, .qty-down {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    height: 100%;
    min-height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.qty-up:hover, .qty-down:hover {
    background-color: #005880;
    color: white;
}

/* Asegurar que los botones estén alineados correctamente con el input */
.quantity {
    display: inline-flex;
    align-items: stretch;
}

.quantity input[type="number"] {
    text-align: center;
    margin: 0 5px;
    min-height: 40px;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 10px;
}

/* Ocultar las flechas predeterminadas del input number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Responsive */
@media (max-width: 768px) {
    .qty-up, .qty-down {
        padding: 0 12px;
        min-height: 44px; /* Mejor área táctil en móviles */
    }
    
    .quantity input[type="number"] {
        min-height: 44px;
    }
}