/* ===== 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; }