/* *****************************************************

    Evolution Web — repaint da area do cliente (tema "evolutionweb",
    copia isolada do "six" oficial da WHMCS). So cor, tipografia e logo;
    nenhuma logica de checkout/pagamento foi tocada.

    Paleta e fontes identicas ao site institucional
    (evolutionweb.com.br — ver src/styles/global.css e Header.astro):
      --teal        #002e33  fundo escuro do header/footer
      --teal-2      #05464d  ponta clara do gradiente do header
      --cta         #0e6871  botao de acao
      --cta-hover   #0a565e
      Fontes: Open Sans (corpo) + Poppins (titulos)

***************************************************** */

:root {
  --ew-teal: #002e33;
  --ew-teal-2: #05464d;
  --ew-cta: #0e6871;
  --ew-cta-hover: #0a565e;
  --ew-link: #0e6871;
}

body,
input,
button,
select,
textarea {
  font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.logo-text,
.navbar-main {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
  color: var(--ew-link);
}
a:hover,
a:focus {
  color: var(--ew-cta-hover);
}

/* ===== Cabecalho ===== */
section#header {
  background: linear-gradient(90deg, var(--ew-teal), var(--ew-teal-2));
  border-radius: 0;
}
section#header .logo img {
  max-height: 42px;
}

/* Barra utilitaria (idioma / notificacoes / login) — texto claro no header escuro */
ul.top-nav > li > a {
  color: rgba(255, 255, 255, 0.82);
}
ul.top-nav > li:active > a,
ul.top-nav > li:focus > a,
ul.top-nav > li:hover > a,
ul.top-nav > li > a:focus {
  color: #fff;
}
ul.top-nav > li.primary-action {
  border-left-color: rgba(255, 255, 255, 0.25);
}
ul.top-nav > li.primary-action > a.btn {
  background-color: var(--ew-cta);
}
ul.top-nav > li.primary-action > a.btn:hover {
  background-color: var(--ew-cta-hover);
}

/* Segunda barra de navegacao (aparece em algumas paginas, ex. area logada) */
.navbar-main {
  background-color: var(--ew-teal);
}
.navbar-main li.account {
  background-color: var(--ew-teal-2);
}

/* ===== Botoes ===== */
.btn-primary,
.btn.btn-action {
  background-color: var(--ew-cta);
  border-color: var(--ew-cta-hover);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn.btn-action:hover {
  background-color: var(--ew-cta-hover);
  border-color: var(--ew-cta-hover);
}

/* ===== Rodape ===== */
section#footer {
  background: var(--ew-teal);
  color: rgba(255, 255, 255, 0.72);
  padding: 1.75rem 0;
}
section#footer p {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}
section#footer .back-to-top {
  color: rgba(255, 255, 255, 0.72);
}
section#footer .back-to-top:hover {
  color: #fff;
}
.footer-social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Titulo de pagina (Login, Carrinho, Area do Cliente...) — o tema define essa
   cor com maior especificidade (div.header-lined h1) que o "h1" generico acima */
div.header-lined h1 {
  color: var(--ew-cta);
}
div.header-lined .breadcrumb > .active {
  color: var(--ew-cta);
}

/* ===== Painel/produtos: leve realce de marca em elementos de destaque ===== */
.panel-heading,
.pricing-table .heading {
  border-top-color: var(--ew-cta);
}

/* =====================================================================
   FASE 2 — cards, badges, tabelas, alertas, inputs
   Bootstrap 3 (base do Six) usa raio de 4px, sombra quase nula e cinza
   padrao em tudo isso — e o que ficava "cru". Alinhando ao cartao do
   site institucional: raio maior, sombra suave com tom da marca em vez
   de preto puro, cor nos estados em vez de cinza neutro.
   ===================================================================== */

:root {
  --ew-radius: 14px;
  --ew-shadow: 0 6px 24px rgba(0, 46, 51, 0.12);
  --ew-border: #e5e9ea;
}

/* ----- Cards / paineis (.panel do Bootstrap, usado tambem como .card) ----- */
.panel {
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius);
  box-shadow: var(--ew-shadow);
}
.panel-heading {
  background-color: #f6f9f9;
  border-bottom-color: var(--ew-border);
  border-top-left-radius: var(--ew-radius);
  border-top-right-radius: var(--ew-radius);
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
}
.panel-title {
  color: var(--ew-teal);
}
.well {
  background-color: #f6f9f9;
  border-color: var(--ew-border);
  border-radius: var(--ew-radius);
}

