/**
 * 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)
   ======================================== */

/* Mientras guarda la cantidad, recién guardada y si falló (#907): los tonos de la tienda, un
   punto más fuertes que los pasteles para que se lean como borde. */
.qty-input.is-guardando {
    border: 1px solid #FFBC8F !important;
}

.qty-input.is-guardado {
    border: 1px solid #7FD8B5 !important;
}

.qty-input.is-error {
    border: 1px solid #FF8F88 !important;
}

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

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