/* ===== 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: 'Manrope';
  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: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-monospace: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Prabhu Host brand additions */
  --accent: #F36B23;
  --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: #334155;
  --gray-light: #1e293b;
  --dark: #0f172a;

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


  --body-color: #94a3b8;
  --heading-color: #f8fafc;

  --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, #0f172a);
}
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: #cbd5e1; }
.ph-topbar-social { gap: 4px; }
.ph-topbar-social a {
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
/* grey until hover, same filters as the marketing site's .nav-social-icon */
.ph-topbar-social img {
  filter: brightness(0) invert(0.55);
  transition: filter .2s ease;
}
.ph-topbar-social a:hover img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(80%) saturate(600%) hue-rotate(340deg) brightness(105%);
}
.ph-topbar-social a:hover {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ---------- Light/dark toggle switch (topbar, plus a copy in the mobile panel) ---------- */
.ph-topbar-right { gap: 12px; }
.ph-topbar-sep { width: 1px; height: 18px; background: #e2e8f0; }
.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: #334155; border-color: #475569; }
:root[data-bs-theme="dark"] .ph-theme-knob { transform: translateX(22px); background: #0f172a; }
: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: #e2e8f0; }
:root[data-bs-theme="dark"] .ph-topbar-sep { background: rgba(255, 255, 255, .1); }
@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 #f36b23;
  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; }
}
.ph-mega-inner { padding: 16px; }
.ph-mega-grid { display: grid; gap: 16px; }
.ph-mega-grid.ph-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-mega-grid.ph-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ph-mega-grid.ph-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ph-mega-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.ph-mega-divider::before,
.ph-mega-divider::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.ph-mega-divider span { font-size: 12px; font-weight: 600; color: var(--ph-muted); }

/* Small single-column panel (WHMCS Store): anchored under its own button */
.ph-mega-item-sm { position: relative; }
.ph-mega-item-sm .ph-mega-panel {
  top: calc(100% + 16px);
  width: max-content;
  min-width: 240px;
  max-width: 360px;
  border-top: 1px solid #e9e2dc;
}
.ph-mega-item-sm .ph-mega-link strong { white-space: normal; }
.ph-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 2px solid;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.ph-tag-blue   { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.ph-tag-orange { background: #fff7ed; color: var(--ph-orange); border-color: #fed7aa; }
.ph-tag-cyan   { background: #ecfeff; color: #06b6d4; border-color: #a5f3fc; }
.ph-mega-link {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ph-text);
  transition: background-color .2s ease, border-color .2s ease;
}
.ph-mega-link img {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.ph-mega-link strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ph-text);
  line-height: 1.4;
}
.ph-mega-link small {
  display: block;
  font-size: 12px;
  color: var(--ph-muted);
  line-height: 1.4;
}
.ph-mega-link:hover { border-color: #bfdbfe; text-decoration: none; }
.ph-tone-blue:hover   { background: #eff6ff; }
.ph-tone-orange:hover { background: #fff7ed; }
.ph-tone-cyan:hover   { background: #ecfeff; }
.ph-tint-orange { background: rgba(255, 247, 237, .5); border-color: #ffedd5; }
.ph-tint-orange:hover { background: #fff7ed; border-color: #fed7aa; }
.ph-mega-static { cursor: default; }

/* 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: #e2e8f0; }
:root[data-bs-theme="dark"] .tt-header .main-navbar-wrapper #nav > li > a { color: #e2e8f0; }
:root[data-bs-theme="dark"] .ph-topbar-social img { filter: brightness(0) invert(0.7); }

/* 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: #111827;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
:root[data-bs-theme="dark"] .ph-topbar a { color: #cbd5e1; }
: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: #e2e8f0; }
:root[data-bs-theme="dark"] .ph-mega-btn:hover { background: #1e293b; }
:root[data-bs-theme="dark"] .ph-mega-divider::before,
:root[data-bs-theme="dark"] .ph-mega-divider::after { background: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .ph-mega-panel {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-bs-theme="dark"] .ph-mega-link strong { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-mega-link small { color: #94a3b8; }
:root[data-bs-theme="dark"] .ph-mega-link:hover { background: #1e293b; border-color: #334155; }

@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: #1e293b;
}

/* ---------- 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 #f36b23; }
.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) ---------- */
.footer.tt-footer.ph-footer {
  background: #fff !important;
  border-top: 3px solid var(--accent);
  color: var(--ph-text-3);
}
.ph-footer-main { padding: 64px 0 48px; }
.ph-footer-desc {
  max-width: 420px;
  margin-bottom: 1.25rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ph-muted);
}
.ph-footer-desc strong { color: var(--ph-text); font-weight: 700; }
.ph-footer-find {
  margin: 1.25rem 0 1rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--ph-ink);
}
.ph-contact-card {
  max-width: 420px;
  padding: 16px;
  border: 1px solid #f3f4f6;
  border-radius: 18px;
  background: #f9fafb;
}
.ph-contact-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-text-3);
}
.ph-contact-row:last-child { margin-bottom: 0; }
a.ph-contact-row:hover { color: var(--ph-orange); text-decoration: none; }
a.ph-contact-wa:hover { color: #16a34a; }
.ph-contact-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.22);
  color: var(--ph-orange);
  font-size: 14px;
}
.ph-contact-wa .ph-contact-icon {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.25);
  color: #25d366;
  font-size: 16px;
}
.ph-footer-heading {
  margin: 0;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #c2410c;
  border-bottom: 1px solid rgba(249, 115, 22, 0.25);
}
.ph-footer-links { margin: 20px 0 0; }
.ph-footer-links li { margin-bottom: 14px; }
.ph-footer-links a {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-text-2);
  transition: color .2s ease, transform .2s ease;
}
.ph-footer-links a:hover {
  color: var(--ph-orange);
  text-decoration: none;
  transform: translateX(2px);
}
.ph-footer-band {
  padding: 20px 0;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
}
.ph-band-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (min-width: 576px) { .ph-band-group { flex-direction: row; gap: 16px; } }
.ph-band-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ph-muted);
  white-space: nowrap;
}
.ph-band-divider { width: 1px; height: 32px; background: #e5e7eb; }
.ph-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ph-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  line-height: 1.2;
}
.ph-rating > i { font-size: 16px; }
.ph-ico-tp { color: #00b67a; }
.ph-ico-g { color: #ea4335; }
.ph-ico-fb { color: #1877f2; }
.ph-rating b { font-size: 12px; color: var(--ph-text); }
.ph-rating small { display: block; font-size: 12px; color: #9ca3af; }
.ph-review-top { display: block; margin-bottom: 2px; }
.ph-stars { font-size: 12px; color: #facc15; }
.ph-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ph-pay img { height: 16px; width: auto; }
.ph-footer-copy,
.ph-footer .tt-footer-bottom.ph-footer-copy {
  padding: 12px 0;
  background: #0f1623;
  border-top: 0;
  color: #94a3b8;
}
/* theme.min.css has `footer.footer .copyright { margin: 30px 0; text-align: center }`, so this needs the same weight */
footer.footer .ph-footer-copy .copyright,
.ph-footer-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}
@media (min-width: 768px) {
  footer.footer .ph-footer-copy .copyright { text-align: left; }
}
.ph-copy-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
}
.ph-vat, .ph-lang-btn { white-space: nowrap; }
@media (min-width: 768px) {
  footer.footer .ph-footer-copy .copyright { flex: 1 1 auto; min-width: 0; padding-right: 24px; }
}
@media (max-width: 767.98px) {
  .ph-copy-right { flex-direction: column; gap: 8px; }
  .ph-vat { white-space: normal; text-align: center; }
}
@media (max-width: 767.98px) {
  footer.footer .ph-footer-copy .copyright { margin-bottom: 8px; }
}
.ph-vat { font-size: 12px; color: #64748b; }
.ph-lang-btn,
.ph-lang-btn:hover {
  padding: .2rem .75rem;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: var(--ph-border-strong);
  font-size: 12px;
}
:root[data-bs-theme="dark"] .footer.tt-footer.ph-footer { background: #0b1220 !important; color: #94a3b8; }
:root[data-bs-theme="dark"] .ph-footer-desc,
:root[data-bs-theme="dark"] .ph-footer-links a,
:root[data-bs-theme="dark"] .ph-contact-row { color: #cbd5e1; }
:root[data-bs-theme="dark"] .ph-footer-desc strong,
:root[data-bs-theme="dark"] .ph-footer-find { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-contact-card,
:root[data-bs-theme="dark"] .ph-footer-band { background: #111827; border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .ph-footer-heading { color: #fb923c; }

@media (max-width: 575.98px) {
  .ph-footer-main { padding: 48px 0 24px; }
}

/* ---------- 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,
.ph-page-auth footer.ph-footer { 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: #111827; border-color: #1f2937; color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-register #registration h3.h6,
:root[data-bs-theme="dark"] .ph-register #registration h3.card-title { border-color: #1f2937; color: #94a3b8; }
: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: #cbd5e1; }
:root[data-bs-theme="dark"] .ph-register #registration .field-icon i { color: #94a3b8; }

/* 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: #1e293b; }
:root[data-bs-theme="dark"] .ph-reset-body > .mb-4 > p,
:root[data-bs-theme="dark"] .ph-reset-body > p { color: #94a3b8; }
:root[data-bs-theme="dark"] .ph-reset-body label { color: #cbd5e1; }
:root[data-bs-theme="dark"] .ph-reset-body .form-group > .form-control { background: #111827; border-color: #1f2937; color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-reset-body input[type="reset"].btn-default { background: #111827; border-color: #1f2937; color: #cbd5e1; }

/* 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: #0b1220 !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: #f1f5f9; }
: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: #94a3b8; }
:root[data-bs-theme="dark"] .ph-login .input-group { background: #111827; border-color: #1f2937; }
:root[data-bs-theme="dark"] .ph-login .input-group-text,
:root[data-bs-theme="dark"] .ph-login .btn-reveal-pw { color: #94a3b8; }
:root[data-bs-theme="dark"] .ph-login-panel { background: linear-gradient(160deg, #0f172a 0%, #111d3a 55%, #12244d 100%); }
:root[data-bs-theme="dark"] .ph-login-panel h2 { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-login-points li { color: #cbd5e1; }
: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: #1e293b; }

/* ---------- Homepage hero (.ph-hero): eyebrow, title, pill search, TLD chips, features, 3 promo cards. px values (root is 14px) ---------- */
.ph-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background:
    radial-gradient(circle at 12% 16%, rgba(243, 107, 35, .13), transparent 480px),
    radial-gradient(circle at 88% 18%, rgba(0, 102, 204, .10), transparent 512px),
    linear-gradient(180deg, #f9fbfe 0%, #fffaf7 58%, #fff 100%);
}
@media (min-width: 1024px) { .ph-hero { padding: 96px 0 80px; } }
.ph-hero > .container { position: relative; z-index: 1; }
.ph-hero-top { max-width: 960px; margin: 0 auto; }
.ph-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 20px;
  color: #0066cc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph-hero-eyebrow span { width: 28px; height: 2px; border-radius: 999px; background: #f36b23; }
.ph-hero h1 {
  margin: 0 auto;
  color: #172033;
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.ph-hero h1 span { color: #0066cc; }
.ph-hero-text {
  max-width: 720px;
  margin: 24px auto 0;
  color: #526174;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
}
.ph-hero-form { max-width: 760px; margin: 36px auto 0; }
.ph-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px;
  border: 2px solid #c9dcf2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.ph-search:focus-within { border-color: #0066cc; box-shadow: 0 0 0 4px rgba(0, 102, 204, .12), 0 10px 30px rgba(15, 23, 42, .06); }
.ph-search-icon { margin-left: 18px; font-size: 20px; color: #8a97a8; }
.ph-search input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172033;
  font-size: 16px;
}
.ph-search input::placeholder { color: var(--ph-muted); }
.ph-search-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 10px 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ph-search-btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 102, 204, .3); }
.ph-search-btn i {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 14px;
}
.ph-transfer-link {
  display: inline-block;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #0066cc;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ph-transfer-link:hover { color: #0054aa; text-decoration: underline; }
.ph-tlds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 0;
}
.ph-tlds a {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid var(--ph-line);
  background: #fff;
  color: #172033;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ph-tlds a:hover { border-color: var(--ph-blue); background: #f1f6fd; color: var(--ph-blue); text-decoration: none; transform: translateY(-2px); }
.ph-hero-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 56px;
  margin: 36px 0 0;
}
.ph-hero-features li { display: flex; align-items: center; gap: 12px; text-align: left; }
.ph-hero-features i { font-size: 30px; color: #0a2a8f; }
.ph-hero-features strong { display: block; font-size: 15px; font-weight: 700; color: #172033; line-height: 1.3; }
.ph-hero-features small { display: block; font-size: 14px; color: #526174; line-height: 1.3; }

/* Promo cards */
.ph-hero-cards {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
}
.ph-hcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 336px;
  padding: 34px;
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}
a.ph-hcard { transition: transform .25s ease, box-shadow .25s ease; }
a.ph-hcard:hover { color: #fff; text-decoration: none; transform: translateY(-4px); box-shadow: 0 26px 56px rgba(15, 23, 42, .2); }
.ph-hcard h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.ph-hcard p { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.ph-hcard-news { background: linear-gradient(135deg, var(--ph-navy) 0%, #0a3f8f 60%, #0054aa 100%); }
.ph-hcard-badge {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
  border-radius: 10px;
  background: var(--ph-orange);
  color: #fff;
  font-size: 24px;
}
.ph-hcard-news h2 { font-size: 34px; max-width: 420px; }
.ph-hcard-cta { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 700; color: #fdba74; }
.ph-hcard-ticket { background: linear-gradient(160deg, #1c7bc3 0%, #4a9ae0 100%); }
.ph-hcard-ticket p { max-width: 230px; font-size: 15px; }
.ph-hcard-ticket h2, .ph-hcard-ticket p, .ph-hcard-ticket .ph-hcard-cta { position: relative; z-index: 2; }
.ph-hcard-ticket .ph-hcard-cta { color: #fff; }
.ph-hcard-ticket img {
  position: absolute;
  right: 8px;
  bottom: -4px;
  width: 58%;
  max-width: 240px;
  height: auto;
  opacity: .96;
}
.ph-hcard-kb { background: #0f2447; }
.ph-hcard-arrow {
  position: absolute;
  top: 28px;
  right: 30px;
  font-size: 20px;
  color: #fff;
  transform: rotate(45deg);
}
.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);
}
.ph-mock-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e0e7ff;
  color: #4f46e5;
  font-size: 18px;
}
.ph-mock-bar { width: 96px; height: 12px; border-radius: 999px; background: #e5e7eb; }
.ph-mock-tld { font-size: 20px; color: #64748b; }
.ph-hcard-kb h2 { margin-top: auto; font-size: 28px; }
.ph-hcard-kb p { margin-top: 12px; font-size: 15px; }
.ph-hcard-kb .ph-hcard-cta { margin-top: 14px; padding-top: 0; color: #fdba74; }
@media (max-width: 1199.98px) {
  .ph-hero-cards { grid-template-columns: 1fr 1fr; }
  .ph-hcard-news { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 767.98px) {
  .ph-hero { padding: 48px 0; }
  .ph-hero-cards { grid-template-columns: 1fr; margin-top: 40px; }
  .ph-hcard { min-height: 280px; padding: 26px; }
  .ph-hcard-ticket { min-height: 340px; }
  .ph-hcard-news h2 { font-size: 26px; }
  .ph-search { padding: 4px; }
  .ph-search-icon { display: none; }
  .ph-search input[type="text"] { height: 46px; padding: 0 14px; font-size: 15px; }
  .ph-search-btn { height: 46px; padding: 0 6px 0 16px; font-size: 15px; gap: 8px; }
  .ph-search-btn i { width: 30px; height: 30px; }
  .ph-tlds { gap: 8px; }
  .ph-tlds a { padding: 9px 13px; font-size: 15px; }
  .ph-hero-features { flex-direction: column; align-items: center; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-search-btn, a.ph-hcard, .ph-tlds a { transition: none; }
}
:root[data-bs-theme="dark"] .ph-hero { background: linear-gradient(180deg, #0b1220, #0f172a); }
:root[data-bs-theme="dark"] .ph-hero h1,
:root[data-bs-theme="dark"] .ph-hero-features strong { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-hero h1 span { color: #60a5fa; }
:root[data-bs-theme="dark"] .ph-hero-eyebrow { color: #60a5fa; }
:root[data-bs-theme="dark"] .ph-hero-text,
:root[data-bs-theme="dark"] .ph-hero-features small { color: #94a3b8; }
:root[data-bs-theme="dark"] .ph-hero-features i { color: #60a5fa; }
:root[data-bs-theme="dark"] .ph-search { background: #111827; border-color: #1e3a5f; }
:root[data-bs-theme="dark"] .ph-search input[type="text"] { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-tlds a { border-color: #334155; background: #1e293b; color: #e2e8f0; }
:root[data-bs-theme="dark"] .ph-tlds a:hover { background: #334155; color: #fff; }
:root[data-bs-theme="dark"] .ph-transfer-link { color: #60a5fa; }

/* ---------- 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-av-blue { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.ph-av-orange { background: linear-gradient(135deg, #f36b23, #f59e0b); }
.ph-av-cyan { background: linear-gradient(135deg, #12b8c4, #0066cc); }
.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: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-review-intro > p,
:root[data-bs-theme="dark"] .ph-tp-score { color: #94a3b8; }
: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, #f36b23);
}
.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, #0b1220, #0f172a);
}
: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: #f1f5f9; }
: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: #111827; border-color: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .ph-support-header,
:root[data-bs-theme="dark"] .ph-support-actions { background: #111827; }
:root[data-bs-theme="dark"] .ph-support-art { background: #0f1b2e; }
:root[data-bs-theme="dark"] .ph-support-art::after { background: linear-gradient(180deg, transparent, #111827); }
: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: #94a3b8; }
:root[data-bs-theme="dark"] .ph-contact-link,
:root[data-bs-theme="dark"] .ph-support-secondary { color: #e2e8f0 !important; }
:root[data-bs-theme="dark"] .ph-support-secondary { background: #1e293b; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .ph-faq-icon { background: #1e293b; color: #e2e8f0; }
: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: #0b1220; }

/* ---------- Captcha inside the homepage hero: same solid-card look as the cart (was bare text, a tiny image and a ~30px input) ---------- */
.ph-hero .domainchecker-homepage-captcha { width: 100%; max-width: 560px; margin: 18px auto 0; }
.ph-hero .domainchecker-homepage-captcha > .col-md-8 { flex: 0 0 100%; max-width: 100%; padding: 0; margin: 0; }
.ph-hero #default-captcha-domainchecker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 16px 20px !important;
  border: 1px solid var(--ph-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 32, 51, .05);
}
.ph-hero #default-captcha-domainchecker p { flex: 0 0 100%; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ph-text-3); }
.ph-hero #default-captcha-domainchecker .col-6 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.ph-hero #default-captcha-domainchecker img { height: 44px; width: auto; border-radius: 10px; vertical-align: middle; }
.ph-hero #default-captcha-domainchecker #inputCaptcha {
  width: 150px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: var(--ph-ink);
  font-size: 16px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
/* minimal focus: one blue line (the global orange .form-control:focus-visible ring is switched off here, it stacked with this border) */
.ph-hero #default-captcha-domainchecker #inputCaptcha:focus,
.ph-hero #default-captcha-domainchecker #inputCaptcha:focus-visible { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; }
:root[data-bs-theme="dark"] .ph-hero #default-captcha-domainchecker { border-color: #1f2937; background: #111827; box-shadow: none; }
:root[data-bs-theme="dark"] .ph-hero #default-captcha-domainchecker p { color: #94a3b8; }
:root[data-bs-theme="dark"] .ph-hero #default-captcha-domainchecker #inputCaptcha { border-color: #334155; background: #0b1220; color: #f1f5f9; }

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

/* ---------- Mobile / tablet header and off-canvas menu (< 1200px) ---------- */
.ph-offcanvas-head, .ph-offcanvas-cta, .ph-offcanvas-help { 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;
  }
  .ph-cta-login { background: var(--ph-orange); color: #fff; }
  .ph-cta-login:hover { background: var(--ph-orange-dark); color: #fff; }
  .ph-cta-register { border: 1.5px solid var(--ph-blue); color: var(--ph-blue); background: transparent; }
  .ph-cta-register:hover { background: var(--ph-blue); color: #fff; }
  .ph-offcanvas-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 12px;
    color: var(--ph-text-3);
    font-size: 14px;
    text-decoration: none;
  }
  .ph-offcanvas-help:hover { color: #15803d; text-decoration: none; }
  .ph-offcanvas-help img { flex: none; }
  #mainNavbar .ph-client-nav + .ph-offcanvas-help { margin-top: auto; }

  /* Dark mode */
  :root[data-bs-theme="dark"] .offcanvas-collapse { background: #0f172a; box-shadow: 8px 0 32px rgba(0, 0, 0, .5); }
  :root[data-bs-theme="dark"] .ph-offcanvas-head { background: #0f172a; }
  :root[data-bs-theme="dark"] .ph-offcanvas-close { color: #e2e8f0; }
  :root[data-bs-theme="dark"] .ph-offcanvas-close:hover { background: #1e293b; }
  :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav > li > a { color: #e2e8f0; }
  :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,
  :root[data-bs-theme="dark"] .ph-offcanvas-help { color: #cbd5e1; }
  :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: #1e293b; color: #fdba74; }
  :root[data-bs-theme="dark"] .ph-cta-register { border-color: #60a5fa; color: #93c5fd; }
  :root[data-bs-theme="dark"] .ph-cta-register:hover { background: #60a5fa; color: #0f172a; }
}

/* 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: #e2e8f0; }
}

/* 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; }
  #mainNavbar .ph-offcanvas-cta .ph-cta-login,
  #mainNavbar .ph-offcanvas-cta .ph-cta-login:hover { color: #fff; }
  #mainNavbar .ph-offcanvas-cta .ph-cta-register { color: var(--ph-blue); }
  #mainNavbar .ph-offcanvas-cta .ph-cta-register:hover { color: #fff; }
  :root[data-bs-theme="dark"] #mainNavbar .ph-offcanvas-cta .ph-cta-register { color: #93c5fd; }
  :root[data-bs-theme="dark"] #mainNavbar .ph-offcanvas-cta .ph-cta-register:hover { color: #0f172a; }
}
:root[data-bs-theme="dark"] .ph-offcanvas-help img { filter: brightness(0) invert(.8); }

/* 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: "Manrope", 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: #1f2937 !important; background: #111827; }
:root[data-bs-theme="dark"] .tiles .tile .stat { color: #f1f5f9; }
:root[data-bs-theme="dark"] .tiles .tile .title { color: #cbd5e1; }
:root[data-bs-theme="dark"] .tiles .tile i { background: #1e293b; color: #60a5fa; }
:root[data-bs-theme="dark"] .tiles .tile:hover, :root[data-bs-theme="dark"] .tiles .tile:focus-visible { background: #111827; 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: #1f2937; background: #111827; }
: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: #1f2937; background: #1e293b; }
: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: #f1f5f9; }
: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: #0f172a; }
:root[data-bs-theme="dark"] .tt-client-home-cards.client-home-cards .card-body { color: #cbd5e1; }
: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: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-footer .btn-view-more { color: #94a3b8; }
: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: #1f2937; background: #111827; color: #e2e8f0; }
:root[data-bs-theme="dark"] .sidebar .list-group-item.list-group-item-action:hover { background: #1e293b; 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: #94a3b8; }
:root[data-bs-theme="dark"] #registerDomainPanel .input-group > .form-control,
:root[data-bs-theme="dark"] #registerDomainPanel #default-captcha-domainchecker .form-control { border-color: #475569; background: #0b1220; color: #f1f5f9; }
:root[data-bs-theme="dark"] #registerDomainPanel #default-captcha-domainchecker > p { color: #cbd5e1; }
: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: #475569; }
: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: #cbd5e1; }
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: #94a3b8; }
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { border-color: #475569; background-color: #0b1220; color: #f1f5f9; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list { border-color: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list thead th { border-bottom-color: #1f2937; background: #1e293b !important; color: #94a3b8; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td { border-top-color: #1f2937; background: #111827; color: #e2e8f0; }
:root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody tr:hover td { background: #1e293b; }
: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: #94a3b8 !important; }
:root[data-bs-theme="dark"] .label.status { background: #1e293b; color: #cbd5e1; }
: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: #1f2937; background: #111827; color: #cbd5e1; }
:root[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link:hover { background: #1e293b; 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: #0f172a; color: #475569; }

/* 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: #1f2937; background: #111827; }

/* ---------- 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: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .product-status .product-icon h3 { color: #f1f5f9; }
:root[data-bs-theme="dark"] .product-status .product-icon h4 { color: #94a3b8; }
:root[data-bs-theme="dark"] .nav-tabs { border-bottom-color: #1f2937; }
:root[data-bs-theme="dark"] .nav-tabs .nav-link { color: #94a3b8; }
: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: #1f2937; }
:root[data-bs-theme="dark"] .view-ticket .card-body.bg-primary-light { background: #1e293b !important; }
:root[data-bs-theme="dark"] .md-editor { border-color: #475569; }
:root[data-bs-theme="dark"] .md-editor .md-header { background: #1e293b; }
:root[data-bs-theme="dark"] .md-editor .md-header .btn { border-color: #475569; background: #0b1220 !important; color: #e2e8f0 !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: #1f2937; background: #111827; }
: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: #1f2937; background: #1e293b; color: #cbd5e1; }
:root[data-bs-theme="dark"] .custom-file-label { border-color: #475569; background: #0b1220; color: #cbd5e1; }
:root[data-bs-theme="dark"] .custom-file-label::after { border-left-color: #475569; background: #1e293b; color: #93c5fd; }
:root[data-bs-theme="dark"] .view-ticket > .card-body:not(.bg-primary-light) { border-top-color: #1f2937; }
:root[data-bs-theme="dark"] .ticket-reply .posted-by { border-bottom-color: #1f2937; background: #1e293b; color: #94a3b8; }
:root[data-bs-theme="dark"] .ticket-reply .posted-by-name { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ticket-reply .message { color: #e2e8f0; }
: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: #1e293b; color: #cbd5e1; }

/* 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: #cbd5e1; }
:root[data-bs-theme="dark"] .primary-content #default-captcha-domainchecker .form-control { border-color: #475569; background: #0b1220; color: #f1f5f9; }

/* ---------- 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: #0b1220; 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: #475569; background: transparent; color: #e2e8f0; }
: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: #1e293b; 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: #1e293b; color: #cbd5e1; }
: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: #475569; background: transparent; color: #e2e8f0; }
: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: #1e293b; 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: #111827; }
:root[data-bs-theme="dark"] .tt-client-home-cards .card-header h3.card-title > i { background: #1e293b; 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: #1f2937; background: #111827; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
:root[data-bs-theme="dark"] .div-service-buttons .dropdown-item { color: #e2e8f0; }
:root[data-bs-theme="dark"] .div-service-buttons .dropdown-item:hover { background: #1e293b; color: #93c5fd; }
:root[data-bs-theme="dark"] .div-service-buttons .btn-group.show > .btn.dropdown-toggle { background: #1e293b !important; color: #93c5fd !important; border-color: #60a5fa !important; }
:root[data-bs-theme="dark"] #servicesPanel .list-group-item { border-bottom-color: #1f2937 !important; }
:root[data-bs-theme="dark"] #servicesPanel .list-group-item:hover { background: #1e293b; }
:root[data-bs-theme="dark"] .div-service-item .div-service-name .font-weight-bold { color: #f1f5f9; }
: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: #111827; }
:root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { background: #1e293b; 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: #f1f5f9; }
:root[data-bs-theme="dark"] .primary-content > h3.card-title + p, :root[data-bs-theme="dark"] .tt-custom-card .card-body > p { color: #94a3b8; }
: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: #1f2937; color: #e2e8f0; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table tr:first-child > th { border-bottom-color: #1f2937; background: #1e293b; color: #94a3b8; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table tr:hover td { background: #1e293b; }
:root[data-bs-theme="dark"] .tt-custom-card > table.table td small, :root[data-bs-theme="dark"] .tt-custom-card > p.text-muted { color: #94a3b8 !important; }
:root[data-bs-theme="dark"] .tt-custom-card > p.text-muted { border-top-color: #1f2937; }
: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: #1f2937 !important; background: #1e293b !important; color: #64748b !important; }
:root[data-bs-theme="dark"] .tt-custom-card .card-body > h3.card-title { color: #f1f5f9; }
:root[data-bs-theme="dark"] .tt-custom-card .form-check-inline { border-color: #475569; background: #0b1220; color: #e2e8f0; }
: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: #1f2937; background: #1e293b; }
: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: #94a3b8 !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: #111827; }
:root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { border-color: #1f2937; }
:root[data-bs-theme="dark"] .modal-title { color: #f1f5f9; }
:root[data-bs-theme="dark"] .modal-body { color: #cbd5e1; }
:root[data-bs-theme="dark"] .modal-header .close { color: #cbd5e1; }
:root[data-bs-theme="dark"] .dropdown-menu { border-color: #1f2937; background: #111827; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item { color: #e2e8f0; }
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { background: #1e293b; 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: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .primary-content .panel-heading.card-header, :root[data-bs-theme="dark"] .primary-content .card > .card-header { border-bottom-color: #1f2937; background: #1e293b; }
: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: #f1f5f9; }
:root[data-bs-theme="dark"] select.form-control:not([multiple]), :root[data-bs-theme="dark"] select.custom-select { background-color: #0b1220; }
:root[data-bs-theme="dark"] .col-form-label, :root[data-bs-theme="dark"] .primary-content label { color: #cbd5e1; }
:root[data-bs-theme="dark"] .tt-overview .row.mb-3 { border-bottom-color: #1f2937; }
: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: #f1f5f9; }
: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: #0f172a; }
:root[data-bs-theme="dark"] table.table.border { border-color: #1f2937 !important; background: #111827; }
:root[data-bs-theme="dark"] table.table.border thead th { border-bottom-color: #1f2937; background: #1e293b; color: #94a3b8; }
:root[data-bs-theme="dark"] table.table.border td { border-top-color: #1f2937; color: #e2e8f0; }
:root[data-bs-theme="dark"] table.table.border td.bg-default { background: #1e293b !important; color: #f1f5f9; }
:root[data-bs-theme="dark"] table.table.border tr.masspay-total td { background: #111827; color: #cbd5e1; }
: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: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .tt-news-single { border-top-color: #1f2937; }
:root[data-bs-theme="dark"] .tt-news-single h2.h6 a, :root[data-bs-theme="dark"] .primary-content > h2.card-title { color: #f1f5f9; }
: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: #cbd5e1; }
:root[data-bs-theme="dark"] .kb-article-item { border-color: #1f2937; background: #111827; color: #f1f5f9; }
:root[data-bs-theme="dark"] .kb-article-item:hover { border-color: #60a5fa; background: #1e293b; }

/* 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: #1f2937; background: #111827; }
/* 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: #cbd5e1; }
:root[data-bs-theme="dark"] .cpanel-usage-stats .usage-dial { color: #e2e8f0 !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: #475569; background: #1e293b; color: #cbd5e1; }
:root[data-bs-theme="dark"] .primary-content .input-group > .form-control { background: #0b1220; color: #f1f5f9; border-color: #475569; }

/* 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: #1f2937; }

/* ---------- 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: #f1f5f9; }
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card-body.p-0 > p.text-muted { color: #94a3b8 !important; }
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card.bg-default { border-color: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] fieldset .form-group:last-child { border-top-color: #1f2937; }
/* 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: #1f2937; }
/* 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: #cbd5e1; }
:root[data-bs-theme="dark"] .tt-captcha-info #inputCaptcha { border-color: #475569; background: #0b1220; color: #f1f5f9; }
/* 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) */
.ph-hero #default-captcha-domainchecker #inputCaptcha.form-control { width: 150px; height: 44px; padding: 0 14px; font-size: 16px; font-weight: 400; letter-spacing: .14em; }
.ph-hero #default-captcha-domainchecker img { height: 44px; }

/* ---------- 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: #f1f5f9; }
: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: #475569; background: transparent; color: #e2e8f0; }
: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: #1e293b; color: #93c5fd; }
:root[data-bs-theme="dark"] .primary-content .card > .card-body > hr { border-top-color: #1f2937; }
: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: #e2e8f0; }
: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: #1e293b; }
: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: #1f2937; }
: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: #1f2937; background: #111827 !important; }
:root[data-bs-theme="dark"] .card.d-block.d-md-none > .card-header { border-bottom-color: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .card.d-block.d-md-none > .card-header .card-title { color: #f1f5f9; }

/* ---------- 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 #f36b23; 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: #111827; border-color: rgba(255, 255, 255, .1); border-bottom-color: #f36b23; }
  :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: #e2e8f0; }
  :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: #1e293b; }
  :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: #1e293b; 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 #f36b23 !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: #e2e8f0 !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: #1e293b; }
  .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 ---------- */
.ph-bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 24px; margin-bottom: 32px; text-align: left; }
.ph-bento-search { grid-column: 1; grid-row: 1; }
.ph-bento-main { grid-column: 1; grid-row: 2; }
.ph-bento-promo { grid-column: 2; grid-row: 1 / span 2; }
.ph-bento-search .ph-hero-form { max-width: none; margin: 0; }
.ph-bento-search .ph-search { max-width: none; margin: 0; padding: 8px 8px 8px 4px; border: 1px solid var(--ph-line); border-radius: 18px; background: #fff; box-shadow: 0 6px 24px rgba(23, 32, 51, .06); }
.ph-search-tld { flex: none; width: 120px; height: 52px; margin: 0 8px; padding: 0 36px 0 14px; border: 1.5px solid var(--ph-line); border-radius: 12px; 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 12px center / 16px no-repeat; appearance: none; -webkit-appearance: none; color: var(--ph-ink); font-size: 16px; font-weight: 600; cursor: pointer; }
.ph-search-tld:focus-visible { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none; }
.ph-bento-search .ph-search-btn { min-height: 52px; padding: 0 28px; border-radius: 12px; background: #0b1b3a; color: #fff; font-size: 16px; font-weight: 700; }
.ph-bento-search .ph-search-btn:hover { background: #162a55; }
.ph-bento-search .ph-transfer-link { display: inline-flex; margin: 10px 4px 0; }

.ph-bento-main { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: center; min-height: 440px; padding: 40px 40px 40px 44px; overflow: hidden; border: 1px solid var(--ph-line); border-radius: 24px; background: radial-gradient(circle at 100% 0%, rgba(30, 123, 193, .12), transparent 420px), #fff; box-shadow: 0 6px 24px rgba(23, 32, 51, .05); }
.ph-bento-copy .ph-hero-eyebrow { justify-content: flex-start; margin: 0 0 16px; }
.ph-bento-copy h1 { margin: 0 0 16px; color: #0b1b3a; font-size: 46px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.ph-bento-copy h1 span { color: var(--ph-blue); }
.ph-bento-copy .ph-hero-text { max-width: 440px; margin: 0 0 28px; color: var(--ph-text-3); font-size: 17px; line-height: 1.65; text-align: left; }
.ph-bento-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 12px; background: #0b1b3a; color: #fff !important; font-size: 16px; font-weight: 700; text-decoration: none !important; transition: background-color .2s ease, transform .2s ease; }
.ph-bento-cta:hover { background: #162a55; transform: translateY(-2px); }
.ph-bento-visual { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.ph-bento-visual img { display: block; width: 100%; max-width: 420px; height: auto; }
.ph-float { position: absolute; margin: 0; padding: 10px 14px; border: 1px solid var(--ph-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(23, 32, 51, .12); color: var(--ph-text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.ph-float-a { top: 6%; right: 2%; display: flex; flex-direction: column; text-align: center; }
.ph-float-a strong { color: #16a34a; font-size: 22px; font-weight: 800; line-height: 1.1; }
.ph-float-b { bottom: 4%; left: 0; padding: 12px 16px; }
.ph-float-b li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ph-float-b i { color: #16a34a; font-size: 12px; }

.ph-bento-promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-height: 100%; padding: 36px 32px 0; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, #cfe0f5 0%, #b9c4ee 45%, #d7c7ee 100%); color: #0b1b3a; text-decoration: none !important; }
.ph-bento-promo h2 { margin: 0; max-width: 300px; color: #0b1b3a; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ph-bento-cta-light { background: #fff; color: #0b1b3a !important; box-shadow: 0 6px 18px rgba(23, 32, 51, .12); }
.ph-bento-cta-light:hover { background: #fff; }
.ph-bento-browser { display: block; width: 100%; margin-top: auto; padding: 14px 16px 0; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .78); box-shadow: 0 -8px 30px rgba(23, 32, 51, .1); }
.ph-bb-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.ph-bb-dots i { width: 10px; height: 10px; border-radius: 50%; background: #f5b83d; }
.ph-bb-dots i:nth-child(2) { background: #5ab0e8; }
.ph-bb-dots i:nth-child(3) { background: #f36b23; }
.ph-bb-url { display: block; padding: 12px 14px; border-radius: 10px 10px 0 0; background: #fff; color: var(--ph-muted); font-size: 18px; font-weight: 600; }
.ph-bb-url b { color: #0b1b3a; font-weight: 800; }
.ph-bb-list { display: flex; flex-direction: column; margin: 0 0 0 auto; width: 46%; background: #fff; border-radius: 0 0 10px 10px; }
.ph-bb-list em { padding: 8px 14px; color: #0b1b3a; font-size: 17px; font-style: normal; font-weight: 600; }
.ph-bb-list em:nth-child(odd) { background: #f3f8fe; }
.ph-bento-promo:hover .ph-bento-cta-light { transform: translateY(-2px); }

@media (max-width: 1099.98px) { .ph-bento-main { grid-template-columns: 1fr; padding: 32px; } .ph-bento-visual { min-height: 280px; } .ph-bento-copy h1 { font-size: 38px; } }
@media (max-width: 899.98px) { .ph-bento { grid-template-columns: 1fr; } .ph-bento-search, .ph-bento-main, .ph-bento-promo { grid-column: 1; grid-row: auto; } .ph-bento-promo { min-height: 420px; } }
@media (max-width: 575.98px) {
  .ph-bento { gap: 16px; }
  .ph-bento-search .ph-search { flex-wrap: wrap; padding: 10px; }
  .ph-bento-search .ph-search input[type="text"] { flex: 1 1 100%; min-height: 48px; padding-left: 8px; }
  .ph-bento-search .ph-search-icon { display: none; }
  .ph-search-tld { flex: 1 1 100px; margin: 0; }
  .ph-bento-search .ph-search-btn { flex: 1 1 140px; }
  .ph-bento-main { padding: 24px 20px; min-height: 0; }
  .ph-bento-copy h1 { font-size: 30px; }
  .ph-bento-visual { min-height: 220px; }
  .ph-float-b { display: none; }
  .ph-bento-promo { min-height: 380px; padding: 28px 22px 0; }
  .ph-bento-promo h2 { font-size: 26px; }
}
:root[data-bs-theme="dark"] .ph-bento-search .ph-search, :root[data-bs-theme="dark"] .ph-bento-main { border-color: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .ph-bento-main { background: radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .14), transparent 420px), #111827; }
:root[data-bs-theme="dark"] .ph-bento-copy h1 { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-bento-copy h1 span { color: #60a5fa; }
:root[data-bs-theme="dark"] .ph-bento-copy .ph-hero-text { color: #cbd5e1; }
:root[data-bs-theme="dark"] .ph-search-tld { border-color: #475569; background-color: #0b1220; color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-bento-cta:not(.ph-bento-cta-light), :root[data-bs-theme="dark"] .ph-bento-search .ph-search-btn { background: #2563eb; }
:root[data-bs-theme="dark"] .ph-float { border-color: #334155; background: #1e293b; color: #e2e8f0; }
:root[data-bs-theme="dark"] .ph-bento-promo { background: linear-gradient(160deg, #1e3a5f 0%, #2a3566 55%, #3b2a66 100%); color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-bento-promo h2 { color: #f1f5f9; }
@media (prefers-reduced-motion: reduce) { .ph-bento-cta { transition: none; } }
/* hero captcha (shown to visitors when WHMCS asks for it): one slim line under the search bar instead of a centred card */
.ph-bento-search .domainchecker-homepage-captcha { max-width: none !important; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ph-bento-search .domainchecker-homepage-captcha .row, .ph-bento-search .domainchecker-homepage-captcha [class*="col-"] { margin: 0; padding: 0; max-width: 100%; flex: 0 0 100%; }
.ph-bento-search #default-captcha-domainchecker { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 !important; text-align: left !important; }
.ph-bento-search #default-captcha-domainchecker > p { flex: 0 0 100%; margin: 0; color: var(--ph-text-3); font-size: 13px; }
.ph-bento-search #default-captcha-domainchecker .captchaimage, .ph-bento-search #default-captcha-domainchecker .col-6 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.ph-bento-search #default-captcha-domainchecker img { height: 44px; width: auto; border-radius: 8px; }
.ph-bento-search #default-captcha-domainchecker #inputCaptcha.form-control { width: 150px; height: 44px; }
.ph-hero #default-captcha-domainchecker #inputCaptcha.form-control { width: 150px; height: 44px; }
.ph-bento-search .domainchecker-homepage-captcha > .row { margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }
.ph-bento-search #default-captcha-domainchecker { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; width: 100%; }
.ph-bento-search #default-captcha-domainchecker > p { padding: 0 !important; }
.ph-bento-search .domainchecker-homepage-captcha, .ph-bento-search .domainchecker-homepage-captcha .row, .ph-bento-search .domainchecker-homepage-captcha .text-center, .ph-bento-search .domainchecker-homepage-captcha [class*="col-"] { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; justify-content: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; }
.ph-bento-search #default-captcha-domainchecker .captchaimage, .ph-bento-search #default-captcha-domainchecker .col-6 { justify-content: flex-start !important; }
.ph-bento-search .ph-hero-form > .row { margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; text-align: left !important; }
.ph-bento-search .ph-hero-form > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* ---------- Hero, glass pass: minimal, translucent cards over a soft brand backdrop, no heavy dark blocks, no duplicated artwork ---------- */
.ph-hero { background: radial-gradient(circle at 8% 10%, rgba(30, 123, 193, .16), transparent 460px), radial-gradient(circle at 92% 6%, rgba(243, 107, 35, .12), transparent 440px), radial-gradient(circle at 70% 90%, rgba(167, 139, 250, .12), transparent 420px), #faf7f4; }
.ph-bento { gap: 20px; }
.ph-bento-search .ph-search, .ph-bento-main, .ph-bento-promo, .ph-hcard {
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 32px rgba(31, 41, 55, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.ph-bento-main { border-radius: 24px; min-height: 380px; padding: 40px 44px; }
.ph-bento-search .ph-search { border-radius: 20px; }
.ph-search-tld, .ph-bento-search .ph-search input[type="text"] { background-color: transparent; }
.ph-search-tld { border-color: rgba(203, 213, 225, .8); }
.ph-bento-cta, .ph-bento-search .ph-search-btn { background: var(--ph-blue); box-shadow: 0 6px 18px rgba(30, 123, 193, .3); }
.ph-bento-cta:hover, .ph-bento-search .ph-search-btn:hover { background: var(--ph-blue-dark); }
.ph-float { border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(31, 41, 55, .1); }

/* promo: translucent gradient glass with floating extension chips */
.ph-bento-promo { justify-content: flex-start; padding: 36px 32px; background: linear-gradient(160deg, rgba(207, 224, 245, .75), rgba(215, 199, 238, .6)); }
.ph-bento-promo h2 { max-width: 280px; }
.ph-bento-cta-light { background: rgba(255, 255, 255, .85); color: #0b1b3a !important; }
.ph-bento-tlds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.ph-bento-tlds em { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #0b1b3a; font-size: 16px; font-style: normal; font-weight: 700; box-shadow: 0 4px 14px rgba(31, 41, 55, .08); }
.ph-bento-tlds em:nth-child(odd) { transform: translateY(8px); }

/* the three cards: light glass with a coloured top accent instead of solid dark blocks */
.ph-hcard { color: #0b1b3a; }
.ph-hcard h2 { color: #0b1b3a; font-size: 26px; }
.ph-hcard p, .ph-hcard-ticket p { color: var(--ph-text-3); }
.ph-hcard-news, .ph-hcard-ticket, .ph-hcard-kb { background: rgba(255, 255, 255, .58); }
.ph-hcard-news { box-shadow: 0 8px 32px rgba(31, 41, 55, .08), inset 0 3px 0 var(--ph-blue); }
.ph-hcard-ticket { box-shadow: 0 8px 32px rgba(31, 41, 55, .08), inset 0 3px 0 #f36b23; }
.ph-hcard-kb { box-shadow: 0 8px 32px rgba(31, 41, 55, .08), inset 0 3px 0 #7c5cd6; }
.ph-hcard-cta, .ph-hcard-ticket .ph-hcard-cta, .ph-hcard-kb .ph-hcard-cta { color: var(--ph-blue); }
.ph-hcard:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(31, 41, 55, .12), inset 0 1px 0 rgba(255, 255, 255, .8); }
.ph-hcard-arrow { color: var(--ph-muted); }
.ph-hcard-ticket { min-height: 0; }

:root[data-bs-theme="dark"] .ph-hero { background: radial-gradient(circle at 8% 10%, rgba(59, 130, 246, .22), transparent 460px), radial-gradient(circle at 92% 6%, rgba(243, 107, 35, .14), transparent 440px), #0b1220; }
:root[data-bs-theme="dark"] .ph-bento-search .ph-search, :root[data-bs-theme="dark"] .ph-bento-main, :root[data-bs-theme="dark"] .ph-bento-promo, :root[data-bs-theme="dark"] .ph-hcard { border-color: rgba(255, 255, 255, .1); background: rgba(30, 41, 59, .55); box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-bs-theme="dark"] .ph-bento-promo { background: linear-gradient(160deg, rgba(37, 99, 235, .25), rgba(124, 58, 237, .22)); }
:root[data-bs-theme="dark"] .ph-hcard h2, :root[data-bs-theme="dark"] .ph-bento-tlds em { color: #f1f5f9; }
:root[data-bs-theme="dark"] .ph-hcard p, :root[data-bs-theme="dark"] .ph-hcard-ticket p { color: #cbd5e1; }
:root[data-bs-theme="dark"] .ph-hcard-cta, :root[data-bs-theme="dark"] .ph-hcard-ticket .ph-hcard-cta, :root[data-bs-theme="dark"] .ph-hcard-kb .ph-hcard-cta { color: #93c5fd; }
:root[data-bs-theme="dark"] .ph-bento-tlds em, :root[data-bs-theme="dark"] .ph-float { border-color: rgba(255, 255, 255, .12); background: rgba(30, 41, 59, .7); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ph-bento-search .ph-search, .ph-bento-main, .ph-bento-promo, .ph-hcard { background: rgba(255, 255, 255, .92); } :root[data-bs-theme="dark"] .ph-bento-search .ph-search, :root[data-bs-theme="dark"] .ph-bento-main, :root[data-bs-theme="dark"] .ph-bento-promo, :root[data-bs-theme="dark"] .ph-hcard { background: rgba(30, 41, 59, .96); } }
@media (max-width: 899.98px) { .ph-bento-promo { min-height: 0; gap: 24px; } .ph-bento-tlds { margin-top: 8px; } }
/* dark: the illustration's speech bubble is transparent, so it sits on a light glass plate */
:root[data-bs-theme="dark"] .ph-bento-visual img { padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, .92); }
.ph-bento-promo { min-height: 0; }

/* ---------- Hero, minimal: the search sits in the first card; no floating chips, no second CTA ---------- */
.ph-bento { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; margin-bottom: 28px; }
.ph-bento-main { grid-column: 1; grid-row: 1; min-height: 0; padding: 44px 44px 40px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.ph-bento-promo { grid-column: 2; grid-row: 1; padding: 32px 28px; }
.ph-bento-copy .ph-hero-text { margin-bottom: 24px; }
.ph-bento-copy .ph-bento-search { margin: 0; }
.ph-bento-copy .ph-search { border: 1px solid rgba(203, 213, 225, .8); background: rgba(255, 255, 255, .85); box-shadow: 0 4px 16px rgba(31, 41, 55, .06); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ph-bento-copy .ph-search input[type="text"] { min-width: 0; }
.ph-bento-visual { opacity: .96; }
.ph-bento-visual img { max-width: 340px; }
.ph-bento-promo { justify-content: space-between; }
.ph-bento-promo h2 { font-size: 26px; }
.ph-bento-tlds { margin-top: 0; }
.ph-bento-tlds em { padding: 8px 14px; font-size: 15px; }
.ph-bento-tlds em:nth-child(odd) { transform: none; }
@media (max-width: 1199.98px) { .ph-bento-main { grid-template-columns: 1fr; } .ph-bento-visual { display: none; } }
@media (max-width: 899.98px) { .ph-bento { grid-template-columns: 1fr; } .ph-bento-main, .ph-bento-promo { grid-column: 1; grid-row: auto; } .ph-bento-promo { gap: 20px; } }
@media (max-width: 575.98px) { .ph-bento-main { padding: 24px 18px; } .ph-bento-copy .ph-search { padding: 10px; } }
:root[data-bs-theme="dark"] .ph-bento-copy .ph-search { border-color: #334155; background: rgba(15, 23, 42, .6); box-shadow: none; }
/* search spans the full card width; the illustration sits top-right behind the copy column */
.ph-bento-main { display: block; position: relative; }
.ph-bento-copy { position: relative; z-index: 1; }
.ph-bento-copy .ph-hero-eyebrow, .ph-bento-copy h1, .ph-bento-copy .ph-hero-text { max-width: 520px; }
.ph-bento-copy .ph-bento-search, .ph-bento-copy .ph-hero-form { width: 100%; max-width: none; }
.ph-bento-visual { position: absolute; top: 24px; right: 28px; width: 300px; z-index: 0; display: block; align-self: auto; }
.ph-bento-visual img { max-width: 100%; }
@media (max-width: 1199.98px) { .ph-bento-visual { display: none; } .ph-bento-copy .ph-hero-eyebrow, .ph-bento-copy h1, .ph-bento-copy .ph-hero-text { max-width: none; } }
.ph-bento-promo { align-items: flex-start; }
.ph-bento-promo .ph-bento-cta-light { align-self: flex-start; }
.ph-bento-promo h2 { margin-bottom: 0; }
.ph-bento-promo .ph-bento-tlds { margin-top: auto; }
.ph-bento-promo { gap: 20px; justify-content: flex-start; }
@media (max-width: 575.98px) { .ph-bento-copy .ph-search-btn { white-space: nowrap; } .ph-bento-copy .ph-search-tld { flex: 0 0 96px; } .ph-bento-copy .ph-search-btn { flex: 1 1 auto; } }
/* "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: #0f172a; }
:root[data-bs-theme="dark"] #tableServicesList td:nth-child(2) > strong { color: #f1f5f9; }
@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: #1f2937; color: #e2e8f0; }
:root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > table.table-striped td:last-child { color: #f1f5f9; }
:root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > .card-footer { border-top-color: #1f2937; background: #1e293b; color: #94a3b8; }
.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: #1f2937; background: #111827 !important; }
:root[data-bs-theme="dark"] .affiliate-stat span { color: #f1f5f9; }
:root[data-bs-theme="dark"] .affiliate-stat i { background: #1e293b; }
:root[data-bs-theme="dark"] .card.my-3 .card-body input.form-control[readonly] { border-color: #334155; background: #0b1220; color: #cbd5e1; }
: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: #1f2937 !important; color: #e2e8f0; }
:root[data-bs-theme="dark"] table.table-rounded td strong { color: #f1f5f9; }

/* ---------- 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: #f1f5f9 !important; }
:root[data-bs-theme="dark"] .ph-error-links a { border-color: #334155; background: rgba(30, 41, 59, .7); color: #e2e8f0; }
:root[data-bs-theme="dark"] .ph-error .buttons .btn-info { border-color: #475569; background: transparent; color: #e2e8f0; }
@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: #1f2937; background: #111827; }
:root[data-bs-theme="dark"] .text-center > .card.py-3 h1 { color: #f1f5f9; }

/* ---------- 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; }
.ph-rating small { color: #6b7280; }
:root:not([data-bs-theme="dark"]) .ph-hcard-cta,
:root:not([data-bs-theme="dark"]) .ph-hcard-ticket .ph-hcard-cta,
:root:not([data-bs-theme="dark"]) .ph-hcard-kb .ph-hcard-cta,
: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"] .ph-band-label { color: #9ca3af; }
:root[data-bs-theme="dark"] .tt-read-more { color: #60a5fa; }
.ph-vat { color: #94a3b8; }
.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 #0f172a, 0 0 0 4px #60a5fa; }