/* ============================================================================
   SERVERLYS CONTROL PANEL - WHMCS theme stylesheet
   ----------------------------------------------------------------------------
   The design system is the Serverlys website's (Next.js `src/app/globals.css`),
   reproduced here value for value. Change a token THERE first, then mirror it
   here - the two surfaces must never drift into different products.

   Order of this file:
     1. Tokens            5. Components (sv-*)
     2. Base              6. Auth layout
     3. App shell         7. Bootstrap / WHMCS reskin (pages we do not override)
     4. Responsive shell  8. Utilities, motion

   Loaded AFTER twenty-one's theme.min.css, so equal-specificity rules win.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Tier 1 - primitives (globals.css). #0000ff is the logo; 50-500 are
     hue-compensated so tints read as the logo's blue, not lavender. */
  --sv-brand-50: #f0f5ff;
  --sv-brand-100: #e0eaff;
  --sv-brand-200: #c2d5ff;
  --sv-brand-300: #94b4ff;
  --sv-brand-400: #5f8bff;
  --sv-brand-500: #1f55ff;
  --sv-brand-600: #0000ff;
  --sv-brand-700: #0000d4;
  --sv-brand-800: #0000a8;
  --sv-brand-900: #0b2080;
  --sv-brand-950: #061a4d;

  --sv-ink-50: #f8f9fa;
  --sv-ink-100: #f1f1f3;
  --sv-ink-200: #dedee2;
  --sv-ink-300: #c6c6cc;
  --sv-ink-400: #9d9ea4; /* 2.95:1 - border/icon only, never text */
  --sv-ink-500: #6f6f78; /* 4.98:1 */
  --sv-ink-600: #55555c; /* 7.39:1 */
  --sv-ink-700: #36363b;
  --sv-ink-800: #222225;
  --sv-ink-900: #18181a;
  --sv-ink-950: #101011;

  --sv-green-50: #f1f9f3;
  --sv-green-500: #009e5b; /* fill */
  --sv-green-600: #007a49; /* text, 5.41:1 */
  --sv-amber-50: #fdf6e8;
  --sv-amber-500: #e69800; /* fill */
  --sv-amber-600: #9b4600; /* text, 6.42:1 */
  --sv-red-50: #fff4f3;
  --sv-red-500: #e73a47; /* fill */
  --sv-red-600: #be1025; /* text, 6.38:1 */

  /* Tier 2 - semantic. */
  --sv-primary: var(--sv-brand-600);
  --sv-primary-hover: var(--sv-brand-700);
  --sv-primary-active: var(--sv-brand-800);
  --sv-primary-soft: var(--sv-brand-50);
  --sv-primary-soft-active: var(--sv-brand-100);

  --sv-canvas: #ffffff;
  --sv-canvas-secondary: var(--sv-ink-50);
  --sv-canvas-inset: var(--sv-ink-100);
  --sv-surface: #ffffff;
  --sv-canvas-dark: var(--sv-ink-950);

  --sv-fg: var(--sv-ink-950);
  --sv-fg-secondary: var(--sv-ink-600);
  --sv-fg-muted: var(--sv-ink-500);

  --sv-line-subtle: var(--sv-ink-100);
  --sv-line: var(--sv-ink-200);
  --sv-line-strong: var(--sv-ink-300);
  --sv-line-input: #8a8a93; /* 3.42:1 - a control boundary, WCAG 1.4.11 */

  --sv-success: var(--sv-green-600);
  --sv-success-fill: var(--sv-green-500);
  --sv-success-soft: var(--sv-green-50);
  --sv-warning: var(--sv-amber-600);
  --sv-warning-fill: var(--sv-amber-500);
  --sv-warning-soft: var(--sv-amber-50);
  --sv-danger: var(--sv-red-600);
  --sv-danger-fill: var(--sv-red-500);
  --sv-danger-soft: var(--sv-red-50);
  --sv-info: var(--sv-brand-600);
  --sv-info-soft: var(--sv-brand-50);

  /* The public names requested for the portal - aliases of the above. */
  --background: var(--sv-canvas-secondary);
  --surface: var(--sv-surface);
  --surface-secondary: var(--sv-canvas-secondary);
  --text-primary: var(--sv-fg);
  --text-secondary: var(--sv-fg-secondary);
  --border: var(--sv-line);
  --brand: var(--sv-primary);
  --brand-hover: var(--sv-primary-hover);
  --success: var(--sv-success);
  --warning: var(--sv-warning);
  --danger: var(--sv-danger);
  --info: var(--sv-info);

  /* Type - DM Sans for headings and UI, Noto Sans for body (globals.css). */
  --sv-font-display: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sv-font-sans: "Noto Sans", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --sv-text-h1: clamp(1.5rem, 1.32rem + 0.7vw, 1.875rem); /* 24 -> 30, app pages */
  --sv-text-h2: 1.25rem;   /* 20 - section titles */
  --sv-text-h3: 1.0625rem; /* 17 - card titles */
  --sv-text-body: 0.9375rem; /* 15 */
  --sv-text-small: 0.875rem; /* 14 */
  --sv-text-micro: 0.75rem;  /* 12 - the floor for anything read */

  /* Spacing - 4px base, approved steps only. */
  --sv-1: 4px;
  --sv-2: 8px;
  --sv-3: 12px;
  --sv-4: 16px;
  --sv-5: 20px;
  --sv-6: 24px;
  --sv-8: 32px;
  --sv-10: 40px;
  --sv-12: 48px;
  --sv-16: 64px;

  /* Radius - the site's scale. Buttons 12, cards 16. */
  --sv-radius-xs: 4px;
  --sv-radius-sm: 8px;
  --sv-radius-md: 12px;
  --sv-radius-lg: 16px;
  --sv-radius-xl: 24px;
  --sv-radius-full: 999px;

  /* Elevation - the site's scale. Elevation carries meaning. */
  --sv-shadow-e1: 0 2px 6px 0 rgb(0 0 0 / 0.06);
  --sv-shadow-e2: 0 2px 6px 0 rgb(0 0 0 / 0.1);
  --sv-shadow-e3: 0 8px 24px 0 rgb(0 0 0 / 0.1);
  --sv-shadow-e4: 0 8px 24px 0 rgb(0 0 0 / 0.15);
  --sv-shadow-e5: 0 8px 28px 0 rgb(0 0 0 / 0.25);

  /* Motion - three durations, three easings. */
  --sv-fast: 120ms;
  --sv-normal: 200ms;
  --sv-slow: 320ms;
  --sv-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --sv-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Shell geometry. */
  --sv-topbar-h: 64px;
  --sv-rail-w: 88px;
  --sv-context-w: 272px;
  --sv-content-max: 1240px;
  --sv-gutter: 32px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sv-topbar-h) + 16px);
}

body {
  margin: 0;
  background: var(--sv-canvas-secondary);
  color: var(--sv-fg-secondary);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sv-font-display);
  color: var(--sv-fg);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--sv-text-h1); line-height: 1.2; }
h2, .h2 { font-size: var(--sv-text-h2); line-height: 1.3; }
h3, .h3 { font-size: var(--sv-text-h3); line-height: 1.35; font-weight: 600; }
h4, .h4 { font-size: 1rem; line-height: 1.4; font-weight: 600; }
h5, .h5, h6, .h6 { font-size: var(--sv-text-small); line-height: 1.4; font-weight: 600; }

p { text-wrap: pretty; }

a {
  color: var(--sv-primary);
  text-decoration: none;
  transition: color var(--sv-fast) var(--sv-ease-hover);
}
a:hover { color: var(--sv-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: 600; color: var(--sv-fg); }
small, .small { font-size: var(--sv-text-small); }
hr { border-top-color: var(--sv-line); }
code, kbd, pre, samp { font-family: var(--sv-font-mono); }
::selection { background: var(--sv-brand-500); color: #fff; }

/* Visible, consistent focus for keyboard users. Never remove. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--sv-primary) !important;
  outline-offset: 2px;
}
button:not(:disabled), [role="button"], label[for], summary { cursor: pointer; }

/* ==========================================================================
   3. APP SHELL
   Dark frame with the top bar on it; the app sits in a rounded panel inside
   the frame: labelled sidebar (left), optional context sidebar, content.
   ========================================================================== */
:root {
  --sv-frame: #061433;            /* canvas-abyss: the site's deep navy ground */
  --sv-frame-line: rgb(255 255 255 / 0.14);
  --sv-panel-bg: #f4f4f6;         /* content ground inside the panel */
  --sv-nav-bg: #fafafb;           /* sidebar ground */
}
.sv-skip {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  padding: 10px 16px; background: #fff; color: var(--sv-fg); border-radius: var(--sv-radius-sm); font-weight: 600;
}
.sv-skip:focus { top: 12px; text-decoration: none; }

.sv-icon {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle;
}
.sv-icon--sm { width: 16px; height: 16px; }
.sv-icon--lg { width: 24px; height: 24px; }
.sv-icon--xl { width: 32px; height: 32px; stroke-width: 1.4; }

body.sv-layout-app, body.sv-layout-public { background: var(--sv-frame); }

/* --- Top bar (on the dark frame) ---------------------------------------- */
.sv-topbar {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: var(--sv-4);
  height: var(--sv-topbar-h);
  padding: 0 var(--sv-6);
  background: var(--sv-frame);
  color: #fff;
}
.sv-topbar__spacer { flex: 1; }
.sv-topbar__menu { display: none !important; }
.sv-logo { display: inline-flex; align-items: center; flex: none; height: 40px; border-radius: var(--sv-radius-sm); }
.sv-logo img { display: block; height: 32px; width: auto; }
.sv-logo:hover { text-decoration: none; }
.sv-topbar__pill {
  display: inline-flex; align-items: center; gap: var(--sv-2); height: 36px; padding: 0 14px;
  border: 1px solid var(--sv-frame-line); border-radius: var(--sv-radius-full);
  background: rgb(255 255 255 / 0.06); color: #fff; font: 500 var(--sv-text-small)/1 var(--sv-font-display);
}
.sv-topbar__pill:hover { background: rgb(255 255 255 / 0.12); color: #fff; text-decoration: none; }
.sv-topbar__actions { display: flex; align-items: center; gap: var(--sv-2); flex: none; }

.sv-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--sv-radius-full);
  background: transparent; color: var(--sv-fg-secondary);
  transition: background-color var(--sv-fast) var(--sv-ease-hover), color var(--sv-fast) var(--sv-ease-hover);
}
.sv-iconbtn:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); text-decoration: none; }
.sv-topbar .sv-iconbtn { color: #fff; }
.sv-topbar .sv-iconbtn:hover, .sv-topbar .sv-iconbtn[aria-expanded="true"] { background: rgb(255 255 255 / 0.1); color: #fff; }
.sv-topbar .sv-iconbtn .sv-icon { width: 22px; height: 22px; }
.sv-iconbtn__count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--sv-radius-full); background: var(--sv-red-500); color: #fff;
  font: 600 11px/18px var(--sv-font-display); text-align: center; box-shadow: 0 0 0 2px var(--sv-frame);
}
.sv-iconbtn__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-red-500); }

/* Sera - the top bar's assistant pill. */
.sv-sera-btn {
  display: inline-flex; align-items: center; gap: var(--sv-2); height: 44px; padding: 0 18px 0 14px;
  border: 1.5px solid var(--sv-brand-400); border-radius: var(--sv-radius-full);
  background: transparent; color: #fff; font: 600 var(--sv-text-body)/1 var(--sv-font-display);
  transition: background-color var(--sv-fast) var(--sv-ease-hover);
}
.sv-sera-btn .sv-icon { width: 22px; height: 22px; color: var(--sv-brand-300); }
.sv-sera-btn:hover, .sv-sera-btn[aria-expanded="true"] { background: rgb(255 255 255 / 0.08); }

/* Account button on the frame: avatar only. */
.sv-account-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 4px; border: 0; border-radius: var(--sv-radius-full); background: transparent; color: #fff; }
.sv-account-btn:hover, .sv-account-btn[aria-expanded="true"] { background: rgb(255 255 255 / 0.1); }
.sv-account-btn__name, .sv-account-btn > .sv-icon { display: none; }
.sv-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sv-primary); color: #fff; font: 600 13px/1 var(--sv-font-display); text-transform: uppercase; flex: none; }
.sv-topbar .sv-avatar { background: #fff; color: var(--sv-frame); }
.sv-avatar--lg { width: 44px; height: 44px; font-size: 16px; }

.sv-btn--on-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--sv-frame-line); }
.sv-btn--on-dark:hover { background: rgb(255 255 255 / 0.1); color: #fff; }

/* Public (signed-out) top-bar links. */
.sv-publicnav { display: flex; align-items: center; gap: var(--sv-1); margin-left: var(--sv-4); }
.sv-publicnav a { padding: 8px 12px; border-radius: var(--sv-radius-sm); color: #dedee2; font: 500 var(--sv-text-small)/1 var(--sv-font-display); }
.sv-publicnav a:hover { background: rgb(255 255 255 / 0.1); color: #fff; text-decoration: none; }

/* --- Search: an icon in the bar; opens a command panel ------------------ */
.sv-search { position: static; }
.sv-search__panel {
  position: fixed; top: 12px; left: 50%; z-index: 1060;
  width: min(640px, calc(100vw - 24px)); transform: translateX(-50%);
  display: none;
}
.sv-search.is-open .sv-search__panel { display: block; animation: sv-pop-in var(--sv-normal) var(--sv-ease-entrance); }
.sv-search__field {
  display: flex; align-items: center; gap: var(--sv-3); height: 56px; padding: 0 var(--sv-4);
  background: var(--sv-surface); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-e5); color: var(--sv-fg-muted);
}
.sv-search .sv-search__input, .sv-search .sv-search__input:focus {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--sv-fg); font: 400 1rem/1 var(--sv-font-sans);
}
.sv-search__input::placeholder { color: var(--sv-fg-muted); }
.sv-search__input:focus-visible { outline: none !important; }
.sv-kbd { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-xs); background: var(--sv-canvas-secondary); color: var(--sv-fg-muted); font: 500 11px/1.6 var(--sv-font-mono); }
.sv-search__results {
  margin-top: var(--sv-2); max-height: min(440px, 70vh); overflow-y: auto; padding: var(--sv-2);
  background: var(--sv-surface); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-e5);
}
.sv-search__results[hidden] { display: none; }
.sv-search__group { padding: var(--sv-2) var(--sv-3) var(--sv-1); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sv-search__option { display: flex; align-items: center; gap: var(--sv-3); padding: 10px var(--sv-3); border-radius: var(--sv-radius-sm); color: var(--sv-fg); cursor: pointer; }
.sv-search__option[aria-selected="true"], .sv-search__option:hover { background: var(--sv-canvas-inset); text-decoration: none; color: var(--sv-fg); }
.sv-search__option .sv-icon { color: var(--sv-fg-muted); }
.sv-search__option-text { display: flex; flex-direction: column; min-width: 0; }
.sv-search__option-title { font-weight: 500; font-size: var(--sv-text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-search__option-sub { color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-search__empty { padding: var(--sv-4) var(--sv-3); color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-search-scrim { position: fixed; inset: 0; z-index: 1055; background: rgb(6 20 51 / 0.45); }
.sv-search-scrim[hidden] { display: none; }

/* --- Popover panels (account, notifications, Sera, help) ---------------- */
.sv-pop { position: relative; }
.sv-pop__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1040; width: 340px; max-width: calc(100vw - 24px);
  padding: var(--sv-2); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow-e5); color: var(--sv-fg); transform-origin: top right;
  animation: sv-pop-in var(--sv-normal) var(--sv-ease-entrance);
}
.sv-pop__panel[hidden] { display: none; }
.sv-pop__panel--wide { width: 380px; }
@keyframes sv-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.sv-search.is-open .sv-search__panel { transform: translateX(-50%); }
.sv-pop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-3); padding: var(--sv-3) var(--sv-3) var(--sv-2); }
.sv-pop__title { margin: 0; font-size: var(--sv-text-body); font-weight: 600; }
.sv-pop__body { padding: 0 var(--sv-3) var(--sv-3); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-pop__sep { height: 1px; margin: var(--sv-2) 0; background: var(--sv-line-subtle); border: 0; }
.sv-pop__list { list-style: none; margin: 0; padding: 0; }
.sv-pop__item { display: flex; align-items: center; gap: var(--sv-3); width: 100%; padding: 10px var(--sv-3); border: 0; border-radius: var(--sv-radius-sm); background: none; color: var(--sv-fg); font-size: var(--sv-text-small); text-align: left; }
.sv-pop__item:hover, .sv-pop__item:focus-visible { background: var(--sv-canvas-inset); color: var(--sv-fg); text-decoration: none; }
.sv-pop__item .sv-icon { color: var(--sv-fg-muted); }
.sv-pop__item--danger, .sv-pop__item--danger .sv-icon { color: var(--sv-danger); }
.sv-pop__identity { display: flex; align-items: center; gap: var(--sv-3); padding: var(--sv-3); }
.sv-pop__identity-text { min-width: 0; }
.sv-pop__identity-name { display: block; color: var(--sv-fg); font-weight: 600; font-family: var(--sv-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pop__identity-sub { display: block; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-notice { display: flex; gap: var(--sv-3); padding: var(--sv-3); border-radius: var(--sv-radius-sm); color: var(--sv-fg); font-size: var(--sv-text-small); }
.sv-notice:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); text-decoration: none; }
.sv-notice__icon { flex: none; color: var(--sv-info); margin-top: 1px; }
.sv-notice--danger .sv-notice__icon { color: var(--sv-danger-fill); }
.sv-notice--warning .sv-notice__icon { color: var(--sv-warning-fill); }
.sv-notice--success .sv-notice__icon { color: var(--sv-success-fill); }

/* --- The panel ------------------------------------------------------------ */
.sv-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  min-height: calc(100vh - var(--sv-topbar-h) - 8px);
  margin: 0 8px 8px;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-panel-bg);
  overflow: clip;
}
.sv-layout--context { grid-template-columns: 92px var(--sv-context-w) minmax(0, 1fr); }
.sv-layout--public { display: block; }

/* --- Sidebar ------------------------------------------------------------- */
.sv-rail {
  position: sticky; top: var(--sv-topbar-h);
  height: calc(100vh - var(--sv-topbar-h) - 8px);
  display: flex; flex-direction: column; gap: var(--sv-2);
  padding: var(--sv-4) var(--sv-3) var(--sv-4);
  background: var(--sv-nav-bg);
  overflow-y: auto; scrollbar-width: thin;
}
.sv-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-nav__list--end { margin-top: auto; padding-top: var(--sv-4); border-top: 1px solid var(--sv-line-subtle); }
.sv-nav__item {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 0 14px; border-radius: var(--sv-radius-md);
  color: var(--sv-fg); font: 500 1rem/1.25 var(--sv-font-display);
  transition: background-color var(--sv-fast) var(--sv-ease-hover);
}
.sv-nav__icon { width: 22px; height: 22px; color: var(--sv-ink-700); }
.sv-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-nav__ext { color: var(--sv-ink-400); }
.sv-nav__item:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); text-decoration: none; }
.sv-nav__item[aria-current="page"] { background: #fff; box-shadow: var(--sv-shadow-e1); font-weight: 600; }
.sv-nav__item[aria-current="page"] .sv-nav__icon { color: var(--sv-primary); }
.sv-nav__group { margin-top: var(--sv-3); }
.sv-nav__heading {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 14px; border: 0; border-radius: var(--sv-radius-sm); background: none;
  color: var(--sv-fg-muted); font: 500 var(--sv-text-small)/1.3 var(--sv-font-display); text-align: left;
}
.sv-nav__heading:hover { color: var(--sv-fg); }
.sv-nav__chev { transition: transform var(--sv-normal) var(--sv-ease-hover); }
.sv-nav__heading[aria-expanded="false"] .sv-nav__chev { transform: rotate(-90deg); }
.sv-nav__heading[aria-expanded="false"] + .sv-nav__list { display: none; }

/* Compact rail - beside a context sidebar. */
.sv-layout--context .sv-rail { padding: var(--sv-3) var(--sv-2); gap: 2px; }
.sv-layout--context .sv-nav__heading { display: none; }
.sv-layout--context .sv-nav__heading + .sv-nav__list { display: flex; }
.sv-layout--context .sv-nav__group { margin-top: 0; }
.sv-layout--context .sv-nav__item { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 2px; text-align: center; font-size: 11.5px; }
.sv-layout--context .sv-nav__label { white-space: normal; line-height: 1.2; }
.sv-layout--context .sv-nav__ext { display: none; }
.sv-layout--context .sv-nav__list--end { border-top: 0; }

/* --- Context sidebar ------------------------------------------------------ */
.sv-context {
  position: sticky; top: var(--sv-topbar-h);
  height: calc(100vh - var(--sv-topbar-h) - 8px);
  overflow-y: auto; padding: var(--sv-5) var(--sv-4) var(--sv-8);
  background: var(--sv-surface); border-right: 1px solid var(--sv-line);
  scrollbar-width: thin;
}
.sv-context__toggle { display: none; }
.sv-context__eyebrow { margin: 0 0 var(--sv-3); color: var(--sv-fg); font: 600 1.0625rem/1.3 var(--sv-font-display); }
.sv-context__select { margin-bottom: var(--sv-3); }
.sv-context__select select { font-weight: 500; }
.sv-context__filter { position: relative; margin-bottom: var(--sv-4); }
.sv-context__filter .sv-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sv-fg-muted); pointer-events: none; }
.sv-context .sv-context__filter input { width: 100%; height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-md); background: var(--sv-surface); color: var(--sv-fg); font-size: var(--sv-text-small); }
.sv-context .sv-context__filter input:focus { border-color: var(--sv-primary); outline: none; box-shadow: 0 0 0 3px var(--sv-primary-soft-active); }
.sv-context__group + .sv-context__group { margin-top: var(--sv-5); }
.sv-context__heading { margin: 0 0 var(--sv-2); padding: 0 var(--sv-3); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sv-context__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-context__link, .sv-context .list-group-item {
  position: relative; display: flex; align-items: center; gap: var(--sv-3); min-height: 44px; width: 100%;
  padding: 10px var(--sv-3); border: 0 !important; border-radius: var(--sv-radius-md) !important; background: transparent;
  color: var(--sv-fg); font: 500 0.9375rem/1.35 var(--sv-font-display); text-align: left;
  transition: background-color var(--sv-fast) var(--sv-ease-hover);
}
.sv-context__link:hover, .sv-context .list-group-item:hover, .sv-context .list-group-item:focus { background: var(--sv-canvas-inset); color: var(--sv-fg); text-decoration: none; }
.sv-context__link[aria-current="page"], .sv-context__link.active, .sv-context .list-group-item.active { background: var(--sv-canvas-inset); color: var(--sv-fg); font-weight: 600; }
.sv-context .list-group-item:focus-visible { outline-offset: -2px !important; }
.sv-context__link .sv-icon, .sv-context .list-group-item i { color: var(--sv-fg-secondary); width: 20px; text-align: center; flex: none; }
.sv-context__link-label { flex: 1; min-width: 0; }
.sv-context__link-sub { display: block; color: var(--sv-fg-muted); font: 400 var(--sv-text-micro)/1.4 var(--sv-font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-context__chev { color: var(--sv-ink-400); }
.sv-context .badge { margin-left: auto; }
.sv-context .card-body, .sv-context__html { padding: 0 var(--sv-3); font-size: var(--sv-text-small); }
.sv-context .card-footer, .sv-context__footer { padding: var(--sv-2) var(--sv-3) 0; background: none; border: 0; font-size: var(--sv-text-small); }
.sv-context .list-group { border: 0; }
.sv-context .list-group .list-group-item .fa-circle, .sv-context .list-group .list-group-item .fa-dot-circle { font-size: 10px; }
.sv-context__empty { padding: var(--sv-2) var(--sv-3); color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-context [hidden] { display: none !important; }

/* --- Content -------------------------------------------------------------- */
.sv-main { min-width: 0; padding: var(--sv-10) var(--sv-10) var(--sv-12); }
.sv-main__inner { max-width: var(--sv-content-max); margin: 0 auto; }
.sv-main--wide .sv-main__inner { max-width: 1440px; }
.sv-layout--public .sv-main { padding-top: var(--sv-10); }

.sv-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sv-4); margin-bottom: var(--sv-6); }
.sv-page-head__text { min-width: 0; }
.sv-page-head__title { margin: 0; font-weight: 400; font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem); letter-spacing: -0.01em; }
.sv-page-head__lede { margin: var(--sv-1) 0 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-body); }
.sv-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-crumbs { margin: 0 0 var(--sv-2); padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-crumbs a { color: var(--sv-fg-secondary); }
.sv-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--sv-ink-300); }
.sv-crumbs [aria-current] { color: var(--sv-fg); }
.sv-banners { margin-bottom: 0; }
.sv-banners > * { margin-bottom: var(--sv-6); }

.sv-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-3);
  max-width: var(--sv-content-max); margin: var(--sv-16) auto 0; padding-top: var(--sv-5);
  border-top: 1px solid var(--sv-line); color: var(--sv-fg-muted); font-size: var(--sv-text-micro);
}
.sv-foot__links { display: flex; flex-wrap: wrap; gap: var(--sv-4); list-style: none; margin: 0; padding: 0; }
.sv-foot__links a { color: var(--sv-fg-secondary); }
.sv-foot__locale { display: inline-flex; align-items: center; gap: var(--sv-2); padding: 6px 10px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-full); background: var(--sv-surface); color: var(--sv-fg-secondary); font-size: var(--sv-text-micro); }
.sv-foot__locale:hover { border-color: var(--sv-line-strong); color: var(--sv-fg); }

.sv-scrim { position: fixed; inset: 0; z-index: 1035; background: rgb(6 20 51 / 0.45); opacity: 0; pointer-events: none; transition: opacity var(--sv-normal) var(--sv-ease-hover); }
.sv-nav-open .sv-scrim { opacity: 1; pointer-events: auto; }
.sv-rail__drawer-head { display: none; align-items: center; justify-content: space-between; margin: 0 0 var(--sv-4); padding: 0 var(--sv-1); }
.sv-nav-open { overflow: hidden; }

/* ==========================================================================
   4. RESPONSIVE SHELL
   ========================================================================== */
