/* ============================================================================
   Quenta — WHMCS theme stylesheet
   ----------------------------------------------------------------------------
   Port of the main site's design tokens (src/styles/global.css) into a single
   self-contained sheet. Tailwind is not available in WHMCS, so the utility
   classes used by the .tpl files are written out by hand. Keep this file in
   sync with DESIGN.md when tokens change upstream.
   ============================================================================ */

/* Fonts — pulled from Bunny Fonts (a GDPR-friendly Google Fonts mirror). */
@import url("https://fonts.bunny.net/css?family=fraunces:400i,500,500i,600|inter:400,500,600,700&display=swap");

:root {
  /* Ink (neutrals) */
  --color-ink-50: #fafafa;
  --color-ink-100: #f4f4f5;
  --color-ink-200: #e4e4e7;
  --color-ink-300: #a1a1aa;
  --color-ink-400: #71717a;
  --color-ink-500: #52525b;
  --color-ink-600: #3f3f46;
  --color-ink-700: #27272a;
  --color-ink-800: #18181b;
  --color-ink-900: #0a0a0b;
  --color-ink-950: #050507;

  /* Brand */
  --color-brand-blue: #1f3fbe;
  --color-brand-blue-lit: #4a6cff;
  --color-brand-red: #e63946;
  --color-brand-coral: #ff7a5c;

  --radius-edge: 1.25rem;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;

  --grain-opacity: 0.06;
  color-scheme: dark;
}

/* ---------- Reset-ish ------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html,
body {
  margin: 0;
  background: var(--color-ink-950);
  color: var(--color-ink-50);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: color-mix(in oklch, var(--color-brand-blue) 70%, transparent);
  color: white;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-ink-950);
}
::-webkit-scrollbar-thumb {
  background: color-mix(
    in oklch,
    var(--color-brand-blue) 25%,
    var(--color-ink-800)
  );
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in oklch,
    var(--color-brand-blue) 50%,
    var(--color-ink-700)
  );
}

/* WHMCS injects Bootstrap; we override the danger spots that bleed through. */
.alert,
.panel,
.well,
.card,
.form-control,
.input-group-addon {
  border-radius: var(--radius-edge);
}

/* ---------- Layout primitives --------------------------------------------- */

.container-q {
  width: 100%;
  max-width: 80rem; /* 1280px — matches max-w-7xl */
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .container-q {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container-q {
    padding-inline: 2rem;
  }
}

.relative {
  position: relative;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.inset-0 {
  inset: 0;
}
.z-50 {
  z-index: 50;
}
.z-60 {
  z-index: 60;
}
.isolate {
  isolation: isolate;
}
.overflow-hidden {
  overflow: hidden;
}
.text-center {
  text-align: center;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}

/* ---------- Typography ---------------------------------------------------- */

.font-display {
  font-family: var(--font-display);
}
.font-sans {
  font-family: var(--font-sans);
}
.italic {
  font-style: italic;
}

.display-h {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-brand-blue) 70%, white);
}

.grad-text {
  background-image: linear-gradient(
    120deg,
    var(--color-brand-blue-lit) 0%,
    var(--color-brand-blue) 35%,
    var(--color-brand-red) 70%,
    var(--color-brand-coral) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: grad-shift 14s ease-in-out infinite;
}
@keyframes grad-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.text-white {
  color: white;
}
.text-ink-100 {
  color: var(--color-ink-100);
}
.text-ink-200 {
  color: var(--color-ink-200);
}
.text-ink-300 {
  color: var(--color-ink-300);
}
.text-ink-400 {
  color: var(--color-ink-400);
}
.text-brand-blue {
  color: var(--color-brand-blue-lit);
}

/* ---------- Hairline / chip ---------------------------------------------- */

.hairline {
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, white 25%, transparent) 50%,
    transparent
  );
  height: 1px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in oklch, white 4%, transparent);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-200);
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-brand-blue);
  box-shadow: 0 0 12px var(--color-brand-blue);
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  padding: 0.625rem 1.25rem;
  font-size: 13px;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease;
  will-change: transform;
}
.btn-lg {
  padding: 0.85rem 1.5rem;
  font-size: 15px;
}
.btn-xl {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

.btn-fill {
  background: linear-gradient(
    120deg,
    var(--color-brand-blue-lit),
    var(--color-brand-blue) 50%,
    var(--color-brand-red)
  );
  background-size: 180% 100%;
  color: white;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px -12px
      color-mix(in oklch, var(--color-brand-blue) 60%, transparent);
}
.btn-fill:hover {
  background-position: 100% 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 26px 50px -10px
      color-mix(in oklch, var(--color-brand-red) 55%, transparent);
  transform: translateY(-1px);
  color: white;
}

.btn-ghost {
  border: 1px solid color-mix(in oklch, white 14%, transparent);
  color: var(--color-ink-100);
  background: color-mix(in oklch, white 2%, transparent);
}
.btn-ghost:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 60%, transparent);
  background: color-mix(in oklch, var(--color-brand-blue) 10%, transparent);
  transform: translateY(-1px);
}

/* Map WHMCS / Bootstrap button classes to ours so legacy templates blend in. */
.btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary {
  background: linear-gradient(
    120deg,
    var(--color-brand-blue-lit),
    var(--color-brand-blue) 50%,
    var(--color-brand-red)
  );
  background-size: 180% 100%;
  color: white;
  border-radius: 999px;
  border: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px -12px
      color-mix(in oklch, var(--color-brand-blue) 60%, transparent);
}
.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  color: white;
}
.btn-default,
.btn-secondary {
  background: color-mix(in oklch, white 2%, transparent);
  border: 1px solid color-mix(in oklch, white 14%, transparent);
  color: var(--color-ink-100);
  border-radius: 999px;
}
.btn-default:hover,
.btn-secondary:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 60%, transparent);
  background: color-mix(in oklch, var(--color-brand-blue) 10%, transparent);
  color: white;
}

/* ---------- Surfaces ------------------------------------------------------ */

.surface {
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 8%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, white 4%, transparent) 0%,
      color-mix(in oklch, white 0%, transparent) 100%
    );
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  transition:
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.surface:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 50%, transparent);
}

.glass {
  background: color-mix(in oklch, white 4%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* ---------- Forms (WHMCS form-control etc.) ------------------------------ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  background: color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  border-radius: 12px;
  color: var(--color-ink-50);
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 15px;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 60%,
    transparent
  );
  /* background-color, not the `background` shorthand: the shorthand resets
     background-image to none, which on <select> wipes the dropdown chevron
     and — because `background` is transitioned — animates it out on focus. */
  background-color: color-mix(in oklch, white 5%, transparent);
  box-shadow: 0 0 0 2px
    color-mix(in oklch, var(--color-brand-blue-lit) 30%, transparent);
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-ink-500);
}

label,
.control-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  display: block;
  margin-bottom: 0.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

/* Bootstrap tables */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th,
.table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
}
.table th {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  font-weight: 500;
}
.table tbody tr {
  transition: background 0.2s ease;
}
.table tbody tr:hover {
  background: color-mix(in oklch, white 2%, transparent);
}

/* ---------- Alerts -------------------------------------------------------- */

