@charset "UTF-8";
/* ==========================================================================
   STARTIP L.L.C  ·  WHMCS CLIENT PORTAL THEME
   File:      custom.css
   Target:    WHMCS 8.13.x · parent theme "Twenty-One" (Bootstrap 4)
   Child:     /templates/startip/css/custom.css
   Purpose:   Make clients.startip.net read as one system with startip.net.
   Palette:   Navy #022F58 · Deep navy #04203F · Azure #089CDB · Blue #0779BE
   Type:      Poppins (display) · Inter (body) · IBM Plex Sans Arabic (RTL)
   Rules:     Style, don't restructure. No layout surgery, no display:none on
              WHMCS functional elements. Every var() used is defined in :root.
   ========================================================================== */

/* --- 1 · WEB FONTS + SIBLING SHEET -----------------------------------------
   @import rules MUST stay at the very top of the file. If you decide NOT to
   upload order-form.css, delete line 2 of this block (the second @import). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
@import url('order-form.css');

/* ==========================================================================
   2 · DESIGN TOKENS
   Namespaced --st-* so nothing collides with WHMCS or Bootstrap variables.
   ========================================================================== */
:root {
  /* Navy ramp (ink) */
  --st-navy-50:  #eaf1f8;
  --st-navy-100: #cfe0ef;
  --st-navy-200: #9fc0de;
  --st-navy-300: #6698c6;
  --st-navy-400: #33709f;
  --st-navy-500: #0a4a82;
  --st-navy-600: #063a68;
  --st-navy-700: #022f58;   /* brand ink */
  --st-navy-800: #021f3d;
  --st-navy-900: #01162a;

  /* Azure ramp (signal) */
  --st-azure-50:  #e6f6fd;
  --st-azure-100: #c2e9fa;
  --st-azure-200: #8fd6f4;
  --st-azure-300: #57c1ed;
  --st-azure-400: #29aee4;
  --st-azure-500: #089cdb;  /* brand azure */
  --st-azure-600: #0782ba;
  --st-azure-700: #086489;

  /* Blue ramp (depth) */
  --st-blue-50:  #e7f2fa;
  --st-blue-100: #c4def2;
  --st-blue-300: #4f9ed4;
  --st-blue-500: #0779be;   /* brand blue */
  --st-blue-600: #06639c;
  --st-blue-700: #084f7c;

  /* Surfaces — the portal uses a COOL neutral canvas (data-dense UI),
     unlike the warm canvas of the marketing site. Deliberate. */
  --st-paper:        #ffffff;
  --st-bg:           #f6f9fc;
  --st-bg-alt:       #eef4fa;
  --st-surface:      #ffffff;
  --st-surface-sunk: #f9fbfd;
  --st-border:       #dce6ef;
  --st-border-soft:  #e8eef5;
  --st-border-strong:#c3d5e6;

  /* Dark surfaces (header, footer, dark cards) */
  --st-dark:         #04203f;   /* deep navy */
  --st-dark-2:       #062b52;
  --st-dark-3:       #0a3160;
  --st-dark-border:  rgba(255, 255, 255, 0.12);
  --st-dark-border-2:rgba(255, 255, 255, 0.22);
  --st-on-dark:      #d7e6f5;
  --st-on-dark-mute: #93b2cf;

  /* Text */
  --st-text:         #0d1b2a;
  --st-text-strong:  #022f58;
  --st-text-muted:   #4d6478;
  --st-text-faint:   #7f95a8;
  --st-text-inverse: #ffffff;

  /* Interaction */
  --st-accent:       #089cdb;
  --st-accent-hover: #0782ba;
  --st-accent-ink:   #084f7c;   /* azure-as-text on light: darkened for AA */
  --st-link:         #06639c;
  --st-link-hover:   #089cdb;

  /* Semantic (harmonised toward the brand's blue-leaning neutrals) */
  --st-success:      #1f9d63;
  --st-success-bg:   #e8f7ef;
  --st-success-ink:  #14663f;
  --st-warning:      #c9821b;
  --st-warning-bg:   #fdf3e2;
  --st-warning-ink:  #8a5709;
  --st-danger:       #d1483f;
  --st-danger-bg:    #fdeceb;
  --st-danger-ink:   #96271f;
  --st-info:         #089cdb;
  --st-info-bg:      #e6f6fd;
  --st-info-ink:     #084f7c;
  --st-neutral:      #64798c;
  --st-neutral-bg:   #eef2f6;
  --st-neutral-ink:  #40566b;
  --st-whatsapp:     #25d366;
  --st-whatsapp-ink: #05330f;

  /* Gradients */
  --st-gradient-brand:  linear-gradient(135deg, #089cdb 0%, #0779be 55%, #063a68 100%);
  --st-gradient-header: linear-gradient(180deg, #04203f 0%, #062b52 100%);
  --st-gradient-hairline: linear-gradient(90deg, #089cdb 0%, #0779be 50%, rgba(8,156,219,0) 100%);

  /* Typography */
  --st-font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --st-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --st-font-arabic:  'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;
  --st-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --st-tracking-tight: -0.015em;
  --st-tracking-wide:  0.12em;
  --st-leading-body:   1.65;

  /* Radius */
  --st-radius-xs:   6px;
  --st-radius-sm:   8px;
  --st-radius-md:   12px;
  --st-radius-lg:   16px;
  --st-radius-xl:   22px;
  --st-radius-pill: 999px;

  /* Elevation */
  --st-shadow-xs: 0 1px 2px rgba(2, 47, 88, 0.06);
  --st-shadow-sm: 0 2px 8px rgba(2, 47, 88, 0.07);
  --st-shadow-md: 0 12px 30px -12px rgba(2, 47, 88, 0.18);
  --st-shadow-lg: 0 28px 60px -22px rgba(2, 47, 88, 0.28);
  --st-shadow-accent: 0 10px 24px -10px rgba(8, 156, 219, 0.55);
  --st-focus-ring: 0 0 0 3px rgba(8, 156, 219, 0.35);

  /* Motion */
  --st-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --st-dur-fast: 140ms;
  --st-dur-base: 240ms;

  /* Layout knobs */
  --st-logo-height: 42px;
  --st-logo-height-sm: 34px;
}

/* ==========================================================================
   3 · BASE + TYPOGRAPHY
   ========================================================================== */
body {
  background-color: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font-body);
  font-size: 15px;
  line-height: var(--st-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.card-title, .panel-title, .navbar-brand,
legend, .section-heading, .page-header h1 {
  font-family: var(--st-font-display);
  color: var(--st-text-strong);
  font-weight: 600;
  letter-spacing: var(--st-tracking-tight);
}

h1, .h1 { font-size: 1.9rem; font-weight: 700; }
h2, .h2 { font-size: 1.5rem; font-weight: 700; }
h3, .h3 { font-size: 1.22rem; }
h4, .h4 { font-size: 1.06rem; }
h5, .h5 { font-size: 0.96rem; }

small, .small, .text-muted { color: var(--st-text-muted) !important; }
strong, b { font-weight: 600; }
hr { border-top-color: var(--st-border); }
code, kbd, pre, samp { font-family: var(--st-font-mono); font-size: 0.86em; }
code { background: var(--st-azure-50); color: var(--st-blue-700); padding: 0.12em 0.4em; border-radius: var(--st-radius-xs); }

::selection { background: var(--st-azure-500); color: #fff; }

/* Page title block that Twenty-One renders above the content */
#main-body .page-header,
.page-header {
  border-bottom: 1px solid var(--st-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

/* --- Links ---------------------------------------------------------------- */
a { color: var(--st-link); transition: color var(--st-dur-fast) var(--st-ease); }
a:hover, a:focus { color: var(--st-link-hover); text-decoration: none; }
a.text-muted:hover { color: var(--st-link-hover) !important; }

:focus-visible {
  outline: 3px solid var(--st-azure-500);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4 · HEADER / MASTHEAD (dark navy)
   Twenty-One renders the logo bar and the account controls inside #header.
   Selectors are doubled up (#header / .header-lined / header.header) so this
   survives minor markup differences between 8.x point releases.
   ========================================================================== */
#header,
.header-lined,
body > header.header {
  background: var(--st-gradient-header);
  background-color: var(--st-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(8, 156, 219, 0.35);
  color: var(--st-on-dark);
}

/* Thin azure signal line under the masthead */
#header::after,
.header-lined::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--st-gradient-hairline);
  opacity: 0.9;
}

#header a,
.header-lined a { color: var(--st-on-dark); }
#header a:hover,
.header-lined a:hover { color: #ffffff; }

#header h1, #header h2, #header h3,
.header-lined h1, .header-lined h2, .header-lined h3 { color: #ffffff; }

/* Logo */
.navbar-brand,
#header .logo,
#header .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.navbar-brand img,
#header .logo img,
#header img.logo,
#logo img {
  height: var(--st-logo-height);
  width: auto;
  max-height: var(--st-logo-height);
  max-width: 230px;
  display: block;
}
/* Text fallback if no logo image is uploaded yet */
.navbar-brand {
  font-family: var(--st-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: var(--st-tracking-tight);
  color: #ffffff;
}

/* Account / language controls sitting in the masthead */
#header .btn,
.header-lined .btn { font-size: 0.86rem; }

#header .dropdown-menu,
.header-lined .dropdown-menu { color: var(--st-text); }
#header .dropdown-menu a,
.header-lined .dropdown-menu a { color: var(--st-text); }

/* ==========================================================================
   5 · PRIMARY NAVIGATION (#main-menu) + DROPDOWNS
   ========================================================================== */
#main-menu,
.navbar.navbar-main,
#main-menu .navbar {
  background: var(--st-dark-2);
  border: 0;
  border-radius: 0;
  box-shadow: var(--st-shadow-sm);
}

#main-menu .navbar-nav > li > a,
#main-menu .nav-link,
.navbar .nav-link {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.005em;
  color: var(--st-on-dark);
  padding: 0.95rem 1.05rem;
  border-radius: var(--st-radius-sm);
  transition: color var(--st-dur-fast) var(--st-ease),
              background-color var(--st-dur-fast) var(--st-ease);
}

#main-menu .navbar-nav > li > a:hover,
#main-menu .nav-link:hover,
#main-menu .nav-link:focus,
.navbar .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.07);
}

#main-menu .navbar-nav > li.active > a,
#main-menu .nav-item.active > .nav-link,
#main-menu .nav-link.active {
  color: #ffffff;
  background-color: rgba(8, 156, 219, 0.18);
  box-shadow: inset 0 -3px 0 0 var(--st-azure-500);
}

#main-menu .navbar-toggler,
.navbar-toggler {
  border-color: var(--st-dark-border-2);
  border-radius: var(--st-radius-sm);
  color: #ffffff;
}
.navbar-toggler:focus { box-shadow: var(--st-focus-ring); outline: 0; }

/* Dropdowns (account menu, language switcher, nav sub-items) */
.dropdown-menu {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-md);
  padding: 0.4rem;
  font-size: 0.92rem;
  color: var(--st-text);
}
.dropdown-item {
  border-radius: var(--st-radius-xs);
  padding: 0.5rem 0.75rem;
  color: var(--st-text);
  font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--st-azure-50);
  color: var(--st-accent-ink);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--st-azure-500);
  color: #ffffff;
}
.dropdown-divider { border-top-color: var(--st-border-soft); }
.dropdown-header {
  font-family: var(--st-font-display);
  font-size: 0.72rem;
  letter-spacing: var(--st-tracking-wide);
  text-transform: uppercase;
  color: var(--st-text-faint);
}

/* ==========================================================================
   6 · BUTTONS  (pill, Poppins, azure primary)
   ========================================================================== */
.btn {
  font-family: var(--st-font-display);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.35;
  border-radius: var(--st-radius-pill);
  padding: 0.62rem 1.35rem;
  border-width: 1px;
  transition: background-color var(--st-dur-base) var(--st-ease),
              border-color var(--st-dur-base) var(--st-ease),
              color var(--st-dur-base) var(--st-ease),
              box-shadow var(--st-dur-base) var(--st-ease),
              transform var(--st-dur-fast) var(--st-ease);
}
.btn:focus, .btn.focus { box-shadow: var(--st-focus-ring); outline: 0; }
.btn:active { transform: translateY(1px); }
.btn .fa, .btn .fas, .btn .far, .btn .fab { margin-inline-end: 0.35rem; }
.btn-lg  { padding: 0.85rem 1.9rem; font-size: 1.02rem; }
.btn-sm  { padding: 0.4rem 0.95rem; font-size: 0.83rem; }
.btn-xs  { padding: 0.25rem 0.7rem; font-size: 0.76rem; border-radius: var(--st-radius-pill); }
.btn-block { border-radius: var(--st-radius-pill); }

/* Primary — azure */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--st-accent);
  border-color: var(--st-accent);
  color: #ffffff;
  box-shadow: var(--st-shadow-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--st-accent-hover);
  border-color: var(--st-accent-hover);
  color: #ffffff;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--st-azure-200);
  border-color: var(--st-azure-200);
  box-shadow: none;
}

/* Secondary — navy */
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
  background-color: var(--st-navy-700);
  border-color: var(--st-navy-700);
  color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--st-navy-800);
  border-color: var(--st-navy-800);
  color: #ffffff;
}

