/* ===========================================================
   Chrome do tema sobre fundo escuro.

   Estas peças vivem no base.blade.php e aparecem em TODA página:
   pré-carregador, barra inferior do mobile, gaveta do menu, botões
   circulares e rodapé. O tema as pinta de branco no literal, então
   num fundo escuro elas viram blocos brancos.

   Escopo: os dois contextos escuros do site —
     html.galaxy-bg          → páginas gerais (css/galaxy-site.css)
     html:has(.galaxy-stage) → a home (css/galaxy-home.css)
   Fora deles nada é tocado.
   =========================================================== */

html:is(.galaxy-bg, :has(.galaxy-stage)) {
  --gc-void: #05050a;
  --gc-pane: rgba(12, 12, 18, .88);
  --gc-ink: #ffffff;
  --gc-ink-2: rgba(255, 255, 255, .72);
  --gc-ink-3: rgba(255, 255, 255, .5);
  --gc-line: rgba(255, 255, 255, .12);
}

/* ---------- Pré-carregador ----------
   Tela cheia em branco; num site escuro é um flash violento a cada
   navegação (e foi o "retângulo branco" visto em tela). */
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.preload-container, .preload) {
  background-color: var(--gc-void) !important;
}

/* ---------- Barra inferior (mobile) ---------- */
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-toolbar-bottom {
  background: var(--gc-pane) !important;
  border-top: 1px solid var(--gc-line);
  backdrop-filter: blur(14px);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-toolbar-bottom :is(a, span, .toolbar-icon, .toolbar-label) {
  color: var(--gc-ink-2) !important;
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-toolbar-bottom a.active :is(span, .toolbar-icon) {
  color: var(--gc-ink) !important;
}

/* ---------- Gavetas (menu mobile, filtros, carrinho, conta) ---------- */
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas {
  background-color: #0b0b12 !important;
  color: var(--gc-ink-2);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas :is(.offcanvas-title, h1, h2, h3, h4, h5, h6, a, .nav-link) {
  color: var(--gc-ink);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas :is(.offcanvas-header, .offcanvas-footer, hr, .border-bottom, .border-top) {
  border-color: var(--gc-line) !important;
}
/* O X de fechar é um SVG preto embutido no Bootstrap: só inverter resolve. */
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas-backdrop { background-color: #000; }

/* ---------- Botões circulares ----------
   .box-icon  → ações do cartão de produto (favoritar, comparar, ver rápido)
   .go-top    → voltar ao topo */
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.box-icon, .go-top) {
  background-color: var(--gc-pane) !important;
  border: 1px solid var(--gc-line);
  color: var(--gc-ink) !important;
  backdrop-filter: blur(10px);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.box-icon, .go-top):hover {
  background-color: var(--primary, #dc4646) !important;
  border-color: transparent;
  color: #fff !important;
}
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.box-icon, .go-top) :is(span, i, svg) { color: inherit !important; }

/* ---------- Rodapé ----------
   O fundo já vem transparente; o que sobra escuro é o texto. */
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-footer {
  border-top: 1px solid var(--gc-line);
  color: var(--gc-ink-2);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-footer :is(h1, h2, h3, h4, h5, h6, .footer-heading, strong) {
  color: var(--gc-ink);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-footer :is(a, p, li, span) { color: var(--gc-ink-2); }
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-footer a:hover { color: var(--primary, #dc4646); }
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-footer :is(.footer-bottom, hr, .border-top) { border-color: var(--gc-line) !important; }

/* ---------- Modais (busca, login, visualização rápida) ---------- */
html:is(.galaxy-bg, :has(.galaxy-stage)) .modal-content {
  background-color: #0b0b12;
  border: 1px solid var(--gc-line);
  color: var(--gc-ink-2);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .modal-content :is(h1, h2, h3, h4, h5, .modal-title) { color: var(--gc-ink); }
html:is(.galaxy-bg, :has(.galaxy-stage)) .modal-content .btn-close { filter: invert(1) grayscale(1) brightness(2); }

@media (prefers-reduced-motion: reduce) {
  html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.box-icon, .go-top) { transition: none; }
}

/* Botão do estado vazio (carrinho/lista): o tema o entrega com texto branco
   sobre #f3f5f8 — ilegível já no claro, e um bloco claro dentro da gaveta
   escura. Dentro dos nossos contextos escuros ele vira o botão de marca. */
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.offcanvas, .modal-content) .tf-btn.animate-btn {
  background-color: var(--primary, #dc4646) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---------- Miolos claros dentro das gavetas ----------
   A gaveta recebeu fundo escuro, mas os wrappers internos do tema têm
   branco próprio — o menu mobile continuava um bloco branco. */
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas :is(.canvas-body, .canvas-header, .canvas-bottom, .mb-canvas-content, .offcanvas-body) {
  background-color: transparent !important;
  color: var(--gc-ink-2);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .offcanvas :is(.nav-ul-mb li, .mb-item, .tf-category-link) {
  border-color: var(--gc-line) !important;
}

/* ---------- Campos de formulário ----------
   Inputs brancos viram retângulos claros atravessando a galáxia. */
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.offcanvas, .modal-content, .tf-footer, .tf-newsletter, form) :is(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"], textarea, select, .form-control) {
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--gc-line) !important;
  color: var(--gc-ink) !important;
}
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.offcanvas, .modal-content, .tf-footer, .tf-newsletter, form) :is(input, textarea)::placeholder {
  color: var(--gc-ink-3) !important;
}
html:is(.galaxy-bg, :has(.galaxy-stage)) :is(.offcanvas, .modal-content, .tf-footer, .tf-newsletter, form) :is(input, textarea, select):focus {
  border-color: var(--primary, #dc4646) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary, #dc4646) 22%, transparent) !important;
}

/* O JS do tema escreve `background-color:#fff` INLINE no header fixo quando a
   página rola — por isso precisa de !important para o escuro prevalecer. */
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-header.header-sticky {
  background-color: rgba(10, 10, 16, .92) !important;
  border-bottom: 1px solid var(--gc-line);
  backdrop-filter: blur(14px);
}
html:is(.galaxy-bg, :has(.galaxy-stage)) .tf-header.header-sticky :is(a, button, .icon, span) {
  color: var(--gc-ink) !important;
}

/* ---------- Pré-carregador que não sai ----------
   Ele tem z-index 2147483647 e pointer-events auto. Quando o evento `load`
   não dispara (um asset que nunca resolve), a tela inteira fica coberta por
   uma camada invisível que **engole todos os cliques** — foi o que travou o
   botão "Avançar" do configurador.

   Duas travas: nunca interceptar clique (é decorativo) e sumir sozinho
   depois de 4s, independentemente do `load`. */
:is(.preload-container, .preload) {
  pointer-events: none !important;
  animation: chrome-sai-preload 0.4s ease 4s forwards;
}
@keyframes chrome-sai-preload {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.preload-container, .preload) { animation-duration: 0s; }
}

/* ---------------------------------------------------------------------------
   Botão de demo navegável (página do produto).
   `btn-outline` do tema é branco-sobre-branco no fundo escuro — fica invisível.
   Aqui ele vira contorno claro sobre o vazio, no mesmo tom do resto do chrome.
   --------------------------------------------------------------------------- */
.vrv-demo-btn,
.vrv-demo-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #f3f5f8 8%, transparent) !important;
    color: #f3f5f8 !important;
    border: 1px solid color-mix(in srgb, #f3f5f8 35%, transparent) !important;
    transition: background .2s ease, border-color .2s ease;
}

.vrv-demo-btn:hover,
.vrv-demo-btn:focus-visible {
    background: color-mix(in srgb, #f3f5f8 16%, transparent) !important;
    border-color: color-mix(in srgb, #f3f5f8 60%, transparent) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Tecnologias VRV-TECH: produtos nossos, em produção, que entram na vitrine
   para mostrar o que construímos — não para serem comprados. No lugar do
   carrinho fica este bloco.
   --------------------------------------------------------------------------- */
.vrv-tecnologia {
  margin-block: 20px 24px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.vrv-tecnologia__titulo {
  font-size: 13px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  opacity: .8;
}
.vrv-tecnologia__texto {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
  opacity: .78;
}

/* ---------------------------------------------------------------------------
   Logo duplicado.

   O tema imprime os dois logos (claro e escuro) e conta com `is_light`/`is_dark`
   no <html> para esconder um. Aqui o <html> recebe as classes da vitrine
   (galaxy-bg, loja-console...) e nenhuma das duas regras casa — então os dois
   apareciam lado a lado. Como o site é escuro de ponta a ponta, o logo de
   tinta escura só volta se alguém declarar modo claro de propósito.
   --------------------------------------------------------------------------- */
html:not(.is_light) img.logo-light { display: none !important; }