/* Ajustes visuais para a Loja */
.card-title {
    font-size: 1.1rem;
}
.text-primary {
    color: #0d6efd !important;
}

/* Estilo para inputs desabilitados */
input[readonly], input[disabled] {
    background-color: #f8f9fa !important;
    cursor: not-allowed;
}

/* --- CORREÇÃO STEPPER (TSpinner) BOOTSTRAP 5 - LAYOUT: [-] [INPUT] [+] --- */

/* Container flexível */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* Botão MENOS (Esquerda) */
.input-group > .spin-minus, 
.input-group > [data-spin="down"] {
    order: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem 0 0 0.25rem !important;
    border: 1px solid #0d6efd;
    background-color: #0d6efd;
    color: #fff !important;
    text-decoration: none;
    width: 35px;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

/* INPUT (Centro) */
.input-group > input.tspinner,
.input-group > input[data-role="tspinner"],
.input-group > input[name^="extras"] {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    text-align: center;
    border-radius: 0 !important;
    margin: 0 !important;
    border: 1px solid #ced4da;
    border-left: none !important;
    border-right: none !important;
}

/* Botão MAIS (Direita) */
.input-group > .spin-plus,
.input-group > [data-spin="up"] {
    order: 3 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0 0.25rem 0.25rem 0 !important;
    border: 1px solid #0d6efd;
    background-color: #0d6efd;
    color: #fff !important;
    text-decoration: none;
    width: 35px;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

/* Hover nos botões - Azul um pouco mais escuro */
.input-group > a:hover {
    background-color: #0b5ed7;
    color: #fff !important;
    border-color: #0a58ca;
}

/* Estado Desativado - Volta para cores neutras */
.input-group > input[readonly] ~ a {
    pointer-events: none;
    background-color: #f8f9fa;
    color: #adb5bd !important;
    border-color: #dee2e6;
}

/* --- BOTÃO CALL TO ACTION (CARRINHO) --- */
.btn-cta-cart {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.btn-cta-cart:hover {
    background-color: #0b5ed7 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.3) !important;
}

.btn-cta-cart:active {
    transform: translateY(0);
}

/* Tooltip customizado via CSS puro - sem JS, sem conflito */
[data-tip] { 
    position: relative !important; 
}
[data-tip]::after { 
    content: attr(data-tip); 
    position: absolute; 
    top: 110%; 
    left: 50%; 
    transform: translateX(-50%); 
    background: rgba(0,0,0,0.85); 
    color: #fff; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-family: sans-serif;
    white-space: nowrap; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.2s ease; 
    pointer-events: none; 
    z-index: 999999 !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
[data-tip]:hover::after { 
    opacity: 1; 
    visibility: visible; 
}