/* Default / light — quiet outline used all over WHMCS */
.btn-default,
.btn-light,
.btn-outline-secondary {
  background-color: var(--st-paper);
  border-color: var(--st-border-strong);
  color: var(--st-text-strong);
}
.btn-default:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--st-azure-50);
  border-color: var(--st-azure-500);
  color: var(--st-accent-ink);
}

/* Outline primary */
.btn-outline-primary {
  color: var(--st-accent-ink);
  border-color: var(--st-azure-500);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--st-azure-500);
  border-color: var(--st-azure-500);
  color: #ffffff;
}

/* Semantic buttons */
.btn-success, .btn-success:not(:disabled):not(.disabled) {
  background-color: var(--st-success); border-color: var(--st-success); color: #fff;
}
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--st-success-ink); border-color: var(--st-success-ink); color: #fff;
}
.btn-info, .btn-info:not(:disabled):not(.disabled) {
  background-color: var(--st-blue-500); border-color: var(--st-blue-500); color: #fff;
}
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--st-blue-600); border-color: var(--st-blue-600); color: #fff;
}
.btn-warning, .btn-warning:not(:disabled):not(.disabled) {
  background-color: var(--st-warning); border-color: var(--st-warning); color: #fff;
}
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active {
  background-color: var(--st-warning-ink); border-color: var(--st-warning-ink); color: #fff;
}
.btn-danger, .btn-danger:not(:disabled):not(.disabled) {
  background-color: var(--st-danger); border-color: var(--st-danger); color: #fff;
}
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active {
  background-color: var(--st-danger-ink); border-color: var(--st-danger-ink); color: #fff;
}
.btn-link { color: var(--st-link); font-weight: 600; box-shadow: none; }
.btn-link:hover { color: var(--st-link-hover); }

