/* ===== Paleta e tipografia da loja (inspirada no diecastusa.com) ===== */
:root {
    --brand-navy: #003566;
    --brand-navy-rgb: 0, 53, 102;
    --brand-accent: #ffd60a;
    --brand-accent-rgb: 255, 214, 10;
    --brand-ink: #000814;

    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: var(--brand-navy-rgb);
    --bs-primary-bg-subtle: #d6e2ee;
    --bs-primary-border-subtle: #a8c1da;
    --bs-primary-text-emphasis: var(--brand-navy);
    --bs-link-color: var(--brand-navy);
    --bs-link-color-rgb: var(--brand-navy-rgb);
    --bs-link-hover-color: var(--brand-ink);
    --bs-link-hover-color-rgb: 0, 8, 20;

    --bs-body-font-family: 'Questrial', sans-serif;
}

:root[data-bs-theme="dark"] {
    --bs-primary: #4d7bab;
    --bs-primary-rgb: 77, 123, 171;
    --bs-primary-bg-subtle: #0d2438;
    --bs-primary-border-subtle: #1f4a6e;
    --bs-primary-text-emphasis: #8fb4d6;
    --bs-link-color: #8fb4d6;
    --bs-link-color-rgb: 143, 180, 214;
    --bs-link-hover-color: #ffd60a;
    --bs-link-hover-color-rgb: 255, 214, 10;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .fw-bold, .card-title, .btn {
    font-family: 'Archivo', sans-serif;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: #002649;
    --bs-btn-hover-border-color: #002649;
    --bs-btn-active-bg: #002649;
    --bs-btn-active-border-color: #002649;
}

.btn-accent {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-ink);
    font-weight: 600;
}
.btn-accent:hover,
.btn-accent:focus {
    background: #e6c009;
    border-color: #e6c009;
    color: var(--brand-ink);
}

/* Navbar clara estilo diecastusa: fundo branco, links escuros em maiúsculas */
.navbar-diecast {
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.navbar-diecast .navbar-brand {
    color: var(--brand-ink);
}
.navbar-diecast .nav-link {
    color: var(--brand-ink);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.navbar-diecast .nav-link:hover,
.navbar-diecast .nav-link:focus {
    color: var(--brand-navy);
}
.navbar-diecast .dropdown-toggle::after {
    color: inherit;
}

/* Ícones utilitários da navbar (frete, tema, carrinho, conta) — botões
   "fantasma", sem fundo/borda, no estilo minimalista do diecastusa. */
.navbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--brand-ink);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.navbar-icon-btn:hover,
.navbar-icon-btn:focus {
    background: rgba(0, 8, 20, .06);
    color: var(--brand-navy);
}
.navbar-icon-btn.dropdown-toggle::after { display: none; }

:root[data-bs-theme="dark"] .navbar-diecast {
    background: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color-translucent);
}
:root[data-bs-theme="dark"] .navbar-diecast .navbar-brand,
:root[data-bs-theme="dark"] .navbar-diecast .nav-link,
:root[data-bs-theme="dark"] .navbar-icon-btn {
    color: #fff;
}
:root[data-bs-theme="dark"] .navbar-diecast .nav-link:hover,
:root[data-bs-theme="dark"] .navbar-diecast .nav-link:focus,
:root[data-bs-theme="dark"] .navbar-icon-btn:hover,
:root[data-bs-theme="dark"] .navbar-icon-btn:focus {
    color: var(--brand-accent);
    background: rgba(255, 255, 255, .08);
}
:root[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

.footer-diecast {
    background: var(--brand-navy);
}

/* Cards de miniaturas */
.miniatura-card {
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
}

/* Área da imagem com feedback para Mobile */
.miniatura-img-wrapper {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
}

/* Overlay para indicar clique no mobile/hover */
.miniatura-img-wrapper::after {
    content: "🔍 Detalhes";
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.75rem;
    text-align: center;
    padding: 4px 0;
    opacity: 0;
    transition: opacity 0.3s;
}

@media (max-width: 768px) {
    .miniatura-img-wrapper { height: 150px; }
    .miniatura-img-wrapper::after { opacity: 0.8; } /* Visível no mobile */
}

.miniatura-img-wrapper:hover::after {
    opacity: 1;
}

/* Imagem */
.miniatura-img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.miniatura-img-wrapper:hover .miniatura-img {
    transform: scale(1.05);
}

/* Suporte ao Tema Escuro do Bootstrap 5.3+ */
[data-bs-theme="dark"] .miniatura-img-wrapper,
[data-bs-theme="dark"] .estoque-img-wrapper,
[data-bs-theme="dark"] .selecao-miniatura-img,
[data-bs-theme="dark"] .garagem-img-wrapper {
    background-color: #2b3035;
}

/* Modal imagem */
#modalImagem {
    max-height: 60vh;
    object-fit: contain;
}

