/* ============================================================================
   MagnoHost — Tema da Área do Cliente (WHMCS) · base Twenty-One (Bootstrap 4)
   ----------------------------------------------------------------------------
   Carregado por ÚLTIMO (ver includes/head.tpl), depois de theme.min.css e do
   custom.css (variáveis "Nexus"). Reskin completo com a identidade de
   magnohost.com.br SEM alterar a estrutura/markup do WHMCS.
   ============================================================================ */

/* ============================ TOKENS ===================================== */
:root {
  --mh-purple-50:#F4ECFE; --mh-purple-100:#E7D6FD; --mh-purple-200:#CFB0FB;
  --mh-purple-300:#B888F9; --mh-purple-400:#A24BF6; --mh-purple-500:#9537ED;
  --mh-purple-600:#7C22CE; --mh-purple-700:#631BA3;
  --mh-grad-vi: linear-gradient(90deg, #7C3AED 0%, #4F46E5 100%);
  --mh-grad-brand: linear-gradient(135deg, #A74AF7 0%, #9537ED 45%, #7C22CE 100%);
  --mh-grad-duo: linear-gradient(135deg, #A24BF6 0%, #22D3EE 120%);
  --mh-cyan-400:#22D3EE; --mh-cyan-500:#06B6D4;

  --mh-bg:#F7F4FC; --mh-surface:#FFFFFF; --mh-surface-2:#F4F0FB;
  --mh-border:rgba(149,55,237,.13); --mh-border-2:#E9E1F5; --mh-border-input:#8E72C0;
  --mh-fg1:#1B1230; --mh-fg2:#5E5478; --mh-fg3:#6E6488;

  --mh-success:#16a34a; --mh-success-bg:rgba(45,212,106,.12);
  --mh-warning:#d97706; --mh-warning-bg:rgba(245,165,36,.12);
  --mh-danger:#dc2626;  --mh-danger-bg:rgba(244,91,91,.12);
  --mh-info:#0891b2;    --mh-info-bg:rgba(34,211,238,.12);

  --mh-r-sm:10px; --mh-r-md:14px; --mh-r-lg:20px; --mh-r-xl:28px; --mh-r-pill:999px;
  --mh-shadow-sm:0 1px 2px rgba(31,17,55,.06);
  --mh-shadow-md:0 12px 30px -14px rgba(76,40,130,.22);
  --mh-shadow-lg:0 30px 64px -22px rgba(76,40,130,.28);

  --mh-font-display:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mh-font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mh-font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Sobrescreve variáveis do Bootstrap 4 (theme.css) */
  --primary: #7C22CE;
  --purple: #7C22CE;
  --blue: #4F46E5;
  --font-family-sans-serif: var(--mh-font-body);

  /* Sobrescreve o design system "Nexus" (custom.css) com a paleta MagnoHost */
  --primary-50:#F4ECFE; --primary-100:#E7D6FD; --primary-200:#CFB0FB; --primary-300:#B888F9;
  --primary-400:#A24BF6; --primary-500:#9537ED; --primary-600:#7C22CE; --primary-700:#631BA3;
  --primary-800:#4A157A; --primary-900:#2F0E4F; --primary-950:#2F0E4F;
  --primary-lifted:#9537ED; --primary-accented:#631BA3;
  --secondary:#5E5478; --secondary-lifted:#6E6488; --secondary-accented:#4B3768;
  --notice:#7C3AED; --notice-lifted:#6D28D9; --notice-accented:#5B21B6;
  --info:#0891b2; --info-lifted:#0e7490; --info-accented:#155e75;
  --success:#16a34a; --success-lifted:#15803d; --success-accented:#166534;
  --warning:#d97706; --warning-lifted:#b45309; --warning-accented:#92400e;
  --error:#dc2626; --error-lifted:#b91c1c; --error-accented:#991b1b;
  --text:#1B1230; --text-lifted:#5E5478; --text-accented:#4B3768; --text-muted:#6E6488;
  --border:#E9E1F5; --border-muted:#F1ECF9; --border-lifted:#D9CDEE;
  --bg:#FFFFFF; --bg-muted:#F7F4FC; --bg-lifted:#F4F0FB; --bg-accented:#ECE5F8;
  --rounding-sm:10px; --rounding-md:14px; --rounding-lg:20px;
}

/* ============================ BASE / TIPOGRAFIA ========================= */
html { font-size: 15px; }
body, body.primary-bg-color {
  background: var(--mh-bg) !important;
  color: var(--mh-fg1);
  font-family: var(--mh-font-body);
  font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Sticky footer: em páginas curtas o conteúdo cresce e empurra o footer pro
     rodapé da janela — nada de espaço vazio passando do footer. */
  display: flex; flex-direction: column; min-height: 100vh;
}
#main-body { flex: 1 0 auto; }      /* área de conteúdo cresce p/ preencher a tela */
footer#footer.footer { flex-shrink: 0; }  /* footer mantém a altura, fica na base */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--mh-font-display); font-weight: 700; color: var(--mh-fg1); letter-spacing: -.015em;
}
h1,.h1{font-weight:800;}
a { color: var(--mh-purple-600); transition: color .18s ease; }
a:hover,a:focus { color: var(--mh-purple-500); text-decoration: none; }
p { color: var(--mh-fg2); }
hr { border-top-color: var(--mh-border-2); }
code,kbd,pre,samp { font-family: var(--mh-font-mono); }
code { color: var(--mh-purple-600); background: rgba(124,58,237,.08); }
::selection { background: rgba(124,58,237,.22); }
blockquote, .blockquote { border-left: 3px solid var(--mh-purple-400); background: var(--mh-surface-2); padding: 12px 16px; border-radius: var(--mh-r-md); color: var(--mh-fg2); margin: 0 0 16px; }
.text-muted{color:var(--mh-fg3)!important;}
.text-primary{color:var(--mh-purple-600)!important;}
.text-success{color:var(--mh-success)!important;}
.text-danger{color:var(--mh-danger)!important;}
.text-warning{color:var(--mh-warning)!important;}
.text-info{color:var(--mh-info)!important;}
.primary-color,.text-primary-color{color:var(--mh-purple-600)!important;}
.primary-bg-color{background-color:var(--mh-bg)!important;}

/* ============================ HEADER / TOPBAR ========================== */
header.header, .header { background: var(--mh-surface); border-bottom: 1px solid var(--mh-border); }
header.header .topbar {
  background: var(--mh-surface-2); border-bottom: 1px solid var(--mh-border);
  color: var(--mh-fg2); font-size: 13.5px;
}
header.header .topbar .btn { color: var(--mh-fg2); }
header.header .topbar .btn:hover { color: var(--mh-purple-600); }
/* "Conectado como" + nome + ícone de trocar conta: a base do twenty-one os pintava de
   BRANCO (a topbar original era escura #404040). Como nossa topbar é clara, os seletores
   .active-client da base (espec. 0,4,1) venciam os nossos e o texto sumia. Aqui vencemos
   na MESMA/maior especificidade com cores escuras legíveis. */
header.header .topbar .active-client .input-group-text { background: transparent; border: none; color: var(--mh-fg2); }
header.header .topbar .active-client .btn { color: var(--mh-fg2); }
header.header .topbar .active-client .btn.btn-active-client { color: var(--mh-fg1); font-weight: 700; }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--mh-border-2); }
header.header .topbar .active-client .btn:hover,
header.header .topbar .active-client .btn.btn-active-client:hover { color: var(--mh-purple-600); }