.alert {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  color: var(--color-ink-200);
}
.alert-success {
  border-color: color-mix(in oklch, #34d399 35%, transparent);
  background: color-mix(in oklch, #34d399 12%, transparent);
  color: #d1fae5;
}
.alert-warning {
  border-color: color-mix(in oklch, var(--color-brand-coral) 40%, transparent);
  background: color-mix(in oklch, var(--color-brand-coral) 12%, transparent);
  color: #fed7aa;
}
.alert-danger {
  border-color: color-mix(in oklch, var(--color-brand-red) 50%, transparent);
  background: color-mix(in oklch, var(--color-brand-red) 12%, transparent);
  color: #fecaca;
}
.alert-info {
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 40%,
    transparent
  );
  background: color-mix(in oklch, var(--color-brand-blue-lit) 12%, transparent);
  color: var(--color-ink-100);
}

.alert li {
  list-style: none;
}

/* ---------- MD Tools ---------- */

.md-controls {
  margin-top: 1rem;
}

.md-control-fullscreen,
.md-fullscreen-controls {
  display: none;
}

/* ---------- Site nav ------------------------------------------------------ */

#site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition:
    background 0.5s ease,
    backdrop-filter 0.5s ease,
    border-color 0.5s ease,
    padding 0.5s ease;
}
#site-nav .nav-shell {
  position: relative;
  margin-top: 1rem;
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, var(--color-ink-950) 60%, transparent);
  padding: 0 1rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 640px) {
  #site-nav .nav-shell {
    height: 68px;
    padding: 0 1.5rem;
  }
}
#site-nav[data-scrolled="true"] .nav-shell {
  background: color-mix(in oklch, var(--color-ink-950) 78%, transparent);
  border-color: color-mix(in oklch, white 12%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.6);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.brand-mark .halo {
  position: relative;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
}
.brand-mark .halo::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(29, 34, 75, 0.55),
    transparent 72%
  );
  filter: blur(14px);
  pointer-events: none;
}
.brand-mark .halo::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(24, 50, 255, 0.45),
    transparent 65%
  );
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
}
.brand-mark .halo img {
  position: relative;
  height: 2.25rem;
  width: 2.25rem;
  object-fit: contain;
}
.brand-mark .wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: white;
}
.brand-mark .wordmark .light {
  color: var(--color-ink-300);
  font-weight: 300;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-300);
  transition: color 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: white;
}
.nav-links a.active {
  background: color-mix(in oklch, var(--color-brand-blue) 14%, transparent);
}

.nav-cta-group {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .nav-cta-group {
    display: flex;
  }
}

.nav-mobile-toggle {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: transparent;
  color: var(--color-ink-100);
}
@media (min-width: 768px) {
  .nav-mobile-toggle {
    display: none;
  }
}

#mobile-menu {
  margin: 0.5rem 1rem 0;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  background: color-mix(in oklch, var(--color-ink-950) 85%, transparent);
  padding: 1.25rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
#mobile-menu[hidden] {
  display: none;
}
@media (min-width: 768px) {
  #mobile-menu {
    display: none !important;
  }
}
#mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#mobile-menu a {
  display: block;
  border-radius: 0.75rem;
  padding: 0.75rem;
  color: var(--color-ink-200);
}
#mobile-menu a:hover {
  background: color-mix(in oklch, white 5%, transparent);
  color: white;
}

/* ---------- Sidebar (client area) ---------------------------------------- */

.q-shell {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 960px) {
  .q-shell {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 3rem;
  }
}

.q-side {
  position: sticky;
  top: 8rem;
  align-self: start;
  border-radius: var(--radius-edge);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  padding: 1.25rem;
}
.q-side .side-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin: 0 0 0.75rem 0.5rem;
}
.q-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.q-side a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  color: var(--color-ink-200);
  font-size: 14px;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.q-side a:hover {
  background: color-mix(in oklch, white 4%, transparent);
  color: white;
}
.q-side a.active {
  background: color-mix(in oklch, var(--color-brand-blue) 14%, transparent);
  color: white;
  box-shadow: inset 0 0 0 1px
    color-mix(in oklch, var(--color-brand-blue) 30%, transparent);
}
.q-side a .badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-brand-red) 25%, transparent);
  color: #fecaca;
}

.q-main {
  min-width: 0;
}

/* ---------- Plan / pricing card ------------------------------------------ */

.plan-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 8%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, white 4%, transparent) 0%,
      color-mix(in oklch, white 0%, transparent) 100%
    );
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  transition:
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.plan-card:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 50%, transparent);
}
.plan-card.featured {
  background:
    radial-gradient(
      140% 80% at 50% 0%,
      color-mix(in oklch, var(--color-brand-blue) 20%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, white 5%, transparent) 0%,
      color-mix(in oklch, white 0%, transparent) 100%
    );
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 35%,
    transparent
  );
}
.plan-card .plan-badge {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    var(--color-brand-blue-lit),
    var(--color-brand-red)
  );
  color: white;
  font-weight: 600;
}
.plan-card .plan-name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.plan-card .plan-tagline {
  color: var(--color-ink-300);
  font-size: 14px;
  margin-top: 0.5rem;
}
.plan-card .plan-price {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.plan-card .plan-price .amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-card .plan-price .cycle {
  color: var(--color-ink-400);
  font-size: 14px;
}
.plan-card .plan-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 14.5px;
  color: var(--color-ink-200);
  flex: 1;
}
.plan-card .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.plan-card .plan-features svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-brand-blue-lit);
}

/* ---------- FAQ ----------------------------------------------------------- */

details.faq summary {
  list-style: none;
  cursor: pointer;
}
details.faq summary::-webkit-details-marker {
  display: none;
}
details.faq[open] .faq-icon {
  transform: rotate(45deg);
}
details.faq .faq-icon {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
details.faq {
  border-bottom: 1px solid color-mix(in oklch, white 8%, transparent);
  padding: 0.5rem 0;
}
details.faq:first-of-type {
  border-top: 1px solid color-mix(in oklch, white 8%, transparent);
}
details.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
}
details.faq .faq-number {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-ink-500);
  margin-top: 4px;
}
details.faq .faq-question {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 500;
  color: white;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  details.faq .faq-question {
    font-size: 1.25rem;
  }
}
details.faq .faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  color: var(--color-brand-blue-lit);
}
details.faq .faq-answer {
  padding: 0 3.5rem 1.5rem 2.5rem;
  color: var(--color-ink-300);
  text-wrap: pretty;
  line-height: 1.6;
}

/* ---------- Aurora -------------------------------------------------------- */

.aurora {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora .blob-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.aurora .wrap-a {
  transform: translate3d(
    calc(var(--mxn, 0) * 3.5vw),
    calc(var(--myn, 0) * 3.5vw),
    0
  );
}
.aurora .wrap-b {
  transform: translate3d(
    calc(var(--mxn, 0) * -4.5vw),
    calc(var(--myn, 0) * -3vw),
    0
  );
}
.aurora .wrap-c {
  transform: translate3d(
    calc(var(--mxn, 0) * 2.5vw),
    calc(var(--myn, 0) * -2vw),
    0
  );
}
.aurora .blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora .blob-a {
  width: 52vw;
  height: 52vw;
  left: -10vw;
  top: -10vw;
  background: radial-gradient(closest-side, #4a6cff, transparent 70%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.aurora .blob-b {
  width: 44vw;
  height: 44vw;
  right: -8vw;
  top: 12vh;
  background: radial-gradient(closest-side, #1f3fbe, transparent 70%);
  animation: drift-b 28s ease-in-out infinite alternate;
}
.aurora .blob-c {
  width: 60vw;
  height: 60vw;
  left: 22vw;
  bottom: -20vw;
  background: radial-gradient(closest-side, #e63946, transparent 70%);
  opacity: 0.35;
  animation: drift-c 34s ease-in-out infinite alternate;
}
.aurora .grid-mask {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 30%,
    transparent 75%
  );
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  animation: grid-drift 18s linear infinite;
}
@keyframes drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(12vw, 8vh, 0) scale(1.15);
  }
}
@keyframes drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-10vw, 12vh, 0) scale(1.08);
  }
}
@keyframes drift-c {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-8vw, -10vh, 0) scale(1.22);
  }
}
@keyframes grid-drift {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      88px 88px,
      88px 88px;
  }
}

/* ---------- Grain --------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

/* ---------- Reveal-on-scroll initial state -------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Footer -------------------------------------------------------- */

.site-footer {
  position: relative;
  border-top: 1px solid color-mix(in oklch, white 8%, transparent);
  padding: 5rem 0 2.5rem;
  margin-top: 6rem;
}
.site-footer .ft-grid {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 768px) {
  .site-footer .ft-grid {
    grid-template-columns: 5fr 7fr;
  }
}
.site-footer .ft-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .site-footer .ft-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
.site-footer h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ink-400);
  margin: 0 0 1rem;
  font-weight: 500;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.site-footer a {
  color: var(--color-ink-200);
  transition: color 0.25s ease;
}
.site-footer a:hover {
  color: white;
}

.site-footer .ft-watermark {
  position: relative;
  margin-top: 4rem;
  user-select: none;
  overflow: hidden;
}
.site-footer .ft-watermark p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 16rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.site-footer .ft-meta {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid color-mix(in oklch, white 8%, transparent);
  padding-top: 1.5rem;
  font-size: 12px;
  color: var(--color-ink-400);
}
@media (min-width: 640px) {
  .site-footer .ft-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.site-footer .ft-meta .links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-footer .ft-logo {
  position: relative;
  display: inline-block;
}
.site-footer .ft-logo::before {
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(74, 108, 255, 0.32),
    transparent 70%
  );
  filter: blur(24px);
  pointer-events: none;
}
.site-footer .ft-logo img {
  position: relative;
  height: 3rem;
  width: auto;
}

