/**
 * Estilos Unificados para Inputs de Cantidad
 * ==========================================
 * Aplica a:
 * - Detalle de producto
 * - Offcanvas del carrito
 * - Página del carrito (/carrito)
 *
 * Unifica la apariencia en todos los componentes
 */

/* ========================================
   QUANTITY WRAPPER - Contenedor
   ======================================== */

.quantity-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #000;
    padding: 4px 12px;
    gap: 8px;
}

/* ========================================
   QUANTITY BUTTONS - Botones +/-
   ======================================== */

.quantity-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    color: #000;
    transition: opacity 0.2s;
}

.quantity-btn:hover:not(:disabled) {
    opacity: 0.7;
}

.quantity-btn:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

/* ========================================
   QUANTITY INPUT - Campo numérico
   ======================================== */

/* Ocultar spinners en todos los browsers */
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Estilos base del input */
.qty-input {
    -moz-appearance: textfield; /* Firefox */
    text-align: center !important;
    width: 40px !important;
    font-size: 1rem;
}

/* Sobrescribir Bootstrap cuando tiene .form-control */
.form-control.qty-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Estado focus - sin cambios visuales */
.form-control.qty-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   ESTADOS VISUALES (CartManager)
   ======================================== */

/* Estado loading - borde amarillo */
.qty-input.border-warning {
    border: 1px solid #ffc107 !important;
    border-radius: 2px;
}

/* Estado success - borde verde */
.qty-input.border-success {
    border: 1px solid #28a745 !important;
    border-radius: 2px;
}

/* Estado error - borde rojo */
.qty-input.border-danger {
    border: 1px solid #dc3545 !important;
    border-radius: 2px;
}

/* ========================================
   VARIANTES - Offcanvas sin borde
   ======================================== */

/* Para offcanvas, remover borde del wrapper */
.offcanvas .quantity-wrapper {
    border: none;
    padding: 0;
}