/* Navbar (marca + busca + carrinho) */
.header .navbar.navbar-light { padding-top: 14px; padding-bottom: 14px; }
.navbar-brand { font-family: var(--mh-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--mh-fg1); display: inline-flex; align-items: center; gap: 10px; }
.navbar-light .navbar-brand, .navbar-light .navbar-brand:hover { color: var(--mh-fg1); }
.navbar-brand .logo-img, .navbar-brand img { max-height: 42px; width: auto; }
.navbar-brand .mh-logo-mark { height: 32px; width: auto; }
.navbar-brand .mh-word b { color: var(--mh-purple-500); }
/* Botão "Entre em Contato" no topo: texto/ícone SEMPRE branco (legível no gradiente) */
.header .navbar a.btn-primary, .header .navbar a.btn-primary:hover,
.header .navbar a.btn-primary:focus, .header .navbar a.btn-primary i { color: #fff !important; }

/* Evita "Entre em Contato" duplicado: no desktop (>=1200px) o botão CTA do topo já
   cobre o contato, então escondemos o item NATIVO da navbar ("Contact Us"). No
   mobile/tablet (<1200px) o botão fica oculto (d-none d-xl-...), então o item do
   menu sanduíche permanece — assim sobra exatamente UM contato em cada tela. */
@media (min-width: 1200px) {
  #Primary_Navbar-Contact_Us { display: none !important; }
}

/* Busca no topo */
.header .input-group.search .form-control {
  border: 1px solid var(--mh-border-input); border-left: none; box-shadow: none;
  background: var(--mh-surface); color: var(--mh-fg1);
}
.header .input-group.search .btn, .header .input-group.search .btn-default {
  background: var(--mh-surface); border: 1px solid var(--mh-border-input); border-right: none; color: var(--mh-purple-500);
}
.header .input-group.search .form-control:focus { border-color: var(--mh-purple-400); }

/* Carrinho */
.toolbar .cart-btn { color: var(--mh-fg2); position: relative; }
.toolbar .cart-btn:hover { color: var(--mh-purple-600); }
.toolbar .cart-btn .badge, #cartItemCount { background: var(--mh-purple-600); color: #fff; }
.toolbar .nav-link { color: var(--mh-fg2); }
.toolbar .nav-link:hover { color: var(--mh-purple-600); }

/* Barra de navegação principal (links) */
.header .main-navbar-wrapper { background: var(--mh-surface); border-top: 1px solid var(--mh-border); padding: 0; }
.main-navbar-wrapper .navbar-nav .nav-link {
  color: var(--mh-fg2); font-weight: 600; font-size: 14.5px;
  padding: 14px 14px; border-radius: 0; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-item.active > .nav-link,
.main-navbar-wrapper .navbar-nav .show > .nav-link {
  color: var(--mh-purple-600); background: rgba(124,58,237,.07);
}
.main-navbar-wrapper .navbar-nav .nav-item.active { box-shadow: inset 0 -3px 0 var(--mh-purple-500); }
.main-navbar-wrapper .nav-link > i { color: var(--mh-purple-500); }

/* Dropdowns */
.dropdown-menu {
  background: var(--mh-surface); border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-r-lg); box-shadow: var(--mh-shadow-lg); padding: 8px; margin-top: 6px;
}
.dropdown-item { color: var(--mh-fg1); font-weight: 600; font-size: 14px; }
.dropdown-item > i { color: var(--mh-purple-500); width: 18px; text-align: center; }
.dropdown-divider { border-top-color: var(--mh-border-2); }
/* O navbar.tpl ANINHA .dropdown-item DUAS vezes (no <li> E no <a> interno). Antes o padding
   e o realce ficavam no <li> (NÃO clicável) e o <a> tinha .px-2/.py-0 do Bootstrap (!important)
   zerando a altura → só o miolo do texto clicava (cantos = zona morta) e havia realce duplo.
   Solução: a ÁREA CLICÁVEL é o <a> — zeramos padding/realce do <li> e jogamos TUDO no <a>,
   que passa a preencher o item inteiro (cantos inclusive), com um único realce. */
.dropdown-menu li.dropdown-item { padding: 0 !important; background: transparent !important; }
.dropdown-menu a.dropdown-item {
  display: block; width: 100%;
  padding: 10px 12px !important;            /* vence o .px-2/.py-0 (!important) do Bootstrap */
  border-radius: var(--mh-r-md);
}
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus,
.dropdown-menu a.dropdown-item:active,
.dropdown-menu a.dropdown-item.active {
  background-color: rgba(124,58,237,.09) !important; color: var(--mh-purple-600) !important;
}

/* Breadcrumb */
.master-breadcrumb { background: var(--mh-surface-2); border-bottom: 1px solid var(--mh-border); }
.breadcrumb { background: transparent; padding: 12px 0; margin: 0; font-size: 13px; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--mh-fg3); content: "›"; }
.breadcrumb-item a { color: var(--mh-fg3); font-weight: 600; }
.breadcrumb-item a:hover { color: var(--mh-purple-600); }
.breadcrumb-item.active { color: var(--mh-fg1); font-weight: 600; }