/* WhatsApp support button — add class="btn btn-whatsapp" to any custom link */
.btn-whatsapp {
  background-color: var(--st-whatsapp);
  border-color: var(--st-whatsapp);
  color: var(--st-whatsapp-ink);
}
.btn-whatsapp:hover {
  background-color: #1fbb59;
  border-color: #1fbb59;
  color: var(--st-whatsapp-ink);
  transform: translateY(-1px);
}

.btn-group > .btn:first-child:not(:last-child) {
  border-start-end-radius: 0; border-end-end-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child) {
  border-start-start-radius: 0; border-end-start-radius: 0;
}
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }

/* ==========================================================================
   7 · CARDS / PANELS / WELLS
   ========================================================================== */
.card,
.panel,
.well,
.jumbotron {
  background-color: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-sm);
}
.card { margin-bottom: 1.5rem; }
.panel { margin-bottom: 1.5rem; }
.well { padding: 1.25rem; }

.card-header,
.panel-heading {
  background-color: var(--st-paper);
  border-bottom: 1px solid var(--st-border-soft);
  border-start-start-radius: var(--st-radius-lg);
  border-start-end-radius: var(--st-radius-lg);
  padding: 0.95rem 1.25rem;
  font-family: var(--st-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--st-text-strong);
}
.card-header .card-title,
.panel-heading .panel-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--st-text-strong);
}
.card-body, .panel-body { padding: 1.25rem; }
.card-footer, .panel-footer {
  background-color: var(--st-surface-sunk);
  border-top: 1px solid var(--st-border-soft);
  border-end-start-radius: var(--st-radius-lg);
  border-end-end-radius: var(--st-radius-lg);
  padding: 0.9rem 1.25rem;
}