@media (max-width: 1279.98px) {
  :root { --sv-context-w: 248px; }
  .sv-main { padding: var(--sv-8) var(--sv-6) var(--sv-12); }
  /* Not enough room for the labelled sidebar: collapse it to icons. */
  .sv-layout { grid-template-columns: 92px minmax(0, 1fr); }
  .sv-layout--context { grid-template-columns: 92px var(--sv-context-w) minmax(0, 1fr); }
  .sv-rail { padding: var(--sv-3) var(--sv-2); gap: 2px; }
  .sv-nav__heading { display: none; }
  .sv-nav__heading + .sv-nav__list, .sv-nav__heading[aria-expanded="false"] + .sv-nav__list { display: flex; }
  .sv-nav__group { margin-top: 0; }
  .sv-nav__item { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 2px; text-align: center; font-size: 11.5px; }
  .sv-nav__label { white-space: normal; line-height: 1.2; }
  .sv-nav__ext { display: none; }
  .sv-nav__list--end { border-top: 0; }
}
@media (max-width: 1023.98px) {
  .sv-layout, .sv-layout--context { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sv-rail { grid-row: 1 / span 2; }
  .sv-context { position: static; height: auto; padding: var(--sv-4) var(--sv-6) 0; background: transparent; border-right: 0; overflow: visible; }
  .sv-context__toggle {
    display: flex; align-items: center; gap: var(--sv-3); width: 100%; min-height: 48px; padding: 0 var(--sv-4);
    border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); background: var(--sv-surface); color: var(--sv-fg);
    font: 600 var(--sv-text-small)/1 var(--sv-font-display);
  }
  .sv-context__toggle .sv-chev { margin-left: auto; transition: transform var(--sv-normal) var(--sv-ease-hover); }
  .sv-context__toggle[aria-expanded="true"] .sv-chev { transform: rotate(180deg); }
  .sv-context__body { display: none; margin-top: var(--sv-2); padding: var(--sv-4); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); }
  .sv-context.is-open .sv-context__body { display: block; }
  .sv-context__eyebrow { display: none; }
  .sv-main { padding-top: var(--sv-6); }
}
@media (max-width: 767.98px) {
  :root { --sv-gutter: 16px; --sv-topbar-h: 60px; }
  .sv-topbar { gap: var(--sv-2); padding: 0 var(--sv-3); }
  .sv-topbar__menu { display: inline-flex !important; }
  .sv-logo img { height: 26px; }
  .sv-hide-phone { display: none !important; }
  .sv-sera-btn__label { display: none; }
  .sv-sera-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .sv-topbar .sv-iconbtn { width: 40px; height: 40px; }
  .sv-topbar__actions { gap: 0; }
  .sv-layout { display: block; margin: 0; border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0; }
  .sv-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040;
    width: min(300px, 86vw); height: 100vh; height: 100dvh; padding: var(--sv-4) var(--sv-3);
    background: var(--sv-surface); transform: translateX(-100%); visibility: hidden;
    transition: transform var(--sv-slow) var(--sv-ease-entrance), visibility 0s linear var(--sv-slow);
    box-shadow: var(--sv-shadow-e5);
  }
  .sv-nav-open .sv-rail { transform: none; visibility: visible; transition: transform var(--sv-slow) var(--sv-ease-entrance); }
  .sv-rail__drawer-head { display: flex !important; }
  /* Inside the drawer the menu is labelled again. */
  .sv-rail .sv-nav__heading { display: flex; }
  .sv-rail .sv-nav__heading[aria-expanded="false"] + .sv-nav__list { display: none; }
  .sv-rail .sv-nav__group { margin-top: var(--sv-3); }
  .sv-rail .sv-nav__item { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 44px; padding: 0 14px; text-align: left; font-size: 1rem; }
  .sv-rail .sv-nav__label { white-space: nowrap; }
  .sv-rail .sv-nav__ext { display: inline-block; }
  .sv-context { padding: var(--sv-3) var(--sv-4) 0; }
  .sv-main { padding: var(--sv-5) var(--sv-4) var(--sv-10); }
  .sv-page-head { align-items: flex-start; }
  .sv-page-head__actions { width: 100%; }
  .sv-page-head__actions > .btn, .sv-page-head__actions > .sv-btn { flex: 1 1 auto; }
  .sv-pop__panel { position: fixed; top: calc(var(--sv-topbar-h) + 4px); left: 8px; right: 8px; width: auto; }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Buttons (sv-btn; .btn is mapped onto the same look in section 7) --- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-2);
  height: 40px;
  padding: 0 var(--sv-4);
  border: 0;
  border-radius: var(--sv-radius-md);
  font: 500 var(--sv-text-small)/1 var(--sv-font-display);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color var(--sv-fast) var(--sv-ease-hover), color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-fast) var(--sv-ease-hover);
}
.sv-btn--sm { height: 32px; padding: 0 var(--sv-3); font-size: 13px; border-radius: var(--sv-radius-sm); }
.sv-btn--lg { height: 48px; padding: 0 var(--sv-6); font-size: var(--sv-text-body); }
.sv-btn--block { width: 100%; }
.sv-btn--primary { background: var(--sv-primary); color: #fff; }
.sv-btn--primary:hover { background: var(--sv-primary-hover); color: #fff; }
.sv-btn--primary:active { background: var(--sv-primary-active); }
.sv-btn--secondary { background: var(--sv-surface); color: var(--sv-fg); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sv-btn--secondary:hover { background: var(--sv-canvas-secondary); color: var(--sv-fg); box-shadow: inset 0 0 0 1px var(--sv-line-strong); }
.sv-btn--outline { background: transparent; color: var(--sv-primary); box-shadow: inset 0 0 0 1px rgb(0 0 255 / 0.35); }
.sv-btn--outline:hover { background: var(--sv-primary-soft); color: var(--sv-primary); box-shadow: inset 0 0 0 1px rgb(0 0 255 / 0.6); }
.sv-btn--ghost { background: transparent; color: var(--sv-fg-secondary); }
.sv-btn--ghost:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); }
.sv-btn--danger { background: var(--sv-surface); color: var(--sv-danger); box-shadow: inset 0 0 0 1px rgb(190 16 37 / 0.35); }
.sv-btn--danger:hover { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-btn--text { height: auto; padding: 0; background: none; color: var(--sv-primary); }
.sv-btn--text:hover { color: var(--sv-primary-hover); text-decoration: underline !important; }
.sv-btn[aria-disabled="true"], .sv-btn:disabled { opacity: 0.5; pointer-events: none; }
.sv-btn[aria-busy="true"] { pointer-events: none; }
.sv-btn[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sv-spin 0.7s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* --- Cards --------------------------------------------------------------- */
.sv-card {
  position: relative;
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
}
.sv-card--pad { padding: var(--sv-6); }
.sv-card--elevated { border-color: transparent; box-shadow: var(--sv-shadow-e3); }
.sv-card--interactive { transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-normal) var(--sv-ease-hover), transform var(--sv-normal) var(--sv-ease-hover); }
.sv-card--interactive:hover { border-color: var(--sv-line-strong); box-shadow: var(--sv-shadow-e2); }
.sv-card--interactive:focus-within { border-color: var(--sv-primary); }
.sv-card__link { color: inherit; }
.sv-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sv-card__link:hover { text-decoration: none; color: inherit; }
.sv-card__link:focus-visible { outline: none !important; }
.sv-card__link:focus-visible::after { outline: 2px solid var(--sv-primary); outline-offset: 2px; }
.sv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-3);
  padding: var(--sv-5) var(--sv-6) 0;
}
.sv-card__head--rule { padding-bottom: var(--sv-4); border-bottom: 1px solid var(--sv-line-subtle); }
.sv-card__title { margin: 0; font-size: var(--sv-text-h3); font-weight: 600; }
.sv-card__sub { margin: 2px 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-card__body { padding: var(--sv-4) var(--sv-6) var(--sv-6); }
.sv-card__body--flush { padding: var(--sv-2) 0 var(--sv-2); }
.sv-card__foot { padding: var(--sv-4) var(--sv-6); border-top: 1px solid var(--sv-line-subtle); }

.sv-section + .sv-section { margin-top: var(--sv-8); }
.sv-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sv-3); margin-bottom: var(--sv-4); }
.sv-section__title { margin: 0; font-size: var(--sv-text-h2); font-weight: 500; }
.sv-section__link { font: 500 var(--sv-text-small)/1 var(--sv-font-display); white-space: nowrap; }

.sv-grid { display: grid; gap: var(--sv-4); }
.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sv-6); align-items: start; }
.sv-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-stack > * + * { margin-top: var(--sv-4); }
.sv-stack--lg > * + * { margin-top: var(--sv-6); }
@media (max-width: 1199.98px) {
  .sv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .sv-grid--2, .sv-grid--3, .sv-split--even { grid-template-columns: minmax(0, 1fr); }
  .sv-card--pad { padding: var(--sv-5); }
  .sv-card__head { padding: var(--sv-4) var(--sv-5) 0; }
  .sv-card__body { padding: var(--sv-4) var(--sv-5) var(--sv-5); }
  .sv-card__foot { padding: var(--sv-4) var(--sv-5); }
}
@media (max-width: 479.98px) {
  .sv-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Welcome / hero card --------------------------------------------------- */
.sv-hello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-4);
  margin-bottom: var(--sv-6);
}
.sv-hello__title { margin: 0; font-size: var(--sv-text-h1); font-weight: 400; letter-spacing: -0.01em; }
.sv-hello__sub { margin: 4px 0 0; color: var(--sv-fg-secondary); }

/* --- Stat cards ---------------------------------------------------------- */
.sv-stat {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-4);
  padding: var(--sv-5);
}
.sv-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--sv-radius-md);
  background: var(--sv-primary-soft);
  color: var(--sv-primary);
}
.sv-stat__icon--success { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-stat__icon--warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.sv-stat__icon--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-stat__label { margin: 0; color: var(--sv-fg-secondary); font: 500 var(--sv-text-small)/1.3 var(--sv-font-display); }
.sv-stat__value { margin: 4px 0 0; color: var(--sv-fg); font: 500 26px/1.1 var(--sv-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sv-stat__meta { margin: 6px 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }

/* --- Status badge -------------------------------------------------------- */
.sv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--sv-radius-full);
  background: var(--sv-canvas-inset);
  color: var(--sv-fg-secondary);
  font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display);
  white-space: nowrap;
}
.sv-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-ink-400); }
.sv-status--success { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-status--success::before { background: var(--sv-success-fill); }
.sv-status--warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.sv-status--warning::before { background: var(--sv-warning-fill); }
.sv-status--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-status--danger::before { background: var(--sv-danger-fill); }
.sv-status--info { background: var(--sv-info-soft); color: var(--sv-info); }
.sv-status--info::before { background: var(--sv-brand-500); }

/* --- Rows (lists of services, invoices, tickets) -------------------------- */
.sv-rows { list-style: none; margin: 0; padding: 0; }
.sv-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-4);
  padding: var(--sv-4) var(--sv-6);
  border-top: 1px solid var(--sv-line-subtle);
  transition: background-color var(--sv-fast) var(--sv-ease-hover);
}
.sv-rows > .sv-row:first-child { border-top: 0; }
.sv-row--link:hover { background: var(--sv-canvas-secondary); }
.sv-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--sv-radius-md);
  background: var(--sv-canvas-inset);
  color: var(--sv-fg-secondary);
}
.sv-row__main { flex: 1; min-width: 0; }
.sv-row__title { display: block; color: var(--sv-fg); font: 500 var(--sv-text-body)/1.35 var(--sv-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row__title a { color: inherit; }
.sv-row__sub { display: block; color: var(--sv-fg-muted); font-size: var(--sv-text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row__meta { flex: none; text-align: right; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); font-variant-numeric: tabular-nums; }
.sv-row__meta strong { display: block; color: var(--sv-fg); font-weight: 600; }
.sv-row__end { flex: none; display: flex; align-items: center; gap: var(--sv-2); }
.sv-row__chev { color: var(--sv-ink-400); flex: none; }
@media (max-width: 575.98px) {
  .sv-row { flex-wrap: wrap; padding: var(--sv-4) var(--sv-5); gap: var(--sv-3); }
  .sv-row__icon { width: 36px; height: 36px; }
  .sv-row__main { flex-basis: calc(100% - 52px); }
  .sv-row__meta { text-align: left; margin-left: 48px; }
  .sv-row__chev { display: none; }
}

/* --- Service tiles (dashboard/websites) ------------------------------------ */
.sv-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sv-4);
  padding: var(--sv-5);
}
.sv-tile__top { display: flex; align-items: flex-start; gap: var(--sv-3); }
.sv-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--sv-radius-md); background: var(--sv-canvas-inset); color: var(--sv-fg); }
.sv-tile__name { margin: 0; color: var(--sv-fg); font: 600 var(--sv-text-body)/1.35 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-tile__plan { margin: 2px 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-tile__facts { display: flex; flex-wrap: wrap; gap: var(--sv-2) var(--sv-5); margin: 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-tile__facts dt { font-weight: 400; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-tile__facts dd { margin: 0; color: var(--sv-fg); font-variant-numeric: tabular-nums; }
.sv-tile__actions { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin-top: auto; position: relative; z-index: 1; }

/* --- Quick actions / management cards ------------------------------------- */
.sv-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-3);
  min-height: 72px;
  padding: var(--sv-4) var(--sv-5);
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
  color: var(--sv-fg);
  font: 500 var(--sv-text-body)/1.3 var(--sv-font-display);
  text-align: left;
  transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-normal) var(--sv-ease-hover), background-color var(--sv-fast) var(--sv-ease-hover);
}
button.sv-action { width: 100%; }
.sv-action:hover { border-color: var(--sv-line-strong); box-shadow: var(--sv-shadow-e2); color: var(--sv-fg); text-decoration: none; }
.sv-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--sv-radius-md); background: var(--sv-primary-soft); color: var(--sv-primary); }
.sv-action__text { flex: 1; min-width: 0; }
.sv-action__sub { display: block; margin-top: 2px; color: var(--sv-fg-muted); font: 400 var(--sv-text-small)/1.4 var(--sv-font-sans); }
.sv-action__end { flex: none; color: var(--sv-ink-400); }
.sv-action--compact { min-height: 56px; padding: var(--sv-3) var(--sv-4); }
.sv-action--compact .sv-action__icon { width: 32px; height: 32px; background: transparent; color: var(--sv-fg-secondary); }

/* --- Info strip (Hostinger "Domain / Hosting / Email / Backups") --------- */
.sv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sv-3); }
.sv-fact {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-3);
  padding: var(--sv-4);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-surface);
  min-width: 0;
}
.sv-fact__text { flex: 1; min-width: 0; }
.sv-fact__label { display: block; color: var(--sv-fg); font: 600 var(--sv-text-small)/1.3 var(--sv-font-display); }
.sv-fact__value { display: block; color: var(--sv-fg-muted); font-size: var(--sv-text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-fact .sv-icon { color: var(--sv-fg-secondary); }
a.sv-fact:hover { border-color: var(--sv-line-strong); text-decoration: none; }
@media (max-width: 1199.98px) { .sv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .sv-facts { grid-template-columns: minmax(0, 1fr); } }

/* --- Service header ------------------------------------------------------- */
.sv-svc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-4); }
.sv-svc-head__mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: var(--sv-radius-lg); background: var(--sv-canvas-inset); color: var(--sv-fg); }
.sv-svc-head__text { flex: 1; min-width: 0; }
.sv-svc-head__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-2) var(--sv-3); font: 500 22px/1.25 var(--sv-font-display); color: var(--sv-fg); overflow-wrap: anywhere; }
.sv-svc-head__name a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.sv-svc-head__meta { margin: 4px 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-svc-head__actions { display: flex; flex-wrap: wrap; gap: var(--sv-2); }

/* --- Callouts (alerts we own) --------------------------------------------- */
.sv-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-3);
  padding: var(--sv-4) var(--sv-5);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-canvas-inset);
  color: var(--sv-fg);
  font-size: var(--sv-text-small);
}
.sv-callout > .sv-icon { margin-top: 1px; color: var(--sv-fg-secondary); }
.sv-callout__body { flex: 1; min-width: 0; }
.sv-callout__title { display: block; font: 600 var(--sv-text-small)/1.4 var(--sv-font-display); color: var(--sv-fg); }
.sv-callout__actions { flex: none; display: flex; gap: var(--sv-2); align-self: center; }
.sv-callout--info { background: var(--sv-info-soft); }
.sv-callout--info > .sv-icon { color: var(--sv-info); }
.sv-callout--success { background: var(--sv-success-soft); }
.sv-callout--success > .sv-icon { color: var(--sv-success); }
.sv-callout--warning { background: var(--sv-warning-soft); }
.sv-callout--warning > .sv-icon { color: var(--sv-warning); }
.sv-callout--danger { background: var(--sv-danger-soft); }
.sv-callout--danger > .sv-icon { color: var(--sv-danger); }
@media (max-width: 575.98px) {
  .sv-callout { flex-wrap: wrap; }
  .sv-callout__actions { width: 100%; margin-left: 32px; }
}

/* --- Empty / loading / error states --------------------------------------- */
.sv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sv-2);
  padding: var(--sv-10) var(--sv-6);
  text-align: center;
}
.sv-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--sv-2); border-radius: 50%; background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); }
.sv-empty--success .sv-empty__icon { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-empty__title { margin: 0; font: 500 var(--sv-text-h3)/1.35 var(--sv-font-display); color: var(--sv-fg); }
.sv-empty__body { margin: 0; max-width: 420px; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sv-2); margin-top: var(--sv-3); }
.sv-empty--compact { padding: var(--sv-6) var(--sv-5); }

.sv-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--sv-radius-xs);
  background: linear-gradient(90deg, var(--sv-ink-100) 0%, var(--sv-ink-50) 50%, var(--sv-ink-100) 100%);
  background-size: 200% 100%;
  animation: sv-shimmer 1.4s ease-in-out infinite;
}
@keyframes sv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sv-loading { display: flex; align-items: center; justify-content: center; gap: var(--sv-3); padding: var(--sv-8); color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-loading::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--sv-line); border-top-color: var(--sv-primary); border-radius: 50%; animation: sv-spin 0.8s linear infinite; }

/* --- Meter --------------------------------------------------------------- */
.sv-meter { margin-top: var(--sv-2); }
.sv-meter__head { display: flex; justify-content: space-between; gap: var(--sv-2); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-meter__track { height: 6px; margin-top: 6px; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); overflow: hidden; }
.sv-meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--sv-primary); }
.sv-meter__fill--warning { background: var(--sv-warning-fill); }
.sv-meter__fill--danger { background: var(--sv-danger-fill); }

/* --- Key/value list ------------------------------------------------------ */
.sv-kv { display: grid; grid-template-columns: minmax(140px, 38%) minmax(0, 1fr); margin: 0; }
.sv-kv dt, .sv-kv dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--sv-line-subtle); font-size: var(--sv-text-small); }
.sv-kv dt { color: var(--sv-fg-muted); font-weight: 400; padding-right: var(--sv-4); }
.sv-kv dd { color: var(--sv-fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sv-kv > dt:first-of-type, .sv-kv > dt:first-of-type + dd { border-top: 0; }
@media (max-width: 479.98px) {
  .sv-kv { grid-template-columns: minmax(0, 1fr); }
  .sv-kv dd { padding-top: 0; border-top: 0; }
}

/* --- Tabs (ours) ------------------------------------------------------------ */
.sv-tabs { display: flex; gap: var(--sv-1); margin: 0 0 var(--sv-5); padding: 0; list-style: none; border-bottom: 1px solid var(--sv-line); overflow-x: auto; scrollbar-width: none; }
.sv-tabs::-webkit-scrollbar { display: none; }
.sv-tabs a, .sv-tabs button {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-2);
  padding: 12px var(--sv-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--sv-fg-secondary);
  font: 500 var(--sv-text-small)/1 var(--sv-font-display);
  white-space: nowrap;
}
.sv-tabs a:hover, .sv-tabs button:hover { color: var(--sv-fg); text-decoration: none; }
.sv-tabs .active, .sv-tabs [aria-selected="true"], .sv-tabs [aria-current="page"] { color: var(--sv-fg); border-bottom-color: var(--sv-primary); }
.sv-tabs .sv-count { margin-left: 2px; }
.sv-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); font: 600 11px/1 var(--sv-font-display); }

/* --- Chips (filters) -------------------------------------------------------- */
.sv-chips { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin-bottom: var(--sv-4); }
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-full);
  background: var(--sv-surface);
  color: var(--sv-fg-secondary);
  font: 500 13px/1 var(--sv-font-display);
}
.sv-chip:hover { border-color: var(--sv-line-strong); color: var(--sv-fg); text-decoration: none; }
.sv-chip.active, .sv-chip[aria-pressed="true"], .sv-chip[aria-current="page"] { background: var(--sv-fg); border-color: var(--sv-fg); color: #fff; }

/* --- Ticket thread ------------------------------------------------------- */
.sv-thread { list-style: none; margin: 0; padding: 0; }
.sv-msg { display: flex; gap: var(--sv-4); }
.sv-msg + .sv-msg { margin-top: var(--sv-5); }
.sv-msg__avatar { flex: none; }
.sv-msg__avatar .sv-avatar { width: 36px; height: 36px; }
.sv-msg--staff .sv-msg__avatar .sv-avatar { background: var(--sv-fg); }
.sv-msg__bubble { flex: 1; min-width: 0; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); }
.sv-msg--staff .sv-msg__bubble { background: var(--sv-canvas-secondary); }
.sv-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-2) var(--sv-3); padding: var(--sv-3) var(--sv-5); border-bottom: 1px solid var(--sv-line-subtle); }
.sv-msg__name { color: var(--sv-fg); font: 600 var(--sv-text-small)/1.3 var(--sv-font-display); }
.sv-msg__role { padding: 1px 8px; border-radius: var(--sv-radius-full); background: var(--sv-fg); color: #fff; font: 600 11px/1.6 var(--sv-font-display); }
.sv-msg__time { margin-left: auto; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-msg__body { padding: var(--sv-4) var(--sv-5); color: var(--sv-fg); font-size: var(--sv-text-body); overflow-wrap: anywhere; }
.sv-msg__body img { max-width: 100%; height: auto; }
.sv-msg__body pre { white-space: pre-wrap; background: var(--sv-canvas-inset); padding: var(--sv-3); border-radius: var(--sv-radius-sm); }
.sv-msg__files { padding: 0 var(--sv-5) var(--sv-4); display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); background: var(--sv-surface); color: var(--sv-fg); font-size: var(--sv-text-small); }
.sv-file:hover { border-color: var(--sv-line-strong); text-decoration: none; }
.sv-file--removed { color: var(--sv-fg-muted); }
@media (max-width: 575.98px) {
  .sv-msg__avatar { display: none; }
  .sv-msg__time { margin-left: 0; width: 100%; }
}

/* --- Invoice ------------------------------------------------------------------- */
.sv-amount { font: 500 32px/1.1 var(--sv-font-display); color: var(--sv-fg); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sv-lines { width: 100%; border-collapse: collapse; font-size: var(--sv-text-small); }
.sv-lines th { padding: 10px 0; border-bottom: 1px solid var(--sv-line); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
.sv-lines td { padding: 14px 0; border-bottom: 1px solid var(--sv-line-subtle); color: var(--sv-fg); vertical-align: top; }
.sv-lines .sv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: var(--sv-4); }
.sv-lines tfoot td { border-bottom: 0; padding: 8px 0; color: var(--sv-fg-secondary); }
.sv-lines tfoot .sv-total td { padding-top: 14px; border-top: 1px solid var(--sv-line); color: var(--sv-fg); font: 600 var(--sv-text-body)/1.3 var(--sv-font-display); }

/* --- Section intro (unowned product areas) --------------------------------- */
.sv-explore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-5);
  padding: var(--sv-6);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-canvas-dark);
  color: #c6c6cc;
}
.sv-explore__title { margin: 0; color: #fff; font: 500 var(--sv-text-h2)/1.3 var(--sv-font-display); }
.sv-explore__body { margin: 4px 0 0; color: #c6c6cc; font-size: var(--sv-text-small); max-width: 560px; }
.sv-explore__text { flex: 1; min-width: 240px; }
.sv-explore .sv-btn--primary { box-shadow: none; }
.sv-explore .sv-btn--inverse { background: #fff; color: var(--sv-fg); }
.sv-explore .sv-btn--inverse:hover { background: var(--sv-ink-100); }

/* --- Product promos (things the client does not own yet) -------------------- */
.sv-promo { display: flex; flex-direction: column; gap: var(--sv-2); padding: var(--sv-5); }
.sv-promo__icon { color: var(--sv-primary); }
.sv-promo__title { margin: var(--sv-1) 0 0; font: 600 var(--sv-text-body)/1.35 var(--sv-font-display); color: var(--sv-fg); }
.sv-promo__body { margin: 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-promo__cta { margin-top: auto; padding-top: var(--sv-2); font: 500 var(--sv-text-small)/1 var(--sv-font-display); display: inline-flex; align-items: center; gap: 4px; }

/* --- Sera panel ------------------------------------------------------------- */
.sv-sera-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sv-primary); color: #fff; flex: none; }
.sv-sera-mark .sv-icon { width: 22px; height: 22px; }
.sv-soon { display: inline-block; padding: 2px 8px; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); font: 600 11px/1.5 var(--sv-font-display); letter-spacing: 0.02em; }

/* ==========================================================================
   6. AUTH LAYOUT (login, register, password reset, 2FA)
   ========================================================================== */
.sv-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  background: var(--sv-canvas);
}
.sv-auth--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 760px); }
.sv-auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sv-10);
  background: var(--sv-canvas-dark);
  color: #c6c6cc;
  overflow: hidden;
}
.sv-auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 30% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}
.sv-auth__aside > * { position: relative; }
.sv-auth__brand { display: inline-flex; align-items: center; gap: var(--sv-3); color: #fff; font: 600 var(--sv-text-body)/1 var(--sv-font-display); }
.sv-auth__brand img { height: 34px; width: auto; background: #fff; padding: 6px 10px; border-radius: var(--sv-radius-sm); }
.sv-auth__pitch { max-width: 460px; }
.sv-auth__pitch h2 { margin: 0 0 var(--sv-3); color: #fff; font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.15 var(--sv-font-display); letter-spacing: -0.01em; }
.sv-auth__pitch p { margin: 0; color: #c6c6cc; font-size: var(--sv-text-body); }
.sv-auth__points { list-style: none; margin: var(--sv-6) 0 0; padding: 0; display: grid; gap: var(--sv-3); }
.sv-auth__points li { display: flex; gap: var(--sv-3); align-items: flex-start; color: #dedee2; font-size: var(--sv-text-small); }
.sv-auth__points .sv-icon { color: var(--sv-brand-400); margin-top: 1px; }
.sv-auth__legal { color: #9d9ea4; font-size: var(--sv-text-micro); }
.sv-auth__legal a { color: #c6c6cc; }
.sv-auth__panel { display: flex; flex-direction: column; padding: var(--sv-8) var(--sv-10); overflow-y: auto; }
.sv-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-3); margin-bottom: var(--sv-10); }
.sv-auth__top .sv-logo { display: none; }
.sv-auth__form { width: 100%; max-width: 400px; margin: auto; }
.sv-auth--wide .sv-auth__form { max-width: 640px; }
.sv-auth__title { margin: 0; font: 400 28px/1.2 var(--sv-font-display); letter-spacing: -0.01em; }
.sv-auth__lede { margin: var(--sv-2) 0 var(--sv-6); color: var(--sv-fg-secondary); }
.sv-auth__alt { margin-top: var(--sv-6); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); text-align: center; }
.sv-auth__foot { margin-top: var(--sv-10); color: var(--sv-fg-muted); font-size: var(--sv-text-micro); text-align: center; }
.sv-divider { display: flex; align-items: center; gap: var(--sv-3); margin: var(--sv-5) 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-divider::before, .sv-divider::after { content: ""; flex: 1; height: 1px; background: var(--sv-line); }
@media (max-width: 991.98px) {
  .sv-auth, .sv-auth--wide { grid-template-columns: minmax(0, 1fr); }
  .sv-auth__aside { display: none; }
  .sv-auth__top .sv-logo { display: inline-flex; }
  .sv-auth__panel { padding: var(--sv-5) var(--sv-5) var(--sv-8); }
  .sv-auth__top { margin-bottom: var(--sv-8); }
}

/* Form fields we own. */
.sv-field { margin-bottom: var(--sv-4); }
.sv-field__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sv-2); margin-bottom: 6px; color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }
.sv-field__label a { font-weight: 500; }
.sv-field__hint { margin-top: 6px; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-req { color: var(--sv-danger); }

/* ==========================================================================
   7. BOOTSTRAP / WHMCS RESKIN
   Every stock WHMCS page and module output that we do not template
   ourselves still lands on the Serverlys look through these.
   ========================================================================== */

/* Containers WHMCS wraps its pages in. */
#main-body { padding: 0; background: none; }
.primary-content { min-width: 0; }
.sv-main .container, .sv-main .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }
.sv-main > .sv-main__inner > .row { margin-left: -8px; margin-right: -8px; }
.text-muted { color: var(--sv-fg-muted) !important; }
.text-primary { color: var(--sv-primary) !important; }
.text-success { color: var(--sv-success) !important; }
.text-danger { color: var(--sv-danger) !important; }
.text-warning { color: var(--sv-warning) !important; }
.text-info { color: var(--sv-info) !important; }
.bg-light { background: var(--sv-canvas-secondary) !important; }
.border, .border-top, .border-bottom { border-color: var(--sv-line) !important; }

/* Buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-2);
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--sv-radius-md);
  font: 500 var(--sv-text-small)/1.2 var(--sv-font-display);
  box-shadow: none !important;
  transition: background-color var(--sv-fast) var(--sv-ease-hover), border-color var(--sv-fast) var(--sv-ease-hover), color var(--sv-fast) var(--sv-ease-hover);
}
.btn:hover { text-decoration: none; }
.btn-block { display: flex; width: 100%; }
.btn-sm, .btn-group-sm > .btn { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: var(--sv-radius-sm); }
.btn-xs { min-height: 28px; padding: 3px 10px; font-size: 12px; border-radius: var(--sv-radius-sm); }
.btn-lg, .btn-group-lg > .btn { min-height: 48px; padding: 12px 24px; font-size: var(--sv-text-body); border-radius: var(--sv-radius-md); }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary.disabled, .btn-primary:disabled,
.btn-success, .btn-info, .btn-order-now, .btn-checkout {
  background: var(--sv-primary);
  border-color: var(--sv-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus, .btn-info:hover, .btn-info:focus,
.btn-order-now:hover, .btn-checkout:hover {
  background: var(--sv-primary-hover);
  border-color: var(--sv-primary-hover);
  color: #fff;
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary {
  background: var(--sv-surface);
  border-color: var(--sv-line);
  color: var(--sv-fg);
}
.btn-default:hover, .btn-default:focus, .btn-secondary:hover, .btn-secondary:focus, .btn-light:hover, .btn-outline-secondary:hover {
  background: var(--sv-canvas-secondary);
  border-color: var(--sv-line-strong);
  color: var(--sv-fg);
}
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active {
  background: var(--sv-canvas-inset);
  border-color: var(--sv-line-strong);
  color: var(--sv-fg);
}
.btn-outline-primary, .btn-outline-info { background: transparent; border-color: rgb(0 0 255 / 0.35); color: var(--sv-primary); }
.btn-outline-primary:hover, .btn-outline-info:hover { background: var(--sv-primary-soft); border-color: rgb(0 0 255 / 0.6); color: var(--sv-primary); }
.btn-danger { background: var(--sv-red-600); border-color: var(--sv-red-600); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #9e0d1f; border-color: #9e0d1f; color: #fff; }
.btn-outline-danger { background: var(--sv-surface); border-color: rgb(190 16 37 / 0.35); color: var(--sv-danger); }
.btn-outline-danger:hover { background: var(--sv-danger-soft); border-color: rgb(190 16 37 / 0.6); color: var(--sv-danger); }
.btn-warning { background: var(--sv-amber-500); border-color: var(--sv-amber-500); color: var(--sv-ink-950); }
.btn-warning:hover { background: #c98500; border-color: #c98500; color: var(--sv-ink-950); }
.btn-link { min-height: 0; padding-left: 0; padding-right: 0; background: none; border: 0; color: var(--sv-primary); }
.btn-link:hover { color: var(--sv-primary-hover); text-decoration: underline; }
.btn.disabled, .btn:disabled { opacity: 0.5; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--sv-radius-md); border-bottom-left-radius: var(--sv-radius-md); }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle:last-child { border-top-right-radius: var(--sv-radius-md); border-bottom-right-radius: var(--sv-radius-md); }
.btn-group-sm > .btn:first-child { border-top-left-radius: var(--sv-radius-sm); border-bottom-left-radius: var(--sv-radius-sm); }
.btn-group-sm > .btn:last-child { border-top-right-radius: var(--sv-radius-sm); border-bottom-right-radius: var(--sv-radius-sm); }
.btn-return-to-admin { position: fixed; right: 16px; bottom: 16px; z-index: 1020; background: var(--sv-fg); color: #fff; border-radius: var(--sv-radius-full); }
.btn-return-to-admin:hover { background: var(--sv-ink-800); color: #fff; }

/* Forms. */
label, .col-form-label, .control-label { color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }
.form-group { margin-bottom: var(--sv-4); }
.form-control, .custom-select, .custom-file-label, select.form-control,
input[type="text"].form-control, input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"] {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--sv-line-input);
  border-radius: var(--sv-radius-sm);
  background-color: var(--sv-surface);
  color: var(--sv-fg);
  font: 400 var(--sv-text-body)/1.4 var(--sv-font-sans);
  box-shadow: none;
  transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-fast) var(--sv-ease-hover);
}
input[type="checkbox"], input[type="radio"] { height: auto; padding: 0; }
textarea.form-control { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
select.form-control[multiple], select.form-control[size] { height: auto; padding: 8px; }
.form-control-sm, .input-sm { height: 36px; font-size: var(--sv-text-small); }
.form-control-lg, .input-lg { height: 52px; font-size: 1rem; }
.form-control:hover, .custom-select:hover { border-color: var(--sv-ink-600); }
.form-control:focus, .custom-select:focus {
  border-color: var(--sv-primary);
  box-shadow: 0 0 0 3px var(--sv-primary-soft-active);
  outline: none;
}
.form-control::placeholder { color: var(--sv-fg-muted); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background: var(--sv-canvas-secondary); color: var(--sv-fg-secondary); }
.form-control.is-invalid, .has-error .form-control, .was-validated .form-control:invalid { border-color: var(--sv-danger); }
.form-control.is-invalid:focus, .has-error .form-control:focus { box-shadow: 0 0 0 3px rgb(190 16 37 / 0.15); }
.invalid-feedback, .help-block.error, .field-error-msg { color: var(--sv-danger); font-size: var(--sv-text-micro); }
.form-text, .help-block { color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.custom-select { padding-right: 36px; background: var(--sv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; appearance: none; }
.input-group { flex-wrap: nowrap; }
.input-group > .form-control { min-width: 0; }
.input-group-text {
  height: 44px;
  padding: 0 14px;
  border-color: var(--sv-line-input);
  background: var(--sv-canvas-secondary);
  color: var(--sv-fg-secondary);
  font-size: var(--sv-text-small);
}
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-prepend .input-group-text, .input-group-prepend .btn { border-radius: var(--sv-radius-sm) 0 0 var(--sv-radius-sm); }
.input-group-append .input-group-text, .input-group-append .btn { border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0; min-height: 44px; }
.input-group-append .btn, .input-group-prepend .btn { border-color: var(--sv-line-input); }
.form-check-input, .custom-control-input { accent-color: var(--sv-primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sv-primary); width: 18px; height: 18px; vertical-align: -3px; }
.form-check { padding-left: 1.75rem; }
.form-check-input { margin-left: -1.75rem; margin-top: 0.2rem; }
.form-check-label, .checkbox label, .radio label { font-weight: 400; color: var(--sv-fg); font-family: var(--sv-font-sans); }
.custom-control-label::before { border-color: var(--sv-line-input); }
.custom-checkbox .custom-control-label::before { border-radius: var(--sv-radius-xs); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sv-primary); border-color: var(--sv-primary); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--sv-primary-soft-active); }
.custom-switch .custom-control-label::before { border-radius: var(--sv-radius-full); }
.bootstrap-switch { border-color: var(--sv-line-input) !important; border-radius: var(--sv-radius-full) !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--sv-primary) !important; color: #fff !important; }
.iti { width: 100%; }
.field-icon { color: var(--sv-fg-muted); }

/* Cards / panels. */
.card, .panel {
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-surface);
  box-shadow: none;
  margin-bottom: var(--sv-4);
}
.card > .list-group:last-child { border-bottom-left-radius: var(--sv-radius-lg); border-bottom-right-radius: var(--sv-radius-lg); }
.card-header, .panel-heading {
  padding: var(--sv-4) var(--sv-6);
  border-bottom: 1px solid var(--sv-line-subtle);
  background: transparent;
}
.card-header:first-child { border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0; }
.card-title, .panel-title, .card-header h3, .card-header .card-title { margin: 0; color: var(--sv-fg); font: 600 var(--sv-text-h3)/1.35 var(--sv-font-display); }
.card-body, .panel-body { padding: var(--sv-6); }
.card-footer, .panel-footer { padding: var(--sv-4) var(--sv-6); background: transparent; border-top: 1px solid var(--sv-line-subtle); }
.card-footer:last-child { border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg); }
.card-footer:empty { display: none; }
.card[class*="card-accent-"] { border-top-width: 1px; }
@media (max-width: 767.98px) {
  .card-body, .panel-body { padding: var(--sv-5); }
  .card-header, .card-footer { padding-left: var(--sv-5); padding-right: var(--sv-5); }
}