/* ---------- Section rhythm ------------------------------------------------ */

.section {
  position: relative;
  padding: 6rem 0;
}
@media (min-width: 640px) {
  .section {
    padding: 8rem 0;
  }
}
.section.sm {
  padding: 4rem 0;
}
.section.lg {
  padding: 8rem 0 10rem;
}

.section-head {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .section-head {
    grid-template-columns: 5fr 7fr;
    align-items: end;
  }
}

/* ---------- Misc utilities used inline ------------------------------------ */

.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-col {
  flex-direction: column;
}
.w-full {
  width: 100%;
}

.text-lg {
  font-size: 18px;
}
.text-xl {
  font-size: 20px;
}
.text-2xl {
  font-size: 24px;
}
.leading-relaxed {
  line-height: 1.6;
}

/* ============================================================================
   Bootstrap-compatible layout primitives
   ----------------------------------------------------------------------------
   WHMCS Twenty-One markup uses Bootstrap 3/5 grid classes (`.row`, `.col-md-*`)
   and component classes (`.panel`, `.list-group`, `.well`). Because we replace
   Twenty-One's header.tpl wholesale, we lose its bundled stylesheet — so those
   class names render as plain divs and the layout collapses to a single column.
   This block provides minimal, Quenta-skinned implementations of the classes
   WHMCS actually emits.
   ============================================================================ */

/* ---------- Page head (chip + title + secondary nav) --------------------- */

.page-head {
  padding: 0.5rem 0 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in oklch, white 8%, transparent);
}
.page-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  margin: 0;
  color: white;
  text-wrap: balance;
}
.page-eyebrow-nav {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.page-eyebrow-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-300);
  border: 1px solid transparent;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.page-eyebrow-link:hover {
  color: white;
  background: color-mix(in oklch, white 4%, transparent);
}
.page-eyebrow-link.is-active {
  color: white;
  background: color-mix(in oklch, var(--color-brand-blue) 14%, transparent);
  border-color: color-mix(in oklch, var(--color-brand-blue) 30%, transparent);
}

/* ---------- 12-column grid (Bootstrap-compatible) ------------------------ */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -0.75rem;
}
.row > [class*="col-"] {
  padding-inline: 0.75rem;
  min-width: 0;
  margin-bottom: 1.5rem;
}

/* xs (always-on) */
.col-1 {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.col-2 {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.col-5 {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}
.col-8 {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.col-11 {
  flex: 0 0 91.6667%;
  max-width: 91.6667%;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* xs (Bootstrap 3 syntax). WHMCS emits both forms together, e.g.
   `class="col-xs-4 col-4"`, so xs widths must mirror the unprefixed ones —
   not collapse every column to 100%. */
.col-xs-1 {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.col-xs-2 {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
}
.col-xs-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-xs-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.col-xs-5 {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}
.col-xs-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-xs-7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}
.col-xs-8 {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}
.col-xs-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-xs-10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.col-xs-11 {
  flex: 0 0 91.6667%;
  max-width: 91.6667%;
}
.col-xs-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* sm ≥ 576px */
@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-sm-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-sm-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-sm-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-sm-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-md-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-md-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-md-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-lg-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-lg-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-lg-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-lg-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.container-fluid {
  width: 100%;
  padding-inline: 1rem;
}

/* Common Bootstrap helpers WHMCS emits */
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-muted {
  color: var(--color-ink-400);
}
.text-success {
  color: #34d399;
}
.text-danger {
  color: var(--color-brand-red);
}
.text-warning {
  color: var(--color-brand-coral);
}
.text-info {
  color: var(--color-brand-blue-lit);
}
.text-primary {
  color: var(--color-brand-blue-lit);
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.hidden,
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}
.hidden-xs {
  display: none;
}
@media (min-width: 768px) {
  .hidden-xs {
    display: initial;
  }
}
.visible-xs {
  display: initial;
}
@media (min-width: 768px) {
  .visible-xs {
    display: none;
  }
}

/* ---------- Panel (Twenty-One uses this for every card) ------------------ */

.panel {
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 8%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, white 4%, transparent) 0%,
      color-mix(in oklch, white 0%, transparent) 100%
    );
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition:
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 35%, transparent);
}
.panel-heading {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-300);
}
.panel-heading i,
.panel-heading .fa,
.panel-heading .fas,
.panel-heading svg {
  color: var(--color-brand-blue-lit);
}
.panel-title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-300);
  font-family: var(--font-sans);
}
.panel-body {
  padding: 1.25rem 1.5rem;
}
.panel-footer {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid color-mix(in oklch, white 6%, transparent);
  background: color-mix(in oklch, white 2%, transparent);
  font-size: 13px;
  color: var(--color-ink-300);
}
.panel-default,
.panel-primary,
.panel-success,
.panel-info,
.panel-warning,
.panel-danger {
  /* All panel variants share the same base look; status comes through the heading bar. */
}

/* ---------- Twenty-One client-area home: 4 stat tiles -------------------- */
/* Twenty-One renders each stat as: panel > a > panel-body > i.icon + h2(count) + h3(label).
   Make the body big-numeric, the link a full-bleed target, and lift on hover. */

.client-home-panels .panel,
.home-shortcuts .panel,
.summary-row .panel {
  margin-bottom: 0;
  height: 100%;
}
.client-home-panels .panel-body,
.home-shortcuts .panel-body,
.summary-row .panel-body {
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.client-home-panels a,
.home-shortcuts a,
.summary-row a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.client-home-panels .panel i,
.client-home-panels .panel .fa,
.client-home-panels .panel svg,
.home-shortcuts i,
.home-shortcuts .fa,
.home-shortcuts svg,
.summary-row i,
.summary-row .fa,
.summary-row svg {
  font-size: 1.75rem;
  width: 32px;
  height: 32px;
  margin-bottom: 0.75rem;
  color: var(--color-brand-blue-lit);
  opacity: 0.9;
}
.client-home-panels .panel h2,
.client-home-panels .panel .summary-figure,
.home-shortcuts h2,
.summary-row h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: white;
}
.client-home-panels .panel h3,
.home-shortcuts h3,
.summary-row h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin: 0.5rem 0 0;
}

/* "Your Active Products / Domains / etc." section headers */
.client-home-panels h2,
h2.summary-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
  color: white;
}

/* ---------- List group (used for product/domain/ticket rows) ------------- */

.list-group {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-radius: var(--radius-edge);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
}
.list-group-item {
  position: relative;
  display: block;
  padding: 1rem 1.25rem;
  background: color-mix(in oklch, white 2%, transparent);
  border-top: 1px solid color-mix(in oklch, white 6%, transparent);
  color: var(--color-ink-100);
  text-decoration: none;
  transition: background 0.25s ease;
}
.list-group-item:first-child {
  border-top: 0;
}
.list-group-item:hover,
a.list-group-item:hover {
  background: color-mix(in oklch, white 4%, transparent);
  color: white;
}
.list-group-item h4,
.list-group-item .list-group-item-heading {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
}
.list-group-item p,
.list-group-item .list-group-item-text {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-400);
}

/* Twenty-One's active-products list */
.active-products,
.active-services,
.client-services,
.client-domains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.active-products > li,
.active-services > li,
.client-services > li,
.client-domains > li {
  padding: 1.25rem 1.5rem;
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 6%, transparent) 0%,
      transparent 60%
    ),
    color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  transition: border-color 0.3s ease;
}
.active-products > li:hover,
.active-services > li:hover,
.client-services > li:hover,
.client-domains > li:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 35%, transparent);
}

/* ---------- Status labels / badges --------------------------------------- */