/* Bootstrap 3-style contextual panels used by some WHMCS pages */
.panel-default > .panel-heading { color: var(--st-text-strong); }
.panel-primary { border-color: var(--st-azure-200); }
.panel-primary > .panel-heading,
.card.border-primary > .card-header {
  background-color: var(--st-azure-50);
  border-bottom-color: var(--st-azure-100);
  color: var(--st-accent-ink);
}
.panel-danger  { border-color: #f3c9c6; }
.panel-danger  > .panel-heading { background-color: var(--st-danger-bg); color: var(--st-danger-ink); border-bottom-color: #f3c9c6; }
.panel-success { border-color: #bde5d0; }
.panel-success > .panel-heading { background-color: var(--st-success-bg); color: var(--st-success-ink); border-bottom-color: #bde5d0; }
.panel-warning { border-color: #f0dcb6; }
.panel-warning > .panel-heading { background-color: var(--st-warning-bg); color: var(--st-warning-ink); border-bottom-color: #f0dcb6; }
.panel-info    { border-color: var(--st-azure-100); }
.panel-info    > .panel-heading { background-color: var(--st-info-bg); color: var(--st-info-ink); border-bottom-color: var(--st-azure-100); }

/* Hoverable cards (home panels, product cards) */
.card.card-hover:hover,
.home-shortcuts .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--st-shadow-md);
  border-color: var(--st-border-strong);
}

/* ==========================================================================
   8 · CLIENT HOME  ·  banner, shortcuts, home panels
   ========================================================================== */
#home-banner-container,
.home-banner,
.client-home-banner {
  background: var(--st-gradient-brand);
  border: 0;
  border-radius: var(--st-radius-xl);
  box-shadow: var(--st-shadow-md);
  color: #ffffff;
  padding: 1.75rem 1.75rem;
  margin-bottom: 1.75rem;
}
#home-banner-container h1,
#home-banner-container h2,
#home-banner-container h3,
.home-banner h1, .home-banner h2, .home-banner h3 { color: #ffffff; }
#home-banner-container p,
.home-banner p { color: rgba(255, 255, 255, 0.88); }
#home-banner-container .btn-primary,
.home-banner .btn-primary {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--st-navy-700);
  box-shadow: var(--st-shadow-sm);
}
#home-banner-container .btn-primary:hover,
.home-banner .btn-primary:hover { background-color: var(--st-azure-50); color: var(--st-navy-800); }

/* Shortcut tiles */
.home-shortcuts { margin-bottom: 1.75rem; }
.home-shortcuts .btn,
.home-shortcuts .btn-shortcut,
.btn-shortcut {
  display: block;
  background-color: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-xs);
  color: var(--st-text-strong);
  font-family: var(--st-font-display);
  font-weight: 600;
  padding: 1.15rem 0.85rem;
  text-align: center;
  white-space: normal;
  transition: transform var(--st-dur-base) var(--st-ease),
              box-shadow var(--st-dur-base) var(--st-ease),
              border-color var(--st-dur-base) var(--st-ease),
              color var(--st-dur-base) var(--st-ease);
}
.home-shortcuts .btn:hover,
.btn-shortcut:hover {
  transform: translateY(-3px);
  border-color: var(--st-azure-300);
  box-shadow: var(--st-shadow-md);
  color: var(--st-accent-ink);
  background-color: var(--st-paper);
}
.home-shortcuts .btn i,
.home-shortcuts .btn .fa,
.btn-shortcut i,
.btn-shortcut .fa {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 0.6rem;
  color: var(--st-azure-500);
  transition: color var(--st-dur-base) var(--st-ease);
}
.home-shortcuts .btn:hover i,
.btn-shortcut:hover i { color: var(--st-blue-500); }

/* Client home widgets/panels (services, domains, tickets, invoices summaries) */
#client-home-panels .card,
.client-home-panels .card,
.panel-group .panel,
[id^="panel-"] .card,
[id^="panel"] .panel {
  border-radius: var(--st-radius-lg);
}
.panel-loading, .card-loading { color: var(--st-text-faint); }

/* Small numeric "stat" text WHMCS uses in home widgets */
.stat-value, .home-panel-value, .panel-value {
  font-family: var(--st-font-display);
  font-weight: 700;
  color: var(--st-text-strong);
}

/* ==========================================================================
   9 · SIDEBAR / SECONDARY MENUS / LIST GROUPS
   ========================================================================== */
.sidebar .card,
.sidebar .panel,
#sidebar .card,
#sidebar .panel {
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  box-shadow: var(--st-shadow-xs);
}
.sidebar .card-header,
.sidebar .panel-heading,
#sidebar .panel-heading {
  background-color: var(--st-navy-700);
  color: #ffffff;
  border-bottom: 0;
  font-size: 0.86rem;
  letter-spacing: var(--st-tracking-wide);
  text-transform: uppercase;
  padding: 0.8rem 1.1rem;
}
.sidebar .card-header .card-title,
.sidebar .panel-heading .panel-title,
.sidebar .card-header a,
.sidebar .panel-heading a { color: #ffffff; font-size: 0.86rem; }

.list-group { border-radius: 0; }
.list-group-item {
  background-color: var(--st-surface);
  border-color: var(--st-border-soft);
  color: var(--st-text);
  font-size: 0.92rem;
  padding: 0.7rem 1.1rem;
  transition: background-color var(--st-dur-fast) var(--st-ease),
              color var(--st-dur-fast) var(--st-ease),
              box-shadow var(--st-dur-fast) var(--st-ease);
}
a.list-group-item, .list-group-item-action { color: var(--st-text); font-weight: 500; }
a.list-group-item:hover,
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--st-azure-50);
  color: var(--st-accent-ink);
  box-shadow: inset 3px 0 0 0 var(--st-azure-500);
}
.list-group-item.active,
a.list-group-item.active,
.list-group-item-action.active {
  background-color: var(--st-azure-50);
  border-color: var(--st-border-soft);
  color: var(--st-navy-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--st-azure-500);
}
.list-group-item .badge { float: none; }
.list-group-item i.fa,
.list-group-item .fas,
.list-group-item .far { color: var(--st-text-faint); width: 1.15em; }
a.list-group-item:hover i.fa,
.list-group-item-action:hover .fas { color: var(--st-azure-500); }

/* Nav pills / tabs (used on domain manager, ticket views, profile) */
.nav-tabs { border-bottom: 1px solid var(--st-border); }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--st-text-muted);
  font-family: var(--st-font-display);
  font-weight: 500;
  padding: 0.7rem 1rem;
}
.nav-tabs .nav-link:hover { color: var(--st-accent-ink); border-bottom-color: var(--st-azure-200); background: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--st-navy-700);
  background: transparent;
  border-bottom-color: var(--st-azure-500);
  font-weight: 600;
}
.nav-pills .nav-link { border-radius: var(--st-radius-pill); color: var(--st-text-muted); font-weight: 500; }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--st-azure-500); color: #ffffff; }

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent;
  padding: 0 0 0.5rem;
  font-size: 0.84rem;
  color: var(--st-text-muted);
  margin-bottom: 0.75rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--st-text-faint); }
.breadcrumb-item.active { color: var(--st-text-muted); }
.breadcrumb a { color: var(--st-link); font-weight: 500; }

/* ==========================================================================
   10 · TABLES  (services, domains, invoices, tickets lists)
   ========================================================================== */
.table {
  background-color: var(--st-surface);
  color: var(--st-text);
  font-size: 0.92rem;
  margin-bottom: 0;
}
.table thead th,
.table > thead > tr > th {
  background-color: var(--st-surface-sunk);
  border-bottom: 1px solid var(--st-border);
  border-top: 0;
  color: var(--st-text-muted);
  font-family: var(--st-font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--st-tracking-wide);
  text-transform: uppercase;
  padding: 0.8rem 1rem;
  white-space: nowrap;
}
.table td,
.table > tbody > tr > td {
  border-top: 1px solid var(--st-border-soft);
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--st-surface-sunk); }
.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover { background-color: var(--st-azure-50); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--st-border-soft); }
.table a { font-weight: 600; }

/* Tables that live inside a card should not double-border */
.card > .table,
.card > .table-responsive > .table,
.panel > .table,
.panel > .table-responsive > .table { margin-bottom: 0; }
.card > .table-responsive:last-child,
.card > .table:last-child {
  border-end-start-radius: var(--st-radius-lg);
  border-end-end-radius: var(--st-radius-lg);
  overflow: hidden;
}

/* DataTables controls that WHMCS ships */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-pill);
  padding: 0.35rem 0.85rem;
  background-color: var(--st-paper);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--st-text-muted); font-size: 0.86rem; }

/* Empty-state rows */
.table .text-center.text-muted,
.no-records-found { color: var(--st-text-faint); font-style: normal; }

/* ==========================================================================
   11 · STATUS LABELS / BADGES
   WHMCS uses .label-* (legacy) and .badge-* (BS4) plus semantic status
   classes depending on page. All variants are covered here so Active,
   Pending, Suspended, Cancelled/Terminated read consistently everywhere.
   ========================================================================== */