/* Tables & DataTables. */
.table-container { background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); padding: var(--sv-2) 0; overflow: hidden; }
.table { color: var(--sv-fg); font-size: var(--sv-text-small); margin-bottom: 0; }
.table th, .table td { padding: 14px 16px; border-top: 1px solid var(--sv-line-subtle); vertical-align: middle; }
.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--sv-line);
  color: var(--sv-fg-muted);
  font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-hover tbody tr:hover, .table-list tbody tr:hover { background: var(--sv-canvas-secondary); }
.table-list > tbody > tr { cursor: pointer; }
.table-list > tbody > tr > td { background: transparent !important; border-color: var(--sv-line-subtle) !important; }
.table-list > thead > tr > th { background: transparent !important; border-color: var(--sv-line) !important; }
.table-list > thead > tr > th.sorting_asc, .table-list > thead > tr > th.sorting_desc { color: var(--sv-fg); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--sv-line-subtle); }
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper .listtable { background: none; border: 0; }
.dataTables_wrapper .dataTables_filter { float: none; margin: var(--sv-2) var(--sv-4) var(--sv-3); text-align: left; }
.dataTables_wrapper .dataTables_filter label { display: block; margin: 0; font-size: 0; }
.dataTables_wrapper .dataTables_filter input {
  width: 100% !important;
  max-width: 360px;
  height: 40px;
  margin: 0 !important;
  padding: 0 12px 0 38px !important;
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-radius-md) !important;
  background: var(--sv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f78' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E") no-repeat 12px center / 18px !important;
  font-size: var(--sv-text-small) !important;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--sv-primary) !important; box-shadow: 0 0 0 3px var(--sv-primary-soft-active); }
.dataTables_wrapper .dataTables_info { padding: var(--sv-3) var(--sv-4) 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.dataTables_wrapper .dataTables_length { padding: var(--sv-3) var(--sv-4); color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.dataTables_wrapper .dataTables_length select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); }
.dataTables_wrapper .dataTables_paginate { padding: var(--sv-3) var(--sv-4) 0; }
.dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-end; margin: 0; }
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; border-collapse: collapse !important; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { opacity: 0.35; }
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::after { opacity: 1; color: var(--sv-primary); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before {
  background-color: var(--sv-primary) !important;
  box-shadow: none !important;
  border: 0 !important;
}
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--sv-fg-muted); font-weight: 500; min-width: 110px; }
#tableLoading { padding: var(--sv-8); color: var(--sv-fg-muted); }

/* Status labels WHMCS prints (label status status-*). */
.label, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--sv-radius-full);
  background: var(--sv-canvas-inset);
  color: var(--sv-fg-secondary);
  font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display);
  white-space: nowrap;
  vertical-align: middle;
}
.label.status::before, .label[class*="status-"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge-primary, .badge-info, .label-info { background: var(--sv-info-soft); color: var(--sv-info); }
.badge-success, .label-success { background: var(--sv-success-soft); color: var(--sv-success); }
.badge-warning, .label-warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.badge-danger, .label-danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.badge-secondary, .badge-default, .label-default { background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); }
.status-active, .status-paid, .status-accepted, .status-completed, .status-answered, .status-delivered, .status-delivered-quote,
.label.status-active, .label.status-paid, .label.status-completed, .label.status-answered {
  background: var(--sv-success-soft) !important;
  color: var(--sv-success) !important;
}
.status-pending, .status-pending-registration, .status-pending-transfer, .status-customer-reply, .status-draft,
.status-grace, .status-onhold, .status-on-hold, .status-in-progress, .status-sent, .status-collections, .status-payment-pending,
.label.status-pending, .label.status-customer-reply {
  background: var(--sv-warning-soft) !important;
  color: var(--sv-warning) !important;
}
.status-unpaid, .status-overdue, .status-suspended, .status-fraud, .status-expired, .status-redemption, .status-dead, .status-lost,
.label.status-unpaid, .label.status-overdue, .label.status-suspended {
  background: var(--sv-danger-soft) !important;
  color: var(--sv-danger) !important;
}
.status-open, .status-new, .label.status-open { background: var(--sv-info-soft) !important; color: var(--sv-info) !important; }
.status-terminated, .status-cancelled, .status-closed, .status-refunded, .status-transferred-away, .status-transferredaway, .status-inactive,
.label.status-terminated, .label.status-cancelled, .label.status-closed {
  background: var(--sv-canvas-inset) !important;
  color: var(--sv-fg-secondary) !important;
}

/* Alerts. */
.alert {
  position: relative;
  padding: var(--sv-4) var(--sv-5);
  border: 0;
  border-radius: var(--sv-radius-lg);
  background: var(--sv-canvas-inset);
  color: var(--sv-fg);
  font-size: var(--sv-text-small);
}
.alert h2, .alert h4, .alert .alert-heading { margin: 0 0 var(--sv-1); font-size: var(--sv-text-body); font-weight: 600; color: inherit; }
.alert ul { margin: var(--sv-2) 0 0; padding-left: 1.25rem; }
.alert-info { background: var(--sv-info-soft); color: var(--sv-ink-900); }
.alert-success { background: var(--sv-success-soft); color: #0a4f30; }
.alert-warning { background: var(--sv-warning-soft); color: #5e2b00; }
.alert-danger, .alert-error { background: var(--sv-danger-soft); color: #7c0a18; }
.alert-link, .alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.alert .close { opacity: 0.6; }

/* Navs, tabs, pills. */
.nav-tabs { border-bottom: 1px solid var(--sv-line); gap: var(--sv-1); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
  margin-bottom: -1px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--sv-fg-secondary);
  font: 500 var(--sv-text-small)/1 var(--sv-font-display);
  white-space: nowrap;
}
.nav-tabs .nav-link:hover { color: var(--sv-fg); border-color: transparent; text-decoration: none; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--sv-fg); background: none; border-color: transparent transparent var(--sv-primary); }
.tab-content > .tab-pane { padding-top: var(--sv-4); }
.nav-pills .nav-link { border-radius: var(--sv-radius-full); color: var(--sv-fg-secondary); font: 500 var(--sv-text-small)/1 var(--sv-font-display); padding: 9px 14px; }
.nav-pills .nav-link.active { background: var(--sv-fg); color: #fff; }

/* List groups (outside the context sidebar). */
.list-group-item {
  border-color: var(--sv-line-subtle);
  color: var(--sv-fg);
  font-size: var(--sv-text-small);
  padding: 12px var(--sv-6);
}
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--sv-canvas-secondary); color: var(--sv-fg); }
.list-group-item.active { background: var(--sv-primary-soft); border-color: var(--sv-line-subtle); color: var(--sv-primary); }
.card .list-group-flush .list-group-item { padding-left: var(--sv-6); padding-right: var(--sv-6); }

/* Dropdowns. */
.dropdown-menu {
  padding: var(--sv-2);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-md);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow-e4);
  font-size: var(--sv-text-small);
}
.dropdown-item, .dropdown-menu > li > a, .dropdown-menu > li.dropdown-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--sv-radius-sm);
  color: var(--sv-fg);
  cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); text-decoration: none; }
.dropdown-item.active, .dropdown-item:active { background: var(--sv-primary-soft); color: var(--sv-primary); }
.dropdown-divider { border-top-color: var(--sv-line-subtle); margin: var(--sv-1) 0; }

/* Modals. */
.modal-backdrop.show { opacity: 1; background: rgb(6 20 51 / 0.45); }
.modal-content { border: 0; border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-e5); overflow: hidden; }
.modal-header { padding: var(--sv-5) var(--sv-6); border-bottom: 1px solid var(--sv-line-subtle); align-items: center; }
.modal-header .modal-title { font: 600 var(--sv-text-h3)/1.3 var(--sv-font-display); color: var(--sv-fg); }
.modal-body { padding: var(--sv-6); }
.modal-footer { padding: var(--sv-4) var(--sv-6); border-top: 1px solid var(--sv-line-subtle); gap: var(--sv-2); }
.modal-footer > * { margin: 0; }
.close { color: var(--sv-fg); text-shadow: none; opacity: 0.6; font-weight: 400; }
.close:hover { opacity: 1; }
.modal-localisation .modal-content { background: var(--sv-surface); }
.modal-localisation .modal-body h5, .modal-localisation .modal-body .h5 { color: var(--sv-fg); }
.modal-localisation .close { color: var(--sv-fg) !important; }
.item-selector .item { display: block; margin-bottom: var(--sv-2); padding: 10px 12px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); color: var(--sv-fg); font-size: var(--sv-text-small); }
.item-selector .item:hover { border-color: var(--sv-line-strong); text-decoration: none; }
.item-selector .item.active { border-color: var(--sv-primary); background: var(--sv-primary-soft); color: var(--sv-primary); }

/* Pagination, breadcrumb, progress, popover, tooltip. */
.pagination { gap: 4px; }
.page-link { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--sv-line) !important; border-radius: var(--sv-radius-sm) !important; color: var(--sv-fg); font-size: var(--sv-text-small); }
.page-link:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); }
.page-item.active .page-link { background: var(--sv-fg); border-color: var(--sv-fg) !important; color: #fff; }
.page-item.disabled .page-link { color: var(--sv-fg-muted); }
.breadcrumb { padding: 0; margin: 0; background: none; font-size: var(--sv-text-small); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sv-ink-300); }
.progress { height: 8px; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); }
.progress-bar { background: var(--sv-primary); }
.popover { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); box-shadow: var(--sv-shadow-e4); font-family: var(--sv-font-sans); }
.tooltip-inner { padding: 6px 10px; border-radius: var(--sv-radius-sm); background: var(--sv-ink-900); font: 500 var(--sv-text-micro)/1.4 var(--sv-font-display); }

/* Verification and network banners (WHMCS includes). */
.verification-banner, .network-issue-alert {
  padding: var(--sv-4) var(--sv-5);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-warning-soft);
  color: #5e2b00;
  font-size: var(--sv-text-small);
}
.verification-banner .container, .network-issue-alert .container { max-width: none; padding: 0; }
.verification-banner .row { align-items: center; }
.verification-banner i { color: var(--sv-warning-fill); margin-right: 6px; }
.verification-banner .btn { background: var(--sv-surface); }

/* Markdown editor (ticket replies). */
.md-editor { border: 1px solid var(--sv-line-input) !important; border-radius: var(--sv-radius-sm) !important; }
.md-editor > .md-header { background: var(--sv-canvas-secondary); border-bottom: 1px solid var(--sv-line) !important; border-radius: var(--sv-radius-sm) var(--sv-radius-sm) 0 0; }
.md-editor > textarea { background: var(--sv-surface) !important; font: 400 var(--sv-text-body)/1.55 var(--sv-font-sans) !important; padding: 12px 14px !important; }
.md-editor.active { border-color: var(--sv-primary) !important; box-shadow: 0 0 0 3px var(--sv-primary-soft-active) !important; }
.markdown-editor-status { color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }

/* Stock WHMCS pages we inherit: tidy their legacy widgets. */
.tiles { display: none; } /* replaced by the Serverlys dashboard */
.header-lined { margin-bottom: var(--sv-6); }
.header-lined h1 { margin: 0; }
.header-lined .breadcrumb { margin-top: var(--sv-2); }
.kb-search, .search-form { margin-bottom: var(--sv-6); }
.ticket-reply { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); }
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: var(--sv-3); width: 100%; }
.sidebar-menu-item-label { flex: 1; min-width: 0; }
.sidebar-menu-item-icon-wrapper { width: 20px; text-align: center; color: var(--sv-fg-secondary); }

/* WHMCS full-page overlay (payment processing etc.). */
#fullpage-overlay { background: rgb(255 255 255 / 0.85); }
#fullpage-overlay .msg { color: var(--sv-fg); font-family: var(--sv-font-display); }

/* Module output (e.g. cPanel overview) - keep their grid, bring them in-system. */
.module-client-area, .sv-module { font-size: var(--sv-text-small); }
.sv-module .card { box-shadow: none; }
.sv-module .card-header { padding: var(--sv-4) var(--sv-5); }
.sv-module .card-body { padding: var(--sv-5); }
.sv-module img { max-width: 100%; }
.sv-module .row { margin-left: -8px; margin-right: -8px; }
.sv-module .row > [class*="col"] { padding-left: 8px; padding-right: 8px; }

/* ==========================================================================
   8. UTILITIES, MOTION
   ========================================================================== */
.sv-sr-only, .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sv-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sv-mono { font-family: var(--sv-font-mono); font-size: 0.92em; }
.sv-muted { color: var(--sv-fg-muted); }
.sv-strong { color: var(--sv-fg); font-weight: 600; }
.sv-nowrap { white-space: nowrap; }
.sv-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-mt-0 { margin-top: 0 !important; }
.sv-mb-0 { margin-bottom: 0 !important; }
.sv-mt-4 { margin-top: var(--sv-4) !important; }
.sv-mt-6 { margin-top: var(--sv-6) !important; }
.sv-mb-4 { margin-bottom: var(--sv-4) !important; }
.sv-mb-6 { margin-bottom: var(--sv-6) !important; }
.sv-flex { display: flex; align-items: center; gap: var(--sv-2); }
.sv-flex--between { justify-content: space-between; }
.sv-flex--wrap { flex-wrap: wrap; }
/* WHMCS hides with .w-hidden and reveals either by removing the class or with
   jQuery .show() (an inline display style). Beat any display set on .btn etc.,
   but never an inline style, or WHMCS's own scripts cannot reveal anything. */
.w-hidden:not([style*="display"]), .hidden:not([style*="display"]) { display: none !important; }

/* Subtle arrival for content, not chrome (never above-the-fold hero text). */
@media (prefers-reduced-motion: no-preference) {
  .sv-rise { animation: sv-rise var(--sv-slow) var(--sv-ease-entrance) both; }
  .sv-rise--2 { animation-delay: 40ms; }
  .sv-rise--3 { animation-delay: 80ms; }
  @keyframes sv-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .sv-topbar, .sv-rail, .sv-context, .sv-foot, .sv-page-head__actions { display: none !important; }
  .sv-layout { display: block; }
  .sv-main { padding: 0; }
  body { background: #fff; }
}

/* Registration / checkout "prepend-icon" fields (stock WHMCS pattern). */
.prepend-icon { position: relative; }
.prepend-icon .field-icon { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--sv-fg-muted); z-index: 3; }
.prepend-icon .field { padding-left: 44px; }
.sv-auth .card { box-shadow: none; }
.sv-auth .card-body.p-4 { padding: var(--sv-6) !important; }
.sv-auth .card-title { margin-bottom: var(--sv-4); }

/* Custom file input (ticket attachments). */
.custom-file, .custom-file-input { height: 44px; }
.custom-file-label { height: 44px; padding: 0 14px; line-height: 42px; border-color: var(--sv-line-input); border-radius: var(--sv-radius-sm); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.custom-file-label::after { height: 42px; padding: 0 14px; line-height: 42px; background: var(--sv-canvas-secondary); color: var(--sv-fg); border-left-color: var(--sv-line); font-family: var(--sv-font-display); }
.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft-active); }

select.form-control:not([multiple]):not([size]) {
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--sv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}

/* ==========================================================================
   10. ORDER FORM - WHMCS standard_cart, redesigned from the theme layer.
   Scoped to #order-standard_cart. The cart's templates, JS, pricing,
   promotions, taxes, gateways and fraud checks are WHMCS's own, untouched.
   ========================================================================== */
#order-standard_cart { font-size: var(--sv-text-body); color: var(--sv-fg-secondary); }
#order-standard_cart > .row { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sv-6); }
#order-standard_cart .cart-sidebar { flex: 0 0 260px; width: auto; max-width: 260px; padding: 0; }
#order-standard_cart .cart-body { flex: 1 1 0; width: auto; min-width: 0; padding: 0; float: none; }
#order-standard_cart .secondary-cart-body { padding-left: 0; }
#order-standard_cart .secondary-cart-sidebar { padding-right: 0; }
@media (max-width: 991.98px) {
  #order-standard_cart .cart-sidebar { display: none; }
  #order-standard_cart .cart-body { flex-basis: 100%; }
}
#order-standard_cart .header-lined { margin: 0 0 var(--sv-6); padding: 0; border: 0; }
#order-standard_cart .header-lined h1, #order-standard_cart .font-size-36 {
  margin: 0; color: var(--sv-fg); font: 400 var(--sv-text-h1)/1.2 var(--sv-font-display); letter-spacing: -0.01em;
}
#order-standard_cart .header-lined p { margin: 6px 0 0; color: var(--sv-fg-secondary); }
#order-standard_cart .font-size-30, #order-standard_cart .font-size-24, #order-standard_cart .font-size-22 { color: var(--sv-fg); font-family: var(--sv-font-display); font-weight: 500; }

/* Category sidebar. */
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .cart-sidebar .panel { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); }
#order-standard_cart .cart-sidebar .card-header,
#order-standard_cart .cart-sidebar .panel-heading { padding: var(--sv-4) var(--sv-4) var(--sv-2); border: 0; background: none; }
#order-standard_cart .cart-sidebar .card-title,
#order-standard_cart .cart-sidebar .panel-title { color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: .08em; text-transform: uppercase; }
#order-standard_cart .cart-sidebar .card-title i, #order-standard_cart .cart-sidebar .card-minimise { display: none; }
#order-standard_cart .cart-sidebar .list-group-item { margin: 0 var(--sv-2) 2px; padding: 10px var(--sv-3); border: 0; border-radius: var(--sv-radius-md); color: var(--sv-fg); font: 500 var(--sv-text-small)/1.35 var(--sv-font-display); }
#order-standard_cart .cart-sidebar .list-group-item:hover { background: var(--sv-canvas-inset); }
#order-standard_cart .cart-sidebar .list-group-item.active { background: var(--sv-primary-soft); color: var(--sv-primary); font-weight: 600; }
#order-standard_cart .cart-sidebar .list-group { padding-bottom: var(--sv-2); }
#order-standard_cart .sidebar-collapsed { margin-bottom: var(--sv-5); padding: 0; background: none; }
#order-standard_cart .sidebar-collapsed .panel, #order-standard_cart .sidebar-collapsed .card { border: 0; }

/* Product selection - Serverlys plan cards. */
#order-standard_cart .products .row-eq-height { margin: 0 -8px; }
#order-standard_cart .products .row-eq-height > [class*="col-"] { padding: 0 8px; margin-bottom: var(--sv-4); }
#order-standard_cart .products .product {
  display: flex; flex-direction: column; height: 100%; margin: 0; padding: var(--sv-6);
  background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg);
  transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-normal) var(--sv-ease-hover);
}
#order-standard_cart .products .product:hover { border-color: var(--sv-line-strong); box-shadow: var(--sv-shadow-e3); }
#order-standard_cart .products .product header { margin: 0 0 var(--sv-3); padding: 0; background: none; color: var(--sv-fg); font: 500 20px/1.3 var(--sv-font-display); }
#order-standard_cart .products .product header .qty { position: static; display: inline-block; margin-left: 8px; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
#order-standard_cart .products .product div.product-desc { float: none; width: 100%; padding: 0; font-size: var(--sv-text-small); color: var(--sv-fg-secondary); }
#order-standard_cart .products .product div.product-desc p { margin-bottom: var(--sv-3); }
#order-standard_cart .products .product div.product-desc ul { margin: 0; padding: 0; list-style: none; }
#order-standard_cart .products .product div.product-desc li { position: relative; padding: 5px 0 5px 26px; border: 0; color: var(--sv-fg); }
#order-standard_cart .products .product div.product-desc li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}
#order-standard_cart .products .product .feature-value { color: var(--sv-fg); font-weight: 600; }
#order-standard_cart .products .product footer {
  float: none; width: 100%; margin: auto 0 0; padding-top: var(--sv-5); border-top: 1px solid var(--sv-line-subtle);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sv-3);
  font-size: var(--sv-text-small); text-align: left; color: var(--sv-fg-muted);
}
#order-standard_cart .products .product footer .product-pricing { line-height: 1.4; }
#order-standard_cart .products .product footer .product-pricing br:first-of-type { display: none; }
#order-standard_cart .products .product .price, #order-standard_cart .products .product div.product-pricing span.price { display: inline-block; color: var(--sv-fg); font: 500 28px/1.1 var(--sv-font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#order-standard_cart .products .product .btn-order-now { min-height: 44px; padding: 10px 20px; font-size: var(--sv-text-small); border-radius: var(--sv-radius-md); }
#order-standard_cart .products .product .btn-order-now i { display: none; }

/* Configure product / domains. */
#order-standard_cart .product-info { margin: 0 0 var(--sv-6); padding: var(--sv-5); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); font-size: var(--sv-text-small); }
#order-standard_cart .product-info .product-title { color: var(--sv-fg); font: 600 var(--sv-text-h3)/1.3 var(--sv-font-display); }
#order-standard_cart .sub-heading, #order-standard_cart .sub-heading-borderless { height: auto; margin: var(--sv-8) 0 var(--sv-4); border: 0; text-align: left; }
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span {
  display: block; padding: 0; background: none; color: var(--sv-fg); font: 500 var(--sv-text-h2)/1.3 var(--sv-font-display);
}
#order-standard_cart .field-container, #order-standard_cart .panel-addon, #order-standard_cart .domain-selection-options .option {
  border: 1px solid var(--sv-line) !important; border-radius: var(--sv-radius-lg) !important; background: var(--sv-surface) !important;
}
#order-standard_cart .domain-selection-options .option { margin-bottom: var(--sv-3); padding: var(--sv-4) var(--sv-5); }
#order-standard_cart .domain-selection-options .option-selected { border-color: var(--sv-primary) !important; background: var(--sv-primary-soft) !important; }
#order-standard_cart .panel-addon { overflow: hidden; }
#order-standard_cart .panel-addon .panel-add, #order-standard_cart .panel-addon .card-footer { background: var(--sv-canvas-secondary); color: var(--sv-fg); border-top: 1px solid var(--sv-line); }
#order-standard_cart .panel-addon-selected { border-color: var(--sv-primary) !important; }
#order-standard_cart .panel-addon-selected .panel-add, #order-standard_cart .panel-addon-selected .card-footer { background: var(--sv-primary); color: #fff; }
#order-standard_cart .field, #order-standard_cart .form-control { border-color: var(--sv-line-input); border-radius: var(--sv-radius-sm); }

/* Order summary - the sticky right-hand card. */
#order-standard_cart .order-summary { margin: 0 0 var(--sv-5); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); overflow: hidden; }
#order-standard_cart .order-summary h2 { padding: var(--sv-5) var(--sv-5) var(--sv-2); color: var(--sv-fg); font: 600 var(--sv-text-h3)/1.3 var(--sv-font-display); text-align: left; }
#order-standard_cart .summary-container { padding: var(--sv-2) var(--sv-5) var(--sv-5); background: none; font-size: var(--sv-text-small); color: var(--sv-fg); }
#order-standard_cart .order-summary .product-name { color: var(--sv-fg); font-weight: 600; }
#order-standard_cart .order-summary .product-group, #order-standard_cart .order-summary .subtotal, #order-standard_cart .order-summary .recurring-charges { color: var(--sv-fg-secondary); }
#order-standard_cart .order-summary .total-due-today { margin-top: var(--sv-3); padding-top: var(--sv-3); border-top: 1px solid var(--sv-line); }
#order-standard_cart .order-summary .total-due-today .amt { color: var(--sv-fg); font: 500 28px/1.1 var(--sv-font-display); font-variant-numeric: tabular-nums; }
#order-standard_cart .order-summary .btn-checkout, #order-standard_cart .order-summary .btn-continue-shopping { width: 100%; min-height: 48px; font-size: var(--sv-text-body); }
#order-standard_cart .order-summary .loader { color: var(--sv-fg-muted); }

/* View cart. */
#order-standard_cart .view-cart-items-header { padding: 12px var(--sv-5); background: var(--sv-canvas-secondary); color: var(--sv-fg-muted); border: 1px solid var(--sv-line); border-bottom: 0; border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0; font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: .06em; text-transform: uppercase; }
#order-standard_cart .view-cart-items { border: 1px solid var(--sv-line); border-top: 0; border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg); overflow: hidden; }
#order-standard_cart .view-cart-items .item { padding: var(--sv-4) var(--sv-5); border-bottom: 1px solid var(--sv-line-subtle); font-size: var(--sv-text-small); }
#order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
#order-standard_cart .view-cart-items .item-title { color: var(--sv-fg); font: 600 var(--sv-text-body)/1.35 var(--sv-font-display); }
#order-standard_cart .view-cart-items .item-group, #order-standard_cart .view-cart-items .item-domain { color: var(--sv-fg-muted); }
#order-standard_cart .view-cart-items .item-price { color: var(--sv-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
#order-standard_cart .view-cart-items .item-price .cycle { color: var(--sv-fg-muted); font-weight: 400; }
#order-standard_cart .btn-remove-from-cart { color: var(--sv-fg-muted); }
#order-standard_cart .btn-remove-from-cart:hover { color: var(--sv-danger); }
#order-standard_cart .empty-cart { margin: var(--sv-3) 0; }
#order-standard_cart .view-cart-empty { padding: var(--sv-10) var(--sv-5); color: var(--sv-fg-secondary); text-align: center; }
#order-standard_cart .view-cart-tabs .nav-tabs { padding-left: 0; font-size: var(--sv-text-small); }
#order-standard_cart .view-cart-tabs .tab-content { padding: var(--sv-5); border: 1px solid var(--sv-line); border-top: 0; border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg); background: var(--sv-surface); }
#order-standard_cart .view-cart-promotion-code { padding: var(--sv-3) var(--sv-4); border: 1px dashed var(--sv-line-strong); border-radius: var(--sv-radius-md); background: var(--sv-canvas-secondary); text-align: left; }

