/* ===========================================================
   Fundo de galáxia nas páginas internas.

   A home já é escura; sem isto a navegação pisca branco a cada
   clique. Aqui o tema inteiro passa a ler tokens escuros e as
   superfícies brancas viram vidro sobre a galáxia.

   Escopo: tudo sob html.galaxy-bg, marcada no <head> apenas nas
   páginas que recebem o fundo — a home e o admin ficam intactos.
   =========================================================== */

html.galaxy-bg {
  /* Os componentes do tema já leem estes tokens; trocá-los aqui
     evita caçar regra por regra. */
  --text: #f3f5f8;
  --text-2: #b6c0ca;
  --text-3: #95a0ab;
  --bg: transparent;
  --bg-2: rgba(255, 255, 255, .04);
  --bg-5: rgba(255, 255, 255, .04);
  --bg-7: rgba(255, 255, 255, .04);
  --surface: rgba(255, 255, 255, .05);
  --on-surface: #f3f5f8;
  --line: rgba(255, 255, 255, .13);

  background: #05050a;
}

html.galaxy-bg body {
  background: transparent;
  color: var(--text-2);
}

/* O canvas é fixed/z-0 (vem do galaxy-home.css); o conteúdo precisa
   subir para ficar acima dele. */
html.galaxy-bg #wrapper,
html.galaxy-bg .galaxy-stage--site ~ #wrapper {
  position: relative;
  z-index: 2;
}

/* A vinheta da home fecha o centro da tela; numa página de conteúdo
   isso apaga o texto. Aqui ela só escurece as bordas. */
html.galaxy-bg .galaxy-stage--site .galaxy-vignette {
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 42%, rgba(5, 5, 10, .55) 78%, rgba(5, 5, 10, .88) 100%),
    linear-gradient(180deg, rgba(5, 5, 10, .55) 0%, transparent 18%, transparent 72%, rgba(5, 5, 10, .8) 100%);
}

/* ---------- superfícies ---------- */
/* O tema pinta muita coisa de branco no literal, não via token. */
html.galaxy-bg .main-content,
html.galaxy-bg .tf-main-product,
html.galaxy-bg .flat-spacing,
html.galaxy-bg .tf-breadcrumb,
html.galaxy-bg section,
html.galaxy-bg .tf-sp { background-color: transparent; }

html.galaxy-bg .card,
html.galaxy-bg .tf-card,
html.galaxy-bg .box-content,
html.galaxy-bg .widget,
html.galaxy-bg .tf-sidebar,
html.galaxy-bg .contact-form-wrap,
html.galaxy-bg .form-contact,
html.galaxy-bg .tf-product-info,
html.galaxy-bg .accordion-item,
html.galaxy-bg .tf-cart-item,
html.galaxy-bg .table,
html.galaxy-bg .tf-page-cart-sidebar,
html.galaxy-bg .box-order {
  background-color: rgba(255, 255, 255, .045);
  border-color: var(--line);
  color: var(--text-2);
  backdrop-filter: blur(6px);
}

/* ---------- formulários ---------- */
html.galaxy-bg input:not([type="checkbox"]):not([type="radio"]),
html.galaxy-bg select,
html.galaxy-bg textarea,
html.galaxy-bg .form-control,
html.galaxy-bg .form-select {
  background-color: rgba(255, 255, 255, .06);
  border-color: var(--line);
  color: var(--text);
}

html.galaxy-bg input::placeholder,
html.galaxy-bg textarea::placeholder { color: var(--text-3); opacity: 1; }

html.galaxy-bg input:focus,
html.galaxy-bg textarea:focus,
html.galaxy-bg select:focus,
html.galaxy-bg .form-control:focus {
  background-color: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .34);
  color: var(--text);
}