.label,
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in oklch, white 8%, transparent);
  color: var(--color-ink-200);
  line-height: 1.4;
}
.label-success,
.badge-success,
.status-active,
.status-Active {
  background: color-mix(in oklch, #34d399 18%, transparent);
  color: #d1fae5;
}
.label-warning,
.badge-warning,
.status-pending,
.status-Pending {
  background: color-mix(in oklch, var(--color-brand-coral) 22%, transparent);
  color: #fed7aa;
}
.label-danger,
.badge-danger,
.status-suspended,
.status-Suspended,
.status-cancelled,
.status-Cancelled,
.status-terminated,
.status-Terminated {
  background: color-mix(in oklch, var(--color-brand-red) 22%, transparent);
  color: #fecaca;
}
.label-info,
.badge-info {
  background: color-mix(in oklch, var(--color-brand-blue-lit) 22%, transparent);
  color: #c7d2fe;
}
.label-default,
.badge-default {
  background: color-mix(in oklch, white 8%, transparent);
  color: var(--color-ink-200);
}

/* ---------- Well + jumbotron --------------------------------------------- */

.well,
.jumbotron {
  padding: 1.5rem;
  background: color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  margin-bottom: 1.5rem;
}

/* ---------- Dropdown menu ------------------------------------------------ */

.dropdown-menu {
  background: color-mix(in oklch, var(--color-ink-900) 95%, transparent);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  border-radius: 12px;
  padding: 0.375rem;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.dropdown-menu > li > a,
.dropdown-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--color-ink-200);
  font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-item:hover {
  background: color-mix(in oklch, white 5%, transparent);
  color: white;
}

/* ---------- Pagination --------------------------------------------------- */

.pagination {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  list-style: none;
  margin: 1.5rem 0;
}
.pagination li a,
.pagination li span,
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 2%, transparent);
  color: var(--color-ink-200);
  text-decoration: none;
}
.pagination li.active a,
.pagination .page-item.active .page-link {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: white;
}

/* ---------- Tabs --------------------------------------------------------- */