/* Checkout. */
#order-standard_cart .account-select-container .account { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); padding: var(--sv-3) var(--sv-4); margin-bottom: var(--sv-2); }
#order-standard_cart .account-select-container .account.active { border-color: var(--sv-primary); background: var(--sv-primary-soft); }
#order-standard_cart #paymentGatewaysContainer, #order-standard_cart .cc-input-container { padding: var(--sv-5); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); }
#order-standard_cart .cc-input-container { margin-top: var(--sv-3); }
#order-standard_cart #paymentGatewaysContainer label { display: inline-flex; align-items: center; gap: 8px; margin: 4px 16px 4px 0; padding: 10px 14px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); font-weight: 500; }
#order-standard_cart .checkout-security-msg { padding: var(--sv-4) var(--sv-5); border: 0; border-radius: var(--sv-radius-lg); background: var(--sv-success-soft); color: #0a4f30; }
#order-standard_cart #btnCompleteOrder { min-height: 52px; padding: 12px 32px; font-size: 1rem; }
#order-standard_cart .apply-credit-container { padding: var(--sv-4) var(--sv-5); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); }

/* Domain search results. */
#order-standard_cart .domain-checker-container { border-radius: var(--sv-radius-xl); background: var(--sv-canvas-dark) !important; padding: var(--sv-8) var(--sv-6); }
#order-standard_cart .domain-checker-bg { background: none !important; }
#order-standard_cart .domain-checker-container .input-group-box { background: var(--sv-surface); border-radius: var(--sv-radius-md); padding: 6px; }
#order-standard_cart .domain-checker-container .form-control { border: 0; height: 48px; font-size: 1rem; }
#order-standard_cart .domain-checker-container .btn { min-height: 48px; }
#order-standard_cart .domain-checker-result-headline { color: var(--sv-fg); font-family: var(--sv-font-display); }
#order-standard_cart .domain-checker-available { color: var(--sv-success); }
#order-standard_cart .domain-checker-unavailable { color: var(--sv-danger); }
#order-standard_cart .domain-lookup-primary-results, #order-standard_cart .suggested-domains, #order-standard_cart .spotlight-tlds .spotlight-tld {
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface);
}
#order-standard_cart .suggested-domains .panel-heading, #order-standard_cart .suggested-domains .card-header { background: var(--sv-canvas-secondary); color: var(--sv-fg); font-weight: 600; }
#order-standard_cart .domain-suggestion { border-color: var(--sv-line-subtle); }
#order-standard_cart .domain-price .price { color: var(--sv-fg); font-weight: 600; }

/* Order complete. */
#order-standard_cart .order-confirmation { padding: var(--sv-6); border: 0; border-radius: var(--sv-radius-lg); background: var(--sv-success-soft); color: #0a4f30; font-family: var(--sv-font-display); }
#order-standard_cart .order-confirmation span { color: var(--sv-fg); font-weight: 600; }

/* MarketConnect promos in the cart. */
#order-standard_cart .mc-promo { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); overflow: hidden; }
#order-standard_cart .mc-promo .header { background: var(--sv-canvas-secondary) !important; color: var(--sv-fg) !important; }
/* .sv-main__inner also carries .container: whmcs.js measures $('.container')
   to decide whether to collapse sidebar panels, and collapses everything
   when no .container exists. */
.sv-main__inner.container { max-width: var(--sv-content-max); padding-left: 0; padding-right: 0; }
.sv-main--wide .sv-main__inner.container { max-width: 1440px; }
@media (min-width: 1200px) { #order-standard_cart .sidebar-collapsed { display: none !important; } }
#order-standard_cart .cart-sidebar .list-group-item { width: auto; }
.sv-main--wide .sv-foot { max-width: 1440px; }
.item-selector button.item { width: 100%; background: var(--sv-surface); text-align: left; font: inherit; }
.sv-main section#main-body { padding: 0; min-height: 0; }

/* Disabled primary actions: grey, never a faded brand blue (50% #0000ff
   over white reads lavender - the colour the site rules out). */
.btn-primary:disabled, .btn-primary.disabled, .btn-success:disabled, .btn-success.disabled,
.sv-btn--primary:disabled, .sv-btn--primary[aria-disabled="true"] {
  background: var(--sv-ink-200) !important; border-color: var(--sv-ink-200) !important; color: var(--sv-ink-600) !important; opacity: 1 !important;
}

/* iCheck controls (cart/checkout): drawn in CSS so they use the brand blue,
   replacing the stock sprite's different blue. State classes are iCheck's own. */
.icheckbox_square-blue, .iradio_square-blue {
  width: 20px !important; height: 20px !important; background: var(--sv-surface) !important;
  border: 1.5px solid var(--sv-line-input); border-radius: 5px; box-sizing: border-box; vertical-align: -5px;
}
.iradio_square-blue { border-radius: 50%; }
.icheckbox_square-blue.hover, .iradio_square-blue.hover { border-color: var(--sv-ink-600); }
.icheckbox_square-blue.checked {
  background: var(--sv-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 14px !important;
  border-color: var(--sv-primary);
}
.iradio_square-blue.checked { border: 6px solid var(--sv-primary); }
.icheckbox_square-blue.disabled, .iradio_square-blue.disabled { background: var(--sv-canvas-inset) !important; border-color: var(--sv-line); }

/* View cart / checkout two-column: sized by flex, not the stock percentages. */
#order-standard_cart .secondary-cart-body { flex: 1 1 0; width: auto; min-width: 0; float: none; }
#order-standard_cart .secondary-cart-sidebar { flex: 0 0 340px; width: auto; max-width: 340px; float: none; }
@media (max-width: 991.98px) {
  #order-standard_cart .secondary-cart-body, #order-standard_cart .secondary-cart-sidebar { flex-basis: 100%; max-width: none; margin: 0; }
}
#order-standard_cart .cart-body .row { margin-left: 0; margin-right: 0; }
#order-standard_cart .empty-cart .btn, #order-standard_cart #btnEmptyCart { min-height: 32px; padding: 5px 12px; background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-fg-secondary); border-radius: var(--sv-radius-sm); font-size: 13px; }
#order-standard_cart .empty-cart .btn:hover, #order-standard_cart #btnEmptyCart:hover { border-color: rgb(190 16 37 / 0.35); color: var(--sv-danger); background: var(--sv-danger-soft); }

/* ==========================================================================
   11. HOME
   ========================================================================== */
.sv-home-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sv-5); padding: var(--sv-6) 0 var(--sv-10); text-align: center; }
.sv-home-hero__title { margin: 0; font: 400 clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem)/1.2 var(--sv-font-display); letter-spacing: -0.01em; color: var(--sv-fg); }
.sv-ask {
  width: min(720px, 100%); padding: var(--sv-4) var(--sv-4) var(--sv-3) var(--sv-5);
  background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-xl);
  box-shadow: var(--sv-shadow-e2); text-align: left;
  transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-fast) var(--sv-ease-hover);
}
.sv-ask:focus-within { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft-active), var(--sv-shadow-e2); }
.sv-ask .sv-ask__input, .sv-ask .sv-ask__input:focus {
  display: block; width: 100%; min-height: 52px; height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--sv-fg); font: 400 1.0625rem/1.5 var(--sv-font-sans); resize: none; outline: none !important;
}
.sv-ask__input::placeholder { color: var(--sv-fg-muted); }
.sv-ask__bar { display: flex; align-items: center; gap: var(--sv-3); margin-top: var(--sv-2); }
.sv-ask__plus { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--sv-fg); }
.sv-ask__plus:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); }
.sv-ask__hint { flex: 1; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-ask__send { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sv-primary); color: #fff; }
.sv-ask__send:hover { background: var(--sv-primary-hover); }
.sv-ask__send-icon { transform: rotate(-90deg); }
.sv-chips { list-style: none; padding: 0; }
.sv-chips--center { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sv-3); margin: 0; max-width: 760px; }
.sv-chip--lg { height: 40px; padding: 0 16px; gap: 8px; background: var(--sv-surface); border-color: var(--sv-line); color: var(--sv-fg); font-size: var(--sv-text-small); box-shadow: var(--sv-shadow-e1); }
.sv-chip--lg:hover { border-color: var(--sv-line-strong); color: var(--sv-fg); }

.sv-banner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: var(--sv-6);
  margin-bottom: var(--sv-10); padding: var(--sv-8) var(--sv-8);
  border-radius: var(--sv-radius-xl); overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 85% 30%, #1f55ff 0%, #0b2080 38%, #061433 75%);
}
.sv-banner[hidden] { display: none; }
.sv-banner__title { margin: 0; color: #fff; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.25 var(--sv-font-display); max-width: 560px; }
.sv-banner__body { margin: var(--sv-3) 0 var(--sv-6); color: #dedee2; max-width: 520px; }
.sv-banner__cta { background: #fff; color: var(--sv-fg); }
.sv-banner__cta:hover { background: var(--sv-ink-100); color: var(--sv-fg); }
.sv-banner__art { position: relative; height: 180px; }
.sv-banner__card {
  position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(-4deg); z-index: 1;
  display: flex; align-items: center; gap: 14px; width: 330px; max-width: 100%; padding: 18px 20px;
  background: #fff; border-radius: var(--sv-radius-lg); box-shadow: 0 20px 40px rgb(0 0 0 / 0.3); color: var(--sv-fg);
}
.sv-banner__card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--sv-radius-md); background: var(--sv-primary-soft); color: var(--sv-primary); flex: none; }
.sv-banner__card-text { flex: 1; color: var(--sv-fg-muted); font: 500 1.125rem/1 var(--sv-font-display); }
.sv-banner__card-tld { color: var(--sv-primary); font: 600 2rem/1 var(--sv-font-display); }
.sv-banner__orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.sv-banner__orb--1 { width: 120px; height: 120px; right: 0; top: -20px; background: radial-gradient(circle at 35% 35%, #94b4ff, #1f55ff 60%, transparent 70%); opacity: .55; }
.sv-banner__orb--2 { width: 70px; height: 70px; left: 10%; bottom: -10px; background: radial-gradient(circle at 35% 35%, #5f8bff, #0000ff 60%, transparent 70%); opacity: .5; }
.sv-banner__toggle { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--sv-radius-sm); background: rgb(0 0 0 / 0.35); color: #fff; }
.sv-banner__toggle:hover { background: rgb(0 0 0 / 0.55); }
@media (max-width: 991.98px) { .sv-banner { grid-template-columns: minmax(0, 1fr); padding: var(--sv-6); } .sv-banner__art { display: none; } }

.sv-section__head--start { justify-content: flex-start; align-items: center; }
.sv-badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--sv-radius-full); background: var(--sv-red-600); color: #fff; font: 600 12px/1 var(--sv-font-display); }
.sv-row__icon--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-row__icon--warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.sv-row__icon--info { background: var(--sv-info-soft); color: var(--sv-info); }
.sv-row__cta { position: relative; z-index: 1; pointer-events: none; flex: none; }
@media (max-width: 575.98px) { .sv-row__cta { margin-left: 48px; } }

/* ==========================================================================
   STORE - plan grid (products.tpl)
   ========================================================================== */
#order-standard_cart.sv-store { max-width: 1280px; margin: 0 auto; }
.sv-store__hero { display: flex; flex-direction: column; align-items: center; gap: var(--sv-4); padding: var(--sv-4) 0 var(--sv-8); text-align: center; }
.sv-store__guarantee { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: var(--sv-radius-full); background: var(--sv-surface); box-shadow: var(--sv-shadow-e1); color: var(--sv-fg); font: 500 var(--sv-text-body)/1 var(--sv-font-display); }
.sv-store__guarantee:hover { color: var(--sv-fg); text-decoration: none; box-shadow: var(--sv-shadow-e2); }
.sv-store__guarantee-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--sv-radius-sm); background: var(--sv-green-500); color: #fff; }
.sv-store__title { margin: 0; color: var(--sv-fg); font: 400 clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem)/1.15 var(--sv-font-display); letter-spacing: -0.015em; max-width: 900px; }
.sv-store__tagline { margin: 0; color: var(--sv-fg-secondary); font-size: 1.0625rem; max-width: 640px; }

.sv-store__panel { padding: var(--sv-3); background: var(--sv-surface); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-e1); }
.sv-store__tabs { display: flex; gap: 4px; margin: var(--sv-2) var(--sv-2) var(--sv-4); padding: 4px; width: max-content; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; background: var(--sv-canvas-inset); border-radius: var(--sv-radius-md); }
.sv-store__tabs::-webkit-scrollbar { display: none; }
.sv-store__tab { flex: none; padding: 10px 16px; border-radius: 10px; color: var(--sv-fg-secondary); font: 500 var(--sv-text-body)/1 var(--sv-font-display); white-space: nowrap; }
.sv-store__tab:hover { color: var(--sv-fg); text-decoration: none; }
.sv-store__tab.is-active { background: var(--sv-surface); color: var(--sv-fg); font-weight: 600; box-shadow: var(--sv-shadow-e1); }

#order-standard_cart .sv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sv-3); }
#order-standard_cart .products .product.sv-plan {
  display: flex; flex-direction: column; gap: 0; height: auto; margin: 0; padding: var(--sv-5) var(--sv-5) var(--sv-6);
  background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: none; color: var(--sv-fg);
}
#order-standard_cart .products .product.sv-plan:hover { box-shadow: var(--sv-shadow-e3); }
.sv-plan__head { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--sv-2); min-height: 32px; padding-right: 0; }
.sv-plan__name { flex: 1; margin: 0; color: inherit; font: 500 1.375rem/1.3 var(--sv-font-display); }
.sv-plan__badge { flex: none; padding: 4px 10px; border-radius: var(--sv-radius-sm); background: var(--sv-primary); color: #fff; font: 600 var(--sv-text-micro)/1.3 var(--sv-font-display); }
.sv-plan__stock { width: 100%; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-plan__price { margin: var(--sv-5) 0 var(--sv-5); line-height: 1.1; }
.sv-plan__from { display: block; margin-bottom: 4px; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
#order-standard_cart .products .product .sv-plan__amount,
#order-standard_cart .products .product div.product-pricing span.price.sv-plan__amount { color: inherit; font: 500 2.25rem/1.1 var(--sv-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sv-plan__cycle { color: var(--sv-fg-secondary); font: 400 1rem/1 var(--sv-font-display); }
#order-standard_cart .products .product .btn.sv-plan__cta {
  display: flex; width: 100%; min-height: 48px; justify-content: center;
  background: var(--sv-surface); color: var(--sv-fg); border: 1.5px solid var(--sv-line-strong); border-radius: var(--sv-radius-md);
  font: 600 1rem/1 var(--sv-font-display);
}
#order-standard_cart .products .product .btn.sv-plan__cta:hover { border-color: var(--sv-fg); background: var(--sv-surface); color: var(--sv-fg); }
.sv-plan__note { margin: var(--sv-3) 0 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); text-align: center; }
#order-standard_cart .products .product div.product-desc.sv-plan__body { float: none; width: 100%; margin-top: var(--sv-5); padding: 0; color: inherit; font-size: var(--sv-text-body); }
.sv-plan__desc { margin: 0 0 var(--sv-4); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
#order-standard_cart .products .product .sv-plan__features { margin: 0; padding: 0; list-style: none; }
#order-standard_cart .products .product .sv-plan__features li { position: relative; padding: 7px 0 7px 30px; border: 0; color: inherit; font-size: 0.9375rem; line-height: 1.45; }
#order-standard_cart .products .product .sv-plan__features li::before {
  content: ""; position: absolute; left: 2px; top: 10px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a49' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}
#order-standard_cart .products .product .sv-plan__features .feature-value { font-weight: 600; color: inherit; }

/* Featured (admin "Featured" flag) - the brand card. */
#order-standard_cart .products .product.sv-plan--featured {
  border-color: transparent; color: #fff;
  background: radial-gradient(130% 90% at 100% 0%, #1f55ff 0%, #0b2080 45%, #061433 100%);
  box-shadow: var(--sv-shadow-e3);
}
.sv-plan--featured .sv-plan__badge { background: #fff; color: var(--sv-primary); }
.sv-plan--featured .sv-plan__cycle, .sv-plan--featured .sv-plan__from, .sv-plan--featured .sv-plan__desc, .sv-plan--featured .sv-plan__note { color: #c6c6cc; }
#order-standard_cart .products .product.sv-plan--featured .btn.sv-plan__cta { background: #fff; border-color: #fff; color: var(--sv-fg); }
#order-standard_cart .products .product.sv-plan--featured .btn.sv-plan__cta:hover { background: var(--sv-ink-100); }
#order-standard_cart .products .product.sv-plan--featured .sv-plan__features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394b4ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.sv-store__empty { padding: var(--sv-8); color: var(--sv-fg-muted); text-align: center; }
.sv-store__help { margin: var(--sv-6) 0 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); text-align: center; }
@media (max-width: 575.98px) {
  .sv-store__panel { padding: var(--sv-2); border-radius: var(--sv-radius-lg); }
  .sv-store__tabs { margin: var(--sv-1) var(--sv-1) var(--sv-3); }
}

/* Plan card specificity over stock standard_cart header/desc rules. */
#order-standard_cart .products .product.sv-plan header.sv-plan__head { margin: 0; padding: 0; background: none; border-radius: 0; color: inherit; font: inherit; }
#order-standard_cart .products .product.sv-plan .sv-plan__name { color: inherit; }
#order-standard_cart .products .product.sv-plan header .sv-plan__badge { position: static; font: 600 var(--sv-text-micro)/1.3 var(--sv-font-display); padding: 4px 10px; }
#order-standard_cart .products .product.sv-plan .sv-plan__cycle { display: block; margin-top: 6px; font-size: var(--sv-text-small); }
#order-standard_cart .products .product.sv-plan div.product-desc li { color: inherit; }
#order-standard_cart .products .product.sv-plan--featured .sv-plan__cycle,
#order-standard_cart .products .product.sv-plan--featured .sv-plan__desc,
#order-standard_cart .products .product.sv-plan--featured .sv-plan__from { color: #c6c6cc; }

/* ==========================================================================
   FOCUSED CHECKOUT - domain search, cart, configure, checkout
   ========================================================================== */
body.sv-layout-checkout { background: var(--sv-panel-bg, #f4f4f6); }
.sv-topbar--checkout { height: 80px; padding: 0 40px; background: #fff; color: var(--sv-fg); box-shadow: 0 1px 0 var(--sv-line); }
.sv-topbar--checkout .sv-logo img { height: 34px; }
.sv-topbar--checkout .sv-topbar__actions { gap: var(--sv-4); }
.sv-checkout-who { color: var(--sv-fg); font: 400 1rem/1 var(--sv-font-sans); }
.sv-checkout-link { color: var(--sv-primary); font: 600 1rem/1 var(--sv-font-display); }
.sv-topbar--checkout .sv-iconbtn { color: var(--sv-fg); }
.sv-topbar--checkout .sv-iconbtn:hover { background: var(--sv-canvas-inset); color: var(--sv-fg); }
.sv-topbar--checkout .sv-iconbtn__count { box-shadow: 0 0 0 2px #fff; }
.sv-topbar--checkout .sv-sera-btn { color: var(--sv-fg); border-color: var(--sv-primary); }
.sv-topbar--checkout .sv-sera-btn .sv-icon { color: var(--sv-primary); }
.sv-topbar--checkout .sv-sera-btn:hover, .sv-topbar--checkout .sv-sera-btn[aria-expanded="true"] { background: var(--sv-primary-soft); }
.sv-layout--checkout { display: block; margin: 0; border-radius: 0; background: var(--sv-panel-bg, #f4f4f6); min-height: calc(100vh - 80px); }
.sv-layout--checkout .sv-main { padding: var(--sv-10) var(--sv-6) var(--sv-12); }
.sv-layout--checkout .sv-main__inner.container { max-width: 1260px; }
.sv-layout--checkout #order-standard_cart .cart-sidebar,
.sv-layout--checkout #order-standard_cart .sidebar-collapsed { display: none !important; }
.sv-layout--checkout #order-standard_cart .cart-body { flex: 1 1 100%; max-width: 100%; width: 100%; }
.sv-layout--checkout #order-standard_cart .header-lined h1 { font: 600 1.375rem/1.3 var(--sv-font-display); letter-spacing: 0; }
@media (max-width: 767.98px) {
  .sv-topbar--checkout { height: 64px; padding: 0 var(--sv-4); }
  .sv-topbar--checkout .sv-logo img { height: 26px; }
  .sv-layout--checkout .sv-main { padding: var(--sv-6) var(--sv-4) var(--sv-10); }
}

/* --- Domain search -------------------------------------------------------- */
.sv-cart-hero { padding: var(--sv-10) 0 var(--sv-8); text-align: center; }
.sv-cart-hero__title { margin: 0; color: var(--sv-fg); font: 400 clamp(2.5rem, 1.8rem + 2.8vw, 4.25rem)/1.05 var(--sv-font-display); letter-spacing: -0.03em; }
.sv-cart-hero__lede { margin: var(--sv-4) auto 0; max-width: 640px; color: var(--sv-fg-secondary); font-size: 1.0625rem; }
#order-standard_cart .domain-checker-container { max-width: 680px; margin: 0 auto var(--sv-12); padding: 0; background: none !important; border-radius: 0; }
#order-standard_cart .domain-checker-container .domain-checker-bg { padding: 0; background: none !important; }
#order-standard_cart .domain-checker-container .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; padding: 0; }
#order-standard_cart .domain-checker-container .input-group-box {
  display: flex; align-items: center; padding: 6px 6px 6px 52px; position: relative;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101011' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E") no-repeat 20px center / 22px;
  border: 2px solid var(--sv-brand-200); border-radius: var(--sv-radius-full); box-shadow: 0 0 0 4px var(--sv-brand-50);
}
#order-standard_cart .domain-checker-container .input-group-box:focus-within { border-color: var(--sv-primary); }
#order-standard_cart .domain-checker-container .input-group-box .form-control,
#order-standard_cart .domain-checker-container .input-group-box textarea { height: 52px; border: 0 !important; box-shadow: none !important; background: transparent; padding: 0 8px 0 0; font: 400 1.25rem/1.2 var(--sv-font-sans); }
#order-standard_cart .domain-checker-container .input-group-box .btn { min-height: 52px; padding: 0 26px; border-radius: var(--sv-radius-full) !important; font-size: 1rem; }
#order-standard_cart .domain-checker-container .input-group-box .btn i { display: none; }

#order-standard_cart #DomainSearchResults { position: relative; max-width: 1310px; margin: 0 auto; }
#order-standard_cart .primary-domain-header {
  position: absolute; top: 32px; left: 32px; z-index: 1; display: inline-block; padding: 4px 10px;
  border-radius: var(--sv-radius-sm); background: var(--sv-green-600); color: #fff; font: 600 var(--sv-text-small)/1.3 var(--sv-font-display);
}
#order-standard_cart #primarySuggestionHeading { background: var(--sv-primary); }
#order-standard_cart .domain-checker-result-headline,
#order-standard_cart #searchDomainInfo {
  margin: 0 0 var(--sv-5); padding: 76px 32px 32px; background: var(--sv-ink-100); border-radius: var(--sv-radius-xl);
  text-align: left; color: var(--sv-fg); font-family: var(--sv-font-display);
}
#order-standard_cart #primaryLookupResult { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-4); }
#order-standard_cart #primaryLookupResult.w-hidden { display: none; }
#order-standard_cart #primaryLookupResult > p { margin: 0; }
#order-standard_cart #primaryLookupResult .domain-available,
#order-standard_cart #primaryLookupResult .domain-unavailable,
#order-standard_cart #primaryLookupResult .domain-invalid,
#order-standard_cart #primaryLookupResult .domain-tld-unavailable { flex: 1 1 360px; font: 500 1.5rem/1.3 var(--sv-font-display); color: var(--sv-fg); }
#order-standard_cart #primaryLookupResult .domain-unavailable, #order-standard_cart #primaryLookupResult .domain-invalid { color: var(--sv-danger); }
#order-standard_cart #primaryLookupResult .domain-price { display: flex; align-items: center; gap: var(--sv-5); }
#order-standard_cart .domain-price .price { color: var(--sv-fg); font: 600 1.625rem/1 var(--sv-font-display); font-variant-numeric: tabular-nums; }
#order-standard_cart #primaryLookupResult .btn-add-to-cart { min-height: 56px; padding: 0 30px; border-radius: var(--sv-radius-md); font: 600 1.125rem/1 var(--sv-font-display); }
#order-standard_cart .domain-lookup-loader { color: var(--sv-fg-muted); }

#order-standard_cart .spotlight-tlds { margin: 0 0 var(--sv-6); padding: 0; background: none; border: 0; }
#order-standard_cart .spotlight-tlds-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sv-3); }
#order-standard_cart .spotlight-tld-container { width: auto !important; float: none; padding: 0; }
#order-standard_cart .spotlight-tld {
  height: auto; min-height: 0; padding: var(--sv-5); background: #fff; border: 0 !important; border-radius: var(--sv-radius-lg);
  color: var(--sv-primary); font: 500 1.375rem/1.2 var(--sv-font-display); text-align: left;
}
#order-standard_cart .spotlight-tld .available.price { display: block; margin: var(--sv-3) 0; color: var(--sv-fg); font: 600 1.25rem/1 var(--sv-font-display); }
#order-standard_cart .spotlight-tld .btn { width: 100%; min-height: 48px; border: 1.5px solid var(--sv-primary); border-radius: var(--sv-radius-md); background: #fff; color: var(--sv-primary); font: 600 1rem/1 var(--sv-font-display); }
#order-standard_cart .spotlight-tld .btn:hover { background: var(--sv-primary-soft); }
#order-standard_cart .spotlight-tld .btn.unavailable, #order-standard_cart .spotlight-tld .btn.invalid { border-color: var(--sv-line); color: var(--sv-fg-muted); }

#order-standard_cart .suggested-domains { margin-top: var(--sv-6); padding: var(--sv-2) var(--sv-6) var(--sv-4); background: #fff; border: 0; border-radius: var(--sv-radius-xl); }
#order-standard_cart .suggested-domains .panel-heading, #order-standard_cart .suggested-domains .card-header { padding: var(--sv-5) 0 var(--sv-3); background: none; border: 0; color: var(--sv-fg); font: 600 1.25rem/1.3 var(--sv-font-display); }
#order-standard_cart .domain-suggestion { display: flex; align-items: center; gap: var(--sv-4); padding: var(--sv-4) 0; border: 0 !important; border-top: 1px solid var(--sv-line-subtle) !important; border-radius: 0 !important; background: none; font: 500 1.125rem/1.3 var(--sv-font-display); color: var(--sv-fg); }
#order-standard_cart .domain-suggestion .extension { color: var(--sv-primary); }
#order-standard_cart .domain-suggestion .actions { margin-left: auto; display: flex; align-items: center; gap: var(--sv-4); }
#order-standard_cart .domain-suggestion .price { color: var(--sv-fg); font-weight: 600; }
#order-standard_cart .domain-suggestion .btn-add-to-cart { min-height: 44px; padding: 0 22px; border: 1.5px solid var(--sv-primary); border-radius: var(--sv-radius-md); background: #fff; color: var(--sv-primary); font-weight: 600; }
#order-standard_cart .domain-suggestion .btn-add-to-cart:hover { background: var(--sv-primary-soft); }
#order-standard_cart .domain-suggestion .btn-add-to-cart.checkout, #order-standard_cart .btn-add-to-cart .added { color: inherit; }
#order-standard_cart .more-suggestions { padding: var(--sv-4) 0 0; background: none; border: 0; }

#order-standard_cart .domain-pricing h4 { margin: var(--sv-10) 0 var(--sv-4); color: var(--sv-fg); font: 600 1.25rem/1.3 var(--sv-font-display); }
#order-standard_cart .tld-filters { display: flex; flex-wrap: wrap; gap: var(--sv-3); margin-bottom: var(--sv-5); }
#order-standard_cart .tld-filters a.badge {
  height: 44px; padding: 0 18px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-full);
  background: #fff; color: var(--sv-fg); font: 500 1rem/42px var(--sv-font-display);
}
#order-standard_cart .tld-filters a.badge:hover { border-color: var(--sv-line-strong); text-decoration: none; }
#order-standard_cart .tld-filters a.badge.badge-success, #order-standard_cart .tld-filters a.badge.active { background: var(--sv-ink-100); border-color: var(--sv-line-strong); }
#order-standard_cart .domain-pricing .bg-white { overflow: hidden; border-radius: var(--sv-radius-lg); }
#order-standard_cart .tld-pricing-header { padding: var(--sv-3) 0; background: var(--sv-ink-50); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: .06em; text-transform: uppercase; }
#order-standard_cart .tld-row { padding: var(--sv-3) 0; border-top: 1px solid var(--sv-line-subtle); color: var(--sv-fg); }
#order-standard_cart .featured-tld { border-radius: var(--sv-radius-lg); overflow: hidden; }

/* --- Cart --------------------------------------------------------------------- */
#order-standard_cart .view-cart-items-header { display: none; }
#order-standard_cart .view-cart-items { padding: var(--sv-2) var(--sv-6); background: #fff; border: 0; border-radius: var(--sv-radius-xl); }
#order-standard_cart .view-cart-items .item { padding: var(--sv-6) 0; border-bottom: 1px solid var(--sv-line-subtle); background: none; }
#order-standard_cart .view-cart-items .item-title { display: block; color: var(--sv-fg); font: 600 1.125rem/1.35 var(--sv-font-display); }
#order-standard_cart .view-cart-items .item-title .btn-link { margin-left: 6px; font-size: var(--sv-text-small); font-weight: 500; }
#order-standard_cart .view-cart-items .item-group, #order-standard_cart .view-cart-items .item-domain { display: block; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
#order-standard_cart .view-cart-items .item-price { text-align: right; color: var(--sv-fg); font: 600 1.375rem/1.2 var(--sv-font-display); }
#order-standard_cart .view-cart-items .item-price .cycle, #order-standard_cart .view-cart-items .item-price .renewal { display: block; margin-top: 4px; color: var(--sv-fg-secondary); font: 400 var(--sv-text-small)/1.4 var(--sv-font-sans); }
#order-standard_cart .view-cart-items .item-price .dropdown-toggle { min-height: 44px; margin-top: var(--sv-2); padding: 0 16px; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-md); background: #fff; font-size: var(--sv-text-small); }
#order-standard_cart .empty-cart { margin: var(--sv-3) 0 var(--sv-6); text-align: right; }
#order-standard_cart .view-cart-tabs { margin-top: var(--sv-6); }
#order-standard_cart .view-cart-tabs .nav-tabs { border: 0; gap: var(--sv-2); }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link { padding: 10px 16px; border: 0; border-radius: var(--sv-radius-md) var(--sv-radius-md) 0 0; background: none; color: var(--sv-fg-secondary); }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active { background: #fff; color: var(--sv-fg); }
#order-standard_cart .view-cart-tabs .tab-content { padding: var(--sv-6); border: 0; border-radius: 0 var(--sv-radius-xl) var(--sv-radius-xl) var(--sv-radius-xl); background: #fff; }

#order-standard_cart .secondary-cart-sidebar { flex: 0 0 420px; max-width: 420px; }
#order-standard_cart .order-summary { padding: var(--sv-6) var(--sv-6) var(--sv-5); background: #fff; border: 0; border-radius: var(--sv-radius-xl); box-shadow: none; }
#order-standard_cart .order-summary h2 { padding: 0 0 var(--sv-4); color: var(--sv-fg); font: 600 1.375rem/1.3 var(--sv-font-display); text-align: left; }
#order-standard_cart .order-summary .summary-container { padding: 0; font-size: 1rem; color: var(--sv-fg); }
#order-standard_cart .order-summary .subtotal, #order-standard_cart .order-summary .bordered-totals > div, #order-standard_cart .order-summary .recurring-totals { padding: 8px 0; color: var(--sv-fg); }
#order-standard_cart .order-summary .bordered-totals { margin: var(--sv-2) 0; padding: var(--sv-2) 0; border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line); }
#order-standard_cart .order-summary .recurring-charges { color: var(--sv-fg-secondary); text-align: right; font-size: var(--sv-text-small); }
#order-standard_cart .order-summary .total-due-today { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: var(--sv-3); margin: var(--sv-3) 0 var(--sv-4); padding-top: var(--sv-4); border-top: 1px solid var(--sv-line); text-align: left; }
#order-standard_cart .order-summary .total-due-today span:last-child { color: var(--sv-fg); font: 600 1.375rem/1.2 var(--sv-font-display); }
#order-standard_cart .order-summary .total-due-today .amt { color: var(--sv-fg); font: 600 1.375rem/1.2 var(--sv-font-display); }
.sv-coupon-link { display: inline-block; margin-bottom: var(--sv-5); color: var(--sv-primary); font: 600 1.0625rem/1.3 var(--sv-font-display); }
#order-standard_cart .order-summary .text-right { text-align: left !important; }
#order-standard_cart .order-summary .btn-checkout { display: flex; width: 100%; min-height: 56px; justify-content: center; border-radius: var(--sv-radius-md); font: 600 1.125rem/1 var(--sv-font-display); }
#order-standard_cart .order-summary .btn-continue-shopping { display: block; width: 100%; margin-top: var(--sv-3); text-align: center; color: var(--sv-fg-secondary); }

/* --- Checkout ---------------------------------------------------------------- */
.sv-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--sv-6); align-items: start; }
.sv-checkout-main { min-width: 0; }
.sv-checkout-summary { position: sticky; top: 24px; }
#order-standard_cart .already-registered { margin-bottom: var(--sv-4); color: var(--sv-fg-secondary); }
#order-standard_cart #frmCheckout { counter-reset: svstep; padding: var(--sv-2) var(--sv-8) var(--sv-8); background: #fff; border-radius: var(--sv-radius-xl); }
#order-standard_cart #frmCheckout .sub-heading { margin: var(--sv-8) calc(-1 * var(--sv-8)) var(--sv-5); padding: var(--sv-8) var(--sv-8) 0; border-top: 8px solid var(--sv-panel-bg, #f4f4f6); }
#order-standard_cart #frmCheckout > .sub-heading:first-of-type, #order-standard_cart #frmCheckout > div:first-of-type > .sub-heading:first-child { margin-top: 0; border-top: 0; }
#order-standard_cart #frmCheckout .sub-heading span { display: flex; align-items: center; gap: 12px; color: var(--sv-fg); font: 600 1.375rem/1.3 var(--sv-font-display); background: none !important; }
#order-standard_cart #frmCheckout .sub-heading span::before {
  counter-increment: svstep; content: counter(svstep);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border: 1.5px solid var(--sv-line-strong); border-radius: 50%; color: var(--sv-primary); font: 500 1rem/1 var(--sv-font-display);
}
#order-standard_cart #totalDueToday { display: flex; justify-content: space-between; margin: 0 0 var(--sv-5); padding: var(--sv-4) var(--sv-5); border-radius: var(--sv-radius-md); background: var(--sv-ink-50); color: var(--sv-fg); font-size: 1rem; text-align: left !important; }
#order-standard_cart #paymentGatewaysContainer { padding: 0; border: 0; background: none; }
#order-standard_cart #paymentGatewaysContainer > p { margin-bottom: var(--sv-3); color: var(--sv-fg-secondary); font-size: 1rem !important; }
#order-standard_cart #paymentGatewaysContainer .text-center { display: flex; flex-direction: column; gap: var(--sv-3); text-align: left !important; }
#order-standard_cart #paymentGatewaysContainer label, #order-standard_cart #paymentGatewaysContainer .radio-inline {
  display: flex !important; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 0 !important; padding: 0 var(--sv-6);
  border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-lg); background: #fff; color: var(--sv-fg); font: 500 1.0625rem/1.3 var(--sv-font-display); cursor: pointer;
}
#order-standard_cart #paymentGatewaysContainer label:hover { border-color: var(--sv-ink-500); }
#order-standard_cart #paymentGatewaysContainer label:has(input:checked), #order-standard_cart #paymentGatewaysContainer label:has(.checked) { border-color: var(--sv-primary); background: var(--sv-primary-soft); }
#order-standard_cart .cc-input-container { margin-top: var(--sv-4); padding: var(--sv-5); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: #fff; }
#order-standard_cart .existing-cc-grid { display: grid; gap: var(--sv-3); }
#order-standard_cart .existing-cc-grid label, #order-standard_cart .existing-cc-grid .paymethod-info { border-radius: var(--sv-radius-lg); }
#order-standard_cart #frmCheckout > .text-center { margin-top: var(--sv-8); text-align: left !important; }
#order-standard_cart #frmCheckout > .text-center p { margin-bottom: var(--sv-5); color: var(--sv-fg-secondary); }
#order-standard_cart #btnCompleteOrder { min-height: 56px; padding: 0 44px; border-radius: var(--sv-radius-md); font: 600 1.125rem/1 var(--sv-font-display); }
.sv-secure-note { display: flex; align-items: center; gap: 8px; margin: var(--sv-4) 0 0; color: var(--sv-fg-secondary); font-size: 1rem; }
.sv-secure-note svg { color: var(--sv-primary); }
#order-standard_cart .checkout-security-msg { margin-top: var(--sv-4); padding: var(--sv-3) 0; background: none; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }

