/* ==========================================================================
   Meu Tema - camada de marca por cima do Nexus (WHMCS 9)
   Carregado pelo hook includes/hooks/meutema_hooks.php, depois do CSS do Nexus.
   Não editamos nenhum arquivo do Nexus: uma atualização do WHMCS não apaga nada.

   Para trocar a identidade visual, mude só o bloco "1. Marca".
   ========================================================================== */

/* 1. Marca ---------------------------------------------------------------- */
:root {
  --mt-primary: #4f46e5;        /* cor principal (botões, links, destaques) */
  --mt-primary-hover: #4338ca;
  --mt-primary-active: #3730a3;
  --mt-primary-soft: #eef2ff;   /* fundo suave para itens ativos */
  --mt-accent: #7c3aed;         /* segunda cor (gradientes) */
  --mt-dark: #0f172a;           /* fundo escuro do Nexus (rodapé, áreas invertidas) */
  --mt-success: #059669;
  --mt-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --mt-shadow-md: 0 6px 20px rgba(15, 23, 42, .08);
}

/* 2. Tokens do Nexus apontando para a marca -------------------------------- */
:root {
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: var(--mt-primary);
  --primary-700: var(--mt-primary-hover);
  --primary-800: var(--mt-primary-active);
  --primary-900: #312e81;
  --primary-950: #1e1b4b;

  --primary: var(--primary-600);
  --primary-lifted: var(--primary-700);
  --primary-accented: var(--primary-800);

  /* O Nexus usa "grayscale" como cor de destaque: viramos para a marca */
  --grayscale: var(--mt-primary);
  --grayscale-lifted: var(--mt-primary-hover);
  --grayscale-accented: var(--mt-primary-active);

  --bg-inverted: var(--mt-dark);

  --rounding-sm: .375rem;
  --rounding-md: .625rem;
  --rounding-lg: 1rem;
}

/* 3. Base ----------------------------------------------------------------- */
body,
button, input, select, textarea, .tooltip, .popover {
  font-family: var(--mt-font);
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

.primary-content a:not(.btn):not(.list-group-item):not(.nav-link):not(.dropdown-item),
#order-standard_cart a:not(.btn):not(.list-group-item):not(.nav-link) {
  color: var(--mt-primary);
}
.primary-content a:not(.btn):not(.list-group-item):not(.nav-link):not(.dropdown-item):hover,
#order-standard_cart a:not(.btn):not(.list-group-item):not(.nav-link):hover {
  color: var(--mt-primary-hover);
}

:focus-visible { outline: 3px solid var(--primary-300); outline-offset: 2px; }

/* 4. Botões --------------------------------------------------------------- */
.btn { font-weight: 600; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.btn:active { transform: translateY(1px); }

.btn-primary,
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .text-right .btn-checkout,
#btnCompleteOrder,
#btnCompleteProductConfig,
#btnDomainContinue {
  background: var(--mt-primary);
  border-color: var(--mt-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
body #order-standard_cart .products .product footer .btn-order-now:hover,
body #order-standard_cart .text-right .btn-checkout:hover,
#btnCompleteOrder:hover,
#btnCompleteProductConfig:hover,
#btnDomainContinue:hover {
  background: var(--mt-primary-hover);
  border-color: var(--mt-primary-hover);
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}

/* 5. Formulários ---------------------------------------------------------- */
.form-control:focus,
.custom-select:focus {
  border-color: var(--mt-primary);
  box-shadow: 0 0 0 4px var(--mt-primary-soft);
}

/* 6. Sidebar e navegação -------------------------------------------------- */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
  background-color: var(--mt-primary-soft);
  color: var(--mt-primary);
  box-shadow: inset 3px 0 0 var(--mt-primary);
}
.nav-tabs .nav-link.active { color: var(--mt-primary); }
.page-item.active .page-link { background-color: var(--mt-primary); border-color: var(--mt-primary); }

/* 7. Cards ---------------------------------------------------------------- */
.primary-content .card,
.sidebar .card {
  box-shadow: var(--mt-shadow-sm);
}
.client-home-cards .card { transition: box-shadow 150ms ease, transform 150ms ease; }
.client-home-cards .card:hover { box-shadow: var(--mt-shadow-md); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}