/* Outros elementos existentes */
.estoque-img-wrapper {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.estoque-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.selecao-miniatura-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.list-group-item {
    align-items: center;
}

.garagem-img-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.garagem-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.auth-container {
    max-width: 420px;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .auth-container { padding: 0 10px; }
}

.auth-card { border-radius: 12px; }
.auth-title { font-weight: 600; text-align: center; }
.auth-subtitle { text-align: center; color: #6c757d; font-size: 0.9rem; }
.form-control { padding: 0.65rem 0.75rem; }
.btn { border-radius: 8px; }
/* =====================================================================
   Acabamento de tipografia, superfície e estados
   ---------------------------------------------------------------------
   Vale para as telas internas e para a loja (os dois bases carregam este
   arquivo). Tudo aqui usa variável do Bootstrap, para acompanhar a troca
   de tema clara/escura.
   ===================================================================== */

/* --- Tipografia -------------------------------------------------------
   Título grande com tracking negativo e entrelinha curta tem mais peso;
   em texto pequeno o efeito se inverte, por isso só nos maiores. */
h1, .h1 { letter-spacing: -.025em; line-height: 1.12; }
h2, .h2 { letter-spacing: -.02em;  line-height: 1.18; }
h3, .h3 { letter-spacing: -.015em; line-height: 1.25; }

/* Evita a palavra órfã sozinha na última linha do título. */
h1, h2, h3, .card-title, .modal-title { text-wrap: balance; }
p, .lead { text-wrap: pretty; }

/* Texto corrido confortável fica em torno de 65 caracteres por linha. */
.prosa { max-width: 65ch; }

/* Números de larguras iguais: em tabela e valor em R$ as colunas alinham
   e dá para comparar de relance. */
table, .tabular, .badge, .font-monospace { font-variant-numeric: tabular-nums; }

/* Rótulo em caixa alta só funciona com tracking positivo. */
.text-uppercase { letter-spacing: .04em; }

/* --- Superfície -------------------------------------------------------
   Sombra preta pura sobre fundo colorido suja; tingir com o azul da marca
   mantém a luz vindo de um lugar só. */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(var(--brand-navy-rgb), .06),
                0 1px 3px rgba(var(--brand-navy-rgb), .10) !important;
}
.shadow {
    box-shadow: 0 2px 4px rgba(var(--brand-navy-rgb), .06),
                0 6px 16px rgba(var(--brand-navy-rgb), .12) !important;
}
:root[data-bs-theme="dark"] .shadow-sm,
:root[data-bs-theme="dark"] .shadow {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .45) !important;
}

/* Raio concêntrico: o contêiner é mais macio que o que está dentro dele. */
.card { border-radius: 12px; }
.card .btn, .card .form-control, .card .form-select { border-radius: 8px; }

/* Cinza fixo não acompanha o tema escuro. */
.miniatura-img-wrapper,
.estoque-img-wrapper,
.selecao-miniatura-img,
.garagem-img-wrapper { background-color: var(--bs-secondary-bg); }

/* --- Estados ----------------------------------------------------------
   Foco visível é requisito de acessibilidade: quem navega por teclado
   precisa saber onde está. */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Resposta ao toque: o botão afunda de leve, como um botão de verdade. */
.btn {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }

/* O card inteiro responde ao ponteiro quando ele leva a algum lugar. */
.card-clicavel { transition: transform .18s ease, box-shadow .18s ease; }
.card-clicavel:hover,
.card-clicavel:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--brand-navy-rgb), .16) !important;
}

/* Link de tabela e item de lista também mudam no hover. */
.table-hover > tbody > tr:hover > * { background-color: var(--bs-tertiary-bg); }

/* --- Toque e rolagem --------------------------------------------------- */
/* Remove o atraso de 300ms do duplo-toque no celular. */
a, button, .btn, [role="button"], input, select, textarea,
.form-check-input, .nav-link { touch-action: manipulation; }

/* Fonte menor que 16px faz o iOS dar zoom sozinho ao focar o campo. */
@media (max-width: 576px) {
    .form-control, .form-select, input, select, textarea { font-size: 16px; }
}

html { scroll-behavior: smooth; }
h1, h2, h3, h4, [id] { scroll-margin-top: 5rem; }

/* Modal e gaveta não devem arrastar a página atrás deles. */
.modal-body, .offcanvas-body { overscroll-behavior: contain; }

/* --- Quem pediu menos movimento recebe menos movimento ----------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .btn:active, .card-clicavel:hover { transform: none; }
}