.sv-sum { padding: var(--sv-6); background: #fff; border-radius: var(--sv-radius-xl); color: var(--sv-fg); }
.sv-sum__title { margin: 0 0 var(--sv-4); font: 600 1.375rem/1.3 var(--sv-font-display); }
.sv-sum__items { list-style: none; margin: 0; padding: 0 0 var(--sv-3); border-bottom: 1px solid var(--sv-line); }
.sv-sum__items li { display: flex; justify-content: space-between; gap: var(--sv-4); padding: 8px 0; }
.sv-sum__name { min-width: 0; font: 600 1rem/1.35 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-sum__name small { display: block; margin-top: 2px; color: var(--sv-fg-secondary); font: 400 var(--sv-text-small)/1.4 var(--sv-font-sans); }
.sv-sum__price { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-sum__totals { margin: 0; padding: var(--sv-3) 0; border-bottom: 1px solid var(--sv-line); }
.sv-sum__totals > div { display: flex; justify-content: space-between; gap: var(--sv-4); padding: 6px 0; }
.sv-sum__totals dt { font-weight: 400; color: var(--sv-fg); }
.sv-sum__totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sv-4); padding: var(--sv-5) 0 var(--sv-3); font: 600 1.375rem/1.2 var(--sv-font-display); }
.sv-sum__edit { color: var(--sv-primary); font: 600 1rem/1 var(--sv-font-display); }

@media (max-width: 1099.98px) {
  .sv-checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-checkout-summary { position: static; order: -1; }
  #order-standard_cart .secondary-cart-sidebar { flex-basis: 100%; max-width: none; }
}
@media (max-width: 575.98px) {
  #order-standard_cart #frmCheckout { padding: var(--sv-2) var(--sv-5) var(--sv-6); }
  #order-standard_cart #frmCheckout .sub-heading { margin-left: calc(-1 * var(--sv-5)); margin-right: calc(-1 * var(--sv-5)); padding-left: var(--sv-5); padding-right: var(--sv-5); }
  #order-standard_cart .view-cart-items { padding: var(--sv-1) var(--sv-4); }
  #order-standard_cart .view-cart-items .item-price { text-align: left; margin-top: var(--sv-3); }
  #order-standard_cart #searchDomainInfo { padding: 68px 20px 24px; }
  #order-standard_cart .primary-domain-header { left: 20px; top: 24px; }
  #order-standard_cart #primaryLookupResult .domain-price { width: 100%; justify-content: space-between; }
}

/* Domain search: round arrow submit (label kept for screen readers). */
#order-standard_cart .domain-checker-container .input-group-box #btnCheckAvailability {
  width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50% !important; font-size: 0;
  background: var(--sv-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 22px;
}
#order-standard_cart .domain-checker-container .input-group-box #btnCheckAvailability:hover { background-color: var(--sv-primary-hover); }
#order-standard_cart .domain-checker-container .input-group-append, #order-standard_cart .domain-checker-container .input-group-btn { display: flex; align-items: center; }
/* Pricing table: no stock coloured header bars. */
#order-standard_cart .domain-pricing .tld-pricing-header div, #order-standard_cart .domain-pricing .tld-pricing-header [class*="col-"] { border: 0 !important; background: none !important; height: auto; border-radius: 0; }
/* "Add hosting" / transfer promos under the search. */
#order-standard_cart .domain-promo-box { padding: var(--sv-6); background: #fff; border: 0; border-radius: var(--sv-radius-xl); color: var(--sv-fg-secondary); }
#order-standard_cart .domain-promo-box h3 { color: var(--sv-fg); font: 600 1.25rem/1.3 var(--sv-font-display); }
#order-standard_cart .domain-promo-box .text-warning, #order-standard_cart .domain-promo-box p.font-size-11 { color: var(--sv-fg-secondary) !important; }
#order-standard_cart .domain-promo-box .btn { min-height: 44px; padding: 0 20px; border: 1.5px solid var(--sv-primary); border-radius: var(--sv-radius-md); background: #fff; color: var(--sv-primary); font-weight: 600; }
#order-standard_cart .domain-promo-box .btn:hover { background: var(--sv-primary-soft); }
#order-standard_cart .domain-promo-box i { display: none; }

#order-standard_cart .order-summary .total-due-today .amt, #order-standard_cart .order-summary #totalDueToday { padding: 0; background: none; border: 0; box-shadow: none; }
#order-standard_cart .view-cart-items .item > .row > div:first-child { position: relative; padding-left: 76px; }
#order-standard_cart .view-cart-items .item > .row > div:first-child::before {
  content: ""; position: absolute; left: 15px; top: 0; width: 44px; height: 44px; border-radius: var(--sv-radius-md);
  background: var(--sv-ink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101011' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 8 4v9l-8 4-8-4v-9l8-4Z'/%3E%3Cpath d='m4 7.5 8 4 8-4M12 11.5v9'/%3E%3C/svg%3E") no-repeat center / 22px;
}
#order-standard_cart .order-summary .total-due-today span#totalDueToday.amt { color: var(--sv-fg); font: 600 1.375rem/1.2 var(--sv-font-display); }

/* ==========================================================================
   12. SHELL FIXES (2026-10-04 live review)
   ========================================================================== */
/* Compact rail (icons beside a context menu, or narrow screens): only the
   core destinations, so it never runs off the bottom of the screen. */
.sv-layout--context .sv-nav__item--more { display: none; }
@media (max-width: 1279.98px) { .sv-rail .sv-nav__item--more { display: none; } }
@media (max-width: 767.98px) { .sv-rail .sv-nav__item--more { display: flex; } }

/* Tables: headers align with their cells; sort arrows sit beside the label. */
.table thead th, table.dataTable thead th { text-align: left !important; }
table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc { padding-right: 28px; position: relative; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { right: 10px !important; left: auto !important; font-size: 10px; }
.table td.text-center, .table th.text-center { text-align: left !important; }

/* WHMCS licence line ("Powered by WHMCompleteSolution") - required by the
   licence, so it stays visible; it just reads as a quiet footnote. */
p:has(> a[href*="whmcs.com"]) { margin: var(--sv-6) 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); text-align: center; }
p:has(> a[href*="whmcs.com"]) a { color: var(--sv-fg-secondary); }
/* Read-only and disabled fields share one look (WHMCS mixes the two). */
.form-control:disabled, .form-control[readonly], .form-control[disabled] { background: var(--sv-canvas-secondary); color: var(--sv-fg-secondary); border-color: var(--sv-line-strong); opacity: 1; }

/* --- Configure product (Hostinger-style cart item + summary) ------------- */
#order-standard_cart #frmConfigureProduct > .row { display: flex; flex-wrap: wrap; gap: var(--sv-6); margin: 0; }
#order-standard_cart #frmConfigureProduct .secondary-cart-body { flex: 1 1 0; min-width: 0; padding: 0; }
#order-standard_cart #frmConfigureProduct .secondary-cart-body > p:first-child { color: var(--sv-fg-secondary); margin-bottom: var(--sv-4); }
#order-standard_cart .product-info.sv-config-item {
  position: relative; margin: 0 0 var(--sv-5); padding: var(--sv-6) var(--sv-6) var(--sv-6) 96px;
  background: #fff; border: 0; border-radius: var(--sv-radius-xl); color: var(--sv-fg-secondary); font-size: var(--sv-text-body);
}
#order-standard_cart .product-info.sv-config-item::before {
  content: ""; position: absolute; left: var(--sv-6); top: var(--sv-6); width: 48px; height: 48px; border-radius: var(--sv-radius-md);
  background: var(--sv-ink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101011' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='6' rx='2'/%3E%3Crect x='3.5' y='13.5' width='17' height='6' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E") no-repeat center / 24px;
}
#order-standard_cart .sv-config-item .product-title { margin: 0; color: var(--sv-fg); font: 600 1.25rem/1.3 var(--sv-font-display); }
.sv-config-item__group { margin: 2px 0 var(--sv-4); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
#order-standard_cart .sv-config-item .field-container { margin: 0; padding: 0; border: 0 !important; background: none !important; }
#order-standard_cart .sv-config-item label[for="inputBillingcycle"] { display: block; margin-bottom: 8px; color: var(--sv-fg); font: 600 1rem/1.3 var(--sv-font-display); }
#order-standard_cart .sv-config-item #inputBillingcycle { width: 100%; max-width: 420px; height: 52px; border-color: var(--sv-line-strong); border-radius: var(--sv-radius-md); font-size: 1rem; }
.sv-config-item__desc { margin-top: var(--sv-5); padding-top: var(--sv-4); border-top: 1px solid var(--sv-line-subtle); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-config-item__desc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--sv-6); }
.sv-config-item__desc li { position: relative; padding: 4px 0 4px 24px; break-inside: avoid; color: var(--sv-fg); }
.sv-config-item__desc li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a49' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / contain; }
@media (max-width: 575.98px) { .sv-config-item__desc ul { columns: 1; } #order-standard_cart .product-info.sv-config-item { padding: var(--sv-5); } #order-standard_cart .product-info.sv-config-item::before { display: none; } }
#order-standard_cart #frmConfigureProduct .sub-heading { margin: var(--sv-6) 0 var(--sv-3); }
#order-standard_cart #frmConfigureProduct .sub-heading span { font-size: 1.125rem; font-weight: 600; }
#order-standard_cart #frmConfigureProduct .product-configurable-options, #order-standard_cart #frmConfigureProduct > .row .secondary-cart-body > .field-container { padding: var(--sv-5); background: #fff; border: 0 !important; border-radius: var(--sv-radius-xl); }
#order-standard_cart #frmConfigureProduct .secondary-cart-sidebar { flex: 0 0 420px; max-width: 420px; padding: 0; }
#order-standard_cart #frmConfigureProduct #btnCompleteProductConfig { display: flex; width: 100%; min-height: 56px; justify-content: center; margin-top: var(--sv-3); border-radius: var(--sv-radius-md); font: 600 1.125rem/1 var(--sv-font-display); }
#order-standard_cart #producttotal .clearfix, #order-standard_cart #producttotal > div { display: flex; justify-content: space-between; gap: var(--sv-3); padding: 6px 0; }
#order-standard_cart #producttotal .product-name { display: block; color: var(--sv-fg); font: 600 1.0625rem/1.3 var(--sv-font-display); }
#order-standard_cart #producttotal .product-group { color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
#order-standard_cart #producttotal .summary-totals { margin: var(--sv-3) 0; padding: var(--sv-3) 0; border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line); display: block; }
#order-standard_cart #producttotal .total-due-today { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; }
#order-standard_cart #producttotal .total-due-today .amt { font: 600 1.375rem/1.2 var(--sv-font-display); color: var(--sv-fg); }
@media (max-width: 1099.98px) { #order-standard_cart #frmConfigureProduct .secondary-cart-sidebar { flex-basis: 100%; max-width: none; } }

/* --- Choose a domain (product requires a domain) -------------------------- */
#order-standard_cart .domain-selection-options .option {
  margin: 0 0 var(--sv-3); padding: var(--sv-5) var(--sv-6); background: #fff !important; border: 1.5px solid transparent !important; border-radius: var(--sv-radius-xl) !important;
}
#order-standard_cart .domain-selection-options .option-selected { border-color: var(--sv-primary) !important; background: #fff !important; }
#order-standard_cart .domain-selection-options .option > label { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--sv-fg); font: 600 1.0625rem/1.3 var(--sv-font-display); cursor: pointer; }
#order-standard_cart .domain-selection-options .domain-input-group { margin-top: var(--sv-4); }
#order-standard_cart .domain-selection-options .domain-input-group .row { margin: 0; }
#order-standard_cart .domain-selection-options .domain-input-group [class*="col-"] { flex: 1 1 auto; max-width: 100%; margin-left: 0; padding: 0 var(--sv-2) 0 0; }
#order-standard_cart .domain-selection-options .domain-input-group .col-sm-2 { flex: 0 0 auto; }
#order-standard_cart .domain-selection-options textarea#message { min-height: 96px; border: 2px solid var(--sv-brand-200); border-radius: var(--sv-radius-lg); padding: 14px 16px; font-size: 1rem; }
#order-standard_cart .domain-selection-options textarea#message:focus { border-color: var(--sv-primary); box-shadow: 0 0 0 4px var(--sv-brand-50); }
#order-standard_cart .domain-selection-options .form-control { height: 52px; border-radius: var(--sv-radius-md); font-size: 1rem; }
#order-standard_cart .domain-selection-options .btn { min-height: 52px; padding: 0 28px; border-radius: var(--sv-radius-md); font: 600 1rem/1 var(--sv-font-display); }
#order-standard_cart .domain-selection-options .btn i { margin-left: 6px; }
#order-standard_cart .domain-selection-options .multiselect, #order-standard_cart .domain-selection-options .btn-group > .multiselect { min-height: 40px; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-full) !important; background: #fff; color: var(--sv-fg); padding: 0 16px; }
#order-standard_cart .domain-selection-options label:has(> input[name="filter"]) { display: inline-flex; align-items: center; gap: 8px; color: var(--sv-fg); font-weight: 500; }
#order-standard_cart #DomainSearchResults .domain-checker-result-headline .domain-available { flex-basis: 100%; }
#order-standard_cart #DomainSearchResults .domain-price { margin-left: auto; }

@media (min-width: 768px) {
  #order-standard_cart .domain-selection-options .domain-input-group > .row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--sv-3); }
  #order-standard_cart .domain-selection-options .domain-input-group > .row > [class*="col-sm-8"] { flex: 1 1 auto; }
  #order-standard_cart .domain-selection-options .domain-input-group > .row > .col-sm-2 { flex: 0 0 auto; width: auto; padding: 0; }
  #order-standard_cart .domain-selection-options .domain-input-group > .row > .col-sm-2 .btn { width: auto; min-width: 140px; }
}
/* WHMCS stock home panels (shown when the Serverlys hook is not installed):
   status pills must always be readable. Admin-coloured ticket statuses keep
   their colour with white text. */
.client-home-cards .label { opacity: 1 !important; }
.client-home-cards .label:not([style]) { color: var(--sv-fg-secondary) !important; background: var(--sv-canvas-inset) !important; }
.client-home-cards .label.status-active:not([style]), .client-home-cards .label.label-success:not([style]) { color: var(--sv-success) !important; background: var(--sv-success-soft) !important; }
.client-home-cards .label[style] { color: #fff !important; }
.client-home-cards .list-group-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px var(--sv-6); }
.client-home-cards .card-header { display: flex; align-items: center; justify-content: space-between; }

/* DataTables search box: never wider than the table on phones. */
.dataTables_wrapper .dataTables_filter { margin: var(--sv-2) var(--sv-4) var(--sv-3); width: auto; }
.dataTables_wrapper .dataTables_filter label { width: 100%; }
.dataTables_wrapper .dataTables_filter input { width: 100% !important; max-width: 360px; box-sizing: border-box; }

/* ==========================================================================
   PAGES - support
   ========================================================================== */

/* --- Shared ---------------------------------------------------------------- */
ul.sv-dept-grid, ul.sv-kbcats { list-style: none; margin: 0; padding: 0; }
.sv-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--sv-line); border-right-color: var(--sv-fg-muted); border-radius: 50%; animation: sv-spin 0.7s linear infinite; vertical-align: middle; }
.sv-pager { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin: 0; padding: 0; list-style: none; }
.sv-pager .page-link { gap: 6px; }

/* Readable column for articles and announcements */
.sv-read { max-width: 800px; margin-inline: auto; }
.sv-read--wide { max-width: 960px; }
.sv-read__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-3); margin-top: var(--sv-6); }

.sv-article { padding: var(--sv-8) var(--sv-10); }
.sv-article__head { margin-bottom: var(--sv-6); padding-bottom: var(--sv-5); border-bottom: 1px solid var(--sv-line-subtle); }
.sv-article__toprow { margin-bottom: var(--sv-3); }
.sv-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-2) var(--sv-5); margin: 0 0 var(--sv-3); padding: 0; list-style: none; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-article__toprow .sv-article__meta { margin: 0; }
.sv-article__meta li { display: inline-flex; align-items: center; gap: 6px; }
.sv-article__meta .sv-status { gap: 6px; }
.sv-article__meta .sv-status::before { display: none; }
.sv-article__title { margin: 0; font: 600 clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)/1.25 var(--sv-font-display); color: var(--sv-fg); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sv-article__share { margin-top: var(--sv-4); }
.sv-article__social { margin-top: var(--sv-8); }
.sv-article__vote { margin-top: var(--sv-8); padding-top: var(--sv-5); border-top: 1px solid var(--sv-line-subtle); }
.sv-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-3); }
.sv-vote__q { margin: 0; font: 500 var(--sv-text-body)/1.4 var(--sv-font-display); color: var(--sv-fg); }
.sv-vote__btns { display: flex; flex-wrap: wrap; gap: var(--sv-2); }

.sv-prose { max-width: 720px; color: var(--sv-fg); font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.sv-prose > :first-child { margin-top: 0; }
.sv-prose > :last-child { margin-bottom: 0; }
.sv-prose p, .sv-prose ul, .sv-prose ol, .sv-prose pre, .sv-prose blockquote, .sv-prose table { margin: 0 0 1em; }
.sv-prose h1, .sv-prose h2, .sv-prose h3, .sv-prose h4 { margin: 1.6em 0 0.5em; font-family: var(--sv-font-display); font-weight: 600; line-height: 1.3; color: var(--sv-fg); }
.sv-prose h1, .sv-prose h2 { font-size: 1.25rem; }
.sv-prose h3, .sv-prose h4 { font-size: 1.0625rem; }
.sv-prose ul, .sv-prose ol { padding-left: 1.4em; }
.sv-prose li + li { margin-top: 0.35em; }
.sv-prose a { color: var(--sv-primary); text-decoration: underline; text-underline-offset: 3px; }
.sv-prose img { max-width: 100%; height: auto; border-radius: var(--sv-radius-md); }
.sv-prose code { padding: 1px 6px; color: var(--sv-fg); border-radius: var(--sv-radius-xs); background: var(--sv-canvas-inset); font-family: var(--sv-font-mono); font-size: 0.875em; }
.sv-prose pre { padding: var(--sv-4); border-radius: var(--sv-radius-md); background: var(--sv-canvas-inset); overflow-x: auto; }
.sv-prose pre code { padding: 0; background: none; }
.sv-prose blockquote { padding: var(--sv-2) var(--sv-4); border-left: 3px solid var(--sv-line); color: var(--sv-fg-secondary); }
.sv-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--sv-text-small); }
.sv-prose th, .sv-prose td { padding: 8px 12px; border: 1px solid var(--sv-line); }

/* Search bars (knowledgebase / downloads) */
.sv-kb-search { margin-bottom: var(--sv-6); }
.sv-kb-search .kb-search { margin: 0; }
.sv-kb-search .form-control { background: var(--sv-surface); }
.kb-search .btn .sv-icon { margin-right: 4px; vertical-align: -3px; }

.sv-kb-hero { display: flex; flex-direction: column; align-items: center; padding: var(--sv-10) var(--sv-6); text-align: center; background: linear-gradient(180deg, var(--sv-primary-soft) 0%, var(--sv-surface) 100%); }
.sv-kb-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--sv-3); border-radius: var(--sv-radius-md); background: var(--sv-surface); color: var(--sv-primary); box-shadow: var(--sv-shadow-e1); }
.sv-kb-hero__title { margin: 0; font: 600 clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)/1.25 var(--sv-font-display); color: var(--sv-fg); }
.sv-kb-hero__sub { margin: var(--sv-2) 0 var(--sv-6); color: var(--sv-fg-secondary); font-size: var(--sv-text-body); }
.sv-kb-hero__form { width: 100%; max-width: 640px; }
.sv-kb-hero__form .kb-search { margin: 0; box-shadow: var(--sv-shadow-e2); border-radius: var(--sv-radius-sm); }