/* ----- Badges / labels de status — pilula, mantendo o texto (nunca so cor) ----- */
.label {
  border-radius: 999px;
  padding: 0.28em 0.85em 0.32em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.label-default { background-color: #7c8a8d; }
.label-primary,
.label-info    { background-color: var(--ew-cta); }
.label-success { background-color: #2f9e5c; }
.label-warning { background-color: #d98a1f; }
.label-danger  { background-color: #d64545; }

/* ----- Tabelas — sem grade pesada, header discreto, sem overflow no mobile ----- */
.table > thead > tr > th {
  background-color: #f6f9f9;
  border-bottom: 2px solid var(--ew-border);
  color: var(--ew-teal);
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: none;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-top-color: var(--ew-border);
}
.table-responsive {
  border-radius: var(--ew-radius);
}

/* ----- Alertas — cantos arredondados, faixa de cor lateral em vez de caixa cheia ----- */
.alert {
  border-radius: var(--ew-radius);
  border-width: 1px;
  border-left-width: 4px;
}
.alert-danger  { border-left-color: #d64545; }
.alert-success { border-left-color: #2f9e5c; }
.alert-warning { border-left-color: #d98a1f; }
.alert-info    { border-left-color: var(--ew-cta); }

/* ----- Lista (list-group) — mesmo raio dos cards, sem duplicar borda entre itens ----- */
.list-group {
  border-radius: var(--ew-radius);
  overflow: hidden;
}
.list-group-item {
  border-color: var(--ew-border);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--ew-cta);
  border-color: var(--ew-cta);
}

/* ----- Inputs — foco com o teal da marca em vez do azul padrao do Bootstrap ----- */
.form-control {
  border-color: var(--ew-border);
  border-radius: 6px;
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--ew-cta);
  box-shadow: 0 0 0 3px rgba(14, 104, 113, 0.15);
}

/* ----- Icones — troca de peso (fas->far) feita direto nos .tpl; aqui so o
   tom neutro para nao competir com o teal em icones decorativos de lista ----- */
.list-group-item > i.fa-fw:first-child,
.panel-body i.far {
  color: #6b7a7d;
}

/* =====================================================================
   FASE 3 — achados nos prints da area logada (04/08/2026)
   ===================================================================== */

/* ----- Botoes semanticos do Bootstrap (Atualizar, Ativar afiliado...) -----
   .btn-success/.btn-warning/.btn-info aparecem em 20+ .tpl com as cores
   padrao do Bootstrap (verde/laranja/azul). Como o texto do botao ja diz
   a acao ("Atualizar", "Ativar conta de afiliado"), a cor nao carrega
   significado unico aqui — unificar para a marca. .btn-danger fica vermelho
   de proposito: acao destrutiva (cancelar/excluir) merece continuar distinta. */
.btn-success,
.btn-info {
  background-color: var(--ew-cta);
  border-color: var(--ew-cta-hover);
}
.btn-success:hover, .btn-success:focus,
.btn-info:hover, .btn-info:focus {
  background-color: var(--ew-cta-hover);
  border-color: var(--ew-cta-hover);
}
.btn-warning {
  background-color: var(--ew-teal);
  border-color: var(--ew-teal-2);
  color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--ew-teal-2);
  color: #fff;
}

/* ----- Cards da home (Produtos/Servicos, Tickets, Registrar dominio...) -----
   O widget de home da WHMCS atribui cor por nome (gold/green/blue/orange...)
   via panel-accent-{cor} e bg-color-{cor}, configurado nos hooks do painel,
   nao no template. Mais simples e confiavel sobrescrever a classe inteira do
   que rastrear qual widget usa qual nome de cor.
   IMPORTANTE: o CSS original declara ".panel.panel-accent-{cor}" (2 classes
   combinadas = especificidade 0,2,0). Meu seletor de atributo sozinho
   "[class*=...]" so vale 0,1,0 — MENOR especificidade sempre perde,
   mesmo carregando depois no cascade. Precisa combinar com ".panel" pra
   igualar a especificidade do original e so entao a ordem (que favorece
   o meu, por vir depois) decide. */
.panel[class*="panel-accent-"] {
  border-top-color: var(--ew-cta) !important;
}
[class*="bg-color-"] {
  background-color: var(--ew-cta);
  border-color: var(--ew-cta-hover);
}

/* ----- Barra de ferramentas das listas (Mostrando X de Y + busca) -----
   Vem de includes/tablelist.tpl: DataTables monta essa barra com
   dom: '<"listtable"fit>pl', e o CSS dela mora em dataTables.bootstrap.css
   (arquivo global do sistema, fora do tema, carregado DEPOIS do custom.css
   porque o <link> dele fica no meio da pagina via {include}, nao no <head>).
   Nao da para editar esse CSS global sem afetar outros temas — !important
   e o jeito correto de vencer uma folha de terceiro que carrega por ultimo. */
.listtable {
  background: var(--ew-teal) !important;
  border-radius: var(--ew-radius) var(--ew-radius) 0 0 !important;
}
.listtable .dataTables_info {
  color: rgba(255, 255, 255, 0.85) !important;
}
.listtable .dataTables_filter input {
  border-radius: 6px !important;
}

/* Cabecalho da propria tabela dentro do wrapper listtable/table-container —
   mesmo tratamento das outras tabelas (Fase 2), so reforcando a especificidade
   porque essas vem com classes extras (table-list) que competem com .table simples */
table.table-list > thead > tr > th {
  background-color: #f6f9f9;
  border-bottom: 2px solid var(--ew-border);
  color: var(--ew-teal);
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

/* ----- Menu "Ola, Nome" no topo — estava sem nenhum toque de marca ----- */
.dropdown-menu {
  border-radius: var(--ew-radius);
  border-color: var(--ew-border);
  box-shadow: var(--ew-shadow);
  padding: 0.4rem 0;
}
.dropdown-menu > li > a {
  padding: 0.5rem 1.1rem;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f6f9f9;
  color: var(--ew-cta);
}

/* =====================================================================
   FASE 4 — varredura completa dos componentes Bootstrap que ainda
   restavam sem toque de marca (abas, modal, progresso, paginacao, status)
   ===================================================================== */

/* ----- Abas (gerenciamento de dominio, detalhe de produto, etc — 7 telas) ----- */
.nav-tabs > li > a {
  color: #5a6a6d;
  border-radius: 6px 6px 0 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--ew-cta);
  border-color: var(--ew-border) var(--ew-border) transparent;
  border-top: 2px solid var(--ew-cta);
}
.nav-tabs > li > a:hover {
  border-color: var(--ew-border);
  background-color: #f6f9f9;
}

/* ----- Modais (confirmacoes, 14 telas usam) ----- */
.modal-content {
  border-radius: var(--ew-radius);
  border: none;
  box-shadow: 0 12px 40px rgba(0, 46, 51, 0.18);
}
.modal-header {
  background-color: #f6f9f9;
  border-top-left-radius: var(--ew-radius);
  border-top-right-radius: var(--ew-radius);
}
.modal-title {
  color: var(--ew-teal);
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ----- Barra de progresso (uso de disco/banda em detalhe de servico) ----- */
.progress {
  border-radius: 999px;
  background-color: #eef2f2;
  height: 10px;
}
.progress-bar {
  background-color: var(--ew-cta);
}
.progress-bar-danger  { background-color: #d64545; }
.progress-bar-warning { background-color: #d98a1f; }
.progress-bar-success { background-color: #2f9e5c; }

/* ----- Paginacao (Bootstrap padrao, usado pelo DataTables) ----- */
.pagination > li > a,
.pagination > li > span {
  color: var(--ew-cta);
  border-color: var(--ew-border);
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: #f6f9f9;
  border-color: var(--ew-border);
  color: var(--ew-cta-hover);
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover {
  background-color: var(--ew-cta);
  border-color: var(--ew-cta);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ew-cta) !important;
  border-color: var(--ew-cta) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f6f9f9 !important;
  border-color: var(--ew-border) !important;
  color: var(--ew-cta) !important;
}

/* ----- Badges de status (servicos/dominios/tickets/faturas/afiliados) -----
   WHMCS monta a classe em runtime: status status-{valor|strtolower}. So
   tinha coberto o enum de servico/dominio (Active/Suspended/Pending/...).
   BUG ACHADO NA VARREDURA (conta real com 63 tickets): status-closed (e
   outros fora do enum original — tickets, dominio em transferencia/redencao,
   fatura em cobranca, afiliado) caiam no catch-all [class*="status-"] de
   baixo, que zera a borda cinza original sem eu ter dado background/color
   pra eles — badge sobrava branco-no-branco, invisivel. Levantado o enum
   completo via grep no all.css original da Six; expandindo pra cobrir tudo
   de uma vez, nao so o que eu esbarrei visualmente.
   "Cancelado" saiu do vermelho e foi pro cinza (pedido do usuario: em
   faturas, "Cancelado" e "Em Aberto" (status-unpaid) caiam no mesmo
   vermelho e ficavam indistinguiveis — cancelado e um estado morto/neutro,
   nao urgente como fatura em aberto, entao cinza comunica isso melhor).
   BUG ACHADO NA VARREDURA (pagina de detalhes do produto, servico
   suspenso): o catch-all [class*="status-"] eh "contem substring", entao
   tambem batia em "product-status-suspended" e "product-status-text" —
   classes DIFERENTES dessa pagina (o frame de status colorido em volta
   do card do produto, nao o badge de tabela). Isso pos border-radius:999px
   numa caixa retangular (virou bolha azul) e display:inline-block quebrou
   o texto "SUSPENSO". Trocado pra reconhecer "status-" so como token
   isolado (inicio da classe ou precedido de espaco), que exclui os
   "product-status-*" (a substring vem colada sem espaco, "product-status-")
   mas mantem os casos reais, inclusive um sem a classe "status" propria
   (addon: class="pull-right status-{...}"). */
.status-active, .status-completed, .status-paid,
.status-open, .status-accepted, .status-delivered,
.status-answered                                    { background-color: #2f9e5c; color: #fff !important; }
.status-pending, .status-awaitingpayment, .status-closed,
.status-onhold, .status-refunded, .status-lost, .status-dead,
.status-cancelled                                   { background-color: #7c8a8d; color: #fff !important; }
.status-suspended, .status-overdue, .status-customer-reply,
.status-inprogress, .status-pending-transfer, .status-pending-registration,
.status-redemption, .status-grace, .status-transferred-away { background-color: #d98a1f; color: #fff !important; }
.status-terminated, .status-fraud,
.status-unpaid, .status-expired, .status-collections { background-color: #d64545; color: #fff !important; }
[class^="status-"], [class*=" status-"] {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 0.28em 0.85em 0.32em;
  font-weight: 600;
}

/* ----- Checkbox/radio — toque moderno sem reescrever o widget inteiro ----- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ew-cta);
}

/* =====================================================================
   FASE 5 — o que realmente diferencia de "Six recolorido"
   As fases 1-4 foram cor/raio pontual em cima do esqueleto do Bootstrap 3
   original — por isso ainda "parecia o Six". O maior motivo: a pagina
   inteira (section#main-body) e branca solida, igual o fundo do body,
   entao nenhum card/painel branco separa visualmente de nada. Essa fase
   ataca fundo de pagina, escala tipografica, proporcao de botao e
   micro-interacao — tudo ainda CSS puro, nenhum .tpl de logica tocado.
   ===================================================================== */

/* Fundo da pagina com leve tom da marca — sem isso, todo card branco
   "flutuava" sobre branco e o layout inteiro parecia achatado */
body {
  background-color: #f3f7f7;
}
section#main-body {
  background-color: transparent;
  padding: 32px 0 48px;
}
.panel, .well, .modal-content {
  background-color: #fff;
}

/* Titulos com mais contraste de peso/tamanho — Bootstrap 3 e conservador
   demais na escala, ficava tudo do mesmo tamanho visual */
h1 { font-weight: 700; letter-spacing: -0.01em; }
h2, h3 { font-weight: 700; }
div.header-lined h1 { font-size: 2.1rem; }
div.header-lined small { font-size: 1.1rem; font-weight: 400; color: #7c8a8d; }

/* Botoes maiores e com leve elevacao ao passar o mouse — o padrao do
   Bootstrap 3 (6px 12px, sem transicao) e o que mais denuncia tema antigo.
   IMPORTANTE: excluir .btn-xs daqui. ".btn"/".btn-xs" tem a MESMA
   especificidade (0,0,1,0 cada), entao um "padding:10px 22px" aplicado
   a ".btn" sozinho vencia o padding compacto pretendido do "btn-xs" so
   por vir depois no cascade — inflava de ~22px para 38px de altura os
   botoes de cabecalho de painel (Meus Servicos/Abrir Ticket/Ver todos),
   descentralizando eles em relacao ao titulo ao lado (bug real, medido:
   10px de diferenca constante entre centro do titulo e centro do botao). */
.btn:not(.btn-xs) {
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-lg { padding: 13px 28px; border-radius: 10px; }
.btn-sm { padding: 6px 14px; border-radius: 6px; }
.btn-xs {
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Botoes dentro de input-group (ex.: campo de dominio + Registre/Transferir
   na home) tambem precisam ficar de fora do padding grande do .btn base.
   Medido ao vivo: com o padding de 10px 22px o botao "Registre" ficava com
   42px de altura contra 34px do input (mesmo topo, sobrando 8px pra baixo)
   — o grupo perde o alinhamento porque WHMCS/Bootstrap espera todos os
   elementos do input-group com a mesma altura. Padding aqui replica o do
   .form-control (6px 12px) para casar exatamente. */
.input-group .btn,
.input-group-btn .btn {
  padding: 6px 16px;
  border-radius: 0;
}
/* Ultimo botao do grupo (Transferir) mantem canto direito arredondado,
   fechando a "pilula" visual do grupo — so o zerado acima (Registre,
   no meio) deve ficar quadrado dos dois lados. */
.input-group-btn:last-child > .btn:last-child,
.input-group .btn:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
/* Mesmo bug de especificidade/cascade do .input-group .btn acima, agora nos
   botoes de acao das tabelas (coluna final de Dominios/Servicos: icone de
   chave-inglesa + caret de dropdown dentro de ".btn-group.btn-group-sm",
   com largura fixa inline de 60px vinda do core do WHMCS). O original da Six
   e ".btn-group-sm > .btn { padding:5px 10px; font-size:12px; }", mesma
   especificidade (0,0,2,0) do meu ".btn:not(.btn-xs)" — como o meu carrega
   depois, venceu e inflou os dois botoes pra 58px+26px=84px, estourando o
   container de 60px e empurrando o dropdown-toggle pra linha de baixo
   (medido ao vivo: y do wrench=422, y do caret=462, 40px de diferenca =
   altura de um botao inteiro). Replicando o tamanho original da Six. */
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14, 104, 113, 0.25);
}

/* Respiro interno maior nos paineis — 15px do Bootstrap 3 e apertado
   pra densidade de dashboard moderno */
.panel-body {
  padding: 24px;
}
.panel-heading {
  padding: 16px 24px;
}

/* Cards com leve elevacao ao passar o mouse — profundidade sutil que
   sinaliza "isso e interativo/atual" sem exagerar em animacao */
.panel.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.panel.card:hover {
  box-shadow: 0 10px 28px rgba(0, 46, 51, 0.14);
}

/* Estatisticas da home (Servicos/Dominios/Tickets/Faturas) — classe real
   e .tile .stat (clientareahome.tpl), nao um nome generico de dashboard */
.tile .stat {
  color: var(--ew-cta);
  font-weight: 700;
}
.tile .icon {
  color: var(--ew-teal);
}
.tile {
  transition: transform 0.15s ease;
}
.tile:hover {
  transform: translateY(-2px);
}
/* A barrinha .highlight de cada tile ja usa bg-color-{cor}, coberta acima.
   O Six original nunca define width nela — herda largura de forma
   ambigua (o <a> em volta e inline por padrao, sem display:block
   explicito), o que fazia a barra variar de tamanho entre os 4 tiles
   em vez de ficar consistente. Forcando 100% resolve independente
   da causa exata. */
.tiles .tile .highlight {
  width: 100%;
}

/* =====================================================================
   FASE 6 — tela de login isolada (referencia enviada pelo usuario:
   fundo cheio em gradiente, card centralizado, sem chrome do site)
   body.auth-page e setado condicionalmente em header.tpl via
   {if $showingLoginPage} — variavel nativa da WHMCS, so verdadeira
   nessa pagina. login.tpl foi reescrito preservando os mesmos campos/
   nomes do formulario original (username, password, rememberme,
   captcha, mesmo action) — so a moldura ao redor mudou.
   ===================================================================== */
body.auth-page section#header,
body.auth-page section#footer,
body.auth-page .top-nav {
  display: none;
}
body.auth-page {
  background: linear-gradient(160deg, var(--ew-teal), var(--ew-teal-2) 60%, var(--ew-cta) 130%);
  min-height: 100vh;
}
/* .auth-shell usa position:fixed, entao ignora o grid herdado do
   header.tpl (col-md-9/sidebar) por conta propria — nao precisa mexer
   em .container, que e classe compartilhada com o resto do tema */

.auth-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  z-index: 10;
}
.auth-logo {
  display: block;
  margin-bottom: 28px;
}
.auth-logo img {
  width: 170px;
  height: auto;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 20, 22, 0.35);
  overflow: hidden;
}
.auth-card.with-social {
  max-width: 760px;
}
.auth-card-body {
  padding: 36px 36px 8px;
}
.auth-title {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: #1a2b2d;
  margin: 0 0 24px;
}
.auth-card .form-group {
  margin-bottom: 20px;
}
.auth-card label {
  font-weight: 600;
  color: #3d4a4c;
  font-size: 0.92rem;
}
.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.auth-forgot {
  font-size: 0.85rem;
  color: var(--ew-cta);
}
.auth-card .checkbox {
  margin-bottom: 20px;
}
.auth-card .btn-block {
  padding: 13px 22px;
  font-size: 1rem;
}
.auth-card-footer {
  text-align: center;
  padding: 18px 24px;
  border-top: 1px solid var(--ew-border);
  background: #fafcfc;
  font-size: 0.92rem;
  color: #5a6a6d;
}
.auth-card-footer a {
  font-weight: 600;
}

@media (max-width: 480px) {
  .auth-card-body { padding: 32px 24px 24px; }
}

/* =====================================================================
   FASE 7 — Base de Conhecimento (knowledgebase.tpl / knowledgebasecat.tpl /
   knowledgebasearticle.tpl). Nao tinha nenhum CSS proprio ate aqui — listas
   de texto cru, e os 3 .tpl misturavam glyphicon (fonte de icone antiga do
   Bootstrap 3) com far do FontAwesome usado no resto do tema; unificado pra
   far em todos (pasta: far fa-folder-open, artigo: far fa-file-alt).
   ===================================================================== */

.kb-heading {
  color: var(--ew-teal);
  font-size: 1.4rem;
  margin: 0 0 18px;
}

.kb-search { margin-bottom: 32px; }
.kb-search .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.kb-search .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ----- Cards de categoria ----- */
.kb-cat-cell { margin-bottom: 24px; }
.kb-cat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius);
  box-shadow: var(--ew-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.kb-cat-card:hover, .kb-cat-card:focus {
  transform: translateY(-2px);
  border-color: var(--ew-cta);
  box-shadow: 0 10px 28px rgba(0, 46, 51, 0.16);
  text-decoration: none;
}
.kb-cat-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 104, 113, 0.1);
  color: var(--ew-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.kb-cat-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.kb-cat-name {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--ew-teal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-cat-count {
  flex: 0 0 auto;
  background: #f6f9f9;
  color: #5a6a6d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.kb-cat-desc {
  margin: 10px 4px 0;
  color: #5a6a6d;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ----- Listas de artigos (Populares / categoria / relacionados) ----- */
.kbarticles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.kb-article-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--ew-border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kb-article-row:hover, .kb-article-row:focus {
  border-color: var(--ew-cta);
  background: #f6f9f9;
  text-decoration: none;
}
.kb-article-icon {
  flex: 0 0 auto;
  color: var(--ew-cta);
  font-size: 1rem;
  width: 20px;
  text-align: center;
}
.kb-article-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kb-article-name {
  font-weight: 600;
  color: var(--ew-teal);
}
.kb-article-excerpt {
  font-size: 0.85rem;
  color: #7c8a8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-article-arrow {
  flex: 0 0 auto;
  color: #b7c1c3;
  font-size: 0.8rem;
  transition: transform 0.15s ease, color 0.15s ease;
}
.kb-article-row:hover .kb-article-arrow {
  transform: translateX(3px);
  color: var(--ew-cta);
}

/* ----- Pagina do artigo ----- */
.kb-article-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.kb-article-title h2 {
  margin: 0;
  flex: 1 1 auto;
}
.kb-article-title .btn-print {
  color: #7c8a8d;
  font-size: 1.1rem;
  padding: 6px;
}
.kb-article-title .btn-print:hover { color: var(--ew-cta); }

.kb-article-content {
  font-size: 1rem;
  line-height: 1.7;
  color: #33474a;
}
.kb-article-content img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ew-border);
}
.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3 {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ew-teal);
}

.kb-article-details {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kb-article-details li {
  background: #f6f9f9;
  color: #5a6a6d;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.kb-article-details i { color: var(--ew-cta); margin-right: 4px; }

.kb-rate-article {
  margin-top: 16px;
  padding: 16px;
  background: #f6f9f9;
  border-radius: var(--ew-radius);
  text-align: center;
}
.kb-vote-btn {
  color: var(--ew-cta);
  font-weight: 600;
}
.kb-vote-btn:hover, .kb-vote-btn:focus {
  color: var(--ew-cta-hover);
  text-decoration: none;
}

.kb-also-read { margin-top: 32px; }
.kb-also-read h3 {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ew-teal);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* =====================================================================
   FASE 8 — Formulario de dominio (Registrar/Transferir), varredura de menus.
   ===================================================================== */

/* ----- Hero de busca de dominio (Registrar Dominio / Transferir) -----
   .domain-checker-bg vem de templates/orderforms/standard_cart/ (modulo
   de orderform, fora do tema evolutionweb) e usa um globe.png amarelo/
   laranja de fundo — nao existe no tema, so aparece ao vivo nessa tela.
   Nao da pra editar o modulo de orderform com seguranca (fica fora do
   tema, tratado como estatico pelo core), mas a pagina carrega o
   custom.css do tema normalmente, entao da pra sobrescrever daqui.
   Troca a imagem por gradiente teal, igual ao resto da marca.
   Precisa de !important: o CSS do orderform (standard_cart/css/all.min.css)
   carrega DEPOIS do custom.css no <head> (confirmado nos <link> da pagina),
   entao mesmo com especificidade igual minha regra perdia por ordem de
   cascata — mesma causa raiz do .listtable/dataTables ja documentado. */
.domain-checker-bg {
  background-image: none !important;
  background: linear-gradient(135deg, var(--ew-teal) 0%, var(--ew-teal-2) 100%) !important;
  border-radius: var(--ew-radius);
}

/* ----- Icone de marca por produto (Meus Produtos/Servicos + detalhes) -----
   Mapeamento feito em includes/product-icon.tpl a partir do nome do produto.
   cPanel e WHMCS usam o icone de marca do FontAwesome ja carregado no tema
   (fab fa-cpanel / fab fa-whmcs); Plesk/CloudLinux/LiteSpeed usam logo oficial
   baixada dos proprios sites (cpanel.net nao tem pagina de brand assets
   publica, os demais usam FA); Softaculous tambem, mas a logo oficial deles
   e branca (feita pra header escuro do proprio site) — por isso o badge
   dela tem fundo escuro proprio, diferente dos outros (fundo claro). */
.td-product-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.product-icon-badge {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f6f9f9;
  border: 1px solid var(--ew-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-icon-badge img {
  max-width: 68%;
  max-height: 68%;
  object-fit: contain;
}
.product-icon-badge i {
  font-size: 15px;
  color: var(--ew-cta);
}
.product-icon-badge--softaculous {
  background: #14181c;
  border-color: #14181c;
}
.product-icon-badge--softaculous img {
  max-width: 80%;
  max-height: 44%;
}
/* Versao grande — painel de detalhes do produto (substitui o antigo
   fa-stack generico dentro do card cinza ja existente, sem mudar o card). */
.product-icon-badge--lg {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  margin: 0 auto 14px;
}
.product-icon-badge--lg i {
  font-size: 32px;
}
.product-icon-badge--lg.product-icon-badge--softaculous img {
  max-height: 40%;
}