.label, .badge {
  display: inline-block;
  font-family: var(--st-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 0.28em 0.8em;
  border-radius: var(--st-radius-pill);
  border: 1px solid transparent;
  vertical-align: middle;
  white-space: nowrap;
}

/* Active / paid / completed */
.label-success, .badge-success,
.status-active, .status-Active, .status-paid, .status-Paid,
.label.active, .badge.active {
  background-color: var(--st-success-bg) !important;
  color: var(--st-success-ink) !important;
  border-color: #bde5d0 !important;
}
/* Pending / awaiting */
.label-warning, .badge-warning,
.status-pending, .status-Pending, .status-unpaid, .status-Unpaid,
.status-payment-pending {
  background-color: var(--st-warning-bg) !important;
  color: var(--st-warning-ink) !important;
  border-color: #f0dcb6 !important;
}
/* Suspended / overdue / fraud */
.label-danger, .badge-danger,
.status-suspended, .status-Suspended, .status-overdue, .status-Overdue,
.status-fraud, .status-Fraud {
  background-color: var(--st-danger-bg) !important;
  color: var(--st-danger-ink) !important;
  border-color: #f3c9c6 !important;
}
/* Cancelled / terminated / expired — intentionally neutral, not alarming */
.label-default, .badge-secondary, .badge-default,
.status-cancelled, .status-Cancelled, .status-terminated, .status-Terminated,
.status-expired, .status-Expired, .status-closed, .status-Closed,
.status-refunded, .status-Refunded {
  background-color: var(--st-neutral-bg) !important;
  color: var(--st-neutral-ink) !important;
  border-color: #dbe3ea !important;
}
/* Info / brand */
.label-info, .badge-info,
.status-open, .status-Open, .status-answered, .status-Answered {
  background-color: var(--st-info-bg) !important;
  color: var(--st-info-ink) !important;
  border-color: var(--st-azure-100) !important;
}
.label-primary, .badge-primary {
  background-color: var(--st-azure-500) !important;
  color: #ffffff !important;
  border-color: var(--st-azure-500) !important;
}
.badge-light { background-color: var(--st-neutral-bg) !important; color: var(--st-neutral-ink) !important; }
.badge-dark  { background-color: var(--st-navy-700) !important; color: #ffffff !important; }

/* Text-colour helpers WHMCS uses inline */
.text-success { color: var(--st-success-ink) !important; }
.text-danger  { color: var(--st-danger-ink)  !important; }
.text-warning { color: var(--st-warning-ink) !important; }
.text-info    { color: var(--st-info-ink)    !important; }
.text-primary { color: var(--st-accent-ink)  !important; }
.textgreen    { color: var(--st-success-ink) !important; }
.textred      { color: var(--st-danger-ink)  !important; }

/* ==========================================================================
   12 · ALERTS
   ========================================================================== */
.alert {
  border: 1px solid transparent;
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-xs);
  font-size: 0.93rem;
  padding: 0.95rem 1.15rem;
}
.alert a { font-weight: 600; text-decoration: underline; }
.alert-heading, .alert h4 { font-family: var(--st-font-display); font-weight: 600; font-size: 1rem; }
.alert-success { background-color: var(--st-success-bg); border-color: #bde5d0; color: var(--st-success-ink); }
.alert-success a { color: var(--st-success-ink); }
.alert-info    { background-color: var(--st-info-bg); border-color: var(--st-azure-100); color: var(--st-info-ink); }
.alert-info a  { color: var(--st-info-ink); }
.alert-warning { background-color: var(--st-warning-bg); border-color: #f0dcb6; color: var(--st-warning-ink); }
.alert-warning a { color: var(--st-warning-ink); }
.alert-danger  { background-color: var(--st-danger-bg); border-color: #f3c9c6; color: var(--st-danger-ink); }
.alert-danger a { color: var(--st-danger-ink); }
.alert-primary { background-color: var(--st-azure-50); border-color: var(--st-azure-100); color: var(--st-accent-ink); }
.alert .close { color: inherit; opacity: 0.5; text-shadow: none; }
.alert .close:hover { opacity: 1; }

/* WHMCS "account overdue / verification" strips */
.alert-signup, .alert-global, #verifyEmailBanner {
  border-radius: var(--st-radius-md);
}

/* ==========================================================================
   13 · FORMS / INPUTS / FOCUS
   ========================================================================== */
label, .control-label, .col-form-label {
  color: var(--st-text-strong);
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control {
  background-color: var(--st-paper);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  color: var(--st-text);
  font-family: var(--st-font-body);
  font-size: 0.94rem;
  min-height: 42px;
  padding: 0.5rem 0.85rem;
  box-shadow: none;
  transition: border-color var(--st-dur-fast) var(--st-ease),
              box-shadow var(--st-dur-fast) var(--st-ease);
}
.form-control:focus,
.custom-select:focus {
  background-color: var(--st-paper);
  border-color: var(--st-azure-500);
  box-shadow: var(--st-focus-ring);
  color: var(--st-text);
  outline: 0;
}
.form-control::placeholder { color: var(--st-text-faint); }
.form-control:disabled,
.form-control[readonly] { background-color: var(--st-bg-alt); color: var(--st-text-muted); }
textarea.form-control { min-height: 120px; line-height: 1.6; }
.form-control-lg { min-height: 50px; font-size: 1rem; border-radius: var(--st-radius-md); }
.form-text, .help-block { color: var(--st-text-muted); font-size: 0.82rem; }

/* Validation */
.form-control.is-invalid, .has-error .form-control {
  border-color: var(--st-danger);
  box-shadow: 0 0 0 3px rgba(209, 72, 63, 0.16);
}
.invalid-feedback, .has-error .help-block { color: var(--st-danger-ink); }
.form-control.is-valid, .has-success .form-control { border-color: var(--st-success); }

/* Input groups */
.input-group-text,
.input-group-addon {
  background-color: var(--st-bg-alt);
  border: 1px solid var(--st-border);
  color: var(--st-text-muted);
  border-radius: var(--st-radius-sm);
  font-size: 0.9rem;
}
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-start-end-radius: 0; border-end-end-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-start-start-radius: 0; border-end-start-radius: 0;
}
.input-group-append .btn, .input-group-prepend .btn { border-radius: var(--st-radius-sm); }
.input-group-append > .btn:last-child {
  border-start-end-radius: var(--st-radius-pill);
  border-end-end-radius: var(--st-radius-pill);
}

/* Checkbox / radio */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--st-azure-500);
  border-color: var(--st-azure-500);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--st-focus-ring); }