/* Category cards (knowledgebase + downloads) */
.sv-kbcat { overflow: hidden; }
a.card-body.sv-kbcat__link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--sv-5); color: var(--sv-fg); text-decoration: none; }
.kb-category a.card-body.sv-kbcat__link:hover { background: none; color: var(--sv-fg); text-decoration: none; }
a.card-body.sv-kbcat__link:focus-visible { outline: 2px solid var(--sv-primary); outline-offset: -2px; border-radius: inherit; }
.sv-kbcat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-3); margin-bottom: var(--sv-2); }
.sv-kbcat__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--sv-radius-md); background: var(--sv-primary-soft); color: var(--sv-primary); }
.sv-kbcat__count { padding: 2px 10px; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); font-size: var(--sv-text-micro); font-weight: 500; white-space: nowrap; }
.sv-kbcat__name { font: 600 var(--sv-text-h3)/1.35 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-kbcat__desc { color: var(--sv-fg-muted); font-size: var(--sv-text-small); line-height: 1.5; }
.sv-kbcat__edit { align-self: flex-start; margin-top: var(--sv-2); }

/* Article / file rows */
a.sv-row { color: inherit; text-decoration: none; }
a.sv-row:hover { color: inherit; text-decoration: none; }
a.sv-row:focus-visible { outline: 2px solid var(--sv-primary); outline-offset: -2px; }
.sv-kb-articles .sv-row__icon, .sv-dl-files .sv-row__icon, .sv-kbsugg .sv-row__icon { width: 36px; height: 36px; }
.sv-kb-articles .sv-row .btn { position: relative; z-index: 1; }
.sv-rows .sv-row:last-child { border-bottom-left-radius: var(--sv-radius-lg); border-bottom-right-radius: var(--sv-radius-lg); }

/* --- Network status ------------------------------------------------------ */
.sv-netstatus__summary { padding: var(--sv-5) var(--sv-6); font-size: var(--sv-text-body); }
.sv-netstatus__summary .sv-callout__title { font-size: var(--sv-text-h3); margin-bottom: 2px; }
.sv-netstatus__summary > .sv-icon { margin-top: 2px; }
.sv-servers { margin: 0; }
.sv-servers th, .sv-servers td { padding: 12px var(--sv-4); vertical-align: middle; }
.sv-servers th:first-child, .sv-servers td:first-child { padding-left: var(--sv-6); }
.sv-servers tbody tr + tr td { border-top: 1px solid var(--sv-line-subtle); }

.sv-issue__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sv-3); padding: var(--sv-5) var(--sv-6) var(--sv-4); border-bottom: 1px solid var(--sv-line-subtle); }
.sv-issue__title { flex: 1 1 260px; min-width: 0; margin: 0; font: 600 var(--sv-text-h3)/1.35 var(--sv-font-display); color: var(--sv-fg); overflow-wrap: anywhere; }
.sv-issue__badges { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-issue__body { padding: var(--sv-4) var(--sv-6) var(--sv-6); }
.sv-issue__affecting { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--sv-3); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-issue__affecting .sv-icon { color: var(--sv-fg-muted); }
.sv-issue__meta { display: flex; flex-wrap: wrap; gap: var(--sv-2) var(--sv-5); margin: 0 0 var(--sv-4); padding: 0; list-style: none; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-issue__meta li { display: inline-flex; align-items: center; gap: 6px; }
.sv-issue__affected { margin-bottom: var(--sv-4); }
.sv-issue__desc { color: var(--sv-fg); font-size: var(--sv-text-body); line-height: 1.65; overflow-wrap: anywhere; }
.sv-issue__desc > :last-child { margin-bottom: 0; }

/* --- Open a ticket ------------------------------------------------------- */
.sv-dept-head { margin-bottom: var(--sv-5); }
.sv-dept-grid > li { display: flex; }
.sv-dept { width: 100%; min-height: 96px; padding: var(--sv-5); }
.sv-dept:hover { border-color: var(--sv-primary); }
.sv-dept:hover .sv-action__end { color: var(--sv-primary); transform: translateX(2px); }
.sv-dept .sv-action__icon { width: 44px; height: 44px; }
.sv-dept .sv-action__text { font-size: var(--sv-text-h3); font-weight: 600; }
.sv-dept .sv-action__end { transition: transform var(--sv-fast) var(--sv-ease-hover), color var(--sv-fast) var(--sv-ease-hover); }

.sv-ticket-form__body { padding-top: var(--sv-6); }
.sv-ticket-form__body > .form-group:last-child { margin-bottom: 0; }
.sv-ticket-form .form-text .sv-icon { vertical-align: -3px; }
.sv-ticket-form .btn .sv-icon { margin-right: 4px; vertical-align: -3px; }
.sv-ticket-form__foot { gap: var(--sv-3); }
#autoAnswerSuggestions { margin: var(--sv-2) 0 var(--sv-5); }

.sv-kbsugg { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); overflow: hidden; }
.sv-kbsugg__head { display: flex; align-items: flex-start; gap: var(--sv-3); padding: var(--sv-4) var(--sv-5); background: var(--sv-primary-soft); }
.sv-kbsugg__head > .sv-icon { flex: none; margin-top: 2px; color: var(--sv-primary); }
.sv-kbsugg__title { margin: 0; font: 600 var(--sv-text-body)/1.4 var(--sv-font-display); color: var(--sv-fg); }
.sv-kbsugg__sub { margin: 2px 0 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-kbsugg__list .sv-row { padding: var(--sv-3) var(--sv-5); }
.sv-kbsugg__list .sv-row:first-child { border-top: 1px solid var(--sv-line-subtle); }

.sv-confirm .sv-empty { padding: var(--sv-12) var(--sv-6); }
.sv-confirm .sv-empty__title a { color: var(--sv-primary); }

/* --- Ticket feedback ------------------------------------------------------ */
.sv-rate-block, .sv-feedback .ticketfeedbackstaffcont { width: auto; margin: 0; padding: var(--sv-6); border: 0; border-bottom: 1px solid var(--sv-line-subtle); border-radius: 0; background: none; min-width: 0; }
.sv-rate-block__legend { float: left; width: 100%; margin: 0 0 var(--sv-4); padding: 0; font: 500 var(--sv-text-body)/1.4 var(--sv-font-display); color: var(--sv-fg); }
.sv-rate-block__legend + * { clear: both; }
.sv-rate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-3); margin-bottom: var(--sv-5); }
.sv-rate__end { color: var(--sv-fg-muted); font-size: var(--sv-text-micro); text-transform: uppercase; letter-spacing: 0.04em; }
.sv-rate__scale { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-rate__opt { position: relative; margin: 0; cursor: pointer; }
.sv-rate__opt .sv-rate__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sv-rate__opt span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); background: var(--sv-surface); color: var(--sv-fg); font: 500 var(--sv-text-small)/1 var(--sv-font-display); font-variant-numeric: tabular-nums; transition: background-color var(--sv-fast) var(--sv-ease-hover), border-color var(--sv-fast) var(--sv-ease-hover); }
.sv-rate__opt:hover span { border-color: var(--sv-line-strong); background: var(--sv-canvas-secondary); }
.sv-rate__input:checked + span { border-color: var(--sv-primary); background: var(--sv-primary); color: #fff; }
.sv-rate__input:focus-visible + span { outline: 2px solid var(--sv-primary); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .sv-rate-block { padding: var(--sv-5); }
  .sv-rate__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; order: 2; }
  .sv-rate__opt span { width: 100%; }
}

/* --- Announcements -------------------------------------------------------- */
.sv-annc-list { display: flex; flex-direction: column; gap: var(--sv-4); }
.sv-annc, .announcements .sv-annc.announcement { margin: 0; padding: var(--sv-6); }
.sv-annc__date { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--sv-2); color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-annc__title { margin: 0 0 var(--sv-3); font: 600 1.25rem/1.3 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-annc__title a { color: var(--sv-fg); }
.sv-annc__title a:hover { color: var(--sv-primary); text-decoration: none; }
.sv-annc__excerpt { color: var(--sv-fg-secondary); font-size: var(--sv-text-body); line-height: 1.65; }
.sv-annc__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-3); margin-top: var(--sv-4); }
.sv-annc__foot .sv-btn--text { gap: 6px; }

/* --- Downloads ------------------------------------------------------------ */
.sv-dl .sv-row__title { white-space: normal; }
.sv-dl__desc { display: block; margin-top: 2px; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); line-height: 1.5; }
.sv-dl__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-2) var(--sv-3); margin-top: 6px; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-dl__facts .sv-status { gap: 4px; }
.sv-dl__facts .sv-status::before { display: none; }
.sv-dl__btn { flex: none; }
.sv-dl:hover .sv-dl__btn { box-shadow: inset 0 0 0 1px var(--sv-primary); color: var(--sv-primary); }
@media (max-width: 575.98px) {
  .sv-dl__btn { margin-left: 48px; }
}

.sv-denied .sv-empty { padding: var(--sv-12) var(--sv-6); }
.sv-denied__msg { width: 100%; max-width: 520px; margin-top: var(--sv-2); }
.sv-denied__msg .alert { margin: 0; }
.sv-denied__product { display: inline-flex; align-items: center; gap: var(--sv-2); padding: 8px 14px; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); font-size: var(--sv-text-small); }

/* --- Contact -------------------------------------------------------------- */
.sv-contact__body { padding-top: var(--sv-6); }
.sv-contact__error { padding: var(--sv-5) var(--sv-6) 0; }
.sv-contact__error .alert { margin: 0; }
.sv-contact .btn .sv-icon { margin-right: 4px; vertical-align: -3px; }

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sv-article { padding: var(--sv-6) var(--sv-5); }
  .sv-kb-hero { padding: var(--sv-8) var(--sv-5); }
  .sv-issue__head, .sv-issue__body { padding-left: var(--sv-5); padding-right: var(--sv-5); }
  .sv-servers th:first-child, .sv-servers td:first-child { padding-left: var(--sv-5); }
}
@media print {
  .sv-read { max-width: none; }
  .sv-article { padding: 0; border: 0; }
}
.sv-ticket-form .sv-card__head, .sv-feedback .sv-card__head { flex-wrap: wrap; }

/* ==========================================================================
   PAGES - account
   ========================================================================== */

/*
  Every selector here is either an sv-acct-* class (only used by the account
  templates) or scoped under .sv-acct (the wrapper those templates render).
*/

/* --- Page wrapper ---------------------------------------------------------- */
.sv-acct > * + * { margin-top: var(--sv-6); }
.sv-acct .w-hidden { display: none; } /* .btn/.sv-btn set display; WHMCS toggles .w-hidden */
.sv-acct-lead { margin: 0; max-width: 720px; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }

/* --- Settings card: intro on the left, fields on the right ----------------- */
.sv-acct-card__grid {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: var(--sv-8);
  padding: var(--sv-6);
}
.sv-acct-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sv-3);
  border-radius: var(--sv-radius-md);
  background: var(--sv-primary-soft);
  color: var(--sv-primary);
}
.sv-acct-card__icon--success { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-acct-card__icon--warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.sv-acct-card__icon--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-acct-card__intro .sv-card__sub { margin-top: var(--sv-1); line-height: 1.55; }
.sv-acct-card__intro .sv-acct-badge { margin-top: var(--sv-3); }
.sv-acct-card__main { min-width: 0; }
.sv-acct-card__main > :last-child { margin-bottom: 0; }

.sv-acct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sv-4); }
.sv-acct-fields--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.sv-acct-fields > .sv-field--full { grid-column: 1 / -1; }
.sv-acct-fields .sv-field > .control { color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-acct-fields .sv-field > .control > .form-control,
.sv-acct-fields .sv-field > .control > .custom-select { margin-bottom: var(--sv-1); }
.sv-acct .sv-field .iti { width: 100%; } /* intl-tel-input wrapper */

/* Save bar: pinned to the bottom of the viewport while its form is on screen. */
.sv-acct-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sv-2);
  padding: var(--sv-3) var(--sv-6);
  border-top: 1px solid var(--sv-line);
  border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
.sv-acct-bar--float { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-e3); }
.sv-acct-bar__note { display: inline-flex; align-items: center; gap: var(--sv-2); margin-right: auto; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-acct-bar .btn { min-width: 112px; }

@media (max-width: 991.98px) {
  .sv-acct-card__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sv-5); }
}
@media (max-width: 575.98px) {
  .sv-acct-card__grid { padding: var(--sv-5); }
  .sv-acct-fields { grid-template-columns: minmax(0, 1fr); }
  .sv-acct-bar { padding: var(--sv-3) var(--sv-4); }
  .sv-acct-bar .btn, .sv-acct-bar .sv-btn { flex: 1 1 auto; min-width: 0; }
  .sv-acct-bar__note { flex-basis: 100%; }
}

/* --- Badges ------------------------------------------------------------------ */
.sv-acct-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--sv-radius-full);
  background: var(--sv-canvas-inset);
  color: var(--sv-fg-secondary);
  font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display);
  white-space: nowrap;
  vertical-align: middle;
}
.sv-acct-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-ink-400); }
.sv-acct-badge--plain::before { display: none; }
.sv-acct-badge--plain { padding-left: 10px; }
.sv-acct-badge--success { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-acct-badge--success::before { background: var(--sv-success-fill); }
.sv-acct-badge--warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.sv-acct-badge--warning::before { background: var(--sv-warning-fill); }
.sv-acct-badge--info { background: var(--sv-info-soft); color: var(--sv-info); }
.sv-acct-badge--info::before { background: var(--sv-brand-500); }

/* --- Checkbox tiles (email preferences, permissions) ----------------------- */
.sv-acct-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-2); margin: 0; }
.sv-acct-checks--1 { grid-template-columns: minmax(0, 1fr); }
.sv-acct-check.form-check {
  display: block;
  margin: 0;
  padding: 12px 14px 12px calc(14px + 1.75rem);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-md);
  background: var(--sv-surface);
  cursor: pointer;
  transition: border-color var(--sv-fast) var(--sv-ease-hover), background-color var(--sv-fast) var(--sv-ease-hover);
}
.sv-acct-check.form-check:hover { border-color: var(--sv-line-strong); }
.sv-acct-check:has(.form-check-input:checked) { border-color: rgb(0 0 255 / 0.35); background: var(--sv-primary-soft); }
.sv-acct-check .form-check-input { width: 16px; height: 16px; margin-top: 2px; cursor: pointer; }
.sv-acct-check__title { display: block; color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }
.sv-acct-check__desc { display: block; margin-top: 2px; color: var(--sv-fg-muted); font: 400 var(--sv-text-micro)/1.5 var(--sv-font-sans); }
@media (max-width: 767.98px) {
  .sv-acct-checks { grid-template-columns: minmax(0, 1fr); }
}

/* Radio choice (invite: all permissions / choose) */
.sv-acct-choice { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin-bottom: var(--sv-4); }
.sv-acct-choice .sv-acct-check.form-check { flex: 1 1 200px; }

/* --- Toggle row (marketing opt-in, single sign-on) ------------------------- */
.sv-acct-toggle { display: flex; align-items: center; gap: var(--sv-3); flex-wrap: wrap; padding: var(--sv-3) var(--sv-4); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); }
.sv-acct-toggle .form-check-input { position: static; margin: 0; }
.sv-acct-toggle__text { color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }

/* --- Contact picker toolbar ------------------------------------------------- */
.sv-acct-picker { display: flex; align-items: flex-end; gap: var(--sv-3); padding: var(--sv-5) var(--sv-6); }
.sv-acct-picker__field { flex: 1; min-width: 0; max-width: 520px; }
.sv-acct-picker__field .sv-field__label { margin-bottom: 6px; }
.sv-acct-picker__end { margin-left: auto; display: flex; gap: var(--sv-2); }
@media (max-width: 767.98px) {
  .sv-acct-picker { flex-wrap: wrap; padding: var(--sv-4) var(--sv-5); }
  .sv-acct-picker__field { flex-basis: 100%; max-width: none; }
  .sv-acct-picker__end { margin-left: 0; }
}

/* --- People rows (users, invites) ------------------------------------------- */
.sv-acct-people .sv-row { padding-top: 14px; padding-bottom: 14px; }
.sv-acct-people .sv-avatar { width: 40px; height: 40px; font-size: 15px; }
.sv-acct-people .sv-avatar--muted { background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); }
.sv-acct-people .sv-row__title { display: flex; align-items: center; gap: var(--sv-2); white-space: normal; }
.sv-acct-people .sv-row__title > .sv-acct-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-acct-people .sv-row__title .sv-acct-badge { flex: none; }
.sv-acct-people .sv-row__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; white-space: normal; }
.sv-acct-people .sv-row__end form { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin: 0; }
.sv-acct-people .sv-row__end .disabled { opacity: 0.45; pointer-events: none; }
.sv-acct-2fa-dot { display: inline-flex; align-items: center; gap: 4px; }
.sv-acct-2fa-dot--on { color: var(--sv-success); }
.sv-acct-group-label { margin: 0; padding: var(--sv-3) var(--sv-6) var(--sv-2); border-top: 1px solid var(--sv-line); background: var(--sv-canvas-secondary); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.sv-acct-note { display: flex; gap: var(--sv-2); margin: 0; padding: var(--sv-3) var(--sv-6); border-top: 1px solid var(--sv-line-subtle); color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-acct-note .sv-icon { flex: none; margin-top: 1px; }
@media (max-width: 575.98px) {
  .sv-acct-people .sv-row__end { flex-basis: 100%; margin-left: 52px; flex-wrap: wrap; }
  .sv-acct-group-label, .sv-acct-note { padding-left: var(--sv-5); padding-right: var(--sv-5); }
}

/* --- Two-factor status card ------------------------------------------------- */
.sv-acct-2fa__head { display: flex; align-items: flex-start; gap: var(--sv-4); padding: var(--sv-6); }
.sv-acct-2fa__shield { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: var(--sv-radius-lg); background: var(--sv-primary-soft); color: var(--sv-primary); }
.sv-acct-2fa__text { flex: 1; min-width: 0; }
.sv-acct-2fa__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-2) var(--sv-3); margin: 0; font-size: var(--sv-text-h3); font-weight: 600; }
.sv-acct-2fa__state { margin: var(--sv-1) 0 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-acct-2fa__state strong { color: var(--sv-fg); }
.sv-acct-2fa__actions { flex: none; display: flex; gap: var(--sv-2); }
.sv-acct-2fa .sv-callout { margin: 0 var(--sv-6) var(--sv-6); }
@media (max-width: 767.98px) {
  .sv-acct-2fa__head { flex-wrap: wrap; padding: var(--sv-5); }
  .sv-acct-2fa__actions { flex-basis: 100%; }
  .sv-acct-2fa__actions .btn { flex: 1; }
  .sv-acct-2fa .sv-callout { margin: 0 var(--sv-5) var(--sv-5); }
}

/* Linked accounts (WHMCS include output) */
.sv-acct-linked .table { margin: 0; }
.sv-acct-linked .table-responsive, .sv-acct-linked .dataTables_wrapper { overflow-x: auto; }
.sv-acct-linked .social-signin-btns { display: flex; flex-wrap: wrap; gap: var(--sv-2); }

/* --- Password strength (stock include, restyled in place) ------------------- */
.sv-acct .progress { height: 6px; margin: var(--sv-3) 0 var(--sv-2) !important; border-radius: var(--sv-radius-full); background: var(--sv-canvas-inset); }
.sv-acct .progress-bar { border-radius: var(--sv-radius-full); }
.sv-acct .sv-field br:first-child { display: none; }
.sv-acct .sv-field .alert.sv-alert { margin: var(--sv-2) 0 0; padding: 10px 12px; }
.sv-acct-pw { display: flex; gap: var(--sv-2); align-items: flex-start; }
.sv-acct-pw > .sv-acct-pw__input { flex: 1; min-width: 0; }
.sv-acct-pw > .btn { flex: none; height: 44px; }
@media (max-width: 575.98px) {
  .sv-acct-pw { flex-wrap: wrap; }
  .sv-acct-pw > .btn { width: 100%; }
}

/* --- Backup code ------------------------------------------------------------ */
.sv-acct-narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.sv-acct-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-3);
  margin: var(--sv-4) 0;
  padding: var(--sv-4) var(--sv-5);
  border: 1px dashed var(--sv-line-strong);
  border-radius: var(--sv-radius-md);
  background: var(--sv-canvas-secondary);
}
.sv-acct-code__value { min-width: 0; color: var(--sv-fg); font: 500 22px/1.3 var(--sv-font-mono); letter-spacing: 0.08em; overflow-wrap: anywhere; }
.sv-acct-copy.is-copied { color: var(--sv-success); box-shadow: inset 0 0 0 1px rgb(0 122 73 / 0.4); }
.sv-acct-copy__done { display: none; }
.sv-acct-copy.is-copied .sv-acct-copy__done { display: inline; }
.sv-acct-copy.is-copied .sv-acct-copy__idle { display: none; }

/* --- Account cards (switch account) ---------------------------------------- */
.sv-acct-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sv-4); }
.sv-acct-account {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-3);
  padding: var(--sv-5);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-surface);
  color: var(--sv-fg);
  transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-normal) var(--sv-ease-hover);
}
.sv-acct-account:hover { border-color: var(--sv-primary); box-shadow: var(--sv-shadow-e2); color: var(--sv-fg); text-decoration: none; }
.sv-acct-account:focus-visible { outline: 2px solid var(--sv-primary); outline-offset: 2px; }
.sv-acct-account .sv-avatar { width: 44px; height: 44px; font-size: 16px; }
.sv-acct-account__main { flex: 1; min-width: 0; }
.sv-acct-account__name { display: block; font: 600 var(--sv-text-body)/1.35 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-acct-account__meta { display: flex; flex-wrap: wrap; gap: var(--sv-1); margin-top: var(--sv-1); }
.sv-acct-account__go { flex: none; color: var(--sv-ink-400); }
.sv-acct-account:hover .sv-acct-account__go { color: var(--sv-primary); }
.sv-acct-account.disabled { opacity: 0.55; pointer-events: none; }
.sv-acct-account.disabled .sv-avatar { background: var(--sv-ink-400); }

/* --- Email history ---------------------------------------------------------- */
.sv-acct-mail td { vertical-align: middle !important; }
.sv-acct-mail__date { white-space: nowrap; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); font-variant-numeric: tabular-nums; }
.sv-acct-mail__subject { display: flex; align-items: center; gap: var(--sv-3); min-width: 0; }
.sv-acct-mail__subject .sv-row__icon { width: 36px; height: 36px; }
.sv-acct-mail__text { min-width: 0; color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-acct-mail__clip { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--sv-2); color: var(--sv-fg-muted); font-weight: 400; }
.sv-acct-mail__end { text-align: right; }
@media (max-width: 575.98px) {
  .sv-acct-mail__subject .sv-row__icon { display: none; }
}

/* --- Affiliates ------------------------------------------------------------- */
.sv-acct-ref { display: flex; gap: var(--sv-2); }
.sv-acct-ref .form-control { flex: 1; min-width: 0; font-family: var(--sv-font-mono); font-size: 13px; }
.sv-acct-ref .sv-btn { flex: none; height: 44px; }
.sv-acct-payout .sv-kv { margin-bottom: var(--sv-4); }
.sv-acct-payout .sv-kv dd { text-align: right; font-weight: 600; }
.sv-acct-payout form { margin: 0; }
.sv-acct-payout__hint { margin: var(--sv-2) 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); text-align: center; }
.sv-acct-linkcode { overflow-x: auto; text-align: center; }
.sv-acct-linkcode img { max-width: 100%; height: auto; }
.sv-acct-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sv-4); margin: var(--sv-6) 0; padding: 0; list-style: none; }
.sv-acct-perks li { display: flex; gap: var(--sv-3); padding: var(--sv-4); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); color: var(--sv-fg); font-size: var(--sv-text-small); }
.sv-acct-perks .sv-icon { flex: none; color: var(--sv-success); margin-top: 2px; }
.sv-acct-hero { padding: var(--sv-8); }
.sv-acct-hero__title { margin: var(--sv-4) 0 0; font: 500 var(--sv-text-h2)/1.3 var(--sv-font-display); }
.sv-acct-hero__lede { margin: var(--sv-2) 0 0; max-width: 640px; color: var(--sv-fg-secondary); }
@media (max-width: 767.98px) {
  .sv-acct-perks { grid-template-columns: minmax(0, 1fr); }
  .sv-acct-hero { padding: var(--sv-5); }
}
@media (max-width: 479.98px) {
  .sv-acct-ref { flex-wrap: wrap; }
  .sv-acct-ref .sv-btn { width: 100%; }
}

/* --- Empty-state cards with extra content (access denied, verify email) ---- */
.sv-acct-state .sv-empty { padding-left: var(--sv-6); padding-right: var(--sv-6); }
.sv-acct-state .sv-empty__icon--success { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-acct-state .sv-empty__icon--warning { background: var(--sv-warning-soft); color: var(--sv-warning); }
.sv-acct-state .sv-empty__icon--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-acct-state__list { width: 100%; max-width: 420px; margin: var(--sv-2) 0; padding: 0; list-style: none; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); text-align: left; }
.sv-acct-state__list li { display: flex; align-items: center; gap: var(--sv-2); padding: 10px 14px; border-top: 1px solid var(--sv-line-subtle); font-size: var(--sv-text-small); }
.sv-acct-state__list li:first-child { border-top: 0; }
.sv-acct-state__list .sv-icon { color: var(--sv-success); flex: none; }

/* --- Auth-layout pages (invite accept, forced switch) ---------------------- */
.sv-acct-auth .sv-tabs { margin-bottom: var(--sv-5); }
.sv-acct-auth .sv-tabs a { display: block; }
.sv-acct-auth .tab-content > .tab-pane { display: none; }
.sv-acct-auth .tab-content > .active { display: block; }
.sv-acct-auth__mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--sv-4); border-radius: var(--sv-radius-lg); background: var(--sv-primary-soft); color: var(--sv-primary); }
.sv-acct-auth__mark--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-acct-auth .password-strength-meter .progress { margin: var(--sv-3) 0 var(--sv-1) !important; }
.sv-acct-auth .sv-acct-tos.form-check { margin-bottom: var(--sv-4); }
.sv-acct-account--static:hover { border-color: var(--sv-line); box-shadow: none; }
.sv-acct .sv-stat > div { min-width: 0; }
.sv-acct .sv-stat__label, .sv-acct .sv-stat__value, .sv-acct .sv-stat__meta { overflow-wrap: anywhere; }
.sv-acct-auth .invite-box { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
.sv-acct-mail__when { display: none; }
.sv-acct-select.select-account { margin: 0; border-top: 0; }
.sv-acct-select.select-account a.sv-acct-account { display: flex; margin: 0; padding: var(--sv-5); border: 1px solid var(--sv-line); }
.sv-acct-select.select-account a.sv-acct-account:hover { background-color: var(--sv-surface); border-color: var(--sv-primary); }
.sv-acct-select.select-account a.sv-acct-account.disabled { opacity: 0.55; }
@media (max-width: 575.98px) {
  .sv-acct-mail > thead > tr > th:first-child, .sv-acct-mail > tbody > tr > td.sv-acct-mail__date { display: none; }
  .sv-acct-mail__when { display: block; margin-top: 2px; color: var(--sv-fg-muted); font: 400 var(--sv-text-micro)/1.4 var(--sv-font-sans); }
  .sv-acct-mail__end .sv-btn { padding-left: 10px; padding-right: 10px; }
}

/* ==========================================================================
   PAGES - billing
   ========================================================================== */

/* ---------------------------------------------------------------- Payment methods list */
.sv-pm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sv-4); flex-wrap: wrap; }
.sv-pm__head .sv-card__sub { margin: 4px 0 0; max-width: 56ch; }
.sv-pm__actions { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-pm__list { list-style: none; margin: 0; padding: 0; }
.sv-pm__row { align-items: center; }
.sv-pm__brand { font-size: 20px; }
.sv-pm__brand i { line-height: 1; }
.sv-pm__name { display: flex; align-items: center; gap: var(--sv-2); white-space: normal; }
.sv-pm__default {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
    background: var(--sv-info-soft); color: var(--sv-primary);
    font: 600 var(--sv-text-micro)/1 var(--sv-font-display); letter-spacing: .02em;
}
.sv-pm__row--default { box-shadow: inset 3px 0 0 var(--sv-primary); }
.sv-pm__row--expired .sv-pm__brand { opacity: .55; }
.sv-pm__btns { flex-wrap: wrap; justify-content: flex-end; }
.sv-pm__btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.sv-pm__btns .btn.disabled { opacity: .45; }
.sv-pm__btns .sv-pm__delete:hover { color: var(--sv-danger); border-color: var(--sv-danger); }
.sv-pm__empty { list-style: none; }
@media (max-width: 767.98px) {
    .sv-pm__status { margin-left: 48px; }
    .sv-pm__btns { flex-basis: 100%; justify-content: flex-start; margin-left: 48px; }
}
@media (max-width: 575.98px) {
    .sv-pm__actions, .sv-pm__actions .sv-btn { width: 100%; }
    .sv-pm__btns { margin-left: 0; }
}

/* ---------------------------------------------------------------- Add / edit payment method
   Stock gateway markup, restyled only: labels stack above fields (hPanel-like). */
.sv-pm-manage { max-width: 760px; }
.sv-pm-manage__head { display: flex; align-items: center; gap: var(--sv-3); margin-bottom: var(--sv-6); padding-bottom: var(--sv-5); border-bottom: 1px solid var(--sv-line-subtle); }
.sv-pm-manage .sv-pm-manage__head .card-title { margin: 0; font: 600 var(--sv-text-h3)/1.35 var(--sv-font-display); }
.sv-pm-manage__back { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-pm-manage__back:hover { color: var(--sv-primary); }
.sv-pm-manage .form-group.row { display: block; margin: 0 0 var(--sv-5); }
.sv-pm-manage .form-group.row > [class*="col-"] { max-width: 100%; width: 100%; padding: 0; margin-left: 0; }
.sv-pm-manage .form-group.row > .control-label { display: block; margin-bottom: 6px; padding: 0; color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); text-align: left; }
.sv-pm-manage .form-group .row { margin: 0; }
.sv-pm-manage .form-group .row > [class*="col-"] { padding: 0; }
.sv-pm-manage .cc-details .col-md-8 > .row > .col-md-8 { max-width: 420px; flex: 0 0 100%; }
.sv-pm-manage .cc-details .col-md-8 > .row > .col-md-4 { max-width: 160px; flex: 0 0 100%; }
.sv-pm-manage .field-error-msg { margin-top: 6px; color: var(--sv-danger); }
.sv-pm-manage #inputCardCvc { display: inline-block; width: 120px; }
.sv-pm-manage #cvvWhereLink { font-size: var(--sv-text-small); }
/* Payment type + account type radios as selectable tiles */
.sv-pm-manage .form-check-inline {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 var(--sv-2) var(--sv-2) 0;
    padding: 12px 16px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md);
    background: var(--sv-surface); color: var(--sv-fg); font-weight: 500; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.sv-pm-manage .form-check-inline:hover { border-color: var(--sv-primary); }
.sv-pm-manage .form-check-inline:has(input:checked),
.sv-pm-manage .form-check-inline:has(.checked) { border-color: var(--sv-primary); box-shadow: 0 0 0 1px var(--sv-primary); }
.sv-pm-manage .form-check-inline:has(input:disabled) { cursor: default; }
.sv-pm-manage .form-check-inline > input[type="radio"] { position: static; margin: 0; accent-color: var(--sv-primary); }
/* Billing address choices (account-paymentmethods-billing-contacts.tpl) */
.sv-bc { display: grid; gap: var(--sv-2); }
.sv-bc > br { display: none; }
.sv-pm-manage .sv-bc .sv-bc__opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; padding: 12px 16px; font-weight: 400; font-size: var(--sv-text-small); color: var(--sv-fg-secondary); line-height: 1.5; }
.sv-bc .sv-bc__opt > input, .sv-bc .sv-bc__opt > div { align-self: center; margin-right: 6px; }
.sv-bc .sv-bc__opt .name { flex-basis: 100%; color: var(--sv-fg); font-weight: 600; }
.sv-pm-manage .sv-bc .sv-bc__opt .name { flex-basis: auto; margin-right: 6px; }
.sv-pm-manage .submit-container { margin-top: var(--sv-6); padding-top: var(--sv-5); border-top: 1px solid var(--sv-line-subtle); }
.sv-pm-manage .submit-container .btn { margin-right: var(--sv-2); }
.sv-pm-manage .fieldgroup-remoteinput iframe { max-width: 100%; border: 1px solid var(--sv-line-subtle); border-radius: var(--sv-radius-md); }
.sv-pm-manage .gateway-errors { margin-bottom: var(--sv-5); }
.sv-pm-modal .modal-body .row { row-gap: 0; }
@media (max-width: 575.98px) {
    .sv-pm-manage .form-check-inline { display: flex; width: 100%; margin-right: 0; }
    .sv-pm-manage .submit-container .btn { width: 100%; margin: 0 0 var(--sv-2); }
}