.nav-tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid color-mix(in oklch, white 8%, transparent);
}
.nav-tabs li a,
.nav-tabs .nav-link {
  display: inline-flex;
  padding: 0.625rem 1rem;
  border-radius: 12px 12px 0 0;
  color: var(--color-ink-300);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.nav-tabs li.active a,
.nav-tabs .nav-link.active {
  color: white;
  border-bottom-color: var(--color-brand-blue-lit);
  background: color-mix(in oklch, white 3%, transparent);
}

/* ---------- Common Twenty-One inline patterns ---------------------------- */

/* Big plain numbers inline ("1 Services", "2 Domains" stacked text) — keep
   readable even if our stat-tile selectors miss the markup. */
h2 + h3,
.summary-figure + .summary-label {
  display: block;
}

/* Inline button spacing inside list rows */
.btn + .btn {
  margin-left: 0.375rem;
}

/* Make sure raw <i class="fa-..."> icons inherit color even without Font Awesome loaded */
i[class*="fa-"],
i.icon {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================================
   WHMCS client-area home — Twenty-One components
   ----------------------------------------------------------------------------
   Twenty-One's clientareahome.tpl ships four stat tiles, three card sections
   (active products / tickets+news / register-domain), Bootstrap-4 split
   buttons and an input-group. None of those primitives had Quenta skins —
   the cards rendered as bare divs, the dropdowns hung open without JS to
   close them, and the stat tiles were invisible. Skins live here so they
   are easy to lift out if WHMCS ever moves on from Twenty-One.
   ============================================================================ */

/* ---------- Utility classes Twenty-One assumes from Bootstrap 4 ---------- */

.float-left {
  float: left;
}
.float-right {
  float: right;
}

.font-weight-bold {
  font-weight: 600;
}
.font-weight-normal {
  font-weight: 400;
}

.m-0 {
  margin: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mr-2 {
  margin-right: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.px-2 {
  padding-inline: 0.5rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.p-3 {
  padding: 1rem;
}

.no-gutters {
  margin-inline: 0;
}
.no-gutters > [class*="col-"] {
  padding-inline: 0;
  margin-bottom: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* xl ≥ 1200px — Twenty-One puts the home grid on col-xl-3 / col-xl-6. */
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-xl-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-xl-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-xl-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-xl-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Flat-UI named accent colors --> Quenta brand tokens --------- */

.bg-color-blue {
  background-color: var(--color-brand-blue-lit);
  color: white;
}
.bg-color-green {
  background-color: #34d399;
  color: #052e16;
}
.bg-color-red {
  background-color: var(--color-brand-red);
  color: white;
}
.bg-color-gold {
  background-color: #f59e0b;
  color: #1c1207;
}
.bg-color-asbestos {
  background-color: var(--color-ink-500);
  color: white;
}
.bg-color-emerald {
  background-color: #10b981;
  color: #052e16;
}

/* When the accent class lands on a button/link, keep our pill chrome. */
.btn.bg-color-blue,
.btn.bg-color-green,
.btn.bg-color-red,
.btn.bg-color-gold,
.btn.bg-color-asbestos,
.btn.bg-color-emerald {
  border-radius: 999px;
  border: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.btn.bg-color-blue:hover,
.btn.bg-color-green:hover,
.btn.bg-color-red:hover,
.btn.bg-color-gold:hover,
.btn.bg-color-asbestos:hover,
.btn.bg-color-emerald:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ---------- 4-up stat tiles (Services / Domains / Tickets / Invoices) --- */

.tiles {
  margin-bottom: 1.5rem;
}
.tiles .row {
  margin-inline: -0.375rem;
}
.tiles .row > [class*="col-"] {
  padding-inline: 0.375rem;
  margin-bottom: 0.75rem;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1.25rem 1.25rem 1.1rem;
  height: 100%;
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 8%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, white 4%, transparent) 0%,
      color-mix(in oklch, white 0%, transparent) 100%
    );
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  color: var(--color-ink-100);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 40%, transparent);
  transform: translateY(-1px);
  color: white;
}
.tile > i,
.tile > .fa,
.tile > .fas,
.tile > svg {
  font-size: 1.25rem;
  color: var(--color-brand-blue-lit);
  opacity: 0.85;
  margin-bottom: 0.5rem;
}
.tile .stat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: white;
}
.tile .title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin-top: 0.25rem;
}
.tile .highlight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  opacity: 0.85;
}

/* ---------- Bootstrap 4 .card (header / body / footer) ------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 7%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, white 4%, transparent) 0%,
      color-mix(in oklch, white 0%, transparent) 100%
    );
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: var(--radius-edge);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.card:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 30%, transparent);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
  background: color-mix(in oklch, white 2%, transparent);
}
.card-header .card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  text-transform: none;
}
.card-header .card-title > i,
.card-header .card-title > .fa,
.card-header .card-title > .fas,
.card-header .card-title > .far,
.card-header .card-title > svg {
  color: var(--color-brand-blue-lit);
  font-size: 0.95em;
  flex: 0 0 auto;
}
/* WHMCS emits <div class="float-right"> as the FIRST child of card-title; let
   flex order push it back to the right of the title text. */
.card-header .card-title .float-right,
.card-header .card-title .pull-right {
  order: 2;
  float: none;
  margin-left: auto;
}

.card-body {
  padding: 1.25rem 1.5rem;
}
.card-body > p:last-child {
  margin-bottom: 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid color-mix(in oklch, white 6%, transparent);
  background: color-mix(in oklch, white 2%, transparent);
  font-size: 13px;
  color: var(--color-ink-300);
}
.card-footer:empty {
  display: none;
}

/* Accent stripe on the left edge — distinguishes each card section. */
.card[class*="card-accent-"] {
  padding-left: 3px;
}
.card[class*="card-accent-"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  z-index: 1;
}
.card-accent-blue::before {
  background: var(--color-brand-blue-lit);
}
.card-accent-gold::before {
  background: #f59e0b;
}
.card-accent-asbestos::before {
  background: var(--color-ink-500);
}
.card-accent-emerald::before {
  background: #10b981;
}
.card-accent-red::before {
  background: var(--color-brand-red);
}
.card-accent-green::before {
  background: #34d399;
}

/* List groups nested inside a card sit flush — no outer radius, no gap. */
.card .list-group {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.card > .list-group .list-group-item:first-child {
  border-top: 0;
}

/* "View more →" link in card footer */
.btn-view-more {
  font-size: 13px;
  color: var(--color-brand-blue-lit);
  text-decoration: none;
}
.btn-view-more:hover {
  color: white;
}
.btn-view-more.disabled,
.btn-view-more[aria-disabled="true"] {
  color: var(--color-ink-500);
  pointer-events: none;
}

/* Multi-card grid wrapper — keep equal heights across each row. */
.client-home-cards .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.client-home-cards .card {
  flex: 1;
}

/* ---------- Service / domain row (.div-service-item) -------------------- */
/* Layout: [status badges, full-width row 1] [name + domain | actions]. */

.div-service-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.div-service-status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.div-service-name {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.div-service-name .font-weight-bold {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
  line-height: 1.25;
}
.text-domain {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-ink-200);
  letter-spacing: 0;
  text-transform: none;
}
.div-service-buttons {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 575px) {
  .div-service-item {
    grid-template-columns: 1fr;
  }
  .div-service-buttons {
    justify-content: flex-start;
  }
}

/* WHMCS emits every status label up-front and uses CSS to colour the active
   one. The placeholder ghost has no semantic class — hide it. */
.label-placeholder {
  display: none !important;
}

/* Clickable list rows */
.list-group-item-action {
  cursor: pointer;
}
.list-group-item-action:hover {
  background: color-mix(in oklch, white 4%, transparent);
}

/* ---------- Button sizes / variants Twenty-One uses --------------------- */

.btn-xs {
  padding: 0.3rem 0.75rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.btn-sm {
  padding: 0.45rem 0.95rem;
  font-size: 12.5px;
}
.btn-success {
  background: linear-gradient(120deg, #10b981, #047857);
  color: white;
  border-radius: 999px;
  border: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn-success:hover {
  background: linear-gradient(120deg, #34d399, #059669);
  color: white;
  transform: translateY(-1px);
}

/* ---------- Button groups (split-button + caret dropdown) --------------- */

.btn-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group > .btn-group > .btn {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group > .btn:first-child,
.btn-group > .btn-group:first-child > .btn {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  margin-left: 0;
}
.btn-group > .btn:last-child,
.btn-group > .btn-group:last-child > .btn,
.btn-group > .dropdown-toggle:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.btn-group > .btn-group {
  display: inline-flex;
}

/* Primary group = mobile compact view (caret holds every action).
   Secondary group = desktop split button (primary action + dropdown). */
.btn-group-primary {
  display: none;
}
@media (max-width: 575px) {
  .btn-group-primary {
    display: inline-flex;
  }
  .btn-group-secondary {
    display: none;
  }
}

.dropdown-toggle {
  padding-inline: 0.75rem;
  min-width: 32px;
}
.dropdown-toggle .caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  margin-top: 1px;
}

/* ---------- Dropdown menu (hidden until JS adds .show) ------------------ */

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 12rem;
  margin-top: 0.25rem;
  list-style: none;
  display: none;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
.dropdown-menu > li {
  list-style: none;
}
.dropdown-item,
.dropdown-menu > li.dropdown-item {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--color-ink-200);
  font-size: 14px;
}
.dropdown-item:hover,
.dropdown-menu > li.dropdown-item:hover {
  background: color-mix(in oklch, white 5%, transparent);
  color: white;
}
.loading {
  display: inline-flex;
  margin-right: 0.25rem;
}

/* ---------- Input group (Register Domain form) -------------------------- */

.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > input[type="text"] {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* A trailing control (e.g. the TLD <select> after the domain text box) must be
   square on the left where it meets the previous control, rounded on the right
   outer edge — the rule above squares the right radii of *every* member, so the
   last form-control needs them restored. */
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.input-group-btn,
.input-group-append {
  display: inline-flex;
  align-items: stretch;
}
.input-group-btn > .btn,
.input-group-btn > input.btn,
.input-group-append > .btn,
.input-group-append > input.btn {
  border-radius: 0;
  margin-left: -1px;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
}
.input-group-btn > .btn:last-child,
.input-group-btn > input.btn:last-child,
.input-group-append > .btn:last-child,
.input-group-append > input.btn:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.input-group .margin-10 {
  margin: 0;
}

/* ---------- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .aurora .blob,
  .aurora .grid-mask {
    animation: none;
  }
  .aurora .blob-wrap {
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   Standalone theme additions (v2)
   ----------------------------------------------------------------------------
   When the theme stopped inheriting from Twenty-One, two things changed:
     1. We own every page template — auth, KB, tickets, etc. — and they each
        introduce a few small UI primitives that didn't exist before.
     2. We no longer benefit from Twenty-One's bootstrap.min.css, so some
        utility classes need explicit definitions and some pages get a forced
        `!important` guard to neutralize stray inline styles WHMCS injects.
   Everything below is scoped to those needs; nothing here re-styles existing
   selectors except where noted.
   ============================================================================ */

/* ---------- Force dropdown menus closed by default ----------------------- */
/* Twenty-One's bootstrap CSS used to provide this; without it the WHMCS
   client-area cards rendered every dropdown's contents open. We use
   !important on the closed state so any inline `display:block` WHMCS adds
   server-side does not leak. */
.dropdown-menu {
  display: none !important;
}
.dropdown-menu.show,
.dropdown-menu.open,
.open > .dropdown-menu,
.show > .dropdown-menu {
  display: block !important;
}

/* ---------- Tile icon (SVG variant) -------------------------------------- */
.tile-icon {
  color: var(--color-brand-blue-lit);
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

/* ---------- Empty / blank states ----------------------------------------- */
.empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  border-radius: var(--radius-edge);
  border: 1px dashed color-mix(in oklch, white 12%, transparent);
  background: color-mix(in oklch, white 2%, transparent);
}
.empty-state .empty-icon {
  color: var(--color-ink-400);
  margin: 0 auto 1rem;
  display: block;
  opacity: 0.7;
}
.empty-state .empty-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink-100);
  margin: 0 0 0.5rem;
}
.empty-state p {
  color: var(--color-ink-300);
  margin: 0;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Auth pages (login / register / pwreset / 2fa) ---------------- */
.auth-wrap {
  display: grid;
  place-items: center;
  /* min-height: calc(100vh - 12rem); */
  padding: 2rem 0;
}
.auth-wrap-wide .auth-card {
  max-width: 44rem;
}
.auth-card {
  width: 100%;
  max-width: 28rem;
  padding: 2.5rem;
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 12%, transparent) 0%,
      transparent 60%
    ),
    color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  border-radius: var(--radius-edge);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.user-verify-email {
  display: grid;
  place-items: center;
  padding: 2rem 0;
}
.user-verify-email > .card {
  width: min(100%, 36rem);
  margin-right: auto;
  margin-left: auto;
}
.auth-head {
  margin-bottom: 1.75rem;
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0.5rem;
  color: white;
}
.auth-sub {
  color: var(--color-ink-300);
  margin: 0;
}
.auth-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.auth-row label {
  margin-bottom: 0;
}
.auth-link {
  color: var(--color-brand-blue-lit);
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.auth-link:hover {
  border-bottom-color: currentColor;
  color: white;
}
.auth-foot {
  margin: 1.5rem 0 0;
  text-align: center;
  color: var(--color-ink-400);
  font-size: 14px;
}

/* ---------- Check / radio rows ------------------------------------------- */
.check-line {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-100);
  cursor: pointer;
  margin: 0;
}
.check-line input[type="checkbox"],
.check-line input[type="radio"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-brand-blue-lit);
  flex: 0 0 auto;
}
.check-line span.muted {
  color: var(--color-ink-400);
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.25rem 1.5rem;
}

/* ---------- Key/value rows (used in invoices, services, domain detail) --- */
.kv-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
}
.kv-row:last-child {
  border-bottom: 0;
}
.kv-row dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink-400);
  margin: 0;
}
.kv-row dd {
  margin: 0;
  color: var(--color-ink-100);
}
@media (max-width: 575px) {
  .kv-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}
@media (max-width: 768px) {
  .kv-grid {
    grid-template-columns: 1fr;
  }
}
.kv-list {
  margin: 0;
  padding: 0;
}
.kv-list dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink-400);
}
.kv-list dd {
  margin: 0 0 0.75rem;
  color: var(--color-ink-100);
}

/* ---------- Muted / utility labels --------------------------------------- */
.muted {
  color: var(--color-ink-400);
}
.muted-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink-400);
  margin: 0 0 0.75rem;
}
.small {
  font-size: 12.5px;
}

/* ---------- Page introduction + page actions row ------------------------- */
.page-intro {
  color: var(--color-ink-200);
}
.page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- Form section title ------------------------------------------- */
.form-section-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
  margin: 1.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in oklch, white 8%, transparent);
}