.custom-control-label { font-family: var(--st-font-body); font-weight: 400; color: var(--st-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--st-azure-500); }

/* Select2 (WHMCS bundles it for country/state pickers) */
.select2-container--bootstrap .select2-selection,
.select2-container .select2-selection--single {
  border-color: var(--st-border);
  border-radius: var(--st-radius-sm);
  min-height: 42px;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--st-azure-500);
}

/* Fieldset / legend */
fieldset legend {
  font-size: 1rem;
  color: var(--st-text-strong);
  border-bottom: 1px solid var(--st-border-soft);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   14 · LOGIN / REGISTER / PASSWORD RESET
   ========================================================================== */
body.login-page,
body#login,
.login-wrapper { background-color: var(--st-bg); }

/* The centred auth card Twenty-One renders on login/register */
.login-container,
#login-container,
.logincontainer,
form#frmLogin,
.card.login-card {
  border-radius: var(--st-radius-xl);
}
.login-container .card,
#main-body .card.login,
.logincontainer .card {
  box-shadow: var(--st-shadow-lg);
  border-color: var(--st-border-soft);
}
.login-container h1,
.login-container h2,
.logincontainer h2 { font-weight: 700; }

/* Social / third-party sign-in buttons stay pill-shaped */
.btn-social, .btn-signin, #btnLogin, #login { border-radius: var(--st-radius-pill); }
#login .form-control, .login-container .form-control { min-height: 46px; }

/* "Remember me" + forgot password row */
.login-links, .forgot-password-link { font-size: 0.88rem; }

/* Register page section headers */
.register-form h3, #frmCheckout h3, .signup-header {
  font-size: 1.05rem;
  border-bottom: 1px solid var(--st-border-soft);
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
}

/* Password strength meter */
.progress { background-color: var(--st-bg-alt); border-radius: var(--st-radius-pill); height: 8px; }
.progress-bar { background-color: var(--st-azure-500); }
.progress-bar.bg-success, .progress-bar-success { background-color: var(--st-success); }
.progress-bar.bg-danger,  .progress-bar-danger  { background-color: var(--st-danger); }
.progress-bar.bg-warning, .progress-bar-warning { background-color: var(--st-warning); }

/* ==========================================================================
   15 · INVOICES
   ========================================================================== */
/* Invoice header block (invoice #, status, dates) */
#invoice-header, .invoice-header {
  border-bottom: 1px solid var(--st-border);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
#invoice-header h1, .invoice-header h1 { font-weight: 700; }

/* Big status stamp WHMCS prints on the invoice */
.invoice-status,
#invoice-status,
.invoice-status-tag {
  border-radius: var(--st-radius-pill);
  font-family: var(--st-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 1.1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  display: inline-block;
}
.invoice-status-unpaid, .invoice-unpaid {
  background-color: var(--st-warning-bg); color: var(--st-warning-ink); border: 1px solid #f0dcb6;
}
.invoice-status-paid, .invoice-paid {
  background-color: var(--st-success-bg); color: var(--st-success-ink); border: 1px solid #bde5d0;
}
.invoice-status-cancelled, .invoice-cancelled, .invoice-status-refunded {
  background-color: var(--st-neutral-bg); color: var(--st-neutral-ink); border: 1px solid #dbe3ea;
}
.invoice-status-overdue, .invoice-overdue {
  background-color: var(--st-danger-bg); color: var(--st-danger-ink); border: 1px solid #f3c9c6;
}

/* Line-item table + totals */
#invoice-items table thead th,
.invoice-items thead th { background-color: var(--st-navy-700); color: #ffffff; border-color: var(--st-navy-700); }
#invoice-items table tfoot td,
.invoice-items tfoot td { background-color: var(--st-surface-sunk); font-weight: 600; color: var(--st-text-strong); }
#invoice-items table tfoot tr:last-child td,
.invoice-items tfoot tr:last-child td {
  background-color: var(--st-azure-50);
  color: var(--st-navy-700);
  font-family: var(--st-font-display);
  font-size: 1.02rem;
  font-weight: 700;
}

/* Pay-now area / gateway selector */
#paymentGatewaysContainer, .payment-methods { margin-top: 1.25rem; }
#paymentGatewaysContainer .btn, .payment-methods .btn { margin-inline-end: 0.5rem; }
#frmPayment .btn-primary, #btnPayNow { min-width: 180px; }

/* Transactions / payment history table */
#invoice-transactions table thead th,
.invoice-transactions thead th { background-color: var(--st-surface-sunk); color: var(--st-text-muted); }

/* Notes / pay-to block */
.invoice-notes, #invoice-notes, .pay-to-text {
  background-color: var(--st-surface-sunk);
  border: 1px solid var(--st-border-soft);
  border-radius: var(--st-radius-md);
  padding: 1rem 1.15rem;
  font-size: 0.9rem;
  color: var(--st-text-muted);
}

/* ==========================================================================
   16 · SUPPORT TICKETS
   ========================================================================== */
/* Ticket list */
.ticket-list .table td { vertical-align: middle; }

/* Ticket conversation thread */
.ticket-reply,
.ticketreply,
.support-ticket-reply {
  background-color: var(--st-surface);
  border: 1px solid var(--st-border-soft);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-xs);
  margin-bottom: 1rem;
  overflow: hidden;
}
.ticket-reply .ticket-reply-header,
.ticket-reply-header,
.ticketreply .reply-header {
  background-color: var(--st-surface-sunk);
  border-bottom: 1px solid var(--st-border-soft);
  padding: 0.7rem 1.1rem;
  font-family: var(--st-font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--st-text-strong);
}
.ticket-reply .ticket-reply-content,
.ticket-reply-content,
.ticketreply .reply-content { padding: 1.1rem; line-height: 1.7; }

/* Staff replies get the brand accent so clients can scan who said what */
.ticket-reply.staff,
.ticket-reply-staff,
.ticketreply.admin {
  border-color: var(--st-azure-200);
  box-shadow: inset 3px 0 0 0 var(--st-azure-500), var(--st-shadow-xs);
}
.ticket-reply.staff .ticket-reply-header,
.ticket-reply-staff .ticket-reply-header,
.ticketreply.admin .reply-header {
  background-color: var(--st-azure-50);
  color: var(--st-accent-ink);
  border-bottom-color: var(--st-azure-100);
}

