/* css/style.css — Customizações extras além do Tailwind CDN */

/* ── Previne overflow horizontal em TODOS os dispositivos ── */
html, body { max-width: 100%; overflow-x: hidden; }

:root {
    --laranja:  #ff6b00;
    --preto:    #0f0f1a;
    --azul:     #2563eb;
    --dourado:  #f5c842;
}

/* Scrollbar personalizada */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: var(--laranja); border-radius: 3px; }

/* Seleção de texto */
::selection { background: var(--laranja); color: #fff; }

/* Carrossel — oculta scrollbar horizontal */
.carrossel-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carrossel-scroll::-webkit-scrollbar { display: none; }

/* Seletor de cor — círculo clicável */
.btn-cor {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.btn-cor:hover,
.btn-cor.selecionado {
    transform: scale(1.15);
    border-color: var(--laranja);
}

/* Botão primário padrão */
.btn-primario {
    background: var(--laranja);
    color: #fff;
    padding: .65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background .2s, transform .1s;
}
.btn-primario:hover  { background: #e05a00; }
.btn-primario:active { transform: scale(.97); }

/* Badge de estoque esgotado */
.badge-esgotado {
    background: #374151;
    color: #9ca3af;
    padding: .4rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    cursor: not-allowed;
}