/* ---------- Option card (ticket dept picker, etc.) ----------------------- */
.option-card {
  display: block;
  text-decoration: none;
  height: 100%;
}
.option-card .card-body {
  padding: 1.5rem;
}
.option-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
  margin: 0 0 0.5rem;
}
.option-desc {
  color: var(--color-ink-300);
  font-size: 14px;
  margin: 0;
}

/* ---------- Article list (KB) -------------------------------------------- */
.article-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-list li {
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
}
.article-list li:last-child {
  border-bottom: 0;
}
.article-list a {
  display: block;
  padding: 0.875rem 0;
  color: var(--color-ink-100);
  font-size: 15px;
  transition:
    color 0.25s ease,
    padding-inline-start 0.3s ease;
}
.article-list a:hover {
  color: var(--color-brand-blue-lit);
  padding-inline-start: 0.5rem;
}
.article-list p {
  margin: 0 0 0.5rem;
}

/* KB category cards */
.kb-cat-card {
  display: block;
  text-decoration: none;
  height: 100%;
}
.kb-cat-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
  margin: 0 0 0.25rem;
}
.kb-cat-desc {
  color: var(--color-ink-300);
  font-size: 14px;
  margin: 0;
}

/* KB article body — rendered HTML from admin */
.kb-article-body {
  color: var(--color-ink-100);
  line-height: 1.7;
}
.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: white;
  margin-top: 1.5em;
}
.kb-article-body h1 {
  font-size: 1.75rem;
}
.kb-article-body h2 {
  font-size: 1.5rem;
}
.kb-article-body h3 {
  font-size: 1.25rem;
}
.kb-article-body p {
  margin: 0 0 1rem;
}
.kb-article-body a {
  color: var(--color-brand-blue-lit);
  border-bottom: 1px solid color-mix(in oklch, white 20%, transparent);
}
.kb-article-body a:hover {
  border-bottom-color: currentColor;
}
.kb-article-body pre,
.kb-article-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
}
.kb-article-body pre {
  background: color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.kb-article-body code {
  background: color-mix(in oklch, white 4%, transparent);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.kb-article-body img {
  border-radius: 12px;
}
.kb-article-body ul,
.kb-article-body ol {
  padding-left: 1.5rem;
}

/* Tag cloud */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-chip {
  padding: 0.35rem 0.875rem;
  border-radius: 999px;
  background: color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  font-size: 12px;
  color: var(--color-ink-200);
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}
.tag-chip:hover {
  border-color: color-mix(in oklch, var(--color-brand-blue) 50%, transparent);
  color: white;
  background: color-mix(in oklch, var(--color-brand-blue) 10%, transparent);
}

/* ---------- Announcements ------------------------------------------------- */
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.announcement-item {
  padding: 2rem 0;
  border-bottom: 1px solid color-mix(in oklch, white 8%, transparent);
}
.announcement-item:last-child {
  border-bottom: 0;
}
.announcement-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: white;
  text-wrap: balance;
}
.announcement-title a {
  color: inherit;
}
.announcement-title a:hover {
  color: var(--color-brand-blue-lit);
}
.announcement-excerpt {
  color: var(--color-ink-300);
}
.announcement-view .card-body {
  padding: 2rem 2.25rem;
}
.announcement-body {
  color: var(--color-ink-100);
  line-height: 1.7;
}
.announcement-body a {
  color: var(--color-brand-blue-lit);
}

/* ---------- Status page --------------------------------------------------- */
.status-overall {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, #34d399 16%, transparent) 0%,
      transparent 60%
    ),
    color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, #34d399 30%, transparent);
  border-radius: var(--radius-edge);
}
.status-indicator {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 14px #34d399;
}
.status-indicator::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.35);
  animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-headline {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.dot-ok {
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
.dot-down {
  background: var(--color-brand-red);
  box-shadow: 0 0 8px var(--color-brand-red);
}

@keyframes ping {
  75%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ---------- Tickets ------------------------------------------------------- */
.ticket-subject {
  color: white;
  font-weight: 500;
}
.ticket-subject:hover {
  color: var(--color-brand-blue-lit);
}
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ticket-reply {
  padding: 1.5rem;
  border-radius: var(--radius-edge);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
}
.ticket-reply.is-staff {
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 40%,
    transparent
  );
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 12%, transparent) 0%,
      transparent 60%
    ),
    color-mix(in oklch, white 4%, transparent);
}
.ticket-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
}
.ticket-author-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: white;
}
.ticket-reply-body {
  color: var(--color-ink-100);
  line-height: 1.65;
  /* white-space: pre-wrap; */
}
.ticket-reply-body ol p {
  margin: 0;
}
.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.attachment-list a {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  color: var(--color-brand-blue-lit);
  font-size: 12px;
}

/* ---------- Contact page ------------------------------------------------- */
.contact-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-meta li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
}
.contact-meta-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}
.contact-meta a {
  color: var(--color-brand-blue-lit);
}

/* ---------- Service detail / domain detail actions row -------------------- */
.service-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ---------- Pagination wrapper ------------------------------------------- */
.pagination-wrap {
  display: flex;
  justify-content: center;
}

/* ---------- Invoice view ------------------------------------------------- */
.invoice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.invoice-address {
  font-style: normal;
  color: var(--color-ink-200);
  line-height: 1.6;
  margin: 0;
}
.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}
.invoice-actions-left {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.invoice-pay-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.invoice-pay-form select {
  background-color: color-mix(in oklch, white 4%, transparent);
}

/* ---------- Invoice payment form (invoice-payment.tpl) ------------------ */
/* Rendered when a client clicks "Pay Now" on viewinvoice and the gateway
   needs a card / bank form. Sub-templates live in payment/card/ and
   payment/bank/; selectors below cover both. */
.invoice-payment {
  display: block;
}
.invoice-payment.remote {
  text-align: center;
}
.invoice-payment .gateway-errors {
  margin-bottom: 1rem;
}
.cc-payment-form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Sidebar invoice summary on the payment page. */
#invoiceIdSummary .invoice-summary .table th,
#invoiceIdSummary .invoice-summary .table td {
  padding: 0.625rem 0.75rem;
  font-size: 13px;
}
#invoiceIdSummary .invoice-summary .kv-row {
  grid-template-columns: 1fr auto;
  border-top: 1px solid color-mix(in oklch, white 6%, transparent);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

/* Submit button states — WHMCS toggles .disabled on submit & swaps the
   .pay-text / .click-text spans via the validate.tpl scripts. */
#btnSubmit .click-text,
#btnSubmit.processing .pay-text {
  display: none;
}
#btnSubmit.processing .click-text {
  display: inline;
}
.btn.disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Saved-paymethod radio list (cards and bank accounts share the layout).
   Each row is a flex label so the whole tile is clickable. */
.paymethod-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.paymethod-info {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-100);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.paymethod-info:hover {
  border-color: color-mix(in oklch, white 14%, transparent);
}
.paymethod-info:has(input:checked) {
  border-color: color-mix(in oklch, var(--color-brand-blue-lit) 60%, transparent);
  background: color-mix(in oklch, var(--color-brand-blue) 8%, transparent);
}
.paymethod-info:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.paymethod-info input[type="radio"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-brand-blue-lit);
  margin: 0;
  flex: 0 0 auto;
}
.paymethod-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  color: var(--color-ink-300);
}
.paymethod-info:has(input:checked) .paymethod-icon {
  color: var(--color-brand-blue-lit);
}
.paymethod-name {
  font-weight: 500;
  color: white;
  grid-column: 3;
}
.paymethod-meta {
  grid-column: 3;
  color: var(--color-ink-400);
  font-size: 12px;
}
.paymethod-info.is-expired .paymethod-name {
  color: var(--color-ink-400);
}
.paymethod-expired {
  color: var(--color-brand-coral);
}

/* Billing-address selector below the card/bank inputs. The structure comes
   from payment/billing-address.tpl. */
#billingAddressChoice .form-check {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-100);
  margin: 0;
}
#billingAddressChoice .form-check label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--color-ink-100);
  cursor: pointer;
}
#billingAddressChoice .form-check input[type="radio"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-brand-blue-lit);
  margin-right: 0.25rem;
}
#billingAddressChoice .form-check .name {
  color: white;
  font-weight: 500;
}
#newBillingAddress {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklch, white 6%, transparent);
}