/* Ticket meta + attachments */
.ticket-meta, .ticket-info { color: var(--st-text-muted); font-size: 0.86rem; }
.ticket-attachments a, .attachment-link {
  display: inline-block;
  background-color: var(--st-azure-50);
  border: 1px solid var(--st-azure-100);
  border-radius: var(--st-radius-pill);
  color: var(--st-accent-ink);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2rem 0.75rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
}

/* Open-ticket department picker cards */
.support-departments .card:hover { border-color: var(--st-azure-300); box-shadow: var(--st-shadow-md); }

/* ==========================================================================
   17 · ANNOUNCEMENTS · KNOWLEDGEBASE · DOWNLOADS
   ========================================================================== */
.announcement,
.announcement-item,
.card.announcement {
  background-color: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-xs);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  transition: transform var(--st-dur-base) var(--st-ease),
              box-shadow var(--st-dur-base) var(--st-ease),
              border-color var(--st-dur-base) var(--st-ease);
}
.announcement:hover, .announcement-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--st-shadow-md);
  border-color: var(--st-border-strong);
}
.announcement h3, .announcement h2, .announcement-title {
  font-size: 1.12rem;
  margin-top: 0;
  margin-bottom: 0.35rem;
}
.announcement .date,
.announcement-date,
.announcement .text-muted {
  font-family: var(--st-font-display);
  font-size: 0.74rem;
  letter-spacing: var(--st-tracking-wide);
  text-transform: uppercase;
  color: var(--st-text-faint);
}

/* Knowledgebase article + category lists */
.kb-article, .knowledgebase-article { line-height: 1.75; }
.kb-article h2, .kb-article h3 { margin-top: 1.6rem; }
.kbarticle-votes, .article-rating { color: var(--st-text-muted); font-size: 0.86rem; }

/* Search bar on KB / downloads */
#kbSearchForm .form-control,
.search-form .form-control { border-radius: var(--st-radius-pill); padding-inline-start: 1.1rem; }
#kbSearchForm .btn, .search-form .btn { border-radius: var(--st-radius-pill); }

/* ==========================================================================
   18 · PAGINATION · MODALS · TOOLTIPS · MISC BOOTSTRAP
   ========================================================================== */
.pagination { margin: 1.25rem 0 0; }
.pagination .page-link,
.pagination > li > a,
.pagination > li > span {
  background-color: var(--st-paper);
  border: 1px solid var(--st-border);
  color: var(--st-text-strong);
  font-family: var(--st-font-display);
  font-size: 0.88rem;
  font-weight: 500;
  margin-inline-end: 4px;
  border-radius: var(--st-radius-sm) !important;
  padding: 0.4rem 0.75rem;
  min-width: 38px;
  text-align: center;
}
.pagination .page-link:hover,
.pagination > li > a:hover {
  background-color: var(--st-azure-50);
  border-color: var(--st-azure-300);
  color: var(--st-accent-ink);
}
.pagination .page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--st-azure-500);
  border-color: var(--st-azure-500);
  color: #ffffff;
}
.pagination .page-item.disabled .page-link { background-color: var(--st-bg-alt); color: var(--st-text-faint); }

.modal-content {
  border: 0;
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-lg);
}
.modal-header {
  background-color: var(--st-navy-700);
  border-bottom: 0;
  border-start-start-radius: var(--st-radius-lg);
  border-start-end-radius: var(--st-radius-lg);
  color: #ffffff;
  padding: 1rem 1.35rem;
}
.modal-header .modal-title { color: #ffffff; font-size: 1.02rem; }
.modal-header .close { color: #ffffff; opacity: 0.8; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--st-border-soft); padding: 0.9rem 1.35rem; }

.tooltip-inner {
  background-color: var(--st-navy-800);
  border-radius: var(--st-radius-sm);
  font-family: var(--st-font-body);
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
}
.tooltip .arrow::before { border-top-color: var(--st-navy-800); border-bottom-color: var(--st-navy-800); }
.popover { border-color: var(--st-border); border-radius: var(--st-radius-md); box-shadow: var(--st-shadow-md); }
.popover-header { background-color: var(--st-surface-sunk); border-bottom-color: var(--st-border-soft); font-family: var(--st-font-display); color: var(--st-text-strong); }

/* Accordions (FAQ, product config groups) */
.accordion .card-header { cursor: pointer; }
.accordion .card-header:hover { background-color: var(--st-azure-50); }

/* MarketConnect / upsell promo strips — keep them on-brand, not loud */
.market-connect-promotion,
.mc-promo,
.promo-banner {
  border: 1px solid var(--st-azure-100);
  border-radius: var(--st-radius-lg);
  background-color: var(--st-azure-50);
}

/* ==========================================================================
   19 · FOOTER
   ========================================================================== */
#footer,
footer#footer,
.footer {
  background-color: var(--st-dark);
  border-top: 3px solid var(--st-azure-500);
  color: var(--st-on-dark-mute);
  font-size: 0.88rem;
  margin-top: 3rem;
  padding: 2rem 0 1.5rem;
}
#footer a, .footer a { color: var(--st-on-dark); font-weight: 500; }
#footer a:hover, .footer a:hover { color: #ffffff; }
#footer h4, #footer h5, .footer h4, .footer h5 {
  color: #ffffff;
  font-size: 0.78rem;
  letter-spacing: var(--st-tracking-wide);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
#footer hr, .footer hr { border-top-color: var(--st-dark-border); }
#footer .copyright, .footer .copyright { color: var(--st-on-dark-mute); font-size: 0.82rem; }

/* Optional tagline slot — add <span class="st-tagline">Your Growth Partner</span> */
.st-tagline {
  font-family: var(--st-font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--st-azure-300);
}

/* Back-to-top / floating helpers WHMCS renders */
#scroll-to-top, .back-to-top {
  background-color: var(--st-navy-700);
  border-radius: var(--st-radius-pill);
  color: #ffffff;
}

/* ==========================================================================
   20 · SMALL BRAND UTILITIES (opt-in classes for custom template edits)
   ========================================================================== */
.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--st-font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: var(--st-tracking-wide);
  text-transform: uppercase;
  color: var(--st-accent-ink);
}
.st-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background-color: var(--st-accent);
  border-radius: 2px;
}
.st-card-dark {
  background: var(--st-gradient-brand);
  border: 0;
  border-radius: var(--st-radius-lg);
  color: #ffffff;
  box-shadow: var(--st-shadow-md);
}
.st-card-dark h1, .st-card-dark h2, .st-card-dark h3, .st-card-dark h4 { color: #ffffff; }
.st-divider { height: 1px; background-color: var(--st-border); border: 0; margin: 1.75rem 0; }

/* ==========================================================================
   21 · RTL / ARABIC
   Applies when WHMCS serves the Arabic language (html dir="rtl" / lang="ar").
   Logical properties above already flip; this section handles the rest.
   ========================================================================== */
[dir="rtl"] body,
[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--st-font-arabic);
  line-height: 1.85;
  letter-spacing: 0;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] .card-title, [dir="rtl"] .panel-title, [dir="rtl"] .btn,
