/* ===== Prabhu Host design tokens (work-logs 2.1). Light-mode values; dark-mode rules keep their own colours. Change a value here and every
   light rule below follows. Decision and usage counts: CLAUDE.md "Colour token decision". ===== */
:root {
  --ph-blue: #1e7bc1;          /* actions, links, focus */
  --ph-blue-dark: #166aa6;     /* hover */
  --ph-orange: #f97316;        /* accent on dark bands, primary CTA */
  --ph-orange-dark: #ea580c;
  --ph-navy: #0b2a5b;          /* header band, headings on tint */
  --ph-ink: #111827;           /* headings */
  --ph-text: #1f2937;          /* body */
  --ph-text-2: #374151;
  --ph-text-3: #4b5563;
  --ph-muted: #6b7280;         /* never lighter than this on white (4.8:1) */
  --ph-border-strong: #cbd5e1; /* inputs */
  --ph-line: #e3ebf6;          /* card borders */
  --ph-line-soft: #eef2f7;     /* row dividers */
  --ph-tint: #f6f9fc;          /* card headers, soft fills */
  --ph-page: #faf7f4;          /* page background */
}

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

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

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

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: var(--ph-muted);
    --neutral-600: var(--ph-text-3);
    --neutral-700: var(--ph-text-2);
    --neutral-800: var(--ph-text);
    --neutral-900: var(--ph-ink);
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ===== Prabhu Host brand layer =====
 * Per developers.whmcs.com/themes/css-styling: overrides live here, loaded last,
 * so vendor files (variables.css, kohost.css, theme.min.css) stay untouched.
 * Design source: ~/prabhuhost/new (design.md, src/input.css).
 * Order: font, tokens (:root + dark), then component styles. */

@font-face {
  font-family: 'Figtree';
  src: url('../prabhu/fonts/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  --primary: #0066CC;
  --primary-dark: #0054AA;
  --primary-darker: #064476;

  --success: #16A34A;
  --info: #0891B2;
  --worning: var(--ph-orange);
  --danger: #DC2626;

  --gray: #5B6474;
  --gray-light: var(--ph-page);

  --custom-radius: 18px;
  --primary-light: #E0EEFE;
  --danger-light: #FEE2E2;
  --warning-light: #FFEDD5;
  --success-light: #DCFCE7;

  --body-color: #4D5766;
  --heading-color: #1A2033;

  --border-color: #E9E2DC;
  --border-dark-color: #E9E2DC;
  --border-primary-light: #0066CC;

  --font-family-sans-serif: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-monospace: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Prabhu Host brand additions */
  --accent: #2563eb;
  --accent-dark: #D95317;
  --accent-soft: #FFF1E8;
  --cream: var(--ph-page);
  --card-shadow: 0 14px 35px rgba(23,32,51,0.09), 0 2px 8px rgba(23,32,51,0.05);
  --gradient-orange: linear-gradient(81deg, var(--ph-orange), #FB923C 50%, #F88705);
  --gradient-blue: linear-gradient(-81deg, #0054AA, #0066CC 50%, #0080FF);
}

:root[data-bs-theme="dark"]{

  --primary: #3B9BFF;
  --primary-dark: #0066CC;
  --primary-darker: #0B2A4A;

  --success: #83D617;
  --info: #2FD9EF;
  --worning: #F9951B;
  --danger: #E83737;

  --gray: #2f3260;
  --gray-light: #181a3d;
  --dark: #0b0c1f;

  --custom-radius: 18px;
  --primary-light: #0B2A4A;
  --danger-light: #FDE4D7;
  --warning-light: #FEF2D1;
  --success-light: #F1FCCF;

  --body-color: #a4a7d6;
  --heading-color: #e8e9ff;

  --border-color: #64748b;
  --border-dark-color: #08188C;
  --border-primary-light: #1430D0;

}

/* --- Components --- */
/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}
body,
.tt-body-wrapper {
  background-color: var(--cream);
  color: var(--body-color);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
:root[data-bs-theme="dark"] body,
:root[data-bs-theme="dark"] .tt-body-wrapper {
  background-color: var(--dark, #0b0c1f);
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
  outline: 3px solid rgba(243, 107, 35, 0.42) !important;
  outline-offset: 3px;
}

/* ---------- Container width (marketing: max-w-7xl = 90rem = 1440px at 16px root, px-4 sm:px-6 lg:px-8) ----------
   Pixel values on purpose: this theme sets html { font-size: 14px }, so rem would give 1260px. */
.container {
  width: 100%;
  max-width: 1440px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px) {
  .container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

/* Kohost's header.tpl nests a .row inside another .row on pages with a sidebar (knowledge base, announcements...). Their negative margins add up to 30px and the page scrolled sideways on phones. */
#main-body > .container > .row > .row { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
/* (the inner row is also a flex child of the outer row, so without the 100% width it shrank to its content: 648px wide inside a 1140px container in the stock theme) */

/* ---------- Topbar ---------- */
.ph-topbar {
  background: rgba(248, 250, 252, 0.95);
  border-top: 2px solid var(--ph-orange);
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
}
.ph-topbar .container {
  padding-top: 8px;
  padding-bottom: 8px;
}
.ph-topbar-links li {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid #e2e8f0;
}
.ph-topbar-links li:first-child { padding-left: 0; }
.ph-topbar-links li:last-child { border-right: 0; }
.ph-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  transition: color .2s ease;
}
.ph-topbar a:hover { color: var(--ph-orange-dark); }
.ph-topbar-links img { width: 16px; height: 16px; }
.ph-topbar-static { display: inline-flex; align-items: center; gap: 8px; color: #475569; }
.ph-cur-flag { border-radius: 2px; object-fit: cover; }
.ph-cur-caret { font-size: 9px; color: #94a3b8; }
.ph-topbar a:hover .ph-cur-caret { color: var(--ph-orange-dark); }
.ph-topbar-links i.fa-globe { font-size: 15px; color: var(--ph-muted); }
:root[data-bs-theme="dark"] .ph-topbar-static { color: #c9cbf0; }

/* grey until hover, same filters as the marketing site's .nav-social-icon */

/* ---------- Light/dark toggle switch (topbar, plus a copy in the mobile panel) ---------- */

.ph-theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}
.ph-theme-track {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  transition: background-color .25s ease, border-color .25s ease;
}
.ph-theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.ph-i-sun { color: var(--ph-orange); }
.ph-i-moon { display: none; color: #3b82f6; }
:root[data-bs-theme="dark"] .ph-theme-track { background: #2f3260; border-color: #3b3f73; }
:root[data-bs-theme="dark"] .ph-theme-knob { transform: translateX(22px); background: #0b0c1f; }
:root[data-bs-theme="dark"] .ph-i-sun { display: none; }
:root[data-bs-theme="dark"] .ph-i-moon { display: inline; }
.ph-mobile-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--ph-text);
}
:root[data-bs-theme="dark"] .ph-mobile-theme { color: #e8e9ff; }

@media (prefers-reduced-motion: reduce) {
  .ph-theme-knob, .ph-theme-track { transition: none; }
}

/* ---------- Header / navbar ---------- */
.tt-header,
.tt-header:not(.tt-double-header) {
  background: rgba(250, 247, 246, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0;
}
/* Glass effect only from xl up. backdrop-filter makes the header the containing block for
   position:fixed descendants, which collapses the off-canvas panel and its overlay to the
   header's height on tablet/mobile. */
@media (min-width: 1200px) {
  .tt-header,
  .tt-header:not(.tt-double-header) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
/* The header sits in its own stacking context; without an explicit
   z-index, later positioned sections (hero etc.) paint over the mega-menu panels. */
.tt-header {
  z-index: 1030;
}
/* Kohost's script adds .affix after 100px of scroll and its CSS made the header position:fixed. That takes it out of the flow, so the
   page jumps up by the header height (81px), which can drop scrollTop back under 100 and flicker. Keep it in the flow and stick it instead. */
.tt-header { position: sticky; top: 0; }
.tt-header.affix,
.tt-header:not(.tt-double-header).affix { position: sticky; top: 0; right: auto; left: auto; padding: 0; animation: none; transition: box-shadow .3s ease; }
.tt-header .navbar { padding: 0; }
.tt-header .navbar > .container {
  position: relative;
  min-height: 80px;
  flex-wrap: nowrap;
}
.tt-header .navbar-brand.ph-brand {
  margin: 0 !important;
  padding: 0;
  transition: transform .3s ease;
}
.tt-header .navbar-brand.ph-brand:hover { transform: scale(1.05); }
.tt-header .logo-img,
.tt-header .logo-img.ph-logo {
  height: 40px;
  width: auto;
  top: 0;
}

/* Mega menu */
.ph-mega {
  flex: 0 1 auto;
  gap: 4px;
  margin: 0 16px;
}
.ph-mega-item { position: static; }
.ph-mega-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ph-text-2);
  font: 600 16px/24px var(--font-family-sans-serif);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.ph-mega-btn:hover { color: var(--ph-orange); background: #f9fafb; }
.ph-mega-btn i {
  font-size: 11px;
  transition: transform .3s ease;
}
.ph-mega-btn[aria-expanded="true"] i { transform: rotate(180deg); }

/* Panel: marketing .dropdown. Full container width, flush under the header, orange bottom edge,
   fade + scale entrance. display:none until opened keeps the lazy icons from loading early. */
.ph-mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1100;
  background: #fff;
  border: 1px solid #e9e2dc;
  border-top: 0;
  border-bottom: 3px solid #2563eb;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform-origin: top center;
}
.ph-mega-panel.show { display: block; animation: phMegaIn .22s cubic-bezier(.22, 1, .36, 1) both; }
.ph-mega-panel.show.is-closing { animation: phMegaOut .18s ease both; }
@keyframes phMegaIn {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes phMegaOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px) scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-mega-panel.show, .ph-mega-panel.show.is-closing { animation-duration: .01ms; }
}

/* Small single-column panel (WHMCS Store): anchored under its own button */

/* Logged-in desktop: WHMCS client-area navbar keeps the brand look */
@media (min-width: 1200px) {
  /* Give WHMCS's overflow script ("more" menu) the free width of the row instead of the content width */
  .tt-header .main-navbar-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
  /* centre the client menu in the free space between logo and toolbar, exactly like the visitors' mega menu */
  .tt-header .main-navbar-wrapper #mainNavbar { display: flex; justify-content: center; width: 100%; padding: 0 !important; }
  .tt-header .main-navbar-wrapper #nav { justify-content: center; margin: 0 !important; }
  .tt-header .main-navbar-wrapper #nav > li > a {
    font-weight: 600;
    font-size: 15px;
    color: var(--ph-text-2);
  }
  .tt-header .main-navbar-wrapper #nav > li > a:hover,
  .tt-header .main-navbar-wrapper #nav > li.show > a {
    color: var(--ph-orange);
  }
}

/* Right side: default Kohost toolbar (currency, account, cart) */
.tt-toolbar-wrap .toolbar { gap: 8px; align-items: center; }
.tt-header .tt-toolbar-wrap a.btn-sm {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.tt-header .tt-toolbar-wrap a.btn-sm[href$="clientarea.php"] {
  background: var(--ph-orange);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.tt-header .tt-toolbar-wrap a.btn-sm[href$="clientarea.php"]:hover { background: var(--ph-orange-dark); }
.tt-toolbar-wrap .dropdown-menu {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(23, 32, 51, 0.12);
}
.tt-cart-badge {
  background: var(--gradient-orange);
  color: #fff;
}
.tt-toolbar-wrap .toolbar li a.cart-btn,
.tt-toolbar-wrap .toolbar li button.btn,
.tt-notification button {
  color: var(--ph-text-2);
}

/* Mobile menu */
.ph-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-color);
  color: var(--ph-text);
  font-weight: 600;
}
.ph-mobile-toggle i { font-size: 11px; transition: transform .3s ease; }
.ph-mobile-toggle:not(.collapsed) i { transform: rotate(180deg); }
.ph-mobile-sub { padding: 6px 0 6px 8px; }
.ph-mobile-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  color: var(--ph-text-3);
  font-weight: 500;
}
.ph-mobile-nav { margin-bottom: 16px; }
@media (max-width: 1199.98px) {
  .ph-client-nav { border-top: 2px solid var(--ph-orange); padding-top: 8px; }
}

/* WHMCS's overflow script (autoCollapse) moves items into a "more" dropdown whenever the list is taller than the
   header row, which always happens in the vertical off-canvas panel. List those items inline instead. */
@media (max-width: 1199.98px) {
  .tt-header .offcanvas-collapse .collapsable-dropdown > a { display: none !important; }
  .offcanvas-collapse .collapsable-dropdown-menu {
    display: block !important;
    position: static;
    float: none;
    transform: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .offcanvas-collapse .collapsable-dropdown-menu .dropdown-item { padding: .25rem 0; }
}

/* Dark mode: my light-only fixed colours (icons/links) */
:root[data-bs-theme="dark"] .ph-topbar-links img { filter: brightness(0) invert(0.8); }
:root[data-bs-theme="dark"] .tt-toolbar-wrap .toolbar li a.cart-btn,
:root[data-bs-theme="dark"] .tt-toolbar-wrap .toolbar li button.btn,
:root[data-bs-theme="dark"] .tt-notification button { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li > a { color: #e8e9ff; }

/* Phones: the header toolbar (Register + Login + cart + menu) plus the logo was ~450px wide, so every page scrolled sideways.
   Hide Register (the login page links to "Create account"), compact Login, and shrink the logo a little. Found by measuring at 320-430px. */
@media (max-width: 575.98px) {
  .tt-header .tt-toolbar-wrap .toolbar { gap: 4px; }
  .tt-header .tt-toolbar-wrap li:has(> a[href$="register.php"]) { display: none; }
  .tt-header .tt-toolbar-wrap a.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }
  .tt-header .logo-img,
  .tt-header .logo-img.ph-logo { height: 32px; }
  .tt-header .navbar-brand.ph-brand { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 359.98px) {
  .tt-header .tt-toolbar-wrap a.btn-sm { padding: 8px 10px; }
  .tt-header .logo-img,
  .tt-header .logo-img.ph-logo { height: 28px; }
}

/* Dark mode */
:root[data-bs-theme="dark"] .tt-header,
:root[data-bs-theme="dark"] .tt-header:not(.tt-double-header) {
  background: rgba(15, 23, 42, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
:root[data-bs-theme="dark"] .ph-topbar {
  background: #12132b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #c9cbf0;
}
:root[data-bs-theme="dark"] .ph-topbar a { color: #c9cbf0; }
:root[data-bs-theme="dark"] .ph-topbar-links li { border-right-color: rgba(255, 255, 255, 0.1); }
:root[data-bs-theme="dark"] .ph-mega-btn,
:root[data-bs-theme="dark"] .ph-mobile-toggle { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-mega-btn:hover { background: #181a3d; }

:root[data-bs-theme="dark"] .ph-mega-panel {
  background: #12132b;
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1199.98px) {
  .tt-header .navbar > .container { min-height: 64px; }
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background: var(--gradient-blue);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 8px 20px rgba(0, 102, 204, 0.28) !important;
}
.btn-success,
.btn-warning,
.btn-order,
.btn-checkout {
  background: var(--gradient-orange);
  border-color: var(--accent);
  color: #fff;
}
.btn-success:hover,
.btn-warning:hover,
.btn-order:hover,
.btn-checkout:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #fff;
  box-shadow: 0 8px 20px rgba(243, 107, 35, 0.3) !important;
}
.btn-default,
.btn-outline-primary {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-default:hover,
.btn-outline-primary:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* ---------- Cards, panels, forms ---------- */
.card,
.panel,
.mc-promo-login,
.mc-promo-manage,
.tt-single-product {
  border-radius: 18px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}
.card-sidebar {
  border-radius: 18px;
}
.card:hover {
  border-bottom-color: var(--accent);
}
.form-control {
  border-radius: 12px;
  background-color: #fff;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.badge-primary {
  background: var(--primary);
}
.page-link,
.pagination .active .page-link {
  border-radius: 10px;
}
:root[data-bs-theme="dark"] .form-control {
  background-color: #181a3d;
}

/* ---------- Page header ---------- */
.tt-page-header {
  background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark) 55%, var(--primary));
}

/* ---------- Hero / marketing gradients ---------- */
.bg-gradient {
  /* brand navy-to-blue with soft orange and blue glows (was a near-black "Black Friday" gradient) */
  background:
    radial-gradient(circle at 92% 0%, rgba(243, 107, 35, .30), transparent 340px),
    radial-gradient(circle at 6% 130%, rgba(0, 128, 255, .30), transparent 380px),
    linear-gradient(135deg, var(--ph-navy) 0%, #0a3f8f 55%, #0054aa 100%);
}
/* inner-page header band: brand accent line (same orange as the topbar and footer edges), tighter title, readable tagline/breadcrumb */
.tt-page-header.bg-gradient { box-shadow: inset 0 -3px 0 #2563eb; }
.tt-page-header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.tt-page-header-info p { color: #d6e4f7; }
.tt-breadcrumb { border-radius: 12px 12px 0 0; }
.text-gradient {
  background: linear-gradient(135deg, #ff6b35 0%, #ffd700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Footer (mirrors ~/prabhuhost/new footer.html) ---------- */

/* theme.min.css has `footer.footer .copyright { margin: 30px 0; text-align: center }`, so this needs the same weight */

/* ---------- Login + register pages (.ph-login / .ph-register): split screen.
   header.tpl puts body.ph-page-auth (+ .ph-page-login or .ph-page-register) on templatefile "login" and "clientregister" ---------- */
/* Only these pages drop the site chrome (CSS only, so scripts and the language modal keep working) */
.ph-page-auth .ph-topbar,
.ph-page-auth header.tt-header,
.ph-page-auth .tt-page-header{ display: none !important; }
.ph-page-auth section#main-body.tt-auth-wrap {
  display: block;
  min-height: 100vh !important;
  padding: 0 !important;
  background: #fff !important;
}
/* Wrapper rows/columns only (child selectors), so the form's own .row gutters on the register page stay intact.
   header.tpl nests the page differently depending on sidebars: register has container > .row > .row, login has container > div > .row. */
.ph-page-auth #main-body > .container { max-width: none; width: 100%; padding: 0; }
.ph-page-auth #main-body > .container > .row,
.ph-page-auth #main-body > .container > .row > .row,
.ph-page-auth #main-body > .container > div > .row { margin: 0; }
/* an inner row that is a flex child of the outer row would shrink to its content width */
.ph-page-auth #main-body > .container > .row > .row,
.ph-page-auth #main-body > .container > div > .row { flex: 0 0 100%; width: 100%; max-width: 100%; }
.ph-page-auth #main-body .col-lg-10.primary-content { flex: 0 0 100%; max-width: 100%; padding: 0; }
.ph-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  background: #fff;
}
.ph-login-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px 48px 28px;
  background: #fff;
}
.ph-login-logo { display: inline-block; align-self: flex-start; }
.ph-login-logo img { display: block; width: auto; height: 38px; }
.ph-login-center { width: 100%; max-width: 436px; margin: auto; padding: 40px 0; }
.ph-login-head { margin-bottom: 36px; text-align: center; }
.ph-login-badge {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 0 0 12px rgba(0, 102, 204, .10), 0 0 0 24px rgba(0, 102, 204, .05);
}
.ph-login-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ph-ink); }
.ph-login-head p { margin: 10px 0 0; font-size: 15px; color: #5b6474; }
.ph-login .form-group { margin-bottom: 20px; }
.ph-login .form-control-label { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ph-text); }
.ph-login .input-group {
  flex-wrap: nowrap;
  align-items: center;
  min-height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ph-login .input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .15);
}
.ph-login .input-group-prepend, .ph-login .input-group-append { display: flex; align-items: center; }
.ph-login .input-group-text {
  padding: 0 0 0 14px;
  border: 0;
  background: transparent;
  color: var(--ph-muted);
  font-size: 18px;
}
.ph-login .input-group .form-control {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ph-ink);
  font-size: 15px;
}
.ph-login .input-group .form-control::placeholder { color: #9ca3af; }
/* the bordered group shows the focus ring (:focus-within), so no second outline on the bare input */
.ph-login .input-group .form-control:focus,
.ph-login .input-group .form-control:focus-visible { outline: none !important; box-shadow: none; }
.ph-login .alert { margin-bottom: 20px; border-radius: 12px; font-size: 14px; }
.ph-login .btn-reveal-pw {
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--ph-text-3);
  font-size: 18px;
  cursor: pointer;
}
.ph-login .btn-reveal-pw:hover { color: var(--primary); }
/* swap eye / eye-slash from the field's type, no JS (WHMCS's own script flips password <-> text) */
.ph-eye-hide { display: none; }
.ph-login .pw-input[type="text"] ~ .input-group-append .ph-eye-show { display: none; }
.ph-login .pw-input[type="text"] ~ .input-group-append .ph-eye-hide { display: inline-block; }
.ph-forgot { font-size: 12.5px; font-weight: 600; color: var(--primary); }
.ph-forgot:hover { color: var(--primary-dark); text-decoration: underline; }
.ph-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 22px;
  font-size: 14.5px;
  color: var(--ph-text-2);
  cursor: pointer;
}
.ph-remember input { position: static; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.ph-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
}
.ph-login-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 24px;
  font-size: 14px;
  color: #5b6474;
}
.ph-login-links p { margin: 0; }
.ph-login-links a { font-weight: 600; color: var(--primary); }
.ph-login-lang { padding: 0; border: 0; background: none; font-size: 13px; color: #5b6474; cursor: pointer; }
.ph-login-note { max-width: 420px; margin: 0 auto; font-size: 12px; line-height: 1.6; text-align: center; color: var(--ph-muted); }
.ph-login-note a { color: inherit; text-decoration: underline; }
.ph-login .tt-or-text { text-align: center; color: var(--ph-muted); font-size: 13px; }

/* Register page extras (.ph-register). Existing markup is kept: .prepend-icon > label.field-icon + input.field */
.ph-register .ph-login-main { padding-bottom: 28px; }
.ph-register-center { max-width: 600px; padding: 32px 0 24px; }
.ph-register .ph-login-head { margin-bottom: 28px; }
.ph-register #containerNewUserSignup > .text-center > h1 { display: none; } /* heading is in .ph-login-head */
.ph-register #registration {
  padding: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.ph-register #registration .card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ph-register #registration .card-body { overflow: visible; }
.ph-register #registration h3.h6,
.ph-register #registration h3.card-title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef0f3;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-register #registration .prepend-icon { display: block; margin-bottom: 16px; }
.ph-register #registration .form-group { margin-bottom: 16px; }
.ph-register #registration .field,
.ph-register #registration select.form-control,
.ph-register #registration .form-control {
  height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: var(--ph-ink);
  font-size: 14.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ph-register #registration .prepend-icon .field { padding-left: 44px; }
.ph-register #registration .field::placeholder,
.ph-register #registration .form-control::placeholder { color: #9ca3af; font-size: 14.5px; }
.ph-register #registration .field:focus-visible,
.ph-register #registration .form-control:focus-visible { outline: none !important; }
.ph-register #registration .field:focus,
.ph-register #registration .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .15);
  outline: none;
}
.ph-register #registration .prepend-icon .field-icon {
  height: 48px;
  width: 44px;
  border: 0;
  line-height: 48px;
}
.ph-register #registration .field-icon i { color: var(--ph-muted); font-size: 16px; }
.ph-register #registration .prepend-icon:focus-within .field-icon i { color: var(--primary); }
.ph-register #registration .intl-tel-input { display: block; width: 100%; }
/* Phone input: the intl-tel-input plugin sets its own left padding (.iti-sdc-N, e.g. 92px for "+977") to make room for the dial code.
   Do NOT add a padding-left rule for it here: an earlier 52px override made the dial code overlap the number. */
.ph-register #registration label:not(.field-icon):not(.form-check) { font-size: 13.5px; font-weight: 600; color: var(--ph-text-2); }
.ph-register #registration .field-help-text { display: block; margin-top: 6px; font-size: 12px; color: var(--ph-muted); }
.ph-register #registration .generate-password { border-radius: 10px; font-weight: 600; }
.ph-register #registration .password-strength-meter .progress { height: 8px; border-radius: 999px; background: #eef0f3; }
.ph-register #registration .password-strength-meter .progress-bar { border-radius: 999px; }
.ph-register #registration .password-strength-meter p { margin: 6px 0 0; font-size: 12.5px; }
.ph-register #registration .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; font-size: 14px; color: var(--ph-text-2); }
.ph-register #registration .form-check input[type="checkbox"] { position: static; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primary); }
.ph-register #registration a { color: var(--primary); font-weight: 600; }
.ph-register #registration input[type="submit"].btn-primary,
.ph-register #registration input[type="submit"].btn-primary:hover,
.ph-register #registration input[type="submit"].btn-primary:focus { color: #fff !important; }
.ph-register #registration input[type="submit"].btn-primary {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
}
.ph-register #registration .d-flex.justify-content-between { flex-direction: column; align-items: stretch !important; gap: 14px; }
.ph-register #registration .d-flex.justify-content-between ul { align-self: center; margin: 0; float: none !important; }
.ph-register #registration .d-flex.justify-content-between .btn { font-size: 13px; color: #5b6474; }
.ph-register #registration .auth-footer { margin-top: 22px; font-size: 14px; color: #5b6474; text-align: center; }
.ph-register .alert { border-radius: 12px; font-size: 14px; }
.ph-register .ph-login-panel { position: sticky; top: 0; align-self: start; height: 100vh; }
@media (max-width: 991.98px) {
  .ph-register .ph-login-panel { display: none; }
  .ph-register-center { padding: 24px 0; }
}
:root[data-bs-theme="dark"] .ph-register #registration .field,
:root[data-bs-theme="dark"] .ph-register #registration .form-control { background: #12132b; border-color: #23264f; color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-register #registration h3.h6,
:root[data-bs-theme="dark"] .ph-register #registration h3.card-title { border-color: #23264f; color: #a4a7d6; }
:root[data-bs-theme="dark"] .ph-register #registration label:not(.field-icon):not(.form-check),
:root[data-bs-theme="dark"] .ph-register #registration .form-check,
:root[data-bs-theme="dark"] .ph-register #registration .auth-footer { color: #c9cbf0; }
:root[data-bs-theme="dark"] .ph-register #registration .field-icon i { color: #a4a7d6; }

/* Password reset (.ph-reset): the 3 step templates keep their markup; styled here. Step 1 uses .input-group (styled by the .ph-login rules), steps 2-3 plain .form-control */
.ph-reset .ph-login-head { margin-bottom: 28px; }
.ph-reset-body > .mb-4 { margin-bottom: 24px !important; text-align: center; }
.ph-reset-body > .mb-4 > h6 { display: none; } /* heading is in .ph-login-head */
.ph-reset-body > .mb-4 > p,
.ph-reset-body > p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; text-align: center; color: #5b6474; }
.ph-reset-body label { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ph-text); }
.ph-reset-body .form-group { margin-bottom: 20px; }
.ph-reset-body .form-group > .form-control {
  height: 48px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: var(--ph-ink);
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ph-reset-body .form-group > .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); }
.ph-reset-body .form-group > .form-control:focus-visible { outline: none !important; }
.ph-reset-body .btn-primary,
.ph-reset-body input[type="submit"].btn-primary {
  display: block;
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
}
.ph-reset-body input[type="submit"].btn-primary,
.ph-reset-body input[type="submit"].btn-primary:hover,
.ph-reset-body input[type="submit"].btn-primary:focus { color: #fff !important; }
.ph-reset-body input[type="reset"].btn-default {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 10px 0 0;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: var(--ph-text-2);
  font-weight: 600;
}
.ph-reset-body .alert { margin-bottom: 20px; border-radius: 12px; font-size: 14px; }
.ph-reset-body .progress { height: 8px; border-radius: 999px; background: #eef0f3; }
.ph-reset-body .progress-bar { border-radius: 999px; }
.ph-reset-links { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ph-reset-links a { font-weight: 600; color: var(--primary); }
/* the container and the security step both print $errorMessage (same in the original theme): show it once */
.ph-reset-body > .alert + .alert { display: none; }
:root[data-bs-theme="dark"] .ph-reset-body .progress,
:root[data-bs-theme="dark"] .ph-register #registration .password-strength-meter .progress { background: #181a3d; }
:root[data-bs-theme="dark"] .ph-reset-body > .mb-4 > p,
:root[data-bs-theme="dark"] .ph-reset-body > p { color: #a4a7d6; }
:root[data-bs-theme="dark"] .ph-reset-body label { color: #c9cbf0; }
:root[data-bs-theme="dark"] .ph-reset-body .form-group > .form-control { background: #12132b; border-color: #23264f; color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-reset-body input[type="reset"].btn-default { background: #12132b; border-color: #23264f; color: #c9cbf0; }

/* Right panel */
.ph-login-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background:
    radial-gradient(circle at 92% 4%, rgba(30, 123, 193, .20), transparent 440px),
    radial-gradient(circle at 8% 96%, rgba(249, 115, 22, .12), transparent 400px),
    linear-gradient(160deg, var(--ph-page) 0%, #f1f6fb 55%, #e6f0f9 100%);
}
.ph-login-panel-inner { position: relative; z-index: 2; padding: 72px 64px 0; }
.ph-login-panel h2 {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ph-ink);
}
.ph-login-points li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 15px; color: var(--ph-text-2); }
.ph-login-point-icon {
  display: inline-flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 32, 51, .08);
  color: var(--primary);
  font-size: 16px;
}
/* dashboard picture: empty divs only */
.ph-login-mock {
  position: absolute;
  right: -70px;
  bottom: -64px;
  display: flex;
  gap: 16px;
  width: 700px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 30px 70px rgba(23, 32, 51, .16);
  transform: rotate(-7deg);
  transform-origin: bottom right;
}
.ph-mock-side { display: flex; flex: 0 0 150px; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; }
.ph-ms-dot { width: 22px; height: 22px; border-radius: 7px; background: var(--primary); }
.ph-ms-bar { height: 10px; border-radius: 6px; background: #d1d5db; }
.ph-ms-bar-dark { width: 70%; background: #374151; }
.ph-ms-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.ph-ms-row i { width: 10px; height: 10px; border-radius: 3px; background: var(--ph-border-strong); }
.ph-ms-row b { flex: 1; height: 8px; border-radius: 5px; background: #e5e7eb; }
.ph-ms-row.is-active { background: #e8efff; }
.ph-ms-row.is-active i { background: var(--primary); }
.ph-ms-row.is-active b { background: #9db8f5; }
.ph-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ph-mm-title { width: 38%; height: 14px; border-radius: 8px; background: var(--ph-text-2); }
.ph-mm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ph-mm-tile { display: flex; flex-direction: column; gap: 22px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(23, 32, 51, .06); }
.ph-mm-tile i { width: 24px; height: 24px; border-radius: 8px; }
.ph-mm-tile i.is-blue { background: #dbe6ff; }
.ph-mm-tile i.is-green { background: #c9f4dc; }
.ph-mm-tile i.is-yellow { background: #fdeeb4; }
.ph-mm-tile b { width: 55%; height: 10px; border-radius: 6px; background: var(--ph-text-2); }
.ph-mm-chart {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 140px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
}
.ph-mm-chart span { flex: 1; border-radius: 8px 8px 0 0; background: #dbe6ff; }
.ph-mm-chart span.is-hot { background: var(--primary); }
.ph-mm-chart span:nth-child(1) { height: 34%; }
.ph-mm-chart span:nth-child(2) { height: 52%; }
.ph-mm-chart span:nth-child(3) { height: 44%; }
.ph-mm-chart span:nth-child(4) { height: 70%; }
.ph-mm-chart span:nth-child(5) { height: 92%; }
.ph-mm-chart span:nth-child(6) { height: 58%; }
.ph-mm-chart span:nth-child(7) { height: 40%; }

@media (max-width: 991.98px) {
  .ph-login { grid-template-columns: 1fr; }
  .ph-login-panel { display: none; }
  .ph-login-main { min-height: 100vh; padding: 24px 20px; }
}
@media (max-width: 575.98px) {
  .ph-login-head h1 { font-size: 24px; }
  .ph-login-links { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ph-login .input-group { transition: none; } }

/* Dark mode */
:root[data-bs-theme="dark"] .ph-page-auth section#main-body.tt-auth-wrap,
:root[data-bs-theme="dark"] .ph-login,
:root[data-bs-theme="dark"] .ph-login-main { background: #0b0c1f !important; }
:root[data-bs-theme="dark"] .ph-login-head h1,
:root[data-bs-theme="dark"] .ph-login .form-control-label,
:root[data-bs-theme="dark"] .ph-login .input-group .form-control { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-login-head p,
:root[data-bs-theme="dark"] .ph-login-links,
:root[data-bs-theme="dark"] .ph-login-lang,
:root[data-bs-theme="dark"] .ph-login-note,
:root[data-bs-theme="dark"] .ph-remember { color: #a4a7d6; }
:root[data-bs-theme="dark"] .ph-login .input-group { background: #12132b; border-color: #23264f; }
:root[data-bs-theme="dark"] .ph-login .input-group-text,
:root[data-bs-theme="dark"] .ph-login .btn-reveal-pw { color: #a4a7d6; }
:root[data-bs-theme="dark"] .ph-login-panel { background: linear-gradient(160deg, #0b0c1f 0%, #111d3a 55%, #12244d 100%); }
:root[data-bs-theme="dark"] .ph-login-panel h2 { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-login-points li { color: #c9cbf0; }
:root[data-bs-theme="dark"] .ph-login-mock { background: rgba(17, 24, 39, .75); border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .ph-mock-side,
:root[data-bs-theme="dark"] .ph-mm-tile,
:root[data-bs-theme="dark"] .ph-mm-chart { background: #181a3d; }

/* ---------- Homepage hero (.ph-hero): eyebrow, title, pill search, TLD chips, features, 3 promo cards. px values (root is 14px) ---------- */

/* Promo cards */

.ph-mock {
  display: flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-bottom: 40px;
  padding: 12px 22px 12px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

/* ---------- Homepage reviews (.ph-review), mirrors marketing #customer-reviews. px values: this theme's root is 14px ---------- */
.ph-review {
  --ph-gutter: max(32px, calc((100vw - 1280px) / 2 + 32px));
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: transparent;
}
.ph-review::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 64px;
  right: 0;
  bottom: 64px;
  left: calc(50% - 112px);
  background: #1c7bc3;
}
.ph-review-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.ph-review-kicker {
  display: inline-flex;
  color: #d95317;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ph-review-intro h2 {
  max-width: 480px;
  margin: 12px 0 0;
  color: #172033;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.ph-review-intro > p {
  max-width: min(496px, calc(100% - 28px));
  margin: 20px 0 0;
  color: #5b6474;
  font-size: 15px;
  line-height: 1.7;
}
.ph-tp {
  display: inline-grid;
  gap: 10px;
  margin-top: 32px;
  color: #172033;
}
.ph-tp:hover { color: #172033; text-decoration: none; }
.ph-tp-word { font-size: 26px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; }
.ph-tp-word i { color: #00b67a; font-style: normal; }
.ph-tp-stars { display: flex; gap: 3px; }
.ph-tp-stars i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fff;
  background: #00b67a;
  font-size: 19px;
  font-style: normal;
}
.ph-tp-score { color: #64748b; font-size: 13px; }
.ph-tp-score strong { color: #172033; }

/* Card rail: native scroll-snap; prabhuhost.js adds auto-advance and mouse drag */
.ph-review-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 392px;
  gap: 20px;
  width: calc(100% + var(--ph-gutter));
  min-width: 0;
  padding: 16px var(--ph-gutter) 16px 0;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.ph-review-stage::-webkit-scrollbar { display: none; }
.ph-review-stage:active { cursor: grabbing; }
.ph-review-stage.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  -webkit-user-select: none;
  user-select: none;
}
.ph-review-card {
  display: flex;
  flex-direction: column;
  min-height: 344px;
  padding: 28px;
  border: 1px solid rgba(219, 228, 238, .9);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23, 32, 51, .12);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.ph-review-card header { display: flex; align-items: center; gap: 12px; }
.ph-review-avatar {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ph-review-person { min-width: 0; }
.ph-review-person strong, .ph-review-person small { display: block; }
.ph-review-person strong {
  overflow: hidden;
  color: #172033;
  font-size: 14.4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-review-person small { margin-top: 2px; color: #94a3b8; font-size: 11px; font-weight: 600; }
.ph-review-quote {
  margin-left: auto;
  color: #0066cc;
  font-family: Georgia, serif;
  font-size: 56px;
  font-weight: 800;
  line-height: .6;
}
.ph-review-stars { margin-top: 20px; color: #00b67a; font-size: 16px; letter-spacing: .12em; }
.ph-review-channel {
  margin-top: 20px;
  color: #008f61;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph-review-card h3 { margin: 12px 0 0; color: #172033; font-size: 16.8px; font-weight: 800; line-height: 1.35; }
.ph-review-card > p { margin: 10px 0 0; color: #5b6474; font-size: 14px; line-height: 1.65; }
.ph-review-card > a { margin-top: auto; padding-top: 16px; color: #0066cc; font-size: 12.8px; font-weight: 800; }
.ph-review-card > a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
  /* Marketing uses top:42% for the blue band, which can cover the intro when it wraps. Here the band is the rail's own
     background (full width), so it always sits exactly behind the cards. */
  .ph-review::after { display: none; }
  .ph-review-inner { grid-template-columns: 1fr; gap: 40px; }
  .ph-review-stage {
    width: calc(100% + 2 * var(--ph-gutter));
    margin-inline: calc(-1 * var(--ph-gutter));
    padding: 32px var(--ph-gutter);
    background: #1c7bc3;
    scroll-padding-inline: var(--ph-gutter);
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .ph-review { --ph-gutter: 24px; }
  .ph-review-inner { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .ph-review { --ph-gutter: 16px; padding: 64px 0; }
  .ph-review-inner { padding-inline: 16px; }
  .ph-review-stage { grid-auto-columns: minmax(82vw, 1fr); }
  .ph-review-card { min-height: 320px; padding: 21.6px; }
}
@media (prefers-reduced-motion: reduce) { .ph-review-stage { scroll-behavior: auto; } }
:root[data-bs-theme="dark"] .ph-review-intro h2,
:root[data-bs-theme="dark"] .ph-tp,
:root[data-bs-theme="dark"] .ph-tp:hover,
:root[data-bs-theme="dark"] .ph-tp-score strong { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-review-intro > p,
:root[data-bs-theme="dark"] .ph-tp-score { color: #a4a7d6; }
:root[data-bs-theme="dark"] .ph-review-kicker { color: #fb923c; }

/* ---------- Homepage CTA: free website migration (.ph-mig), mirrors the marketing dark migration section ---------- */
.ph-mig {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: #0b1120;
  color: #94a3b8;
}
@media (min-width: 1024px) { .ph-mig { padding: 112px 0; } }
/* dot-grid texture + two colour glows as gradients (cheaper than blurred elements) */
.ph-mig::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 0%, rgba(249, 115, 22, .14), transparent 420px),
    radial-gradient(circle at 75% 100%, rgba(37, 99, 235, .14), transparent 380px);
}
.ph-mig::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 28px 28px;
}
.ph-mig > .container { position: relative; z-index: 1; }
.ph-mig-row { row-gap: 48px; }
.ph-mig-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px 16px;
  border: 1px solid rgba(249, 115, 22, .3);
  border-radius: 999px;
  background: rgba(249, 115, 22, .1);
  color: #fb923c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ph-mig-title {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.ph-mig-title span { color: #fb923c; }
@media (min-width: 1024px) { .ph-mig-title { font-size: 36px; } }
@media (min-width: 1200px) { .ph-mig-title { font-size: 48px; } }
.ph-mig-lead {
  max-width: 512px;
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.7;
  color: #94a3b8;
}
@media (min-width: 1024px) { .ph-mig-lead { font-size: 18px; } }
.ph-mig-steps { margin: 0 0 40px; }
.ph-mig-steps li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ph-mig-steps li:last-child { margin-bottom: 0; }
.ph-mig-num {
  display: inline-flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ph-orange);
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, .3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.ph-mig-steps strong { display: block; padding-top: 4px; font-size: 14px; font-weight: 600; color: #fff; }
.ph-mig-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: #94a3b8; }
.ph-mig-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ph-mig-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: background-color .2s ease;
}
.ph-mig-btn:hover { text-decoration: none; }
.ph-mig-btn-primary {
  background: #c2410c;
  color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, .25);
}
.ph-mig-btn-primary:hover { background: #9a3412; }
.ph-mig-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: #fff !important;
}
.ph-mig-btn-ghost:hover { background: rgba(255, 255, 255, .2); }
.ph-mig-card {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .05);
}
@media (min-width: 1024px) { .ph-mig-card { margin-left: 16px; } }
.ph-mig-card h3 { margin: 0 0 24px; font-size: 18px; font-weight: 700; color: #fff; }
.ph-mig-list { margin: 0 0 32px; }
.ph-mig-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 14px; color: var(--ph-border-strong); }
.ph-mig-list li:last-child { margin-bottom: 0; }
.ph-mig-tick {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, .2);
  color: #4ade80;
  font-size: 11px;
}
.ph-mig-guarantee {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(249, 115, 22, .2);
  border-radius: 16px;
  background: rgba(249, 115, 22, .1);
}
.ph-mig-guarantee img { flex: 0 0 64px; width: 64px; height: 64px; }
.ph-mig-guarantee strong { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.ph-mig-guarantee p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: #94a3b8; }
.ph-mig-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  text-align: center;
}
.ph-mig-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .1); }
.ph-mig-stats > div:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, .1); }
.ph-mig-stats b { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; }
.ph-mig-stats b span { color: #fb923c; }
.ph-mig-stats small { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
@media (max-width: 575.98px) {
  .ph-mig-card { padding: 24px; }
  .ph-mig-guarantee { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ph-mig-btn { transition: none; } }

/* ---------- Homepage FAQ + support CTA (#home-faq), mirrors marketing .home-faq-* ---------- */
.ph-faq {
  position: relative;
  padding: 64px 0;
  background:
    radial-gradient(circle at 92% 8%, rgba(0, 128, 255, 0.1), transparent 448px),
    radial-gradient(circle at 8% 32%, rgba(70, 194, 224, 0.07), transparent 384px),
    linear-gradient(180deg, #f8fafc 0%, #eef6fd 112px, #f3f8fc 352px, #f8fafc 100%);
}
@media (min-width: 1024px) { .ph-faq { padding: 96px 0; } }
.ph-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.ph-faq > .container { position: relative; }
.ph-faq-head { margin-bottom: 40px; }
@media (min-width: 768px) { .ph-faq-head { margin-bottom: 48px; } }
.ph-faq-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ph-text);
}
@media (min-width: 768px) { .ph-faq-head h2 { font-size: 36px; } }
@media (min-width: 1024px) { .ph-faq-head h2 { font-size: 48px; } }
.ph-faq-bar {
  display: block;
  width: 80px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #0066cc, #2563eb);
}
.ph-faq-layout { align-items: flex-start; row-gap: 32px; }
@media (min-width: 1200px) {
  .ph-faq-aside { position: sticky; top: 112px; }
}

/* Support card */
.ph-support-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 768px;
  margin: 0 auto;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 24px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .09), inset 0 1px 0 #fff;
}
.ph-support-header {
  position: relative;
  z-index: 2;
  padding: 24px 24px 20px;
  color: #172033;
  background: linear-gradient(to top, #edf6ff, rgba(247, 251, 255, .98) 58%, rgba(255, 255, 255, .98));
}
.ph-support-header h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: #172033; }
.ph-support-header p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #5b687a; }
.ph-support-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 999px;
  color: #047857;
  background: rgba(236, 253, 245, .9);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.ph-support-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}
.ph-support-art {
  position: relative;
  display: flex;
  min-height: 208px;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 24px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .82), transparent 44%),
    linear-gradient(180deg, #edf6ff, #f2f8ff 68%, #f6faff);
}
.ph-support-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(246, 250, 255, .84) 58%, #f8fbff);
}
.ph-support-art img {
  width: 100%;
  max-width: 272px;
  max-height: 240px;
  object-fit: contain;
  object-position: center bottom;
}
.ph-support-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -28px;
  padding: 52px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .92) 34px, #fff 100%);
}
.ph-support-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 600;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ph-support-actions a:hover { transform: translateY(-2px); text-decoration: none; }
.ph-support-primary {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(105deg, #0088ff, #0066cc 48%, #004f9f);
  box-shadow: 0 10px 26px rgba(0, 102, 204, .24);
}
.ph-support-secondary {
  color: var(--ph-text) !important;
  border: 1px solid rgba(0, 102, 204, .14);
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(236, 246, 255, .78));
  box-shadow: 0 8px 20px rgba(15, 23, 42, .055);
}
.ph-connect {
  display: flex;
  align-items: center;
  max-width: 448px;
  margin: 24px auto 0;
  padding: 0 16px;
}
.ph-connect::before, .ph-connect::after { content: ""; flex: 1; height: 1px; background: #d1d5db; }
.ph-connect span { padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--ph-muted); white-space: nowrap; }
.ph-contact-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 768px;
  margin: 24px auto 0;
  padding: 0 16px;
}
@media (min-width: 640px) { .ph-contact-links { flex-direction: row; } }
@media (min-width: 1200px) {
  .ph-connect { margin-top: 32px; padding: 0; }
  .ph-contact-links { padding: 0; }
}
.ph-contact-link {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 14px;
  color: #172033;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ph-contact-link:hover { color: #172033; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.ph-contact-link img { width: 40px; height: 40px; flex: 0 0 40px; }

/* Accordion */
.ph-faq-item {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ph-faq-item:hover { border-color: rgba(0, 102, 204, .3); }
.ph-faq-item[open] {
  border-color: rgba(0, 102, 204, .32);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .065);
}
.ph-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}
.ph-faq-item > summary::-webkit-details-marker { display: none; }
.ph-faq-item > summary:focus-visible { outline: 3px solid rgba(243, 107, 35, .42); outline-offset: -3px; }
.ph-faq-q { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ph-ink); }
.ph-faq-icon {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #10213a;
  background: #f3f4f6;
  transition: background-color .2s ease, color .2s ease;
}
.ph-faq-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -6px 0 0 -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.ph-faq-item[open] .ph-faq-icon { color: #fff; background: #0066cc; }
.ph-faq-item[open] .ph-faq-icon::before { margin-top: -2px; transform: rotate(225deg); }
.ph-faq-a {
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(0, 102, 204, .1);
}
.ph-faq-a p { margin: 0; font-size: 16px; line-height: 1.7; color: #59677a; }
.ph-faq-a p + p { margin-top: 12px; }
@media (max-width: 639px) {
  .ph-faq-item > summary { padding: 18px; }
  .ph-faq-a { padding: 16px 18px 18px; }
  .ph-support-art { min-height: 176px; padding-inline: 16px; }
  .ph-support-art img { max-height: 192px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-faq-icon::before, .ph-faq-item, .ph-support-actions a, .ph-contact-link { transition: none; }
}

/* Dark mode */
:root[data-bs-theme="dark"] .ph-faq {
  background: linear-gradient(180deg, #0b0c1f, #0b0c1f);
}
:root[data-bs-theme="dark"] .ph-faq::before { opacity: .15; }
:root[data-bs-theme="dark"] .ph-faq-head h2,
:root[data-bs-theme="dark"] .ph-support-header h3,
:root[data-bs-theme="dark"] .ph-faq-q { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-support-card,
:root[data-bs-theme="dark"] .ph-faq-item,
:root[data-bs-theme="dark"] .ph-contact-link { background: #12132b; border-color: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .ph-support-header,
:root[data-bs-theme="dark"] .ph-support-actions { background: #12132b; }
:root[data-bs-theme="dark"] .ph-support-art { background: #0f1b2e; }
:root[data-bs-theme="dark"] .ph-support-art::after { background: linear-gradient(180deg, transparent, #12132b); }
:root[data-bs-theme="dark"] .ph-support-header p,
:root[data-bs-theme="dark"] .ph-faq-a p,
:root[data-bs-theme="dark"] .ph-connect span { color: #a4a7d6; }
:root[data-bs-theme="dark"] .ph-contact-link,
:root[data-bs-theme="dark"] .ph-support-secondary { color: #e8e9ff !important; }
:root[data-bs-theme="dark"] .ph-support-secondary { background: #181a3d; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .ph-faq-icon { background: #181a3d; color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-faq-item[open] .ph-faq-icon { background: #0066cc; color: #fff; }
:root[data-bs-theme="dark"] .ph-faq-a { border-top-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .ph-connect::before,
:root[data-bs-theme="dark"] .ph-connect::after { background: rgba(255, 255, 255, .15); }

/* ---------- Verification banner (email verification / user validation) ----------
   Stock theme: 36px grey triangle floated left, slate #50525f button, ~28px tap targets. Now a calm amber notice with 44px targets. */
.verification-banner {
  padding: 12px 0;
  border-bottom: 1px solid #fde2b8;
  background: #fff8eb;
  color: #5b3a05;
  font-weight: 500;
}
.verification-banner .row { align-items: center; }
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
  float: none;
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  color: #b45309;
  font-size: 20px;
  vertical-align: middle;
}
.verification-banner .text { display: inline; padding: 0; font-size: 14.5px; line-height: 1.5; vertical-align: middle; }
.verification-banner .btn { margin: 0; padding: 0 22px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: normal; }
.verification-banner .btn.close {
  min-width: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: #7c5a1d;
  font-size: 24px;
  line-height: 1;
}
.verification-banner .btn.close:hover { background: rgba(180, 83, 9, .1); color: #5b3a05; }
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover {
  border: 2px solid var(--primary);
  background: #fff;
  color: var(--primary);
}
.verification-banner.email-verification .btn.btn-action:hover { background: var(--primary); color: #fff; }
.verification-banner .btn:focus-visible { outline: 3px solid rgba(0, 102, 204, .45); outline-offset: 2px; }
/* visual order: message, then Resend, then close (the stock order-* classes put the close button mid-row on desktop and Resend above the message on phones) */
.verification-banner .row > .col-10 { order: 1; }
.verification-banner .row > .col-2 { order: 2; }
.verification-banner .row > .col-12 { order: 3; margin-top: 10px; }
@media (min-width: 576px) {
  .verification-banner .row > .col-sm-7 { order: 1; }
  .verification-banner .row > .col-sm-4 { order: 2; margin-top: 0; }
  .verification-banner .row > .col-sm-1 { order: 3; }
}
@media (min-width: 768px) {
  .verification-banner .btn { padding: 0 24px; }
  .verification-banner .fas, .verification-banner .fal, .verification-banner .far { font-size: 22px; }
}
:root[data-bs-theme="dark"] .verification-banner { border-bottom-color: #4a3a12; background: #2a2208; color: #f6e3b4; }
:root[data-bs-theme="dark"] .verification-banner .fas { color: #fbbf24; }
:root[data-bs-theme="dark"] .verification-banner .btn.close { color: #f6e3b4; }
:root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action:hover { background: #60a5fa; color: #0b0c1f; }

/* ---------- Captcha inside the homepage hero: same solid-card look as the cart (was bare text, a tiny image and a ~30px input) ---------- */

/* minimal focus: one blue line (the global orange .form-control:focus-visible ring is switched off here, it stacked with this border) */

/* ---------- Misc ---------- */

/* ---------- Mobile / tablet header and off-canvas menu (< 1200px) ---------- */
.ph-offcanvas-head, .ph-offcanvas-cta{ display: none; }
@media (max-width: 1199.98px) {
  html.ph-menu-open, html.ph-menu-open body { overflow: hidden; }

  /* Toolbar buttons: one 44px touch size for cart and hamburger, 24px icons */
  .tt-header .tt-toolbar-wrap .toolbar { gap: 4px; }
  .tt-header .tt-toolbar-wrap li.nav-item.ml-2 { margin-left: 4px !important; }
  .tt-header .tt-toolbar-wrap .toolbar li a.cart-btn,
  .tt-header .tt-toolbar-wrap .toolbar li button.ph-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    position: relative;
  }
  .tt-header .tt-toolbar-wrap .toolbar li button.ph-burger { margin-right: -6px; }
  .tt-header .tt-toolbar-wrap .toolbar li a.cart-btn i,
  .tt-header .tt-toolbar-wrap .toolbar li button.ph-burger i { font-size: 24px; line-height: 1; width: auto; }
  .tt-header .tt-toolbar-wrap .toolbar li button.ph-burger[aria-expanded="true"] { background: rgba(249, 115, 22, .12); color: var(--ph-orange); }
  .tt-header .tt-toolbar-wrap .toolbar li a.cart-btn .tt-cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
  }

  /* Panel */
  .offcanvas-collapse {
    width: min(88vw, 360px);
    padding: 0;
    background: #fff;
    box-shadow: 8px 0 32px rgba(15, 23, 42, .18);
    overscroll-behavior: contain;
  }
  .offcanvas-collapse #mainNavbar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 20px 20px !important;
  }
  .ph-offcanvas-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
  }
  .ph-offcanvas-logo img { display: block; height: 32px; width: auto; }
  .ph-offcanvas-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ph-text-2);
    font-size: 24px;
    cursor: pointer;
  }
  .ph-offcanvas-close:hover { background: #f3f4f6; }
  .ph-mobile-theme { margin-bottom: 0; padding: 12px 0; }

  /* One row style for the marketing accordion and the WHMCS links below it */
  .ph-mobile-nav { margin-bottom: 0; }
  .ph-mobile-toggle { min-height: 52px; padding: 12px 0; font-size: 17px; }
  .ph-mobile-toggle:hover { color: var(--ph-orange); text-decoration: none; }
  .ph-mobile-sub { padding: 4px 0 10px; }
  .ph-mobile-sub a { min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 15px; }
  .ph-mobile-sub a:hover { background: #fff7ed; color: #c2410c; text-decoration: none; }
  #mainNavbar .ph-client-nav { border-top: 0; margin: 0; padding: 0; }
  #mainNavbar .ph-client-nav > li { display: block; border-bottom: 1px solid var(--border-color); }
  #mainNavbar .ph-client-nav > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 12px 0 !important;
    color: var(--ph-text);
    font-size: 17px;
    font-weight: 600;
  }
  #mainNavbar .ph-client-nav > li > a:hover { color: var(--ph-orange); text-decoration: none; }
  #mainNavbar .ph-client-nav > li > a.dropdown-toggle::after { margin-left: 8px; }
  #mainNavbar .ph-client-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  #mainNavbar .ph-client-nav .dropdown-item,
  #mainNavbar .ph-client-nav .dropdown-item > a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 15px; color: var(--ph-text-3); }
  #mainNavbar .ph-client-nav .dropdown-item:hover,
  #mainNavbar .ph-client-nav .dropdown-item > a:hover { background: #fff7ed; color: #c2410c; text-decoration: none; }
  #mainNavbar .ph-client-nav .collapsable-dropdown-menu .dropdown-item { padding: 0; }

  /* Login / Register + help pinned to the bottom of the panel */
  .ph-offcanvas-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
  }
  .ph-offcanvas-cta a:only-child { grid-column: 1 / -1; }
  .ph-offcanvas-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  
  
  
  
  
  
  
  

  /* Dark mode */
  :root[data-bs-theme="dark"] .offcanvas-collapse { background: #0b0c1f; box-shadow: 8px 0 32px rgba(0, 0, 0, .5); }
  :root[data-bs-theme="dark"] .ph-offcanvas-head { background: #0b0c1f; }
  :root[data-bs-theme="dark"] .ph-offcanvas-close { color: #e8e9ff; }
  :root[data-bs-theme="dark"] .ph-offcanvas-close:hover { background: #181a3d; }
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav > li > a { color: #e8e9ff; }
  :root[data-bs-theme="dark"] .ph-mobile-sub a,
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item,
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item > a{ color: #c9cbf0; }
  :root[data-bs-theme="dark"] .ph-mobile-sub a:hover,
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item:hover,
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item > a:hover { background: #181a3d; color: #fdba74; }
  
  
}

/* Off-canvas, second pass: Store submenu rows (li.dropdown-item wraps a.dropdown-item, so both were padded) and the
   links WHMCS's overflow script moved into "More" (Announcements, Knowledgebase...) which must look like top-level rows. */
@media (max-width: 1199.98px) {
  #mainNavbar .ph-client-nav .dropdown-menu > li.dropdown-item { display: block; padding: 0; min-height: 0; background: transparent; }
  #mainNavbar .ph-client-nav .dropdown-menu > li.dropdown-item > a.dropdown-item { padding: 8px 10px 8px 14px !important; white-space: normal; }
  #mainNavbar .ph-client-nav .dropdown-divider { display: none; }
  #mainNavbar .ph-client-nav > li.collapsable-dropdown { border-bottom: 0; }
  #mainNavbar .ph-client-nav .collapsable-dropdown-menu > li.dropdown-item { display: block; padding: 0; background: transparent; border-bottom: 1px solid var(--border-color); }
  #mainNavbar .ph-client-nav .collapsable-dropdown-menu > li.dropdown-item > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 0 !important;
    border-radius: 0;
    color: var(--ph-text);
    font-size: 17px;
    font-weight: 600;
  }
  #mainNavbar .ph-client-nav .collapsable-dropdown-menu > li.dropdown-item > a:hover { background: transparent; color: var(--ph-orange); }
  .ph-offcanvas-head { background: inherit; }
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .collapsable-dropdown-menu > li.dropdown-item > a { color: #e8e9ff; }
}

/* Off-canvas, third pass: full-width list (the nav carries Bootstrap's w-auto), square row edges, readable CTA text */
@media (max-width: 1199.98px) {
  #mainNavbar .ph-client-nav { width: 100% !important; }
  #mainNavbar .ph-client-nav .dropdown-menu,
  #mainNavbar .ph-client-nav li.dropdown-item { border-radius: 0; }
  
  
  
  
  
}

/* 320px-wide phones: logo + Login + cart + hamburger did not fit (scrolled sideways). Login becomes an icon button (text kept for screen readers). */
@media (max-width: 359.98px) {
  .tt-header .tt-toolbar-wrap a.btn-sm[href$="clientarea.php"] { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .tt-header .tt-toolbar-wrap a.btn-sm[href$="clientarea.php"] span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .tt-header .tt-toolbar-wrap .toolbar li button.ph-burger { margin-right: 0; }
}

/* ---------- Invoice page (viewinvoice.tpl; standalone page that loads invoice.min.css + this file) ---------- */
body:has(> .invoice-container) { background: var(--ph-page); font-family: "Euclid Circular A", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ph-text); }
.invoice-container {
  max-width: 880px;
  margin: 32px auto 16px;
  padding: 48px 56px 56px;
  border: 1px solid #e9e2dc;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(23, 32, 51, .06);
  font-size: 15px;
  line-height: 1.6;
}
.invoice-container .invoice-header { align-items: center; }
.invoice-container .invoice-header .invoice-col:last-child { text-align: right; }
.invoice-container .ph-inv-logo { margin: 0 0 14px; }
.invoice-container .ph-inv-logo img { display: block; height: 44px; width: auto; }
.invoice-container .invoice-header h5 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ph-ink); }
.invoice-container hr { margin: 24px 0; border-top: 1px solid #eef0f3; }

/* Status pill */
.invoice-container .invoice-status { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; }
.invoice-container .invoice-status span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--ph-text-2);
  font-weight: 800;
  line-height: 1.2;
}
.invoice-container .invoice-status span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.invoice-container .invoice-status .unpaid { background: #fff1e6; color: #9a3412; }
.invoice-container .invoice-status .paid { background: #e7f6ec; color: #166534; }
.invoice-container .invoice-status .refunded { background: #e8f1fb; color: #1e5a96; }
.invoice-container .invoice-status .collections { background: #fee2e2; color: #991b1b; }
.invoice-container .invoice-status .cancelled,
.invoice-container .invoice-status .draft { background: #eef0f3; color: var(--ph-text-3); }
.invoice-container .invoice-header .small-text { font-size: 14px; color: var(--ph-text-3); }

/* Payment instructions / pay button */
.invoice-container .payment-btn-container:not(:empty) {
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--ph-line);
  border-radius: 14px;
  background: #f8fbff;
  font-size: 14px;
  line-height: 1.8;
  text-align: left !important;
  color: var(--ph-text-2);
}
.invoice-container .payment-btn-container .btn { display: block; width: 100%; min-height: 48px; border-radius: 12px; font-weight: 700; }

/* Invoiced to / pay to / date / method */
.invoice-container .invoice-col > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ph-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.invoice-container address,
.invoice-container .small-text { font-size: 15px; line-height: 1.7; color: var(--ph-text); }
.invoice-container address { margin-bottom: 18px; }
.invoice-container [data-role="paymethod-info"] { display: block; }
.invoice-container select.custom-select {
  min-height: 44px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--ph-border-strong);
  border-radius: 12px;
  background-color: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--ph-text);
}
.invoice-container select.custom-select:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 3px rgba(30, 123, 193, .18); outline: none; }

/* Cards: line items and transactions */
.invoice-container .card { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; }
.invoice-container .card-header,
.invoice-container .card-title.ph-inv-card-title { padding: 16px 22px; border: 0; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); }
.invoice-container .card-header .ph-inv-card-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ph-ink); }
.invoice-container .card-title.ph-inv-card-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ph-ink); }
.invoice-container .card .table { margin: 0; font-variant-numeric: tabular-nums; }
.invoice-container .card .table td,
.invoice-container .card .table th { padding: 14px 22px; border-top: 1px solid var(--ph-line-soft); vertical-align: top; }
.invoice-container .card .table thead td,
.invoice-container .card .table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--ph-line);
  background: transparent;
  color: var(--ph-muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.invoice-container .card .table thead td strong { font-weight: 800; }
.invoice-container .card .table tbody tr:not(.total-row):hover { background: #fafcff; }
.invoice-container .card .table td.text-right,
.invoice-container .card .table td:last-child { white-space: nowrap; }
.invoice-container .card .table td.total-row,
.invoice-container .card .table tr:has(> td.total-row) { background: #fff; }
.invoice-container .card .table td.total-row { border-top: 1px solid var(--ph-line-soft); color: var(--ph-text-3); }
.invoice-container .card .table td.total-row strong { font-weight: 700; }
/* last row of each table (Total / Balance) is the one people look for */
.invoice-container .card .table tbody tr:last-child td.total-row {
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 2px solid #dbe7f5;
  background: #eef5fd;
  color: var(--ph-navy);
  font-size: 17px;
  font-weight: 800;
}
.invoice-container .card .table tbody tr:last-child td.total-row strong { font-weight: 800; }
.invoice-container > .row ~ p { margin: 8px 0 20px; font-size: 13px; color: var(--ph-muted); }

/* Actions */
.invoice-container .btn-group { margin-top: 24px; }
.invoice-container .btn-group .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--ph-blue);
  background: #fff;
  color: var(--ph-blue);
  font-size: 14px;
  font-weight: 700;
}
.invoice-container .btn-group .btn:first-child { border-radius: 12px 0 0 12px; }
.invoice-container .btn-group .btn:last-child { margin-left: -1.5px; border-radius: 0 12px 12px 0; }
.invoice-container .btn-group .btn:hover,
.invoice-container .btn-group .btn:focus-visible { background: var(--ph-blue); color: #fff; text-decoration: none; }
body:has(> .invoice-container) > p.text-center { margin: 8px 0 32px; font-size: 15px; font-weight: 600; }
body:has(> .invoice-container) > p.text-center a { color: var(--ph-blue); }
.invoice-container .clearfix::after { content: ""; display: table; clear: both; }

@media (max-width: 767.98px) {
  .invoice-container { margin: 12px; padding: 28px 20px 32px; border-radius: 16px; }
  .invoice-container .invoice-header .invoice-col:last-child { margin-top: 16px; text-align: center; }
  .invoice-container .invoice-header .invoice-col:first-child { text-align: center; }
  .invoice-container .ph-inv-logo img { margin: 0 auto; }
  .invoice-container .card .table td,
  .invoice-container .card .table th { padding: 12px 14px; }
}
@media print {
  body:has(> .invoice-container) { background: #fff; }
  .invoice-container { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
  .invoice-container .card { break-inside: avoid; }
}

/* Invoice page, second pass */
.invoice-container { display: flow-root; }
.invoice-container .invoice-col > strong + br { display: none; }
@media (min-width: 768px) {
  .invoice-container .invoice-header .invoice-col:last-child { text-align: right !important; }
  .invoice-container .invoice-header .invoice-status { text-align: right; }
}

/* Invoice page, third pass */
.invoice-container .card-header .card-title.ph-inv-card-title { padding: 0; border: 0; background: transparent; }
@media (max-width: 575.98px) {
  /* Invoiced To before Pay To, date before payment method (the stock order is reversed on phones) */
  .invoice-container .row > .invoice-col.right { order: 2; text-align: left; float: none; }
  .invoice-container .row > .invoice-col:not(.right) { order: 1; }
  .invoice-container .invoice-col.right > br { display: none; }
  .invoice-container .invoice-col.right [data-role="paymethod-info"] { float: none !important; }
  .invoice-container .transactions-container .table td:not(.text-right):not(.total-row) { white-space: normal !important; }
  .invoice-container .card .table thead td { letter-spacing: .03em; }
}
.invoice-container { width: auto; }
@media (max-width: 575.98px) {
  .invoice-container .transactions-container .table td { padding: 12px 8px; font-size: 14px; }
  .invoice-container .transactions-container .table thead td { font-size: 10.5px; letter-spacing: 0; }
  .invoice-container .transactions-container .table td:first-child { padding-left: 14px; }
  .invoice-container .transactions-container .table td:last-child { padding-right: 14px; }
}
@media (max-width: 575.98px) {
  /* phones: tighter cells so the 4 transaction columns fit without sideways scrolling (a table-responsive wrapper remains as the fallback) */
  .invoice-container .transactions-container .table td { padding: 12px 4px; font-size: 13px; }
  .invoice-container .transactions-container .table thead td { font-size: 9.5px; letter-spacing: 0; }
  .invoice-container .transactions-container .table td:first-child { padding-left: 10px; }
  .invoice-container .transactions-container .table td:last-child { padding-right: 10px; }
  .invoice-container .transactions-container .table td.total-row { font-size: 14px; }
}

/* Invoice page: payment area is its own full-width block under the header. A gateway that prints a card (.payment-wrapper, .mailin-card) is shown as is;
   plain text/buttons from other gateways get the tinted box. */
.invoice-container .payment-btn-container { margin: 24px 0 0; }
.invoice-container .payment-btn-container:not(:empty) { margin-top: 24px; }
.invoice-container .payment-btn-container:has(.payment-wrapper, .mailin-card, .fonepay-card) { padding: 0; border: 0; background: transparent; }
.invoice-container .payment-btn-container:not(:has(.payment-wrapper, .mailin-card, .fonepay-card)) { max-width: 520px; margin-left: auto; margin-right: auto; text-align: center !important; }
.invoice-container .payment-btn-container .payment-wrapper { box-shadow: none; }
.invoice-container .invoice-header .invoice-col:last-child .small-text { margin-top: 4px; }

/* Invoice page: billing contact card. Under the invoice on narrow screens; fixed to the right of it from 1500px (880px card + 24px gap + 280px). */
.ph-inv-aside {
  max-width: 880px;
  margin: 0 auto 16px;
  padding: 20px 24px;
  border: 1px solid #e9e2dc;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(23, 32, 51, .06);
  font-size: 14px;
}
.ph-inv-aside h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--ph-ink); }
.ph-inv-aside p { margin: 0 0 14px; color: var(--ph-text-3); line-height: 1.5; }
.ph-inv-aside ul { margin: 0; padding: 0; }
.ph-inv-aside li + li { margin-top: 4px; }
.ph-inv-aside a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; color: var(--ph-text); font-weight: 600; text-decoration: none; }
.ph-inv-aside a:hover, .ph-inv-aside a:focus-visible { background: #f3f8fe; color: var(--ph-blue); text-decoration: none; }
.ph-inv-aside a > img, .ph-inv-aside a > i, .ph-inv-aside a > svg { flex: none; width: 20px; height: 20px; font-size: 18px; line-height: 20px; text-align: center; color: var(--ph-blue); }
.ph-inv-aside a span { display: flex; flex-direction: column; line-height: 1.3; word-break: break-word; }
.ph-inv-aside small { color: var(--ph-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 767.98px) { .ph-inv-aside { margin: 0 12px 16px; } }
@media (min-width: 1500px) {
  .ph-inv-aside { position: fixed; top: 32px; left: calc(50% + 464px); width: 280px; max-width: none; margin: 0; }
}
.ph-inv-aside a > svg { color: #5b6573; }
.ph-inv-aside a:hover > svg { color: var(--ph-blue); }

/* ---------- Client area dashboard (clientareahome.tpl) + shared sidebar (includes/sidebar.tpl) ---------- */
/* Page header band: shorter on inner pages (was 48px padding above and below the title) */
.tt-page-header.py-5 { padding-top: 28px !important; padding-bottom: 36px !important; }

/* Stat tiles */
.tiles .tile {
  position: relative;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--ph-line) !important;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tiles .tile i {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eaf3fc;
  color: var(--ph-blue);
  font-size: 20px;
}
.tiles .tile .stat { margin: 0; color: var(--ph-ink); font-family: inherit; font-size: 32px; font-weight: 800; line-height: 1.1; }
.tiles .tile .title { margin-top: 4px; color: var(--ph-text-3); font-size: 14px; font-weight: 600; text-transform: none; }
.tiles .tile:hover, .tiles .tile:focus-visible { border-color: var(--ph-blue) !important; background: #fff; box-shadow: 0 10px 24px rgba(23, 32, 51, .08); transform: translateY(-2px); text-decoration: none; }
.tiles .tile:hover i, .tiles .tile:focus-visible i { font-size: 20px; color: var(--ph-blue); }
.tiles .tile:hover .stat { color: var(--ph-ink); }
.tiles .tile.ph-tile-attn { border-color: #f6c58a !important; background: #fff7ed; }
.tiles .tile.ph-tile-attn i { background: #ffedd5; color: var(--ph-orange-dark); }
.tiles .tile.ph-tile-attn .stat { color: #c2410c; }
.tiles .tile.ph-tile-attn:hover i { color: var(--ph-orange-dark); }

/* Home panels */
.tt-client-home-cards .card,
.tt-client-home-cards .card[class*="card-accent-"] {
  margin-bottom: 20px;
  border: 1px solid var(--ph-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
.tt-client-home-cards.client-home-cards .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); }
.tt-client-home-cards .card-header h3.card-title { display: flex; align-items: center; gap: 8px; font-size: 15px !important; font-weight: 800; color: var(--ph-ink); }
.tt-client-home-cards .card-header h3.card-title > i { color: var(--ph-blue); font-size: 15px; width: 18px; text-align: center; }
.tt-client-home-cards .card-header .float-right { order: 3; margin-left: auto; float: none !important; }
.tt-client-home-cards .card-header .float-right a.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--ph-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--ph-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.tt-client-home-cards .card-header .float-right a.btn:hover,
.tt-client-home-cards .card-header .float-right a.btn:focus-visible { background: var(--ph-blue); color: #fff; }
.tt-client-home-cards.client-home-cards .card-body { max-height: none; padding: 20px 22px; color: var(--ph-text-2); font-size: 15px; line-height: 1.6; }
.tt-client-home-cards .card-body p:last-child { margin-bottom: 0; }
.tt-client-home-cards .card-body a:not(.btn) { color: var(--ph-blue); font-weight: 600; }
.tt-client-home-cards .card-footer { padding: 12px 20px; border-top: 1px solid var(--ph-line-soft); background: #fff; }
.tt-client-home-cards .card-footer .btn-view-more { color: var(--ph-text-3); font-size: 14px; font-weight: 600; text-decoration: none; }
.tt-client-home-cards .card-footer .btn-view-more.disabled { color: var(--ph-muted); opacity: 1; pointer-events: none; }
.tt-client-home-cards .card-footer.ph-card-cta .btn { min-height: 44px; padding: 0 22px; border-radius: 12px; font-weight: 700; }
.tt-client-home-cards.client-home-cards .list-group .list-group-item { padding: 14px 22px; border: 0; border-top: 1px solid var(--ph-line-soft); font-size: 15px; font-weight: 600; color: var(--ph-text); }
.tt-client-home-cards.client-home-cards .list-group .list-group-item:first-child { border-top: 0; }
.tt-client-home-cards .list-group-item .text-last-updated { display: block; margin-top: 2px; color: var(--ph-muted); font-size: 13px; font-weight: 500; }

/* Register a New Domain widget */
#registerDomainPanel .input-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; }
#registerDomainPanel .input-group > .form-control { flex: 1 1 200px; width: auto; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff; font-size: 16px; }
#registerDomainPanel .input-group > .form-control:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; }
#registerDomainPanel .input-group-btn { display: flex; gap: 8px; margin: 0; }
#registerDomainPanel .input-group-btn .btn { min-height: 52px; padding: 0 22px; border: 1.5px solid var(--ph-blue); border-radius: 12px; font-size: 15px; font-weight: 700; }
#registerDomainPanel .input-group-btn .btn-success { background: var(--ph-blue); color: #fff; }
#registerDomainPanel .input-group-btn .btn-success:hover { background: var(--ph-blue-dark); border-color: var(--ph-blue-dark); }
#registerDomainPanel .input-group-btn .btn-default { background: #fff; color: var(--ph-blue); }
#registerDomainPanel .input-group-btn .btn-default:hover { background: var(--ph-blue); color: #fff; }
#registerDomainPanel .recaptcha-content-domain-checker { flex: 0 0 100%; margin-top: 4px; }
#registerDomainPanel .recaptcha-content-domain-checker .row,
#registerDomainPanel .recaptcha-content-domain-checker [class*="col-md"] { margin: 0; padding: 0; max-width: 100%; flex: 0 0 100%; justify-content: flex-start !important; }
#registerDomainPanel #default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 !important; text-align: left !important; }
#registerDomainPanel #default-captcha-domainchecker > p { flex: 0 0 100%; margin: 0; color: var(--ph-text-3); font-size: 13px; }
#registerDomainPanel #default-captcha-domainchecker .col-6 { flex: 0 0 auto; max-width: none; width: auto; padding: 0; }
#registerDomainPanel #default-captcha-domainchecker img { height: 48px; width: auto; border-radius: 8px; }
#registerDomainPanel #default-captcha-domainchecker .form-control { width: 150px; height: 48px; padding: 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; font-size: 20px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }

/* Sidebar (shared by every client area page) */
.sidebar .card-sidebar {
  margin-bottom: 20px !important;
  border: 1px solid var(--ph-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
.sidebar .card-sidebar .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); }
.sidebar .card-sidebar .card-header .card-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ph-ink); font-size: 15px; font-weight: 800; }
.sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { color: var(--ph-blue); font-size: 15px; width: 18px; text-align: center; }
.sidebar .card-sidebar .card-header .card-minimise { margin-left: auto; float: none !important; color: var(--ph-muted); font-size: 12px; cursor: pointer; }
.sidebar .card-sidebar .card-header .badge { margin-left: auto; float: none !important; }
.sidebar .list-group { font-family: inherit; font-size: 15px; }
.sidebar .list-group-item {
  min-height: 46px;
  padding: 11px 20px;
  border: 0;
  border-top: 1px solid var(--ph-line-soft);
  border-left: 3px solid transparent;
  background: #fff;
  color: var(--ph-text);
  font-weight: 500;
}
.sidebar .list-group-item:first-child { border-top: 0; }
.sidebar .list-group-item .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
.sidebar .list-group-item .sidebar-menu-item-icon { width: 18px; color: var(--ph-muted); text-align: center; }
.sidebar .list-group-item.list-group-item-action:hover,
.sidebar .list-group-item.list-group-item-action:focus-visible { background: #f3f8fe; color: var(--ph-blue) !important; text-decoration: none; }
.sidebar .list-group-item:hover .sidebar-menu-item-icon { color: var(--ph-blue); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus { border-color: var(--ph-line-soft); border-left-color: var(--ph-blue); background: #eaf3fc; color: var(--ph-blue); font-weight: 700; }
.sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--ph-blue); }
.sidebar .card-sidebar .card-body { padding: 16px 20px; font-size: 15px; line-height: 1.6; }
.sidebar .card-sidebar .card-footer { padding: 12px 16px 16px; border-top: 1px solid var(--ph-line-soft); background: #fff; }
.sidebar .card-sidebar .card-footer .btn,
.sidebar .card-sidebar .card-body .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ph-blue); border-radius: 12px; font-size: 14px; font-weight: 700; }
.sidebar .card-sidebar .btn-success { background: var(--ph-blue); color: #fff; }
.sidebar .card-sidebar .btn-success:hover { background: var(--ph-blue-dark); border-color: var(--ph-blue-dark); }
.sidebar .card-sidebar .btn-default { background: #fff; color: var(--ph-blue); }
.sidebar .card-sidebar .btn-default:hover { background: var(--ph-blue); color: #fff; }

@media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; transform: none !important; } }
@media (max-width: 575.98px) { .tt-client-home-cards.client-home-cards .card-body { padding: 16px; } #registerDomainPanel .input-group-btn { flex: 1 1 100%; } #registerDomainPanel .input-group-btn .btn { flex: 1; } }

/* Dark mode for the blocks above */
:root[data-bs-theme="dark"] .tiles .tile { border-color: #23264f !important; background: #12132b; }
:root[data-bs-theme="dark"] .tiles .tile .stat { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tiles .tile .title { color: #c9cbf0; }
:root[data-bs-theme="dark"] .tiles .tile i { background: #181a3d; color: #60a5fa; }
:root[data-bs-theme="dark"] .tiles .tile:hover, :root[data-bs-theme="dark"] .tiles .tile:focus-visible { background: #12132b; border-color: #60a5fa !important; }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn { border-color: #9a5b21 !important; background: #2a1c10; }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn .stat { color: #fdba74; }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn i { background: #3a2412; color: #fb923c; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card,
:root[data-bs-theme="dark"] .sidebar .card-sidebar { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .tt-client-home-cards.client-home-cards .card-header,
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header { border-bottom-color: #23264f; background: #181a3d; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header h3.card-title,
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header .card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header .float-right a.btn { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header .float-right a.btn:hover { background: #60a5fa; color: #0b0c1f; }
:root[data-bs-theme="dark"] .tt-client-home-cards.client-home-cards .card-body { color: #c9cbf0; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-body a:not(.btn) { color: #93c5fd; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-footer,
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer { border-top-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-footer .btn-view-more { color: #a4a7d6; }
:root[data-bs-theme="dark"] .tt-client-home-cards.client-home-cards .list-group .list-group-item,
:root[data-bs-theme="dark"] .sidebar .list-group-item { border-top-color: #23264f; background: #12132b; color: #e8e9ff; }
:root[data-bs-theme="dark"] .sidebar .list-group-item.list-group-item-action:hover { background: #181a3d; color: #93c5fd !important; }
:root[data-bs-theme="dark"] .sidebar .list-group-item.active,
:root[data-bs-theme="dark"] .sidebar .list-group-item.active:hover { background: #1e3a5f; color: #93c5fd; border-left-color: #60a5fa; }
:root[data-bs-theme="dark"] .tt-client-home-cards .list-group-item .text-last-updated,
:root[data-bs-theme="dark"] .sidebar .list-group-item .sidebar-menu-item-icon { color: #a4a7d6; }
:root[data-bs-theme="dark"] #registerDomainPanel .input-group > .form-control,
:root[data-bs-theme="dark"] #registerDomainPanel #default-captcha-domainchecker .form-control { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; }
:root[data-bs-theme="dark"] #registerDomainPanel #default-captcha-domainchecker > p { color: #c9cbf0; }
:root[data-bs-theme="dark"] #registerDomainPanel .input-group-btn .btn-default { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-default { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-success { border-color: #3b82f6; background: #2563eb; color: #fff; }

/* dashboard, third pass */
.tt-client-home-cards .card-footer.ph-card-cta .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--ph-blue); color: #fff; }
.tt-client-home-cards .card-footer.ph-card-cta .btn:hover { background: var(--ph-blue-dark); color: #fff; }
.tt-client-home-cards .card-footer:has(> .btn-view-more.disabled) { display: none; }
#registerDomainPanel #default-captcha-domainchecker img { height: 44px; }
#registerDomainPanel #default-captcha-domainchecker .form-control { height: 44px; }

/* dashboard / logged-in header on phones */
.tt-client-home-cards .list-group { border: 0; }
@media (max-width: 575.98px) {
  /* bell + "Hello, name" + cart + menu made the logged-in header 396px wide: the account menu becomes an icon */
  .tt-header .tt-toolbar-wrap #Secondary_Navbar-Account > a { font-size: 0; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px; }
  .tt-header .tt-toolbar-wrap #Secondary_Navbar-Account > a i { font-size: 20px; }
  .tt-header .tt-toolbar-wrap #Secondary_Navbar-Account > a::after { font-size: 14px; }
  /* mobile copies of the sidebar panels (Contacts, Shortcuts) were 189px wide and stuck to the left edge */
  .sidebar.sidebar-secondary { padding: 0 16px; }
  .sidebar.sidebar-secondary .card-sidebar { width: 100%; max-width: none; }
}
.row > .sidebar.sidebar-secondary { flex: 0 0 100%; max-width: 100%; }

/* Mailing-list switch outside the cart (My Details and any other .bootstrap-switch toggle): same pill as in the checkout, see themetags_cart/css/custom.css */
/* Checkout "Join our mailing list" switch (bootstrap-switch plugin). It measures its handles at init and writes inline widths, which came out
   too small here (70px wrapper, "No" handle cut off, a green "Yes" box and a pale label). The pill is now drawn by CSS from the plugin's own
   state classes; the plugin's container stays on top (transparent) so its click/keyboard handling is unchanged. */
.bootstrap-switch.bootstrap-switch-wrapper {
    position: relative;
    display: inline-block;
    width: 64px !important;
    height: 34px;
    margin: 4px 0 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--ph-border-strong);
    vertical-align: middle;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-on { background: var(--ph-blue); }
.bootstrap-switch.bootstrap-switch-wrapper::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .2s ease;
    pointer-events: none;
}
.bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-on::after { transform: translateX(30px); }
.bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-container {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    cursor: pointer;
}
.bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-container > span { opacity: 0; width: 50% !important; height: 100%; }
.bootstrap-switch.bootstrap-switch-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(30, 123, 193, .35); }
:root[data-bs-theme="dark"] .bootstrap-switch.bootstrap-switch-wrapper { background: #3b3f73; }
:root[data-bs-theme="dark"] .bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-on { background: #2563eb; }
.bootstrap-switch.bootstrap-switch-wrapper,
    .bootstrap-switch.bootstrap-switch-wrapper::after { transition: none; }
.bootstrap-switch.bootstrap-switch-wrapper {
    box-sizing: border-box;
    min-width: 0;
    max-width: 64px;
    border: 0 !important;
    box-shadow: none;
}
.bootstrap-switch.bootstrap-switch-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(30, 123, 193, .35); }

/* ---------- Lists (DataTables), status pills, pagination: services, domains, invoices, tickets, quotes, emails ---------- */
.dataTables_wrapper { font-size: 14px; color: var(--ph-text-2); }
.dataTables_wrapper .dataTables_info { padding-top: 0; color: var(--ph-text-3); font-size: 14px; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 14px; }
.dataTables_wrapper .dataTables_filter label { margin: 0; }
.dataTables_wrapper .dataTables_filter input {
  width: 260px;
  max-width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 42px;
  border: 1.5px solid var(--ph-border-strong);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center / 18px no-repeat;
  font-size: 15px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; }
.dataTables_wrapper .dataTables_length select { height: 40px; padding: 0 28px 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 10px; background-color: #fff; font-size: 14px; }

.dataTables_wrapper table.table-list {
  width: 100% !important;
  margin: 0 0 16px;
  border: 1px solid var(--ph-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.dataTables_wrapper table.table-list thead th {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--ph-line);
  background: var(--ph-tint) !important;
  color: var(--ph-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.dataTables_wrapper table.table-list thead th:first-child { border-top-left-radius: 15px; }
.dataTables_wrapper table.table-list thead th:last-child { border-top-right-radius: 15px; }
.dataTables_wrapper table.table-list tbody td { padding: 16px; border: 0; border-left: 0 !important; border-top: 1px solid var(--ph-line-soft); color: var(--ph-text); font-size: 15px; text-align: left !important; vertical-align: middle; }
.dataTables_wrapper table.table-list tbody tr:first-child td { border-top: 0; }
.dataTables_wrapper table.table-list tbody tr { transition: background-color .15s ease; }
.dataTables_wrapper table.table-list tbody tr:hover td { background: #f8fbff; }
.dataTables_wrapper table.table-list tbody td a { color: var(--ph-blue); font-weight: 600; }
.dataTables_wrapper table.table-list .ph-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dataTables_wrapper table.table-list td small, .dataTables_wrapper table.table-list td .text-muted { color: var(--ph-muted) !important; font-size: 13px; }
.dataTables_wrapper table.table-list td.dataTables_empty { padding: 40px 16px; color: var(--ph-muted); text-align: center !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before { opacity: .3; }
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after { opacity: .9; }

/* Status pills: WHMCS prints <span class="label status status-xyz"> */
.label.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef0f3;
  color: var(--ph-text-2);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}
.label.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.label.status > span { color: inherit !important; }
.label.status-active, .label.status-paid, .label.status-completed, .label.status-answered { background: #e7f6ec; color: #166534; }
.label.status-pending, .label.status-unpaid, .label.status-payment-pending, .label.status-customer-reply, .label.status-on-hold, .label.status-pending-registration, .label.status-pending-transfer { background: #fff1e6; color: #9a3412; }
.label.status-overdue, .label.status-terminated, .label.status-collections, .label.status-fraud, .label.status-expired { background: #fee2e2; color: #991b1b; }
.label.status-open, .label.status-in-progress, .label.status-refunded, .label.status-transferred-away { background: #e8f1fb; color: #1e5a96; }
.label.status-suspended { background: #fef3c7; color: #92400e; }
.label.status-cancelled, .label.status-closed, .label.status-draft, .label.status-grace, .label.status-redemption { background: #eef0f3; color: var(--ph-text-3); }

/* Pagination */
.dataTables_wrapper .pagination { margin: 0; gap: 4px; }
.dataTables_wrapper .pagination .page-link { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--ph-line); border-radius: 10px !important; background: #fff; color: var(--ph-text-2); font-size: 14px; font-weight: 600; }
.dataTables_wrapper .pagination .page-link:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); }
.dataTables_wrapper .pagination .active .page-link { border-color: var(--ph-blue); background: var(--ph-blue); color: #fff; }
.dataTables_wrapper .pagination .disabled .page-link { background: var(--ph-tint); color: #9aa4b2; }
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_filter input { width: 100%; }
  .dataTables_wrapper table.table-list thead th, .dataTables_wrapper table.table-list tbody td { padding: 12px 10px; }
  .dataTables_wrapper .dataTables_paginate { margin-top: 8px; }
}

/* dark */
:root[data-bs-theme="dark"] .dataTables_wrapper { color: #c9cbf0; }
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: #a4a7d6; }
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { border-color: #3b3f73; background-color: #0b0c1f; color: #e8e9ff; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list thead th { border-bottom-color: #23264f; background: #181a3d !important; color: #a4a7d6; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td { border-top-color: #23264f; background: #12132b; color: #e8e9ff; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody tr:hover td { background: #181a3d; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td a { color: #93c5fd; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list td small, :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list td .text-muted { color: #a4a7d6 !important; }
:root[data-bs-theme="dark"] .label.status { background: #181a3d; color: #c9cbf0; }
:root[data-bs-theme="dark"] .label.status-active, :root[data-bs-theme="dark"] .label.status-paid, :root[data-bs-theme="dark"] .label.status-completed, :root[data-bs-theme="dark"] .label.status-answered { background: #12301f; color: #86efac; }
:root[data-bs-theme="dark"] .label.status-pending, :root[data-bs-theme="dark"] .label.status-unpaid, :root[data-bs-theme="dark"] .label.status-payment-pending, :root[data-bs-theme="dark"] .label.status-customer-reply, :root[data-bs-theme="dark"] .label.status-on-hold { background: #3a2412; color: #fdba74; }
:root[data-bs-theme="dark"] .label.status-overdue, :root[data-bs-theme="dark"] .label.status-terminated, :root[data-bs-theme="dark"] .label.status-collections, :root[data-bs-theme="dark"] .label.status-fraud, :root[data-bs-theme="dark"] .label.status-expired { background: #3b1414; color: #fca5a5; }
:root[data-bs-theme="dark"] .label.status-open, :root[data-bs-theme="dark"] .label.status-in-progress, :root[data-bs-theme="dark"] .label.status-refunded { background: #14263f; color: #93c5fd; }
:root[data-bs-theme="dark"] .label.status-suspended { background: #3a2f10; color: #fcd34d; }
:root[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link { border-color: #23264f; background: #12132b; color: #c9cbf0; }
:root[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link:hover { background: #181a3d; color: #93c5fd; border-color: #60a5fa; }
:root[data-bs-theme="dark"] .dataTables_wrapper .pagination .active .page-link { border-color: #3b82f6; background: #2563eb; color: #fff; }
:root[data-bs-theme="dark"] .dataTables_wrapper .pagination .disabled .page-link { background: #0b0c1f; color: #3b3f73; }

/* Phones: each list row becomes a card, with the column title in front of every value (data-label comes from prabhuhost.js) */
@media (max-width: 575.98px) {
  .dataTables_wrapper table.table-list { border: 0; background: transparent; overflow: visible; }
  .dataTables_wrapper table.table-list thead { display: none; }
  .dataTables_wrapper table.table-list tbody, .dataTables_wrapper table.table-list tbody tr { display: block; }
  .dataTables_wrapper table.table-list tbody tr { margin-bottom: 12px; border: 1px solid var(--ph-line); border-radius: 14px; background: #fff; overflow: hidden; }
  .dataTables_wrapper table.table-list tbody td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--ph-line-soft); text-align: right !important; }
  .dataTables_wrapper table.table-list tbody td:first-child { border-top: 0; }
  .dataTables_wrapper table.table-list tbody td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .dataTables_wrapper table.table-list tbody td[data-label=""]::before { content: none; }
  .dataTables_wrapper table.table-list tbody td.dataTables_empty { display: block; text-align: center !important; }
  .dataTables_wrapper table.table-list tbody td.dataTables_empty::before { content: none; }
  .dataTables_wrapper table.table-list .ph-num { text-align: right !important; }
}
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody tr { border-color: #23264f; background: #12132b; }

/* ---------- Client area: alerts, labels, buttons, product status, tabs, markdown editor ---------- */
.alert { padding: 14px 18px; border: 1px solid transparent; border-radius: 12px; font-size: 15px; line-height: 1.55; }
.alert-warning { border-color: #f6c58a; background: #fff7ed; color: #9a3412; }
.alert-info { border-color: #cfe2f7; background: #eef5fd; color: #1e5a96; }
.alert-success { border-color: #b7e3c6; background: #e7f6ec; color: #166534; }
.alert-danger { border-color: #f9c4c4; background: #fef2f2; color: #991b1b; }
.alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: underline; }
#alertUnpaidInvoice { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#alertUnpaidInvoice .float-right { order: 2; float: none !important; flex: none; margin-left: auto; }
.alert .btn-xs, .alert .btn-sm { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.alert .btn-default { border: 1.5px solid var(--ph-blue); background: #fff; color: var(--ph-blue); }
.alert .btn-default:hover { background: var(--ph-blue); color: #fff; }

/* coloured pills that WHMCS prints with an inline background (ticket status) and requestor badges */
.label[style*="background-color"], .label.requestor-badge, .label[class*="requestor-type"] {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff;
}
.label.requestor-type-owner { background: #e7f6ec; color: #166534; }
.label.requestor-type-authorizeduser, .label.requestor-type-sub-account { background: #e8f1fb; color: #1e5a96; }
.label.requestor-type-operator { background: #eef0f3; color: var(--ph-text-3); }

/* buttons inside the client area content and sidebars: one family */
.primary-content .btn-success, .sidebar .btn-success { border: 1.5px solid var(--ph-blue); background: var(--ph-blue); color: #fff; }
.primary-content .btn-success:hover, .sidebar .btn-success:hover { border-color: var(--ph-blue-dark); background: var(--ph-blue-dark); color: #fff; }
.primary-content .btn-danger, .sidebar .btn-danger { border: 1.5px solid #dc2626; background: #fff; color: #b91c1c; }
.primary-content .btn-danger:hover, .sidebar .btn-danger:hover { background: #dc2626; color: #fff; }
.primary-content .btn-sm, .sidebar .btn-sm { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.primary-content .btn-default { border: 1.5px solid var(--ph-blue); background: #fff; color: var(--ph-blue); }
.primary-content .btn-default:hover { background: var(--ph-blue); color: #fff; }

/* product / service status block (service details page) */
.product-status { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; }
.product-status .product-icon { padding: 28px 16px 18px; }
.product-status .product-icon .fa-stack { color: var(--ph-border-strong); }
.product-status .product-icon h3 { margin: 12px 0 2px; font-size: 20px; font-weight: 800; color: var(--ph-ink); }
.product-status .product-icon h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ph-muted); }
.product-status-text { padding: 10px 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.product-status-pending { background-color: var(--ph-orange-dark); }
.product-status-active { background-color: #16a34a; }
.product-status-suspended { background-color: #b45309; }
.product-status-terminated, .product-status-cancelled { background-color: var(--ph-text-3); }
.product-status-fraud { background-color: var(--ph-ink); }

/* tabs */
.nav-tabs { border-bottom: 1px solid var(--ph-line); }
.nav-tabs .nav-link { margin-bottom: -1px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--ph-text-3); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--ph-blue); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { border-bottom-color: var(--ph-blue); background: transparent; color: var(--ph-blue); font-weight: 700; }
.tab-content { padding-top: 8px; }

/* ticket view */
.view-ticket { border: 1px solid var(--ph-line); border-radius: 16px; overflow: hidden; box-shadow: none; }
.view-ticket .card-body.bg-primary-light { background: var(--ph-tint) !important; }
.md-editor { border: 1.5px solid var(--ph-border-strong); border-radius: 12px; overflow: hidden; }
.md-editor .md-header { padding: 8px; background: var(--ph-tint); }
.md-editor .md-header .btn, .md-editor .md-header .btn-primary { min-height: 34px; border: 1px solid var(--ph-border-strong); border-radius: 8px; background: #fff !important; color: var(--ph-text-2) !important; }
.md-editor .md-header .btn:hover, .md-editor .md-header .btn.active { border-color: var(--ph-blue); color: var(--ph-blue) !important; }
.md-editor .md-header .btn-primary { border-color: var(--ph-blue); color: var(--ph-blue) !important; }

/* dark */
:root[data-bs-theme="dark"] .alert-warning { border-color: #9a5b21; background: #2a1c10; color: #fdba74; }
:root[data-bs-theme="dark"] .alert-info { border-color: #1e3a5f; background: #14263f; color: #93c5fd; }
:root[data-bs-theme="dark"] .alert-success { border-color: #1f5a37; background: #12301f; color: #86efac; }
:root[data-bs-theme="dark"] .alert-danger { border-color: #7f1d1d; background: #3b1414; color: #fca5a5; }
:root[data-bs-theme="dark"] .label.requestor-type-owner { background: #12301f; color: #86efac; }
:root[data-bs-theme="dark"] .product-status { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .product-status .product-icon h3 { color: #e8e9ff; }
:root[data-bs-theme="dark"] .product-status .product-icon h4 { color: #a4a7d6; }
:root[data-bs-theme="dark"] .nav-tabs { border-bottom-color: #23264f; }
:root[data-bs-theme="dark"] .nav-tabs .nav-link { color: #a4a7d6; }
:root[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #93c5fd; border-bottom-color: #60a5fa; }
:root[data-bs-theme="dark"] .primary-content .btn-default, :root[data-bs-theme="dark"] .alert .btn-default { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] .primary-content .btn-danger { border-color: #ef4444; background: transparent; color: #fca5a5; }
:root[data-bs-theme="dark"] .view-ticket { border-color: #23264f; }
:root[data-bs-theme="dark"] .view-ticket .card-body.bg-primary-light { background: #181a3d !important; }
:root[data-bs-theme="dark"] .md-editor { border-color: #3b3f73; }
:root[data-bs-theme="dark"] .md-editor .md-header { background: #181a3d; }
:root[data-bs-theme="dark"] .md-editor .md-header .btn { border-color: #3b3f73; background: #0b0c1f !important; color: #e8e9ff !important; }
.alert .btn-xs, .alert .btn-sm { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* ---------- Support tickets: submit form, confirmation, conversation thread, rating, attachments ---------- */
/* flat primary buttons in the client area (the Kohost gradient made inner pages look different from the cart) */
.primary-content .btn-primary, .sidebar .btn-primary { border: 1.5px solid var(--ph-blue); background: var(--ph-blue); color: #fff; }
.primary-content .btn-primary:hover, .sidebar .btn-primary:hover { border-color: var(--ph-blue-dark); background: var(--ph-blue-dark); color: #fff; }
.primary-content .btn-primary:not(.btn-sm):not(.btn-xs) { min-height: 48px; padding: 0 26px; border-radius: 12px; font-weight: 700; }

/* cards used as form containers and the confirmation box */
.tt-custom-card { border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; }
.tt-custom-card.bg-success-light { border-color: #b7e3c6; background: #e7f6ec; }
.tt-custom-card.bg-success-light .card-body { padding: 40px 28px !important; }
.tt-custom-card.bg-success-light .fa-check-circle { font-size: 48px; color: #16a34a !important; }
.tt-custom-card.bg-success-light strong { display: block; margin: 8px 0 6px; color: #14532d; font-size: 20px; font-weight: 800; }
.tt-custom-card.bg-success-light p { max-width: 640px; margin: 0 auto 20px; color: #166534; font-size: 15px; line-height: 1.6; }
.tt-custom-card.bg-success-light .alert-link { color: var(--ph-blue); text-decoration: underline; }

/* read-only fields (Name / Email on ticket forms) */
.primary-content input[readonly], .primary-content input:disabled { border-color: var(--ph-line); background: var(--ph-tint); color: var(--ph-text-2); }

/* attachments: one 48px control with a Browse button inside */
.custom-file, .custom-file-input { height: 48px; }
.custom-file-label { display: flex; align-items: center; height: 48px; padding: 0 120px 0 16px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff; color: var(--ph-text-3); font-size: 15px; }
.custom-file-label::after { top: 0; right: 0; bottom: 0; display: flex; align-items: center; height: auto; padding: 0 20px; border-left: 1.5px solid var(--ph-border-strong); border-radius: 0 10px 10px 0; background: #eaf3fc; color: var(--ph-blue); font-weight: 700; }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); }

/* conversation thread */
.view-ticket > .card-body:not(.bg-primary-light) { padding: 0; border-top: 1px solid var(--ph-line); }
.ticket-reply .posted-by { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 12px 20px; border-bottom: 1px solid var(--ph-line-soft); background: var(--ph-tint); color: var(--ph-muted); font-size: 13px; }
.ticket-reply .posted-by .label { margin-left: auto; float: none !important; }
.ticket-reply .posted-by-name { color: var(--ph-ink); font-weight: 700; }
.ticket-reply .message { padding: 18px 20px !important; color: var(--ph-text); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.ticket-reply .message img { max-width: 100%; height: auto; }
.ticket-reply.staff { box-shadow: inset 4px 0 0 var(--ph-blue); }
.ticket-reply.staff .posted-by { background: #eaf3fc; }
.ticket-reply .message .clearfix { margin-top: 10px; }
.view-ticket h3.h6 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.view-ticket h3.h6 .ticket-actions { float: none !important; margin: 0 !important; display: flex; gap: 8px; }

/* rating stars: Kohost asks for "Font Awesome 6 Pro" (9.0), 8.13 ships 5 Pro, so the stars were empty squares */
.ticket-reply .rating, .ticket-reply .rating-done { float: right; padding: 0 0 0 8px; font-size: 22px; line-height: 1; }
.ticket-reply .rating span.star, .ticket-reply .rating-done span.star { font-family: "Font Awesome 5 Pro" !important; font-weight: 400; padding: 4px 2px; }
.ticket-reply .rating span.star:before, .ticket-reply .rating-done span.star:before { color: #9aa4b2; }
.ticket-reply .rating span.star:hover:before, .ticket-reply .rating span.star:hover ~ span.star:before, .ticket-reply .rating-done span.star.active:before { color: #f59e0b; font-weight: 900; }
.ticket-reply .rating-done .rated { color: var(--ph-muted); font-size: 13px; }

@media (max-width: 575.98px) {
  .ticket-reply .posted-by, .ticket-reply .message { padding-left: 16px !important; padding-right: 16px !important; }
  .tt-custom-card.bg-success-light .card-body { padding: 28px 18px !important; }
  .custom-file-label { padding-right: 96px; }
}

/* dark */
:root[data-bs-theme="dark"] .tt-custom-card { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .tt-custom-card.bg-success-light { border-color: #1f5a37; background: #12301f; }
:root[data-bs-theme="dark"] .tt-custom-card.bg-success-light strong { color: #bbf7d0; }
:root[data-bs-theme="dark"] .tt-custom-card.bg-success-light p { color: #86efac; }
:root[data-bs-theme="dark"] .tt-custom-card.bg-success-light .alert-link { color: #93c5fd; }
:root[data-bs-theme="dark"] .primary-content input[readonly], :root[data-bs-theme="dark"] .primary-content input:disabled { border-color: #23264f; background: #181a3d; color: #c9cbf0; }
:root[data-bs-theme="dark"] .custom-file-label { border-color: #3b3f73; background: #0b0c1f; color: #c9cbf0; }
:root[data-bs-theme="dark"] .custom-file-label::after { border-left-color: #3b3f73; background: #181a3d; color: #93c5fd; }
:root[data-bs-theme="dark"] .view-ticket > .card-body:not(.bg-primary-light) { border-top-color: #23264f; }
:root[data-bs-theme="dark"] .ticket-reply .posted-by { border-bottom-color: #23264f; background: #181a3d; color: #a4a7d6; }
:root[data-bs-theme="dark"] .ticket-reply .posted-by-name { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ticket-reply .message { color: #e8e9ff; }
:root[data-bs-theme="dark"] .ticket-reply.staff { box-shadow: inset 4px 0 0 #60a5fa; }
:root[data-bs-theme="dark"] .ticket-reply.staff .posted-by { background: #14263f; }
:root[data-bs-theme="dark"] .primary-content .btn-primary { border-color: #3b82f6; background: #2563eb; }
:root[data-bs-theme="dark"] .label.requestor-type-operator { background: #181a3d; color: #c9cbf0; }

/* ticket pages, second pass */
.primary-content .btn-primary:not(.btn-sm):not(.btn-xs) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; }
/* image captcha on content pages (ticket form, contact): label above, 44px image + code field on one line, left aligned */
.primary-content #default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.primary-content #default-captcha-domainchecker > p { flex: 0 0 100%; margin: 0; color: var(--ph-text-3); font-size: 14px; }
.primary-content #default-captcha-domainchecker .col-6, .primary-content #default-captcha-domainchecker .captchaimage { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.primary-content #default-captcha-domainchecker img { height: 44px; width: auto; border-radius: 8px; }
.primary-content #default-captcha-domainchecker .form-control { width: 150px; height: 44px; padding: 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; font-size: 20px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.primary-content .recaptcha-content-domain-checker .row, .primary-content .recaptcha-content-domain-checker [class*="col-md"], .primary-content .captcha-container .row { margin: 0; padding: 0; max-width: 100%; flex: 0 0 100%; justify-content: flex-start !important; }
:root[data-bs-theme="dark"] .primary-content #default-captcha-domainchecker > p { color: #c9cbf0; }
:root[data-bs-theme="dark"] .primary-content #default-captcha-domainchecker .form-control { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; }

/* ---------- Page header band ("hero") and breadcrumb, redesigned ----------
   Kohost drew the breadcrumb as a white tab with a slanted triangle hanging off the bottom-right of the band (hidden below 769px).
   Now: the band is a compact block (eyebrow-free), title + tagline on the left, and the breadcrumb is a quiet inline trail under them,
   readable on the blue (>= 7:1), visible on phones too (one scrollable line). */
.tt-page-header.py-5 { padding-top: 30px !important; padding-bottom: 30px !important; }
.tt-page-header-info { display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.tt-page-header h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.tt-page-header-info > p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.5; }
.tt-page-header .tt-breadcrumb {
  position: static;
  display: block !important;
  margin: 8px 0 0;
  border-radius: 0;
  background: transparent;
}
.tt-page-header .tt-triangle-right { display: none !important; }
.tt-page-header .tt-breadcrumb ol.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  font-size: 14px;
  line-height: 1.4;
}
.tt-page-header .tt-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.tt-page-header .tt-breadcrumb .breadcrumb-item a { padding: 4px 0; color: rgba(255, 255, 255, .86); font-family: inherit; font-size: 14px; font-weight: 500; text-decoration: none; }
.tt-page-header .tt-breadcrumb .breadcrumb-item a:hover,
.tt-page-header .tt-breadcrumb .breadcrumb-item a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tt-page-header .tt-breadcrumb .breadcrumb-item.active { font-family: inherit; font-size: 14px; }
.tt-page-header .tt-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.tt-page-header .tt-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\f105"; padding: 0 10px; color: rgba(255, 255, 255, .55); font-size: 12px; font-weight: 400; }
@media (max-width: 768px) {
  .tt-page-header .tt-breadcrumb { display: block !important; }
  .tt-page-header.py-5 { padding-top: 22px !important; padding-bottom: 22px !important; }
  .tt-page-header h1 { font-size: 24px; }
  .tt-page-header-info > p { font-size: 15px; }
  .tt-page-header .tt-breadcrumb ol.breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .tt-page-header .tt-breadcrumb ol.breadcrumb::-webkit-scrollbar { display: none; }
}
:root[data-bs-theme="dark"] .tt-page-header .tt-breadcrumb ol.breadcrumb { background: transparent !important; }

/* ---------- Page header: action buttons on the right (tt-page-actions.tpl) ---------- */
.tt-page-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.tt-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.tt-page-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tt-page-action svg { flex: none; }
.tt-page-action-secondary { background: #fff; color: #0b1b3a !important; }
.tt-page-action-secondary:hover, .tt-page-action-secondary:focus-visible { background: #eef5fd; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.tt-page-action-primary { background: var(--ph-orange); color: #0b1b3a !important; }
.tt-page-action-primary:hover, .tt-page-action-primary:focus-visible { background: #fb8a3c; box-shadow: 0 8px 20px rgba(249, 115, 22, .35); transform: translateY(-1px); }
.tt-page-action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 767.98px) {
  .tt-page-header-row { gap: 14px; }
  .tt-page-actions { width: 100%; margin-left: 0; }
  .tt-page-action { flex: 1 1 calc(50% - 6px); min-width: 0; padding: 0 14px; font-size: 14px; white-space: normal; text-align: center; }
  .tt-page-actions .tt-page-action:only-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tt-page-action { transition: none; transform: none !important; } }
.tt-page-header-info { flex: 1 1 320px; min-width: 0; max-width: 100%; }
@media (min-width: 768px) { .tt-page-header-info { max-width: 860px; } }

/* ---------- Dashboard calm-down: flat hero, one primary action per area, quiet secondary actions ---------- */
/* hero band: one flat navy, no gradient, no glow, no orange line (dark mode: near-black with a hairline) */
.tt-page-header.bg-gradient { background: #0b2a5b; box-shadow: none; }
:root[data-bs-theme="dark"] .tt-page-header.bg-gradient { background: #0b0c1f; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
/* hero secondary action: ghost (outline) so the orange primary is the only filled button */
.tt-page-action-secondary { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.tt-page-action-secondary:hover, .tt-page-action-secondary:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .1); box-shadow: none; transform: none; }

/* panel header actions (View All, My Services, Open New Ticket, Renew Now): plain text link + symbol */
.tt-client-home-cards .card-header .float-right a.btn,
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header .float-right a.btn {
  min-height: 36px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: #1e7bc1; font-size: 14px; font-weight: 600; gap: 6px;
}
.tt-client-home-cards .card-header .float-right a.btn i.fa-arrow-right { order: 2; font-size: 12px; }
.tt-client-home-cards .card-header .float-right a.btn:hover, .tt-client-home-cards .card-header .float-right a.btn:focus-visible { background: transparent; color: var(--ph-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.tt-client-home-cards .card-header .float-right a.btn:hover i.fa-arrow-right { transform: translateX(3px); }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header .float-right a.btn { color: #93c5fd; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header .float-right a.btn:hover { background: transparent; color: #bfdbfe; }

/* sidebar buttons: quiet outline (Update, New Contact...) */
.sidebar .card-sidebar .btn-success, .sidebar .card-sidebar .btn-default { border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); }
.sidebar .card-sidebar .btn-success:hover, .sidebar .card-sidebar .btn-default:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-success, :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-default { border-color: #3b3f73; background: transparent; color: #e8e9ff; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-success:hover, :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-default:hover { border-color: #60a5fa; background: #181a3d; color: #93c5fd; }

/* service rows on the dashboard / service list: status pill, cPanel login stays outlined, "View Details" is a text link */
.div-service-item { display: flex; align-items: center; gap: 16px; }
.div-service-item .div-service-name { flex: 1 1 auto; min-width: 0; }
.div-service-item .div-service-buttons { display: flex; align-items: center; gap: 8px; flex: none; }
.div-service-item .btn-view-details { min-height: 40px; padding: 0 8px; border: 0 !important; background: transparent !important; color: var(--ph-blue) !important; font-weight: 600; }
.div-service-item .btn-view-details:hover { text-decoration: underline; text-underline-offset: 3px; }
.label.label-success, .label.label-warning, .label.label-danger, .label.label-info, .label.label-default { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.label.label-success { background: #e7f6ec; color: #166534; }
.label.label-warning { background: #fff1e6; color: #9a3412; }
.label.label-danger { background: #fee2e2; color: #991b1b; }
.label.label-info { background: #e8f1fb; color: #1e5a96; }
.label.label-default { background: #eef0f3; color: var(--ph-text-3); }
:root[data-bs-theme="dark"] .label.label-success { background: #12301f; color: #86efac; }
:root[data-bs-theme="dark"] .label.label-warning { background: #3a2412; color: #fdba74; }
:root[data-bs-theme="dark"] .label.label-danger { background: #3b1414; color: #fca5a5; }
:root[data-bs-theme="dark"] .label.label-info { background: #14263f; color: #93c5fd; }
:root[data-bs-theme="dark"] .label.label-default { background: #181a3d; color: #c9cbf0; }
:root[data-bs-theme="dark"] .div-service-item .btn-view-details { color: #93c5fd !important; }
@media (max-width: 575.98px) { .div-service-item { flex-wrap: wrap; } .div-service-item .div-service-buttons { width: 100%; } }

/* register-a-domain widget: Register is the primary, Transfer a text link */
#registerDomainPanel .input-group-btn .btn-default, :root[data-bs-theme="dark"] #registerDomainPanel .input-group-btn .btn-default { border: 0; background: transparent; color: #1e7bc1; padding: 0 8px; }
#registerDomainPanel .input-group-btn .btn-default:hover { background: transparent; color: var(--ph-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
:root[data-bs-theme="dark"] #registerDomainPanel .input-group-btn .btn-default { color: #93c5fd; }
#registerDomainPanel .recaptcha-content-domain-checker { margin-left: 0 !important; margin-right: 0 !important; }
#registerDomainPanel #default-captcha-domainchecker > p { padding: 0; }
.sidebar .card-sidebar .card-footer .btn.btn-default, .sidebar .card-sidebar .card-footer .btn.btn-success,
.sidebar .card-sidebar .card-body .btn.btn-default, .sidebar .card-sidebar .card-body .btn.btn-success { border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); }
.sidebar .card-sidebar .card-footer .btn.btn-default:hover, .sidebar .card-sidebar .card-footer .btn.btn-success:hover,
.sidebar .card-sidebar .card-body .btn.btn-default:hover, .sidebar .card-sidebar .card-body .btn.btn-success:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-default, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-success { border-color: #3b3f73; background: transparent; color: #e8e9ff; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-default:hover, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-success:hover { border-color: #60a5fa; background: #181a3d; color: #93c5fd; }
.div-service-item .div-service-status { width: auto !important; min-width: 80px; flex: none; }
.div-service-item .div-service-status .label { white-space: nowrap; }
.div-service-item .label-placeholder { display: none; }
.div-service-item .div-service-status .label { flex: none; max-width: none; overflow: visible; text-overflow: clip; width: auto; }

/* cPanel mark in front of every "Log in to cPanel" action (service rows, dashboard, service details): the supplied cPanel logo, grey, inlined as a
   data URI (no request). Targets WHMCS's custom-action buttons by data-identifier, so no markup changes. Dark mode uses a lighter grey. */
button.btn-custom-action[data-identifier="cpanel"]::before,
li.btn-custom-action[data-identifier="cpanel"]::before,
a.btn-custom-action[data-identifier="cpanel"]::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 407.66 240%22%3E%3Cpath fill=%22%236b7280%22 d=%22M89.69 59.1h67.8L147 99.3a25.38 25.38 0 0 1-9 13.5 24.32 24.32 0 0 1-15.3 5.1H91.19a30.53 30.53 0 0 0-19 6.3 33 33 0 0 0-11.55 17.1 31.91 31.91 0 0 0-.45 15.3A33.1 33.1 0 0 0 66 169.35a30.29 30.29 0 0 0 10.8 8.85 31.74 31.74 0 0 0 14.4 3.3h19.2a10.8 10.8 0 0 1 8.85 4.35 10.4 10.4 0 0 1 2 9.75l-12 44.4h-21a84.77 84.77 0 0 1-39.75-9.45 89.78 89.78 0 0 1-30.21-25.05A88.4 88.4 0 0 1 1.94 170 87.51 87.51 0 0 1 3 129l1.2-4.5a88.69 88.69 0 0 1 31.64-47.25 89.91 89.91 0 0 1 25-13.35 87 87 0 0 1 28.85-4.8ZM123.89 240 183 18.6a25.38 25.38 0 0 1 9-13.5A24.28 24.28 0 0 1 207.29 0H270a84.8 84.8 0 0 1 39.75 9.45 89.21 89.21 0 0 1 46.65 60.6 83.8 83.8 0 0 1-1.2 41l-1.2 4.5a89.88 89.88 0 0 1-12 26.55 87.65 87.65 0 0 1-73.2 39.15h-54.3l10.8-40.5a25.38 25.38 0 0 1 9-13.2 24.32 24.32 0 0 1 15.3-5.1H267a31.56 31.56 0 0 0 30.6-23.7A29.5 29.5 0 0 0 298 84a33.1 33.1 0 0 0-5.85-12.75 31.85 31.85 0 0 0-10.8-9A30.61 30.61 0 0 0 267 58.8h-33.6l-43.8 162.9a25.38 25.38 0 0 1-9 13.2 23.88 23.88 0 0 1-15 5.1ZM361.18 32.31h-3.71V3.71h-10.1V.42h23.91v3.29h-10.1ZM390.19 32.31 379.37 4h-.17q.3 3.36.3 8v20.31h-3.42V.42h5.58l10.1 26.3h.18L402.12.42h5.54v31.89H404V11.76c0-2.36.11-4.91.31-7.68h-.17l-10.96 28.23Z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-bs-theme="dark"] button.btn-custom-action[data-identifier="cpanel"]::before,
:root[data-bs-theme="dark"] li.btn-custom-action[data-identifier="cpanel"]::before,
:root[data-bs-theme="dark"] a.btn-custom-action[data-identifier="cpanel"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 407.66 240%22%3E%3Cpath fill=%22%2394a3b8%22 d=%22M89.69 59.1h67.8L147 99.3a25.38 25.38 0 0 1-9 13.5 24.32 24.32 0 0 1-15.3 5.1H91.19a30.53 30.53 0 0 0-19 6.3 33 33 0 0 0-11.55 17.1 31.91 31.91 0 0 0-.45 15.3A33.1 33.1 0 0 0 66 169.35a30.29 30.29 0 0 0 10.8 8.85 31.74 31.74 0 0 0 14.4 3.3h19.2a10.8 10.8 0 0 1 8.85 4.35 10.4 10.4 0 0 1 2 9.75l-12 44.4h-21a84.77 84.77 0 0 1-39.75-9.45 89.78 89.78 0 0 1-30.21-25.05A88.4 88.4 0 0 1 1.94 170 87.51 87.51 0 0 1 3 129l1.2-4.5a88.69 88.69 0 0 1 31.64-47.25 89.91 89.91 0 0 1 25-13.35 87 87 0 0 1 28.85-4.8ZM123.89 240 183 18.6a25.38 25.38 0 0 1 9-13.5A24.28 24.28 0 0 1 207.29 0H270a84.8 84.8 0 0 1 39.75 9.45 89.21 89.21 0 0 1 46.65 60.6 83.8 83.8 0 0 1-1.2 41l-1.2 4.5a89.88 89.88 0 0 1-12 26.55 87.65 87.65 0 0 1-73.2 39.15h-54.3l10.8-40.5a25.38 25.38 0 0 1 9-13.2 24.32 24.32 0 0 1 15.3-5.1H267a31.56 31.56 0 0 0 30.6-23.7A29.5 29.5 0 0 0 298 84a33.1 33.1 0 0 0-5.85-12.75 31.85 31.85 0 0 0-10.8-9A30.61 30.61 0 0 0 267 58.8h-33.6l-43.8 162.9a25.38 25.38 0 0 1-9 13.2 23.88 23.88 0 0 1-15 5.1ZM361.18 32.31h-3.71V3.71h-10.1V.42h23.91v3.29h-10.1ZM390.19 32.31 379.37 4h-.17q.3 3.36.3 8v20.31h-3.42V.42h5.58l10.1 26.3h.18L402.12.42h5.54v31.89H404V11.76c0-2.36.11-4.91.31-7.68h-.17l-10.96 28.23Z%22/%3E%3C/svg%3E"); }

/* ---------- Dashboard polish: dropdowns not clipped, icon chips, depth, row hover ---------- */
/* the cards clipped their own dropdowns (cPanel menu hidden under the card edge): let them overflow, round the children instead */
.tt-client-home-cards .card, .tt-client-home-cards .card[class*="card-accent-"] { overflow: visible; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05); }
.tt-client-home-cards .card > .card-header { border-radius: 15px 15px 0 0; }
.tt-client-home-cards .card > :last-child:not(.card-header) { border-radius: 0 0 15px 15px; }
.tt-client-home-cards .card { position: relative; z-index: 0; }
.tt-client-home-cards .card:has(.dropdown-menu.show), .tt-client-home-cards .card:has(.btn-group.show) { z-index: 5; }

/* split button: the open caret stays outlined instead of turning solid blue */
.div-service-buttons .btn-group.show > .btn.dropdown-toggle,
.div-service-buttons .btn.dropdown-toggle:focus,
.div-service-buttons .btn.dropdown-toggle:active { border-color: var(--ph-blue) !important; background: #eaf3fc !important; color: var(--ph-blue) !important; box-shadow: none !important; }
.div-service-buttons .dropdown-toggle .caret { border-top-color: currentColor; }
.div-service-buttons .dropdown-menu {
  min-width: 230px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--ph-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .14);
  z-index: 1060;
}
.div-service-buttons .dropdown-item { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ph-text); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.div-service-buttons .dropdown-item:hover, .div-service-buttons .dropdown-item:focus { background: #f3f8fe; color: var(--ph-blue); }
.div-service-buttons .dropdown-item .loading { margin-right: 8px; }

/* panel headers: white with a tinted icon chip (colour by panel meaning) */
.tt-client-home-cards.client-home-cards .card-header { background: #fff; padding: 16px 20px; }
.tt-client-home-cards .card-header h3.card-title > i { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #eaf3fc; color: var(--ph-blue); font-size: 14px; }
.tt-client-home-cards .card-accent-red .card-header h3.card-title > i { background: #fff1e6; color: var(--ph-orange-dark); }
.tt-client-home-cards .card-accent-emerald .card-header h3.card-title > i { background: #e7f6ec; color: #16a34a; }
.tt-client-home-cards .card-accent-asbestos .card-header h3.card-title > i { background: #eef0f3; color: var(--ph-text-3); }
.tt-client-home-cards .card-accent-midnight-blue .card-header h3.card-title > i { background: #ede9fe; color: #6d28d9; }

/* service row */
#servicesPanel .list-group-item { border-bottom: 1px solid var(--ph-line-soft) !important; padding: 16px 22px; }
#servicesPanel .list-group-item:hover { background: #fafcff; }
.div-service-item .div-service-name .font-weight-bold { color: var(--ph-ink); font-size: 15px; font-weight: 700 !important; }
.div-service-item .div-service-name .text-domain { color: var(--ph-muted); font-size: 14px; }
.div-service-item .div-service-name a { color: inherit; }

/* tiles: one icon colour per meaning */
.tiles .col-6:nth-child(2) .tile:not(.ph-tile-attn) i { background: #e6f6f4; color: #0f766e; }
.tiles .col-6:nth-child(3) .tile:not(.ph-tile-attn) i { background: #ede9fe; color: #6d28d9; }
.tiles .tile .stat { font-size: 34px; }

/* welcome line under the dashboard title */
.tt-page-header-info > p { letter-spacing: .005em; }

/* dark */
:root[data-bs-theme="dark"] .tt-client-home-cards.client-home-cards .card-header { background: #12132b; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header h3.card-title > i { background: #181a3d; color: #60a5fa; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-accent-red .card-header h3.card-title > i { background: #3a2412; color: #fb923c; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-accent-emerald .card-header h3.card-title > i { background: #12301f; color: #4ade80; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-accent-midnight-blue .card-header h3.card-title > i { background: #2a1f4d; color: #c4b5fd; }
:root[data-bs-theme="dark"] .div-service-buttons .dropdown-menu { border-color: #23264f; background: #12132b; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
:root[data-bs-theme="dark"] .div-service-buttons .dropdown-item { color: #e8e9ff; }
:root[data-bs-theme="dark"] .div-service-buttons .dropdown-item:hover { background: #181a3d; color: #93c5fd; }
:root[data-bs-theme="dark"] .div-service-buttons .btn-group.show > .btn.dropdown-toggle { background: #181a3d !important; color: #93c5fd !important; border-color: #60a5fa !important; }
:root[data-bs-theme="dark"] #servicesPanel .list-group-item { border-bottom-color: #23264f !important; }
:root[data-bs-theme="dark"] #servicesPanel .list-group-item:hover { background: #181a3d; }
:root[data-bs-theme="dark"] .div-service-item .div-service-name .font-weight-bold { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tiles .col-6:nth-child(2) .tile:not(.ph-tile-attn) i { background: #12302d; color: #5eead4; }
:root[data-bs-theme="dark"] .tiles .col-6:nth-child(3) .tile:not(.ph-tile-attn) i { background: #2a1f4d; color: #c4b5fd; }
/* sidebar headers follow the panel headers: white with an icon chip */
.sidebar .card-sidebar .card-header { background: #fff; }
.sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #eaf3fc; font-size: 13px; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header { background: #12132b; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { background: #181a3d; color: #60a5fa; }

/* ---------- Plain tables in cards (User Management, contacts, permissions...) ---------- */
.primary-content > h3.card-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--ph-ink); }
.primary-content > h3.card-title + p { margin-bottom: 16px; color: var(--ph-text-3); }
.tt-custom-card, .card.tt-custom-card { border-color: var(--ph-line); }
.tt-custom-card:has(> table.table) { padding: 0; overflow: hidden; }
.tt-custom-card > table.table { width: 100%; margin: 0; border: 0; background: transparent; }
.tt-custom-card > table.table th, .tt-custom-card > table.table td { padding: 16px 20px; border: 0; border-top: 1px solid var(--ph-line-soft); vertical-align: middle; background: transparent; color: var(--ph-text); font-size: 15px; }
.tt-custom-card > table.table tr:first-child > th { border-top: 0; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tt-custom-card > table.table tr:nth-of-type(even) td { background: transparent; }
.tt-custom-card > table.table tr:hover td { background: #fafcff; }
.tt-custom-card > table.table td:last-child { white-space: nowrap; }
.tt-custom-card > table.table td small { display: block; margin-top: 2px; color: var(--ph-muted); font-size: 13px; }
.tt-custom-card > table.table td .btn { margin: 2px 6px 2px 0; }
.tt-custom-card > table.table td .btn-manage-permissions { border: 1.5px solid var(--ph-blue); background: #fff; color: var(--ph-blue); }
.tt-custom-card > table.table td .btn-manage-permissions:hover { background: var(--ph-blue); color: #fff; }
.tt-custom-card > table.table td .btn-remove-user, .tt-custom-card > table.table td .btn-cancel-invite { border: 1.5px solid #fca5a5; background: #fff; color: #b91c1c; }
.tt-custom-card > table.table td .btn-remove-user:hover, .tt-custom-card > table.table td .btn-cancel-invite:hover { border-color: #dc2626; background: #dc2626; color: #fff; }
.tt-custom-card > table.table td .btn.disabled { border-color: var(--ph-line) !important; background: var(--ph-tint) !important; color: #9aa4b2 !important; opacity: 1; }
.tt-custom-card > table.table .fa-shield { margin-left: 6px; font-size: 14px; }
.tt-custom-card > table.table .fa-shield.text-grey { color: #9aa4b2 !important; }
.tt-custom-card > table.table .fa-shield.text-success { color: #16a34a !important; }
.tt-custom-card > p.text-muted { padding: 14px 20px; border-top: 1px solid var(--ph-line-soft); color: var(--ph-muted) !important; font-size: 13.5px; }

/* invite form: permission choice as two selectable options */
.tt-custom-card .card-body > h3.card-title { margin-bottom: 8px; font-size: 18px; font-weight: 800; color: var(--ph-ink); }
.tt-custom-card .card-body > p { color: var(--ph-text-3); }
.tt-custom-card .form-check-inline { margin: 0 8px 8px 0; padding: 10px 14px 10px 36px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff; color: var(--ph-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.tt-custom-card .form-check-inline .form-check-input { accent-color: var(--ph-blue); }
.tt-custom-card .form-check-inline:has(input:checked) { border-color: var(--ph-blue); background: #eaf3fc; color: #1e5a96; }
.tt-custom-card .form-check-inline:focus-within { box-shadow: 0 0 0 3px rgba(30, 123, 193, .25); }
.tt-custom-card .well { padding: 16px 18px; border: 1px solid var(--ph-line); border-radius: 12px; background: var(--ph-tint); box-shadow: none; }
.tt-custom-card .well .form-check-inline { margin: 4px 0; padding: 4px 0 4px 28px; border: 0; background: transparent; font-weight: 500; }
.tt-custom-card .well .form-check-inline:has(input:checked) { background: transparent; }

@media (max-width: 575.98px) {
  .tt-custom-card > table.table td:last-child { white-space: normal; }
  .tt-custom-card > table.table th, .tt-custom-card > table.table td { padding: 14px 16px; }
}
/* dark */
:root[data-bs-theme="dark"] .primary-content > h3.card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .primary-content > h3.card-title + p, :root[data-bs-theme="dark"] .tt-custom-card .card-body > p { color: #a4a7d6; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table th, :root[data-bs-theme="dark"] .tt-custom-card > table.table td { border-top-color: #23264f; color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table tr:first-child > th { border-bottom-color: #23264f; background: #181a3d; color: #a4a7d6; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table tr:hover td { background: #181a3d; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table td small, :root[data-bs-theme="dark"] .tt-custom-card > p.text-muted { color: #a4a7d6 !important; }
:root[data-bs-theme="dark"] .tt-custom-card > p.text-muted { border-top-color: #23264f; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table td .btn-manage-permissions { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table td .btn-remove-user, :root[data-bs-theme="dark"] .tt-custom-card > table.table td .btn-cancel-invite { border-color: #7f1d1d; background: transparent; color: #fca5a5; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table td .btn.disabled { border-color: #23264f !important; background: #181a3d !important; color: #64748b !important; }
:root[data-bs-theme="dark"] .tt-custom-card .card-body > h3.card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-custom-card .form-check-inline { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-custom-card .form-check-inline:has(input:checked) { border-color: #60a5fa; background: #14263f; color: #93c5fd; }
:root[data-bs-theme="dark"] .tt-custom-card .well { border-color: #23264f; background: #181a3d; }
:root[data-bs-theme="dark"] .tt-custom-card .well .form-check-inline { background: transparent; border: 0; }
/* option pills: flex row (radio static, no absolute offset), full width on phones */
.tt-custom-card .form-check-inline { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; }
.tt-custom-card .form-check-inline .form-check-input { position: static; flex: none; width: 18px; height: 18px; margin: 0; }
.tt-custom-card .well .form-check-inline { display: inline-flex; align-items: flex-start; padding: 4px 0; }
.tt-custom-card .well .form-check-inline .form-check-input { margin-top: 3px; }
@media (max-width: 575.98px) { .tt-custom-card .form-group > .form-check-inline { display: flex; width: 100%; margin-right: 0; } }
/* permission checklist inside the well: text flows normally (a flex row squeezed title and description into columns on phones) */
.tt-custom-card .well .form-check-inline { display: block; position: relative; margin: 0; padding: 6px 0 6px 30px; }
.tt-custom-card .well .form-check-inline .form-check-input { position: absolute; left: 0; top: 8px; margin: 0; }
.tt-custom-card .well .form-check-inline .text-muted { color: var(--ph-muted) !important; }
:root[data-bs-theme="dark"] .tt-custom-card .well .form-check-inline .text-muted { color: #a4a7d6 !important; }

/* =====================================================================================================================
   Client area completion pass (work-logs 2.2, 2.3, 2.7, 3.3, 3.4, 3.5, 3.8, 3.9)
   ===================================================================================================================== */

/* ---- 2.2 one button scale inside content, sidebars and modals ---- */
.primary-content .btn, .modal .btn { border-radius: 12px; font-weight: 700; }
.primary-content .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-link), .modal .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-link) { min-height: 44px; }
.primary-content .btn-lg, .modal .btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.primary-content .btn-xs { min-height: 36px; padding: 0 12px; font-size: 13px; }
.primary-content .btn-info, .primary-content .btn-warning, .modal .btn-info, .modal .btn-warning { border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); }
.primary-content .btn-info:hover, .primary-content .btn-warning:hover, .modal .btn-info:hover, .modal .btn-warning:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); }
.primary-content .btn-block, .modal .btn-block { display: flex; align-items: center; justify-content: center; gap: 8px; }
.primary-content .btn.disabled, .primary-content .btn:disabled { opacity: .55; }

/* ---- 2.3 forms: one focus style, drawn select arrows, accent colour for checks and radios, inline errors ---- */
.form-control:focus, .custom-select:focus, .form-control:focus-visible, .custom-select:focus-visible { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; }
select.form-control:not([multiple]), select.custom-select, .primary-content select:not([multiple]):not(.input-sm) {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ph-blue); }
.has-error .form-control, .form-control.is-invalid, .was-validated .form-control:invalid { border-color: #dc2626; background-color: #fff; }
.has-error .form-control:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 1px #dc2626; }
.invalid-feedback, .help-block.error, .has-error .help-block, .field-error-msg { display: block; margin-top: 6px; color: #b91c1c; font-size: 13px; font-weight: 600; }
.form-text, .help-block, .field-help-text { color: var(--ph-muted); font-size: 13px; }
.col-form-label, .primary-content label { font-size: 14px; font-weight: 600; color: var(--ph-text-2); }
.primary-content .form-check-label, .primary-content label.form-check, .primary-content .custom-control-label { font-weight: 500; }

/* ---- 2.7 modals, dropdown menus, panels ---- */
.modal-content { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--ph-line); background: #fff; }
.modal-title { font-size: 18px; font-weight: 800; color: var(--ph-ink); }
.modal-header .close { padding: 8px; margin: -8px -8px -8px auto; border-radius: 10px; color: var(--ph-text-3); opacity: 1; text-shadow: none; }
.modal-header .close:hover { background: #f3f4f6; color: var(--ph-ink); }
.modal-body { padding: 22px; color: var(--ph-text-2); font-size: 15px; line-height: 1.6; }
.modal-footer { padding: 14px 22px 18px; border-top: 1px solid var(--ph-line-soft); background: #fff; gap: 8px; }
.dropdown-menu { padding: 6px; border: 1px solid var(--ph-line); border-radius: 14px; background: #fff; box-shadow: 0 16px 32px rgba(15, 23, 42, .12); }
.dropdown-menu .dropdown-item { border-radius: 10px; color: var(--ph-text); font-weight: 500; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: #f3f8fe; color: var(--ph-blue); }
.dropdown-menu .dropdown-divider { margin: 6px 4px; border-color: var(--ph-line-soft); }
.primary-content .card:not(.tt-custom-card):not(.view-ticket), .primary-content .panel { border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; }
.primary-content .panel-heading.card-header, .primary-content .card > .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); }
.primary-content .panel-title, .primary-content .card > .card-header .card-title { font-size: 15px; font-weight: 800; color: var(--ph-ink); }

/* ---- 3.4 domain overview and similar key/value blocks ---- */
.tt-overview .row.mb-3 { margin: 0 !important; padding: 14px 0; border-bottom: 1px solid var(--ph-line-soft); }
.tt-overview .row.mb-3:last-of-type { border-bottom: 0; }
.tt-overview h5, .primary-content .card-body .col-md-6 > h4.mb-1 { margin: 0 0 4px; color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tt-overview .row.mb-3 > div { color: var(--ph-ink); font-size: 16px; }
.primary-content .card-body .col-md-6 > h4.mb-1 + p { margin-bottom: 14px; color: var(--ph-ink); font-size: 16px; }
.tt-overview > h3.card-title { margin: 22px 0 12px; font-size: 17px; font-weight: 800; color: var(--ph-ink); }
.tt-overview > ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tt-overview > ul > li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ph-blue); border-radius: 12px; color: var(--ph-blue); font-weight: 700; text-decoration: none; }
.tt-overview > ul > li a:hover { background: var(--ph-blue); color: #fff; }
.tt-overview .ssl-state { margin-right: 6px; vertical-align: -2px; }

/* ---- 3.3 service details: renew/cancel actions, module panels ---- */
.primary-content .btn-block.btn-primary { min-height: 48px; }
.primary-content .btn-block.btn-danger { min-height: 48px; }
.primary-content .product-actions-wrapper > div:not(:last-child) { margin-bottom: 10px; }
.cpanel-package-details h4 { margin: 4px 0 2px !important; font-size: 20px; font-weight: 800; color: var(--ph-ink); }
.cpanel-package-details em { color: var(--ph-muted); font-style: normal; font-size: 14px; }
.cpanel-usage-stats strong { color: var(--ph-text-2); font-size: 14px; }
.primary-content .tab-pane > .row > [class*="col-"] > .panel { height: calc(100% - 1rem); }

/* ---- 3.5 mass payment ---- */
.primary-content h2.card-title, .primary-content > h3.card-title { margin-bottom: 6px; }
table.table.border { width: 100%; margin: 0 0 20px; border: 1px solid var(--ph-line) !important; border-collapse: separate; border-spacing: 0; border-radius: 16px; background: #fff; overflow: hidden; }
table.table.border thead th { padding: 14px 20px; border: 0; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
table.table.border td { padding: 12px 20px; border: 0; border-top: 1px solid var(--ph-line-soft); color: var(--ph-text); font-size: 15px; vertical-align: top; }
table.table.border td.bg-default { padding: 14px 20px; background: #fafcff !important; color: var(--ph-ink); font-size: 15px; }
table.table.border .masspay-invoice-detail td { font-size: 14px; color: var(--ph-text-3); }
table.table.border .masspay-invoice-detail td:last-child, table.table.border thead th:last-child { text-align: right; white-space: nowrap; }
table.table.border tr.masspay-total td { background: #fff; color: var(--ph-text-3); font-size: 15px; }
table.table.border tr.masspay-total td:first-child { text-align: right; }
table.table.border tr.masspay-total td:last-child { text-align: right; font-weight: 700; color: var(--ph-ink); white-space: nowrap; }
table.table.border tr.masspay-total:last-child td { background: #eef5fd; color: var(--ph-navy); font-size: 17px; font-weight: 800; }
table.table.border tr.masspay-total:last-child td:last-child { color: var(--ph-navy); }

/* ---- 3.8 / 3.9 content pages: announcements, knowledgebase, contact ---- */
.primary-content > h2.card-title { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--ph-ink); }
.tt-news-wrap { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; }
.tt-news-single { padding: 22px 24px !important; border-top: 1px solid var(--ph-line-soft); }
.tt-news-single:first-child { border-top: 0; }
.tt-news-single h2.h6 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.tt-news-single h2.h6 a { color: var(--ph-ink); text-decoration: none; }
.tt-news-single h2.h6 a:hover { color: var(--ph-blue); }
.tt-news-single .list-inline { margin: 0 0 10px; }
.tt-news-single .list-inline-item { color: var(--ph-muted); font-size: 13px; }
.tt-news-single article { color: var(--ph-text-2); font-size: 15px; line-height: 1.7; }
.tt-read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ph-blue); font-weight: 700; text-decoration: none; }
.tt-read-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-contact-form { max-width: 640px; }
.tt-contact-form .form-control { height: 48px; }
.tt-contact-form textarea.form-control { height: auto; min-height: 160px; padding-top: 12px; }
.kb-article-item, .kb-category a { border-radius: 12px; }
.kb-article-item { display: block; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink); font-weight: 700; text-decoration: none; }
.kb-article-item:hover { border-color: var(--ph-blue); background: #f3f8fe; text-decoration: none; }
.kb-article-item small { padding-left: 0; margin-top: 4px; color: var(--ph-muted); font-weight: 500; }
.kb-article-item p, .kb-article-item .fa-fw { color: inherit; }
.kb-search .input-group, .kb-search { margin-bottom: 20px; }
.kb-article-content, .kb-article-content p, .kb-article-content li { font-size: 16px; line-height: 1.75; color: var(--ph-text); }
.kb-article-content h2, .kb-article-content h3 { margin: 24px 0 10px; font-weight: 800; color: var(--ph-ink); }
.kb-article-content img { max-width: 100%; height: auto; border-radius: 12px; }

/* dark */
:root[data-bs-theme="dark"] .modal-content, :root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { background: #12132b; }
:root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { border-color: #23264f; }
:root[data-bs-theme="dark"] .modal-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .modal-body { color: #c9cbf0; }
:root[data-bs-theme="dark"] .modal-header .close { color: #c9cbf0; }
:root[data-bs-theme="dark"] .dropdown-menu { border-color: #23264f; background: #12132b; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item { color: #e8e9ff; }
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { background: #181a3d; color: #93c5fd; }
:root[data-bs-theme="dark"] .primary-content .card:not(.tt-custom-card):not(.view-ticket), :root[data-bs-theme="dark"] .primary-content .panel { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .primary-content .panel-heading.card-header, :root[data-bs-theme="dark"] .primary-content .card > .card-header { border-bottom-color: #23264f; background: #181a3d; }
:root[data-bs-theme="dark"] .primary-content .panel-title, :root[data-bs-theme="dark"] .primary-content .card > .card-header .card-title, :root[data-bs-theme="dark"] .cpanel-package-details h4 { color: #e8e9ff; }
:root[data-bs-theme="dark"] select.form-control:not([multiple]), :root[data-bs-theme="dark"] select.custom-select { background-color: #0b0c1f; }
:root[data-bs-theme="dark"] .col-form-label, :root[data-bs-theme="dark"] .primary-content label { color: #c9cbf0; }
:root[data-bs-theme="dark"] .tt-overview .row.mb-3 { border-bottom-color: #23264f; }
:root[data-bs-theme="dark"] .tt-overview .row.mb-3 > div, :root[data-bs-theme="dark"] .primary-content .card-body .col-md-6 > h4.mb-1 + p, :root[data-bs-theme="dark"] .tt-overview > h3.card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-overview > ul > li a { border-color: #60a5fa; color: #93c5fd; }
:root[data-bs-theme="dark"] .tt-overview > ul > li a:hover { background: #60a5fa; color: #0b0c1f; }
:root[data-bs-theme="dark"] table.table.border { border-color: #23264f !important; background: #12132b; }
:root[data-bs-theme="dark"] table.table.border thead th { border-bottom-color: #23264f; background: #181a3d; color: #a4a7d6; }
:root[data-bs-theme="dark"] table.table.border td { border-top-color: #23264f; color: #e8e9ff; }
:root[data-bs-theme="dark"] table.table.border td.bg-default { background: #181a3d !important; color: #e8e9ff; }
:root[data-bs-theme="dark"] table.table.border tr.masspay-total td { background: #12132b; color: #c9cbf0; }
:root[data-bs-theme="dark"] table.table.border tr.masspay-total:last-child td { background: #14263f; color: #bfdbfe; }
:root[data-bs-theme="dark"] .tt-news-wrap { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .tt-news-single { border-top-color: #23264f; }
:root[data-bs-theme="dark"] .tt-news-single h2.h6 a, :root[data-bs-theme="dark"] .primary-content > h2.card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .tt-news-single article, :root[data-bs-theme="dark"] .kb-article-content, :root[data-bs-theme="dark"] .kb-article-content p { color: #c9cbf0; }
:root[data-bs-theme="dark"] .kb-article-item { border-color: #23264f; background: #12132b; color: #e8e9ff; }
:root[data-bs-theme="dark"] .kb-article-item:hover { border-color: #60a5fa; background: #181a3d; }

/* contact page: the form is a card, less empty space above, captcha and button separated */
.tt-contact-form.ptb-60 { padding-top: 8px !important; padding-bottom: 8px !important; }
.tt-contact-form { padding: 28px; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; }
.tt-contact-form form > .margin-bottom { margin-bottom: 20px !important; }
.tt-contact-form #default-captcha-domainchecker, .tt-contact-form .default-captcha { margin-bottom: 4px; }
.tt-contact-form .btn-primary { margin-top: 4px; }
:root[data-bs-theme="dark"] .tt-contact-form { border-color: #23264f; background: #12132b; }
/* service details (cPanel module output) in dark mode */
:root[data-bs-theme="dark"] .cpanel-usage-stats strong, :root[data-bs-theme="dark"] #cPanelQuickEmailPanel label { color: #c9cbf0; }
:root[data-bs-theme="dark"] .cpanel-usage-stats .usage-dial { color: #e8e9ff !important; }
:root[data-bs-theme="dark"] .primary-content .input-group-text, :root[data-bs-theme="dark"] .primary-content .input-group-addon, :root[data-bs-theme="dark"] .primary-content .input-group-append > .input-group-text { border-color: #3b3f73; background: #181a3d; color: #c9cbf0; }
:root[data-bs-theme="dark"] .primary-content .input-group > .form-control { background: #0b0c1f; color: #e8e9ff; border-color: #3b3f73; }

/* Cancellation request form: buttons on the right (Cancel, then the red action last), label above the select */
form.form-stacked fieldset > .text-left { display: flex; flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--ph-line-soft); text-align: right !important; }
form.form-stacked fieldset > .text-left .btn { margin: 0 !important; }
form.form-stacked .form-group:has(select#type) > .col-form-label { display: block; margin-bottom: 6px; }
form.form-stacked .form-group:has(select#type) .d-inline-block { display: block !important; max-width: 320px; }
form.form-stacked textarea.fullwidth { min-height: 140px; }
@media (max-width: 575.98px) { form.form-stacked fieldset > .text-left { flex-direction: column-reverse; } form.form-stacked fieldset > .text-left .btn { width: 100%; } }
:root[data-bs-theme="dark"] form.form-stacked fieldset > .text-left { border-top-color: #23264f; }

/* ---------- Mass payment page ---------- */
form[action="clientarea.php?action=masspay"] .tt-custom-card.border-0 { border: 0 !important; background: transparent; box-shadow: none; overflow: visible; }
form[action="clientarea.php?action=masspay"] .card-body.p-0 > h3.card-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--ph-ink); }
form[action="clientarea.php?action=masspay"] .card-body.p-0 > p.text-muted { max-width: 720px; margin: 0 0 18px; color: var(--ph-text-3) !important; font-size: 15px; line-height: 1.6; }
form[action="clientarea.php?action=masspay"] table.table.border { margin-bottom: 24px; }
form[action="clientarea.php?action=masspay"] table.table.border td:first-child, form[action="clientarea.php?action=masspay"] table.table.border th:first-child { padding-left: 24px; }
form[action="clientarea.php?action=masspay"] table.table.border td:last-child, form[action="clientarea.php?action=masspay"] table.table.border th:last-child { padding-right: 24px; }
/* gateway card: tidy padding, field and button the same width, button at the right */
form[action="clientarea.php?action=masspay"] .card.bg-default { border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; }
form[action="clientarea.php?action=masspay"] .card.bg-default .card-body { padding: 22px 24px; }
form[action="clientarea.php?action=masspay"] fieldset > .col-md-12 { padding: 0; }
form[action="clientarea.php?action=masspay"] #paymentmethod { max-width: 420px; }
form[action="clientarea.php?action=masspay"] label.col-form-label + br { display: none; }
form[action="clientarea.php?action=masspay"] label.col-form-label { display: block; margin-bottom: 6px; padding: 0; }
form[action="clientarea.php?action=masspay"] #btnMassPayMakePayment { display: inline-flex; width: auto; min-width: 200px; min-height: 52px; padding: 0 32px; font-size: 16px; }
form[action="clientarea.php?action=masspay"] fieldset .form-group:last-child { display: flex; justify-content: flex-end; margin: 0; padding-top: 18px; border-top: 1px solid var(--ph-line-soft); }
@media (max-width: 575.98px) {
  form[action="clientarea.php?action=masspay"] #btnMassPayMakePayment { width: 100%; }
  form[action="clientarea.php?action=masspay"] table.table.border td:first-child, form[action="clientarea.php?action=masspay"] table.table.border th:first-child { padding-left: 16px; }
  form[action="clientarea.php?action=masspay"] table.table.border td:last-child, form[action="clientarea.php?action=masspay"] table.table.border th:last-child { padding-right: 16px; }
}
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card-body.p-0 > h3.card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card-body.p-0 > p.text-muted { color: #a4a7d6 !important; }
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card.bg-default { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] fieldset .form-group:last-child { border-top-color: #23264f; }
/* contact page, second pass: the .ptb-60 utility zeroed the card's side padding, so fields touched the border */
.tt-contact-form.ptb-60 { padding: 28px !important; }
.tt-contact-form .form-group.row { margin-left: -8px; margin-right: -8px; }
.tt-contact-form .form-group.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.tt-contact-form label { display: block; margin-bottom: 6px; }
.tt-contact-form form > .margin-bottom { margin: 4px 0 24px !important; }
.tt-contact-form .btn-primary { min-width: 160px; }
.tt-contact-info { display: flex; align-items: center; justify-content: center; }
.tt-contact-info img { max-height: 520px; width: auto; max-width: 100%; }
@media (max-width: 991.98px) { .tt-contact-info { display: none; } .tt-contact-form { max-width: none; } }

/* Ticket form: captcha block sized like the other fields, buttons on the right (Cancel, then Submit last) */
.tt-submit-btns { display: flex; flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ph-line-soft); }
.tt-submit-btns .btn { margin: 0 !important; min-width: 130px; }
.tt-submit-btns #openTicketSubmit { min-width: 160px; }
.primary-content #default-captcha-domainchecker { gap: 12px 16px; margin-bottom: 20px !important; }
.primary-content #default-captcha-domainchecker > p { font-size: 14px; }
.primary-content #default-captcha-domainchecker img { height: 52px; width: auto; border-radius: 10px; }
.primary-content #default-captcha-domainchecker .form-control { width: 190px; height: 52px; font-size: 22px; letter-spacing: .3em; text-align: center; }
@media (max-width: 575.98px) { .tt-submit-btns { flex-direction: column-reverse; } .tt-submit-btns .btn { width: 100%; } .primary-content #default-captcha-domainchecker .form-control { flex: 1 1 140px; width: auto; } }
:root[data-bs-theme="dark"] .tt-submit-btns { border-top-color: #23264f; }
/* kohost captcha include (tt-captcha.tpl): label above, image + code field in one 52px row */
.tt-captcha-info #default-captcha-domainchecker { display: block !important; padding: 0 0 4px !important; }
.tt-captcha-info #default-captcha-domainchecker > p { margin: 0 0 12px; color: var(--ph-text-3); font-size: 14px; }
.tt-captcha-info .d-flex { gap: 12px; align-items: center; }
.tt-captcha-info #inputCaptchaImage { float: none; height: 52px; width: auto; border-radius: 10px; }
.tt-captcha-info #inputCaptcha { width: 190px; max-width: 100%; height: 52px; margin: 0 !important; padding: 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; font-size: 22px; font-weight: 700; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.tt-submit-btns .btn { min-height: 48px; }
@media (max-width: 575.98px) { .tt-captcha-info .d-flex { flex-wrap: wrap; } .tt-captcha-info #inputCaptcha { flex: 1 1 140px; width: auto; } }
:root[data-bs-theme="dark"] .tt-captcha-info #default-captcha-domainchecker > p { color: #c9cbf0; }
:root[data-bs-theme="dark"] .tt-captcha-info #inputCaptcha { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; }
/* beat Kohost's `#inputCaptcha.form-control` and theme.css `#default-captcha-domainchecker #inputCaptcha` width/height */
#default-captcha-domainchecker #inputCaptcha.form-control, .tt-captcha-info #default-captcha-domainchecker #inputCaptcha.form-control { width: 190px; max-width: 100%; height: 52px; }
@media (max-width: 575.98px) { #default-captcha-domainchecker #inputCaptcha.form-control, .tt-captcha-info #default-captcha-domainchecker #inputCaptcha.form-control { width: auto; flex: 1 1 140px; } }
.tt-submit-btns .btn.btn-primary, .tt-submit-btns .btn.btn-default { min-height: 48px; height: 48px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
/* keep the homepage hero captcha at its own size (150 x 44) */

/* ---------- Knowledgebase article ---------- */
.primary-content .btn-sm, .primary-content .btn-xs { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; }
.primary-content .card > .card-body > h2.h5 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 8px; color: var(--ph-ink); font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.primary-content .card > .card-body > h2.h5 > a.btn { order: 2; flex: none; float: none !important; margin-top: 2px; border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text-2); font-size: 14px; font-weight: 700; }
.primary-content .card > .card-body > h2.h5 > a.btn:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); }
.primary-content .card > .card-body > h2.h5 > a.btn i { color: var(--ph-muted); font-size: 14px; }
.primary-content .card > .card-body > ul.list-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 4px; padding: 0; }
.primary-content .card > .card-body > ul.list-inline .list-inline-item { margin: 0; padding: 0 !important; color: var(--ph-muted); font-size: 14px; }
.primary-content .card > .card-body > ul.list-inline .list-inline-item i { margin-right: 6px !important; color: #16a34a; }
.primary-content .card > .card-body > hr { margin: 18px 0; border-top: 1px solid var(--ph-line-soft); }
.primary-content .card > .card-body > article { max-width: 760px; color: var(--ph-text); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.primary-content .card > .card-body > article p { margin: 0 0 16px; }
.primary-content .card > .card-body > article ul, .primary-content .card > .card-body > article ol { margin: 0 0 18px; padding-left: 24px; }
.primary-content .card > .card-body > article li { margin-bottom: 6px; padding-left: 4px; }
.primary-content .card > .card-body > article li::marker { color: var(--ph-blue); }
.primary-content .card > .card-body > article h2, .primary-content .card > .card-body > article h3, .primary-content .card > .card-body > article h4 { margin: 26px 0 10px; color: var(--ph-ink); font-weight: 800; line-height: 1.3; }
.primary-content .card > .card-body > article a { color: var(--ph-blue); text-decoration: underline; text-underline-offset: 3px; }
.primary-content .card > .card-body > article img { max-width: 100%; height: auto; border-radius: 12px; }
.primary-content .card > .card-body > article pre, .primary-content .card > .card-body > article code { border-radius: 8px; background: #f3f4f6; font-size: .92em; }
.primary-content .card > .card-body > article pre { padding: 14px 16px; overflow-x: auto; }
.primary-content .card > .card-body > article code { padding: 2px 6px; }
.primary-content .card > .card-body > article table { width: 100%; margin-bottom: 18px; border-collapse: collapse; }
.primary-content .card > .card-body > article table th, .primary-content .card > .card-body > article table td { padding: 10px 12px; border: 1px solid var(--ph-line); }

/* was this helpful */
.primary-content .card > .card-body > h5 { margin: 0 0 12px; color: var(--ph-ink); font-size: 17px; font-weight: 800; }
.primary-content .card > .card-body form.d-flex > div { display: flex; gap: 10px; }
.primary-content .card > .card-body form.d-flex .btn { min-height: 44px; padding: 0 22px; border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); font-size: 15px; font-weight: 700; }
.primary-content .card > .card-body form.d-flex .btn.bg-success-light:hover, .primary-content .card > .card-body form.d-flex .btn.bg-success-light:focus-visible { border-color: #16a34a; background: #e7f6ec; color: #166534; }
.primary-content .card > .card-body form.d-flex .btn.bg-danger-light:hover, .primary-content .card > .card-body form.d-flex .btn.bg-danger-light:focus-visible { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.primary-content .card > .card-body form.d-flex .btn.bg-success-light i { color: #16a34a; }
.primary-content .card > .card-body form.d-flex .btn.bg-danger-light i { color: #dc2626; }

/* related articles + back / edit */
.primary-content .card > .card-body > h3.card-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--ph-ink); }
.primary-content > a.btn.btn-default.btn-sm { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); font-weight: 700; }
.primary-content > a.btn.btn-default.btn-sm:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); }
.primary-content > a.btn.btn-default.btn-sm.float-right { float: none !important; }
.primary-content > a.btn.btn-default.btn-sm + a.btn.btn-default.btn-sm { margin-left: 10px; }
@media (max-width: 575.98px) { .primary-content .card > .card-body > h2.h5 { flex-direction: column; font-size: 22px; } .primary-content .card > .card-body form.d-flex > div { width: 100%; } .primary-content .card > .card-body form.d-flex .btn { flex: 1; } }

/* dark */
:root[data-bs-theme="dark"] .primary-content .card > .card-body > h2.h5, :root[data-bs-theme="dark"] .primary-content .card > .card-body > h5, :root[data-bs-theme="dark"] .primary-content .card > .card-body > h3.card-title { color: #e8e9ff; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > h2.h5 > a.btn, :root[data-bs-theme="dark"] .primary-content .card > .card-body form.d-flex .btn, :root[data-bs-theme="dark"] .primary-content > a.btn.btn-default.btn-sm { border-color: #3b3f73; background: transparent; color: #e8e9ff; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > h2.h5 > a.btn:hover, :root[data-bs-theme="dark"] .primary-content > a.btn.btn-default.btn-sm:hover { border-color: #60a5fa; background: #181a3d; color: #93c5fd; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > hr { border-top-color: #23264f; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > article, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article h2, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article h3 { color: #e8e9ff; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > article a { color: #93c5fd; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > article pre, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article code { background: #181a3d; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > article table th, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article table td { border-color: #23264f; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body form.d-flex .btn.bg-success-light:hover { background: #12301f; color: #86efac; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body form.d-flex .btn.bg-danger-light:hover { background: #3b1414; color: #fca5a5; }
/* mobile copy of a sidebar panel (select box) looks like the other panels */
.card.d-block.d-md-none { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff !important; box-shadow: none; }
.card.d-block.d-md-none > .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: #fff; }
.card.d-block.d-md-none > .card-header .card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: var(--ph-ink); }
:root[data-bs-theme="dark"] .card.d-block.d-md-none { border-color: #23264f; background: #12132b !important; }
:root[data-bs-theme="dark"] .card.d-block.d-md-none > .card-header { border-bottom-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .card.d-block.d-md-none > .card-header .card-title { color: #e8e9ff; }

/* ---------- Native (logged-in) header menu: same look as the marketing mega menu ---------- */
@media (min-width: 1200px) {
  .tt-header .main-navbar-wrapper #nav > li > a, .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown > a {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px !important; border-radius: 12px; background: transparent;
    color: var(--ph-text-2); font: 600 16px/24px var(--font-family-sans-serif); white-space: nowrap; transition: color .2s ease, background-color .2s ease;
  }
  .tt-header .main-navbar-wrapper #nav > li > a:hover, .tt-header .main-navbar-wrapper #nav > li.show > a,
  .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown > a:hover, .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown.show > a { color: var(--ph-orange); background: #f9fafb; }
  .tt-header .main-navbar-wrapper #nav > li > a.dropdown-toggle::after, .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown > a.dropdown-toggle::after { margin: 0; transition: transform .3s ease; }
  .tt-header .main-navbar-wrapper #nav > li.show > a.dropdown-toggle::after, .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown.show > a.dropdown-toggle::after { transform: rotate(180deg); }
  .tt-header .main-navbar-wrapper #nav > li, .tt-header .tt-toolbar-wrap .tt-secondary-list > li { position: relative; }
  /* panel: marketing look (white, orange bottom edge, rounded bottom, deep shadow, fade + scale entrance), anchored under its item */
  .tt-header .main-navbar-wrapper #nav .dropdown-menu, .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu {
    top: calc(100% + 16px); min-width: 240px; margin: 0; padding: 10px;
    border: 1px solid #e9e2dc; border-top: 1px solid #e9e2dc; border-bottom: 3px solid #2563eb; border-radius: 0 0 12px 12px; background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); transform-origin: top center;
  }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu.show, .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu.show { animation: phMegaIn .18s ease-out; }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu::before, .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }
  .tt-header #nav .dropdown-menu li.dropdown-item, .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item { display: block; padding: 0; border-radius: 10px; background: transparent; }
  .tt-header #nav .dropdown-menu li.dropdown-item > a, .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a {
    display: flex !important; align-items: center; min-height: 44px; padding: 0 14px !important; border-radius: 10px; color: var(--ph-text-2); font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .2s ease, background-color .2s ease;
  }
  .tt-header #nav .dropdown-menu li.dropdown-item > a:hover, .tt-header #nav .dropdown-menu li.dropdown-item > a:focus-visible,
  .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:hover, .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:focus-visible { color: var(--ph-orange); background: #f9fafb; text-decoration: none; }
  .tt-header .dropdown-menu .dropdown-divider { margin: 6px 8px; border-top: 1px solid var(--ph-line-soft); }
  .tt-header .dropdown-menu .dropdown-divider + li { margin-top: 0; }
  :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav .dropdown-menu, :root[data-bs-theme="dark"] .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu { background: #12132b; border-color: rgba(255, 255, 255, .1); border-bottom-color: #2563eb; }
  :root[data-bs-theme="dark"] .tt-header #nav .dropdown-menu li.dropdown-item > a, :root[data-bs-theme="dark"] .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a { color: #e8e9ff; }
  :root[data-bs-theme="dark"] .tt-header #nav .dropdown-menu li.dropdown-item > a:hover, :root[data-bs-theme="dark"] .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:hover { color: #fdba74; background: #181a3d; }
  :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li > a:hover, :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li.show > a, :root[data-bs-theme="dark"] .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown > a:hover { background: #181a3d; color: #fdba74; }
  :root[data-bs-theme="dark"] .tt-header .dropdown-menu .dropdown-divider { border-top-color: rgba(255, 255, 255, .1); }
}
@media (prefers-reduced-motion: reduce) { .tt-header .dropdown-menu.show { animation: none !important; } }
@keyframes phNavIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }
@media (min-width: 1200px) {
  /* primary menu panels centre under their item; the account menu stays right-aligned */
  .tt-header .main-navbar-wrapper #nav .dropdown-menu { left: 50%; right: auto; transform: translateX(-50%); }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu.show { animation-name: phNavIn; }
  .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu { left: auto; right: 0; }
}
@media (min-width: 1200px) {
  :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav .dropdown-menu, :root[data-bs-theme="dark"] .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu { border-bottom: 3px solid #2563eb !important; }
  :root[data-bs-theme="dark"] .tt-header #nav .dropdown-menu li.dropdown-item > a, :root[data-bs-theme="dark"] .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a { color: #e8e9ff !important; }
  :root[data-bs-theme="dark"] .tt-header #nav .dropdown-menu li.dropdown-item > a:hover, :root[data-bs-theme="dark"] .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:hover { color: #fdba74 !important; }
}

/* WHMCS's autoCollapse() moves menu items into "More" whenever #nav is 30px or taller; the 48px-high button items made it collapse always.
   Keep the items 24px high and draw the 48px hover pill with a pseudo-element instead. */
@media (min-width: 1200px) {
  .tt-header .main-navbar-wrapper #nav > li > a { position: relative; padding: 0 16px !important; background: transparent !important; z-index: 0; }
  .tt-header .main-navbar-wrapper #nav > li > a::before { content: ""; position: absolute; inset: -12px 0; z-index: -1; border-radius: 12px; background: transparent; transition: background-color .2s ease; }
  .tt-header .main-navbar-wrapper #nav > li > a:hover::before, .tt-header .main-navbar-wrapper #nav > li.show > a::before { background: #f9fafb; }
  :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li > a:hover::before, :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li.show > a::before { background: #181a3d; }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu { top: calc(100% + 28px); }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu::before { top: -29px; height: 29px; inset-inline: 0; }
}

/* Tooltips (Bootstrap z-index 1070) painted over the sticky header ("Please enter your domain" on top of the menu). Put them just under the
   header (1030) while no modal is open; inside a modal they keep the normal level. The header is also a touch more opaque so scrolled
   content is not legible through it. */
body:not(.modal-open) .tooltip { z-index: 1029; }
.tt-header, .tt-header:not(.tt-double-header) { background: rgba(250, 247, 246, 0.98); }
:root[data-bs-theme="dark"] .tt-header, :root[data-bs-theme="dark"] .tt-header:not(.tt-double-header) { background: rgba(15, 23, 42, 0.98); }

/* ---------- Homepage hero, bento layout (search bar + message card + tall domain promo), replaces the centred hero block ---------- */

/* hero captcha (shown to visitors when WHMCS asks for it): one slim line under the search bar instead of a centred card */

/* ---------- Hero, glass pass: minimal, translucent cards over a soft brand backdrop, no heavy dark blocks, no duplicated artwork ---------- */

/* promo: translucent gradient glass with floating extension chips */

/* the three cards: light glass with a coloured top accent instead of solid dark blocks */

/* dark: the illustration's speech bubble is transparent, so it sits on a light glass plate */

/* ---------- Hero, minimal: the search sits in the first card; no floating chips, no second CTA ---------- */

/* search spans the full card width; the illustration sits top-right behind the copy column */

/* "More" with nothing inside it is never shown (autoCollapse un-hides it before measuring and sometimes leaves it visible and empty) */
#nav .collapsable-dropdown:not(:has(.collapsable-dropdown-menu > li)) { display: none !important; }

/* ---------- Services / domains lists: lock column, product + domain stack, Manage action ---------- */
#tableServicesList td:first-child, #tableDomainsList td:nth-child(2) { width: 44px; padding-left: 20px; padding-right: 4px; }
#tableServicesList td.ssl-info img, #tableDomainsList td.ssl-info img { width: 20px; height: auto; opacity: .9; }
#tableServicesList td:nth-child(2) { display: table-cell; line-height: 1.45; }
#tableServicesList td:nth-child(2) > strong { display: block; color: var(--ph-ink); font-size: 16px; font-weight: 700; }
#tableServicesList td:nth-child(2) > br { display: none; }
#tableServicesList td:nth-child(2) > a { display: inline-block; margin-top: 2px; color: var(--ph-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
#tableServicesList td:nth-child(2) > a:hover { color: var(--ph-blue); text-decoration: underline; text-underline-offset: 3px; }
.ph-row-action { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-left: 12px; padding: 0 16px; border: 1.5px solid var(--ph-blue); border-radius: 999px; color: var(--ph-blue); font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.ph-row-action:hover, .ph-row-action:focus-visible { background: var(--ph-blue); color: #fff; }
.dataTables_wrapper table.table-list td:last-child { white-space: nowrap; }
@media (max-width: 575.98px) {
  .dataTables_wrapper table.table-list tbody td:last-child .ph-row-action { flex: 1 0 100%; margin: 8px 0 0; }
  .dataTables_wrapper table.table-list tbody td:last-child { flex-wrap: wrap; }
  #tableServicesList td:first-child { width: auto; padding: 0; }
}
:root[data-bs-theme="dark"] .ph-row-action { border-color: #60a5fa; color: #93c5fd; }
:root[data-bs-theme="dark"] .ph-row-action:hover { background: #60a5fa; color: #0b0c1f; }
:root[data-bs-theme="dark"] #tableServicesList td:nth-child(2) > strong { color: #e8e9ff; }
@media (max-width: 575.98px) {
  #tableServicesList tbody tr { position: relative; }
  #tableServicesList tbody td:first-child { position: absolute; top: 14px; right: 14px; z-index: 1; display: block; width: auto; padding: 0; border: 0; background: transparent; }
  #tableServicesList tbody td:first-child::before { content: none; }
  #tableServicesList tbody td:nth-child(2) { display: block; padding: 16px 52px 12px 16px; text-align: left !important; }
  #tableServicesList tbody td:nth-child(2)::before { content: none; }
  #tableServicesList tbody td:nth-child(2) > strong { font-size: 18px; }
}

/* quote page (viewquote.tpl) shares the invoice look: .invoice-container rules above; its cards and accept button */
.invoice-container .card-header.bg-warning, .invoice-container .card-header.bg-info, .invoice-container .card-header.bg-success { padding: 12px 22px; border: 0; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint) !important; color: var(--ph-ink) !important; }
.invoice-container .card-header h3, .invoice-container .card-header .card-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ph-ink); }
.invoice-container .card-body { padding: 18px 22px; color: var(--ph-text); font-size: 15px; line-height: 1.7; }
.invoice-container .payment-btn-container .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 260px; min-height: 48px; border: 0; border-radius: 12px; background: var(--ph-blue); color: #fff; font-weight: 700; }
.invoice-container .payment-btn-container .btn-success:hover { background: var(--ph-blue-dark); }
.invoice-container .btn-group .btn { margin-top: 0; }
/* includes/panel.tpl (notes, proposal, errors on invoice/quote/KB pages): quiet tinted headers by meaning instead of solid yellow/teal bars */
.invoice-container .card > .card-title[class*="bg-"] { margin: 0; padding: 12px 22px !important; border-bottom: 1px solid var(--ph-line); border-radius: 0; font-size: 15px; font-weight: 800 !important; }
.invoice-container .card > .card-title.bg-warning { background: #fff7ed !important; color: #9a3412 !important; }
.invoice-container .card > .card-title.bg-info { background: #eef5fd !important; color: #1e5a96 !important; }
.invoice-container .card > .card-title.bg-danger { background: #fef2f2 !important; color: #991b1b !important; }
.invoice-container .card > .card-title.bg-success { background: #e7f6ec !important; color: #166534 !important; }
.invoice-container .card > .card-text { margin: 0 !important; padding: 16px 22px; color: var(--ph-text); font-size: 15px; line-height: 1.7; }
.invoice-container .row.w-100 > .card { overflow: hidden; }

/* ---------- Add funds ---------- */
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped { margin: 0; width: 100%; }
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped td { padding: 14px 22px; border: 0; border-top: 1px solid var(--ph-line-soft); background: transparent !important; color: var(--ph-text); font-size: 15px; }
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped tr:first-child td { border-top: 0; }
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped td.textright { color: var(--ph-muted); text-align: left !important; }
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped td.textright strong { font-weight: 600; }
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped td:last-child { color: var(--ph-ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.primary-content .col-md-8.offset-md-2 > .card { margin-bottom: 20px; }
form[action*="action=addfunds"] label.col-form-label + br { display: none; }
form[action*="action=addfunds"] input#amount { height: 52px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
form[action*="action=addfunds"] .btn-block { width: auto; min-width: 200px; margin-left: auto; display: flex; padding: 0 32px; }
form[action*="action=addfunds"] fieldset { display: flex; flex-direction: column; }
.primary-content .col-md-8.offset-md-2 > .card > .card-footer { padding: 14px 22px; border-top: 1px solid var(--ph-line-soft); background: var(--ph-tint); color: var(--ph-muted); }
:root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > table.table-striped td { border-top-color: #23264f; color: #e8e9ff; }
:root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > table.table-striped td:last-child { color: #e8e9ff; }
:root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > .card-footer { border-top-color: #23264f; background: #181a3d; color: #a4a7d6; }
.primary-content .col-md-8.offset-md-2 > .card > table.table-striped tbody tr, .primary-content .col-md-8.offset-md-2 > .card > table.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }

/* ---------- Affiliates ---------- */
.affiliate-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 120px; padding: 20px 22px; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff !important; color: var(--ph-text); }
.affiliate-stat i { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 12px; background: #eaf3fc; color: var(--ph-blue); font-size: 20px; }
.col-md-4:nth-child(1) > .affiliate-stat i { background: #fff1e6; color: #ea580c; }
.col-md-4:nth-child(3) > .affiliate-stat i { background: #e7f6ec; color: #16a34a; }
.affiliate-stat span { margin-top: 10px; color: var(--ph-ink); font-size: 32px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.affiliate-stat small { color: var(--ph-muted); font-size: 14px; font-weight: 600; }
.card.my-3 .card-body h5.h6 { margin: 0 0 10px; color: var(--ph-ink); font-size: 16px; font-weight: 800; }
.card.my-3 .card-body input.form-control[readonly] { height: 48px; border-color: var(--ph-line); background: var(--ph-tint); color: var(--ph-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.ph-copy-ref { margin-top: 10px; min-height: 40px; padding: 0 18px; border: 1.5px solid var(--ph-blue); border-radius: 12px; background: #fff; color: var(--ph-blue); font-size: 14px; font-weight: 700; cursor: pointer; }
.ph-copy-ref:hover, .ph-copy-ref:focus-visible { background: var(--ph-blue); color: #fff; }
table.table-rounded { width: 100%; margin: 0 0 18px; border: 1px solid var(--ph-line) !important; border-collapse: separate; border-spacing: 0; border-radius: 16px; background: #fff; overflow: hidden; }
table.table-rounded td { padding: 14px 22px; border: 0 !important; border-top: 1px solid var(--ph-line-soft) !important; background: transparent !important; color: var(--ph-text); font-size: 15px; }
table.table-rounded tr:first-child td { border-top: 0 !important; }
table.table-rounded td.text-right { color: var(--ph-muted); text-align: left !important; width: 60%; }
table.table-rounded td strong { color: var(--ph-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.btn[disabled].btn-default, .btn.disabled.btn-default { border-color: var(--ph-line); background: var(--ph-tint) !important; color: #9aa4b2 !important; opacity: 1; }
:root[data-bs-theme="dark"] .affiliate-stat, :root[data-bs-theme="dark"] table.table-rounded { border-color: #23264f; background: #12132b !important; }
:root[data-bs-theme="dark"] .affiliate-stat span { color: #e8e9ff; }
:root[data-bs-theme="dark"] .affiliate-stat i { background: #181a3d; }
:root[data-bs-theme="dark"] .card.my-3 .card-body input.form-control[readonly] { border-color: #2f3260; background: #0b0c1f; color: #c9cbf0; }
:root[data-bs-theme="dark"] .ph-copy-ref { border-color: #60a5fa; background: transparent; color: #93c5fd; }
:root[data-bs-theme="dark"] table.table-rounded td { border-top-color: #23264f !important; color: #e8e9ff; }
:root[data-bs-theme="dark"] table.table-rounded td strong { color: #e8e9ff; }

/* ---------- Error pages (404): calmer, brand colours, useful links ---------- */
.ph-error { max-width: 640px; margin: 0 auto; padding: 56px 16px 64px !important; }
.ph-error .display-1 { font-size: 64px; line-height: 1; color: var(--ph-blue) !important; }
.ph-error h1.display-1 { margin: 12px 0 20px !important; font-size: 44px; font-weight: 800 !important; letter-spacing: -.02em; color: var(--ph-ink) !important; }
.ph-error h3 { margin: 0 0 6px; color: var(--ph-ink); font-size: 22px; font-weight: 700; }
.ph-error p { margin: 0 0 22px; color: var(--ph-muted); font-size: 16px; }
.ph-error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 26px; padding: 0; }
.ph-error-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ph-line); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ph-text-2); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.ph-error-links a:hover { border-color: var(--ph-blue); color: var(--ph-blue); }
.ph-error .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ph-error .buttons .btn { min-height: 48px; margin: 0; padding: 0 26px !important; border-radius: 12px; font-weight: 700; }
.ph-error .buttons .btn-info { border: 1.5px solid #cbd5e1; background: #fff; color: var(--ph-text); }
.ph-error .buttons .btn-info:hover { border-color: var(--ph-blue); color: var(--ph-blue); }
:root[data-bs-theme="dark"] .ph-error h1.display-1, :root[data-bs-theme="dark"] .ph-error h3 { color: #e8e9ff !important; }
:root[data-bs-theme="dark"] .ph-error-links a { border-color: #2f3260; background: rgba(30, 41, 59, .7); color: #e8e9ff; }
:root[data-bs-theme="dark"] .ph-error .buttons .btn-info { border-color: #3b3f73; background: transparent; color: #e8e9ff; }
@media (max-width: 575.98px) { .ph-error h1.display-1 { font-size: 34px; } .ph-error .buttons .btn { flex: 1 1 100%; } }
.ph-error .buttons .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
/* access denied (sub-account without permission) and banned pages */
.text-center > .card.py-3 { max-width: 640px; margin: 24px auto; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; }
.text-center > .card.py-3 h1 { margin: 0 0 8px; color: var(--ph-ink); font-size: 32px; font-weight: 800; }
.text-center > .card.py-3 .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.text-center > .card.py-3 .buttons .btn { min-height: 48px; margin: 0; padding: 0 24px; border-radius: 12px; }
:root[data-bs-theme="dark"] .text-center > .card.py-3 { border-color: #23264f; background: #12132b; }
:root[data-bs-theme="dark"] .text-center > .card.py-3 h1 { color: #e8e9ff; }

/* ---------- Font Awesome subsets (tools/fa-subset.py, work-logs 4.1): ~10 KB per weight instead of 120-160 KB. The full fonts from assets/css/fontawesome-all.min.css stay as the fallback for any glyph outside the subset. ---------- */
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:300;font-display:swap;src:url("../prabhu/fonts/fa/fa-light-300.subset.woff2") format("woff2");unicode-range:U+F002,U+F005,U+F007,U+F009,U+F00A,U+F00B,U+F00C,U+F00D,U+F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F022,U+F023,U+F024,U+F02A,U+F02B,U+F02C,U+F02D,U+F02E,U+F02F,U+F03A,U+F040,U+F044,U+F053,U+F054,U+F056,U+F057,U+F058,U+F059,U+F05A,U+F05E,U+F060,U+F061,U+F062,U+F063,U+F064,U+F067,U+F068,U+F069,U+F06A,U+F06B,U+F06E,U+F070,U+F071,U+F073,U+F074,U+F075,U+F077,U+F078,U+F07A,U+F07B,U+F07C,U+F080,U+F084,U+F085,U+F086,U+F089,U+F08B,U+F08E,U+F090,U+F091,U+F093,U+F095,U+F09A,U+F09C,U+F09D,U+F0A0,U+F0A1,U+F0A3,U+F0A8,U+F0A9,U+F0AA,U+F0AC,U+F0AD,U+F0B1,U+F0C0,U+F0C1,U+F0C2,U+F0C5,U+F0C6,U+F0C7,U+F0C8,U+F0C9,U+F0D6,U+F0D7,U+F0D8,U+F0E0,U+F0E2,U+F0E3,U+F0E4,U+F0E7,U+F0E8,U+F0EB,U+F0EC,U+F0F3,U+F101,U+F105,U+F106,U+F107,U+F109,U+F10B,U+F110,U+F111,U+F120,U+F121,U+F128,U+F129,U+F132,U+F133,U+F135,U+F141,U+F142,U+F145,U+F148,U+F15B,U+F15C,U+F164,U+F165,U+F178,U+F17A,U+F185,U+F186,U+F192,U+F19A,U+F19C,U+F1A0,U+F1AD,U+F1B2,U+F1B3,U+F1C0,U+F1C9,U+F1CD,U+F1CE,U+F1DA,U+F1E6,U+F1EA,U+F1F8,U+F1F9,U+F201,U+F232,U+F233,U+F234,U+F274,U+F277,U+F290,U+F2B5,U+F2B6,U+F2B9,U+F2BD,U+F2C2,U+F2D0,U+F2ED,U+F2F1,U+F2F5,U+F2F6,U+F2F7,U+F2F9,U+F303,U+F30D,U+F318,U+F35D,U+F362,U+F388,U+F3BF,U+F3C5,U+F3D1,U+F3E5,U+F3ED,U+F3FD,U+F3FF,U+F466,U+F4A6,U+F509,U+F518,U+F542,U+F543,U+F555,U+F570,U+F571,U+F57D,U+F590,U+F5AB,U+F879,U+F890;}
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../prabhu/fonts/fa/fa-regular-400.subset.woff2") format("woff2");unicode-range:U+F002,U+F005,U+F007,U+F009,U+F00A,U+F00B,U+F00C,U+F00D,U+F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F022,U+F023,U+F024,U+F02A,U+F02B,U+F02C,U+F02D,U+F02E,U+F02F,U+F03A,U+F040,U+F044,U+F053,U+F054,U+F056,U+F057,U+F058,U+F059,U+F05A,U+F05E,U+F060,U+F061,U+F062,U+F063,U+F064,U+F067,U+F068,U+F069,U+F06A,U+F06B,U+F06E,U+F070,U+F071,U+F073,U+F074,U+F075,U+F077,U+F078,U+F07A,U+F07B,U+F07C,U+F080,U+F084,U+F085,U+F086,U+F089,U+F08B,U+F08E,U+F090,U+F091,U+F093,U+F095,U+F09A,U+F09C,U+F09D,U+F0A0,U+F0A1,U+F0A3,U+F0A8,U+F0A9,U+F0AA,U+F0AC,U+F0AD,U+F0B1,U+F0C0,U+F0C1,U+F0C2,U+F0C5,U+F0C6,U+F0C7,U+F0C8,U+F0C9,U+F0D6,U+F0D7,U+F0D8,U+F0E0,U+F0E2,U+F0E3,U+F0E4,U+F0E7,U+F0E8,U+F0EB,U+F0EC,U+F0F3,U+F101,U+F105,U+F106,U+F107,U+F109,U+F10B,U+F110,U+F111,U+F120,U+F121,U+F128,U+F129,U+F132,U+F133,U+F135,U+F141,U+F142,U+F145,U+F148,U+F15B,U+F15C,U+F164,U+F165,U+F178,U+F17A,U+F185,U+F186,U+F192,U+F19A,U+F19C,U+F1A0,U+F1AD,U+F1B2,U+F1B3,U+F1C0,U+F1C9,U+F1CD,U+F1CE,U+F1DA,U+F1E6,U+F1EA,U+F1F8,U+F1F9,U+F201,U+F232,U+F233,U+F234,U+F274,U+F277,U+F290,U+F2B5,U+F2B6,U+F2B9,U+F2BD,U+F2C2,U+F2D0,U+F2ED,U+F2F1,U+F2F5,U+F2F6,U+F2F7,U+F2F9,U+F303,U+F30D,U+F318,U+F35D,U+F362,U+F388,U+F3BF,U+F3C5,U+F3D1,U+F3E5,U+F3ED,U+F3FD,U+F3FF,U+F466,U+F4A6,U+F509,U+F518,U+F542,U+F543,U+F555,U+F570,U+F571,U+F57D,U+F590,U+F5AB,U+F879,U+F890;}
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:900;font-display:swap;src:url("../prabhu/fonts/fa/fa-solid-900.subset.woff2") format("woff2");unicode-range:U+F002,U+F005,U+F007,U+F009,U+F00A,U+F00B,U+F00C,U+F00D,U+F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F022,U+F023,U+F024,U+F02A,U+F02B,U+F02C,U+F02D,U+F02E,U+F02F,U+F03A,U+F040,U+F044,U+F053,U+F054,U+F056,U+F057,U+F058,U+F059,U+F05A,U+F05E,U+F060,U+F061,U+F062,U+F063,U+F064,U+F067,U+F068,U+F069,U+F06A,U+F06B,U+F06E,U+F070,U+F071,U+F073,U+F074,U+F075,U+F077,U+F078,U+F07A,U+F07B,U+F07C,U+F080,U+F084,U+F085,U+F086,U+F089,U+F08B,U+F08E,U+F090,U+F091,U+F093,U+F095,U+F09A,U+F09C,U+F09D,U+F0A0,U+F0A1,U+F0A3,U+F0A8,U+F0A9,U+F0AA,U+F0AC,U+F0AD,U+F0B1,U+F0C0,U+F0C1,U+F0C2,U+F0C5,U+F0C6,U+F0C7,U+F0C8,U+F0C9,U+F0D6,U+F0D7,U+F0D8,U+F0E0,U+F0E2,U+F0E3,U+F0E4,U+F0E7,U+F0E8,U+F0EB,U+F0EC,U+F0F3,U+F101,U+F105,U+F106,U+F107,U+F109,U+F10B,U+F110,U+F111,U+F120,U+F121,U+F128,U+F129,U+F132,U+F133,U+F135,U+F141,U+F142,U+F145,U+F148,U+F15B,U+F15C,U+F164,U+F165,U+F178,U+F17A,U+F185,U+F186,U+F192,U+F19A,U+F19C,U+F1A0,U+F1AD,U+F1B2,U+F1B3,U+F1C0,U+F1C9,U+F1CD,U+F1CE,U+F1DA,U+F1E6,U+F1EA,U+F1F8,U+F1F9,U+F201,U+F232,U+F233,U+F234,U+F274,U+F277,U+F290,U+F2B5,U+F2B6,U+F2B9,U+F2BD,U+F2C2,U+F2D0,U+F2ED,U+F2F1,U+F2F5,U+F2F6,U+F2F7,U+F2F9,U+F303,U+F30D,U+F318,U+F35D,U+F362,U+F388,U+F3BF,U+F3C5,U+F3D1,U+F3E5,U+F3ED,U+F3FD,U+F3FF,U+F466,U+F4A6,U+F509,U+F518,U+F542,U+F543,U+F555,U+F570,U+F571,U+F57D,U+F590,U+F5AB,U+F879,U+F890;}
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:swap;src:url("../prabhu/fonts/fa/fa-brands-400.subset.woff2") format("woff2");unicode-range:U+F002,U+F005,U+F007,U+F009,U+F00A,U+F00B,U+F00C,U+F00D,U+F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F022,U+F023,U+F024,U+F02A,U+F02B,U+F02C,U+F02D,U+F02E,U+F02F,U+F03A,U+F040,U+F044,U+F053,U+F054,U+F056,U+F057,U+F058,U+F059,U+F05A,U+F05E,U+F060,U+F061,U+F062,U+F063,U+F064,U+F067,U+F068,U+F069,U+F06A,U+F06B,U+F06E,U+F070,U+F071,U+F073,U+F074,U+F075,U+F077,U+F078,U+F07A,U+F07B,U+F07C,U+F080,U+F084,U+F085,U+F086,U+F089,U+F08B,U+F08E,U+F090,U+F091,U+F093,U+F095,U+F09A,U+F09C,U+F09D,U+F0A0,U+F0A1,U+F0A3,U+F0A8,U+F0A9,U+F0AA,U+F0AC,U+F0AD,U+F0B1,U+F0C0,U+F0C1,U+F0C2,U+F0C5,U+F0C6,U+F0C7,U+F0C8,U+F0C9,U+F0D6,U+F0D7,U+F0D8,U+F0E0,U+F0E2,U+F0E3,U+F0E4,U+F0E7,U+F0E8,U+F0EB,U+F0EC,U+F0F3,U+F101,U+F105,U+F106,U+F107,U+F109,U+F10B,U+F110,U+F111,U+F120,U+F121,U+F128,U+F129,U+F132,U+F133,U+F135,U+F141,U+F142,U+F145,U+F148,U+F15B,U+F15C,U+F164,U+F165,U+F178,U+F17A,U+F185,U+F186,U+F192,U+F19A,U+F19C,U+F1A0,U+F1AD,U+F1B2,U+F1B3,U+F1C0,U+F1C9,U+F1CD,U+F1CE,U+F1DA,U+F1E6,U+F1EA,U+F1F8,U+F1F9,U+F201,U+F232,U+F233,U+F234,U+F274,U+F277,U+F290,U+F2B5,U+F2B6,U+F2B9,U+F2BD,U+F2C2,U+F2D0,U+F2ED,U+F2F1,U+F2F5,U+F2F6,U+F2F7,U+F2F9,U+F303,U+F30D,U+F318,U+F35D,U+F362,U+F388,U+F3BF,U+F3C5,U+F3D1,U+F3E5,U+F3ED,U+F3FD,U+F3FF,U+F466,U+F4A6,U+F509,U+F518,U+F542,U+F543,U+F555,U+F570,U+F571,U+F57D,U+F590,U+F5AB,U+F879,U+F890;}
@font-face{font-family:"Font Awesome 5 Duotone";font-style:normal;font-weight:900;font-display:swap;src:url("../prabhu/fonts/fa/fa-duotone-900.subset.woff2") format("woff2");unicode-range:U+F002,U+F005,U+F007,U+F009,U+F00A,U+F00B,U+F00C,U+F00D,U+F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F022,U+F023,U+F024,U+F02A,U+F02B,U+F02C,U+F02D,U+F02E,U+F02F,U+F03A,U+F040,U+F044,U+F053,U+F054,U+F056,U+F057,U+F058,U+F059,U+F05A,U+F05E,U+F060,U+F061,U+F062,U+F063,U+F064,U+F067,U+F068,U+F069,U+F06A,U+F06B,U+F06E,U+F070,U+F071,U+F073,U+F074,U+F075,U+F077,U+F078,U+F07A,U+F07B,U+F07C,U+F080,U+F084,U+F085,U+F086,U+F089,U+F08B,U+F08E,U+F090,U+F091,U+F093,U+F095,U+F09A,U+F09C,U+F09D,U+F0A0,U+F0A1,U+F0A3,U+F0A8,U+F0A9,U+F0AA,U+F0AC,U+F0AD,U+F0B1,U+F0C0,U+F0C1,U+F0C2,U+F0C5,U+F0C6,U+F0C7,U+F0C8,U+F0C9,U+F0D6,U+F0D7,U+F0D8,U+F0E0,U+F0E2,U+F0E3,U+F0E4,U+F0E7,U+F0E8,U+F0EB,U+F0EC,U+F0F3,U+F101,U+F105,U+F106,U+F107,U+F109,U+F10B,U+F110,U+F111,U+F120,U+F121,U+F128,U+F129,U+F132,U+F133,U+F135,U+F141,U+F142,U+F145,U+F148,U+F15B,U+F15C,U+F164,U+F165,U+F178,U+F17A,U+F185,U+F186,U+F192,U+F19A,U+F19C,U+F1A0,U+F1AD,U+F1B2,U+F1B3,U+F1C0,U+F1C9,U+F1CD,U+F1CE,U+F1DA,U+F1E6,U+F1EA,U+F1F8,U+F1F9,U+F201,U+F232,U+F233,U+F234,U+F274,U+F277,U+F290,U+F2B5,U+F2B6,U+F2B9,U+F2BD,U+F2C2,U+F2D0,U+F2ED,U+F2F1,U+F2F5,U+F2F6,U+F2F7,U+F2F9,U+F303,U+F30D,U+F318,U+F35D,U+F362,U+F388,U+F3BF,U+F3C5,U+F3D1,U+F3E5,U+F3ED,U+F3FD,U+F3FF,U+F466,U+F4A6,U+F509,U+F518,U+F542,U+F543,U+F555,U+F570,U+F571,U+F57D,U+F590,U+F5AB,U+F879,U+F890,U+10F002,U+10F005,U+10F007,U+10F009,U+10F00A,U+10F00B,U+10F00C,U+10F00D,U+10F013,U+10F015,U+10F017,U+10F019,U+10F01C,U+10F021,U+10F022,U+10F023,U+10F024,U+10F02A,U+10F02B,U+10F02C,U+10F02D,U+10F02E,U+10F02F,U+10F03A,U+10F040,U+10F044,U+10F053,U+10F054,U+10F056,U+10F057,U+10F058,U+10F059,U+10F05A,U+10F05E,U+10F060,U+10F061,U+10F062,U+10F063,U+10F064,U+10F067,U+10F068,U+10F069,U+10F06A,U+10F06B,U+10F06E,U+10F070,U+10F071,U+10F073,U+10F074,U+10F075,U+10F077,U+10F078,U+10F07A,U+10F07B,U+10F07C,U+10F080,U+10F084,U+10F085,U+10F086,U+10F089,U+10F08B,U+10F08E,U+10F090,U+10F091,U+10F093,U+10F095,U+10F09A,U+10F09C,U+10F09D,U+10F0A0,U+10F0A1,U+10F0A3,U+10F0A8,U+10F0A9,U+10F0AA,U+10F0AC,U+10F0AD,U+10F0B1,U+10F0C0,U+10F0C1,U+10F0C2,U+10F0C5,U+10F0C6,U+10F0C7,U+10F0C8,U+10F0C9,U+10F0D6,U+10F0D7,U+10F0D8,U+10F0E0,U+10F0E2,U+10F0E3,U+10F0E4,U+10F0E7,U+10F0E8,U+10F0EB,U+10F0EC,U+10F0F3,U+10F101,U+10F105,U+10F106,U+10F107,U+10F109,U+10F10B,U+10F110,U+10F111,U+10F120,U+10F121,U+10F128,U+10F129,U+10F132,U+10F133,U+10F135,U+10F141,U+10F142,U+10F145,U+10F148,U+10F15B,U+10F15C,U+10F164,U+10F165,U+10F178,U+10F17A,U+10F185,U+10F186,U+10F192,U+10F19A,U+10F19C,U+10F1A0,U+10F1AD,U+10F1B2,U+10F1B3,U+10F1C0,U+10F1C9,U+10F1CD,U+10F1CE,U+10F1DA,U+10F1E6,U+10F1EA,U+10F1F8,U+10F1F9,U+10F201,U+10F232,U+10F233,U+10F234,U+10F274,U+10F277,U+10F290,U+10F2B5,U+10F2B6,U+10F2B9,U+10F2BD,U+10F2C2,U+10F2D0,U+10F2ED,U+10F2F1,U+10F2F5,U+10F2F6,U+10F2F7,U+10F2F9,U+10F303,U+10F30D,U+10F318,U+10F35D,U+10F362,U+10F388,U+10F3BF,U+10F3C5,U+10F3D1,U+10F3E5,U+10F3ED,U+10F3FD,U+10F3FF,U+10F466,U+10F4A6,U+10F509,U+10F518,U+10F542,U+10F543,U+10F555,U+10F570,U+10F571,U+10F57D,U+10F590,U+10F5AB,U+10F879,U+10F890;}

/* ---------- Accessibility pass (work-logs 5.1) ---------- */
.ph-skip-link { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 12px 20px; border-radius: 10px; background: var(--ph-navy); color: #fff; font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.ph-skip-link:focus { transform: none; color: #fff; outline: 3px solid var(--ph-orange); outline-offset: 2px; }
#main-body:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .ph-skip-link { transition: none; } }

/* ---------- Contrast fixes (work-logs 5.2): every text colour below was measured < 4.5:1 on its background ---------- */
.ph-mig-num { color: #0b1b3a; }
.ph-review-kicker { color: #b3420f; }
.ph-review-person small { color: #64748b; }
.ph-review-channel { color: #007a54; }
.ph-tp-score { color: #475569; }

:root:not([data-bs-theme="dark"]) .sidebar-menu-item-label,
:root:not([data-bs-theme="dark"]) .tt-read-more { color: var(--ph-blue-dark); }
:root[data-bs-theme="dark"] .sidebar-menu-item-label, :root[data-bs-theme="dark"] .sidebar .truncate { color: #93c5fd; }
:root[data-bs-theme="dark"] .text-muted, :root[data-bs-theme="dark"] .small.text-muted { color: #9ca3af !important; }

:root[data-bs-theme="dark"] .tt-read-more { color: #60a5fa; }

.ph-mig-stats small { color: #94a3b8; }
:root[data-bs-theme="dark"] .kb-article-item small { color: #9ca3af; }
.ph-support-status { color: #065f46; }
.navbar-nav.toolbar > li > a.btn-sm[href*="clientarea"], .navbar-nav.toolbar > li > a.btn-sm[href*="clientarea"] .tt-hide-sm, .navbar-nav.toolbar > li > a.btn-sm[href*="clientarea"] i { color: #fff !important; }

/* Theme switch: no browser focus ring after a mouse click (bootstrap's button:focus outline), a clear brand ring for keyboard users only. */
.ph-theme-switch:focus { outline: none !important; }
.ph-theme-switch:focus-visible { outline: none !important; }
.ph-theme-switch:focus-visible .ph-theme-track { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ph-blue); }
:root[data-bs-theme="dark"] .ph-theme-switch:focus-visible .ph-theme-track { box-shadow: 0 0 0 2px #0b0c1f, 0 0 0 4px #60a5fa; }

/* ---------- Production design bugs (service details / domain nameservers) ---------- */
/* the overdue-invoice alert on the domain page: same one-line layout as the unpaid alert (button was hanging off the bottom edge) */
#alertOverdueInvoice { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#alertOverdueInvoice .float-right { order: 2; float: none !important; flex: none; margin-left: auto; }
@media (max-width: 575.98px) { #alertOverdueInvoice, #alertUnpaidInvoice { flex-direction: column; align-items: flex-start; } #alertOverdueInvoice .float-right, #alertUnpaidInvoice .float-right { order: 0; margin-left: 0; } }
/* nameserver rows: label centred on its 52px field instead of sitting at the top */
#tabNameservers .form-group.row { align-items: center; margin-bottom: 14px; }
#tabNameservers .form-group.row > label.col-form-label { padding-top: 0; padding-bottom: 0; margin: 0; }
/* service details: panels contain their own content, so a tall module/usage block can never spill over the next card */
.primary-content .tab-content .panel, .primary-content .tab-content .card { display: flow-root; }

/* =====================================================================================================================
   STABLE FOUNDATION (work-logs-stable.md, Phase 1). Design source: stablecluster.com (indigo / electric blue on cool white).
   This block is last on purpose: it re-points the existing --ph-* / Kohost variables to the Stable palette, sets the font
   (Figtree, a Euclid-compatible OFL typeface, self-hosted), the stepped container and base elements. Component-level restyling
   (header, hero, cards, tables...) follows in Phases 2-5; literal Prabhu colours still inside those rules are replaced there.
   ===================================================================================================================== */
@font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 300; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Light.woff2") format("woff2"); }
@font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 400; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Regular.woff2") format("woff2"); }
@font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 500; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Medium.woff2") format("woff2"); }
@font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 600; font-display: swap; src: url("../stable/fonts/EuclidCircularA-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 700; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Bold.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../stable/fonts/Figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../stable/fonts/Figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* palette measured on stablecluster.com */
  --sc-ink: #25265e;            /* headings, nav text */
  --sc-body: rgba(37, 38, 94, .70);
  --sc-muted: rgba(37, 38, 94, .68);
  --sc-blue: #2563eb;           /* primary button, links (4.9:1 on white) */
  --sc-blue-dark: #1d4ed8;
  --sc-blue-soft: #3b82f6;      /* decorative / large text only (3.7:1 on white) */
  --sc-indigo: #4f46e5;
  --sc-indigo-deep: #3b2bbf;
  --sc-cyan: #06b6d4;
  --sc-page: #f8faff;
  --sc-card: #ffffff;
  --sc-line: #e5e7eb;
  --sc-line-indigo: #e0e7ff;
  --sc-star: #fbbf24;
  --sc-ok: #16a34a;
  --sc-gradient-text: linear-gradient(to right, #0556f3, #3b17c1, #06b6d4);
  --sc-gradient-topbar: linear-gradient(90deg, #5b3df5 0%, #4f46e5 42%, #3b2bbf 100%);
  --sc-gradient-band: linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%);
  --sc-gradient-support: linear-gradient(255.09deg, #3f1dc4 17.2%, #2a128e 75.48%);
  --sc-bg-hero: radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 86% 20%, rgba(59, 130, 246, .12), transparent 22%), linear-gradient(#fff 0%, #f5f8ff 62%, #edf3ff 100%);
  --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --sc-shadow-lg: 0 20px 40px -12px rgba(37, 38, 94, .18);
  --sc-radius: 12px;
  --sc-radius-lg: 16px;
  --sc-font: "Euclid Circular A", "Figtree", system-ui, -apple-system, "Segoe UI", arial, sans-serif;

  /* existing variables re-pointed (light mode) */
  --ph-blue: var(--sc-blue);
  --ph-blue-dark: var(--sc-blue-dark);
  --ph-orange: var(--sc-blue);          /* the Stable design has no orange: former orange CTAs become primary blue */
  --ph-orange-dark: var(--sc-blue-dark);
  --ph-navy: var(--sc-ink);
  --ph-ink: var(--sc-ink);
  --ph-text: var(--sc-ink);
  --ph-text-2: rgba(37, 38, 94, .85);
  --ph-text-3: rgba(37, 38, 94, .75);
  --ph-muted: rgba(37, 38, 94, .62);    /* 5.6:1 on white */
  --ph-border-strong: #cfd6ee;
  --ph-line: var(--sc-line);
  --ph-line-soft: #eef0fb;
  --ph-tint: #f3f6ff;
  --ph-page: var(--sc-page);
  --primary: var(--sc-blue);
  --primary-dark: var(--sc-blue-dark);
  --primary-darker: #1e40af;
  --primary-light: #dbeafe;
  --heading-color: var(--sc-ink);
  --body-color: var(--sc-body);
  --border-color: var(--sc-line);
  --custom-radius: var(--sc-radius);
  --accent: var(--sc-indigo);
  --accent-dark: var(--sc-indigo-deep);
  --font-family-sans-serif: var(--sc-font);
  --font-family-monospace: var(--sc-font);
  --gradient-blue: linear-gradient(81deg, #2563eb, #3b82f6 50%, #1d4ed8);
  --gradient-orange: var(--gradient-blue);
}

/* derived dark palette (the live site has no dark mode; same hues, flipped lightness, see work-logs-stable.md 1.2) */
:root[data-bs-theme="dark"] {
  --sc-ink: #e8e9ff;
  --sc-body: rgba(232, 233, 255, .75);
  --sc-muted: rgba(232, 233, 255, .55);
  --sc-blue: #3b82f6;
  --sc-blue-dark: #60a5fa;
  --sc-blue-soft: #93c5fd;
  --sc-page: #0b0c1f;
  --sc-card: #12132b;
  --sc-line: rgba(255, 255, 255, .10);
  --sc-line-indigo: rgba(255, 255, 255, .08);
  --sc-gradient-text: linear-gradient(to right, #60a5fa, #a5b4fc, #22d3ee);
  --sc-bg-hero: radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .10), transparent 24%), radial-gradient(circle at 86% 20%, rgba(99, 102, 241, .14), transparent 22%), linear-gradient(#0b0c1f 0%, #0d0f27 62%, #10122e 100%);
  --sc-shadow-sm: none;
  --sc-shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6);
  --ph-blue: #60a5fa;
  --ph-blue-dark: #93c5fd;
  --ph-orange: #60a5fa;
  --ph-orange-dark: #93c5fd;
  --ph-navy: #e8e9ff;
  --ph-ink: #e8e9ff;
  --ph-text: #e8e9ff;
  --ph-text-2: rgba(232, 233, 255, .85);
  --ph-text-3: rgba(232, 233, 255, .75);
  --ph-muted: rgba(232, 233, 255, .62);
  --ph-border-strong: rgba(255, 255, 255, .18);
  --ph-line: rgba(255, 255, 255, .10);
  --ph-line-soft: rgba(255, 255, 255, .06);
  --ph-tint: #12132b;
  --ph-page: #0b0c1f;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-darker: #1d4ed8;
  --heading-color: #e8e9ff;
  --body-color: rgba(232, 233, 255, .75);
  --border-color: rgba(255, 255, 255, .10);
}

/* base typography: 16 px / 24 px, Figtree, medium-weight headings (the Stable look) */
html { font-size: 16px; }
body { font-family: var(--sc-font); font-size: 16px; line-height: 1.5; color: var(--sc-body); background-color: var(--sc-page); -webkit-font-smoothing: antialiased; }
h1, h2 { font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); }
h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); }
a { color: var(--sc-blue); }
a:hover { color: var(--sc-blue-dark); }
button, input, select, textarea { font-family: inherit; }

/* container: stepped wrapper measured on stablecluster.com (16 px < 768, 32 px, 80 px from 1280, 8.333 % from 1536; 1920 px max, centred) */
.container { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px)  { .container { padding-inline: 32px; } }
@media (min-width: 1280px) { .container { padding-inline: 80px; } }
@media (min-width: 1536px) { .container { padding-inline: 8.3333%; } }

/* reusable pieces */
.sc-hero-bg { background: var(--sc-bg-hero); }
.sc-gradient-text { background: var(--sc-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.btn-primary, .btn-primary:focus { background: var(--sc-blue); border-color: var(--sc-blue); color: #fff; background-image: none; }
.btn-primary:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); color: #fff; }
:root[data-bs-theme="dark"] .btn-primary { color: #fff; }
:focus-visible { outline-color: var(--sc-blue); }
/* buttons whose background came from the old orange token keep readable text now that the token is blue */
.tt-page-action-primary { color: #fff !important; }
.ph-mig-num { color: #fff; }

/* =====================================================================================================================
   STABLE CHROME 2.1/2.2: top bar + header (stablecluster.com: 36 px indigo strip, 80 px white header, ghost Log In + pill Register)
   ===================================================================================================================== */
.sc-topbar {
  display: block !important;
  height: 36px;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  background:
    radial-gradient(circle at 18% 50%, rgba(129, 140, 248, .18), transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(99, 102, 241, .22), transparent 24%),
    var(--sc-gradient-topbar);
}
.sc-topbar .sc-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding-top: 0; padding-bottom: 0; }
.sc-topbar a, .sc-topbar .ph-topbar-static { color: #fff; }
.sc-topbar a:hover { color: #fff; text-decoration: underline; }
.sc-top-phone { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sc-top-phone i { font-size: 14px; }
.sc-top-promo { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-top-chip { display: inline-block; padding: 1px 6px; border: 1px dashed rgba(255, 255, 255, .85); border-radius: 4px; line-height: 1.3; }
.sc-top-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.sc-topbar .ph-topbar-links li { padding: 0; border: 0; }
.sc-topbar .ph-cur-caret { color: rgba(255, 255, 255, .8); font-size: 10px; }
.sc-topbar .ph-theme-track { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .45); }
:root[data-bs-theme="dark"] .sc-topbar .ph-theme-track { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.sc-topbar .ph-theme-knob { background: #fff; }
:root[data-bs-theme="dark"] .sc-topbar .ph-theme-knob { background: #0f172a; }
@media (max-width: 991.98px) {
  .sc-top-phone span, .sc-top-promo-text { display: none; }
  .sc-top-phone { min-width: 44px; min-height: 36px; }
  .sc-top-promo { text-align: center; }
}

/* header: white (dark: card colour), flat, 80 px */
.tt-header, .tt-header:not(.tt-double-header) {
  background: var(--sc-card);
  border-bottom: 1px solid transparent;
  box-shadow: var(--sc-shadow-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-bs-theme="dark"] .tt-header, :root[data-bs-theme="dark"] .tt-header:not(.tt-double-header) { background: var(--sc-card); border-bottom-color: var(--sc-line); }
.tt-header .logo-img, .tt-header .logo-img.ph-logo { height: 40px; width: auto; }
@media (max-width: 575.98px) { .tt-header .logo-img, .tt-header .logo-img.ph-logo { height: 34px; } }
@media (max-width: 767.98px) { .tt-header .navbar > .container { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 1200px) { .tt-header .logo-img, .tt-header .logo-img.ph-logo { height: 48px; } }
.tt-header .navbar-brand.ph-brand:hover { transform: none; }

/* toolbar buttons */
.tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-login, .tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-register {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: .35px; box-shadow: none;
}
.tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-login[href$="clientarea.php"] { background: transparent; color: var(--sc-ink); }
.tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-login[href$="clientarea.php"]:hover { background: var(--ph-tint); color: var(--sc-ink); }
.tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-register { background: var(--sc-blue); color: #fff; }
.tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-register:hover { background: var(--sc-blue-dark); color: #fff; }
.navbar-nav.toolbar > li > a.btn-sm.sc-btn-login[href*="clientarea"], .navbar-nav.toolbar > li > a.btn-sm.sc-btn-login[href*="clientarea"] .tt-hide-sm { color: var(--sc-ink) !important; }
@media (max-width: 575.98px) { .tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-register { display: none; } .tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-login { padding: 0 12px; } }

/* the top bar stays indigo in dark mode too (as the dark bands on stablecluster.com) */
:root[data-bs-theme="dark"] .sc-topbar, :root[data-bs-theme="dark"] .ph-topbar.sc-topbar {
  background:
    radial-gradient(circle at 18% 50%, rgba(129, 140, 248, .18), transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(99, 102, 241, .22), transparent 24%),
    linear-gradient(90deg, #4a2fd8 0%, #3f38c4 42%, #2f2299 100%);
  border-bottom: 0;
}

/* two logo files (light / dark wordmark): the dark one is a lighter recolour of the same SVG */
.sc-logo-dark { display: none; }
:root[data-bs-theme="dark"] .sc-logo-light { display: none; }
:root[data-bs-theme="dark"] .sc-logo-dark { display: inline-block; }
:root[data-bs-theme="dark"] .sc-topbar .ph-topbar-links img { filter: none; }

/* =====================================================================================================================
   STABLE CHROME 2.3: mega menus (stablecluster.com): compact triggers, white rounded-2xl panels, 3 columns with blue labels,
   40 px grey icon chips. Wide panels (Hosting, Company) hang from the menu's left edge, small ones from their own trigger.
   ===================================================================================================================== */
.sc-mega { position: relative; flex: 0 1 auto; gap: 4px; margin: 0 16px; }
.sc-mega .sc-mega-item { position: static; }
.sc-mega .sc-mega-item:not(.sc-mega-wide) { position: relative; }
.sc-mega .ph-mega-btn { padding: 8px 12px; border-radius: 8px; color: var(--sc-ink); font: 500 16px/1.5 var(--sc-font); }
.sc-mega .ph-mega-btn:hover, .sc-mega .ph-mega-btn[aria-expanded="true"] { background: #f3f4f6; color: var(--sc-ink); }
:root[data-bs-theme="dark"] .sc-mega .ph-mega-btn:hover, :root[data-bs-theme="dark"] .sc-mega .ph-mega-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: var(--sc-ink); }
.sc-mega .ph-mega-btn i { font-size: 10px; }

.sc-mega .sc-mega-panel {
  top: calc(100% + 8px); left: 0; width: 420px; padding: 24px;
  background: var(--sc-card); border: 1px solid #f3f4f6; border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.sc-mega .sc-mega-wide .sc-mega-panel { width: 900px; }
.sc-mega .sc-mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }   /* hover bridge across the 8 px gap */
:root[data-bs-theme="dark"] .sc-mega .sc-mega-panel { border-color: var(--sc-line); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); }
.sc-mega-grid { display: grid; gap: 32px; }
.sc-mega-grid.sc-cols-1 { grid-template-columns: 1fr; }
.sc-mega-grid.sc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-mega-col:not(:last-child) { border-right: 1px solid #f3f4f6; }
:root[data-bs-theme="dark"] .sc-mega-col:not(:last-child) { border-right-color: var(--sc-line); }
.sc-mega-head { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3b82f6; }
.sc-mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .15s ease; }
.sc-mega-link:hover, .sc-mega-link:focus-visible { background: #eff6ff; text-decoration: none; }
.sc-mega-chip { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 8px; background: #f3f4f6; color: #2563eb; transition: background-color .15s ease; }
.sc-mega-link:hover .sc-mega-chip, .sc-mega-link:focus-visible .sc-mega-chip { background: #dbeafe; }
.sc-mega-chip svg, .sc-mega-chip img { width: 20px; height: 20px; }
.sc-mega-text { min-width: 0; }
.sc-mega-text strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: #111827; }
.sc-mega-text small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: #6b7280; }
.sc-mega-link:hover .sc-mega-text strong { color: #1d4ed8; }
:root[data-bs-theme="dark"] .sc-mega-link:hover, :root[data-bs-theme="dark"] .sc-mega-link:focus-visible { background: rgba(59, 130, 246, .14); }
:root[data-bs-theme="dark"] .sc-mega-chip { background: rgba(255, 255, 255, .08); color: #93c5fd; }
:root[data-bs-theme="dark"] .sc-mega-link:hover .sc-mega-chip { background: rgba(59, 130, 246, .25); }
:root[data-bs-theme="dark"] .sc-mega-text strong { color: #e8e9ff; }
:root[data-bs-theme="dark"] .sc-mega-text small { color: rgba(232, 233, 255, .6); }
:root[data-bs-theme="dark"] .sc-mega-link:hover .sc-mega-text strong { color: #93c5fd; }
:root[data-bs-theme="dark"] .sc-mega-head { color: #60a5fa; }
/* menu sits next to the logo like on stablecluster.com (left aligned, 48 px gap); wide panels shrink on narrower desktops */
.sc-mega { margin-left: 48px; margin-right: auto; }
@media (max-width: 1399.98px) { .sc-mega .sc-mega-wide .sc-mega-panel { width: calc(100vw - 400px); } .sc-mega-grid { gap: 20px; } }

/* =====================================================================================================================
   STABLE CHROME 2.4: mobile menu = full-screen white sheet (stablecluster.com): logo + bordered close button, accordion rows
   (20 px / 700 ink + chevron), full-width blue "Get Started" and outlined "Log In". No search field.
   ===================================================================================================================== */
@media (max-width: 1199.98px) {
  .offcanvas-collapse { width: 100%; max-width: 100%; background: var(--sc-page); box-shadow: none; }
  :root[data-bs-theme="dark"] .offcanvas-collapse { background: var(--sc-page); }
  .offcanvas-collapse #mainNavbar { padding: 0 16px 24px !important; }
  .ph-offcanvas-head { margin: 0 -16px; padding: 12px 16px; background: var(--sc-card); border-bottom: 1px solid var(--sc-line); }
  :root[data-bs-theme="dark"] .ph-offcanvas-head { background: var(--sc-card); }
  .ph-offcanvas-logo img { height: 34px; }
  .ph-offcanvas-close { width: 40px; height: 40px; margin-right: 0; border: 1px solid #d1d5db; border-radius: 8px; color: var(--sc-ink); font-size: 18px; }
  .ph-offcanvas-close:hover { background: #f3f4f6; }
  :root[data-bs-theme="dark"] .ph-offcanvas-close { border-color: var(--sc-line); color: var(--sc-ink); }
  :root[data-bs-theme="dark"] .ph-offcanvas-close:hover { background: rgba(255, 255, 255, .08); }
  .ph-mobile-theme { padding: 16px 0 4px; font-size: 16px; font-weight: 500; }
  .sc-mobile-nav { padding-top: 8px; }
  .ph-mobile-toggle { min-height: 56px; padding: 12px 0; border-bottom: 0; font-size: 20px; font-weight: 700; color: var(--sc-ink); }
  .ph-mobile-toggle:hover { color: var(--sc-blue); }
  .ph-mobile-toggle i { font-size: 13px; }
  :root[data-bs-theme="dark"] .ph-mobile-toggle { color: var(--sc-ink); }
  .ph-mobile-sub { padding: 0 0 8px; }
  .ph-mobile-sub a { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 10px; border-radius: 12px; font-size: 16px; color: inherit; }
  .ph-mobile-sub a:hover { background: #eff6ff; color: inherit; }
  :root[data-bs-theme="dark"] .ph-mobile-sub a:hover { background: rgba(59, 130, 246, .14); }
  .ph-mobile-sub .sc-mega-chip { width: 36px; height: 36px; flex-basis: 36px; margin-top: 0; }
  .ph-mobile-sub .sc-mega-text strong { font-size: 16px; color: var(--sc-ink); }
  .ph-mobile-sub .sc-mega-text small { font-size: 14px; }
  :root[data-bs-theme="dark"] .ph-mobile-sub .sc-mega-text strong { color: #e8e9ff; }
  #mainNavbar .ph-client-nav > li { border-bottom: 0; }
  #mainNavbar .ph-client-nav > li > a { min-height: 56px; font-size: 20px; font-weight: 700; color: var(--sc-ink); }
  .ph-offcanvas-cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 24px; }
  .ph-offcanvas-cta a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; font-size: 18px; font-weight: 500; text-decoration: none; }
  .ph-offcanvas-cta .sc-cta-primary, #mainNavbar .ph-offcanvas-cta .sc-cta-primary { background: var(--sc-blue); color: #fff; }
  .ph-offcanvas-cta .sc-cta-primary:hover { background: var(--sc-blue-dark); color: #fff; }
  .ph-offcanvas-cta .sc-cta-secondary, #mainNavbar .ph-offcanvas-cta .sc-cta-secondary { background: var(--sc-card); color: var(--sc-ink); border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-sm); }
  .ph-offcanvas-cta .sc-cta-secondary:hover { background: var(--ph-tint); color: var(--sc-ink); }
}
.sc-guest-hidden { display: none !important; }   /* visitors only see the Stable menu in the mobile sheet; logged-in clients keep the WHMCS client menu */
@media (max-width: 1199.98px) {
  .ph-offcanvas-logo .sc-logo-dark { display: none; }
  :root[data-bs-theme="dark"] .ph-offcanvas-logo .sc-logo-light { display: none; }
  :root[data-bs-theme="dark"] .ph-offcanvas-logo .sc-logo-dark { display: block; }
  #mainNavbar .sc-mobile-nav .ph-mobile-toggle { color: var(--sc-ink); }
  #mainNavbar .sc-mobile-nav .ph-mobile-toggle:hover { color: var(--sc-blue); }
  #mainNavbar .sc-mobile-nav .ph-mobile-sub a { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
  #mainNavbar .sc-mobile-nav .ph-mobile-sub li { margin: 0; }
}

/* =====================================================================================================================
   STABLE CHROME 2.5: footer (stablecluster.com): hero gradient background, legal card + payment logos left, four link columns
   right, "Product of Stable Cluster" + social circles, bottom bar.
   ===================================================================================================================== */
.sc-footer { margin-top: 0; padding: 64px 0 24px; background: var(--sc-bg-hero); border-top: 1px solid var(--sc-line-indigo); color: var(--sc-body); font-size: 16px; }
.sc-footer h2, .sc-footer h3 { letter-spacing: normal; }
.sc-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.sc-legal { padding: 20px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 16px; box-shadow: var(--sc-shadow-sm); }
.sc-legal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sc-legal-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #ecfdf5; color: #059669; }
.sc-legal-icon svg { width: 22px; height: 22px; }
.sc-legal-head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--sc-ink); }
.sc-legal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.sc-legal-grid > div + div { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--sc-line); }
.sc-legal-grid h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--sc-ink); }
.sc-legal-grid dl { margin: 0; }
.sc-legal-grid dt { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); }
.sc-legal-grid dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sc-ink); overflow-wrap: anywhere; }
.sc-legal-grid dd a { color: inherit; }
.sc-legal-grid dd a:hover { color: var(--sc-blue); }
.sc-pay { margin-top: 28px; padding: 0 4px; }
.sc-pay h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--sc-ink); }
.sc-pay p { margin: 0 0 14px; font-size: 14px; color: var(--sc-muted); }
.sc-pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 0; }
.sc-pay-logos img { display: block; height: 24px; width: auto; max-width: 84px; object-fit: contain; }
:root[data-bs-theme="dark"] .sc-pay-logos li { padding: 4px 8px; border-radius: 8px; background: #fff; }
.sc-foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sc-foot-col h2 { margin: 0 0 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-muted); }
.sc-foot-col ul { margin: 0; padding: 0; }
.sc-foot-col li { margin-bottom: 12px; line-height: 1.5; }
.sc-foot-col a { color: var(--sc-ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.sc-foot-col a:hover { color: var(--sc-blue); text-decoration: none; }
.sc-foot-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); }
.sc-foot-logo img { height: 40px; width: auto; }
.sc-foot-products { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sc-muted); }
.sc-foot-products > div { display: flex; align-items: center; gap: 24px; }
.sc-foot-products img { display: block; height: 28px; width: auto; }
.sc-foot-products a:first-child img { height: 40px; }
.sc-foot-social { display: flex; gap: 8px; margin: 0; padding: 0; }
.sc-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--sc-card); border: 1px solid var(--sc-line); color: var(--sc-body); box-shadow: var(--sc-shadow-sm); transition: color .15s ease, border-color .15s ease; }
.sc-foot-social a:hover { color: var(--sc-blue); border-color: var(--sc-blue); }
.sc-foot-social svg { width: 18px; height: 18px; }
.sc-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 14px; color: var(--sc-muted); }
.sc-foot-bottom p { margin: 0; }
.sc-foot-bottom a { margin-left: 16px; color: var(--sc-muted); font-weight: 500; }
.sc-foot-bottom a:first-child { margin-left: 0; }
.sc-foot-bottom a:hover { color: var(--sc-blue); }
@media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 767.98px) {
  .sc-footer { padding-top: 40px; }
  .sc-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-legal-grid { grid-template-columns: 1fr; gap: 16px; }
  .sc-legal-grid > div + div { margin-left: 0; padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--sc-line); }
  .sc-foot-brand { flex-direction: column; align-items: flex-start; }
  .sc-foot-products { align-items: flex-start; }
  .sc-foot-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 479.98px) { .sc-foot-links { grid-template-columns: 1fr; } }

/* =====================================================================================================================
   STABLE CHROME 2.6: page title band (stablecluster.com dark-hero pages such as /contact-us): indigo gradient, 36 px/500 white
   title, softer breadcrumb, white pill primary action. Applies to every inner client-area page, light and dark.
   ===================================================================================================================== */
.tt-page-header.py-5.bg-gradient, .tt-page-header.bg-gradient {
  padding-top: 40px !important; padding-bottom: 40px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(45deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(258.38deg, #532be9 24.08%, #1b076e 91.93%);
  box-shadow: none;
}
:root[data-bs-theme="dark"] .tt-page-header.bg-gradient {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(45deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(258.38deg, #3d22b0 24.08%, #14064f 91.93%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.tt-page-header h1 { font-size: 36px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.tt-page-header-info > p { color: rgba(255, 255, 255, .82); font-size: 16px; letter-spacing: 0; }
@media (max-width: 767.98px) { .tt-page-header h1 { font-size: 28px; } .tt-page-header.bg-gradient { padding-top: 28px !important; padding-bottom: 28px !important; } }
.tt-page-action { height: 40px; min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: .35px; }
.tt-page-action-primary { background: #fff; color: #25265e !important; box-shadow: none; }
.tt-page-action-primary:hover, .tt-page-action-primary:focus-visible { background: #eef2ff; color: #25265e !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.tt-page-action-secondary { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .5); }

/* =====================================================================================================================
   STABLE HOME 3.1: hero (stablecluster.com): badge, 60 px / 500 headline with gradient first line, search bar, TLD price chips,
   server illustration with technology icons.
   ===================================================================================================================== */
.sc-hero { padding: 64px 0 72px; }
.sc-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.sc-hero-copy { max-width: 700px; }
.sc-badge { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid rgba(191, 219, 254, .7); border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: var(--sc-shadow-sm);
  font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--sc-body); }
.sc-hero h1 { margin: 24px 0 20px; font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -1.5px; color: var(--sc-ink); }
.sc-hero h1 > span { display: block; padding-bottom: .05em; }
.sc-hero-text { max-width: 512px; margin: 0 0 32px; font-size: 18px; line-height: 1.5; color: var(--sc-body); }
.sc-search-form { max-width: 576px; }
.sc-search { display: flex; align-items: center; gap: 8px; height: 56px; padding: 6px; background: var(--sc-card); border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .10), 0 2px 4px -2px rgba(0, 0, 0, .10); }
.sc-search:focus-within { box-shadow: 0 0 0 2px var(--sc-blue), 0 4px 6px -1px rgba(0, 0, 0, .10); }
.sc-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 18px; border: 0; outline: 0 !important; background: transparent; font-size: 16px; color: var(--sc-ink); box-shadow: none; }
.sc-search input::placeholder { color: rgba(37, 38, 94, .5); }
:root[data-bs-theme="dark"] .sc-search input::placeholder { color: rgba(232, 233, 255, .5); }
.sc-search-btn { flex: 0 0 auto; height: 44px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--sc-blue); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s ease; }
.sc-search-btn:hover, .sc-search-btn:focus-visible { background: var(--sc-blue-dark); }
.sc-search-form .domainchecker-homepage-captcha { margin-top: 12px; font-size: 14px; }
.sc-tlds { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 28px 0 0; padding: 0; }
.sc-tlds li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid rgba(191, 219, 254, .9); border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: var(--sc-shadow-sm); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sc-tlds strong { font-size: 14px; font-weight: 600; color: var(--sc-ink); }
.sc-tlds span { font-size: 12px; color: var(--sc-muted); }
:root[data-bs-theme="dark"] .sc-badge, :root[data-bs-theme="dark"] .sc-tlds li { background: rgba(255, 255, 255, .06); border-color: var(--sc-line); }
.sc-hero-art { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.sc-hero-art img { display: block; width: 328px; max-width: 100%; height: auto; }
.sc-tech { display: flex; gap: 28px; margin: 0; padding: 0; color: var(--sc-blue); }
.sc-tech li { display: block; line-height: 0; }
.sc-tech svg { width: 40px; height: 40px; }
@media (max-width: 1023.98px) { .sc-hero-in { grid-template-columns: 1fr; } .sc-hero-art { display: none; } .sc-hero h1 { font-size: 48px; } }
@media (max-width: 575.98px) { .sc-hero { padding: 40px 0 48px; } .sc-hero h1 { font-size: 36px; letter-spacing: -1px; } .sc-hero-text { font-size: 16px; } .sc-search { height: 52px; } }
/* the WHMCS currency dropdown in the toolbar duplicates the currency chip in the top bar: hidden (the chip opens the same language/currency modal) */
#currency-dropdown { display: none !important; }
/* hero captcha (only when WHMCS demands it): quiet, left aligned, image + code field on one line */
.sc-search-form .text-center.row { justify-content: flex-start !important; margin: 0; text-align: left !important; }
.sc-search-form .domainchecker-homepage-captcha, .sc-search-form .domainchecker-homepage-captcha .col-md-8 { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; margin: 12px 0 0; }
.sc-search-form #default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding: 0 !important; text-align: left !important; }
.sc-search-form #default-captcha-domainchecker p { flex: 0 0 100%; margin: 0; font-size: 13px; line-height: 1.4; color: var(--sc-muted); }
.sc-search-form #default-captcha-domainchecker .col-6 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.sc-search-form #default-captcha-domainchecker .captchaimage img { display: block; height: 44px; width: auto; border-radius: 6px; }
.sc-search-form #default-captcha-domainchecker #inputCaptcha.form-control { width: 160px; height: 44px; padding: 0 14px; border: 1px solid var(--ph-border-strong); border-radius: 6px; background: var(--sc-card); color: var(--sc-ink); font-size: 16px; letter-spacing: .12em; box-shadow: none; }
.sc-search-form #default-captcha-domainchecker #inputCaptcha.form-control:focus { border-color: var(--sc-blue); outline: 0 !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }
:root[data-bs-theme="dark"] .sc-search { border: 1px solid var(--sc-line); background: #15173a; }

/* =====================================================================================================================
   STABLE HOME 3.3: plans (stablecluster.com "Fully Managed Web Hosting"): 4 cards from WHMCS products, popular card with blue
   header band, LVE row, tick list, + three feature cards.
   ===================================================================================================================== */
.sc-plans { padding: 64px 0; background: var(--sc-page); }
.sc-section-head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
.sc-section-head h2 { margin: 0 0 16px; font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); }
.sc-section-head p { margin: 0; font-size: 16px; line-height: 2; color: var(--sc-body); }
.sc-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.sc-plan { position: relative; display: flex; flex-direction: column; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); overflow: hidden; }
.sc-plan.is-popular { border: 2px solid #3b82f6; box-shadow: 0 10px 30px -10px rgba(37, 99, 235, .35); }
.sc-plan-flag { padding: 8px 12px; background: #3b82f6; color: #fff; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sc-plan-top { padding: 24px; }
.sc-plan-top h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-ink); }
.sc-plan-tag { min-height: 42px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--sc-muted); }
.sc-plan-strike { min-height: 24px; margin: 0; font-size: 14px; color: var(--sc-muted); }
.sc-plan-strike del { color: var(--sc-muted); }
.sc-save { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 1px solid #bbf7d0; border-radius: 999px; background: #f0fdf4; color: #15803d; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sc-plan-price { margin: 0 0 8px; color: var(--sc-ink); }
.sc-plan-price strong { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.sc-plan-price span { font-size: 14px; color: var(--sc-muted); }
.sc-plan-note { margin: 0 0 20px; font-size: 12px; line-height: 1.5; color: var(--sc-muted); }
.sc-plan-cta { display: flex; align-items: center; justify-content: center; height: 50px; border: 1px solid #3b82f6; border-radius: 8px; background: transparent; color: #2563eb; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); transition: background-color .15s ease, color .15s ease; }
.sc-plan-cta:hover, .sc-plan-cta:focus-visible { background: #2563eb; border-color: #2563eb; color: #fff; text-decoration: none; }
.sc-plan.is-popular .sc-plan-cta { background: #2563eb; border-color: #2563eb; color: #fff; }
.sc-plan.is-popular .sc-plan-cta:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sc-plan-lve { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 24px; padding: 14px 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); font-size: 14px; color: var(--sc-ink); }
.sc-plan-lve span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-muted); }
.sc-plan-lve i { display: inline-flex; color: #6366f1; }
.sc-plan-lve i svg { width: 14px; height: 14px; }
.sc-plan-lve strong { font-weight: 500; }
.sc-plan-ticks { margin: 0; padding: 16px 24px 8px; }
.sc-plan-ticks li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 16px; line-height: 1.4; color: var(--sc-body); }
.sc-plan-ticks li svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--sc-ok); }
.sc-plan-ticks li span { border-bottom: 1px dashed rgba(37, 38, 94, .35); }
.sc-plan-more { padding: 0 0 16px 24px; }
.sc-plan-more summary { cursor: pointer; font-size: 14px; font-weight: 500; color: #2563eb; list-style: none; }
.sc-plan-more summary::-webkit-details-marker { display: none; }
.sc-plan-more summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.sc-plan-more[open] summary::after { transform: rotate(225deg); margin-bottom: 0; }
.sc-plan-more .sc-plan-ticks { padding-left: 0; padding-top: 12px; }
.sc-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 48px; }
.sc-feat { padding: 24px; background: var(--sc-card); border-radius: var(--sc-radius); box-shadow: 0 1px 3px rgba(37, 38, 94, .08), 0 8px 24px -12px rgba(37, 38, 94, .12); }
.sc-feat h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--sc-ink); }
.sc-feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f3f4f6; color: #2563eb; flex: none; }
.sc-feat-ico svg { width: 22px; height: 22px; }
.sc-feat p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--sc-muted); }
:root[data-bs-theme="dark"] .sc-plan { background: var(--sc-card); }
:root[data-bs-theme="dark"] .sc-plan.is-popular { border-color: #3b82f6; box-shadow: none; }
:root[data-bs-theme="dark"] .sc-plan-cta { color: #93c5fd; border-color: #60a5fa; box-shadow: none; }
:root[data-bs-theme="dark"] .sc-plan-cta:hover, :root[data-bs-theme="dark"] .sc-plan.is-popular .sc-plan-cta { background: #3b82f6; border-color: #3b82f6; color: #fff; }
:root[data-bs-theme="dark"] .sc-plan-ticks li span { border-bottom-color: rgba(232, 233, 255, .3); }
:root[data-bs-theme="dark"] .sc-save { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .3); color: #86efac; }
:root[data-bs-theme="dark"] .sc-feat { box-shadow: none; border: 1px solid var(--sc-line); }
:root[data-bs-theme="dark"] .sc-feat-ico { background: rgba(255, 255, 255, .08); color: #93c5fd; }
@media (max-width: 1279.98px) { .sc-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-feat-grid { gap: 24px; } }
@media (max-width: 991.98px) { .sc-feat-grid { grid-template-columns: 1fr; } .sc-section-head h2 { font-size: 36px; } }
@media (max-width: 639.98px) { .sc-plan-grid { grid-template-columns: 1fr; } .sc-plans { padding: 48px 0; } .sc-section-head h2 { font-size: 30px; line-height: 1.1; } .sc-plan-tag { min-height: 0; } }

/* =====================================================================================================================
   STABLE HOME 3.2 / 3.4a: clients strip, client stories (dark indigo band), "Why choose" bento, reviews masonry.
   The empty #main-body of the homepage is hidden (all homepage sections are included above it).
   ===================================================================================================================== */
body.bg-gray-light > section#main-body { display: none; }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.sc-btn-blue { background: var(--sc-blue); color: #fff; border: 1px solid var(--sc-blue); }
.sc-btn-blue:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); color: #fff; text-decoration: none; }
.sc-btn-line { background: var(--sc-card); color: var(--sc-ink); border: 1px solid var(--sc-line); }
.sc-btn-line:hover { border-color: var(--sc-blue); color: var(--sc-blue); text-decoration: none; }

/* clients */
.sc-clients { padding: 32px 0 8px; background: var(--sc-page); }
.sc-clients-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sc-clients-head h2 { margin: 0; font-size: 20px; font-weight: 500; color: var(--sc-ink); }
.sc-clients-head span { flex: 1; max-width: 640px; height: 1px; background: var(--sc-line); }
.sc-clients-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.sc-clients-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin: 0; padding: 0; }
.sc-clients-logos img { display: block; height: 32px; width: auto; max-width: 128px; object-fit: contain; }
.sc-clients-contact { display: flex; align-items: center; gap: 24px; padding-left: 32px; border-left: 1px solid var(--sc-line); font-size: 14px; }
.sc-clients-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--sc-ink); text-decoration: none; }
.sc-clients-contact a:hover { color: var(--sc-blue); }
@media (max-width: 991.98px) { .sc-clients-contact { padding-left: 0; border-left: 0; } }
:root[data-bs-theme="dark"] .sc-clients-logos li { padding: 4px 10px; border-radius: 8px; background: #fff; }

/* stories */
.sc-stories { position: relative; padding: 72px 0; color: #fff; background:
  linear-gradient(135deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 64px 64px,
  linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); }
.sc-stories h2 { margin: 0 0 16px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.sc-stories-lead { max-width: 640px; margin: 0 0 40px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.sc-stories-stage { display: flex; gap: 16px; align-items: stretch; }
.sc-story-cards { flex: 1 1 auto; min-width: 0; }
.sc-story { display: flex; gap: 32px; height: 100%; margin: 0; padding: 40px; background: #fff; border-radius: 24px; color: var(--sc-ink); }
.sc-story[hidden] { display: none; }
.sc-story-logo { flex: 0 0 356px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #f9fafb; min-height: 240px; }
.sc-story-logo img { max-width: 70%; max-height: 120px; width: auto; height: auto; object-fit: contain; }
.sc-story-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sc-quote { width: 40px; height: 40px; margin-bottom: 12px; color: #a5b4fc; }
.sc-story blockquote { margin: 0 0 24px; font-size: 24px; line-height: 1.5; font-weight: 500; color: var(--sc-ink); }
.sc-story figcaption strong { display: block; font-size: 16px; font-weight: 600; }
.sc-story figcaption span { font-size: 14px; color: rgba(37, 38, 94, .55); }
.sc-story-tabs { display: flex; gap: 12px; }
.sc-story-tab { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 14px; width: 126px; padding: 24px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 24px; background: rgba(255, 255, 255, .10); color: #fff; cursor: pointer; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; transition: background-color .15s ease; }
.sc-story-tab:hover, .sc-story-tab:focus-visible { background: rgba(255, 255, 255, .2); }
.sc-story-tab.is-active { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.sc-story-tab strong { font-size: 18px; font-weight: 600; }
.sc-story-tab span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
@media (max-width: 1199.98px) { .sc-story { flex-direction: column; padding: 28px; } .sc-story-logo { flex-basis: auto; min-height: 140px; } .sc-story blockquote { font-size: 20px; } }
@media (max-width: 991.98px) {
  .sc-stories { padding: 48px 0; } .sc-stories h2 { font-size: 34px; }
  .sc-stories-stage { flex-direction: column; }
  .sc-story-tabs { order: 2; flex-direction: column; }
  .sc-story-tab { width: 100%; writing-mode: horizontal-tb; transform: none; flex-direction: row; padding: 14px 18px; border-radius: 14px; justify-content: space-between; }
}

/* why choose */
.sc-why { padding: 72px 0 40px; background: var(--sc-page); }
.sc-why-head { max-width: 760px; margin: 0 0 40px; }
.sc-why-head h2 { margin: 0 0 12px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); }
.sc-why-head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--sc-body); }
.sc-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.sc-span-4 { grid-column: span 4; } .sc-span-5 { grid-column: span 5; } .sc-span-7 { grid-column: span 7; } .sc-span-12 { grid-column: span 12; }
.sc-bc { padding: 32px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 16px; box-shadow: var(--sc-shadow-sm); overflow: hidden; }
.sc-bc-tint { background: #f3f7ff; border-color: #e0e9fb; }
:root[data-bs-theme="dark"] .sc-bc-tint { background: #151838; border-color: var(--sc-line); }
.sc-bc h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--sc-ink); }
.sc-bc p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--sc-body); }
.sc-mini { margin-top: 24px; }
.sc-mini-status { position: relative; padding: 16px 18px; border-radius: 12px; background: var(--sc-card); box-shadow: var(--sc-shadow-sm); }
.sc-mini-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-muted); }
.sc-bars { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.sc-bars i { width: 5px; border-radius: 2px; background: #c7d2fe; } .sc-bars i:nth-child(1) { height: 8px; } .sc-bars i:nth-child(2) { height: 13px; } .sc-bars i:nth-child(3) { height: 20px; background: var(--sc-ink); }
.sc-mini-status ul { margin: 10px 0 0; padding: 0; }
.sc-mini-status li { position: relative; padding-left: 16px; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--sc-ink); }
.sc-mini-status li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.sc-mini-support { text-align: center; }
.sc-avatars { display: inline-flex; gap: 12px; margin: 0 0 14px; padding: 0; }
.sc-avatars li { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sc-card); border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-sm); }
.sc-avatars svg { width: 26px; height: 26px; }
.sc-resp { display: inline-block; margin: 0 !important; padding: 10px 24px; border-radius: 8px; background: #1b1d3f; color: #fff !important; font-size: 15px !important; font-weight: 500; }
.sc-resp strong { color: #22d3ee; }
.sc-mini-scale { margin-top: 56px; }
.sc-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sc-seg i { height: 6px; border-radius: 3px; background: #e5e7eb; } .sc-seg i.on { background: #059669; }
:root[data-bs-theme="dark"] .sc-seg i { background: rgba(255, 255, 255, .15); } :root[data-bs-theme="dark"] .sc-seg i.on { background: #10b981; }
.sc-mini-scale small { display: block; margin-top: 12px; font-size: 12px; color: var(--sc-muted); }
.sc-term { margin: 24px 0 0; padding: 18px 20px; border-radius: 12px; background: #04061c; color: #e5e7eb; font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; box-shadow: 0 12px 30px -10px rgba(4, 6, 28, .5); }
.sc-term b { color: #22d3ee; font-weight: 400; }
.sc-term .dots { display: flex; gap: 6px; margin-bottom: 12px; } .sc-term .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; } .sc-term .dots i:nth-child(2) { background: #f59e0b; } .sc-term .dots i:nth-child(3) { background: #10b981; }
.sc-bc-split { display: flex; gap: 24px; align-items: stretch; padding: 0; }
.sc-bc-split .sc-bc-text { flex: 1 1 55%; padding: 32px; }
.sc-bc-split img { flex: 0 0 38%; align-self: stretch; width: 38%; object-fit: cover; background: linear-gradient(160deg, #eef2ff, #dbeafe); }
.sc-bc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sc-bc-orbit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 0; background: linear-gradient(90deg, #eaf2ff 0, #f3f7ff 60%, #fff 60%); }
:root[data-bs-theme="dark"] .sc-bc-orbit { background: linear-gradient(90deg, #151838 0, #151838 60%, var(--sc-card) 60%); }
.sc-bc-orbit .sc-bc-text { padding: 40px 32px 40px 40px; }
.sc-orbit { position: relative; min-height: 300px; }
.sc-orbit-mark { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); object-fit: cover; object-position: left center; }
.sc-orbit ul { position: absolute; inset: 0; margin: 0; padding: 0; }
.sc-orb { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sc-card); box-shadow: 0 6px 16px rgba(37, 38, 94, .18); color: var(--sc-blue); }
.sc-orb svg { width: 24px; height: 24px; }
.sc-orb-a { left: 14%; top: 56%; } .sc-orb-b { left: 38%; top: 12%; } .sc-orb-c { left: 62%; top: 12%; } .sc-orb-d { left: 80%; top: 56%; } .sc-orb-e { left: 30%; top: 72%; }
@media (max-width: 1199.98px) { .sc-span-4 { grid-column: span 6; } .sc-span-5, .sc-span-7 { grid-column: span 12; } .sc-bento { gap: 24px; } }
@media (max-width: 767.98px) {
  .sc-why { padding: 48px 0 24px; } .sc-why-head h2 { font-size: 34px; }
  .sc-span-4, .sc-span-5, .sc-span-7 { grid-column: span 12; }
  .sc-bc { padding: 24px; } .sc-bc-split, .sc-bc-orbit { display: block; } .sc-bc-split img { width: 100%; height: 220px; } .sc-bc-split .sc-bc-text, .sc-bc-orbit .sc-bc-text { padding: 24px; } .sc-bc-orbit { background: #f3f7ff; } .sc-orbit { min-height: 220px; }
}

/* reviews */
.sc-reviews { padding: 72px 0; background: var(--sc-page); }
.sc-reviews .sc-section-head h2 { font-size: 48px; }
.sc-rev-score { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px !important; font-size: 14px !important; line-height: 1 !important; }
.sc-rev-score strong { font-size: 28px; font-weight: 600; color: var(--sc-ink); }
.sc-rev-stars { display: inline-flex; gap: 2px; color: #d1d5db; }
.sc-rev-stars svg { width: 16px; height: 16px; display: block; }
.sc-rev-score .sc-rev-stars { color: var(--sc-star); }
.sc-rev-stars i { display: inline-flex; font-style: normal; } .sc-rev-stars i.on { color: var(--sc-star); }
.sc-rev-grid { column-count: 3; column-gap: 24px; }
.sc-rev { display: inline-block; width: 100%; margin: 0 0 24px; padding: 24px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 20px; box-shadow: var(--sc-shadow-sm); break-inside: avoid; }
.sc-rev-top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 12px; }
.sc-rev-src { padding: 2px 8px; border: 1px solid #bfdbfe; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sc-rev h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--sc-ink); }
.sc-rev p { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--sc-body); }
.sc-rev footer { display: flex; align-items: center; gap: 12px; }
.sc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; font-size: 12px; font-weight: 600; }
.sc-rev footer strong { font-size: 14px; font-weight: 600; color: var(--sc-ink); }
.sc-rev footer a { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); }
.sc-rev footer a:hover { color: var(--sc-blue); }
.sc-rev-more { text-align: center; }
.sc-rev-more summary { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-card); color: var(--sc-ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; box-shadow: var(--sc-shadow-sm); }
.sc-rev-more summary::-webkit-details-marker { display: none; }
.sc-rev-more .sc-rev-close { display: none; } .sc-rev-more[open] .sc-rev-close { display: inline; } .sc-rev-more[open] .sc-rev-open { display: none; }
.sc-rev-more .sc-rev-grid { margin-top: 24px; text-align: left; }
:root[data-bs-theme="dark"] .sc-rev-src { background: rgba(59, 130, 246, .15); border-color: rgba(59, 130, 246, .35); color: #93c5fd; }
@media (max-width: 1023.98px) { .sc-rev-grid { column-count: 2; } }
@media (max-width: 639.98px) { .sc-rev-grid { column-count: 1; } .sc-reviews { padding: 48px 0; } .sc-reviews .sc-section-head h2 { font-size: 32px; } }
.sc-orbit-mark { position: absolute; left: 50%; top: 50%; width: 38px; height: 42px; transform: translate(-50%, -50%); background: url("../stable/img/stablecluster-logo.svg") left center / auto 42px no-repeat; }
:root[data-bs-theme="dark"] .sc-orbit-mark { background-image: url("../stable/img/stablecluster-logo-dark.svg"); }
.sc-bc-split img { object-fit: contain; object-position: center; padding: 0; background: #f5f7ff; }

/* =====================================================================================================================
   STABLE HOME 3.4b: stats band, product cards, support band, FAQ, steps.
   ===================================================================================================================== */
.sc-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px; background: #fff; color: #25265e; font-size: 14px; font-weight: 600; text-decoration: none; }
.sc-pill:hover { background: #eef2ff; color: #25265e; text-decoration: none; }
.sc-btn-light { background: #f3f4f6; color: #111827; border: 1px solid transparent; } .sc-btn-light:hover { background: #fff; color: #111827; text-decoration: none; }
.sc-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); } .sc-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }

/* stats band */
.sc-band { position: relative; isolation: isolate; padding: 88px 0 72px; color: #fff; background: linear-gradient(to top, rgba(26, 7, 110, .95), rgba(69, 34, 201, .65) 55%, rgba(26, 7, 110, .85)), url("../stable/img/home/datacenter.webp") center / cover no-repeat, #1a066e; overflow: hidden; }
.sc-band-top { display: flex; align-items: center; gap: 40px; margin-bottom: 64px; }
.sc-band-logo { flex: 0 0 auto; padding: 36px 48px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sc-band-logo img { display: block; height: 40px; width: auto; }
.sc-band-arrow { flex: 0 0 56px; height: 1px; background: rgba(255, 255, 255, .7); position: relative; }
.sc-band-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.sc-band-lines { margin: 0; display: flex; flex-direction: column; font-size: 52px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.sc-band-lines span { color: rgba(255, 255, 255, .55); } .sc-band-lines .l2 { color: #fff; } .sc-band-lines .l1, .sc-band-lines .l3 { color: rgba(255, 255, 255, .78); }
.sc-stat-card { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 32px 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 24px; background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sc-stat-card li { padding: 8px 24px; text-align: center; } .sc-stat-card li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.sc-stat-card strong { display: block; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.sc-stat-card span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .8); } .sc-stat-card small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
@media (max-width: 991.98px) { .sc-band { padding: 56px 0; } .sc-band-top { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; } .sc-band-arrow { display: none; } .sc-band-lines { font-size: 34px; } .sc-stat-card { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } .sc-stat-card li:nth-child(3) { border-left: 0; } }

/* products */
.sc-products { padding: 56px 0 24px; background: var(--sc-page); }
.sc-prod-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.sc-prod-hero { grid-column: span 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 20px; color: #fff; background: linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); overflow: hidden; }
.sc-prod-hero h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.2; font-weight: 400; color: #fff; }
.sc-prod-hero p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.sc-prod-hero img { flex: 0 0 160px; width: 160px; height: auto; }
.sc-prod { grid-column: span 2; display: flex; flex-direction: column; padding: 24px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 20px; box-shadow: var(--sc-shadow-sm); }
.sc-prod-first { grid-column: span 2; }
.sc-prod-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #eef2ff; }
:root[data-bs-theme="dark"] .sc-prod-ico { background: rgba(255, 255, 255, .1); }
.sc-prod h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--sc-ink); }
.sc-prod p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--sc-muted); flex: 1; }
.sc-prod-link { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-card); color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--sc-shadow-sm); transition: border-color .15s ease, color .15s ease; }
.sc-prod-link:hover { border-color: var(--sc-blue); color: var(--sc-blue); text-decoration: none; }
@media (max-width: 1199.98px) { .sc-prod-hero { grid-column: span 6; } .sc-prod { grid-column: span 3; } }
@media (max-width: 639.98px) { .sc-prod { grid-column: span 6; } .sc-prod-hero { flex-direction: column; align-items: flex-start; } .sc-prod-hero h2 { font-size: 26px; } }

/* support band */
.sc-support { padding: 32px 0 56px; background: var(--sc-page); }
.sc-support-card { padding: 48px; border-radius: 12px; color: #fff; background: var(--sc-gradient-support); }
.sc-support-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
.sc-support-head h2 { margin: 0 0 14px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.sc-support-head p { max-width: 680px; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.sc-support-chat { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 8px; background: #6d3be0; color: #fff; font-size: 16px; text-decoration: none; }
.sc-support-chat:hover { background: #7c4cf0; color: #fff; text-decoration: none; }
.sc-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.sc-support-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #25265e; }
.sc-support-ico svg { width: 16px; height: 16px; }
.sc-support-num { display: block; margin: 12px 0 6px; font-size: 48px; line-height: 1.1; font-weight: 700; }
.sc-support-label { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: 16px; font-weight: 500; }
.sc-support-label i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; } .sc-support-label small { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.sc-support-col ul { margin: 0; padding: 0; } .sc-support-col li { margin-bottom: 4px; font-size: 14px; color: rgba(255, 255, 255, .8); } .sc-support-col li b { color: #fff; font-weight: 600; }
.sc-support-foot { margin: 32px 0 0; font-size: 14px; color: rgba(255, 255, 255, .7); } .sc-support-foot a { color: #fff; margin-left: 8px; }
@media (max-width: 991.98px) { .sc-support-card { padding: 28px; } .sc-support-head h2 { font-size: 32px; } .sc-support-grid { grid-template-columns: 1fr; gap: 28px; } .sc-support-num { font-size: 40px; } }

/* FAQ */
.sc-faq { padding: 40px 0 72px; background: var(--sc-page); }
.sc-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 64px; align-items: start; }
.sc-faq-list h2 { margin: 0 0 24px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); }
.sc-faq-item { padding: 16px 0; border-bottom: 1px solid var(--sc-line); }
.sc-faq-item summary { position: relative; padding-right: 32px; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--sc-ink); list-style: none; }
.sc-faq-item summary::-webkit-details-marker { display: none; }
.sc-faq-item summary::after { content: ""; position: absolute; right: 4px; top: 8px; width: 8px; height: 8px; border-right: 1.5px solid var(--sc-muted); border-bottom: 1.5px solid var(--sc-muted); transform: rotate(45deg); transition: transform .2s ease; }
.sc-faq-item[open] summary::after { transform: rotate(225deg); }
.sc-faq-item p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--sc-body); }
.sc-faq-card { position: sticky; top: 112px; overflow: hidden; border-radius: 8px; background: #20097d; color: #fff; }
.sc-faq-card img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top; opacity: .75; }
.sc-faq-card-body { padding: 24px; margin-top: -90px; position: relative; background: linear-gradient(to top, #20097d 55%, transparent); }
.sc-faq-card-body p { margin: 0 0 16px; font-size: 18px; line-height: 1.4; color: #fff; }
.sc-faq-card-body > div { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-faq-card .sc-btn { height: 36px; padding: 0 16px; border-radius: 6px; }
@media (max-width: 1023.98px) { .sc-faq-grid { grid-template-columns: 1fr; gap: 32px; } .sc-faq-card { position: static; max-width: 420px; } .sc-faq-list h2 { font-size: 34px; } }

/* steps */
.sc-steps { padding: 56px 0 72px; background: var(--sc-page); border-bottom: 1px solid var(--sc-line); }
.sc-steps-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 0; padding: 0; text-align: center; }
.sc-steps-row::before { content: ""; position: absolute; left: 22%; right: 22%; top: 60px; height: 70px; border-top: 2px dashed rgba(37, 38, 94, .35); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateY(-20px); }
.sc-steps-row li { position: relative; }
.sc-step-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; background: #3a17c4; color: #fff; box-shadow: 0 0 0 6px var(--sc-page); }
.sc-step-ico svg { width: 48px; height: 48px; }
.sc-step-ico b { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #4f46e5; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 3px var(--sc-page); }
.sc-steps-row h3 { margin: 16px 0 6px; font-size: 18px; font-weight: 600; color: var(--sc-ink); }
.sc-steps-row p { margin: 0 auto; max-width: 180px; font-size: 14px; color: var(--sc-muted); }
@media (max-width: 767.98px) { .sc-steps-row { grid-template-columns: 1fr; } .sc-steps-row::before { display: none; } }

/* =====================================================================================================================
   STABLE CLIENT AREA 4.1: logged-in header menu in the stablecluster.com style (ink 500 / 16 px, grey hover pill, 16 px panels
   with a hairline border and soft shadow, no coloured edge), menu hangs next to the logo like the visitor menu.
   ===================================================================================================================== */
@media (min-width: 1200px) {
  .tt-header .main-navbar-wrapper { margin-left: 48px; justify-content: flex-start; }
  .tt-header .main-navbar-wrapper #mainNavbar, .tt-header .main-navbar-wrapper #nav { justify-content: flex-start; }
  .tt-header .main-navbar-wrapper #nav > li > a, .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown > a { color: var(--sc-ink); font: 500 16px/24px var(--sc-font); }
  .tt-header .main-navbar-wrapper #nav > li > a:hover, .tt-header .main-navbar-wrapper #nav > li.show > a,
  .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown > a:hover, .tt-header .tt-toolbar-wrap .tt-secondary-list > li.dropdown.show > a { color: var(--sc-ink); background: transparent; }
  .tt-header .main-navbar-wrapper #nav > li > a:hover::before, .tt-header .main-navbar-wrapper #nav > li.show > a::before { background: #f3f4f6; }
  :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li > a:hover::before, :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li.show > a::before { background: rgba(255, 255, 255, .08); }
  .tt-header .main-navbar-wrapper #nav > li > a::before { border-radius: 8px; }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu, .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu {
    padding: 12px; border: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; border-radius: 16px; background: var(--sc-card); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  }
  .tt-header .main-navbar-wrapper #nav .dropdown-menu { top: calc(100% + 28px); }
  :root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav .dropdown-menu, :root[data-bs-theme="dark"] .tt-header .tt-toolbar-wrap .tt-secondary-list .dropdown-menu { border: 1px solid var(--sc-line) !important; background: var(--sc-card); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); }
  .tt-header #nav .dropdown-menu li.dropdown-item > a, .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a { border-radius: 12px; color: var(--sc-ink); font-weight: 500; }
  .tt-header #nav .dropdown-menu li.dropdown-item > a:hover, .tt-header #nav .dropdown-menu li.dropdown-item > a:focus-visible,
  .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:hover, .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:focus-visible { color: #1d4ed8; background: #eff6ff; }
  :root[data-bs-theme="dark"] .tt-header #nav .dropdown-menu li.dropdown-item > a, :root[data-bs-theme="dark"] .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a { color: var(--sc-ink) !important; }
  :root[data-bs-theme="dark"] .tt-header #nav .dropdown-menu li.dropdown-item > a:hover, :root[data-bs-theme="dark"] .tt-header .tt-secondary-list .dropdown-menu li.dropdown-item > a:hover { color: #93c5fd !important; background: rgba(59, 130, 246, .14); }
}

/* =====================================================================================================================
   STABLE CLIENT AREA 4.2: shape and weight normalisation (stablecluster.com: 12 px cards, 8 px controls, 500-600 weights).
   Earlier Prabhu rules used 16 px cards, 12 px controls and 700-800 weights; these later rules replace them everywhere in the client area.
   ===================================================================================================================== */
.primary-content .card, .primary-content .panel, .sidebar .card-sidebar, .sidebar .panel, .tiles .tile, .tt-client-home-cards .card, .tt-custom-card,
.card.d-block.d-md-none, .primary-content .dataTables_wrapper table.table-list, .primary-content table.table-rounded, .tt-contact-form, .tt-client-home-cards .card-accent-red { border-radius: 12px; }
.primary-content .card > .card-header:first-child, .tt-client-home-cards .card > .card-header:first-child, .sidebar .card-sidebar > .card-header:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; }
.primary-content .card, .primary-content .panel, .sidebar .card-sidebar, .tt-client-home-cards .card, .tiles .tile { box-shadow: var(--sc-shadow-sm); border-color: var(--sc-line); }
:root[data-bs-theme="dark"] .primary-content .card, :root[data-bs-theme="dark"] .primary-content .panel, :root[data-bs-theme="dark"] .sidebar .card-sidebar, :root[data-bs-theme="dark"] .tt-client-home-cards .card, :root[data-bs-theme="dark"] .tiles .tile { box-shadow: none; border-color: var(--sc-line); }
.primary-content h2, .primary-content h3, .primary-content h4, .primary-content h5, .primary-content h6, .card-title, .tt-client-home-cards .card-header h3, .sidebar .card-title, .sidebar .card-header h3,
.card-header .card-title, .panel-title, .tt-custom-card h3 { font-weight: 600; letter-spacing: -.01em; }
.primary-content h2 { font-weight: 500; }
.dataTables_wrapper table.table-list thead th, table.table-rounded thead th, .primary-content table thead th { font-weight: 600; letter-spacing: .06em; }
.primary-content .form-control, .primary-content select.form-control, .primary-content .custom-select, .modal .form-control, .dataTables_filter input, .dataTables_length select, .tt-contact-form .form-control { border-radius: 8px; }
.primary-content .btn, .modal .btn, .sidebar .btn, .primary-content .btn-default, .primary-content .btn-primary, .primary-content .btn-success, .primary-content .btn-danger { border-radius: 8px; font-weight: 600; }
.primary-content .btn-sm, .modal .btn-sm { border-radius: 8px; }
.primary-content .input-group > .form-control:not(:last-child), .primary-content .input-group > .form-control:not(:first-child) { border-radius: 8px; }
.primary-content .input-group > .form-control:not(:last-child):not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.primary-content .input-group > .form-control:not(:first-child):not(:only-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.alert { border-radius: 8px; }
.modal-content, .dropdown-menu { border-radius: 12px; }
.tiles .tile .stat, .tiles .tile .highlight { font-weight: 600; }
.tt-page-header .tt-breadcrumb { font-weight: 500; }
/* the older, more specific Prabhu rules win the cascade for these, so the normalisation is forced here */
.tt-client-home-cards .card, .tt-client-home-cards .card-accent-red, .tt-client-home-cards .card-accent-blue, .tt-client-home-cards .card-accent-green { border-radius: 12px !important; }
.tt-client-home-cards .card-header h3, .tt-client-home-cards .card-header h3.card-title, .tt-client-home-cards .card-title, .sidebar .card-header h3, .sidebar .card-title { font-weight: 600 !important; }
.primary-content h1, .primary-content h2, .primary-content h3, .primary-content h4, .primary-content h5, .primary-content h6 { font-weight: 600 !important; }
.primary-content h2 { font-weight: 500 !important; }
.primary-content .btn-default, .primary-content a.btn-default, .primary-content button.btn-default, .sidebar .btn-default, .sidebar .btn, .modal .btn-default { border-radius: 8px !important; }
.primary-content .btn, .primary-content button[type="submit"], .primary-content input[type="submit"], .modal .btn { border-radius: 8px !important; font-weight: 600 !important; }
.dataTables_filter input, .dataTables_filter input.form-control, .dataTables_length select, .dataTables_length select.form-control { border-radius: 8px !important; }
.primary-content textarea, .primary-content textarea.form-control { border-radius: 8px !important; }
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4a7d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px; background-color: #0b0c1f; }

/* =====================================================================================================================
   STABLE CLIENT AREA 4.4: login / register / password reset right panel = the indigo hero band of stablecluster.com
   (replaces the pale Prabhu gradient). Feature list stays white chips with blue icons; the mock dashboard keeps its white cards.
   ===================================================================================================================== */
.ph-login-panel, :root[data-bs-theme="dark"] .ph-login-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(258.38deg, #532be9 24.08%, #1b076e 91.93%);
}
:root[data-bs-theme="dark"] .ph-login-panel { background:
    linear-gradient(135deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(258.38deg, #3d22b0 24.08%, #14064f 91.93%); }
.ph-login-panel h2, :root[data-bs-theme="dark"] .ph-login-panel h2 { color: #fff; font-weight: 500; }
.ph-login-panel li, .ph-login-panel p, .ph-login-panel-inner li span { color: rgba(255, 255, 255, .92); }
.ph-login-panel-inner li { color: rgba(255, 255, 255, .92); }
.ph-login-panel .ph-login-point-icon, .ph-login-panel .ph-login-point-icon i { color: var(--sc-blue) !important; }
.ph-login-panel .ph-login-point-icon { background: #fff; }
.ph-login-logo .sc-logo-dark { display: none !important; }
:root[data-bs-theme="dark"] .ph-login-logo .sc-logo-light { display: none !important; }
:root[data-bs-theme="dark"] .ph-login-logo .sc-logo-dark { display: block !important; }

/* =====================================================================================================================
   STABLE CLIENT AREA 4.5: invoice / quote page and gateway cards (the gateway modules ship their own inline <style> with
   orange/blue literals; these later rules recolour them for this theme only), verification banner.
   ===================================================================================================================== */
.invoice-container { border-radius: 12px; box-shadow: var(--sc-shadow-sm); }
.invoice-container .payment-wrapper, .invoice-container .mailin-card, .invoice-container .fonepay-card, .invoice-container .ph-inv-aside { border-radius: 12px; border-color: var(--sc-line); }
.invoice-container .invoice-number, .invoice-container .mailin-ref, .invoice-container .fonepay-ref-value { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.invoice-container .copy-ref { border-color: var(--sc-blue); color: var(--sc-blue); border-radius: 8px; }
.invoice-container .copy-ref:hover, .invoice-container .copy-ref:focus-visible { background: var(--sc-blue); color: #fff; }
.invoice-container .whatsapp-btn, .invoice-container .payment-wrapper a.btn { border-radius: 8px; }
.invoice-container .payment-amount strong { color: var(--sc-ink); }
.invoice-container .payment-head, .invoice-container .invoice-card-head { background: #f3f6ff; }
.invoice-container h1, .invoice-container h2, .invoice-container h3 { font-weight: 600; }
/* verification banner: lighter button */
.verification-banner .btn, .verification-banner a.btn { height: 40px; min-height: 40px; border: 1px solid var(--sc-blue); border-radius: 8px; font-weight: 600; }
.invoice-container .fonepay-ref-value, .invoice-container .mailin-ref-value, .invoice-container .mc-ref { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }

/* =====================================================================================================================
   STABLE QUALITY 6.1: contrast fixes found by the automated audit (white text on the lighter dark-mode blue, story card text in dark mode, login note)
   ===================================================================================================================== */
:root[data-bs-theme="dark"] .sc-btn-blue, :root[data-bs-theme="dark"] .sc-search-btn, :root[data-bs-theme="dark"] .tt-header .tt-toolbar-wrap a.btn-sm.sc-btn-register,
:root[data-bs-theme="dark"] .sc-plan.is-popular .sc-plan-cta, :root[data-bs-theme="dark"] .sc-plan-cta:hover, :root[data-bs-theme="dark"] .btn-primary,
:root[data-bs-theme="dark"] .sc-cta-primary, :root[data-bs-theme="dark"] .sc-plan-flag { background: #2563eb; border-color: #2563eb; color: #fff; }
:root[data-bs-theme="dark"] .sc-btn-blue:hover, :root[data-bs-theme="dark"] .sc-search-btn:hover, :root[data-bs-theme="dark"] .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sc-plan.is-popular .sc-plan-flag { background: #2563eb; }
.sc-story, .sc-story blockquote, .sc-story figcaption strong { color: #25265e; }
.sc-story figcaption span { color: rgba(37, 38, 94, .68); }
.ph-login-note, .ph-login-note a { color: rgba(37, 38, 94, .75); }
:root[data-bs-theme="dark"] .ph-login-note, :root[data-bs-theme="dark"] .ph-login-note a { color: rgba(232, 233, 255, .75); }
@media (max-width: 1023.98px) { .sc-hero-in { grid-template-columns: minmax(0, 1fr); } .sc-hero-copy { min-width: 0; } }
@media (max-width: 359.98px) { .sc-hero h1 { font-size: 30px; } .sc-search-btn { padding: 0 14px; } .sc-search input { padding: 0 10px; } }

/* =====================================================================================================================
   STABLE FIX 7.1: client stories as an accordion (active card wide, others collapsed strips with the logo and a vertical name),
   footer sized like the marketing footer (510 px legal card, 14-15 px links, small caps headings).
   ===================================================================================================================== */
.sc-stories-stage { display: flex; gap: 16px; align-items: stretch; height: 420px; }
.sc-story { position: relative; display: block; flex: 0 0 126px; min-width: 0; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 24px; background: rgba(255, 255, 255, .10); color: #fff; cursor: pointer; transition: flex-basis .45s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.sc-story.is-active { flex: 1 1 auto; background: #fff; border-color: #fff; cursor: default; color: #25265e; }
.sc-story:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sc-story-mini { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 12px; opacity: 1; transition: opacity .2s ease; }
.sc-story.is-active .sc-story-mini { opacity: 0; pointer-events: none; }
.sc-story-mini img { max-width: 92px; max-height: 32px; width: auto; height: auto; filter: brightness(0) invert(1); opacity: .9; }
.sc-story-vname { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 10px; font-size: 18px; white-space: nowrap; }
.sc-story-vname strong { font-weight: 600; color: #fff; }
.sc-story-vname em { font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.sc-story-full { display: flex; gap: 32px; height: 100%; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .3s ease .1s; }
.sc-story.is-active .sc-story-full { opacity: 1; visibility: visible; }
.sc-story-full .sc-story-logo { flex: 0 0 356px; min-height: 0; }
.sc-story-full .sc-story-body { align-items: flex-start; }
.sc-story-full .sc-quote { align-self: center; }
.sc-story-by { margin: 0; }
.sc-story-by strong { display: block; font-size: 16px; font-weight: 600; color: #25265e; }
.sc-story-by span { font-size: 14px; color: rgba(37, 38, 94, .68); }
.sc-story blockquote { font-size: 20px; line-height: 1.6; }
@media (max-width: 991.98px) {
  .sc-stories-stage { flex-direction: column; height: auto; }
  .sc-story { flex: 0 0 auto; height: auto; min-height: 76px; }
  .sc-story-mini { position: static; flex-direction: row; justify-content: space-between; padding: 18px 20px; }
  .sc-story-vname { writing-mode: horizontal-tb; transform: none; }
  .sc-story-mini img { order: 2; }
  .sc-story-full { display: none; padding: 24px; flex-direction: column; gap: 20px; }
  .sc-story.is-active .sc-story-full { display: flex; }
  .sc-story.is-active .sc-story-mini { display: none; }
  .sc-story-full .sc-story-logo { flex-basis: auto; min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .sc-story, .sc-story-mini, .sc-story-full { transition: none; } }

/* footer: marketing proportions */
.sc-foot-top { grid-template-columns: 510px minmax(0, 1fr); gap: 40px; }
.sc-legal { padding: 24px; }
.sc-legal-head h2 { font-size: 20px; font-weight: 700; }
.sc-legal-grid h3 { font-size: 16px; font-weight: 700; }
.sc-legal-grid dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.sc-legal-grid dd { font-size: 14px; font-weight: 600; }
.sc-pay h2 { font-size: 15px; font-weight: 700; }
.sc-pay p { font-size: 14px; }
.sc-foot-links { gap: 24px; }
.sc-foot-col h2 { margin-bottom: 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: rgba(37, 38, 94, .62); }
.sc-foot-col li { margin-bottom: 12px; line-height: 1.55; }
.sc-foot-col a { font-size: 15px; font-weight: 500; color: rgba(37, 38, 94, .78); }
.sc-foot-col a:hover { color: var(--sc-blue); }
:root[data-bs-theme="dark"] .sc-foot-col a { color: rgba(232, 233, 255, .78); } :root[data-bs-theme="dark"] .sc-foot-col h2 { color: rgba(232, 233, 255, .6); }
.sc-foot-bottom, .sc-foot-bottom a { font-size: 14px; font-weight: 500; }
@media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: 1fr; } }
.sc-legal-grid dd { font-weight: 500; } .sc-legal-grid h3, .sc-legal-head h2 { font-weight: 600; } .sc-pay h2 { font-weight: 600; }
/* clients strip: contact links on one line with small icons */
.sc-clients-contact a { white-space: nowrap; font-size: 14px; }
.sc-clients-contact svg { flex: 0 0 18px; width: 18px; height: 18px; }
.sc-clients-row { flex-wrap: nowrap; }
@media (max-width: 1199.98px) { .sc-clients-row { flex-wrap: wrap; } .sc-clients-logos { gap: 16px 28px; } }
/* alignment: clients strip spans the full container (logos spread, contact at the right edge, rule fills the heading row); captcha sits under the price chips */
.sc-clients-head span { max-width: none; }
.sc-clients-row { justify-content: space-between; }
.sc-clients-logos { flex: 1 1 auto; justify-content: space-between; gap: 16px 32px; max-width: 760px; }
.sc-search-form .sc-tlds { margin: 20px 0 0; }
.sc-search-form .domainchecker-homepage-captcha { margin-top: 20px; }
@media (max-width: 1199.98px) { .sc-clients-logos { max-width: none; justify-content: flex-start; gap: 16px 28px; } }
.sc-search-form { max-width: none; }
.sc-search-form .sc-search { max-width: 576px; }
.sc-search-form .sc-tlds { flex-wrap: wrap; gap: 8px; max-width: 700px; }
.sc-search-form .sc-tlds li { padding: 5px 10px; }
.sc-search-form .domainchecker-homepage-captcha { max-width: 576px; }

/* client stories: slow accordion. The width animates through flex-grow (flex-basis to/from auto cannot animate), the white card colour cross-fades,
   the quote fades in after the card has mostly opened and the collapsed strip fades out first. */
.sc-story { flex: 0 0 126px; transition: flex-grow .9s cubic-bezier(.65, 0, .35, 1), background-color .7s ease, border-color .7s ease; flex-grow: 0; }
.sc-story.is-active { flex: 1 1 126px; flex-grow: 1; }
.sc-story-mini { transition: opacity .35s ease .15s; }
.sc-story.is-active .sc-story-mini { transition: opacity .25s ease; }
.sc-story-full { min-width: 760px; transition: opacity .5s ease 0s, visibility 0s linear .5s; }
.sc-story.is-active .sc-story-full { transition: opacity .6s ease .45s, visibility 0s linear 0s; }
@media (max-width: 991.98px) { .sc-story-full { min-width: 0; } .sc-story { transition: background-color .5s ease; } }
@media (prefers-reduced-motion: reduce) { .sc-story, .sc-story-mini, .sc-story-full, .sc-story.is-active .sc-story-full { transition: none; } }

/* =====================================================================================================================
   STABLE FIX 7.2: FAQ section: question cards with round chevrons, open item highlighted, smooth reveal; support card = indigo
   panel with a round photo (the 230 px photo is no longer stretched to 384 px).
   ===================================================================================================================== */
.sc-faq { padding: 56px 0 72px; }
.sc-faq-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.sc-faq-list h2 { margin: 0 0 8px; font-size: 44px; }
.sc-faq-lead { margin: 0 0 28px; font-size: 16px; color: var(--sc-body); }
.sc-faq-item { margin: 0 0 12px; padding: 0; border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-card); box-shadow: var(--sc-shadow-sm); transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.sc-faq-item:hover { border-color: #bfdbfe; }
.sc-faq-item[open] { border-color: #93c5fd; background: var(--sc-card); box-shadow: 0 8px 24px -12px rgba(37, 99, 235, .25); }
:root[data-bs-theme="dark"] .sc-faq-item:hover, :root[data-bs-theme="dark"] .sc-faq-item[open] { border-color: rgba(96, 165, 250, .5); }
.sc-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--sc-ink); }
.sc-faq-item summary::after { position: static; flex: 0 0 32px; width: 32px; height: 32px; margin: 0; border: 1px solid var(--sc-line); border-radius: 50%; background: #f3f6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transform: none; transition: transform .3s ease, background-color .2s ease; content: ""; }
.sc-faq-item[open] summary::after { transform: rotate(180deg); background-color: #dbeafe; }
:root[data-bs-theme="dark"] .sc-faq-item summary::after { background-color: rgba(255, 255, 255, .08); }
.sc-faq-item summary:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: -2px; border-radius: 12px; }
.sc-faq-item p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.75; color: var(--sc-body); animation: scFaqIn .35s ease; }
@keyframes scFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sc-faq-card { position: sticky; top: 112px; padding: 32px 28px; border-radius: 16px; text-align: center; color: #fff; background:
  radial-gradient(circle at 80% 0%, rgba(129, 140, 248, .35), transparent 55%),
  linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); box-shadow: 0 20px 40px -16px rgba(32, 9, 125, .55); }
.sc-faq-card img { display: block; width: 132px; height: 132px; margin: 0 auto 20px; padding: 0; border: 4px solid rgba(255, 255, 255, .85); border-radius: 50%; object-fit: cover; object-position: center 20%; opacity: 1; }
.sc-faq-card h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; color: #fff; }
.sc-faq-card p { margin: 0 0 24px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.sc-faq-card-actions { display: flex; flex-direction: column; gap: 10px; }
.sc-faq-card .sc-btn { width: 100%; height: 44px; border-radius: 8px; }
@media (max-width: 1023.98px) { .sc-faq-grid { grid-template-columns: 1fr; gap: 32px; } .sc-faq-card { position: static; max-width: none; } .sc-faq-list h2 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .sc-faq-item p { animation: none; } }
/* skip link stays fully off-screen until focused (also in element screenshots) */
.ph-skip-link { top: -120px; transform: none; }
.ph-skip-link:focus { top: 8px; }

/* =====================================================================================================================
   STABLE FIX 7.3: footer + container identical to the marketing site (measured at 1913 px: content 128..1785, legal card 667 px,
   columns at 835/1083/1330/1578, 12 px caps headings at .45 alpha, 16/500 links, 14/500 values at .8 alpha).
   The side padding is Tailwind's: 16 / 32 / 80 (>=1280) / 128 (>=1536) / 160 (>=1920); the wrapper is 1920 px wide and centred.
   ===================================================================================================================== */
@media (min-width: 1536px) { .container { padding-inline: 128px; } }
@media (min-width: 1920px) { .container { padding-inline: 160px; } }
.sc-foot-top { grid-template-columns: minmax(0, 33fr) minmax(0, 47fr); gap: 40px; }
.sc-foot-links { gap: 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-footer { padding-top: 64px; }
.sc-legal-head h2, .sc-legal-grid h3, .sc-pay h2 { line-height: 1.5; }
.sc-legal-head { margin-bottom: 24px; }
.sc-legal-grid h3 { margin-bottom: 14px; }
.sc-legal-grid dt { margin-top: 14px; font-size: 12px; line-height: 1.35; color: rgba(37, 38, 94, .45); }
.sc-legal-grid dd { margin-top: 3px; line-height: 1.6; color: rgba(37, 38, 94, .8); }
.sc-legal-grid dd a { color: inherit; }
.sc-pay { margin-top: 32px; padding: 0; }
.sc-pay h2 { font-size: 16px; }
.sc-pay p { color: rgba(37, 38, 94, .55); }
.sc-foot-col h2 { color: rgba(37, 38, 94, .45); line-height: 1.35; }
.sc-foot-col a { font-size: 16px; font-weight: 500; color: rgba(37, 38, 94, .7); }
.sc-foot-products { font-weight: 500; color: rgba(37, 38, 94, .6); }
.sc-foot-bottom { color: rgba(37, 38, 94, .55); }
.sc-foot-bottom a { color: rgba(37, 38, 94, .6); }
:root[data-bs-theme="dark"] .sc-legal-grid dt, :root[data-bs-theme="dark"] .sc-foot-col h2 { color: rgba(232, 233, 255, .55); }
:root[data-bs-theme="dark"] .sc-legal-grid dd, :root[data-bs-theme="dark"] .sc-foot-col a { color: rgba(232, 233, 255, .8); }
:root[data-bs-theme="dark"] .sc-pay p, :root[data-bs-theme="dark"] .sc-foot-bottom, :root[data-bs-theme="dark"] .sc-foot-bottom a, :root[data-bs-theme="dark"] .sc-foot-products { color: rgba(232, 233, 255, .6); }
@media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: minmax(0, 1fr); } .sc-foot-links { gap: 24px; } }
@media (max-width: 767.98px) { .sc-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .sc-foot-links { grid-template-columns: 1fr; } }
.sc-legal-grid h3 { margin-bottom: 16px; } .sc-legal-grid dt { margin-top: 17px; }
.sc-foot-col h2 { margin-bottom: 16px; }
.sc-foot-col li { margin-bottom: 4px; line-height: 32px; }
.sc-foot-col a { display: inline-block; line-height: 1.55; vertical-align: middle; }
@media (min-width: 768px) {
  .sc-foot-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .sc-foot-bottom p:nth-child(2) { text-align: center; }
  .sc-foot-bottom p:nth-child(3) { text-align: right; }
}
.sc-foot-brand { margin-top: 52px; padding-bottom: 20px; }
.sc-footer { padding-bottom: 42px; }

/* company card: columns and label spacing as on the marketing footer (left column wide enough for "COMPANY REGISTRATION NUMBER" on one line, divider is the right column's own border + 24 px padding) */
.sc-legal-grid { grid-template-columns: minmax(0, 1.11fr) minmax(0, 1fr); }
.sc-legal-grid > div + div { margin-left: 0; padding-left: 24px; border-left: 1px solid var(--sc-line); }
.sc-legal-grid dt { letter-spacing: .05em; margin-top: 16px; white-space: nowrap; }
.sc-legal-grid h3 { margin-bottom: 15px; }
@media (max-width: 767.98px) { .sc-legal-grid { grid-template-columns: 1fr; } .sc-legal-grid > div + div { padding-left: 0; border-left: 0; } .sc-legal-grid dt { white-space: normal; } }
.sc-legal-grid dd { margin-bottom: 1px; }
@media (min-width: 1700px) { .sc-legal-grid { grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); } }
.sc-legal-grid dt { margin-top: 17px; } .sc-legal-grid > div > dl > dt:first-child { margin-top: 16px; }
@media (min-width: 1700px) { .sc-legal-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); } }

/* =====================================================================================================================
   STABLE FIX 7.4: logged-in menu = visitor menu geometry (same left edge, 12 px button padding, 4 px gap, 40 px pill, 16/500 text),
   so nothing shifts when a visitor signs in. The items stay 24 px tall (WHMCS autoCollapse); the pill is drawn by ::before.
   ===================================================================================================================== */
@media (min-width: 1200px) {
  .tt-header .main-navbar-wrapper #nav > li > a { padding: 0 12px !important; }
  .tt-header .main-navbar-wrapper #nav > li + li { margin-left: 4px; }
  .tt-header .main-navbar-wrapper #nav > li > a::before { inset: -8px 0; border-radius: 8px; }
  .tt-header .main-navbar-wrapper #nav > li > a.dropdown-toggle::after { margin-left: 8px; }
}
@media (min-width: 1200px) {
  /* chevron instead of Bootstrap's triangle, same footprint as the visitor menu's icon (8 px gap + 10 px) */
  .tt-header .main-navbar-wrapper #nav > li > a.dropdown-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: -3px 3px 0 8px; border: 0; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; vertical-align: middle; transform: rotate(45deg); transition: transform .25s ease; }
  .tt-header .main-navbar-wrapper #nav > li.show > a.dropdown-toggle::after { transform: rotate(225deg); margin-top: 0; }
}
@media (min-width: 1200px) { .tt-header .main-navbar-wrapper #nav > li > a.dropdown-toggle::after { margin: -3px 4px 0 0; } .tt-header .main-navbar-wrapper #nav > li.show > a.dropdown-toggle::after { margin-top: 0; } }
@media (min-width: 1200px) { .tt-header .main-navbar-wrapper #nav > li > a.dropdown-toggle::after { margin-right: 2px; } }

/* =====================================================================================================================
   STABLE FIX 7.5: plan cards are a swipe / drag carousel on phones and small tablets (native scroll-snap + mouse drag from prabhuhost.js,
   dots under the strip). Desktop keeps the grid.
   ===================================================================================================================== */
@media (max-width: 767.98px) {
  .sc-plan-grid, #order-standard_cart .sc-cart-plans { display: flex; flex-wrap: nowrap; gap: 14px; margin-inline: -16px; padding: 4px 16px 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; align-items: stretch; }
  .sc-plan-grid::-webkit-scrollbar, #order-standard_cart .sc-cart-plans::-webkit-scrollbar { display: none; }
  .sc-plan-grid > .sc-plan, #order-standard_cart .sc-cart-plans .sc-plan { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; user-select: none; -webkit-user-select: none; }
  #order-standard_cart .sc-cart-plans > [class*="col-"] { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; }
  #order-standard_cart .sc-cart-plans > [class*="col-"] .sc-plan { width: 100%; }
  .sc-plan-grid.is-dragging, #order-standard_cart .sc-cart-plans.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .sc-plan-grid.is-dragging a, #order-standard_cart .sc-cart-plans.is-dragging a { pointer-events: none; }
}
.sc-dots { display: none; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
@media (max-width: 767.98px) { .sc-dots { display: flex; } }
.sc-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c7d2fe; transition: width .25s ease, background-color .25s ease; }
.sc-dots button[aria-current="true"] { width: 24px; border-radius: 4px; background: var(--sc-blue); }
:root[data-bs-theme="dark"] .sc-dots button { background: rgba(255, 255, 255, .25); }

/* =====================================================================================================================
   STABLE DASHBOARD 4.6 (cosmetic, no new data): notice banner from $clientsstats, KPI tiles with icon chip + status line,
   panels as clean cards with a tinted header and divided list rows. Panel markup, ids and hooks are untouched.
   ===================================================================================================================== */
.sc-dash-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid #c7d2fe; border-radius: 12px; background: linear-gradient(90deg, #eef2ff 0%, #e0e7ff 55%, #ddd6fe 100%); color: var(--sc-ink); }
.sc-dash-banner.is-overdue { border-color: #fecaca; background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 60%, #fde8e8 100%); }
.sc-dash-banner-ico { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; color: #4f46e5; }
.sc-dash-banner.is-overdue .sc-dash-banner-ico { color: #dc2626; }
.sc-dash-banner-ico svg { width: 22px; height: 22px; }
.sc-dash-banner p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; }
.sc-dash-banner p span { color: rgba(37, 38, 94, .72); }
.sc-dash-banner-cta { flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; background: var(--sc-blue); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.sc-dash-banner.is-overdue .sc-dash-banner-cta { background: #dc2626; }
.sc-dash-banner-cta:hover { color: #fff; text-decoration: none; filter: brightness(.92); }
:root[data-bs-theme="dark"] .sc-dash-banner { border-color: rgba(129, 140, 248, .35); background: linear-gradient(90deg, rgba(79, 70, 229, .22), rgba(124, 58, 237, .16)); color: var(--sc-ink); }
:root[data-bs-theme="dark"] .sc-dash-banner.is-overdue { border-color: rgba(248, 113, 113, .4); background: linear-gradient(90deg, rgba(220, 38, 38, .2), rgba(220, 38, 38, .1)); }
:root[data-bs-theme="dark"] .sc-dash-banner p span { color: rgba(232, 233, 255, .72); }
@media (max-width: 767.98px) { .sc-dash-banner { flex-wrap: wrap; } .sc-dash-banner-cta { width: 100%; justify-content: center; } }

/* KPI tiles */
.tiles .tile { position: relative; display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 112px; padding: 18px 20px; border-radius: 12px; }
.tiles .tile > i { position: static; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.tiles .tile .tt-box-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tiles .tile .title { order: 1; font-size: 14px; font-weight: 500; color: var(--sc-body); }
.tiles .tile .stat { order: 2; margin: 2px 0; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--sc-ink); }
.tiles .tile .sub { order: 3; font-size: 13px; font-weight: 500; color: var(--sc-muted); }
.tiles .tile .sub.is-ok { color: #15803d; } .tiles .tile .sub.is-warn { color: #b45309; } .tiles .tile .sub.is-bad { color: #b91c1c; }
:root[data-bs-theme="dark"] .tiles .tile .sub.is-ok { color: #86efac; } :root[data-bs-theme="dark"] .tiles .tile .sub.is-warn { color: #fcd34d; } :root[data-bs-theme="dark"] .tiles .tile .sub.is-bad { color: #fca5a5; }
.tiles .tile:hover { border-color: #bfdbfe; box-shadow: 0 10px 24px -14px rgba(37, 99, 235, .35); transform: translateY(-2px); }
.tiles .tile { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; } .tiles .tile:hover { transform: none; } }

/* panels: header strip + divided rows */
.tt-client-home-cards .card { border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.tt-client-home-cards .card-header { padding: 14px 20px; background: #f6f8ff; border-bottom: 1px solid var(--sc-line); }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header { background: rgba(255, 255, 255, .04); }
.tt-client-home-cards .card-header h3 { font-size: 15px; font-weight: 600; }
.tt-client-home-cards .list-group-item { padding: 14px 20px; border-color: var(--sc-line); }
.tt-client-home-cards .list-group-item:hover { background: #f6f8ff; }
:root[data-bs-theme="dark"] .tt-client-home-cards .list-group-item:hover { background: rgba(255, 255, 255, .05); }
.tt-client-home-cards .card-body { padding: 18px 20px; }
.tt-client-home-cards .card-footer { padding: 12px 20px; background: transparent; border-top: 1px solid var(--sc-line); }

/* Header cart: a clearer icon with a consistent touch target and badge. */
.tt-header .tt-toolbar-wrap .toolbar li a.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
}
.tt-header .tt-toolbar-wrap .toolbar li a.cart-btn i {
  font-size: 24px;
  line-height: 1;
  width: auto;
}
.tt-header .tt-toolbar-wrap .toolbar li a.cart-btn .tt-cart-badge {
  top: 2px;
  right: 0;
}

/* Minimal login: one focused form; registration and reset retain their layouts. */
.ph-login.sc-login-minimal {
  --login-ink: #172033;
  --login-muted: #64748b;
  --login-line: #e2e8f0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sc-login-minimal .ph-login-main { min-height: 100vh; min-height: 100dvh; padding: 40px 24px 24px; }
.sc-login-minimal .ph-login-logo { align-self: center; }
.sc-login-minimal .ph-login-logo img { height: 32px; }
.sc-login-minimal .ph-login-center { max-width: 380px; margin: auto; padding: 56px 0; }
.sc-login-minimal .ph-login-head { margin-bottom: 32px; text-align: left; }
.sc-login-minimal .ph-login-head h1 { color: var(--login-ink); font-size: 28px; font-weight: 650; letter-spacing: -.035em; }
.sc-login-minimal .ph-login-head p { color: var(--login-muted); font-size: 14px; line-height: 1.6; }
.sc-login-minimal .form-control-label { color: var(--login-ink); font-size: 13px; font-weight: 500; }
.sc-login-minimal .input-group { min-height: 46px; border-color: var(--login-line); border-radius: 7px; }
.sc-login-minimal .input-group .form-control { height: 44px; min-width: 0; color: var(--login-ink); font-size: 16px; border-radius: 7px; }
.sc-login-minimal .input-group:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.sc-login-minimal .btn-reveal-pw { min-width: 44px; min-height: 44px; color: var(--login-muted); font-size: 16px; }
.sc-login-minimal .ph-forgot { color: var(--login-muted); font-size: 12px; font-weight: 400; }
.sc-login-minimal .ph-forgot:hover { color: #2563eb; }
.sc-login-minimal .ph-remember { margin: 0 0 20px; min-height: 32px; font-size: 13px; color: var(--login-muted); }
.sc-login-minimal .ph-remember input { width: 16px; height: 16px; accent-color: #2563eb; }
.sc-login-minimal .ph-login-btn { min-height: 46px; border-radius: 7px !important; background: #2563eb; border-color: #2563eb; color: #fff; font-size: 14px; letter-spacing: 0; text-transform: none; box-shadow: none; }
.sc-login-minimal .ph-login-btn:hover { background: #1d4ed8; border-color: #1d4ed8; transform: none; box-shadow: none; }
.sc-login-minimal .ph-login-links { flex-direction: column; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid var(--login-line); color: var(--login-muted); font-size: 13px; text-align: center; }
.sc-login-minimal .ph-login-links a { color: #2563eb; font-weight: 500; }
.sc-login-minimal .ph-login-lang { min-height: 44px; color: var(--login-muted); font-size: 12px; }
.sc-login-minimal .ph-login-note { color: var(--login-muted); font-size: 12px; max-width: 380px; }
.sc-login-minimal :is(a, button, input[type="checkbox"]):focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; }
:root[data-bs-theme="dark"] .sc-login-minimal { --login-ink: #f1f5f9; --login-muted: #94a3b8; --login-line: #334155; }
:root[data-bs-theme="dark"] .ph-login.sc-login-minimal,
:root[data-bs-theme="dark"] .sc-login-minimal .ph-login-main { background: #0f172a !important; }
:root[data-bs-theme="dark"] .sc-login-minimal .input-group { background: #182234; border-color: var(--login-line); }
:root[data-bs-theme="dark"] .sc-login-minimal .ph-login-links a { color: #93c5fd; }
@media (max-width: 575.98px) {
  .sc-login-minimal .ph-login-main { padding: 28px 24px 20px; }
  .sc-login-minimal .ph-login-center { padding: 40px 0; }
  .sc-login-minimal .ph-login-head h1 { font-size: 26px; }
}

/* Reference-inspired login: blue brand panel and a quiet sign-in surface. */
.ph-login.sc-login-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; padding: 24px; min-height: 100vh; min-height: 100dvh; }
.sc-login-split .sc-login-story { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 36px 40px 48px; background: var(--sc-gradient-band); border-radius: 10px; overflow: hidden; color: #fff; }
.sc-login-brand { display: inline-flex; align-self: flex-start; }
.sc-login-brand img { width: 200px; height: auto; filter: brightness(0) invert(1); }
.sc-login-split .ph-login-main { min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); padding: 36px 48px 8px; }
.sc-login-split .ph-login-main > .ph-login-logo { display: none; }
.sc-login-split .ph-login-center { max-width: 420px; padding: 56px 0; }
.sc-login-split .ph-login-head { text-align: center; margin-bottom: 36px; }
.sc-login-split .ph-login-head h1 { font-size: clamp(26px, 2.2vw, 34px); }
.sc-login-split .input-group { min-height: 52px; border-radius: 8px; }
.sc-login-split .input-group .form-control { height: 50px; padding-inline: 16px; }
.sc-login-split .ph-login-btn { min-height: 52px; background: var(--sc-blue); border-color: var(--sc-blue); }
.sc-login-split .ph-login-links { border: 0; padding-top: 4px; }
.sc-login-split .ph-login-note { max-width: 440px; }
.sc-login-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--login-muted); font-size: 13px; }
.sc-login-divider::before, .sc-login-divider::after { content: ""; flex: 1; height: 1px; background: var(--login-line); }
.sc-login-art { position: relative; width: 100%; max-width: 430px; margin: 64px auto 48px; padding: 0 18px 26px 0; }
.sc-login-console { padding: 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 16px; background: #fff; color: #172033; box-shadow: 0 24px 64px rgba(14,32,118,.22); transform: rotate(-3deg); }
.sc-console-top { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 13px; }
.sc-console-mark { display: grid; place-items: center; width: 28px; height: 28px; background: #f0edff; border-radius: 7px; color: var(--sc-blue); font-weight: 700; }
.sc-console-dots { margin-left: auto; color: #94a3b8; }
.sc-console-label { font-size: 9px; font-weight: 600; letter-spacing: .12em; color: #64748b; }
.sc-console-heading { margin-top: 8px; font-size: 20px; font-weight: 600; letter-spacing: -.035em; }
.sc-console-metrics { display: flex; justify-content: space-between; margin-top: 24px; }
.sc-console-metrics span { display: block; color: #64748b; font-size: 11px; margin-bottom: 4px; }
.sc-console-metrics strong { font-size: 24px; font-weight: 600; }
.sc-console-metrics strong.sc-console-live { font-size: 14px; color: #15805e; }
.sc-console-chart { display: block; width: 100%; height: auto; margin: 22px 0 14px; }
.sc-console-service { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid #eef1f6; font-size: 11px; }
.sc-console-service > span:last-child { margin-left: auto; color: #64748b; }
.sc-console-status { width: 6px; height: 6px; border-radius: 50%; background: #16a077; }
.sc-login-float { position: absolute; right: -10px; bottom: 4px; display: flex; gap: 12px; align-items: center; padding: 18px 22px; border-radius: 12px; background: #fff; color: #172033; box-shadow: 0 12px 40px rgba(14,32,118,.2); }
.sc-login-float > span { display: grid; place-items: center; width: 36px; height: 36px; background: #e9faf2; border-radius: 50%; color: #16805d; font-size: 20px; }
.sc-login-float strong { font-size: 13px; font-weight: 600; }
.sc-login-float small { display: block; margin-top: 4px; font-size: 11px; color: #64748b; }
.sc-login-story-copy { text-align: center; }
.sc-login-story-copy h2 { margin: 0 0 16px; color: #fff; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.15; font-weight: 600; letter-spacing: -.04em; }
.sc-login-story-copy p { margin: 0; color: #dce5ff; font-size: 14px; line-height: 1.7; }
@media (max-width: 991.98px) {
  .ph-login.sc-login-split { display: block; padding: 0; }
  .sc-login-split .sc-login-story { display: none; }
  .sc-login-split .ph-login-main { min-height: 100vh; min-height: 100dvh; padding: 32px 24px 24px; }
  .sc-login-split .ph-login-main > .ph-login-logo { display: inline-block; }
  .sc-login-split .ph-login-center { padding: 48px 0; }
}

/* STABLE LOGIN 8.1: audit fixes. The sign-in / register pages are focused screens: no site footer (the old rule targeted footer.ph-footer, the Stable footer is footer.sc-footer). Touch targets >= 44px, readable text sizes, language button looks like a button. */
.ph-page-auth footer.sc-footer { display: none !important; }
.sc-login-minimal .ph-forgot { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: #4b5563; }
.sc-login-minimal .ph-forgot:hover { color: #2563eb; text-decoration: underline; }
.sc-login-minimal .ph-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.sc-login-minimal .ph-remember input { flex: none; width: 20px; height: 20px; }
.sc-login-minimal .ph-login-links p a, .sc-login-minimal .ph-login-note a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
.sc-login-minimal .ph-login-lang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--sc-line, #e5e7eb); border-radius: 999px; background: #fff; font-size: 14px; color: #374151; transition: border-color .2s ease, background-color .2s ease; }
.sc-login-minimal .ph-login-lang:hover, .sc-login-minimal .ph-login-lang:focus-visible { border-color: #93c5fd; background: #eff6ff; }
.sc-login-minimal .ph-login-note { font-size: 13px; }
:root[data-bs-theme="dark"] .sc-login-minimal .ph-forgot { color: #cbd5e1; }
:root[data-bs-theme="dark"] .sc-login-minimal .ph-login-lang { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); color: #e2e8f0; }
:root[data-bs-theme="dark"] .sc-login-minimal .ph-login-lang:hover { background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .4); }

/* Compact verification notice within the order flow. */
body:has(#order-standard_cart) .verification-banner.email-verification { padding-block: 8px; background: #fffbf3; border-bottom-color: #f1e6cf; font-size: 13px; }
body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { width: auto; max-width: 100%; margin-left: auto; min-height: 44px; height: auto; padding: 8px 14px; border: 1px solid #e4d7ba; border-radius: 7px; background: transparent; color: #78551d; font-size: 12px; box-shadow: none; }
body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action:hover { background: #f6ecd9; }
body:has(#order-standard_cart) .verification-banner.email-verification .btn.close { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 7px; background: transparent; }
body:has(#order-standard_cart) .verification-banner.email-verification .fas { font-size: 18px; }
:root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification { background: #292316; border-color: #514329; }
:root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { color: #f5dba6; border-color: #665537; }
:root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action:hover { background: #3b301e; }
@media (max-width: 575.98px) { body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { margin-left: 0; } }

/* Verification notice: compact, brand-aligned and independent of Bootstrap column ordering. */
.verification-banner.email-verification {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #dbe7fb;
  background: #f7faff;
  color: #334155;
  font-weight: 400;
}
.verification-banner.email-verification .verification-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}
.verification-banner.email-verification .verification-banner-icon {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
}
.verification-banner.email-verification .verification-banner-icon i {
  float: none;
  margin: 0;
  color: inherit;
  font-size: 16px;
}
.verification-banner.email-verification .text {
  flex: 1 1 auto;
  min-width: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.verification-banner.email-verification .verification-banner-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover,
body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #cbdcf7;
  border-radius: 7px;
  background: #fff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
}
.verification-banner.email-verification .btn.btn-action:hover,
body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action:hover {
  border-color: #9dbcf0;
  background: #eff6ff;
  color: #1d4ed8;
}
.verification-banner.email-verification .btn.close,
body:has(#order-standard_cart) .verification-banner.email-verification .btn.close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  opacity: 1;
}
.verification-banner.email-verification .btn.close:hover {
  background: #eaf2ff;
  color: #1d4ed8;
}
.verification-banner.email-verification .btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
:root[data-bs-theme="dark"] .verification-banner.email-verification,
:root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification {
  border-bottom-color: #293b59;
  background: #111c2f;
  color: #dbeafe;
}
:root[data-bs-theme="dark"] .verification-banner.email-verification .verification-banner-icon { background: #1d3152; color: #93c5fd; }
:root[data-bs-theme="dark"] .verification-banner.email-verification .text { color: #dbeafe; }
:root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action,
:root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action {
  border-color: #37527a;
  background: #172640;
  color: #bfdbfe;
}
:root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action:hover { border-color: #4d70a4; background: #1d3152; color: #fff; }
:root[data-bs-theme="dark"] .verification-banner.email-verification .btn.close { color: #94a3b8; }
:root[data-bs-theme="dark"] .verification-banner.email-verification .btn.close:hover { background: #1d3152; color: #dbeafe; }
@media (max-width: 575.98px) {
  .verification-banner.email-verification { padding: 10px 0; }
  .verification-banner.email-verification .verification-banner-inner { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .verification-banner.email-verification .text { padding-top: 7px; }
  .verification-banner.email-verification .verification-banner-actions { flex: 0 0 100%; padding-left: 48px; }
  .verification-banner.email-verification .btn.btn-action { flex: 1 1 auto; }
}

/* STABLE FIX: password reset captcha. The stock include (col-md-8 > row > p + col-6 + col-6) was squeezed into the 436px form: a 281px block indented 78px, text, image and field stacked on separate lines. Now full width: instruction on top, image and code field side by side (52px, like the other captcha rows). Error alert: no stray bullet. */
.ph-reset-body .tt-form-content > .text-center, .ph-reset-body .text-center.margin-bottom { margin: 4px 0 20px; text-align: left !important; }
.ph-reset-body .text-center.margin-bottom > .row { margin: 0; }
.ph-reset-body #default-captcha-domainchecker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 0; padding: 0; text-align: left; }
.ph-reset-body #default-captcha-domainchecker > p { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--sc-muted, #64748b); }
.ph-reset-body #default-captcha-domainchecker > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; }
.ph-reset-body .col-md-8.mx-auto { flex: 0 0 100%; max-width: 100%; padding: 0; }
.ph-reset-body #inputCaptchaImage { display: block; height: 52px; width: auto; border-radius: 8px; }
.ph-reset-body #inputCaptcha { height: 52px; max-width: 220px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.ph-reset-body .alert ul { margin: 0; padding: 0; list-style: none; }
.ph-reset-body .alert li { margin: 0; }
@media (max-width: 420px) { .ph-reset-body #default-captcha-domainchecker { grid-template-columns: minmax(0, 1fr); } .ph-reset-body #inputCaptcha { max-width: none; } }
.ph-reset .alert ul, .ph-page-reset .alert ul { margin: 0; padding: 0; list-style: none; }
.ph-reset .alert li, .ph-page-reset .alert li { margin: 0; padding: 0; list-style: none; }
.ph-page-reset .alert li::marker, .ph-reset .alert li::marker { content: none; }
@media (max-width: 1199.98px) { .dataTables_wrapper { max-width: 100%; overflow-x: auto; } }

/* STABLE SIDEBAR REF: WHMCS's own page sidebar ($primarySidebar / $secondarySidebar, markup unchanged) restyled like the reference navigation: one white surface, small uppercase section labels, flat 44px rows with a muted icon, soft blue active row. */
.col-lg-4 > .sidebar, .d-lg-none.sidebar { margin: 0 0 16px; padding: 10px 10px 8px; border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.sidebar > .card.card-sidebar { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
.sidebar > .card.card-sidebar + .card.card-sidebar { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--sc-line) !important; }
.sidebar .card-sidebar > .card-header { padding: 10px 12px 6px !important; border: 0 !important; background: transparent !important; }
.sidebar .card-sidebar > .card-header .card-title { gap: 8px; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8 !important; }
.sidebar .card-sidebar > .card-header .card-title > i:not(.card-minimise) { display: none !important; }
.sidebar .card-sidebar > .card-header .card-minimise { color: #cbd5e1; font-size: 12px; }
.sidebar .card-sidebar .list-group { margin: 0; padding: 0; border: 0; border-radius: 0; gap: 2px; display: grid; }
.sidebar .card-sidebar .list-group-item { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: var(--sc-body) !important; font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.sidebar .card-sidebar .list-group-item > i, .sidebar .card-sidebar .list-group-item > svg { flex: none; width: 20px; margin: 0 !important; color: #64748b; text-align: center; }
.sidebar .card-sidebar a.list-group-item:hover { background: #f1f5f9 !important; color: var(--sc-ink) !important; }
.sidebar .card-sidebar .list-group-item.active, .sidebar .card-sidebar a.list-group-item.active:hover { background: #eff6ff !important; color: var(--sc-blue) !important; font-weight: 600; border-left: 0 !important; }
.sidebar .card-sidebar .list-group-item.active > i { color: var(--sc-blue); }
.sidebar .card-sidebar .list-group-item .badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #eff6ff; color: var(--sc-blue); font-size: 12px; font-weight: 600; }
.sidebar .card-sidebar .card-body { padding: 6px 12px 12px !important; }
.sidebar .card-sidebar .card-footer { padding: 8px 12px 12px !important; border: 0 !important; background: transparent !important; }
.sidebar .card-sidebar > .card-body .btn, .sidebar .card-sidebar > .card-footer .btn { min-height: 44px; border-radius: 10px; }
.sidebar .card-sidebar a.list-group-item:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: -2px; }
:root[data-bs-theme="dark"] .col-lg-4 > .sidebar, :root[data-bs-theme="dark"] .d-lg-none.sidebar { background: rgba(255, 255, 255, .04); border-color: #334155; box-shadow: none; }
:root[data-bs-theme="dark"] .sidebar > .card.card-sidebar + .card.card-sidebar { border-top-color: #334155 !important; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item { color: #cbd5e1 !important; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item > i { color: #94a3b8; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item:hover { background: rgba(255, 255, 255, .06) !important; color: #f1f5f9 !important; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item.active, :root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item.active:hover { background: rgba(59, 130, 246, .18) !important; color: #93c5fd !important; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item.active > i { color: #93c5fd; }
@media (prefers-reduced-motion: reduce) { .sidebar .card-sidebar .list-group-item { transition: none; } }
.col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active), .d-lg-none.sidebar .card-sidebar a.list-group-item:not(.active) { color: var(--sc-body) !important; }
.col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active):hover { color: var(--sc-ink) !important; }
:root[data-bs-theme="dark"] .col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active) { color: #cbd5e1 !important; }
:root[data-bs-theme="dark"] .col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active):hover { color: #f1f5f9 !important; }

/* ===== STABLE DASH REF: client area dashboard, section by section from a reference layout (sample data of the reference not used) ===== */
:root { --sc-gut: 16px; }
@media (min-width: 768px) { :root { --sc-gut: 32px; } } @media (min-width: 1280px) { :root { --sc-gut: 80px; } } @media (min-width: 1536px) { :root { --sc-gut: 128px; } } @media (min-width: 1920px) { :root { --sc-gut: 160px; } }
/* 1. verification notice = rounded card inside the content width */
.verification-banner { width: calc(100% - 2 * var(--sc-gut)); max-width: calc(1920px - 2 * var(--sc-gut)); margin: 24px auto 0; padding: 0; border: 1px solid #c7d2fe; border-radius: 16px; background: #eef2ff; color: var(--sc-ink); }
.verification-banner .verification-banner-inner { max-width: none; padding: 14px 20px; }
.verification-banner .text { font-size: 15px; font-weight: 500; }
:root[data-bs-theme="dark"] .verification-banner { background: rgba(99, 102, 241, .12); border-color: rgba(129, 140, 248, .35); color: #e2e8f0; }
/* 2. sidebar on the dashboard: three separate cards with a hairline under each header, like the reference */
.sc-page-clientareahome .col-lg-4 > .sidebar { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.sc-page-clientareahome .sidebar > .card.card-sidebar { margin: 0 0 20px !important; padding: 0; border: 1px solid var(--sc-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; }
.sc-page-clientareahome .sidebar > .card.card-sidebar + .card.card-sidebar { margin-top: 0 !important; padding-top: 0; border-top: 1px solid var(--sc-line) !important; }
.sc-page-clientareahome .sidebar .card-sidebar > .card-header { padding: 18px 22px 14px !important; border-bottom: 1px solid var(--sc-line) !important; }
.sc-page-clientareahome .sidebar .card-sidebar .card-body { padding: 18px 22px 22px !important; font-size: 15px; line-height: 1.6; color: var(--sc-body); }
.sc-page-clientareahome .sidebar .card-sidebar .card-body strong, .sc-page-clientareahome .sidebar .card-sidebar .card-body b { font-size: 17px; font-weight: 600; color: var(--sc-ink); }
.sc-page-clientareahome .sidebar .card-sidebar .list-group { padding: 8px; }
.sc-page-clientareahome .sidebar .card-sidebar a.list-group-item[href*="logout"], .sc-page-clientareahome .sidebar .card-sidebar a.list-group-item[href*="logout"] > i { color: #b91c1c !important; }
.sc-page-clientareahome .sidebar .card-sidebar a.list-group-item[href*="logout"]:hover { background: #fef2f2 !important; }
.sc-page-clientareahome .sidebar .card-sidebar .card-body .btn { width: 100%; min-height: 46px; border-radius: 10px; font-weight: 600; }
/* contacts: empty state with an icon, dashed add button */
.sc-page-clientareahome .sidebar [menuitemname="Client Contacts"] .card-body { text-align: center; }
.sc-page-clientareahome .sidebar [menuitemname="Client Contacts"] .card-body .btn { margin-top: 14px; border: 1px dashed #94a3b8; background: #fff; }
.sc-page-clientareahome .sidebar [menuitemname="Client Contacts"] .card-body .btn:hover { border-color: var(--sc-blue); border-style: solid; }
/* 3. overdue notice */
.sc-dash-banner.is-overdue { border-color: #fecaca; background: #fef2f2; }
.sc-dash-banner.is-overdue .sc-dash-banner-cta, .btn-danger-solid { background: #991b1b !important; border-color: #991b1b !important; color: #fff !important; }
.sc-dash-banner.is-overdue .sc-dash-banner-cta:hover, .btn-danger-solid:hover { background: #7f1d1d !important; border-color: #7f1d1d !important; }
.sc-dash-banner strong { font-variant-numeric: tabular-nums; }
/* 4. stat cards: label, icon chip, big number, caption, arrow bottom-right; red edge for overdue invoices */
.tiles .tile { position: relative; padding-bottom: 18px; }
.tiles .tile::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 16px; height: 16px; background: currentColor; color: #64748b; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.tiles .tile:hover::after { transform: translateX(3px); }
.tiles .tile.ph-tile-attn:has(.sub.is-bad) { border-color: #fca5a5 !important; background: #fff; }
.tiles .tile.ph-tile-attn:has(.sub.is-bad) .stat, .tiles .tile.ph-tile-attn:has(.sub.is-bad)::after { color: #b91c1c; }
.tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) { border-color: #fcd34d !important; background: #fff; }
.tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) .stat, .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad))::after { color: #b45309; }
/* 5. home panels: bigger title with a hairline under the header */
.tt-client-home-cards .card > .card-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--sc-line); }
.tt-client-home-cards .card > .card-header .card-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); }
.tt-client-home-cards .card .card-body { padding: 18px 22px; font-size: 15px; line-height: 1.65; }
.tt-client-home-cards .card .card-footer.ph-card-cta { display: flex; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--sc-line); background: transparent; }
.tt-client-home-cards .card .card-footer.ph-card-cta .btn { min-height: 46px; padding: 0 22px; border-radius: 10px; font-weight: 600; }
/* active product row: status pill with a dot */
.tt-client-home-cards .label-success, .tt-client-home-cards .label-active { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; font-size: 12px; font-weight: 600; }
.tt-client-home-cards .label-success::before, .tt-client-home-cards .label-active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
:root[data-bs-theme="dark"] .sc-page-clientareahome .sidebar > .card.card-sidebar { background: rgba(255, 255, 255, .04) !important; border-color: #334155 !important; box-shadow: none !important; }
:root[data-bs-theme="dark"] .sc-page-clientareahome .sidebar .card-sidebar > .card-header, :root[data-bs-theme="dark"] .tt-client-home-cards .card > .card-header, :root[data-bs-theme="dark"] .tt-client-home-cards .card .card-footer.ph-card-cta { border-color: #334155 !important; }
:root[data-bs-theme="dark"] .sc-page-clientareahome .sidebar .card-sidebar .card-body strong { color: #f1f5f9; }
:root[data-bs-theme="dark"] .sc-dash-banner.is-overdue { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:has(.sub.is-bad) { background: transparent; border-color: rgba(248, 113, 113, .5) !important; }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) { background: transparent; border-color: rgba(252, 211, 77, .45) !important; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-title { color: #f1f5f9; }
@media (prefers-reduced-motion: reduce) { .tiles .tile::after { transition: none; } }

/* STABLE DASH REF 2 (from the reference's DESIGN.md / code.html): breadcrumb above the title, red amount in the overdue sentence, shortcut links in the brand colour with matching icons. Fonts and colours stay StableCluster's (Euclid, indigo/blue), not the reference's Plus Jakarta Sans / Inter. */
.sc-page-clientareahome .tt-page-header-info { display: flex; flex-direction: column; }
.sc-page-clientareahome .tt-page-header-info .tt-breadcrumb { order: -1; margin: 0 0 8px; }
.sc-amt-bad { font-weight: 700; color: #b91c1c; font-variant-numeric: tabular-nums; }
:root[data-bs-theme="dark"] .sc-amt-bad { color: #fca5a5; }
.sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:not([href*="logout"]) { color: var(--sc-blue) !important; }
.sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:not([href*="logout"]) > i { color: var(--sc-blue); }
.sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item { border-bottom: 1px solid var(--sc-line-soft, #eef2f7) !important; border-radius: 0 !important; }
.sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:last-child { border-bottom: 0 !important; }
:root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:not([href*="logout"]) { color: #93c5fd !important; }
:root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item { border-bottom-color: #334155 !important; }
.sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active), .sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active) > i { color: #b91c1c !important; }
:root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active), :root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active) > i { color: #fca5a5 !important; }

/* ===== STABLE DASH REF 3: pixel pass against the reference (UI bugs + missing pieces that WHMCS data supports) ===== */
/* verification card: no stray rule under it, 8px icon chip, button + close like the reference */
.verification-banner, .verification-banner .verification-banner-inner { box-shadow: none; }
.verification-banner .verification-banner-inner { border: 0; }
.verification-banner::after, .verification-banner::before { display: none; }
.verification-banner .verification-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(79, 70, 229, .1); color: #4338ca; }
.verification-banner .btn.btn-action { min-height: 38px; border-radius: 8px; border: 1px solid rgba(79, 70, 229, .25); background: transparent; color: #4338ca; font-size: 13px; font-weight: 600; }
.verification-banner .btn.close { color: #64748b; opacity: 1; }
/* overdue notice: 40px red icon chip */
.sc-dash-banner.is-overdue .sc-dash-banner-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #fee2e2; }
.sc-dash-banner.is-overdue { padding: 18px 20px; gap: 16px; }
.sc-dash-banner.is-overdue .sc-dash-banner-cta { min-height: 40px; padding: 0 20px; border-radius: 8px; font-size: 13px; font-weight: 600; }
/* stat cards: label row, 30px number with air above, caption row */
.tiles .tile { padding: 20px; }
.tiles .tile .title { margin: 0 0 14px; }
.tiles .tile .stat { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; }
.tiles .tile .sub { margin-top: 8px; }
.tiles .tile > i { width: 36px; height: 36px; border-radius: 8px; }
/* sidebar cards: header hairline inset like the reference (not full bleed) */
.sc-page-clientareahome .sidebar .card-sidebar > .card-header { margin: 0 22px; padding: 20px 0 14px !important; }
.sc-page-clientareahome .sidebar .card-sidebar .card-body { padding: 16px 22px 22px !important; }
.sc-page-clientareahome .sidebar .card-sidebar .list-group { padding: 4px 22px 14px; }
.sc-page-clientareahome .sidebar .card-sidebar .list-group-item { padding: 0 !important; min-height: 46px; border-radius: 0 !important; }
/* client details: name + badge, mono id, address */
.sc-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-who strong { font-size: 17px; font-weight: 700; color: var(--sc-ink); }
.sc-vbadge { padding: 2px 8px; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #b45309; font-size: 11px; font-weight: 600; }
.sc-vbadge.is-ok { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.sc-cid { margin: 2px 0 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; color: #64748b; }
.sc-addr { font-size: 15px; line-height: 1.6; color: var(--sc-body); }
.sc-addr::first-line { color: var(--sc-body); }
/* contacts empty state: icon chip above the text, dashed add button */
.sc-page-clientareahome [menuitemname="Client Contacts"] [menuitemname="No Contacts"] { flex-direction: column; justify-content: center; gap: 10px; min-height: 0; padding: 20px 0 6px !important; font-size: 13px; text-align: center; color: #64748b !important; }
.sc-page-clientareahome [menuitemname="Client Contacts"] [menuitemname="No Contacts"]::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: #e5eeff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.4 3.2-5 6.5-5s5.7 1.6 6.5 5M17 5l4 4M21 5l-4 4'/%3E%3C/svg%3E") center / 22px no-repeat; }
.sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer .btn { width: 100%; border: 1px dashed #94a3b8; background: #fff; border-radius: 10px; min-height: 44px; }
.sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer { padding: 6px 22px 22px !important; }
.sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer .btn:hover { border-style: solid; border-color: var(--sc-blue); color: var(--sc-blue); }
:root[data-bs-theme="dark"] .sc-vbadge { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
:root[data-bs-theme="dark"] .sc-vbadge.is-ok { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
:root[data-bs-theme="dark"] .sc-who strong { color: #f1f5f9; }
:root[data-bs-theme="dark"] .sc-addr { color: #cbd5e1; }
:root[data-bs-theme="dark"] .sc-cid { color: #94a3b8; }
:root[data-bs-theme="dark"] .sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer .btn { background: transparent; border-color: #475569; }
:root[data-bs-theme="dark"] .verification-banner .verification-banner-icon { background: rgba(129, 140, 248, .18); color: #c7d2fe; }
:root[data-bs-theme="dark"] .verification-banner .btn.btn-action { color: #c7d2fe; border-color: rgba(129, 140, 248, .4); }
:root[data-bs-theme="dark"] .sc-dash-banner.is-overdue .sc-dash-banner-ico { background: rgba(239, 68, 68, .18); }
aside.verification-banner.email-verification { padding: 0 !important; border: 1px solid #dbe4ff !important; border-radius: 16px !important; background: #eff4ff !important; box-shadow: none !important; }
aside.verification-banner.email-verification .verification-banner-inner { padding: 14px 20px !important; }
aside.verification-banner.email-verification .btn.btn-action { background: #fff !important; }
:root[data-bs-theme="dark"] aside.verification-banner.email-verification { background: rgba(99, 102, 241, .12) !important; border-color: rgba(129, 140, 248, .35) !important; }
:root[data-bs-theme="dark"] aside.verification-banner.email-verification .btn.btn-action { background: transparent !important; }
.tt-client-home-cards .card > .card-header { background: #fbfcff !important; border-radius: 16px 16px 0 0; }
.tt-client-home-cards .card { border-radius: 16px; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card > .card-header { background: rgba(255, 255, 255, .03) !important; }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:has(.sub.is-bad) .stat, :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:has(.sub.is-bad)::after { color: #f87171; }
:root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) .stat, :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad))::after { color: #fbbf24; }

/* ===== STABLE PRODUCT DETAILS: service details page (clientarea.php?action=productdetails) restyled from a reference layout. The overview body is generated by WHMCS's cPanel module (markup not editable here), so this is CSS + the dial recolour in prabhuhost.js; all WHMCS ids/forms/links are untouched. ===== */
.sc-band-domain { margin: 6px 0 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; color: rgba(255, 255, 255, .85); text-transform: none; }
.sc-page-clientareaproductdetails .tt-page-header h1 { text-transform: none; }
/* overdue / unpaid notice: icon chip, title, red Pay button on the right */
.sc-page-clientareaproductdetails #alertOverdueInvoice, .sc-page-clientareaproductdetails #alertUnpaidInvoice { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 20px; border: 1px solid #fecaca; border-radius: 14px; background: #fef2f2; color: var(--sc-ink); font-size: 15px; font-weight: 600; }
.sc-page-clientareaproductdetails #alertUnpaidInvoice { border-color: #fde68a; background: #fffbeb; }
.sc-page-clientareaproductdetails #alertOverdueInvoice > .float-right, .sc-page-clientareaproductdetails #alertUnpaidInvoice > .float-right { float: none !important; order: 3; margin-left: auto; }
.sc-page-clientareaproductdetails #alertOverdueInvoice .btn, .sc-page-clientareaproductdetails #alertUnpaidInvoice .btn { min-height: 40px; padding: 0 20px; border-radius: 8px; border: 0; background: #b91c1c; color: #fff !important; font-size: 13px; font-weight: 600; }
.sc-page-clientareaproductdetails #alertOverdueInvoice .btn:hover { background: #991b1b; }
.sc-page-clientareaproductdetails #alertUnpaidInvoice .btn { background: #b45309; }
.sc-page-clientareaproductdetails #alertOverdueInvoice::before, .sc-page-clientareaproductdetails #alertUnpaidInvoice::before { content: ""; order: 0; flex: none; width: 34px; height: 34px; border-radius: 8px; background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v5M12 18h.01'/%3E%3C/svg%3E") center / 20px no-repeat; }
/* cPanel overview panels: one card language */
.sc-page-clientareaproductdetails #tabOverview .card.panel { margin-bottom: 24px !important; border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); overflow: hidden; }
.sc-page-clientareaproductdetails #tabOverview .card.panel > .card-header { padding: 16px 24px 14px; border-bottom: 1px solid var(--sc-line); background: #fbfcff; }
.sc-page-clientareaproductdetails #tabOverview .card.panel > .card-header .card-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.sc-page-clientareaproductdetails #tabOverview .card.panel > .card-body { padding: 22px 24px; }
/* package + usage side by side, same height */
.sc-page-clientareaproductdetails #tabOverview > .row { align-items: stretch; }
.sc-page-clientareaproductdetails #tabOverview > .row > [class*="col-"] { display: flex; }
.sc-page-clientareaproductdetails #tabOverview > .row > [class*="col-"] > .card { flex: 1; }
.sc-page-clientareaproductdetails #cPanelPackagePanel > .card-body { text-align: left !important; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.sc-page-clientareaproductdetails .cpanel-package-details em { display: block; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.sc-page-clientareaproductdetails .cpanel-package-details h4 { margin: 4px 0 8px !important; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--sc-ink); }
.sc-page-clientareaproductdetails .cpanel-package-details a { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 500; color: var(--sc-blue); word-break: break-all; }
.sc-page-clientareaproductdetails #cPanelPackagePanel p { margin: 0; }
.sc-page-clientareaproductdetails #cPanelPackagePanel .btn { min-height: 44px; padding: 0 20px; border: 1px solid var(--sc-blue); border-radius: 8px; background: #fff; color: var(--sc-blue); font-weight: 600; }
.sc-page-clientareaproductdetails #cPanelPackagePanel .btn:hover { background: var(--sc-blue); color: #fff; }
/* usage dials */
.sc-page-clientareaproductdetails .cpanel-usage-stats > .row > [class*="col-"] { font-size: 14px; color: var(--sc-body); }
.sc-page-clientareaproductdetails .cpanel-usage-stats strong { font-size: 16px; font-weight: 600; color: var(--sc-ink); }
.sc-page-clientareaproductdetails .cpanel-usage-stats input.usage-dial { font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; color: var(--sc-ink) !important; }
.sc-page-clientareaproductdetails .cpanel-usage-stats .limit-near { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--sc-line); font-size: 13px; color: #64748b !important; }
/* quick shortcuts: 5-column grid of outlined tiles with the module's own icons */
.sc-page-clientareaproductdetails .cpanel-feature-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; }
.sc-page-clientareaproductdetails .cpanel-feature-row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; }
.sc-page-clientareaproductdetails .cpanel-feature-row a.d-block { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 120px; margin: 0 !important; padding: 16px 12px; border: 1px solid var(--sc-line); border-radius: 14px; background: #fff; color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.sc-page-clientareaproductdetails .cpanel-feature-row a.d-block img { width: 44px; height: 44px; object-fit: contain; }
.sc-page-clientareaproductdetails .cpanel-feature-row a.d-block:hover, .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block:focus-visible { border-color: #93c5fd; background: #f8fbff; color: var(--sc-blue); transform: translateY(-2px); }
/* quick create email */
.sc-page-clientareaproductdetails #frmCreateEmailAccount .form-control, .sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group-text { min-height: 46px; border-radius: 10px; }
.sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; background: #f1f5f9; }
.sc-page-clientareaproductdetails #frmCreateEmailAccount .btn { min-height: 46px; border-radius: 10px; font-weight: 600; }
/* billing overview + configurable options: label above value, in a responsive grid */
.sc-page-clientareaproductdetails #cPanelBillingOverviewPanel > .card-body > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 24px; margin: 0; }
.sc-page-clientareaproductdetails #cPanelBillingOverviewPanel > .card-body > .row > [class*="col-"] { display: contents; }
.sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; text-align: left !important; }
.sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > :first-child { font-size: 13px; color: #64748b; }
.sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > :last-child { font-size: 16px; font-weight: 600; color: var(--sc-ink); }
body:has(#alertOverdueInvoice).sc-page-clientareaproductdetails #cPanelBillingOverviewPanel #nextDueDate > :last-child { color: #b91c1c; }
body:has(#alertOverdueInvoice).sc-page-clientareaproductdetails #cPanelBillingOverviewPanel #nextDueDate > :last-child::after { content: " (Overdue)"; font-weight: 500; }
.sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel > .card-body { display: grid; gap: 12px; }
.sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--sc-line-soft, #eef2f7); }
.sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; text-align: left !important; }
.sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row > :last-child { font-weight: 600; color: var(--sc-ink); }
/* sidebar: primary action row, cancellation in red */
.sc-page-clientareaproductdetails [id$="Service_Details_Actions-cpanel"] { border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #3730a3 !important; font-weight: 600; border-radius: 10px !important; }
.sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] { margin-top: 8px; border-top: 1px solid var(--sc-line) !important; border-radius: 0 !important; color: #b91c1c !important; }
.sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] > i, .sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] .sidebar-menu-item-icon { color: #b91c1c !important; }
.sc-page-clientareaproductdetails .sidebar .card-sidebar .list-group-item { text-decoration: none; }
.sc-page-clientareaproductdetails .sidebar .card-sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 12px; width: 100%; }
/* dark mode */
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #tabOverview .card.panel { background: rgba(255, 255, 255, .04); border-color: #334155; box-shadow: none; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #tabOverview .card.panel > .card-header { background: rgba(255, 255, 255, .03); border-color: #334155; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-package-details h4, :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-usage-stats strong, :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > :last-child, :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row > :last-child { color: #f1f5f9; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-package-details a { color: #93c5fd; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #cPanelPackagePanel .btn { background: transparent; border-color: #60a5fa; color: #93c5fd; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-usage-stats input.usage-dial { color: #f1f5f9 !important; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block { background: rgba(255, 255, 255, .04); border-color: #334155; color: #e2e8f0; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block img { background: #fff; border-radius: 10px; padding: 4px; box-sizing: content-box; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block:hover { background: rgba(59, 130, 246, .12); border-color: #60a5fa; color: #93c5fd; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group-text { background: rgba(255, 255, 255, .06); }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #alertOverdueInvoice { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #f1f5f9; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #alertOverdueInvoice::before { background-color: rgba(239, 68, 68, .2); }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails [id$="Service_Details_Actions-cpanel"] { background: rgba(99, 102, 241, .16) !important; border-color: rgba(129, 140, 248, .4) !important; color: #c7d2fe !important; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] { color: #fca5a5 !important; border-top-color: #334155 !important; }
@media (prefers-reduced-motion: reduce) { .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block { transition: none; transform: none !important; } }

/* STABLE SIDEBAR ICONS: WHMCS draws the sidebar item icons with Font Awesome 5 Pro SOLID glyphs (fas) and a few regular ones (far), a heavy filled style that does not match the rest of the theme (thin 1.7px line icons). The glyph is hidden and the same line icon family is drawn with a CSS mask, per Font Awesome class, so the markup, ids and JS (spinner placeholder, custom actions) are untouched. */
.sidebar .list-group-item i:is(.fa-address-card, .fa-arrow-left, .fa-ban, .fa-calendar-alt, .fa-circle, .fa-cog, .fa-comments, .fa-credit-card, .fa-cubes, .fa-download, .fa-folder, .fa-globe, .fa-info, .fa-info-circle, .fa-key, .fa-life-ring, .fa-list, .fa-plus, .fa-rocket, .fa-rss, .fa-share, .fa-shopping-cart, .fa-sign-in, .fa-sign-in-alt, .fa-sync, .fa-ticket-alt, .fa-university, .fa-user) { display: inline-block; flex: none; width: 20px; height: 20px; margin: 0 !important; font-size: 0 !important; line-height: 0; background-color: currentColor; -webkit-mask: var(--sc-ico, none) center / 20px 20px no-repeat; mask: var(--sc-ico, none) center / 20px 20px no-repeat; }
.sidebar .list-group-item i:is(.fa-address-card, .fa-arrow-left, .fa-ban, .fa-calendar-alt, .fa-circle, .fa-cog, .fa-comments, .fa-credit-card, .fa-cubes, .fa-download, .fa-folder, .fa-globe, .fa-info, .fa-info-circle, .fa-key, .fa-life-ring, .fa-list, .fa-plus, .fa-rocket, .fa-rss, .fa-share, .fa-shopping-cart, .fa-sign-in, .fa-sign-in-alt, .fa-sync, .fa-ticket-alt, .fa-university, .fa-user)::before { content: none !important; }
.sidebar .list-group-item i.fa-circle { width: 16px; height: 16px; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; }
.sidebar .list-group-item .loading { display: none !important; }
.sidebar .list-group-item .sidebar-menu-item-icon-wrapper { display: inline-flex; align-items: center; }
.sidebar .list-group-item i.fa-sign-in { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 17l5-5-5-5M15 12H4M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-sign-in-alt { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 17l5-5-5-5M15 12H4M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-key { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22M11 12l9-9M16 7l3 3M14 9l2 2%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-ban { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M5.6 5.6l12.8 12.8%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-shopping-cart { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%229%22 cy=%2220%22 r=%221.5%22/%3E%3Ccircle cx=%2218%22 cy=%2220%22 r=%221.5%22/%3E%3Cpath d=%22M2 3h3l2.4 12h11l2-8H6%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-cubes { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 3l8 4.5v9L12 21l-8-4.5v-9z%22/%3E%3Cpath d=%22M4 7.5l8 4.5 8-4.5M12 12v9%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-credit-card { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223%22 y=%226%22 width=%2218%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18M7 15h3%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-university { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-sync { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 12a8 8 0 0 1 13.7-5.6L20 9M20 4v5h-5M20 12a8 8 0 0 1-13.7 5.6L4 15M4 20v-5h5%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-globe { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-share { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M15 5l5 5-5 5M20 10H9a5 5 0 0 0-5 5v4%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-ticket-alt { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 6h14a1 1 0 0 1 1 1v3a2 2 0 0 0 0 4v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a2 2 0 0 0 0-4V7a1 1 0 0 1 1-1z%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-list { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-info-circle { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v5M12 8h.01%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-info { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v5M12 8h.01%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-download { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 4v11M7 11l5 5 5-5M5 20h14%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-rocket { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 12h4l2.5-7 5 14 2.5-7h4%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-comments { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-6l-5 4v-4H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-address-card { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-user { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-calendar-alt { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18M8 3v4M16 3v4%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-rss { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 19h.01M5 12a7 7 0 0 1 7 7M5 5a14 14 0 0 1 14 14%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-arrow-left { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M16 8l4 4-4 4M20 12H9%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-folder { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-life-ring { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.5%22/%3E%3Cpath d=%22M5.6 5.6l3.9 3.9M14.5 14.5l3.9 3.9M18.4 5.6l-3.9 3.9M9.5 14.5l-3.9 3.9%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-circle { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226.5%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-plus { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E"); }
.sidebar .list-group-item i.fa-cog { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1%22/%3E%3C/svg%3E"); }

/* sidebar text: the label inside each row carried its own link blue, so row colours (dark text, indigo primary action, red cancellation) never applied */
.sidebar .card-sidebar a.list-group-item .sidebar-menu-item-label { color: inherit !important; font-weight: inherit; }
.sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-cpanel"] { border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #3730a3 !important; font-weight: 600; border-radius: 10px !important; padding: 0 12px !important; margin-bottom: 4px; }
.sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"] { margin-top: 8px; border-top: 1px solid var(--sc-line) !important; border-radius: 0 !important; color: #b91c1c !important; }
.sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"] i { color: #b91c1c !important; }
.sidebar .card-sidebar a.list-group-item:not(.active) { color: var(--sc-body) !important; }
.sidebar .card-sidebar a.list-group-item:not(.active):hover { color: var(--sc-ink) !important; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item:not(.active) { color: #cbd5e1 !important; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-cpanel"] { background: rgba(99, 102, 241, .16) !important; border-color: rgba(129, 140, 248, .4) !important; color: #c7d2fe !important; }
:root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"], :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"] i { color: #fca5a5 !important; }
.sidebar .card-sidebar a.list-group-item.active, .sidebar .card-sidebar a.list-group-item.active:hover { color: var(--sc-blue) !important; }

/* sidebar buttons (Update / New Contact...): same line icons */
.sidebar .card-sidebar .btn i:is(.fa-pencil-alt, .fa-plus) { display: inline-block; width: 18px; height: 18px; margin-right: 6px; font-size: 0 !important; line-height: 0; background-color: currentColor; -webkit-mask: var(--sc-ico, none) center / 18px 18px no-repeat; mask: var(--sc-ico, none) center / 18px 18px no-repeat; }
.sidebar .card-sidebar .btn i:is(.fa-pencil-alt, .fa-plus)::before { content: none !important; }
.sidebar .card-sidebar .btn i.fa-pencil-alt { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z%22/%3E%3Cpath d=%22M13.5 6.5l4 4%22/%3E%3C/svg%3E"); }
.sidebar .card-sidebar .btn i.fa-plus { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E"); }

/* ===== STABLE SERVICES LIST (clientarea.php?action=products) from a reference layout; real data only (server/IP, auto-renew, grid view and sort are not provided by WHMCS here) ===== */
.sc-band-badge { display: inline-flex; align-items: center; margin-left: 12px; padding: 4px 12px; border: 1px solid rgba(110, 231, 183, .45); border-radius: 999px; background: rgba(16, 185, 129, .16); color: #a7f3d0; font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
/* sidebar status filter: coloured dots + count pills */
.sidebar .card-sidebar a.list-group-item i.fa-circle { -webkit-mask-image: none; mask-image: none; background: transparent; border: 0; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.sidebar .card-sidebar a.list-group-item[menuitemname="Active"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Paid"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Answered"] i.fa-circle { background: #22c55e; box-shadow: none; }
.sidebar .card-sidebar a.list-group-item[menuitemname="Pending"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Unpaid"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Customer-Reply"] i.fa-circle { background: #f59e0b; box-shadow: none; }
.sidebar .card-sidebar a.list-group-item[menuitemname="Suspended"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Expired"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Open"] i.fa-circle { background: #ef4444; box-shadow: none; }
.sidebar .card-sidebar a.list-group-item[menuitemname="Terminated"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Closed"] i.fa-circle { background: #cbd5e1; box-shadow: none; }
.sidebar .card-sidebar a.list-group-item[menuitemname="Cancelled"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Refunded"] i.fa-circle { background: #64748b; box-shadow: none; }
.sidebar .card-sidebar a.list-group-item .badge, .sidebar .card-sidebar a.list-group-item .sidebar-menu-item-badge .badge { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; text-align: center; }
.sidebar .card-sidebar a.list-group-item.active .badge, .sidebar .card-sidebar a.list-group-item.active .sidebar-menu-item-badge .badge { background: #3730a3; color: #fff; }
/* toolbar + table + footer as one layout */
.sc-page-clientareaproducts #tableServicesList_wrapper { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "filter length" "table table" "info paginate"; gap: 14px 16px; align-items: center; }
.sc-page-clientareaproducts #tableServicesList_wrapper > .listtable { display: contents; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter { grid-area: filter; float: none; margin: 0; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label, .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { width: 100%; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { min-height: 48px; padding-left: 44px; border-radius: 12px; border: 1px solid var(--sc-line); background: #fff; font-size: 15px; box-shadow: none; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_length { grid-area: length; margin: 0; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_length select { min-height: 44px; border-radius: 10px; }
.sc-page-clientareaproducts #tableServicesList_wrapper > .listtable > table { grid-area: table; width: 100%; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_info { grid-area: info; margin: 0; padding: 0; font-size: 14px; color: #64748b; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_paginate { grid-area: paginate; margin: 0; justify-self: end; }
/* product cell: icon chip, bold name, mono domain */
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] { position: relative; padding-left: 74px !important; }
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"]::before { content: ""; position: absolute; left: 16px; top: 50%; width: 42px; height: 42px; transform: translateY(-50%); border-radius: 12px; background: #eef2ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='7' rx='2'/%3E%3Crect x='4' y='13' width='16' height='7' rx='2'/%3E%3Cpath d='M8 7.5h.01M8 16.5h.01'/%3E%3C/svg%3E") center / 22px no-repeat; }
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] strong { font-size: 16px; font-weight: 600; color: var(--sc-ink); }
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; color: #475569; word-break: break-all; }
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a:hover { color: var(--sc-blue); }
.sc-page-clientareaproducts #tableServicesList .ph-row-action { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 8px; font-weight: 600; }
.sc-page-clientareaproducts #tableServicesList .ph-row-action:hover { background: #3730a3; border-color: #3730a3; color: #fff; }
/* addons note */
.sc-addons-note { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 16px 20px; border: 1px dashed #cbd5e1; border-radius: 14px; background: transparent; color: var(--sc-body); font-size: 14px; }
.sc-addons-note > svg { flex: none; color: #4338ca; }
.sc-addons-note p { margin: 0; flex: 1; }
.sc-addons-note a { flex: none; font-weight: 600; color: #3730a3; text-decoration: underline; text-underline-offset: 3px; }
:root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { background: rgba(255, 255, 255, .05); border-color: #334155; }
:root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"]::before { background-color: rgba(99, 102, 241, .18); }
:root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] strong { color: #f1f5f9; }
:root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a { color: #94a3b8; }
:root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList .ph-row-action { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item .badge { background: rgba(255, 255, 255, .08); color: #cbd5e1; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item.active .badge { background: #6366f1; color: #fff; }
:root[data-bs-theme="dark"] .sc-addons-note { border-color: #475569; }
:root[data-bs-theme="dark"] .sc-addons-note a, :root[data-bs-theme="dark"] .sc-addons-note > svg { color: #a5b4fc; }
@media (max-width: 767.98px) { .sc-page-clientareaproducts #tableServicesList_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filter" "length" "table" "info" "paginate"; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_paginate { justify-self: start; } .sc-addons-note { flex-wrap: wrap; } }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label { position: relative; display: block; margin: 0; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #94a3b8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { background-image: none !important; }
.sc-page-clientareaproducts #tableServicesList td.ssl-info { width: 56px; padding-left: 16px; padding-right: 0; }
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a { word-break: normal; overflow-wrap: anywhere; }
@media (min-width: 992px) { .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] { min-width: 320px; } }

/* ticket information rows (sidebar): label over value. The generic sidebar row rule made them flex, putting label and value side by side on different baselines. */
.sidebar .card-sidebar .list-group-item.ticket-details-children { display: block !important; min-height: 0; padding: 10px 22px !important; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--sc-ink) !important; }
.sidebar .card-sidebar .list-group-item.ticket-details-children .title { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.sidebar .card-sidebar .list-group-item.ticket-details-children br { display: none; }
.sidebar .card-sidebar .list-group-item.ticket-details-children .ticket-requestor-name { margin-right: 8px; }
.sidebar .card-sidebar .list-group-item.ticket-details-children .label { vertical-align: middle; }
.sidebar .card-sidebar .ticket-cc-item { padding: 10px 22px !important; }
.sidebar .card-sidebar .ticket-cc-email { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.sidebar .card-sidebar .ticket-cc-email .email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.sidebar .card-sidebar .ticket-cc-email .delete-cc-email { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: #b91c1c; }
.sidebar .card-sidebar .ticket-cc-email .delete-cc-email:hover { background: #fef2f2; }
.sidebar .card-sidebar .ticket-cc-email .delete-cc-email i { color: #b91c1c !important; font-size: 18px; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item.ticket-details-children { color: #f1f5f9 !important; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .ticket-cc-email .delete-cc-email i, :root[data-bs-theme="dark"] .sidebar .card-sidebar .ticket-cc-email .delete-cc-email { color: #fca5a5; }
.sidebar .card-sidebar .list-group-item.w-hidden, .sidebar .card-sidebar .list-group-item.hidden, .sidebar .card-sidebar .list-group-item[hidden] { display: none !important; }
.sidebar .card-sidebar .ticket-cc-email .email { flex: 1 1 0; display: block; max-width: none; }
.sidebar .card-sidebar .ticket-cc-email .email, .sidebar .card-sidebar .ticket-cc-email .email.truncate { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; overflow: hidden; text-overflow: ellipsis; }

/* ===== STABLE MARKDOWN EDITOR + ATTACHMENTS (ticket forms): one card instead of frames inside frames ===== */
.md-editor { border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: none; }
.md-editor.active, .md-editor:focus-within { border-color: var(--sc-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.md-editor > .md-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--sc-line); background: #f8fafc; }
.md-editor > .md-header .btn-group { display: inline-flex; align-items: center; gap: 2px; margin: 0 6px 0 0; padding-right: 8px; border-right: 1px solid var(--sc-line); }
.md-editor > .md-header .btn-group:last-of-type { border-right: 0; }
.md-editor > .md-header .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 0 8px; border: 0 !important; border-radius: 8px !important; background: transparent; color: #475569; box-shadow: none !important; font-size: 14px; }
.md-editor > .md-header .btn:hover, .md-editor > .md-header .btn:focus-visible, .md-editor > .md-header .btn.active { background: #e2e8f0; color: var(--sc-ink); }
.md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"] { padding: 0 12px; font-weight: 600; color: var(--sc-blue); }
.md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"]:hover, .md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"].active { background: #dbeafe; }
.md-editor > textarea.markdown-editor, .md-editor > textarea { display: block; width: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff; padding: 16px 18px; font-size: 15px; line-height: 1.6; resize: vertical; }
.md-editor > .md-footer { padding: 8px 14px; border: 0; border-top: 1px solid var(--sc-line); background: #f8fafc; font-size: 12px; color: #64748b; }
.md-editor .md-fullscreen-controls a { color: #64748b; }
.md-editor.md-fullscreen-mode { border-radius: 0; }
:root[data-bs-theme="dark"] .md-editor { background: rgba(255, 255, 255, .03); border-color: #334155; }
:root[data-bs-theme="dark"] .md-editor > .md-header, :root[data-bs-theme="dark"] .md-editor > .md-footer { background: rgba(255, 255, 255, .04); border-color: #334155; }
:root[data-bs-theme="dark"] .md-editor > .md-header .btn { color: #cbd5e1; }
:root[data-bs-theme="dark"] .md-editor > .md-header .btn:hover, :root[data-bs-theme="dark"] .md-editor > .md-header .btn.active { background: rgba(255, 255, 255, .1); color: #f1f5f9; }
:root[data-bs-theme="dark"] .md-editor > textarea { background: transparent; color: #f1f5f9; }
:root[data-bs-theme="dark"] .md-editor > .md-header .btn-group { border-right-color: #334155; }
/* attachments: file field + Add More as one aligned row */
#fileUploadsContainer .input-group, .attachments .input-group { gap: 0; }
#fileUploadsContainer .custom-file-label, #fileUploadsContainer .form-control { min-height: 48px; border-radius: 10px 0 0 10px; }
.sc-page-submitticket .btn-add-more, .sc-page-viewticket .btn-add-more, #btnAddMore, .btn.add-more { min-height: 48px; margin-left: 12px; border-radius: 10px; }
.md-editor > .md-header .btn:not(:hover):not(:focus-visible):not(.active) { background-color: transparent !important; }
.md-editor > textarea.markdown-editor, .md-editor > textarea { font-family: inherit !important; }
.attachment-group { display: flex; align-items: stretch; gap: 12px; flex-wrap: nowrap; }
.attachment-group > .custom-file { flex: 1 1 auto; min-width: 0; }
.attachment-group .custom-file-label { height: 48px; overflow: hidden; border-radius: 10px !important; }
.attachment-group .custom-file-label::after { height: 100%; border-radius: 0 9px 9px 0; display: flex; align-items: center; }
.attachment-group > .input-group-append, .attachment-group > .btn { flex: none; margin-left: 0; }
.attachment-group .btn { min-height: 48px; border-radius: 10px !important; }
@media (max-width: 575.98px) { .attachment-group { flex-wrap: wrap; } .attachment-group > .input-group-append { width: 100%; } .attachment-group > .input-group-append .btn { width: 100%; } }

/* ===== STABLE ARTICLE (announcement view): readable measure, quiet meta line, button-style Back/Edit ===== */
.sc-article { border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.sc-article > .card-body { padding: 32px 36px 36px; }
.sc-article-title { margin: 0 0 10px; font-size: clamp(26px, 1.4vw + 18px, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--sc-ink); }
.sc-article-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--sc-line); }
.sc-article-meta li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px; border: 1px solid var(--sc-line); border-radius: 999px; background: #f8fafc; font-size: 13px; font-weight: 500; color: #64748b !important; }
.sc-article-meta svg { flex: none; color: #94a3b8; }
.sc-article-body { max-width: 74ch; font-size: 16px; line-height: 1.8; color: var(--sc-body); }
.sc-article-body > * + * { margin-top: 1.1em; }
.sc-article-body p { margin: 0; }
.sc-article-body a { color: var(--sc-blue); text-decoration: underline; text-underline-offset: 3px; }
.sc-article-body h2, .sc-article-body h3, .sc-article-body h4 { margin-top: 1.6em; font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); }
.sc-article-body ul, .sc-article-body ol { padding-left: 1.4em; }
.sc-article-body li + li { margin-top: .4em; }
.sc-article-body blockquote { margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid #c7d2fe; color: #475569; }
.sc-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.sc-article-body pre, .sc-article-body code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
.sc-article-body pre { padding: 14px 16px; border: 1px solid var(--sc-line); border-radius: 10px; background: #f8fafc; overflow-x: auto; }
.sc-article-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.sc-article-actions .tt-read-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--sc-line); border-radius: 10px; background: #fff; color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; float: none !important; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.sc-article-actions .tt-read-more:hover, .sc-article-actions .tt-read-more:focus-visible { border-color: #93c5fd; background: #f8fbff; color: var(--sc-blue); }
:root[data-bs-theme="dark"] .sc-article { background: rgba(255, 255, 255, .04); border-color: #334155; box-shadow: none; }
:root[data-bs-theme="dark"] .sc-article-meta { border-bottom-color: #334155; }
:root[data-bs-theme="dark"] .sc-article-meta li { background: rgba(255, 255, 255, .05); border-color: #334155; color: #94a3b8 !important; }
:root[data-bs-theme="dark"] .sc-article-title, :root[data-bs-theme="dark"] .sc-article-body h2, :root[data-bs-theme="dark"] .sc-article-body h3, :root[data-bs-theme="dark"] .sc-article-body h4 { color: #f1f5f9; }
:root[data-bs-theme="dark"] .sc-article-body { color: #cbd5e1; }
:root[data-bs-theme="dark"] .sc-article-body a { color: #93c5fd; }
:root[data-bs-theme="dark"] .sc-article-body pre { background: rgba(255, 255, 255, .05); border-color: #334155; }
:root[data-bs-theme="dark"] .sc-article-actions .tt-read-more { background: transparent; border-color: #334155; color: #e2e8f0; }
@media (max-width: 575.98px) { .sc-article > .card-body { padding: 22px 18px 24px; } .sc-article-actions { flex-wrap: wrap; } }
.sc-article .sc-article-title { margin: 0 0 14px !important; }
.sc-article ul.sc-article-meta { margin: 0 0 24px !important; padding: 0 0 22px !important; }
.sc-article .sc-article-body p + p, .sc-article .sc-article-body * + p { margin-top: 1.1em; }
.sc-article .sc-article-body p { line-height: 1.8; }
.sc-article ul.sc-article-meta > li { min-height: 30px; padding: 4px 12px !important; line-height: 1.4; margin: 0 !important; overflow: visible; }

/* ===== STABLE INVOICES LIST (clientarea.php?action=invoices) from a reference layout; real data only (no description, checkbox, export or add-funds shortcut in this table) ===== */
.sc-band-badge.is-warn { border-color: rgba(253, 186, 116, .55); background: rgba(249, 115, 22, .18); color: #fed7aa; }
[menuitemname="My Invoices Summary"] .card-header .card-title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
[menuitemname="My Invoices Summary"] .card-body { padding-top: 14px !important; font-size: 14px; line-height: 1.6; color: #64748b; }
.sc-due-amt { display: block; margin: 6px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
[menuitemname="My Invoices Summary"] .card-footer, [menuitemname="My Invoices Summary"] .card-body .btn { }
[menuitemname="My Invoices Summary"] .card-footer .btn, [menuitemname="My Invoices Summary"] .card-body .btn { width: 100%; min-height: 48px; border: 1px solid #c7d2fe; border-radius: 12px; background: #eef2ff; color: #3730a3; font-weight: 600; }
[menuitemname="My Invoices Summary"] .card-footer .btn:hover { background: #3730a3; border-color: #3730a3; color: #fff; }
[menuitemname="My Invoices Status Filter"] a.list-group-item[menuitemname="Unpaid"].active, [menuitemname="My Invoices Status Filter"] a.list-group-item[menuitemname="Unpaid"]:hover { background: #fffbeb !important; color: #92400e !important; }
.sc-page-clientareainvoices #tableInvoicesList td.sc-overdue { color: #b45309; font-weight: 600; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child, .sc-page-clientareainvoices #tableInvoicesList td[data-label="Status"] { white-space: nowrap; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 8px; font-weight: 600; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action:hover { background: #3730a3; border-color: #3730a3; color: #fff; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { border-color: #4338ca; background: #4338ca; color: #fff; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay:hover { background: #3730a3; border-color: #3730a3; }
.sc-page-clientareainvoices #tableInvoicesList tbody tr:hover { background: #f8faff; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "info filter" "table table" "length paginate"; gap: 14px 16px; align-items: center; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper > .listtable { display: contents; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter { grid-area: filter; float: none; margin: 0; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter label { position: relative; display: block; margin: 0; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter input { width: 100%; min-height: 46px; padding-left: 44px; border: 1px solid var(--sc-line); border-radius: 12px; background-image: none !important; box-shadow: none; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter label::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #94a3b8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_info { grid-area: info; margin: 0; padding: 0; font-size: 14px; color: #64748b; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper > .listtable > table { grid-area: table; width: 100%; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_length { grid-area: length; margin: 0; }
.sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_paginate { grid-area: paginate; margin: 0; justify-self: end; }
:root[data-bs-theme="dark"] .sc-due-amt { color: #f1f5f9; }
:root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-body { color: #94a3b8; }
:root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-footer .btn, :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-body .btn { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; }
:root[data-bs-theme="dark"] [menuitemname="My Invoices Status Filter"] a.list-group-item[menuitemname="Unpaid"].active { background: rgba(245, 158, 11, .14) !important; color: #fcd34d !important; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList td.sc-overdue { color: #fbbf24; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { background: #6366f1; border-color: #6366f1; color: #fff; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList tbody tr:hover { background: rgba(255, 255, 255, .04); }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter input { background: rgba(255, 255, 255, .05); border-color: #334155; }
@media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filter" "info" "table" "length" "paginate"; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_paginate { justify-self: start; } }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { display: table-cell; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .label { vertical-align: middle; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action { vertical-align: middle; margin: 0 0 0 10px; min-height: 34px; padding: 0 14px; font-size: 13px; }
.sc-page-clientareainvoices #tableInvoicesList tbody td { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action { margin: 8px 0 0; } }

/* STABLE FIX: dashboard service row dropdown (Log in to cPanel arrow). A later rule (.tt-client-home-cards .card { overflow: hidden }) re-clipped the card, so the open menu was cut off at the card edge. The card is visible again, its header/last section keep the rounded corners, and the row, button group and menu get proper spacing. */
.tt-client-home-cards .card { overflow: visible !important; }
.tt-client-home-cards .card > .card-header { border-radius: 12px 12px 0 0; }
.tt-client-home-cards .card > .list-group:last-child > .list-group-item:last-child, .tt-client-home-cards .card > :last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.tt-client-home-cards .card:has(.dropdown-menu.show) { position: relative; z-index: 30; }
.tt-client-home-cards .list-group-item { padding: 16px 22px !important; }
.div-service-item { gap: 18px; }
.div-service-item .div-service-buttons { gap: 12px; }
.div-service-item .div-service-buttons .btn-group { align-items: stretch; }
.div-service-item .div-service-buttons .btn-group.btn-group-primary:has(> .dropdown-toggle):not(:has(.dropdown-item:not([style*="display: none"]))) { display: none; }
.div-service-item .div-service-buttons .btn-group > .btn { min-height: 44px; }
.div-service-item .div-service-buttons .btn-group > .dropdown-toggle { min-width: 40px; border-radius: 0 10px 10px 0 !important; }
.div-service-item .div-service-buttons .btn-group > .btn:not(.dropdown-toggle) { border-radius: 10px 0 0 10px; }
.div-service-item .dropdown-menu { min-width: 220px; margin-top: 8px; padding: 6px; border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .25); z-index: 1060; }
.div-service-item .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sc-ink); cursor: pointer; white-space: nowrap; }
.div-service-item .dropdown-menu .dropdown-item:hover { background: #eff6ff; color: var(--sc-blue); }
:root[data-bs-theme="dark"] .div-service-item .dropdown-menu { background: #151a33; border-color: #334155; }
:root[data-bs-theme="dark"] .div-service-item .dropdown-menu .dropdown-item { color: #e2e8f0; }
:root[data-bs-theme="dark"] .div-service-item .dropdown-menu .dropdown-item:hover { background: rgba(59, 130, 246, .16); color: #bfdbfe; }

/* ========================================================================
   STABLE UI SYSTEM 9.0 — shared theme tokens and component contracts.
   ======================================================================== */
:root {
  --ui-text: #172033;
  --ui-text-secondary: #475569;
  --ui-text-muted: #64748b;
  --ui-surface: #fff;
  --ui-surface-subtle: #f8fafc;
  --ui-page: #f6f8fc;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-primary: #2563eb;
  --ui-primary-hover: #1d4ed8;
  --ui-primary-soft: #eff6ff;
  --ui-success: #15805e;
  --ui-success-hover: #116a4e;
  --ui-danger: #dc2626;
  --ui-danger-hover: #b91c1c;
  --ui-danger-soft: #fef2f2;
  --ui-warning: #a16207;
  --ui-warning-hover: #854d0e;
  --ui-warning-soft: #fffbeb;
  --ui-focus: rgba(37, 99, 235, .18);
  --ui-radius-control: 8px;
  --ui-radius-card: 12px;
  --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .035);
  --ui-shadow-raised: 0 12px 32px rgba(15, 23, 42, .10);
  --ui-control-height: 46px;
  --ui-transition: 180ms ease;
}
:root[data-bs-theme="dark"] {
  --ui-text: #f1f5f9;
  --ui-text-secondary: #cbd5e1;
  --ui-text-muted: #94a3b8;
  --ui-surface: #111c2f;
  --ui-surface-subtle: #17243a;
  --ui-page: #0b1220;
  --ui-border: #2b3b53;
  --ui-border-strong: #40536f;
  --ui-primary: #60a5fa;
  --ui-primary-hover: #3b82f6;
  --ui-primary-soft: #172f51;
  --ui-success: #34d399;
  --ui-success-hover: #10b981;
  --ui-danger: #f87171;
  --ui-danger-hover: #fca5a5;
  --ui-danger-soft: #3a1d25;
  --ui-focus: rgba(96, 165, 250, .22);
  --ui-shadow-card: none;
}
p, li, td, th, label, .form-control { overflow-wrap: anywhere; }
.text-muted { color: var(--ui-text-muted) !important; }

/* Lucide-compatible inline outline icon contract. */
.sc-icon { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.btn .sc-icon, a .sc-icon { margin-right: 7px; }
.btn-icon .sc-icon, .btn.close .sc-icon, .verification-banner-icon .sc-icon { margin: 0; }
.sc-icon-spinner { animation: sc-ui-spin .8s linear infinite; }
@keyframes sc-ui-spin { to { transform: rotate(360deg); } }

/* Form contract. */
.form-group { margin-bottom: 20px; }
.form-group > label:not(.field-icon), .control-label { margin-bottom: 7px; color: var(--ui-text); }
.form-control, .custom-select, select.form-control { min-height: var(--ui-control-height); padding: 10px 13px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-control); background-color: var(--ui-surface); color: var(--ui-text); box-shadow: none; transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition); }
.form-control::placeholder { color: var(--ui-text-muted); opacity: .85; }
.form-control:hover:not(:disabled) { border-color: #94a3b8; }
.form-control:focus, .custom-select:focus { border-color: var(--ui-primary); outline: 0; box-shadow: 0 0 0 3px var(--ui-focus); }
.form-control:disabled, .form-control[readonly], .custom-select:disabled { cursor: not-allowed; border-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); opacity: .72; }
.invalid-feedback, .field-error-msg { margin-top: 6px; color: var(--ui-danger); }
.help-block, .form-text { color: var(--ui-text-muted); }

/* Button contract. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-control) !important; white-space: normal; box-shadow: none; transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), opacity var(--ui-transition); }
.btn:hover, .btn:focus { transform: none; text-decoration: none; }
.btn-primary { border-color: var(--ui-primary); background: var(--ui-primary); background-image: none; color: #fff; }
.btn-primary:hover, .btn-primary:focus { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: #fff; }
.btn-success { border-color: var(--ui-success); background: var(--ui-success); background-image: none; color: #fff; }
.btn-success:hover, .btn-success:focus { border-color: var(--ui-success-hover); background: var(--ui-success-hover); color: #fff; }
.btn-default, .btn-secondary, .btn-outline-primary, .btn-info { border-color: var(--ui-border-strong); background: var(--ui-surface); background-image: none; color: var(--ui-text-secondary); }
.btn-default:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-info:hover { border-color: #94a3b8; background: var(--ui-surface-subtle); color: var(--ui-text); }
.btn-danger { border-color: var(--ui-danger); background: var(--ui-danger); background-image: none; color: #fff; }
.btn-danger:hover { border-color: var(--ui-danger-hover); background: var(--ui-danger-hover); color: #fff; }
.btn-warning { border-color: #e9d49d; background: var(--ui-warning-soft); background-image: none; color: var(--ui-warning); }
.btn-warning:hover { border-color: #d9bc72; background: #fef3c7; color: var(--ui-warning-hover); }
.btn-link { min-height: 44px; padding-inline: 8px; color: var(--ui-primary); background: transparent; }
.btn-link:hover { color: var(--ui-primary-hover); }
.btn-sm { min-height: 40px; padding: 7px 13px; }
.btn-lg { min-height: 50px; padding: 12px 20px; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ui-primary) !important; outline-offset: 3px; }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; opacity: .5; box-shadow: none; }
.btn[aria-busy="true"], .btn.is-loading { cursor: wait; }
.btn[aria-busy="true"] .sc-icon:not(.sc-icon-spinner), .btn.is-loading .sc-icon:not(.sc-icon-spinner) { opacity: .5; }

/* Surface, navigation and data contracts. */
.card, .panel, .modal-content, .dropdown-menu { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }
.card-header, .panel-heading, .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.card-body, .panel-body { padding: 20px; }
.list-group-item { min-height: 44px; border-color: var(--ui-border); line-height: 1.45; }
.table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { color: var(--ui-text-secondary); }
.table th { border-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); }
.table td { border-color: var(--ui-border); vertical-align: middle; }
.dropdown-menu { padding: 8px; }
.dropdown-item { min-height: 40px; padding: 9px 12px; border-radius: 7px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ui-primary-soft); color: var(--ui-text); }
.alert { border-width: 1px; border-radius: var(--ui-radius-control); box-shadow: none; }

/* Auth and reset screens consume the same contracts. */
.ph-reset-body .input-group { min-height: var(--ui-control-height); border-color: var(--ui-border-strong); border-radius: var(--ui-radius-control); }
.ph-reset-body .input-group-text { color: var(--ui-text-muted); }
.ph-reset-body .form-group > .form-control { height: var(--ui-control-height); border-color: var(--ui-border-strong); border-radius: var(--ui-radius-control); }
.ph-reset-body .btn-primary, .ph-reset-body input[type="submit"].btn-primary, .ph-reset-body input[type="reset"].btn-default { min-height: var(--ui-control-height); border-radius: var(--ui-radius-control) !important; }
.ph-reset-body .sc-form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
.ph-reset-body .sc-form-actions .btn, .ph-reset-body .sc-form-actions input { width: 100%; margin: 0; }
.ph-reset-links a { display: inline-flex; align-items: center; min-height: 44px; }
.ph-reset-links a .sc-icon { margin-right: 6px; }

/* Keep verification notices on the shared surface contract despite older dashboard overrides. */
aside.verification-banner.email-verification {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-secondary) !important;
}
aside.verification-banner.email-verification .verification-banner-inner { padding: 12px 16px !important; }
aside.verification-banner.email-verification .verification-banner-icon { width: 36px; height: 36px; border-radius: var(--ui-radius-control); background: var(--ui-primary-soft); color: var(--ui-primary); }
aside.verification-banner.email-verification .btn.btn-action { border-color: var(--ui-border-strong) !important; border-radius: var(--ui-radius-control) !important; background: var(--ui-surface) !important; color: var(--ui-primary); }
:root[data-bs-theme="dark"] aside.verification-banner.email-verification { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
:root[data-bs-theme="dark"] aside.verification-banner.email-verification .btn.btn-action { background: var(--ui-surface-subtle) !important; border-color: var(--ui-border-strong) !important; }

@media (max-width: 575.98px) {
  .card-header, .panel-heading, .modal-header, .card-body, .panel-body { padding-inline: 16px; }
  .btn:not(.btn-icon):not(.close) { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Services list containment.
   DataTables' inner `display: contents` wrapper and the former 320px product
   minimum allowed the table's intrinsic width to grow beyond the main column. */
.sc-page-clientareaproducts .primary-content,
.sc-page-clientareaproducts .table-container,
.sc-page-clientareaproducts #tableServicesList_wrapper,
.sc-page-clientareaproducts #tableServicesList_wrapper > .listtable,
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter,
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label {
  min-width: 0;
  max-width: 100%;
}
.sc-page-clientareaproducts .table-container { width: 100%; overflow: hidden; }
.sc-page-clientareaproducts #tableServicesList_wrapper {
  width: 100%;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr) max-content;
}
.sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input {
  display: block;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}
.sc-page-clientareaproducts #tableServicesList {
  width: 100% !important;
  max-width: 100%;
  table-layout: auto;
}
.sc-page-clientareaproducts #tableServicesList th,
.sc-page-clientareaproducts #tableServicesList td { min-width: 0 !important; }
.sc-page-clientareaproducts #tableServicesList th:first-child,
.sc-page-clientareaproducts #tableServicesList td:first-child {
  width: 52px !important;
  max-width: 52px;
}
.sc-page-clientareaproducts #tableServicesList th:nth-child(2),
.sc-page-clientareaproducts #tableServicesList td:nth-child(2) { width: auto !important; }
.sc-page-clientareaproducts #tableServicesList th:nth-child(3),
.sc-page-clientareaproducts #tableServicesList td:nth-child(3) { width: 18%; }
.sc-page-clientareaproducts #tableServicesList th:nth-child(4),
.sc-page-clientareaproducts #tableServicesList td:nth-child(4) { width: 18%; }
.sc-page-clientareaproducts #tableServicesList th:nth-child(5),
.sc-page-clientareaproducts #tableServicesList td:nth-child(5) { width: 24%; }
.sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}
.sc-page-clientareaproducts #tableServicesList td:last-child {
  white-space: normal;
}
.sc-page-clientareaproducts #tableServicesList td:last-child .ph-row-action {
  margin-left: 10px;
  vertical-align: middle;
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .sc-page-clientareaproducts #tableServicesList_wrapper {
    display: block;
  }
  .sc-page-clientareaproducts #tableServicesList_wrapper > .listtable {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter { margin-bottom: 12px; }
  .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_length,
  .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_info,
  .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_paginate { margin-top: 12px; }
  .sc-page-clientareaproducts #tableServicesList { min-width: 720px; }
}

@media (max-width: 575.98px) {
  .sc-page-clientareaproducts .table-container { overflow: visible; }
  .sc-page-clientareaproducts #tableServicesList th:first-child,
  .sc-page-clientareaproducts #tableServicesList td:first-child { width: auto !important; }
  .sc-page-clientareaproducts #tableServicesList td:last-child .ph-row-action {
    margin: 8px 0 0;
  }
}

/* Dashboard service actions: compact icon-only overflow menu. */
.div-service-item .div-service-buttons .sc-service-menu-toggle {
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px !important;
  height: 44px;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 0 8px 8px 0 !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-muted) !important;
  box-shadow: none !important;
}
.div-service-item .div-service-buttons .sc-service-menu-toggle::after { display: none !important; }
.div-service-item .div-service-buttons .sc-service-menu-toggle:hover,
.div-service-item .div-service-buttons .sc-service-menu-toggle:focus-visible,
.div-service-item .div-service-buttons .btn-group.show > .sc-service-menu-toggle {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}
.div-service-item .div-service-buttons .sc-service-menu-icon {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  transition: transform var(--ui-transition);
}
.div-service-item .div-service-buttons .btn-group.show > .sc-service-menu-toggle .sc-service-menu-icon { transform: rotate(180deg); }
.div-service-item .div-service-buttons .btn-group-primary > .sc-service-menu-toggle { border-radius: 8px !important; }
.div-service-item .div-service-buttons .btn-group-secondary > .btn-custom-action { border-radius: 8px 0 0 8px !important; }
:root[data-bs-theme="dark"] .div-service-item .div-service-buttons .sc-service-menu-toggle {
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-muted) !important;
}

/* ===== STABLE INVOICES, clean and minimal pass ===== */
/* summary card: no glow dot, quiet label */
[menuitemname="My Invoices Summary"] .card-header .card-title::before { display: none; }
[menuitemname="My Invoices Summary"] .card-body { padding-top: 6px !important; }
.sc-due-amt { font-size: 30px; margin-top: 4px; }
[menuitemname="My Invoices Summary"] .card-footer, [menuitemname="My Invoices Summary"] .card-body .btn-block { margin-top: 4px; }
[menuitemname="My Invoices Summary"] .card-footer .btn, [menuitemname="My Invoices Summary"] .card-body .btn { min-height: 44px; border: 0; background: #4338ca; color: #fff; }
[menuitemname="My Invoices Summary"] .card-footer .btn:hover { background: #3730a3; color: #fff; }
/* table: no grey band, hairline header, sort arrows only on the active column, rows aligned */
.sc-page-clientareainvoices #tableInvoicesList_wrapper .listtable { background: transparent; }
.sc-page-clientareainvoices #tableInvoicesList { border: 0; background: transparent; }
.sc-page-clientareainvoices #tableInvoicesList thead th { padding: 10px 14px; border: 0 !important; border-bottom: 1px solid var(--sc-line) !important; background: transparent !important; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.sc-page-clientareainvoices #tableInvoicesList thead th.sorting::after, .sc-page-clientareainvoices #tableInvoicesList thead th.sorting::before { opacity: .25; }
.sc-page-clientareainvoices #tableInvoicesList tbody tr { background: transparent; }
.sc-page-clientareainvoices #tableInvoicesList tbody td { padding: 16px 14px; vertical-align: middle; border-top: 0; border-bottom: 1px solid var(--sc-line-soft, #eef2f7); font-size: 15px; }
.sc-page-clientareainvoices #tableInvoicesList tbody tr:last-child td { border-bottom: 0; }
.sc-page-clientareainvoices #tableInvoicesList td[data-label="Total"], .sc-page-clientareainvoices #tableInvoicesList td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.sc-page-clientareainvoices #tableInvoicesList thead th:nth-child(4) { text-align: right; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .label { margin: 0; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action { margin: 0; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action { min-height: 32px; padding: 0 12px; font-size: 13px; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action:not(.sc-pay) { border-color: transparent; background: transparent; color: #4338ca; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action:not(.sc-pay):hover { background: #eef2ff; color: #3730a3; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }
.sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.sc-page-clientareainvoices #tableInvoicesList tbody tr:hover { background: #f8faff; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList tbody td { border-bottom-color: #334155; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList thead th { border-bottom-color: #334155 !important; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay:hover { background: #6366f1; color: #fff; }
:root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action:not(.sc-pay) { color: #a5b4fc; background: transparent; }
:root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-footer .btn, :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-body .btn { background: #6366f1; color: #fff; border: 0; }
@media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { justify-content: flex-start; } }
[menuitemname="My Invoices Summary"] .btn, [menuitemname="My Invoices Summary"] a.btn { width: 100%; min-height: 44px; border: 0 !important; border-radius: 10px; background: #4338ca !important; color: #fff !important; font-weight: 600; }
[menuitemname="My Invoices Summary"] .btn:hover { background: #3730a3 !important; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action:not(.sc-pay) { align-self: center; }

/* invoices table alignment: real table cells (no flex on <td>), fixed column grid, status + action in one inner row */
.sc-page-clientareainvoices #tableInvoicesList { table-layout: fixed; width: 100%; }
.sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { display: table-cell !important; }
.sc-page-clientareainvoices #tableInvoicesList th:nth-child(1), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(1) { width: 11%; }
.sc-page-clientareainvoices #tableInvoicesList th:nth-child(2), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(2), .sc-page-clientareainvoices #tableInvoicesList th:nth-child(3), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(3) { width: 17%; }
.sc-page-clientareainvoices #tableInvoicesList th:nth-child(4), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(4) { width: 20%; text-align: right; padding-right: 36px; }
.sc-page-clientareainvoices #tableInvoicesList th:nth-child(5), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(5) { width: 35%; text-align: left; padding-left: 28px; }
.sc-status-cell { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.sc-status-cell .label, .sc-status-cell .ph-row-action { margin: 0 !important; }
.sc-page-clientareainvoices #tableInvoicesList thead th { white-space: nowrap; position: relative; }
.sc-page-clientareainvoices #tableInvoicesList thead th.sorting, .sc-page-clientareainvoices #tableInvoicesList thead th.sorting_asc, .sc-page-clientareainvoices #tableInvoicesList thead th.sorting_desc { padding-right: 28px; }
.sc-page-clientareainvoices #tableInvoicesList thead th:nth-child(4) { padding-right: 52px; }
@media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList { table-layout: auto; } .sc-page-clientareainvoices #tableInvoicesList td:nth-child(n) { width: auto; padding-left: 0; padding-right: 0; text-align: left; } .sc-status-cell { flex-wrap: wrap; } }

/* STABLE FIX social sign-in (login, register, checkout, security): stacked full-width buttons, same height/radius, provider widgets centred */
.social-signin-btns { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin: 0 0 8px; }
.social-signin-btns > * { max-width: 100%; margin: 0 !important; }
.social-signin-btns .btn, .social-signin-btns .btn-social { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; }
.social-signin-btns .btn-facebook { border: 1px solid #1877f2; background: #1877f2; color: #fff; }
.social-signin-btns .btn-facebook:hover, .social-signin-btns .btn-facebook:focus { background: #166fe0; border-color: #166fe0; color: #fff; }
.social-signin-btns .btn-social i, .social-signin-btns .btn-social .fab, .social-signin-btns .btn-social .fas { position: static; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; line-height: 1; font-size: 18px; }
/* Google renders its own fixed-width widget: centre it in the column */
.social-signin-btns > div, .social-signin-btns .g_id_signin { display: flex; justify-content: center; min-height: 48px; }
.social-signin-btns iframe { max-width: 100%; border: 0; }
.social-signin-btns:empty { display: none; }
:root[data-bs-theme="dark"] .social-signin-btns > div:has(iframe), :root[data-bs-theme="dark"] .social-signin-btns .g_id_signin { color-scheme: light; }

/* STABLE FIX register: wider form, mailing-list row (text left, switch right), drawn checkbox for Terms */
.ph-login.ph-register .ph-login-center.ph-register-center { max-width: 760px; }
.ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; padding: 16px 20px !important; border: 1px solid var(--sc-line, #e3e8f4); border-radius: 12px; background: var(--sc-card, #fff); }
.ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > h3 { grid-column: 1 / -1; margin-bottom: 8px; }
.ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.55; }
.ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > .bootstrap-switch { grid-column: 2; grid-row: 2; margin: 0; }
.ph-register #registration label.form-check { align-items: center; gap: 12px; margin: 4px 0 20px; padding: 14px 16px; border: 1px solid var(--sc-line, #e3e8f4); border-radius: 12px; background: var(--sc-card, #fff); font-size: 14.5px; cursor: pointer; }
.ph-register #registration label.form-check:hover { border-color: var(--sc-blue, #2563eb); }
.ph-register #registration label.form-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #94a3b8; border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ph-register #registration label.form-check input[type="checkbox"]:checked { border-color: var(--sc-blue, #2563eb); background-color: var(--sc-blue, #2563eb); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E"); }
.ph-register #registration label.form-check input[type="checkbox"]:focus-visible { outline: 3px solid rgba(37, 99, 235, .35) !important; outline-offset: 2px; }
.ph-register #registration label.form-check:has(input:checked) { border-color: var(--sc-blue, #2563eb); background: #f3f7ff; }
@media (max-width: 575px) {
  .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) { grid-template-columns: 1fr; row-gap: 12px; }
  .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > .bootstrap-switch { grid-column: 1; grid-row: 3; }
}
:root[data-bs-theme="dark"] .ph-register #registration label.form-check,
:root[data-bs-theme="dark"] .ph-register #registration .card-body:has(> .bootstrap-switch) { background: #12132b; border-color: #23264f; }
:root[data-bs-theme="dark"] .ph-register #registration label.form-check input[type="checkbox"]:not(:checked) { background-color: #12132b; border-color: #6b7099; }
:root[data-bs-theme="dark"] .ph-register #registration label.form-check:has(input:checked) { background: #1a1d4a; }
/* register: give the form column more room than the story panel */
.ph-login.ph-register { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
.ph-register #registration #default-captcha-domainchecker, .ph-register #registration .captcha-container, .ph-register #registration .sc-captcha { margin-left: 0; margin-right: auto; }
@media (max-width: 991px) { .ph-login.ph-register { grid-template-columns: minmax(0, 1fr); } }

/* STABLE FIX strip arrows on the homepage plan grid (same controls as the cart; were unstyled and sat under the cards) */
.sc-strip { position: relative; }
.sc-strip-btn { position: absolute; top: 42%; z-index: 3; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sc-line); border-radius: 50%; background: var(--sc-card); color: var(--sc-ink); box-shadow: 0 8px 20px -6px rgba(37, 38, 94, .35); cursor: pointer; transition: background-color .15s ease, color .15s ease, opacity .2s ease; }
.sc-strip-btn:hover, .sc-strip-btn:focus-visible { background: var(--sc-blue); border-color: var(--sc-blue); color: #fff; }
.sc-strip-btn svg { width: 20px; height: 20px; }
.sc-strip-btn.is-prev { left: -14px; } .sc-strip-btn.is-next { right: -14px; }
.sc-strip-btn[disabled] { opacity: 0; pointer-events: none; }
@media (min-width: 768px) { .sc-strip.has-overflow .sc-strip-btn { display: inline-flex; } .sc-strip.has-overflow .sc-dots { display: flex; } }
@media (max-width: 767.98px) { .sc-strip-btn, .sc-strip::after { display: none !important; } }
.sc-strip-btn { top: calc(var(--sc-strip-h, 100%) / 2); transform: translateY(-50%); width: 40px; height: 40px; }
.sc-strip-btn.is-prev { left: -20px; } .sc-strip-btn.is-next { right: -20px; }
.sc-strip-btn[disabled] { visibility: hidden; }
.sc-strip:not(.has-overflow) .sc-strip-btn, .sc-strip:not(.has-overflow) .sc-dots { display: none !important; }
@media (max-width: 1279px) { .sc-strip-btn.is-prev { left: -8px; } .sc-strip-btn.is-next { right: -8px; } }