/* Bank account-type radio row (Checking / Savings). */
.bank-account-type {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.bank-account-type .check-line {
  padding: 0.25rem 0;
}

/* Per-field error messages — twenty-one hides these by default and shows
   them via .showInputError() / by toggling .has-error on the form-group. */
.field-error-msg {
  display: none;
  color: var(--color-brand-coral);
  font-size: 12px;
  margin-top: 0.375rem;
  letter-spacing: 0;
  text-transform: none;
}
.form-group.has-error .field-error-msg {
  display: block;
}
.form-group.has-error .form-control,
.form-group.has-error input[type="text"],
.form-group.has-error input[type="tel"],
.form-group.has-error input[type="number"] {
  border-color: var(--color-brand-coral);
}

/* Bootstrap form-grid label fallback — twenty-one's stock payment partials
   use these classes (we don't, but module-injected gateway forms might). */
.col-form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .text-md-right {
    text-align: right;
  }
}
.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--color-ink-100);
}
.form-check-inline input[type="radio"],
.form-check-inline input[type="checkbox"] {
  accent-color: var(--color-brand-blue-lit);
}
.input-inline,
.input-inline-100 {
  display: inline-block;
  width: auto;
  max-width: 100%;
}

/* 3-D Secure verification iframe (3dsecure.tpl) and remote-card iframe
   (invoice-payment.tpl when $showRemoteInput). */
.threed-secure .auth3d-area,
.threed-secure .submit-3d,
.invoice-payment .auth3d-area,
.invoice-payment iframe[name="ccframe"] {
  width: 100%;
  min-height: 500px;
  border: 0;
  background: white;
  border-radius: var(--radius-edge);
}

/* Hide WHMCS' invisible-by-design helper inputs that some gateways inject. */
.invoice-payment .hidden,
.invoice-payment [hidden] {
  display: none !important;
}

/* ---------- Domain checker (cart entry) ---------------------------------- */
.domain-checker {
  padding: 2rem;
  border-radius: var(--radius-edge);
  background:
    radial-gradient(
      140% 80% at 50% 0%,
      color-mix(in oklch, var(--color-brand-blue) 18%, transparent) 0%,
      transparent 60%
    ),
    color-mix(in oklch, white 3%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
}
.domain-input-group .form-control {
  font-size: 1.125rem;
  padding: 1rem 1.25rem;
}
.input-group-lg .form-control {
  font-size: 1.125rem;
  padding: 1rem 1.25rem;
}
.input-group-lg .btn {
  padding: 1rem 1.5rem;
  font-size: 1rem;
}

.domain-mode-tabs {
  display: inline-flex;
  padding: 4px;
  background: color-mix(in oklch, white 4%, transparent);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  border-radius: 999px;
}
.domain-mode-tab {
  border: 0;
  background: transparent;
  color: var(--color-ink-300);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    color 0.3s ease,
    background 0.3s ease;
}
.domain-mode-tab.is-active {
  background: color-mix(in oklch, var(--color-brand-blue) 18%, transparent);
  color: white;
}

.domain-results {
  color: var(--color-ink-200);
}
.domain-status {
  font-size: 1.125rem;
  margin: 0;
}
.domain-status.is-available {
  color: #34d399;
}
.domain-status.is-unavailable,
.domain-status.is-tld-unavailable,
.domain-status.is-invalid {
  color: var(--color-brand-coral);
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklch, white 12%, transparent);
  border-top-color: var(--color-brand-blue-lit);
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 0.5rem;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.w-hidden {
  display: none !important;
}

.tld-section .tld-table th,
.tld-section .tld-table td {
  font-size: 14px;
}

/* Domain option cards (configureproductdomain) */
.domain-option-cards {
  display: grid;
  gap: 0.75rem;
}
.domain-option-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-edge);
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.domain-option-card:has(input:checked) {
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 60%,
    transparent
  );
  background:
    radial-gradient(
      140% 80% at 0% 0%,
      color-mix(in oklch, var(--color-brand-blue) 12%, transparent) 0%,
      transparent 60%
    ),
    color-mix(in oklch, white 5%, transparent);
}
.domain-option-card input {
  margin-top: 0.5rem;
}
.domain-option-body h4 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: white;
}

/* ---------- Configure product (cart step 2) ------------------------------ */
.billing-cycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.625rem;
}
.billing-cycle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-100);
}
.billing-cycle:has(input:checked) {
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 60%,
    transparent
  );
}
.billing-cycle-price {
  font-weight: 600;
  color: white;
}

.addon-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px solid color-mix(in oklch, white 6%, transparent);
}
.addon-row:last-child {
  border-bottom: 0;
}
.addon-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.addon-info strong {
  color: white;
  font-weight: 500;
}
.addon-price {
  font-weight: 600;
  color: white;
}

/* ---------- Checkout payment options ------------------------------------- */
.payment-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}
.payment-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  background: color-mix(in oklch, white 3%, transparent);
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-100);
}
.payment-option:has(input:checked) {
  border-color: color-mix(
    in oklch,
    var(--color-brand-blue-lit) 60%,
    transparent
  );
  background: color-mix(in oklch, var(--color-brand-blue) 8%, transparent);
}
.payment-option-label {
  font-weight: 500;
}

/* ---------- Checkout existing-customer tabs ------------------------------ */
.checkout-auth-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in oklch, white 8%, transparent);
}
.checkout-auth-tab {
  background: transparent;
  border: 0;
  padding: 0.625rem 0;
  margin-bottom: -1px;
  color: var(--color-ink-300);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.checkout-auth-tab.is-active {
  color: white;
  border-bottom-color: var(--color-brand-blue-lit);
}
.checkout-auth-pane {
  display: none;
}
.checkout-auth-pane.is-active {
  display: block;
}

/* Category cards in cart browsing */
.category-card {
  display: block;
  text-decoration: none;
  height: 100%;
}
.category-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
  color: white;
}

/* ---------- Affiliate stats ---------------------------------------------- */
.affiliate-figure {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: white;
  margin-top: 0.5rem;
}
.affiliate-stat {
  height: 100%;
}

/* ---------- Card title — keep inline link buttons from over-eleven --------*/
/* WHMCS injects `<div class="float-right"><a class="btn btn-default btn-xs">…</a></div>`
   inside .card-title. Stop the card's transform-on-hover from cascading down
   and pulling the button along with it. */
.card-header .card-title .float-right .btn {
  transform: none;
}