[dir="rtl"] label, [dir="rtl"] .navbar-brand, [dir="rtl"] .nav-link,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .btn {
  font-family: var(--st-font-arabic);
  letter-spacing: 0;
}

/* Arabic headings need a touch more weight to hold next to Latin UI */
[dir="rtl"] h1, [dir="rtl"] h2 { font-weight: 700; }

/* Text + table alignment */
[dir="rtl"] .table th,
[dir="rtl"] .table td,
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .table thead th { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }

/* Left/right utility floats and margins that Bootstrap 4 hard-codes */
[dir="rtl"] .float-left  { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .pull-left  { float: right; }
[dir="rtl"] .pull-right { float: left; }

/* Inset accent bars must move to the right edge */
[dir="rtl"] a.list-group-item:hover,
[dir="rtl"] .list-group-item-action:hover,
[dir="rtl"] .list-group-item.active,
[dir="rtl"] .list-group-item-action.active { box-shadow: inset -3px 0 0 0 var(--st-azure-500); }
[dir="rtl"] .ticket-reply.staff,
[dir="rtl"] .ticket-reply-staff,
[dir="rtl"] .ticketreply.admin { box-shadow: inset -3px 0 0 0 var(--st-azure-500), var(--st-shadow-xs); }
[dir="rtl"] .st-eyebrow::before { margin-left: 0; }

/* Header hairline gradient must start from the right */
[dir="rtl"] #header::after,
[dir="rtl"] .header-lined::after {
  background: linear-gradient(270deg, #089cdb 0%, #0779be 50%, rgba(8,156,219,0) 100%);
}

/* Icons that imply direction should mirror */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-long-arrow-alt-right { transform: scaleX(-1); }

/* Breadcrumb separator + pagination order */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: 0.5rem; padding-left: 0; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-left: 0.5rem; padding-right: 0; float: right; }
[dir="rtl"] .pagination { padding-right: 0; }
[dir="rtl"] .pagination .page-link { margin-inline-end: 4px; }

/* Input group corners in RTL (Bootstrap 4 has no RTL build) */
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .custom-select:not(:last-child) {
  border-radius: 0 var(--st-radius-sm) var(--st-radius-sm) 0;
}
[dir="rtl"] .input-group > .form-control:not(:first-child) {
  border-radius: var(--st-radius-sm) 0 0 var(--st-radius-sm);
}
[dir="rtl"] .input-group-append > .btn:last-child {
  border-radius: var(--st-radius-pill) 0 0 var(--st-radius-pill);
}

/* Dropdown alignment inside RTL navbars */
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; }
[dir="rtl"] .btn .fa, [dir="rtl"] .btn .fas { margin-inline-end: 0.35rem; }

/* Modal close button */
[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; }

/* Numerals stay Latin for money/invoice numbers even in Arabic UI */
[dir="rtl"] .table td, [dir="rtl"] .invoice-total, [dir="rtl"] .price,
[dir="rtl"] .amount, [dir="rtl"] .invoice-amount {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ==========================================================================
   22 · MOBILE POLISH
   ========================================================================== */
@media (max-width: 991.98px) {
  #main-menu .navbar-nav > li > a,
  #main-menu .nav-link {
    padding: 0.7rem 0.9rem;
    border-radius: var(--st-radius-sm);
  }
  #main-menu .nav-item.active > .nav-link,
  #main-menu .navbar-nav > li.active > a {
    box-shadow: inset 3px 0 0 0 var(--st-azure-500);
  }
  [dir="rtl"] #main-menu .nav-item.active > .nav-link {
    box-shadow: inset -3px 0 0 0 var(--st-azure-500);
  }
  .navbar-collapse {
    background-color: var(--st-dark-2);
    border-radius: var(--st-radius-md);
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  body { font-size: 14.5px; }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.28rem; }
  .navbar-brand img,
  #header .logo img,
  #header img.logo { height: var(--st-logo-height-sm); max-height: var(--st-logo-height-sm); }

  .card, .panel { border-radius: var(--st-radius-md); margin-bottom: 1rem; }
  .card-body, .panel-body { padding: 1rem; }
  .card-header, .panel-heading { padding: 0.8rem 1rem; }

  /* Full-width, thumb-sized primary actions */
  .card-footer .btn, .panel-footer .btn { width: 100%; margin-bottom: 0.5rem; }
  .btn { padding: 0.6rem 1.15rem; }
  .btn-lg { width: 100%; }

  /* Tables scroll instead of squeezing */
  .table-responsive { -webkit-overflow-scrolling: touch; border: 0; }
  .table td, .table th { padding: 0.65rem 0.7rem; }
  .table thead th { font-size: 0.68rem; }

  /* Home shortcuts become a comfortable 2-up grid */
  .home-shortcuts .btn, .btn-shortcut { padding: 0.95rem 0.5rem; font-size: 0.85rem; }
  .home-shortcuts .btn i, .btn-shortcut i { font-size: 1.35rem; }

  #home-banner-container, .home-banner { padding: 1.25rem; border-radius: var(--st-radius-lg); }
  #footer, .footer { text-align: center; padding: 1.5rem 0 1.25rem; }
  .pagination { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
  .modal-content { border-radius: var(--st-radius-md); }
  .breadcrumb { font-size: 0.78rem; }
}

/* ==========================================================================
   23 · PRINT (invoices printed or saved to PDF from the browser)
   ========================================================================== */
@media print {
  body { background: #ffffff; color: #000000; font-size: 12px; }
  #header, .header-lined, #main-menu, #footer, .footer,
  .breadcrumb, .btn, .pagination, .sidebar { display: none !important; }
  .card, .panel { border: 1px solid #ccd6e0; box-shadow: none; }
  .table thead th { background: #ffffff !important; color: #000000 !important; }
  a[href]::after { content: ''; }
}