/* ---------------------------------------------------------------- Quotes list */
.sv-quotes__subject { max-width: 360px; }
.sv-quotes__dl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sv-quotes form { margin: 0; }

/* ---------------------------------------------------------------- Mass payment */
.sv-mp .sv-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sv-4); }
.sv-mp .sv-card__sub { margin: 4px 0 0; }
.sv-mp__count {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
    border-radius: 999px; background: var(--sv-info-soft); color: var(--sv-primary); font: 600 var(--sv-text-small)/1 var(--sv-font-display);
}
.sv-mp__cols { display: flex; justify-content: space-between; padding: 12px var(--sv-6) 0; color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: .06em; text-transform: uppercase; }
.sv-mp__list { list-style: none; margin: 0; padding: 0 var(--sv-6) var(--sv-3); }
.sv-mp__inv { padding: var(--sv-4) 0; border-bottom: 1px solid var(--sv-line-subtle); }
.sv-mp__inv:last-child { border-bottom: 0; }
.sv-mp__inv-head { display: flex; align-items: center; gap: var(--sv-3); }
.sv-mp__check {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 6px; background: var(--sv-primary); color: #fff;
}
.sv-mp__inv-num { color: var(--sv-fg); font: 600 var(--sv-text-body)/1.3 var(--sv-font-display); }
.sv-mp__inv-link { margin-left: auto; font-size: var(--sv-text-small); white-space: nowrap; }
.sv-mp__lines { margin-top: 6px; }
.sv-mp__lines tr.masspay-invoice-detail td { padding: 8px 0 8px 34px; border-bottom: 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-mp__lines tr.masspay-invoice-detail td.sv-num { padding-left: var(--sv-4); color: var(--sv-fg); }
.sv-mp__side { position: sticky; top: 88px; }
.sv-mp__totals tr.masspay-total td { padding: 8px 0; border-bottom: 0; background: transparent; font-weight: 400; color: var(--sv-fg-secondary); }
.sv-mp__totals tr.masspay-total td.sv-num { color: var(--sv-fg); }
.sv-mp__due { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sv-3); padding-top: var(--sv-4); border-top: 1px solid var(--sv-line); }
.sv-mp__due-label { color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: .06em; text-transform: uppercase; }
.sv-mp__pay { margin: var(--sv-5) 0 0; padding: 0; border: 0; min-width: 0; }
.sv-mp__pay .form-group { margin-bottom: var(--sv-4); }
@media (max-width: 991.98px) { .sv-mp__side { position: static; } }
@media (max-width: 575.98px) {
    .sv-mp__list { padding: 0 var(--sv-5) var(--sv-2); }
    .sv-mp__cols { padding: 12px var(--sv-5) 0; }
    .sv-mp__lines tr.masspay-invoice-detail td { padding-left: 0; }
}

/* ---------------------------------------------------------------- Add funds */
.sv-af__head { display: flex; align-items: center; gap: var(--sv-3); }
.sv-af__amount { font: 500 22px/1.2 var(--sv-font-display); font-variant-numeric: tabular-nums; }
.sv-af form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sv-af__foot { display: flex; align-items: flex-start; gap: var(--sv-2); color: var(--sv-fg-muted); }
.sv-af__foot .sv-icon { flex: none; margin-top: 2px; }
.sv-af__kv dd { text-align: right; font-weight: 600; }
.sv-af__kv dt, .sv-af__kv dd { padding: 12px 0; }
@media (max-width: 575.98px) {
    .sv-af__kv { grid-template-columns: 1fr auto; }
    .sv-af__kv dd { padding-top: 12px; border-top: 1px solid var(--sv-line-subtle); }
    .sv-af__kv > dt:first-of-type + dd { border-top: 0; }
}

/* ---------------------------------------------------------------- Pay invoice (invoice-payment.tpl)
   Stock gateway markup; classes added only. */
.sv-pay__grid { row-gap: var(--sv-6); }
.sv-pay .card-title.sv-pay__title { display: flex; align-items: center; gap: var(--sv-3); margin: 0 0 var(--sv-6); padding: 0 0 var(--sv-5); border-bottom: 1px solid var(--sv-line-subtle); font: 600 var(--sv-text-h3)/1.35 var(--sv-font-display); }
.sv-pay .cc-payment-form .form-group.row,
.sv-pay #paymentGatewayInput .form-group.row { display: block; margin: 0 0 var(--sv-5); }
.sv-pay #paymentGatewayInput .form-group.row > [class*="col-"] { max-width: 100%; width: 100%; padding: 0; margin-left: 0; text-align: left !important; }
.sv-pay #paymentGatewayInput .form-group.row > label { display: block; margin-bottom: 6px; padding: 0; color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }
.sv-pay #paymentGatewayInput .field-error-msg { margin-top: 6px; color: var(--sv-danger); }
.sv-pay #inputCardCvv { display: inline-block; width: 120px; }
/* Saved cards grid from payment/card/select.tpl */
.sv-pay .three-column-grid {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center;
    width: 100%; column-gap: 0; margin-bottom: var(--sv-2); font-weight: 400; font-size: var(--sv-text-small);
}
.sv-pay .three-column-grid > div { align-self: stretch; display: flex; align-items: center; margin: 0; padding: 12px var(--sv-3) 12px 0; border-bottom: 1px solid var(--sv-line-subtle); }
.sv-pay .paymethod-info label { margin: 0; color: var(--sv-fg); }
.sv-pay .paymethod-info:not(.three-column-grid *) { margin: 4px 0 var(--sv-3); }
.sv-pay .paymethod-info:not(.three-column-grid *) label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.sv-pay #btnSubmitContainer { margin: var(--sv-6) 0 0; padding-top: var(--sv-5); border-top: 1px solid var(--sv-line-subtle); }
.sv-pay #btnSubmitContainer .text-center { text-align: left !important; }
.sv-pay #btnSubmit { min-width: 220px; height: 48px; font-size: var(--sv-text-body); }
.sv-pay #invoiceIdSummary { position: sticky; top: 88px; }
.sv-pay .invoice-summary h2 { margin: 0 0 var(--sv-2); text-align: left !important; color: var(--sv-fg); font: 600 var(--sv-text-h3)/1.3 var(--sv-font-display); }
.sv-pay .invoice-summary-table { max-height: none; margin: var(--sv-4) 0; }
.sv-pay .invoice-summary-table table { margin: 0; }
.sv-pay .invoice-summary-table td { padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--sv-line-subtle); font-size: var(--sv-text-small); color: var(--sv-fg); text-align: left !important; }
.sv-pay .invoice-summary-table tr:first-child td { color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: .06em; text-transform: uppercase; }
.sv-pay .invoice-summary-table td + td { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: var(--sv-3); }
.sv-pay .invoice-summary-table td.total-row { background: transparent; font-weight: 400; color: var(--sv-fg-secondary); border-bottom: 0; padding: 6px 0; }
.sv-pay .invoice-summary-table td.total-row:first-child { text-align: right !important; }
.sv-pay .invoice-summary-table tr:last-child td.total-row { padding-top: 12px; border-top: 1px solid var(--sv-line); color: var(--sv-fg); font-weight: 600; }
.sv-pay .invoice-summary .alert { text-align: left !important; display: flex; justify-content: space-between; }
.sv-pay__secure { display: flex; align-items: center; gap: var(--sv-2); margin-top: var(--sv-6); background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); }
.sv-pay-remote { max-width: 760px; margin: 0 auto; }
.sv-pay-remote__head { display: flex; align-items: center; gap: var(--sv-3); margin-bottom: var(--sv-5); }
.sv-pay-remote iframe { width: 100%; max-width: 100%; border: 1px solid var(--sv-line-subtle); border-radius: var(--sv-radius-md); }
@media (max-width: 767.98px) {
    .sv-pay #invoiceIdSummary { position: static; }
    .sv-pay #btnSubmit { width: 100%; }
    .sv-pay .three-column-grid { grid-template-columns: auto auto minmax(0, 1fr) auto; }
    .sv-pay .three-column-grid > div:nth-child(5n+4) { display: none; }
}

/* ---------------------------------------------------------------- 3-D Secure */
.sv-3ds { display: flex; justify-content: center; }
.sv-3ds__card { width: 100%; max-width: 640px; padding: var(--sv-8) var(--sv-6) var(--sv-6); text-align: center; }
.sv-3ds__head { display: flex; flex-direction: column; align-items: center; gap: var(--sv-4); }
.sv-3ds__mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sv-info-soft); color: var(--sv-primary); }
.sv-3ds__note { width: 100%; margin: 0; }
.sv-3ds .card { margin: var(--sv-5) 0 0; border: 1px solid var(--sv-line-subtle); box-shadow: none; background: var(--sv-canvas-inset); }
.sv-3ds .card-body { padding: 0; }
.sv-3ds iframe.submit-3d { display: block; width: 100%; max-width: 100%; border: 0; background: #fff; border-radius: var(--sv-radius-md); }
.sv-3ds__foot { display: inline-flex; align-items: center; gap: 6px; margin: var(--sv-4) 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
@media (max-width: 575.98px) { .sv-3ds__card { padding: var(--sv-6) var(--sv-4) var(--sv-4); } }

/* ---------------------------------------------------------------- Subscription manage */
.sv-sub { display: flex; justify-content: center; }
.sv-sub__card { width: 100%; max-width: 540px; text-align: center; padding: var(--sv-10, 40px) var(--sv-6) var(--sv-8); }
.sv-sub__mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--sv-4); border-radius: 16px; background: var(--sv-info-soft); color: var(--sv-info); }
.sv-sub__mark--success { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-sub__mark--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-sub__title { margin: 0 0 var(--sv-2); color: var(--sv-fg); font: 600 var(--sv-text-h3)/1.3 var(--sv-font-display); }
.sv-sub__body { margin: 0 0 var(--sv-2); color: var(--sv-fg-secondary); }
.sv-sub__card .alert { margin: 0; }
.sv-sub__actions { margin-top: var(--sv-6); }

/* Billing address choice inside payment/billing-address.tpl (invoice payment) */
.sv-pay #billingAddressChoice label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 var(--sv-2); padding: 12px 16px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); font-weight: 400; font-size: var(--sv-text-small); color: var(--sv-fg-secondary); cursor: pointer; }
.sv-pay #billingAddressChoice label:has(input:checked), .sv-pay #billingAddressChoice label:has(.checked) { border-color: var(--sv-primary); box-shadow: 0 0 0 1px var(--sv-primary); }
.sv-pay #billingAddressChoice label > input, .sv-pay #billingAddressChoice label > div { margin-right: 6px; }
.sv-pay #billingAddressChoice .name { color: var(--sv-fg); margin-right: 6px; }
.sv-pay #billingAddressChoice br { display: none; }

/* ==========================================================================
   PAGES - services
   ========================================================================== */
/* Domain management, upgrades, cancellation, usage billing and SSL pages.
   Every selector is prefixed .sv-s- (or scoped under one) so nothing leaks. */

/* ---- Shared helpers ---------------------------------------------------- */
.sv-s-back { margin: 0 0 var(--sv-4); }
.sv-s-back a { display: inline-flex; align-items: center; gap: 4px; color: var(--sv-fg-secondary); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }
.sv-s-back a:hover { color: var(--sv-fg); text-decoration: none; }

.sv-s-headicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--sv-radius-md); background: var(--sv-primary-soft); color: var(--sv-primary); }
.sv-s-headicon--danger { background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-card__head > .sv-s-headicon + div,
.sv-card__head > .sv-s-headicon + h2 { flex: 1; min-width: 0; }
.sv-card__head > div:only-child { flex: 1; min-width: 0; }

.sv-s-eyebrow { margin: 0; color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.sv-s-center { text-align: center; padding: 0 var(--sv-6) var(--sv-6); margin: 0; }
.sv-s-narrow { max-width: 420px; }
.sv-s-note { margin: var(--sv-3) 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }

.sv-s-formfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sv-2); margin-top: var(--sv-5); padding-top: var(--sv-5); border-top: 1px solid var(--sv-line-subtle); }
.sv-s-formfoot--start { justify-content: flex-start; }
@media (max-width: 575.98px) {
  .sv-s-formfoot { justify-content: stretch; }
  .sv-s-formfoot > .btn { flex: 1 1 auto; }
}

.sv-s-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sv-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.sv-s-fieldgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-s-fieldgrid > .form-group { min-width: 0; }
@media (max-width: 767.98px) {
  .sv-s-fieldgrid, .sv-s-fieldgrid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Radio choices as bordered tiles (nameserver mode, WHOIS source, SSL method). */
.sv-s-choices { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin-bottom: var(--sv-5); }
.sv-s-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sv-2);
  flex: 1 1 220px;
  margin: 0;
  padding: var(--sv-3) var(--sv-4);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-md);
  background: var(--sv-surface);
  cursor: pointer;
  transition: border-color var(--sv-fast) var(--sv-ease-hover), background-color var(--sv-fast) var(--sv-ease-hover);
}
.sv-s-choice:hover { border-color: var(--sv-line-strong); }
.sv-s-choice:has(input:checked) { border-color: var(--sv-primary); background: var(--sv-primary-soft); }
.sv-s-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--sv-primary-soft-active); }
.sv-s-choice .form-check-input,
.sv-s-choice input[type="radio"] { position: static; margin: 0; flex: none; width: 16px; height: 16px; accent-color: var(--sv-primary); }
.sv-s-choice__text { color: var(--sv-fg); font: 500 var(--sv-text-small)/1.4 var(--sv-font-display); }
.sv-s-choice.form-check { padding-left: var(--sv-4); }
.sv-s-choices--methods .sv-s-choice { flex: 1 1 180px; }

.sv-s-check { display: inline-flex; align-items: flex-start; gap: var(--sv-2); margin: 0; font-weight: 500; color: var(--sv-fg); cursor: pointer; }
.sv-s-check input { position: static; margin: 3px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--sv-primary); }

/* ---- Domain details ---------------------------------------------------- */
.sv-s-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-4);
  margin-top: var(--sv-5);
  padding: var(--sv-5);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-canvas-secondary);
}
.sv-s-toggle__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--sv-danger-soft); color: var(--sv-danger); }
.sv-s-toggle__icon--on { background: var(--sv-success-soft); color: var(--sv-success); }
.sv-s-toggle__text { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sv-s-toggle__label { color: var(--sv-fg); font: 600 var(--sv-text-body)/1.35 var(--sv-font-display); }
.sv-s-toggle form { margin: 0; }
@media (max-width: 575.98px) {
  .sv-s-toggle form, .sv-s-toggle form .btn { width: 100%; }
}

.sv-s-addon { align-items: flex-start; }
.sv-s-addon .sv-row__main { min-width: 0; }
.sv-s-addon__desc { display: block; margin-top: 2px; color: var(--sv-fg-muted); font-size: var(--sv-text-small); line-height: 1.5; }
.sv-s-addon .sv-row__end { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 575.98px) {
  .sv-s-addon .sv-row__end { margin-left: 48px; justify-content: flex-start; }
}

/* ---- Editable record rows (DNS, email forwarding) ---------------------- */
.sv-s-edit-wrap { margin: 0 calc(var(--sv-6) * -1); }
.sv-s-edit { width: 100%; border-collapse: collapse; font-size: var(--sv-text-small); }
.sv-s-edit th {
  padding: 10px var(--sv-2);
  border-bottom: 1px solid var(--sv-line);
  color: var(--sv-fg-muted);
  font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-s-edit td { padding: var(--sv-2); border-bottom: 1px solid var(--sv-line-subtle); vertical-align: middle; }
.sv-s-edit th:first-child, .sv-s-edit td:first-child { padding-left: var(--sv-6); }
.sv-s-edit th:last-child, .sv-s-edit td:last-child { padding-right: var(--sv-6); }
.sv-s-edit .form-control { min-width: 0; width: 100%; }
.sv-s-edit--dns th:nth-child(2) { width: 150px; }
.sv-s-edit--dns th:nth-child(4) { width: 120px; }
.sv-s-edit--fwd th:nth-child(2) { width: 1%; }
.sv-s-edit__at { white-space: nowrap; color: var(--sv-fg-secondary); }
.sv-s-edit__at .sv-icon { margin-left: var(--sv-2); color: var(--sv-fg-muted); vertical-align: -3px; }
.sv-s-edit__new td { background: var(--sv-canvas-secondary); border-bottom: 0; }
.sv-s-edit__tag { display: none; }
.sv-s-edit__empty td { padding: 0; }
.sv-s-edit__empty .sv-empty { padding: var(--sv-5); }
@media (max-width: 767.98px) {
  .sv-s-edit-wrap { margin: 0 calc(var(--sv-5) * -1); }
  .sv-s-edit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-s-edit, .sv-s-edit tbody, .sv-s-edit tr, .sv-s-edit td { display: block; width: 100%; }
  .sv-s-edit tr { padding: var(--sv-3) var(--sv-5); border-bottom: 1px solid var(--sv-line-subtle); }
  .sv-s-edit td, .sv-s-edit td:first-child, .sv-s-edit td:last-child { padding: 4px 0; border: 0; }
  .sv-s-edit td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.04em; text-transform: uppercase; }
  .sv-s-edit__new { background: var(--sv-canvas-secondary); }
  .sv-s-edit__new td { background: transparent; }
  .sv-s-edit__tag { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--sv-2); color: var(--sv-primary); font: 600 var(--sv-text-small)/1.4 var(--sv-font-display); }
  .sv-s-edit__new td:first-child { display: flex; flex-direction: column; }
  .sv-s-edit__new .sv-s-edit__tag { order: -1; align-self: flex-start; }
  .sv-s-edit__at { padding: 0 0 4px !important; }
  .sv-s-edit__empty td { padding: 0 !important; }
  .sv-s-edit__empty, .sv-s-edit__empty td { padding: 0; }
}

/* ---- Contacts (WHOIS) tabs --------------------------------------------- */
.sv-s-contacts .sv-s-navtabs { display: flex; flex-wrap: nowrap; gap: var(--sv-1); margin: 0 0 var(--sv-5); padding: 0; border-bottom: 1px solid var(--sv-line); overflow-x: auto; scrollbar-width: none; }
.sv-s-contacts .sv-s-navtabs::-webkit-scrollbar { display: none; }
.sv-s-contacts .sv-s-navtabs .nav-item { margin: 0; }
.sv-s-contacts .sv-s-navtabs .nav-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-bottom: -1px;
  padding: 0 var(--sv-3);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--sv-fg-secondary);
  font: 500 var(--sv-text-small)/1 var(--sv-font-display);
  white-space: nowrap;
}
.sv-s-contacts .sv-s-navtabs .nav-link:hover { color: var(--sv-fg); }
.sv-s-contacts .sv-s-navtabs .nav-link.active { color: var(--sv-fg); border-bottom-color: var(--sv-primary); background: none; }
.sv-s-contacts .responsive-tabs-sm-connector { display: none; }
.sv-s-tabbody { padding: 0; }

/* ---- Transfer code ----------------------------------------------------- */
.sv-s-code { padding: var(--sv-4); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-canvas-secondary); }
.sv-s-code__label { display: block; margin-bottom: var(--sv-2); color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-s-code__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-3); }
.sv-s-code__value { flex: 1; min-width: 0; padding: var(--sv-2) var(--sv-3); border-radius: var(--sv-radius-md); background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-fg); font: 500 1rem/1.4 var(--sv-font-mono); overflow-wrap: anywhere; }

/* ---- Bulk management --------------------------------------------------- */
.sv-s-affected { margin-bottom: var(--sv-5); }
.sv-s-affected__label { margin: 0 0 var(--sv-2); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.sv-s-affected__list { display: flex; flex-wrap: wrap; flex-direction: row; gap: var(--sv-2); margin: 0; padding: 0; list-style: none; }
.sv-s-affected__list .list-group-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-full);
  background: var(--sv-surface);
  color: var(--sv-fg);
  font: 500 var(--sv-text-small)/1.3 var(--sv-font-display);
}
.sv-s-affected__list .list-group-item + .list-group-item { border-top-width: 1px; }
.sv-s-affected__list .sv-icon { color: var(--sv-fg-muted); }

/* ---- Domain pricing ---------------------------------------------------- */
.sv-s-tlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sv-3); }
.sv-s-tlds .sv-s-tld { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sv-2); margin: 0; padding: var(--sv-4); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); }
.sv-s-tlds .sv-s-tld .img-container { display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; padding: 0; background: none; }
.sv-s-tlds .sv-s-tld .img-container img { max-height: 36px; max-width: 100%; width: auto; }
.sv-s-tlds .sv-s-tld .price { margin: 0; padding: 0; background: none; color: var(--sv-fg); font: 600 var(--sv-text-small)/1.3 var(--sv-font-display); text-align: center; }
.sv-s-currency { flex: none; margin: 0; }
.sv-s-currency select { min-width: 200px; }
.sv-s-pricing .tld-filters .badge { padding: 6px 12px; border-radius: var(--sv-radius-full); font-size: var(--sv-text-small); font-weight: 500; }
.sv-s-pricing .tld-filters .sv-chip.badge-secondary { background: var(--sv-surface); color: var(--sv-fg-secondary); }
.sv-s-pricing .tld-filters .sv-chip.badge-success { background: var(--sv-fg); border-color: var(--sv-fg); color: #fff; }
.sv-s-chipcount { margin-left: 4px; color: inherit; opacity: 0.6; font-variant-numeric: tabular-nums; }
.sv-s-tldname { color: var(--sv-fg); font: 600 var(--sv-text-body)/1.3 var(--sv-font-display); }
.sv-s-price { display: block; color: var(--sv-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.sv-s-pricetable small { color: var(--sv-fg-muted); }
.sv-s-pricetable > tbody > tr { cursor: default; }
@media (max-width: 575.98px) {
  .sv-s-pricing .sv-section__head { flex-wrap: wrap; }
  .sv-s-currency, .sv-s-currency select { width: 100%; }
}

/* ---- Cancellation request ---------------------------------------------- */
.sv-s-cancel { max-width: 820px; border-color: var(--sv-danger-soft); }
.sv-s-cancel__head { display: flex; align-items: flex-start; gap: var(--sv-4); padding: var(--sv-5) var(--sv-6); border-bottom: 1px solid var(--sv-line-subtle); background: var(--sv-danger-soft); border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0; }
.sv-s-cancel__head .sv-s-headicon { background: var(--sv-surface); }
.sv-s-cancel__svc { margin: 4px 0 0; color: var(--sv-fg); font-size: var(--sv-text-small); overflow-wrap: anywhere; }
.sv-s-cancel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
@media (max-width: 575.98px) {
  .sv-s-cancel__head { padding: var(--sv-4) var(--sv-5); }
}

/* ---- Upgrade flow ------------------------------------------------------ */
.sv-s-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-4); }
.sv-s-current__text { flex: 1; min-width: 180px; }
.sv-s-current__name { margin: 2px 0 0; color: var(--sv-fg); font: 500 var(--sv-text-h3)/1.35 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-s-current__sub { margin: 2px 0 0; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }

.sv-s-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sv-4); }
.sv-s-plan { display: flex; flex-direction: column; margin: 0; padding: var(--sv-5); transition: border-color var(--sv-fast) var(--sv-ease-hover), box-shadow var(--sv-normal) var(--sv-ease-hover); }
.sv-s-plan:hover, .sv-s-plan:focus-within { border-color: var(--sv-line-strong); box-shadow: var(--sv-shadow-e2); }
.sv-s-plan--recommended { border-color: var(--sv-primary); box-shadow: 0 0 0 1px var(--sv-primary); }
.sv-s-plan--recommended:hover, .sv-s-plan--recommended:focus-within { border-color: var(--sv-primary); }
.sv-s-plan--current { background: var(--sv-canvas-secondary); }
.sv-s-plan__head { margin: 0; padding: 0; background: none; border: 0; text-align: left; }
.sv-s-plan__badges { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-s-plan__badges:not(:empty) { margin-bottom: var(--sv-3); }
.sv-s-plan__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--sv-radius-sm); background: var(--sv-primary); color: #fff; font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); }
.sv-s-plan__name { margin: 2px 0 0; color: var(--sv-fg); font: 500 1.25rem/1.3 var(--sv-font-display); }
.sv-s-plan__desc { margin-top: var(--sv-2); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); line-height: 1.55; overflow-wrap: anywhere; }
.sv-s-plan__price { display: block; color: var(--sv-fg); font: 500 1.5rem/1.2 var(--sv-font-display); font-variant-numeric: tabular-nums; }
.sv-s-plan__price small { color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-s-plan__features { margin: var(--sv-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sv-line-subtle); }
.sv-s-plan__features li { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-3); padding: 8px 0; border-bottom: 1px solid var(--sv-line-subtle); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }
.sv-s-plan__features strong { color: var(--sv-fg); font-weight: 600; text-align: right; }
.sv-s-plan__foot { margin-top: auto; padding: var(--sv-4) 0 0; background: none; border: 0; }
.sv-s-plan__foot form { margin: 0; }
.sv-s-plan__foot .form-group { margin-bottom: var(--sv-3); }
.sv-s-yes { color: var(--sv-success); display: inline-flex; }
.sv-s-no { color: var(--sv-fg-muted); display: inline-flex; }
.sv-s-qty { width: 96px; flex: none; }
/* Neutralise twenty-one's .upgrade .products .product chrome on our cards. */
.sv-s-upgrade .products.sv-s-plans { margin: 0; }
.sv-s-upgrade .products .product.sv-s-plan { margin: 0; padding: var(--sv-5); background: var(--sv-surface); }
.sv-s-upgrade .products .product.sv-s-plan--current { background: var(--sv-canvas-secondary); }
.sv-s-upgrade .products .product .header.sv-s-plan__head { margin: 0; padding: 0; min-height: 0; background: none; color: var(--sv-fg); }
.sv-s-upgrade .products .product .current.sv-status { padding: 3px 10px; background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); font-weight: 600; text-align: left; }
.sv-s-upgrade .products .product .recommended.sv-s-plan__badge { padding: 3px 10px; background: var(--sv-primary); color: #fff; text-align: left; }
.sv-s-upgrade .products .product ul.sv-s-plan__features { margin: var(--sv-4) 0 0; padding: 0; border-left: 0; border-right: 0; border-top: 1px solid var(--sv-line-subtle); }
.sv-s-upgrade .products .product ul.sv-s-plan__features li { line-height: 1.4; font-size: var(--sv-text-small); text-align: left; color: var(--sv-fg-secondary); border-bottom: 1px solid var(--sv-line-subtle); }
.sv-s-upgrade .products .product ul.sv-s-plan__features li span { float: none; color: var(--sv-fg-secondary); }
.sv-s-upgrade .products .product ul.sv-s-plan__features .sv-s-yes { color: var(--sv-success); }
.sv-s-upgrade .products .product ul.sv-s-plan__features .sv-s-no { color: var(--sv-fg-muted); }
.sv-s-upgrade .products .product .footer.sv-s-plan__foot { margin: auto 0 0; padding: var(--sv-4) 0 0; border: 0; }
.sv-s-upgrade .products .product .footer select { margin-bottom: 0; }
.sv-s-upgrade .products .product .btn-default { background: var(--sv-surface); color: var(--sv-fg); }
.sv-s-upgrade .products .product .btn-primary { background: var(--sv-primary); color: #fff; }

.sv-s-opts { margin: 0; padding: 0; list-style: none; }
.sv-s-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sv-4); padding: var(--sv-4) 0; border-top: 1px solid var(--sv-line-subtle); }
.sv-s-opt:first-child { border-top: 0; padding-top: 0; }
.sv-s-opt__label { display: block; color: var(--sv-fg); font: 600 var(--sv-text-body)/1.35 var(--sv-font-display); }
.sv-s-opt__current { display: block; margin-top: 2px; color: var(--sv-fg-muted); font-size: var(--sv-text-small); }
.sv-s-opt__arrow { color: var(--sv-fg-muted); }
.sv-s-opt__new { margin: 0; }
@media (max-width: 767.98px) {
  .sv-s-opt { grid-template-columns: minmax(0, 1fr); gap: var(--sv-2); }
  .sv-s-opt__arrow { display: none; }
}

.sv-s-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sv-s-change .sv-icon { color: var(--sv-fg-muted); }
.sv-s-summary { position: sticky; top: calc(var(--sv-topbar-h, 64px) + var(--sv-4)); }
.sv-s-totals { margin: 0 0 var(--sv-5); }
.sv-s-totals > div { display: flex; justify-content: space-between; gap: var(--sv-3); padding: 8px 0; font-size: var(--sv-text-small); }
.sv-s-totals dt { color: var(--sv-fg-secondary); font-weight: 400; }
.sv-s-totals dd { margin: 0; color: var(--sv-fg); font-variant-numeric: tabular-nums; text-align: right; }
.sv-s-totals__grand { margin-top: var(--sv-2); padding-top: var(--sv-4) !important; border-top: 1px solid var(--sv-line); }
.sv-s-totals__grand dt, .sv-s-totals__grand dd { color: var(--sv-fg); font: 600 var(--sv-text-body)/1.3 var(--sv-font-display); }
@media (max-width: 1199.98px) {
  .sv-s-summary { position: static; }
}