/* Margin helpers WHMCS occasionally emits */
.mt-1 {
  margin-top: 0.25rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.px-3 {
  padding-inline: 0.75rem;
}
.py-2 {
  padding-block: 0.5rem;
}
.py-3 {
  padding-block: 0.75rem;
}

/* ---------- Responsive tables ------------------------------------------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.table-responsive .table {
  margin-bottom: 0;
}

/* ---------- Misc form widgets ------------------------------------------- */
.input-group-text {
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  background: color-mix(in oklch, white 4%, transparent);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  border-left: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  color: var(--color-ink-300);
  font-size: 14px;
}
.input-group > .input-group-text + .form-control,
.input-group > .form-control + .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
select.form-control,
select {
  appearance: none;
  -webkit-appearance: none;
  /* Single crisp SVG chevron (stroke = --color-ink-300). Replaces the old
     two-triangle gradient, which rendered chunky and could not stay put. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: calc(100% - 0.9rem) center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* Disabled / readonly */
.form-control:disabled,
.form-control[readonly],
input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Status labels — additional mappings WHMCS uses */
.status-paid {
  background: color-mix(in oklch, #34d399 18%, transparent);
  color: #d1fae5;
}
.status-unpaid {
  background: color-mix(in oklch, var(--color-brand-coral) 22%, transparent);
  color: #fed7aa;
}
.status-overdue {
  background: color-mix(in oklch, var(--color-brand-red) 22%, transparent);
  color: #fecaca;
}
.status-refunded {
  background: color-mix(in oklch, var(--color-ink-400) 25%, transparent);
  color: var(--color-ink-200);
}
.status-cancelled,
.status-cancelled-cancellation {
  background: color-mix(in oklch, var(--color-brand-red) 22%, transparent);
  color: #fecaca;
}
.status-open,
.status-answered {
  background: color-mix(in oklch, #34d399 18%, transparent);
  color: #d1fae5;
}
.status-customer-reply,
.status-on-hold,
.status-in-progress {
  background: color-mix(in oklch, var(--color-brand-coral) 22%, transparent);
  color: #fed7aa;
}
.status-closed {
  background: color-mix(in oklch, white 8%, transparent);
  color: var(--color-ink-300);
}
.status-draft {
  background: color-mix(in oklch, var(--color-brand-blue) 18%, transparent);
  color: #c7d2fe;
}
.status-delivered,
.status-accepted {
  background: color-mix(in oklch, #34d399 18%, transparent);
  color: #d1fae5;
}
.status-dead,
.status-expired,
.status-lost {
  background: color-mix(in oklch, var(--color-brand-red) 22%, transparent);
  color: #fecaca;
}

/* ---------- WHMCS hidden helper classes --------------------------------- */
.invisible {
  visibility: hidden;
}
.text-nowrap {
  white-space: nowrap;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-grid {
  display: grid;
}
@media (min-width: 768px) {
  .d-md-block {
    display: block;
  }
  .d-md-flex {
    display: flex;
  }
  .d-md-none {
    display: none;
  }
}

/* ---------- Powered-by footer text WHMCS injects in some places ---------- */
.powered-by {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-500);
  margin-top: 2rem;
}

/* Hide the literal "Powered by WHMCompleteSolution" link WHMCS injects as a
   fallback / branding tag — it appears as <p style="text-align:center;">
   <a href="https://www.whmcs.com/">WHMCompleteSolution</a></p>. */
p:has(> a[href*="whmcs.com"]) {
  display: none !important;
}

/* ---------- Homepage — break out of the client-area shell ---------------- */
/* header.tpl wraps every page in <main id="main-content" class="container-q">
   with horizontal max-width + vertical padding. For the marketing homepage
   we want full-bleed sections, so when a .is-homepage wrapper is present we
   strip the constraints and hide the inner page-head chip/title. */
body:has(.is-homepage) #main-content {
  max-width: none;
  padding: 0;
}
body:has(.is-homepage) .page-head {
  display: none;
}

/* Pulse for the "All systems operational" status dot in the hero. */
@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ---------- <select> option dropdown ------------------------------------- */
/* Native <option> elements inherit no styling from their <select> parent —
   browsers paint them with the OS dropdown background (white). Our selects
   already use light text, which made the options unreadable (white on white).
   Force a dark background here so the OS dropdown matches the rest of the UI. */
select option,
select optgroup {
  background: var(--color-ink-900);
  color: var(--color-ink-50);
}

/* ---------- Breadcrumb --------------------------------------------------- */
/* WHMCS provides $breadcrumb on most client-area pages; partials/breadcrumb.tpl
   renders it as <ol class="breadcrumb">. Render as a subtle row of links with
   chevron separators above the page title. */
.breadcrumb-nav {
  margin-bottom: 1.25rem;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  color: var(--color-ink-400);
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin-right: 0.375rem;
  color: var(--color-ink-500);
}
.breadcrumb-item a {
  color: var(--color-ink-300);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb-item a:hover {
  color: var(--color-brand-blue-lit);
}
.breadcrumb-item.is-current {
  color: var(--color-ink-200);
}

/* ---------- Print ------------------------------------------------------- */
/* Strip the dark theme chrome on print so invoices/quotes/emails render as
   plain black-on-white documents. Anything purely decorative or interactive
   (nav, aurora, grain, footer, pay buttons, cursor glow) is hidden. */
/* .print-only — hidden on screen, shown only when printing.
   Used for the print-header logo on invoice/quote pages. */
.print-only {
  display: none;
}

@media print {
  /* Page margins — let the browser handle headers/footers via @page. */
  @page {
    margin: 9mm 10mm;
  }

  /* Light surface, dark text, tightened base size for paper. */
  html,
  body {
    background: #ffffff !important;
    color: #18181b !important;
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
  }

  /* Reveal print-only blocks (logo banner, etc.). */
  .print-only {
    display: block !important;
  }
  .print-logo {
    margin: 0 0 6pt;
  }
  .print-logo img {
    max-height: 34px;
    max-width: 150px;
    width: auto;
    height: auto;
  }

  /* Tighten oversized display type — the screen clamps it large for hero
     impact, paper just needs a clear section heading. */
  .page-title {
    font-size: 13pt !important;
    line-height: 1.2 !important;
    margin: 0 0 5pt !important;
  }
  .page-head {
    margin: 0 0 5pt !important;
  }
  .card-title,
  h1, h2, h3 {
    font-size: 10.5pt !important;
    line-height: 1.15 !important;
  }
  .table,
  .table th,
  .table td {
    font-size: 8.2pt !important;
  }
  .small,
  .muted,
  .muted-label {
    font-size: 7.8pt !important;
  }

  /* Hide all decorative + interactive chrome. */
  #site-nav,
  #mobile-menu,
  .aurora,
  .grain,
  .cursor-glow,
  .site-footer,
  .page-eyebrow-nav,
  .chip,
  .breadcrumb,
  .invoice-actions,
  .invoice-pay-form,
  .card-footer,
  [data-magnetic] {
    display: none !important;
  }

  /* Pull main content flush to the page — no nav offset, no centering padding. */
  main#main-content {
    padding: 0 !important;
    max-width: none !important;
  }
  .container-q {
    max-width: none !important;
    padding: 0 !important;
  }
  .q-shell,
  .q-main {
    display: block !important;
    width: 100% !important;
  }

  /* Cards: plain bordered blocks, no gradients, no shadows. */
  .card,
  .card-header,
  .card-body {
    background: #ffffff !important;
    color: #18181b !important;
    border-color: #d4d4d8 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .card {
    border: 1px solid #d4d4d8 !important;
    margin-bottom: 6pt !important;
    overflow: visible !important;
  }
  .card-header {
    border-bottom: 1px solid #d4d4d8 !important;
  }
  .card-header,
  .card-body {
    padding: 6pt 8pt !important;
  }
  .invoice-view {
    max-width: none !important;
  }
  .invoice-view .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-right: -4pt !important;
    margin-left: -4pt !important;
  }
  .invoice-view .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-right: 4pt !important;
    padding-left: 4pt !important;
  }
  .invoice-head {
    gap: 6pt !important;
  }
  .invoice-address {
    line-height: 1.25 !important;
  }
  .kv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 8pt !important;
    margin-bottom: 6pt !important;
  }
  .kv-row {
    padding: 4pt 0 !important;
  }
  .kv-row dt,
  .kv-row dd {
    margin-bottom: 0 !important;
  }
  .mb-3,
  .mb-4,
  .mt-3,
  .mt-4 {
    margin-top: 6pt !important;
    margin-bottom: 6pt !important;
  }
  .alert {
    padding: 5pt 7pt !important;
    margin-bottom: 6pt !important;
    border: 1px solid #d4d4d8 !important;
    background: #ffffff !important;
    color: #18181b !important;
  }
  .invoice-view > .alert,
  .invoice-view .card .card {
    display: none !important;
  }

  /* Tables: classic black-on-white invoice look. */
  .table,
  .table th,
  .table td {
    background: #ffffff !important;
    color: #18181b !important;
    border-color: #e4e4e7 !important;
  }
  .table {
    margin-bottom: 5pt !important;
  }
  .table th,
  .table td {
    padding: 4pt 5pt !important;
    line-height: 1.2 !important;
    vertical-align: top !important;
  }
  .table thead th {
    background: #eef2ff !important;
    color: #1f3fbe !important;
    border-bottom: 1px solid #c7d2fe !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }
  .table tfoot td {
    padding-top: 3pt !important;
    padding-bottom: 3pt !important;
  }

  /* Muted labels/addresses are still readable on white. */
  .muted,
  .muted-label,
  .invoice-address,
  .kv-row dt,
  .kv-row dd,
  .page-title,
  .card-title,
  address {
    color: #18181b !important;
  }

  /* Status pill: keep visible but flatten. */
  .label,
  .status {
    background: #eef2ff !important;
    color: #1f3fbe !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: none !important;
    padding: 2pt 6pt !important;
    font-size: 7.5pt !important;
  }

  /* Make sure links print as plain text — no underline-on-hover noise. */
  a,
  a:visited {
    color: #18181b !important;
    text-decoration: none !important;
  }

  /* Don't split a card across pages if it fits. */
  .card {
    page-break-inside: avoid;
  }
  tr,
  tfoot,
  thead {
    page-break-inside: avoid;
  }
}