/* --- Contenedor Principal --- */
.sb-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    justify-content: var(--sb-align);
}

/* --- Input de Cantidad --- */
.sb-qty {
    /* Aumentamos el ancho a 80px para que quepan las flechas y el número cómodamente */
    width: 80px !important; 
    height: 40px !important;
    text-align: center !important;
    font-size: 16px !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 0 2px 0 10px !important; /* Padding ajustado para dejar espacio al número */
    display: inline-block !important;
    margin: 0 !important;
    
    /* RESTAURAR FLECHAS: Eliminamos el código que ocultaba las flechas */
    appearance: auto !important; 
    -moz-appearance: number-input !important;
    -webkit-appearance: number-input !important;
}

/* --- Ajuste fino para navegadores Webkit (Chrome, Safari, Edge) --- */
/* Esto asegura que las flechas sean visibles y tengan espacio */
.sb-qty::-webkit-inner-spin-button, 
.sb-qty::-webkit-outer-spin-button {  
    opacity: 1 !important;
    height: 30px !important;
}

/* --- Botón de Añadir --- */
.sb-add-btn {
    background-color: var(--sb-main-color) !important;
    color: white !important;
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s;
}

.sb-add-btn:hover {
    filter: brightness(1.2);
}

/* --- Feedback de Éxito --- */
.sb-feedback {
    font-size: 12px;
    margin-top: 5px;
    height: 18px;
    font-weight: 600;
}