/* ---- Usage billing ----------------------------------------------------- */
.sv-s-metrics { width: 100%; border-collapse: collapse; font-size: var(--sv-text-small); }
.sv-s-metrics th { padding: 10px 0; border-bottom: 1px solid var(--sv-line); color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.sv-s-metrics td { padding: 14px var(--sv-3) 14px 0; border-bottom: 1px solid var(--sv-line-subtle); color: var(--sv-fg); vertical-align: top; }
.sv-s-metrics tr:last-child td { border-bottom: 0; }
.sv-s-metric__name { display: inline-flex; align-items: center; gap: var(--sv-2); font-weight: 600; }
.sv-s-metric__name .sv-icon { color: var(--sv-primary); }
.sv-s-metric__value { font: 500 1rem/1.3 var(--sv-font-display); font-variant-numeric: tabular-nums; }
.sv-s-metric__note { display: block; color: var(--sv-fg-muted); font-size: var(--sv-text-micro); }
.sv-s-metrics .sv-btn--text { padding-left: 0; padding-right: 0; }
@media (max-width: 767.98px) {
  .sv-s-metrics thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-s-metrics, .sv-s-metrics tbody, .sv-s-metrics tr, .sv-s-metrics td { display: block; width: 100%; }
  .sv-s-metrics tr { padding: var(--sv-3) 0; border-bottom: 1px solid var(--sv-line-subtle); }
  .sv-s-metrics td { padding: 3px 0; border: 0; }
  .sv-s-metrics td[data-label]::before { content: attr(data-label); display: block; color: var(--sv-fg-muted); font: 600 var(--sv-text-micro)/1.4 var(--sv-font-display); letter-spacing: 0.04em; text-transform: uppercase; }
}
.modal-metric-pricing .modal-content { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); }

/* ---- SSL --------------------------------------------------------------- */
.sv-s-steps { display: flex; gap: var(--sv-2); margin: 0 0 var(--sv-6); padding: 0; list-style: none; counter-reset: none; }
.sv-s-step { position: relative; display: flex; align-items: center; gap: var(--sv-2); flex: 1; min-width: 0; color: var(--sv-fg-muted); font: 500 var(--sv-text-small)/1.3 var(--sv-font-display); }
.sv-s-step:not(:last-child)::after { content: ""; flex: 1; height: 1px; min-width: 16px; margin-left: var(--sv-2); background: var(--sv-line); }
.sv-s-step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--sv-line-strong); border-radius: 50%; background: var(--sv-surface); color: var(--sv-fg-secondary); font: 600 var(--sv-text-small)/1 var(--sv-font-display); }
.sv-s-step__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-s-step--current { color: var(--sv-fg); }
.sv-s-step--current .sv-s-step__num { border-color: var(--sv-primary); background: var(--sv-primary); color: #fff; }
.sv-s-step--done { color: var(--sv-fg-secondary); }
.sv-s-step--done .sv-s-step__num { border-color: var(--sv-success); background: var(--sv-success-soft); color: var(--sv-success); }
.sv-s-step--done:not(:last-child)::after { background: var(--sv-success); }
@media (max-width: 575.98px) {
  .sv-s-step:not(.sv-s-step--current) .sv-s-step__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-s-step { flex: 0 1 auto; }
  .sv-s-step--current { flex: 1 1 auto; }
}

.sv-s-csr { font-size: var(--sv-text-small); line-height: 1.5; }
.sv-s-fieldset { margin: var(--sv-5) 0 0; padding: var(--sv-4) 0 0; border: 0; border-top: 1px solid var(--sv-line-subtle); min-width: 0; }
.sv-s-fieldset legend { width: auto; margin: 0 0 var(--sv-3); padding: 0; color: var(--sv-fg); font: 600 var(--sv-text-body)/1.3 var(--sv-font-display); }
.sv-s-modfield { color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }

.sv-s-approvers { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); overflow: hidden; }
.sv-s-approvers .sv-s-approver { display: flex; align-items: center; gap: var(--sv-3); margin: 0; padding: var(--sv-3) var(--sv-4); border: 0; border-top: 1px solid var(--sv-line-subtle); border-radius: 0; cursor: pointer; font-size: var(--sv-text-small); overflow-wrap: anywhere; }
.sv-s-approvers .sv-s-approver:first-child { border-top: 0; }
.sv-s-approvers .sv-s-approver:hover { background: var(--sv-canvas-secondary); }
.sv-s-approvers .sv-s-approver:has(input:checked) { background: var(--sv-primary-soft); }
.sv-s-approvers input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--sv-primary); }

.sv-s-ssldomain { display: inline-flex; align-items: center; gap: var(--sv-3); }
.sv-s-ssldomain .sv-row__icon { width: 36px; height: 36px; }
.sv-s-ssldomain > span:last-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sv-s-vt { margin-left: 4px; }
.sv-s-instant { display: inline-flex; color: var(--sv-warning); }
.sv-s-sslactions { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-s-sslactions form { margin: 0; }
.sv-s-ssltable > tbody > tr { cursor: default; }

/* ==========================================================================
   13. Domains: menu, DNS tab strip, portfolio table
   ========================================================================== */
.sv-btn--outline-brand { background: var(--sv-surface); border: 1px solid var(--sv-brand-200); color: var(--sv-primary); }
.sv-btn--outline-brand:hover, .sv-btn--outline-brand:focus-visible { background: var(--sv-brand-50); border-color: var(--sv-brand-300); color: var(--sv-primary-hover); text-decoration: none; }

.sv-context__back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 0 0 6px -8px; border-radius: var(--sv-radius-sm); color: var(--sv-fg-secondary); font-size: var(--sv-text-small); text-decoration: none; }
.sv-context__back:hover { color: var(--sv-primary); background: var(--sv-canvas-inset); text-decoration: none; }
.sv-context__current { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; color: var(--sv-fg); font: 600 1rem/1.3 var(--sv-font-display); overflow-wrap: anywhere; }
.sv-context__current .sv-icon { color: var(--sv-primary); flex: none; }

.sv-dtabs { display: flex; gap: 4px; margin: 0 0 var(--sv-6); overflow-x: auto; border-bottom: 1px solid var(--sv-line); scrollbar-width: none; }
.sv-dtabs::-webkit-scrollbar { display: none; }
.sv-dtabs__tab { flex: none; padding: 12px 18px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--sv-fg-secondary); font: 600 0.9375rem/1.2 var(--sv-font-display); white-space: nowrap; text-decoration: none; }
.sv-dtabs__tab:hover { color: var(--sv-fg); text-decoration: none; }
.sv-dtabs__tab.is-active { border-bottom-color: var(--sv-primary); color: var(--sv-primary); }

.sv-dl-tools { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; margin: 0 0 var(--sv-4); }
.sv-dl-search { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-md); background: var(--sv-surface); color: var(--sv-fg-muted); }
.sv-dl-search:focus-within { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-brand-100); }
.sv-dl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--sv-fg); font: 400 1rem/1 var(--sv-font-sans); }
.sv-dl-status { margin: 0; }
.sv-dl-status .custom-select { height: 48px; }
.sv-dl-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--sv-4); padding: 10px 14px; border-radius: var(--sv-radius-md); background: var(--sv-brand-50); }
.sv-dl-bulk[hidden] { display: none !important; }
.sv-dl-bulk__count { margin-right: 6px; color: var(--sv-fg); font-size: var(--sv-text-small); }
#tableDomainsList_filter { display: none !important; }
.sv-dl .table-list td, .sv-dl .table-list th { vertical-align: middle; }
.sv-dl__check { width: 52px; }
.sv-dl__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sv-primary); cursor: pointer; }
.sv-dl__name { display: inline-flex; align-items: center; gap: 8px; }
.sv-dl__name a { color: var(--sv-fg); font-weight: 600; }
.sv-dl__status { display: inline-flex; align-items: center; gap: 8px; color: var(--sv-fg-muted); }
.sv-dl__status .label.status { padding: 0; background: none !important; border: 0; color: var(--sv-fg); font: 400 0.9375rem/1.3 var(--sv-font-sans); text-transform: none; letter-spacing: 0; }
.sv-dl__status--active { color: var(--sv-success); }
.sv-dl__status--expired, .sv-dl__status--cancelled, .sv-dl__status--fraud, .sv-dl__status--transferred-away { color: var(--sv-danger); }
.sv-dl__status--pending, .sv-dl__status--pending-transfer, .sv-dl__status--pending-registration, .sv-dl__status--grace, .sv-dl__status--redemption { color: var(--sv-warning); }
.sv-dl__soon { display: block; margin-top: 2px; color: var(--sv-warning); font-size: 0.8125rem; }
.sv-dl__actions { text-align: right; white-space: nowrap; }
.sv-dl__actions .sv-btn + .sv-btn { margin-left: 8px; }
.sv-dl a svg, .sv-dl button svg { pointer-events: none; }

.sv-switch { display: inline-flex; align-items: center; padding: 4px 0; text-decoration: none; }
.sv-switch__track { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: var(--sv-radius-full); background: var(--sv-line-strong); transition: background .15s ease; }
.sv-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 17, .25); transition: transform .15s ease; }
.sv-switch.is-on .sv-switch__track { background: var(--sv-primary); }
.sv-switch.is-on .sv-switch__track::after { transform: translateX(18px); }
.sv-switch:focus-visible { outline: 0; }
.sv-switch:focus-visible .sv-switch__track { box-shadow: 0 0 0 3px var(--sv-brand-200); }

.sv-dl__status .label.status::before, .sv-dl__status .label.status::after { display: none !important; }
.sv-dl__status .label.status { color: var(--sv-fg) !important; }
.sv-dl .table-list thead th { color: var(--sv-fg) !important; font: 600 0.875rem/1.3 var(--sv-font-display) !important; text-transform: none !important; letter-spacing: 0 !important; }
.sv-dl .table-container, .sv-dl.table-container { overflow-x: auto; }

@media (max-width: 767.98px) {
  .sv-dl-tools { grid-template-columns: 1fr; }
  /* Phones: name, status, due date. Auto-renew and Manage are on the domain page, one tap away. */
  .sv-dl .table-list th:nth-child(n+5), .sv-dl .table-list td:nth-child(n+5) { display: none; }
}
@media (max-width: 479.98px) {
  .sv-dl__check { width: 36px; }
  .sv-dl .table-list td, .sv-dl .table-list th { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ==========================================================================
   14. More services (marketplace)
   ========================================================================== */
.sv-mk { max-width: 1240px; }
.sv-mk__filters { margin: 0 0 var(--sv-6); padding: 20px 24px; border: 1px solid var(--sv-line-subtle); border-radius: 20px; background: var(--sv-surface); }
.sv-mk__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.sv-mk__chip { height: 40px; padding: 0 18px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-full); background: var(--sv-surface); color: var(--sv-fg); font: 500 0.9375rem/1 var(--sv-font-display); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sv-mk__chip:hover { border-color: var(--sv-line-strong); background: var(--sv-canvas-inset); }
.sv-mk__chip.is-active { border-color: var(--sv-fg); background: var(--sv-fg); color: #fff; }
.sv-mk__chip:focus-visible { outline: 3px solid var(--sv-brand-200); outline-offset: 2px; }
.sv-mk__search { display: block; margin: 0; }
.sv-mk__search input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-surface); color: var(--sv-fg); font: 400 1rem/1 var(--sv-font-sans); outline: 0; }
.sv-mk__search input:focus { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-brand-100); }

.sv-mk__banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 260px; margin: 0 0 var(--sv-8); padding: 40px; overflow: hidden; border-radius: 24px; color: #fff; text-decoration: none;
  background: radial-gradient(80% 120% at 85% 50%, rgba(31, 85, 255, .55) 0%, rgba(31, 85, 255, 0) 60%), linear-gradient(120deg, var(--sv-brand-950) 0%, var(--sv-brand-900) 55%, #0b2fa8 100%); }
.sv-mk__banner:hover { color: #fff; text-decoration: none; }
.sv-mk__banner:focus-visible { outline: 3px solid var(--sv-brand-300); outline-offset: 3px; }
.sv-mk__banner[hidden] { display: none; }
.sv-mk__banner-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; }
.sv-mk__banner-title { font: 400 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.15 var(--sv-font-display); letter-spacing: -0.01em; }
.sv-mk__banner-body { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; line-height: 1.5; }
.sv-mk__banner-cta { display: inline-flex; align-items: center; height: 44px; margin-top: 8px; padding: 0 22px; border-radius: 10px; background: #fff; color: var(--sv-fg); font: 600 0.9375rem/1 var(--sv-font-display); }
.sv-mk__banner-art { flex: none; margin-right: 40px; }

.sv-mk__shelf { margin: 0 0 var(--sv-8); }
.sv-mk__shelf[hidden] { display: none; }
.sv-mk__shelf-title { margin: 0 0 16px; color: var(--sv-fg); font: 400 1.5rem/1.3 var(--sv-font-display); }
.sv-mk__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sv-mk__card { display: flex; flex-direction: column; padding: 10px 10px 20px; border: 1px solid var(--sv-line-subtle); border-radius: 20px; background: var(--sv-surface); transition: box-shadow .18s ease; }
.sv-mk__card:hover { box-shadow: var(--sv-shadow-e2); }
.sv-mk__card[hidden] { display: none; }
.sv-mk__art { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; color: #fff;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px), var(--sv-mk-bg);
  background-size: 28px 28px, 28px 28px, cover; }
.sv-mk__art--hosting { --sv-mk-bg: linear-gradient(135deg, var(--sv-brand-500), var(--sv-brand-800)); }
.sv-mk__art--websites { --sv-mk-bg: linear-gradient(135deg, var(--sv-brand-400), var(--sv-primary)); }
.sv-mk__art--domains { --sv-mk-bg: linear-gradient(135deg, var(--sv-primary), var(--sv-brand-700)); }
.sv-mk__art--domains2 { --sv-mk-bg: linear-gradient(135deg, var(--sv-brand-600), var(--sv-brand-900)); }
.sv-mk__art--marketing { --sv-mk-bg: linear-gradient(135deg, var(--sv-brand-300), var(--sv-brand-600)); }
.sv-mk__art--ai { --sv-mk-bg: radial-gradient(70% 90% at 70% 30%, rgba(95, 139, 255, .6), rgba(95, 139, 255, 0) 70%), linear-gradient(135deg, var(--sv-brand-900), var(--sv-brand-950)); }
.sv-mk__art--other { --sv-mk-bg: linear-gradient(135deg, #3a3a40, #101011); }
.sv-mk__tile { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 22px; background: rgba(255, 255, 255, .95); color: var(--sv-primary); box-shadow: 0 18px 40px rgba(6, 26, 77, .35); }
.sv-mk__tile .sv-icon { width: 40px; height: 40px; }
.sv-mk__tile--lg { width: 132px; height: 132px; border-radius: 32px; }
.sv-mk__tile--lg .sv-icon { width: 60px; height: 60px; }
.sv-mk__pill { display: inline-flex; align-items: center; height: 72px; padding: 0 30px; border-radius: var(--sv-radius-full); background: #fff; color: var(--sv-primary); font: 600 2rem/1 var(--sv-font-display); box-shadow: 0 18px 40px rgba(6, 26, 77, .3); }
.sv-mk__title { margin: 18px 8px 6px; color: var(--sv-fg); font: 400 1.375rem/1.3 var(--sv-font-display); }
.sv-mk__desc { flex: 1; margin: 0 8px 18px; color: var(--sv-fg-secondary); font-size: 0.9375rem; line-height: 1.5; }
.sv-mk__cta { display: flex; align-items: center; justify-content: center; height: 40px; margin: 0 8px; border: 1px solid var(--sv-line); border-radius: 10px; color: var(--sv-primary); font: 600 0.9375rem/1 var(--sv-font-display); text-decoration: none; }
.sv-mk__cta:hover { border-color: var(--sv-brand-300); background: var(--sv-brand-50); text-decoration: none; }
.sv-mk__empty { padding: 32px 0; color: var(--sv-fg-secondary); text-align: center; }
.sv-mk__own { margin: 0; color: var(--sv-fg-secondary); font-size: var(--sv-text-small); }

@media (max-width: 1199.98px) {
  .sv-mk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .sv-mk__filters { padding: 16px; }
  .sv-mk__chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .sv-mk__chips::-webkit-scrollbar { display: none; }
  .sv-mk__chip { flex: none; }
  .sv-mk__banner { min-height: 0; padding: 28px 22px; }
  .sv-mk__banner-art { display: none; }
  .sv-mk__grid { grid-template-columns: 1fr; }
}
/* More services: domains view, AI badge. */
.sv-mk__search[hidden] { display: none; }
.sv-mk__filters:has(.sv-mk__search[hidden]) .sv-mk__chips { margin-bottom: 0; }
.sv-mk__domain { margin: 0 0 var(--sv-8); padding: 56px 32px 64px; border: 1px solid var(--sv-line-subtle); border-radius: 20px; background: var(--sv-surface); text-align: center; }
.sv-mk__domain[hidden] { display: none; }
.sv-mk__seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sv-canvas-inset); }
.sv-mk__seg-btn { min-width: 172px; height: 40px; padding: 0 20px; border: 0; border-radius: 10px; background: none; color: var(--sv-fg-secondary); font: 500 1rem/1 var(--sv-font-display); cursor: pointer; }
.sv-mk__seg-btn.is-active { background: var(--sv-surface); color: var(--sv-fg); font-weight: 600; box-shadow: var(--sv-shadow-e1); }
.sv-mk__seg-btn:focus-visible { outline: 3px solid var(--sv-brand-200); outline-offset: 2px; }
.sv-mk__domain-title { margin: 40px 0 20px; color: var(--sv-fg); font: 600 1.5rem/1.3 var(--sv-font-display); }
.sv-mk__domain-form { display: flex; align-items: center; gap: 8px; max-width: 780px; margin: 0 auto; padding: 5px 5px 5px 20px; border: 1px solid var(--sv-line); border-radius: 14px; background: var(--sv-surface); }
.sv-mk__domain-form:focus-within { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-brand-100); }
.sv-mk__domain-form input[type="text"] { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; color: var(--sv-fg); font: 400 1.0625rem/1 var(--sv-font-sans); }
.sv-mk__domain-go { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--sv-primary); color: #fff; cursor: pointer; }
.sv-mk__domain-go:hover { background: var(--sv-primary-hover); }
.sv-mk__tlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.sv-mk__tlds[hidden] { display: none; }
.sv-mk__tlds li { padding: 6px 12px; border-radius: var(--sv-radius-sm); background: var(--sv-canvas-inset); color: var(--sv-fg-secondary); font-size: 0.875rem; }
.sv-mk__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv-mk__ai { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: var(--sv-brand-50); color: var(--sv-primary); font: 600 0.8125rem/1 var(--sv-font-display); }
@media (max-width: 767.98px) {
  .sv-mk__domain { padding: 32px 16px 36px; }
  .sv-mk__seg-btn { min-width: 0; }
  .sv-mk__domain-title { margin-top: 28px; font-size: 1.25rem; }
}
/* More services: card artwork and price badge. */
.sv-mk__art { isolation: isolate; }
.sv-mk__badge { position: absolute; top: 0; right: 0; z-index: 2; padding: 7px 12px; border-radius: 0 12px 0 12px; background: #fff; color: var(--sv-primary); font: 600 0.8125rem/1.2 var(--sv-font-display); }
.sv-mk__minis { display: flex; flex-direction: column; gap: 14px; margin-right: 18px; }
.sv-mk__mini { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sv-brand-900); color: #fff; box-shadow: 0 8px 20px rgba(6, 26, 77, .3); }
.sv-mk__mini--ok { background: var(--sv-green-600, #007a49); }
.sv-mk__rack { display: flex; flex-direction: column; gap: 12px; width: 52%; }
.sv-mk__rack span { position: relative; height: 46px; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(6, 26, 77, .22); }
.sv-mk__rack span::before { content: ""; position: absolute; top: 20px; left: 16px; width: 12px; height: 5px; border-radius: 3px; background: var(--sv-brand-300); box-shadow: 18px 0 0 #2bb673; }
.sv-mk__rack span::after { content: ""; position: absolute; top: 21px; left: 64px; right: 18px; height: 3px; border-radius: 2px; background: var(--sv-brand-100); }
.sv-mk__browser { position: absolute; top: 14%; left: 10%; right: 10%; bottom: -12%; display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(6, 26, 77, .3); }
.sv-mk__browser-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--sv-brand-50); }
.sv-mk__browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-brand-200); }
.sv-mk__browser-hero { height: 34%; margin: 0 12px; border-radius: 8px; background: linear-gradient(120deg, var(--sv-brand-100), var(--sv-brand-50)); }
.sv-mk__browser-row { display: flex; gap: 8px; margin: 0 12px; }
.sv-mk__browser-row i { flex: 1; height: 26px; border-radius: 6px; background: var(--sv-canvas-inset); }
.sv-mk__tile--float { position: absolute; right: 8%; bottom: 10%; z-index: 1; width: 76px; height: 76px; }
.sv-mk__inbox { position: absolute; top: 18%; left: 8%; right: -6%; bottom: -10%; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px 0 0 0; background: #fff; box-shadow: 0 18px 40px rgba(6, 26, 77, .25); color: var(--sv-fg); }
.sv-mk__inbox-head { display: flex; align-items: center; gap: 8px; color: var(--sv-primary); }
.sv-mk__inbox-head b { color: var(--sv-fg); font: 600 0.8125rem/1 var(--sv-font-display); }
.sv-mk__inbox-btn { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 8px 14px; border-radius: 8px; background: var(--sv-primary); color: #fff; font: 600 0.75rem/1 var(--sv-font-display); }
.sv-mk__inbox-lines { display: flex; gap: 8px; }
.sv-mk__inbox-lines i { width: 22%; height: 18px; border-radius: 9px; background: var(--sv-canvas-inset); }
.sv-mk__orbit i { position: absolute; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.sv-mk__orbit i:nth-child(1) { top: 16%; left: 16%; } .sv-mk__orbit i:nth-child(2) { top: 20%; right: 18%; }
.sv-mk__orbit i:nth-child(3) { bottom: 16%; left: 24%; } .sv-mk__orbit i:nth-child(4) { bottom: 20%; right: 22%; }
.sv-mk__tile--glow { position: relative; z-index: 1; box-shadow: 0 0 0 10px rgba(95, 139, 255, .18), 0 0 60px rgba(95, 139, 255, .6); }
.sv-mk__tile--round { border-radius: 50%; }
/* Ask box answers (Sera). Hidden until the first question. */
.sv-ask__thread { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 720px; margin: 14px auto 0; text-align: left; }
.sv-ask__thread[hidden] { display: none; }
.sv-ask__msg { max-width: 100%; padding: 12px 16px; border-radius: 16px; color: var(--sv-fg); font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.sv-ask__msg p { margin: 0 0 8px; } .sv-ask__msg p:last-child { margin-bottom: 0; }
.sv-ask__msg ul { margin: 0 0 8px; padding-left: 20px; }
.sv-ask__msg a { color: var(--sv-primary); text-decoration: underline; }
.sv-ask__msg--you { align-self: flex-end; max-width: 80%; background: var(--sv-brand-50); }
.sv-ask__msg--sera { align-self: stretch; background: var(--sv-surface); border: 1px solid var(--sv-line-subtle); }
.sv-ask__status { color: var(--sv-fg-muted); }
.sv-ask__error { color: var(--sv-fg-secondary); }
.sv-ask__send[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ==========================================================================
   15. Sera dock (chat panel on the right)
   ========================================================================== */
:root { --sv-sera-w: 420px; }
.sv-sera-wide { --sv-sera-w: min(720px, 52vw); }
.sv-sera-dock {
  position: fixed; top: var(--sv-topbar-h); right: 8px; bottom: 8px; z-index: 1020;
  display: flex; flex-direction: column; width: var(--sv-sera-w);
  border-radius: var(--sv-radius-lg); background: var(--sv-surface); box-shadow: var(--sv-shadow-e2);
  overflow: hidden;
}
.sv-sera-dock[hidden] { display: none; }
.sv-sera-open .sv-layout { margin-right: calc(var(--sv-sera-w) + 16px); }
.sv-sera-open .sv-sera-btn { background: rgb(255 255 255 / 0.08); }

/* Room for the dock: the labelled sidebar collapses to icons, as on smaller screens. */
@media (min-width: 1024px) {
  .sv-sera-open .sv-layout { grid-template-columns: 92px minmax(0, 1fr); }
  .sv-sera-open .sv-layout--context { grid-template-columns: 92px var(--sv-context-w) minmax(0, 1fr); }
  .sv-sera-open .sv-rail { padding: var(--sv-3) var(--sv-2); gap: 2px; }
  .sv-sera-open .sv-nav__heading { display: none; }
  .sv-sera-open .sv-nav__heading + .sv-nav__list, .sv-sera-open .sv-nav__heading[aria-expanded="false"] + .sv-nav__list { display: flex; }
  .sv-sera-open .sv-nav__group { margin-top: 0; }
  .sv-sera-open .sv-nav__item { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 2px; text-align: center; font-size: 11.5px; }
  .sv-sera-open .sv-nav__label { white-space: normal; line-height: 1.2; }
  .sv-sera-open .sv-nav__ext { display: none; }
  .sv-sera-open .sv-nav__list--end { border-top: 0; }
  .sv-sera-open .sv-main { padding-left: var(--sv-8); padding-right: var(--sv-8); }
}

.sv-sera-dock__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 12px; }
.sv-sera-dock__title { flex: 1; margin: 0; color: var(--sv-fg); font: 600 1.0625rem/1.2 var(--sv-font-display); }
.sv-sera-dock__mark { display: inline-flex; color: var(--sv-primary); }
.sv-sera-dock__mark .sv-icon { width: 22px; height: 22px; }
.sv-sera-dock__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--sv-fg); cursor: pointer; }
.sv-sera-dock__icon:hover { background: var(--sv-canvas-inset); }
.sv-sera-dock__icon:focus-visible { outline: 3px solid var(--sv-brand-200); outline-offset: 1px; }
.sv-sera-dock__shrink, .sv-sera-wide .sv-sera-dock__grow { display: none; }
.sv-sera-wide .sv-sera-dock__shrink { display: block; }

.sv-sera-dock__note { display: flex; align-items: flex-start; gap: 10px; margin: 4px 14px 0; padding: 14px; border-radius: 12px; background: var(--sv-brand-50); color: var(--sv-fg-secondary); font-size: 0.8125rem; line-height: 1.5; }
.sv-sera-dock__note[hidden] { display: none; }
.sv-sera-dock__note > .sv-icon { flex: none; margin-top: 2px; color: var(--sv-primary); }
.sv-sera-dock__note p { flex: 1; margin: 0; }
.sv-sera-dock__note a { color: var(--sv-primary); text-decoration: underline; }
.sv-sera-dock__note-close { flex: none; display: inline-flex; padding: 2px; border: 0; background: none; color: var(--sv-fg); cursor: pointer; }

.sv-sera-dock__body { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 16px; overscroll-behavior: contain; }
.sv-sera-dock__hello { margin: auto 0; padding: 32px 0; text-align: center; }
.sv-sera-dock__hello[hidden] { display: none; }
.sv-sera-dock__hello-mark { display: inline-flex; color: var(--sv-primary); }
.sv-sera-dock__hello-mark .sv-icon { width: 44px; height: 44px; }
.sv-sera-dock__hello-title { margin: 14px 0 4px; color: var(--sv-fg); font: 600 1.25rem/1.3 var(--sv-font-display); }
.sv-sera-dock__hello-sub { margin: 0; color: var(--sv-fg-secondary); }
.sv-sera-dock__thread { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 16px; }
.sv-sera-dock__thread:empty { display: none; }
.sv-sera-msg { max-width: 100%; color: var(--sv-fg); font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.sv-sera-msg p { margin: 0 0 8px; } .sv-sera-msg p:last-child { margin-bottom: 0; }
.sv-sera-msg ul { margin: 0 0 8px; padding-left: 20px; }
.sv-sera-msg a { color: var(--sv-primary); text-decoration: underline; }
.sv-sera-msg--you { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--sv-brand-50); }
.sv-sera-msg--sera { align-self: stretch; padding: 2px 2px; }
.sv-sera-msg__status { color: var(--sv-fg-muted); }
.sv-sera-msg__error { color: var(--sv-fg-secondary); }

.sv-sera-dock__prompts { margin: 0; padding: 0 16px; list-style: none; }
.sv-sera-dock__prompts[hidden] { display: none; }
.sv-sera-dock__prompts li + li { border-top: 1px solid var(--sv-line-subtle); }
.sv-sera-dock__prompt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 4px; border: 0; background: none; color: var(--sv-fg); font: 400 0.9375rem/1.3 var(--sv-font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.sv-sera-dock__prompt:hover { color: var(--sv-primary); text-decoration: none; }
.sv-sera-dock__prompt .sv-icon { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--sv-brand-50); color: var(--sv-primary); }

.sv-sera-dock__composer { position: relative; margin: 10px 14px 0; padding: 12px 56px 12px 14px; border: 1.5px solid var(--sv-line); border-radius: 16px; background: var(--sv-surface); }
.sv-sera-dock__composer:focus-within { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-brand-100); }
.sv-sera-dock__composer textarea { display: block; width: 100%; min-height: 48px; max-height: 160px; padding: 0; border: 0; outline: 0; resize: none; background: none; color: var(--sv-fg); font: 400 0.9375rem/1.5 var(--sv-font-sans); }
.sv-sera-dock__send { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--sv-primary); color: #fff; cursor: pointer; }
.sv-sera-dock__send:hover { background: var(--sv-primary-hover); }
.sv-sera-dock__send[aria-busy="true"] { opacity: .55; pointer-events: none; }
.sv-sera-dock__legal { margin: 8px 0 10px; color: var(--sv-fg-muted); font-size: 0.75rem; text-align: center; }

/* Tablets and phones: the dock covers the page instead of sitting beside it. */
@media (max-width: 1023.98px) {
  .sv-sera-dock { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; }
  .sv-sera-open .sv-layout { margin-right: 8px; }
  .sv-sera-open { overflow: hidden; }
  .sv-sera-dock__expand { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sv-sera-dock { animation: sv-sera-in .18s ease-out; }
  @keyframes sv-sera-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
}