/* ============================ BOTÕES =================================== */
.btn {
  font-family: var(--mh-font-body); font-weight: 700; font-size: 14.5px;
  border-radius: var(--mh-r-md); padding: 9px 18px; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: scale(.985); }
.btn-lg { font-size: 16px; padding: 13px 26px; border-radius: var(--mh-r-md); }
.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn-xs { font-size: 12px; padding: 4px 10px; border-radius: var(--mh-r-sm); }
.btn-primary, .btn-primary:focus {
  background-color: #7C3AED; background-image: var(--mh-grad-vi);
  border: none; color: #fff; box-shadow: 0 10px 30px -12px rgba(79,70,229,.55);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  background-image: var(--mh-grad-vi); color: #fff; filter: brightness(1.08);
}
.btn-outline-primary {
  color: var(--mh-purple-600); border: 1px solid var(--mh-border-2); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-image: var(--mh-grad-vi); background-color: #7C3AED; border-color: transparent; color: #fff;
}
.btn-default, .btn-secondary, .btn-light {
  background: var(--mh-surface); color: var(--mh-fg1); border: 1px solid var(--mh-border-2);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  background: rgba(124,58,237,.06); border-color: var(--mh-purple-400); color: var(--mh-purple-600);
}
.btn-success { background: #15803d; border-color: #15803d; color: #fff; } /* a11y: 5.0:1 (era #16a34a 3.3:1) */
.btn-success:hover { background: #166534; border-color: #166534; color: #fff; }
.btn-danger { background: var(--mh-danger); border-color: var(--mh-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-info { background: #0e7490; border-color: #0e7490; color: #fff; } /* ciano escuro: branco 4.5:1+ */
.btn-info:hover { background: #155e75; border-color: #155e75; color: #fff; }
.btn-warning { background: #b45309; border-color: #b45309; color: #fff; } /* a11y: 5.0:1 (era #d97706 3.2:1) */
.btn-warning:hover { background: #92400e; border-color: #92400e; color: #fff; }
.btn-link { color: var(--mh-purple-600); font-weight: 600; }
.btn-link:hover { color: var(--mh-purple-500); }

/* ============================ CARDS =================================== */
.card {
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg); box-shadow: var(--mh-shadow-sm);
}
.card-header {
  background: var(--mh-surface); color: var(--mh-fg1);
  border-bottom: 1px solid var(--mh-border); padding: 15px 20px; font-weight: 700;
  border-radius: var(--mh-r-lg) var(--mh-r-lg) 0 0;
}
.card-title { font-family: var(--mh-font-display); font-weight: 700; color: var(--mh-fg1); }
.card-body { padding: 20px; color: var(--mh-fg2); }
.card-body h1,.card-body h2,.card-body h3,.card-body h4 { color: var(--mh-fg1); }
.card-footer {
  background: var(--mh-surface-2); border-top: 1px solid var(--mh-border);
  color: var(--mh-fg2); border-radius: 0 0 var(--mh-r-lg) var(--mh-r-lg);
}
.well { background: var(--mh-surface-2); border: 1px solid var(--mh-border); border-radius: var(--mh-r-lg); color: var(--mh-fg2); }

/* Grade de produtos da home — cards de TAMANHO IGUAL.
   O twenty-one usa .card-columns (masonry/column-count) → alturas diferentes.
   Trocamos por CSS Grid: colunas iguais + grid-auto-rows:1fr (todas as linhas
   na mesma altura) + botão empurrado para a base. */
.card-columns.home {
  -moz-column-count: unset !important; column-count: unset !important; column-gap: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 20px;
}
.card-columns.home .card {
  margin-bottom: 0 !important; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-columns.home .card:hover {
  transform: translateY(-4px); box-shadow: var(--mh-shadow-lg); border-color: rgba(124,58,237,.3);
}
.card-columns.home .card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card-columns.home .card .card-body > .btn:last-child { margin-top: auto; }
.card-columns.home .card .card-title { font-size: 19px; font-weight: 800; }
.card-columns.home .card p { color: var(--mh-fg2); }
@media (max-width: 991px) { .card-columns.home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .card-columns.home { grid-template-columns: 1fr; } }

/* ============================ HOME — TILES DE AÇÃO ===================== */
.action-icon-btns a {
  background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-r-xl);
  color: var(--mh-fg1); box-shadow: var(--mh-shadow-sm); padding: 22px 12px 20px; font-weight: 700; font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.action-icon-btns a:hover {
  transform: translateY(-4px); box-shadow: var(--mh-shadow-lg); border-color: rgba(124,58,237,.3); color: var(--mh-fg1);
}
.action-icon-btns a .ico-container {
  width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 18px; line-height: 1; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mh-grad-vi); box-shadow: 0 10px 24px -10px rgba(79,70,229,.5); transition: transform .2s ease;
}
.action-icon-btns a:hover .ico-container { font-size: 26px; transform: scale(1.06); }
.action-icon-btns a .ico-container i { color: #fff !important; }
/* variações sutis de acento por categoria (mantém um pouco de vida) */
.action-icon-btns a.card-accent-teal .ico-container, .action-icon-btns a.card-accent-turquoise .ico-container { background: var(--mh-grad-duo); }
.action-icon-btns a.card-accent-pomegranate .ico-container, .action-icon-btns a.card-accent-red .ico-container { background: linear-gradient(135deg,#F45B5B,#dc2626); }
.action-icon-btns a.card-accent-sun-flower .ico-container, .action-icon-btns a.card-accent-gold .ico-container, .action-icon-btns a.card-accent-orange .ico-container { background: linear-gradient(135deg,#F5A524,#d97706); }
.action-icon-btns a.card-accent-green .ico-container, .action-icon-btns a.card-accent-emerald .ico-container, .action-icon-btns a.card-accent-lime .ico-container { background: linear-gradient(135deg,#2DD46A,#16a34a); }
/* Tiles "Sua conta" no MOBILE: grade 2x2 limpa. O markup do WHMCS usa offsets
   (offset-3 / offset-md-2) pensados p/ 5 tiles; com 4 (sem domínios) eles escalonavam.
   Forçamos 2 colunas + linhas de altura igual e zeramos os offsets. */
@media (max-width: 767.98px) {
  .action-icon-btns {
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px;
    margin-left: 0; margin-right: 0;
  }
  .action-icon-btns > [class*="col-"] {
    max-width: 100%; flex: none; margin: 0 !important; padding: 0;
  }
  .action-icon-btns > [class*="col-"] > a {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
}

/* ============================ DASHBOARD — TILES ====================== */
.tiles { background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-r-xl); box-shadow: var(--mh-shadow-sm); overflow: hidden; }
.tiles .tile {
  background: var(--mh-surface); border-right: 1px solid var(--mh-border); padding: 22px 22px 20px;
  transition: background .18s ease;
}
.tiles .row > div:last-child .tile { border-right: 0; }
.tiles .tile:hover { background: rgba(124,58,237,.04); }
.tiles .tile .stat { font-family: var(--mh-font-display); font-weight: 800; font-size: 38px; color: var(--mh-fg1); margin-top: 14px; }
.tiles .tile .title { color: var(--mh-fg3); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.tiles .tile i { position: absolute; top: 18px; right: 22px; font-size: 30px; color: var(--mh-purple-300); transition: color .2s ease, transform .2s ease; }
.tiles .tile:hover i { transform: scale(1.13); color: var(--mh-purple-500); }
.tiles .tile .highlight { margin-top: 12px; height: 4px; border-radius: var(--mh-r-pill); }
.bg-color-blue { background: var(--mh-grad-vi) !important; }
.bg-color-green { background: var(--mh-success) !important; }
.bg-color-red { background: var(--mh-danger) !important; }
.bg-color-gold, .bg-color-yellow, .bg-color-orange { background: var(--mh-warning) !important; }

/* Cartões de painéis da home (client-home-cards) */
.client-home-cards .card { box-shadow: var(--mh-shadow-sm); }
.client-home-cards .card-header { border-bottom: 1px solid var(--mh-border); background: var(--mh-surface); }
.client-home-cards .card.card-accent-red > .card-header { box-shadow: inset 0 3px 0 var(--mh-danger); }
.client-home-cards .card.card-accent-green > .card-header { box-shadow: inset 0 3px 0 var(--mh-success); }
.client-home-cards .card.card-accent-blue > .card-header, .client-home-cards .card.card-accent-midnight-blue > .card-header, .client-home-cards .card.card-accent-purple > .card-header { box-shadow: inset 0 3px 0 var(--mh-purple-500); }
.client-home-cards .card.card-accent-gold > .card-header, .client-home-cards .card.card-accent-orange > .card-header { box-shadow: inset 0 3px 0 var(--mh-warning); }
.client-home-cards .list-group { border-top: 1px solid var(--mh-border) !important; border-bottom: 1px solid var(--mh-border) !important; }

/* ============================ FORMS ================================== */
.form-control {
  background: var(--mh-surface); color: var(--mh-fg1);
  border: 1px solid var(--mh-border-input); border-radius: var(--mh-r-md); /* a11y 1.4.11: 3.95:1 */
  height: auto; padding: 10px 14px; font-size: 14.5px; box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus { border-color: var(--mh-purple-400); box-shadow: 0 0 0 4px rgba(149,55,237,.12); }
.form-control::placeholder { color: var(--mh-fg3); }
label, .control-label { color: var(--mh-fg1); font-weight: 600; }
.input-group-text { background: var(--mh-surface-2); border: 1px solid var(--mh-border-input); color: var(--mh-fg2); }
.custom-select, select.form-control { border-radius: var(--mh-r-md); border-color: var(--mh-border-input); }
.has-error .form-control, .is-invalid { border-color: var(--mh-danger); }
.form-text, .help-block { color: var(--mh-fg3); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--mh-purple-600); border-color: var(--mh-purple-600); }
input[type=checkbox], input[type=radio] { accent-color: var(--mh-purple-600); }

/* ============================ TABELAS =============================== */
.table { color: var(--mh-fg1); }
.table thead th {
  font-family: var(--mh-font-display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--mh-fg3);
  border-bottom: 1px solid var(--mh-border-2); border-top: none; padding: 14px 16px;
}
.table td, .table th { border-top-color: var(--mh-border); padding: 14px 16px; vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(124,58,237,.04); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--mh-surface-2); }
.card > .table, .card .table { margin-bottom: 0; }

/* ============================ LIST GROUP / SIDEBAR ================= */
.list-group-item { background: var(--mh-surface); border-color: var(--mh-border); color: var(--mh-fg2); font-weight: 600; padding: 12px 16px; transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.list-group-item-action:hover, .list-group-item-action:focus { background: rgba(124,58,237,.06); color: var(--mh-purple-600); }
.list-group-item.active, .list-group-item-action.active {
  background: var(--mh-grad-vi); border-color: transparent; color: #fff;
}
.list-group-item.active .badge { background: rgba(255,255,255,.25); color: #fff; }
.list-group-item > i { color: var(--mh-purple-500); }
.list-group-item.active > i { color: #fff; }
/* CORREÇÃO GLOBAL do "hover arredonda mas a sombra fica quadrada": a .list-group do
   Bootstrap arredonda só ~4px enquanto nossos cards/painéis usam 20px (--mh-r-lg). No hover,
   o fundo arredondado do item NÃO alcançava o canto do card -> sobrava um "L" de fundo/sombra
   do card no canto (parecia sombra quadrada). Alinhamos o canto inferior da lista (corpo do
   card) e do último item ao raio do card — vale p/ TODA .list-group dentro de card/painel. */
.card > .list-group:last-child,
.card-sidebar > .list-group {
  border-radius: 0 0 var(--mh-r-lg) var(--mh-r-lg);
}
.card > .list-group:last-child > .list-group-item:last-child,
.card-sidebar > .list-group > .list-group-item:last-child {
  border-bottom-left-radius: var(--mh-r-lg);
  border-bottom-right-radius: var(--mh-r-lg);
}
/* À PROVA DE BALA: clipa TODO o conteúdo do painel ao raio do card, então o fundo do hover
   dos itens nunca destoa do canto arredondado (independe do border-radius do item — clipping
   é mais forte). Seguro nestes painéis (só links/menu; sem dropdowns/popovers que cortariam).
   O box-shadow do próprio card é desenhado fora do border-box e NÃO é cortado pelo overflow. */
.card-sidebar { overflow: hidden; }
/* foco do teclado fica INSET p/ o overflow:hidden não cortar o anel */
.card-sidebar .list-group-item-action:focus-visible { outline-offset: -3px !important; }
.sidebar .card { box-shadow: var(--mh-shadow-sm); }
.sidebar .card-header { background: var(--mh-surface-2); }

/* ============================ ALERTS / BADGES ====================== */
.alert { border: 1px solid transparent; border-radius: var(--mh-r-lg); padding: 16px 18px; }
.alert-success { background: var(--mh-success-bg); border-color: rgba(45,212,106,.3); color: #15803d; }
.alert-info { background: var(--mh-info-bg); border-color: rgba(34,211,238,.3); color: #0e7490; }
.alert-warning { background: var(--mh-warning-bg); border-color: rgba(245,165,36,.3); color: #b45309; }
.alert-danger { background: var(--mh-danger-bg); border-color: rgba(244,91,91,.32); color: #b91c1c; }
.alert-primary { background: rgba(124,58,237,.10); border-color: rgba(124,58,237,.30); color: var(--mh-purple-700); }
.alert-secondary { background: var(--mh-surface-2); border-color: var(--mh-border-2); color: var(--mh-fg2); }
.alert-dark { background: var(--mh-surface-2); border-color: var(--mh-border-2); color: var(--mh-fg1); }
.alert-light { background: var(--mh-surface); border-color: var(--mh-border); color: var(--mh-fg2); }
.badge { font-family: var(--mh-font-body); font-weight: 700; border-radius: var(--mh-r-pill); padding: 4px 10px; }
.badge-primary { background: var(--mh-purple-600); color: #fff; }
.badge-secondary { background: var(--mh-surface-2); color: var(--mh-fg2); }
.badge-success { background: var(--mh-success); color: #fff; }
.badge-info { background: #0e7490; color: #fff; }
.badge-warning { background: var(--mh-warning); color: #fff; }
.badge-danger { background: var(--mh-danger); color: #fff; }

/* ============================ PAGINATION / TABS =================== */
.page-link { color: var(--mh-fg2); border-color: var(--mh-border-2); }
.page-link:hover { background: rgba(124,58,237,.06); border-color: var(--mh-purple-400); color: var(--mh-purple-600); }
.page-item.active .page-link { background: var(--mh-grad-vi); border-color: transparent; color: #fff; }
.nav-tabs { border-bottom: 1px solid var(--mh-border-2); }
.nav-tabs .nav-link { color: var(--mh-fg2); font-weight: 600; border: none; }
.nav-tabs .nav-link:hover { background: rgba(124,58,237,.06); border: none; color: var(--mh-purple-600); }
.nav-tabs .nav-link.active { color: var(--mh-purple-600); background: var(--mh-surface); border: none; box-shadow: inset 0 -3px 0 var(--mh-purple-500); }
.nav-pills .nav-link { color: var(--mh-fg2); font-weight: 600; border-radius: var(--mh-r-pill); }
.nav-pills .nav-link.active { background: var(--mh-grad-vi); color: #fff; }

/* ============================ PROGRESS / MODAIS =================== */
.progress { background: var(--mh-surface-2); border-radius: var(--mh-r-pill); height: 10px; }
.progress-bar { background: var(--mh-grad-vi); }
.progress-bar.bg-success { background: var(--mh-success) !important; }
.progress-bar.bg-warning { background: var(--mh-warning) !important; }
.progress-bar.bg-danger { background: var(--mh-danger) !important; }
.modal-content { border: 1px solid var(--mh-border-2); border-radius: var(--mh-r-xl); box-shadow: var(--mh-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--mh-border); }
.modal-title { font-family: var(--mh-font-display); font-weight: 700; }
.modal-footer { border-top: 1px solid var(--mh-border); }
.popover { border: 1px solid var(--mh-border-2); border-radius: var(--mh-r-lg); box-shadow: var(--mh-shadow-lg); font-family: var(--mh-font-body); color: var(--mh-fg1); }
.popover-header { font-family: var(--mh-font-display); font-weight: 700; background: var(--mh-surface-2); border-bottom: 1px solid var(--mh-border); color: var(--mh-fg1); }
.popover-user-notifications { font-family: var(--mh-font-body); }
.tooltip-inner { background: #1B1230; border-radius: var(--mh-r-sm); font-weight: 600; }
/* Seta do tooltip casando com o corpo (#1B1230), antes ficava preta #000 */
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #1B1230; }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #1B1230; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #1B1230; }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #1B1230; }

/* ============================ LOGIN / REGISTER =================== */
.login-box, .logincontainer { max-width: 460px; margin: 36px auto; }
.card.login, #frmLogin, .login-form { }
.client-alerts { list-style: none; margin: 0; padding: 4px; }
.client-alerts > li > a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--mh-r-md); color: var(--mh-fg1); font-weight: 600; }
.client-alerts > li > a:hover { background: rgba(124,58,237,.08); color: var(--mh-purple-600); }
.client-alerts > li > a > i { color: var(--mh-purple-500); }
/* Mantém o SINAL de severidade do alerta (era tudo roxo, perdia a leitura de gravidade) */
.client-alerts > li > a > i.fa-exclamation-circle { color: var(--mh-danger); }
.client-alerts > li > a > i.fa-exclamation-triangle { color: var(--mh-warning); }
.client-alerts > li > a > i.fa-info-circle { color: var(--mh-info); }
.client-alerts > li > a > i.fa-check-circle { color: var(--mh-success); }

/* ============================ FOOTER ============================= */
/* Remove o padding/altura herdados do twenty-one (50px 0 80px) que criavam um
   "quadrado branco" vazio no topo do footer. Footer entra logo após o conteúdo. */
footer#footer.footer { background: var(--mh-surface); border-top: 1px solid var(--mh-border); margin-top: 0; padding: 0 0 12px !important; color: var(--mh-fg3); }
footer#footer .nav-link { color: var(--mh-fg3); }
footer#footer .nav-link:hover { color: var(--mh-purple-600); }
footer#footer .copyright { color: var(--mh-fg3); margin: 0; padding: 11px 0 0; font-size: 12.5px; }

/* Rodapé rico MagnoHost (markup adicionada em footer.tpl) */
.mh-footer { background: var(--mh-surface); border-top: 1px solid var(--mh-border); }
.mh-footer-inner { max-width: 1140px; margin: 0 auto; padding: 24px 20px 16px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.mh-foot-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mh-foot-logo img { height: 30px; width: auto; }
.mh-foot-word { font-family: var(--mh-font-display); font-weight: 800; font-size: 19px; color: var(--mh-fg1); }
.mh-foot-word b { color: var(--mh-purple-500); }
.mh-footer-tag { font-size: 13px; color: var(--mh-fg3); max-width: 320px; line-height: 1.5; margin-top: 2px; }
.mh-footer-social { display: flex; gap: 8px; margin-top: 11px; }
.mh-footer-social a { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--mh-border-2); display: flex; align-items: center; justify-content: center; color: var(--mh-fg2); transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.mh-footer-social a:hover { color: var(--mh-purple-600); border-color: var(--mh-purple-400); background: rgba(124,58,237,.08); }
.mh-footer-col { display: flex; flex-direction: column; gap: 7px; }
.mh-footer-h { font-family: var(--mh-font-display); font-weight: 700; font-size: 13.5px; color: var(--mh-fg1); margin-bottom: 2px; }
.mh-footer-col a { color: var(--mh-fg3); font-size: 13.5px; }
.mh-footer-col a:hover { color: var(--mh-purple-600); }
.mh-footer-pay { border-top: 1px solid var(--mh-border); }
.mh-footer-pay-inner { max-width: 1140px; margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.mh-pay-l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mh-fg2); }
.mh-pay-l i { color: var(--mh-success); }
.mh-pay-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-pay-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #fff; border: 1px solid var(--mh-border-2); border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--mh-fg1); }
.mh-pay-chip i { color: var(--mh-purple-500); font-size: 13px; }
.mh-pay-chip.pix i { color: #0F766E; }
.mh-footer-bar { max-width: 1140px; margin: 0 auto; padding: 16px 20px; border-top: 1px solid var(--mh-border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--mh-fg3); font-size: 12.5px; }
.mh-footer-status { display: inline-flex; align-items: center; gap: 8px; color: var(--mh-fg2); }
.mh-dot-on { width: 8px; height: 8px; border-radius: 50%; background: var(--mh-success); box-shadow: 0 0 0 4px rgba(45,212,106,.18); }

/* ============================ DIVERSOS ============================ */
.domain-checker-bg, .domainchecker-banner, #domainSearchForm { border-radius: var(--mh-r-lg); }
/* Conteúdo editorial (KB/anúncios) não estoura na horizontal no mobile */
#main-body article img, .card-body article img, #main-body .py-5 img { max-width: 100%; height: auto; }
.btn-return-to-admin { background: var(--mh-warning-bg); color: var(--mh-warning); border-radius: var(--mh-r-md); }
/* CLIQUE QUEBRADO + "DEITAR" no clique: a base posiciona a aba "Retornar ao admin" com
   transform: rotate(90deg) (SEM !important). Nosso .btn:active { transform: scale(.985) }
   (espec. 0,2,0 > 0,1,0 da base) vencia ao pressionar -> a aba desrotacionava, PULAVA de
   baixo do cursor e o mouseup caía fora -> o clique não registrava. Travamos o transform da
   aba em todos os estados (só ≥768px, onde a base a rotaciona) e tiramos 'transform' da transição. */
@media (min-width: 768px) {
  .btn-return-to-admin,
  .btn-return-to-admin:hover,
  .btn-return-to-admin:focus,
  .btn-return-to-admin:active {
    transform: rotate(90deg) !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
}
#fullpage-overlay { background: rgba(27,18,48,.55); }
/* Setinha de recolher painel (sidebar do carrinho / cards) indica que é clicável.
   O cabeçalho inteiro vira clicável via menu-a11y.js (que também seta cursor:pointer). */
.card-minimise, .panel-minimise { cursor: pointer; }

/* ============================ RESPONSIVO ========================= */
@media (max-width: 991px) {
  .mh-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  html { font-size: 14.5px; }
  .navbar-brand .logo-img, .navbar-brand img { max-height: 34px; }
  .tiles .tile { border-right: 0; border-bottom: 1px solid var(--mh-border); }
  .tiles .tile i { font-size: 26px; }
  .mh-footer-inner { grid-template-columns: 1fr; }
  .mh-footer-bar { justify-content: center; text-align: center; }
  .main-navbar-wrapper .navbar-nav .nav-item.active { box-shadow: none; }
}
/* ===== Desktop (>= XL): dropdowns do menu abrem ao passar o mouse (sem clicar) ===== */
@media (min-width: 1200px) {
  .main-navbar-wrapper .navbar-nav .dropdown:hover > .dropdown-menu,
  .main-navbar-wrapper .navbar-nav .dropdown:focus-within > .dropdown-menu { display: block; }
  /* ponte invisível cobre o gap entre o item e o submenu (não fecha ao descer o mouse) */
  .main-navbar-wrapper .navbar-nav .dropdown > .dropdown-menu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  }
}

/* ===== Menu sanduíche (mobile/tablet < XL): mostra TUDO expandido, como o site =====
   A navbar do twenty-one (navbar-expand-xl) colapsa abaixo de 1200px. Por padrão os
   dropdowns de categoria ficam recolhidos (precisa tocar). Aqui deixamos os submenus
   SEMPRE abertos e inline, com a categoria virando um cabeçalho — igual ao mobile do site. */
@media (max-width: 1199.98px) {
  /* Menu sanduíche rolável: lista longa de categorias não empurra a página */
  .main-navbar-wrapper .navbar-collapse { max-height: calc(100vh - 120px); overflow-y: auto; }
  .main-navbar-wrapper .navbar-nav .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none; width: 100%;
    margin: 0 0 6px; padding: 0;
    background: transparent; border: none; box-shadow: none;
  }
  /* Categoria = cabeçalho (rótulo, não precisa tocar) */
  .main-navbar-wrapper .navbar-nav > li.dropdown > a.dropdown-toggle {
    font-family: var(--mh-font-display); font-weight: 800;
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mh-fg3) !important; pointer-events: none;
    padding: 16px 0 6px !important;
  }
  .main-navbar-wrapper .navbar-nav > li.dropdown > a.dropdown-toggle::after { display: none; }
  /* Produtos listados sob a categoria */
  .main-navbar-wrapper .navbar-nav .dropdown-menu li.dropdown-item { padding: 0 !important; background: transparent; }
  .main-navbar-wrapper .navbar-nav .dropdown-menu a.dropdown-item {
    display: block; padding: 9px 0 9px 14px !important;
    font-weight: 600; color: var(--mh-fg1);
  }
  .main-navbar-wrapper .navbar-nav .dropdown-menu a.dropdown-item:hover,
  .main-navbar-wrapper .navbar-nav .dropdown-menu a.dropdown-item:focus { color: var(--mh-purple-600); }
  /* Links top-level SEM submenu (Início, Vincular Discord, Entre em Contato) —
     padroniza como itens de menu de verdade (estavam apertados e com cor estranha) */
  .main-navbar-wrapper .navbar-nav > li:not(.dropdown):not(.collapsable-dropdown) > a {
    display: block;
    padding: 11px 0 !important;
    font-family: var(--mh-font-body);
    font-size: 15px; font-weight: 700;
    color: var(--mh-fg1) !important; text-transform: none; letter-spacing: 0;
  }
  .main-navbar-wrapper .navbar-nav > li:not(.dropdown):not(.collapsable-dropdown) > a:hover,
  .main-navbar-wrapper .navbar-nav > li:not(.dropdown):not(.collapsable-dropdown) > a:focus {
    color: var(--mh-purple-600) !important;
  }
  /* Esconde o "Mais"/More (recurso de overflow só do desktop) no mobile */
  .main-navbar-wrapper .collapsable-dropdown { display: none !important; }
}

/* Oculta o "Powered by WHMCompleteSolution" (injetado pelo núcleo do WHMCS na home) */
#main-body p:has(> a[href*="whmcs.com"]) { display: none !important; }

/* ======================================================================
   REVISÃO (auditoria multiagente) — correções de consistência e A11y
   ====================================================================== */

/* Selos de status (faturas/tickets/serviços): fundo tintado claro + texto
   escuro, sobrepondo as cores BS3 (fundo colorido + texto branco) do
   theme.min.css que davam contraste péssimo (texto verde sobre fundo verde). */
.label.status, .label[class*="status-"] { border-radius: var(--mh-r-pill); font-weight: 700; border: 1px solid transparent; }
.label.status-active, .label.status-paid, .label.status-open, .label.status-completed, .label-success {
  background: var(--mh-success-bg) !important; color: #15803d !important; border-color: rgba(45,212,106,.3) !important;
}
.label.status-unpaid, .label.status-cancelled, .label.status-terminated, .label.status-fraud, .label.status-expired, .label-danger {
  background: var(--mh-danger-bg) !important; color: #b91c1c !important; border-color: rgba(244,91,91,.3) !important;
}
.label.status-pending, .label.status-suspended, .label.status-customer-reply, .label.status-payment-pending, .label.status-on-hold, .label-warning {
  background: var(--mh-warning-bg) !important; color: #b45309 !important; border-color: rgba(245,165,36,.3) !important;
}
.label.status-answered, .label.status-in-progress, .label-info {
  background: rgba(124,58,237,.12) !important; color: var(--mh-purple-700) !important; border-color: rgba(124,58,237,.25) !important;
}
.label.status-closed, .label.status-collections, .label.status-draft, .label.status-refunded {
  background: var(--mh-surface-2) !important; color: var(--mh-fg2) !important; border-color: var(--mh-border-2) !important;
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7), na cor da marca — não havia nenhum.
   :focus-visible só dispara no teclado; clique do mouse não mostra o anel. */
:where(a, button, .btn, .nav-link, .dropdown-item, .list-group-item-action, .page-link,
  input, select, textarea, [tabindex], summary):focus-visible {
  outline: 3px solid var(--mh-purple-500) !important; outline-offset: 2px; border-radius: var(--mh-r-sm);
}
/* Skip link "Pular para o conteúdo" — visível só ao foco do teclado (1º Tab) */
.sr-only-focusable:focus, .sr-only-focusable:focus-within {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
  z-index: 9999; padding: .5rem 1rem; background: #fff; color: var(--mh-purple-700);
  font-weight: 700; border-radius: var(--mh-r-sm); box-shadow: var(--mh-shadow-md);
}
/* Botões: halo de foco ROXO (substitui o azul #336699 herdado do Bootstrap/twenty-one) */
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(149,55,237,.30) !important; }

/* Utilitários BS ainda azuis/cinza herdados do twenty-one */
.bg-primary { background-image: var(--mh-grad-vi) !important; background-color: #7C3AED !important; }
.bg-info { background-color: #0e7490 !important; } /* a11y: branco ~5:1 (era #06B6D4 2.4:1) */
.bg-secondary { background-color: var(--mh-surface-2) !important; color: var(--mh-fg2) !important; }

/* Chip Pix do rodapé: teal escuro p/ legibilidade (#32BCAD sobre branco = 2.4:1) */
.mh-pay-chip.pix { color: #0F766E; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}