/* O select nativo desenha as opções com as cores do sistema. */
html.galaxy-bg select option { background: #14161c; color: #f3f5f8; }

/* ---------- tipografia e links ---------- */
html.galaxy-bg h1, html.galaxy-bg h2, html.galaxy-bg h3,
html.galaxy-bg h4, html.galaxy-bg h5, html.galaxy-bg h6 { color: var(--text); }

html.galaxy-bg .cl-text, html.galaxy-bg .cl-text-2 { color: var(--text-2) !important; }
html.galaxy-bg .cl-text-3 { color: var(--text-3) !important; }
html.galaxy-bg .text-dark, html.galaxy-bg .text-body { color: var(--text-2) !important; }
html.galaxy-bg .bg-white, html.galaxy-bg .bg-light {
  background-color: rgba(255, 255, 255, .05) !important;
}

html.galaxy-bg .tf-breadcrumb a,
html.galaxy-bg .breadcrumb a { color: var(--text-3); }
html.galaxy-bg .tf-breadcrumb a:hover,
html.galaxy-bg .breadcrumb a:hover { color: var(--text); }

/* Preço riscado: o tema escurece para contraste em fundo claro. */
html.galaxy-bg .cl-text-3.text-decoration-line-through { color: #8d97a1 !important; }

/* ---------- botões ---------- */
html.galaxy-bg .btn-outline,
html.galaxy-bg .tf-btn.btn-outline {
  border-color: rgba(255, 255, 255, .32);
  color: var(--text);
}
html.galaxy-bg .btn-outline:hover,
html.galaxy-bg .tf-btn.btn-outline:hover {
  background-color: #fff;
  color: #101010;
}

/* ---------- divisores e tabelas ---------- */
html.galaxy-bg hr,
html.galaxy-bg .border,
html.galaxy-bg .border-top,
html.galaxy-bg .border-bottom,
html.galaxy-bg .border-start,
html.galaxy-bg .border-end { border-color: var(--line) !important; }

html.galaxy-bg table th,
html.galaxy-bg table td { border-color: var(--line); color: var(--text-2); }

/* ---------- blocos que precisam continuar claros ---------- */
/* Mapa, iframes e imagens têm fundo próprio; forçar transparência
   só deixaria uma moldura escura em volta. */
html.galaxy-bg iframe,
html.galaxy-bg .tf-map,
html.galaxy-bg img { background-color: transparent; }

html.galaxy-bg iframe {
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* O rodapé do tema já é escuro; sem isto ele ganha uma faixa sólida
   que corta a galáxia. */
html.galaxy-bg footer,
html.galaxy-bg .footer,
html.galaxy-bg .tf-footer {
  background-color: rgba(5, 5, 10, .72);
  backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  html.galaxy-bg .galaxy-canvas { opacity: .5; }
}

/* ===========================================================
   Componentes que usam --text como FUNDO

   O tema tem ~84 regras com `background: var(--text)` + texto
   branco: o botão escuro do tema claro. Com o token invertido o
   fundo ficou claro e o texto sumiu (branco no branco).

   Num fundo escuro a pílula clara é o visual certo — o que falta
   é escurecer o texto dela, não desfazer a inversão.
   =========================================================== */
html.galaxy-bg .tf-btn,
html.galaxy-bg .contact-button,
html.galaxy-bg .section-contact .contact-form .contact-button,
html.galaxy-bg .tf-action-link,
html.galaxy-bg .btn-wishlist,
html.galaxy-bg .tf-product-pre-order,
html.galaxy-bg .tf-page-pagination .pag-item.active,
html.galaxy-bg .tf-page-pagination .pag-item:hover,
html.galaxy-bg .tf-mini-cart-tool-btn:hover,
html.galaxy-bg .tf-sw-nav-2:hover,
html.galaxy-bg .tf-sw-nav-circle:hover,
html.galaxy-bg .countdown-v04 .countdown__item,
html.galaxy-bg .ec-upsell-bundle .ec-upsell-bundle-add-all,
html.galaxy-bg .ec-cross-sale-section .ec-cross-sale-add-btn,
html.galaxy-bg body#page-auth .amerce-auth-card .btn-auth-submit {
  color: #0c0e13;
}

/* Variantes contornadas continuam com texto claro. */
html.galaxy-bg .tf-btn.btn-outline,
html.galaxy-bg .tf-btn.btn-line,
html.galaxy-bg .tf-btn.btn-white { color: var(--text); }
html.galaxy-bg .tf-btn.btn-white:hover { color: #0c0e13; }

/* O núcleo da galáxia é muito claro e passava por baixo do texto.
   Reduzir o canvas mantém o fundo reconhecível sem apagar a leitura. */
html.galaxy-bg .galaxy-stage--site .galaxy-canvas { opacity: .5; }

/* ===========================================================
   Painéis que o tema pinta de branco no literal
   =========================================================== */
html.galaxy-bg .tf-shop-control,
html.galaxy-bg .bb-product-filter,
html.galaxy-bg .widget-facet,
html.galaxy-bg .canvas-sidebar,
html.galaxy-bg .canvas-sidebar .canvas-body,
html.galaxy-bg .tf-header.header-sticky,
html.galaxy-bg .offcanvas,
html.galaxy-bg .offcanvas .canvas-body {
  background-color: rgba(12, 14, 19, .88) !important;
  backdrop-filter: blur(10px);
  color: var(--text-2);
}

html.galaxy-bg .bb-product-filter,
html.galaxy-bg .widget-facet { border: 1px solid var(--line); border-radius: 10px; }

/* `.bg-dark` usa var(--text) como fundo: com o token invertido a faixa
   escura do topo virou uma barra clara. */
html.galaxy-bg .bg-dark { background-color: rgba(12, 14, 19, .92) !important; }

/* ---------- menus suspensos ----------
   Continuam com fundo branco (é o desenho do tema). Como --text agora é
   claro, o texto dentro deles sumia — mesmo caso do dropdown do header. */
html.galaxy-bg .dropdown-menu,
html.galaxy-bg .sub-menu,
html.galaxy-bg .mega-menu,
html.galaxy-bg .nice-select .list,
html.galaxy-bg .bootstrap-select .dropdown-menu {
  background-color: #ffffff;
  color: #101010;
}

html.galaxy-bg .dropdown-menu a,
html.galaxy-bg .dropdown-menu li,
html.galaxy-bg .dropdown-menu .cus-text,
html.galaxy-bg .sub-menu a,
html.galaxy-bg .sub-menu .cus-text,
html.galaxy-bg .mega-menu a,
html.galaxy-bg .nice-select .list li,
html.galaxy-bg .bootstrap-select .dropdown-menu li a { color: #4a5159; }

html.galaxy-bg .dropdown-menu a:hover,
html.galaxy-bg .sub-menu a:hover,
html.galaxy-bg .mega-menu a:hover,
html.galaxy-bg .nice-select .list li:hover { color: #101010; }

html.galaxy-bg .mega-menu .menu-heading,
html.galaxy-bg .sub-menu .menu-heading { color: #101010; }

/* O controle de faixa de preço desenha trilho e alças claros. */
html.galaxy-bg .noUi-target { background-color: rgba(255, 255, 255, .14); border-color: var(--line); }
html.galaxy-bg .noUi-connect { background-color: var(--primary); }

/* ===========================================================
   Área do cliente (/customer/*)

   O customer.css do plugin pinta `.bb-customer-page` de #fff — é o
   painel branco que aparecia atrás de tudo. O CSS da conta já
   escurecia os filhos (cards, menu, formulários), mas não o
   container, então o branco ficava por baixo.
   =========================================================== */
html.galaxy-bg .bb-customer-page,
html.galaxy-bg .bb-customer-content-wrapper,
html.galaxy-bg .bb-customer-page .customer-body {
  background: transparent !important;
}

html.galaxy-bg .bb-customer-content-wrapper .card,
html.galaxy-bg .bb-customer-content-wrapper .card .card-body {
  background-color: rgba(255, 255, 255, .05) !important;
  color: var(--text-2);
}

/* Tabelas de pedidos, faturas e devoluções. */
html.galaxy-bg .bb-customer-page .table-responsive,
html.galaxy-bg .bb-customer-page .table-responsive .table tbody tr,
html.galaxy-bg .bb-customer-page .table,
html.galaxy-bg .bb-customer-page .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-2);
  border-color: var(--line) !important;
}
html.galaxy-bg .bb-customer-page .table-responsive {
  background-color: rgba(255, 255, 255, .035) !important;
  border-radius: 10px;
}
html.galaxy-bg .bb-customer-page .table thead th { color: var(--text); }

/* Utilitários claros do Bootstrap usados dentro do painel. */
html.galaxy-bg .bb-customer-page .bg-light,
html.galaxy-bg .bb-customer-page .badge-light,
html.galaxy-bg .bb-customer-page .bb-profile-sidebar .bb-profile-user-menu li.list-group-item {
  background-color: rgba(255, 255, 255, .07) !important;
  color: var(--text-2) !important;
}

html.galaxy-bg .bb-customer-page .pagination .page-item .page-link,
html.galaxy-bg .bb-customer-page .pagination .page-item.disabled .page-link {
  background-color: rgba(255, 255, 255, .05);
  border-color: var(--line);
  color: var(--text-2);
}
html.galaxy-bg .bb-customer-page .pagination .page-item .page-link:hover {
  background-color: rgba(255, 255, 255, .12);
  color: var(--text);
}

/* O cabeçalho do perfil é translúcido: sobre o #fff do container ele
   parecia branco e engolia o nome. */
html.galaxy-bg .bb-customer-sidebar-heading .name { color: var(--text); }
html.galaxy-bg .bb-customer-sidebar-heading .email { color: var(--text-3); }

/* O cabeçalho do perfil usa background-IMAGE (gradiente claro) no
   customer.css, não background-color — por isso sobrevivia ao override
   de cor e deixava o nome branco sobre quase-branco. */
html.galaxy-bg .bb-customer-sidebar-heading {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)) !important;
  border-bottom: 1px solid var(--line);
}