/* Hybrid5 Hosting client area: the hybrid5hosting.com night palette on top of WHMCS Twenty-One (Bootstrap 4.5).
   Tokens match website-app/apps/web/src/styles/site.css so the site, the headless portal and WHMCS read as one product.
   Layout: Twenty-One's grid and templates stay; this file recolors every Bootstrap and WHMCS component to the night
   palette and swaps the type to Archivo (display) / Instrument Sans (body) / IBM Plex Mono (labels, numbers). */

@font-face { font-family: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 600 900; font-stretch: 100% 125%; src: url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Instrument Sans Variable"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }

:root {
  /* Light and dark, like hybrid5hosting.com: each token holds both values and color-scheme picks one. The
     visitor's system setting by default; html[data-theme] once they choose in the footer switch. The choice is
     shared with the site and the portal (same origin, localStorage "h5-theme"). */
  color-scheme: light dark;
  --h5-night: light-dark(#f4f7fb, #0a1626);
  --h5-night-2: light-dark(#ffffff, #0d1e32);
  --h5-night-3: light-dark(#e9eff6, #11243b);
  --h5-panel: light-dark(#ffffff, #12263e);
  --h5-edge: light-dark(#c3d2e2, #284868);
  --h5-tint: light-dark(#1f5c96, #7cc0ff);
  --h5-wash: light-dark(#a9cdf0, #1f5c96);
  --h5-line: light-dark(rgba(16, 42, 70, 0.13), rgba(124, 192, 255, 0.14));
  --h5-line-strong: light-dark(rgba(16, 42, 70, 0.26), rgba(124, 192, 255, 0.28));
  --h5-ink: light-dark(#0b1a2c, #eaf1f8);
  --h5-ink-dim: light-dark(#3b5068, #a3b6ca);
  --h5-ink-faint: light-dark(#566d85, #7f98b3);
  --h5-placeholder: light-dark(#7a8ea3, #6d87a3);
  --h5-accent: #62ad32;
  --h5-accent-hover: #74c442;
  --h5-accent-ink: #0b1a05;
  /* green as text: deeper in light mode so it reads on white */
  --h5-accent-text: light-dark(#3b7d1a, #62ad32);
  --h5-glow: light-dark(#1f5c96, #7cc0ff);
  --h5-glow-hover: light-dark(#16466f, #a9d6ff);
  --h5-good: light-dark(#17734a, #7dd6a8);
  --h5-warn: light-dark(#8a5a00, #f0c25a);
  --h5-bad: light-dark(#b03a1f, #ff8f75);
  --h5-bad-hover: light-dark(#8f2a12, #ffb4a0);
  --h5-violet: light-dark(#5b45b5, #c3b1ff);
  --h5-logo-sub: light-dark(#5b6878, #8e9baa);
  --h5-topbar: light-dark(#e3eaf2, #071120);
  --h5-footer-bg: light-dark(#e9eff6, #08121f);
  --h5-shadow: light-dark(rgba(16, 42, 70, 0.22), rgba(0, 0, 0, 0.85));
  --h5-disabled-bg: light-dark(#c7dbb9, #3c5a2a);
  --h5-disabled-ink: light-dark(#4d6640, #a5b89a);
  --h5-f-display: "Archivo Variable", "Arial Narrow", system-ui, sans-serif;
  --h5-f-body: "Instrument Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h5-f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --h5-radius: 14px;
  --h5-radius-lg: 18px;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- base ---------- */
html { background: var(--h5-night); }
body.h5, body.h5.primary-bg-color { background: var(--h5-night); color: var(--h5-ink); font-family: var(--h5-f-body); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.h5 h1, .h5 h2, .h5 h3, .h5 h4, .h5 h5, .h5 h6, .h5 .h1, .h5 .h2, .h5 .h3, .h5 .h4, .h5 .h5, .h5 .h6 { font-family: var(--h5-f-display); color: var(--h5-ink); letter-spacing: -0.01em; font-stretch: 104%; }
.h5 h1, .h5 .h1 { font-weight: 850; }
.h5 h2, .h5 h3, .h5 .h2, .h5 .h3 { font-weight: 780; }
.h5 h4, .h5 h5, .h5 h6, .h5 .h4, .h5 .h5, .h5 .h6 { font-weight: 700; }
.h5 a { color: var(--h5-glow); }
.h5 a:hover { color: var(--h5-glow-hover); }
.h5 hr { border-top-color: var(--h5-line); }
.h5 small, .h5 .small { color: inherit; }
.h5 code, .h5 kbd, .h5 pre { font-family: var(--h5-f-mono); }
.h5 code { color: var(--h5-glow); }
.h5 pre { color: var(--h5-ink); background: var(--h5-night); border: 1px solid var(--h5-line); border-radius: 10px; padding: 12px; }
.h5 ::selection { background: rgba(98, 173, 50, 0.35); color: var(--h5-ink); }
.h5 :focus-visible { outline: 2px solid var(--h5-glow); outline-offset: 2px; }
.h5 .text-muted, .h5 .text-secondary { color: var(--h5-ink-faint) !important; }
.h5 .text-dark, .h5 .text-body, .h5 .text-black-50 { color: var(--h5-ink) !important; }
.h5 .text-white-50 { color: var(--h5-ink-dim) !important; }
.h5 .text-primary { color: var(--h5-glow) !important; }
.h5 .text-success { color: var(--h5-good) !important; }
.h5 .text-info { color: var(--h5-glow) !important; }
.h5 .text-warning { color: var(--h5-warn) !important; }
.h5 .text-danger { color: var(--h5-bad) !important; }
.h5 .bg-white, .h5 .bg-light { background-color: var(--h5-night-2) !important; }
.h5 .bg-dark { background-color: var(--h5-night) !important; }
.h5 .bg-primary { background-color: var(--h5-accent) !important; color: var(--h5-accent-ink); }
.h5 .border, .h5 .border-top, .h5 .border-bottom, .h5 .border-left, .h5 .border-right { border-color: var(--h5-line) !important; }
.h5 .shadow, .h5 .shadow-sm { box-shadow: 0 18px 50px -30px var(--h5-shadow) !important; }
.h5-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--h5-accent); color: var(--h5-accent-ink) !important; padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.h5-skip:focus { top: 12px; }

/* ---------- brand buttons used in header/footer ---------- */
.h5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--h5-f-body); padding: 11px 18px; min-height: 42px; border-radius: 999px; text-decoration: none !important; border: 2px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; background: none; }
.h5-btn-primary { background: var(--h5-accent); color: var(--h5-accent-ink) !important; }
.h5-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(98, 173, 50, 0.7); }
.h5-btn-ghost { border-color: color-mix(in srgb, var(--h5-tint) 35%, transparent); color: var(--h5-ink) !important; }
.h5-btn-ghost:hover { background: color-mix(in srgb, var(--h5-tint) 8%, transparent); border-color: color-mix(in srgb, var(--h5-tint) 60%, transparent); }
.h5-btn-sm { padding: 9px 14px; min-height: 38px; font-size: 13.5px; }

/* ---------- header ---------- */
.h5 header.header { background: transparent; position: relative; z-index: 50; }
.h5 header.header .topbar { background: var(--h5-topbar); color: var(--h5-ink-faint); border-bottom: 1px solid var(--h5-line); padding: 3px 0; font-size: 13px; }
.h5 header.header .topbar .btn, .h5 header.header .topbar .active-client .btn { color: var(--h5-ink-dim); font-size: 13px; }
.h5 header.header .topbar .btn:hover { color: var(--h5-ink); }
.h5 header.header .topbar .active-client .input-group-text { color: var(--h5-ink-faint); }
.h5 header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: color-mix(in srgb, var(--h5-tint) 50%, transparent); }
.h5 header.header .btn-return-to-admin { color: var(--h5-warn) !important; }
.h5 header.header .topbar .h5-portal-link { color: var(--h5-accent-text) !important; font-weight: 600; margin-right: 6px; }
.h5 header.header .topbar .h5-portal-link:hover { color: var(--h5-glow-hover) !important; }
.h5-sitebar { position: sticky; top: 0; background: color-mix(in srgb, var(--h5-night) 92%, transparent); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--h5-line); }
.h5-sitebar-inner { min-height: 64px; display: flex; align-items: center; gap: 20px; }
.h5-brand { display: block; line-height: 0; flex: none; }
/* 36px (was 26px), same as hybrid5hosting.com, so the "hosting" line stays legible */
.h5-logo { height: 36px; width: auto; display: block; }
.h5-logo-hybrid { fill: var(--h5-ink); }
.h5-logo-five { fill: var(--h5-accent); }
.h5-logo-hosting { fill: var(--h5-logo-sub); }
.h5-sitenav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.h5-sitenav a { font: 500 14px/1 var(--h5-f-body); color: var(--h5-ink-dim) !important; text-decoration: none !important; padding: 10px 12px; border-radius: 8px; }
.h5-sitenav a:hover { color: var(--h5-ink) !important; background: color-mix(in srgb, var(--h5-tint) 8%, transparent); }
.h5-actions { display: flex; align-items: center; gap: 8px; }
.h5-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--h5-line); background: none; color: var(--h5-ink) !important; text-decoration: none !important; cursor: pointer; }
.h5-icon-btn:hover { border-color: var(--h5-line-strong); background: color-mix(in srgb, var(--h5-tint) 6%, transparent); }
.h5-icon-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font: 600 11px/20px var(--h5-f-mono); background: var(--h5-accent) !important; color: var(--h5-accent-ink) !important; }
@media (max-width: 1199.98px) { .h5-sitenav { display: none; } .h5-actions { margin-left: auto; } }
.h5 header.header .main-navbar-wrapper { background: var(--h5-night-2); border-bottom: 1px solid var(--h5-line); padding: 0; }
.h5 header.header .main-navbar-wrapper .navbar-collapse { padding: 6px 0; }
.h5 header.header .navbar a, .h5 header.header .navbar-nav .nav-link { color: var(--h5-ink-dim); font-size: 14.5px; font-weight: 500; }
.h5 header.header .navbar-nav .nav-link { padding: 9px 12px; border-radius: 8px; }
.h5 header.header .navbar-nav .nav-link:hover, .h5 header.header .navbar-nav .active > .nav-link, .h5 header.header .navbar-nav .show > .nav-link { color: var(--h5-ink); background: color-mix(in srgb, var(--h5-tint) 8%, transparent); }
.h5 header.header .navbar-nav .badge { background: var(--h5-accent); color: var(--h5-accent-ink); }
.h5-sitenav-mobile { display: grid; gap: 0; padding: 8px 0 12px; border-bottom: 1px solid var(--h5-line); margin-bottom: 10px; }
.h5-sitenav-mobile a { padding: 12px 4px; font: 700 18px/1.1 var(--h5-f-display); font-stretch: 105%; color: var(--h5-ink) !important; text-decoration: none !important; border-bottom: 1px solid var(--h5-line); }
.h5-sitenav-mobile a:last-child { border-bottom: 0; }
.h5 header.header .search { border-color: var(--h5-line-strong); }

/* ---------- breadcrumb, notices ---------- */
.h5 .master-breadcrumb { background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--h5-tint) 8%, transparent); }
.h5 .breadcrumb { background: transparent; font: 500 12.5px/1.4 var(--h5-f-mono); letter-spacing: 0.04em; }
.h5 .breadcrumb-item, .h5 .breadcrumb-item.active { color: var(--h5-ink-faint); }
.h5 .breadcrumb-item a { color: var(--h5-ink-dim); text-decoration: none; }
.h5 .breadcrumb-item a:hover { color: var(--h5-ink); }
.h5 .breadcrumb-item + .breadcrumb-item::before { color: var(--h5-edge); }
.h5 .verification-banner, .h5 .alert-network-issue, .h5 .admin-masquerade-notice { background: var(--h5-night-3); color: var(--h5-ink); border-color: var(--h5-line); }
.h5 .verification-banner.email-verification { background: color-mix(in srgb, var(--h5-warn) 12%, transparent); }

/* ---------- main body ---------- */
.h5 #main-body { background: var(--h5-night); padding: 32px 0 64px; min-height: 50vh; }
.h5 .header-lined h1, .h5 .primary-content h1, .h5 .card-title { color: var(--h5-ink); }
.h5 .header-lined { border-bottom: 1px solid var(--h5-line); margin-bottom: 20px; }
.h5 .header-lined h1 { font-weight: 850; font-stretch: 108%; font-size: clamp(26px, 3vw, 36px); }

/* cards, panels */
.h5 .card, .h5 .mc-promo-manage, .h5 .mc-promo-login, .h5 .panel, .h5 .well { background: var(--h5-night-2); border: 1px solid var(--h5-line); border-radius: var(--h5-radius-lg); color: var(--h5-ink); box-shadow: none; }
.h5 .card-header, .h5 .panel-heading { background: color-mix(in srgb, var(--h5-tint) 4%, transparent); border-bottom: 1px solid var(--h5-line); color: var(--h5-ink); border-radius: var(--h5-radius-lg) var(--h5-radius-lg) 0 0 !important; }
.h5 .card-header .card-title, .h5 .card-header h3 { font: 700 15px/1.3 var(--h5-f-display); font-stretch: 104%; margin: 0; }
.h5 .card-footer, .h5 .panel-footer { background: color-mix(in srgb, var(--h5-tint) 3%, transparent); border-top: 1px solid var(--h5-line); color: var(--h5-ink-dim); }
.h5 .card-body, .h5 .panel-body { color: var(--h5-ink); }
.h5 .card-accent-teal, .h5 .card-accent-pomegranate, .h5 .card-accent-sun-flower, .h5 .card-accent-asbestos, .h5 .card-accent-green, .h5 .card-accent-red, .h5 .card-accent-blue, .h5 .card-accent-gold, .h5 .card-accent-midnight-blue, .h5 .card-accent-emerald { border-top: 3px solid var(--h5-accent) !important; }

/* sidebar */
.h5 .sidebar .card { border-radius: var(--h5-radius); overflow: hidden; }
.h5 .sidebar .card-header { background: color-mix(in srgb, var(--h5-tint) 5%, transparent); }
.h5 .sidebar .card-header h3, .h5 .sidebar .card-title { font: 600 12px/1.2 var(--h5-f-mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--h5-glow) !important; }
.h5 .list-group-item { background: transparent; border-color: var(--h5-line); color: var(--h5-ink-dim); }
.h5 a.list-group-item, .h5 .list-group-item-action { color: var(--h5-ink-dim); }
.h5 a.list-group-item:hover, .h5 .list-group-item-action:hover, .h5 .list-group-item-action:focus { background: color-mix(in srgb, var(--h5-tint) 7%, transparent); color: var(--h5-ink); }
.h5 .list-group-item.active, .h5 a.list-group-item.active { background: rgba(98, 173, 50, 0.14); border-color: var(--h5-line); color: var(--h5-ink); box-shadow: inset 3px 0 0 var(--h5-accent); }
.h5 .list-group-item .badge { background: var(--h5-panel); color: var(--h5-ink); }
.h5 .list-group-item.disabled { color: var(--h5-ink-faint); background: transparent; }

/* client home tiles and cards */
.h5 .tiles .tile { background: var(--h5-night-2); border: 1px solid var(--h5-line); color: var(--h5-ink); border-radius: var(--h5-radius); transition: border-color .2s, transform .2s; }
.h5 .tiles .tile:hover { border-color: rgba(98, 173, 50, 0.55); transform: translateY(-2px); background: var(--h5-night-3); }
.h5 .tiles .tile i { color: var(--h5-glow); }
.h5 .tiles .tile .stat { font-family: var(--h5-f-display); font-weight: 850; color: var(--h5-ink); }
.h5 .tiles .tile .title { font: 600 12px/1.2 var(--h5-f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--h5-ink-faint); }
.h5 .tiles .tile .highlight { height: 3px !important; background: var(--h5-accent) !important; }
.h5 .client-home-cards .card { border-radius: var(--h5-radius-lg); }
.h5 .client-home-cards .card .card-header { background: color-mix(in srgb, var(--h5-tint) 4%, transparent); }
.h5 .client-home-cards .card .card-header .card-title { color: var(--h5-ink); }
.h5 .client-home-cards .card .card-header i { color: var(--h5-glow); }
.h5 .client-home-cards .div-input-group { background: transparent; }

/* tables (incl. DataTables list views) */
.h5 .table, .h5 table.table-list { color: var(--h5-ink); background: transparent; }
.h5 .table th, .h5 .table td, .h5 .table thead th { border-color: var(--h5-line) !important; }
.h5 .table thead th, .h5 table.table-list thead th { font: 600 11.5px/1.3 var(--h5-f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--h5-glow); background: transparent; }
.h5 .table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--h5-tint) 3%, transparent); }
.h5 .table-hover tbody tr:hover, .h5 table.table-list tbody tr:hover { background: color-mix(in srgb, var(--h5-tint) 6%, transparent); color: var(--h5-ink); }
.h5 .table-container, .h5 .dataTables_wrapper { background: transparent; color: var(--h5-ink-dim); }
.h5 table.table-list { border-color: var(--h5-line) !important; }
.h5 table.table-list tbody td { background: transparent; color: var(--h5-ink); border-color: var(--h5-line) !important; }
.h5 table.table-list thead th.sorting, .h5 table.table-list thead th.sorting_asc, .h5 table.table-list thead th.sorting_desc { background-color: transparent; }
.h5 .dataTables_wrapper .dataTables_info, .h5 .dataTables_wrapper .dataTables_length, .h5 .dataTables_wrapper .dataTables_filter { color: var(--h5-ink-faint); }
.h5 .dataTables_wrapper .dataTables_filter input, .h5 .dataTables_wrapper .dataTables_length select { background: var(--h5-night); color: var(--h5-ink); border: 1px solid var(--h5-line-strong); border-radius: 8px; }
.h5 .table-list-header, .h5 .listtable { background: transparent; }

/* forms */
.h5 .form-control, .h5 .custom-select, .h5 select.form-control, .h5 textarea.form-control, .h5 input[type="text"], .h5 input[type="email"], .h5 input[type="password"], .h5 input[type="tel"], .h5 input[type="number"], .h5 input[type="search"], .h5 input[type="url"], .h5 input[type="date"] { background-color: var(--h5-night); color: var(--h5-ink); border: 1px solid var(--h5-line-strong); border-radius: 10px; }
.h5 .form-control:focus, .h5 .custom-select:focus, .h5 input:focus, .h5 textarea:focus, .h5 select:focus { background-color: var(--h5-night); color: var(--h5-ink); border-color: var(--h5-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h5-tint) 18%, transparent); outline: none; }
.h5 .form-control::placeholder, .h5 input::placeholder, .h5 textarea::placeholder { color: var(--h5-placeholder); }
.h5 .form-control:disabled, .h5 .form-control[readonly] { background-color: var(--h5-night-3); color: var(--h5-ink-dim); }
.h5 .custom-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%237cc0ff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); }
.h5 label, .h5 .control-label, .h5 .col-form-label { color: var(--h5-ink-dim); font-weight: 500; }
.h5 .form-text, .h5 .help-block { color: var(--h5-ink-faint); }
.h5 .input-group-text { background: var(--h5-night-3); color: var(--h5-ink-dim); border-color: var(--h5-line-strong); }
.h5 .custom-control-label::before { background-color: var(--h5-night); border-color: var(--h5-line-strong); }
.h5 .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--h5-accent); border-color: var(--h5-accent); }
.h5 .is-invalid, .h5 .form-control.is-invalid { border-color: var(--h5-bad) !important; }
.h5 .invalid-feedback { color: var(--h5-bad); }
.h5 .bootstrap-switch { border-color: var(--h5-line-strong); background: var(--h5-night); }
.h5 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .h5 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--h5-accent); color: var(--h5-accent-ink); }
.h5 .bootstrap-switch .bootstrap-switch-label { background: var(--h5-panel); color: var(--h5-ink); }
.h5 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: var(--h5-night-3); color: var(--h5-ink-dim); }
.h5 .iti__country-list { background: var(--h5-night-2); color: var(--h5-ink); border-color: var(--h5-line); }
.h5 .iti__country.iti__highlight { background: color-mix(in srgb, var(--h5-tint) 10%, transparent); }

/* buttons */
.h5 .btn { border-radius: 999px; font-weight: 600; font-family: var(--h5-f-body); }
.h5 .btn-primary, .h5 .btn-success, .h5 .btn-order-now, .h5 .btn-checkout { background: var(--h5-accent); border-color: var(--h5-accent); color: var(--h5-accent-ink); }
.h5 .btn-primary:hover, .h5 .btn-primary:focus, .h5 .btn-success:hover, .h5 .btn-success:focus, .h5 .btn-order-now:hover, .h5 .btn-checkout:hover { background: var(--h5-accent-hover); border-color: var(--h5-accent-hover); color: var(--h5-accent-ink); box-shadow: 0 10px 30px -10px rgba(98, 173, 50, 0.7); }
.h5 .btn-primary:not(:disabled):not(.disabled):active, .h5 .btn-success:not(:disabled):not(.disabled):active { background: #4f9426; border-color: #4f9426; color: var(--h5-accent-ink); }
.h5 .btn-primary.disabled, .h5 .btn-primary:disabled, .h5 .btn-success:disabled { background: var(--h5-disabled-bg); border-color: var(--h5-disabled-bg); color: var(--h5-disabled-ink); }
.h5 .btn-default, .h5 .btn-secondary, .h5 .btn-light, .h5 .btn-outline-secondary, .h5 .btn-outline-primary, .h5 .btn-outline-default { background: transparent; border: 1px solid color-mix(in srgb, var(--h5-tint) 35%, transparent); color: var(--h5-ink); }
.h5 .btn-default:hover, .h5 .btn-secondary:hover, .h5 .btn-light:hover, .h5 .btn-outline-secondary:hover, .h5 .btn-outline-primary:hover, .h5 .btn-outline-default:hover { background: color-mix(in srgb, var(--h5-tint) 8%, transparent); border-color: color-mix(in srgb, var(--h5-tint) 60%, transparent); color: var(--h5-ink); }
.h5 .btn-info { background: color-mix(in srgb, var(--h5-tint) 16%, transparent); border-color: color-mix(in srgb, var(--h5-tint) 40%, transparent); color: var(--h5-ink); }
.h5 .btn-info:hover { background: color-mix(in srgb, var(--h5-tint) 26%, transparent); color: var(--h5-ink); }
.h5 .btn-warning { background: #f0c25a; border-color: #f0c25a; color: #2a1d00; }
.h5 .btn-danger { background: transparent; border: 1px solid color-mix(in srgb, var(--h5-bad) 60%, transparent); color: var(--h5-bad); }
.h5 .btn-danger:hover { background: color-mix(in srgb, var(--h5-bad) 12%, transparent); color: var(--h5-bad-hover); border-color: var(--h5-bad); }
.h5 .btn-link { color: var(--h5-glow); }
.h5 .btn-group .btn { border-radius: 0; }
.h5 .btn-group .btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.h5 .btn-group .btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.h5 .input-group .btn { border-radius: 10px; }

/* alerts */
.h5 .alert { border-radius: var(--h5-radius); border-width: 1px; color: var(--h5-ink); }
.h5 .alert-success { background: color-mix(in srgb, var(--h5-good) 10%, transparent); border-color: color-mix(in srgb, var(--h5-good) 40%, transparent); }
.h5 .alert-info { background: color-mix(in srgb, var(--h5-tint) 8%, transparent); border-color: color-mix(in srgb, var(--h5-tint) 35%, transparent); }
.h5 .alert-warning { background: color-mix(in srgb, var(--h5-warn) 10%, transparent); border-color: color-mix(in srgb, var(--h5-warn) 45%, transparent); }
.h5 .alert-danger, .h5 .alert-error { background: color-mix(in srgb, var(--h5-bad) 10%, transparent); border-color: color-mix(in srgb, var(--h5-bad) 45%, transparent); }
.h5 .alert-secondary, .h5 .alert-light, .h5 .alert-dark { background: var(--h5-night-3); border-color: var(--h5-line); }
.h5 .alert a, .h5 .alert .alert-link { color: var(--h5-glow); }

/* badges and statuses */
.h5 .badge { font-family: var(--h5-f-mono); font-weight: 600; letter-spacing: 0.03em; border-radius: 999px; padding: 0.35em 0.7em; }
.h5 .badge-success, .h5 .label-success, .h5 .status-active, .h5 .status-paid, .h5 .status-open, .h5 .status-completed { background: color-mix(in srgb, var(--h5-good) 16%, transparent) !important; color: var(--h5-good) !important; }
.h5 .badge-warning, .h5 .status-pending, .h5 .status-unpaid, .h5 .status-pending-transfer, .h5 .status-customer-reply, .h5 .status-awaiting-reply { background: color-mix(in srgb, var(--h5-warn) 16%, transparent) !important; color: var(--h5-warn) !important; }
.h5 .badge-danger, .h5 .status-suspended, .h5 .status-overdue, .h5 .status-fraud, .h5 .status-cancelled, .h5 .status-terminated, .h5 .status-expired { background: color-mix(in srgb, var(--h5-bad) 14%, transparent) !important; color: var(--h5-bad) !important; }
.h5 .badge-info, .h5 .badge-primary, .h5 .status-answered, .h5 .status-in-progress { background: color-mix(in srgb, var(--h5-tint) 16%, transparent) !important; color: var(--h5-glow) !important; }
.h5 .badge-secondary, .h5 .badge-default, .h5 .badge-light, .h5 .status-closed, .h5 .status-on-hold, .h5 .status-refunded, .h5 .status-draft { background: color-mix(in srgb, var(--h5-ink-dim) 14%, transparent) !important; color: var(--h5-ink-dim) !important; }
.h5 .label { border-radius: 999px; font-family: var(--h5-f-mono); }

/* nav tabs and pills */
.h5 .nav-tabs { border-bottom-color: var(--h5-line); }
.h5 .nav-tabs .nav-link { color: var(--h5-ink-dim); border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.h5 .nav-tabs .nav-link:hover { color: var(--h5-ink); border-bottom-color: var(--h5-line-strong); }
.h5 .nav-tabs .nav-link.active, .h5 .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--h5-ink); border-bottom-color: var(--h5-accent); }
.h5 .nav-pills .nav-link { color: var(--h5-ink-dim); border-radius: 999px; }
.h5 .nav-pills .nav-link.active, .h5 .nav-pills .show > .nav-link { background: rgba(98, 173, 50, 0.16); color: var(--h5-ink); }
.h5 .tab-content { color: var(--h5-ink); }

/* dropdowns, popovers, tooltips, modals */
.h5 .dropdown-menu { background: var(--h5-night-2); border: 1px solid var(--h5-line-strong); border-radius: 12px; box-shadow: 0 24px 60px -24px var(--h5-shadow); padding: 6px; }
.h5 .dropdown-item { color: var(--h5-ink-dim); border-radius: 8px; }
.h5 .dropdown-item:hover, .h5 .dropdown-item:focus { background: color-mix(in srgb, var(--h5-tint) 8%, transparent); color: var(--h5-ink); }
.h5 .dropdown-item.active, .h5 .dropdown-item:active { background: rgba(98, 173, 50, 0.16); color: var(--h5-ink); }
.h5 .dropdown-divider { border-top-color: var(--h5-line); }
.h5 .dropdown-header { color: var(--h5-ink-faint); }
.h5 .popover { background: var(--h5-night-2); border-color: var(--h5-line-strong); color: var(--h5-ink); }
.h5 .popover .popover-body, .h5 .popover .popover-header { color: var(--h5-ink); background: transparent; border-color: var(--h5-line); }
.h5 .popover .arrow::after { border-bottom-color: var(--h5-night-2) !important; border-top-color: var(--h5-night-2) !important; }
.h5 .popover-user-notifications ul li a, .h5 .client-alerts li a { color: var(--h5-ink); }
.h5 .client-alerts li { border-color: var(--h5-line); }
.h5 .tooltip-inner { background: var(--h5-panel); color: var(--h5-ink); font-size: 12.5px; }
.h5 .modal-content { background: var(--h5-night-2); color: var(--h5-ink); border: 1px solid var(--h5-line-strong); border-radius: var(--h5-radius-lg); }
.h5 .modal-header, .h5 .modal-footer { border-color: var(--h5-line); }
.h5 .modal-header .close, .h5 .close { color: var(--h5-ink); text-shadow: none; opacity: 0.7; }
.h5 .modal-backdrop.show { opacity: 0.7; }
.h5 .modal-localisation .modal-content { background: var(--h5-night-3); }
.h5 .modal-localisation .item-selector .item { color: var(--h5-ink-dim); border-color: var(--h5-line); }
.h5 .modal-localisation .item-selector .item.active, .h5 .modal-localisation .item-selector .item:hover { background: rgba(98, 173, 50, 0.16); color: var(--h5-ink); }

/* pagination, progress */
.h5 .pagination .page-link { background: var(--h5-night-2); border-color: var(--h5-line); color: var(--h5-ink-dim); }
.h5 .pagination .page-item.active .page-link { background: var(--h5-accent); border-color: var(--h5-accent); color: var(--h5-accent-ink); }
.h5 .pagination .page-item.disabled .page-link { background: var(--h5-night-2); color: var(--h5-ink-faint); border-color: var(--h5-line); }
.h5 .progress { background: color-mix(in srgb, var(--h5-tint) 12%, transparent); border-radius: 999px; }
.h5 .progress-bar { background: var(--h5-accent); color: var(--h5-accent-ink); }

/* support tickets and markdown editor */
.h5 .view-ticket .ticket-reply, .h5 .ticket-reply { background: var(--h5-night-2); border: 1px solid var(--h5-line); border-radius: var(--h5-radius); }
.h5 .ticket-reply .posted-by, .h5 .ticket-reply .user { color: var(--h5-ink-dim); }
.h5 .ticket-reply.staff, .h5 .view-ticket .ticket-reply.staff { border-left: 3px solid var(--h5-accent); }
.h5 .ticket-reply .message { color: var(--h5-ink); }
.h5 .md-editor, .h5 .md-editor > textarea, .h5 .md-editor .md-header, .h5 .md-editor .md-footer { background: var(--h5-night) !important; color: var(--h5-ink); border-color: var(--h5-line-strong) !important; }
.h5 .md-preview { background: var(--h5-night-2); color: var(--h5-ink); }
.h5 .ticketfeedbackrating .rate { color: var(--h5-ink-faint); }

/* knowledgebase, announcements, downloads, status */
.h5 .kb-category, .h5 .kb-article-item, .h5 .announcements .announcement { border-color: var(--h5-line); }
.h5 .kb-article-item a, .h5 .kb-category a { color: var(--h5-ink); }
.h5 .kb-article-item a:hover, .h5 .kb-category a:hover { color: var(--h5-glow); }
.h5 .kb-article-content, .h5 .announcement-single { color: var(--h5-ink); }

/* home page domain search and promos */
.h5 .home-domain-search { background: radial-gradient(1000px 480px at 80% 0%, color-mix(in srgb, var(--h5-wash) 35%, transparent), color-mix(in srgb, var(--h5-wash) 0%, transparent) 70%), var(--h5-night) !important; border-bottom: 1px solid var(--h5-line); }
.h5 .home-domain-search h2, .h5 .home-domain-search .lead { color: var(--h5-ink); }
.h5 .home-domain-search .input-group-wrapper { background: var(--h5-night-2); border: 1px solid var(--h5-line-strong); border-radius: 999px; }
.h5 .home-domain-search .tld-logos li { color: var(--h5-ink-dim); }
.h5 .promo-banner, .h5 .promo-container, .h5 .mc-promo-manage, .h5 .mc-panel-promo { background: var(--h5-night-2) !important; color: var(--h5-ink); border: 1px solid var(--h5-line); }
.h5 .promo-banner h3, .h5 .promo-banner h4, .h5 .promo-container h3 { color: var(--h5-ink); }
.h5 .featured-tld .price, .h5 .featured-tld .topper { color: var(--h5-ink); }
.h5 .domain-pricing .tld-pricing-header, .h5 .domain-pricing .tld-row { border-color: var(--h5-line); color: var(--h5-ink); }
.h5 .domain-pricing .tld-pricing-header > div, .h5 .domain-pricing .tld-row.highlighted { background: var(--h5-night-3) !important; }
.h5 .domain-pricing .tld-pricing-header .row { background: transparent !important; }
.h5 .domain-pricing .tld-pricing-header .col-4, .h5 .domain-pricing .tld-pricing-header .tld-column { background: var(--h5-night-3) !important; color: var(--h5-ink); border-bottom-color: var(--h5-line-strong); font-family: var(--h5-f-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.h5 .domain-pricing .tld-pricing-header .col-4:nth-child(odd) { border-bottom-color: var(--h5-accent); }
.h5 .domain-pricing .two-row-center { border-right-color: var(--h5-line-strong); }
.h5 .domain-checker-bg .input-group-box { background: var(--h5-night-3); border: 1px solid var(--h5-line); }
.h5 .domain-promo-box { background: var(--h5-night-2); border: 1px solid var(--h5-line); border-radius: var(--h5-radius-lg); color: var(--h5-ink); }
.h5 .domain-promo-box h3 { color: var(--h5-ink); font-family: var(--h5-f-display); }
.h5 .domain-promo-box i { color: var(--h5-ink-faint); }
.h5 .domain-promo-box .small { color: var(--h5-ink-dim); }

/* login, register, password reset */
.h5 .login-form, .h5 .logincontainer, .h5 #registration { color: var(--h5-ink); }
.h5 .social-signin-btns .btn { border-radius: 999px; }
.h5 .password-strength-meter .progress { background: color-mix(in srgb, var(--h5-tint) 12%, transparent); }

/* products: service details, upgrade, add funds */
.h5 .product-details .product-icon, .h5 .product-status { background: var(--h5-night-3) !important; border: 1px solid var(--h5-line); color: var(--h5-ink); border-radius: var(--h5-radius); }
.h5 .product-details .product-status-active, .h5 .product-status.product-status-active { box-shadow: inset 0 -3px 0 var(--h5-good); }
.h5 .product-details .product-status-suspended { box-shadow: inset 0 -3px 0 var(--h5-bad); }
.h5 .div-service-item, .h5 .div-service-status { color: var(--h5-ink); }
.h5 .upgrade .card, .h5 .upgrade .header { background: var(--h5-night-2); }
.h5 .affiliate-stat { background: var(--h5-night-2); border-color: var(--h5-line); color: var(--h5-ink); }
.h5 .affiliate-stat span { color: var(--h5-ink); }
.h5 .twofa-module .card { background: var(--h5-night-3); }

/* full-page overlay and ajax loader */
.h5 #fullpage-overlay { background: color-mix(in srgb, var(--h5-night) 85%, transparent); }
.h5 #fullpage-overlay .msg { color: var(--h5-ink); }

/* ---------- shopping cart (standard_cart) ---------- */
.h5 #order-standard_cart { color: var(--h5-ink); }
.h5 #order-standard_cart .header-lined h1 { color: var(--h5-ink); }
.h5 #order-standard_cart .sub-heading { border-top-color: var(--h5-line); }
.h5 #order-standard_cart .sub-heading span, .h5 #order-standard_cart .sub-heading-borderless span { background: var(--h5-night); color: var(--h5-glow); font: 600 12px/1.4 var(--h5-f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.h5 #order-standard_cart .products .product { background: var(--h5-night-2); border: 1px solid var(--h5-line); border-radius: var(--h5-radius-lg); box-shadow: none; overflow: hidden; }
.h5 #order-standard_cart .products .product header { background: transparent; border-bottom: 1px solid var(--h5-line); color: var(--h5-ink); }
.h5 #order-standard_cart .products .product header span { font: 850 22px/1.1 var(--h5-f-display); font-stretch: 108%; text-transform: uppercase; color: var(--h5-ink); }
.h5 #order-standard_cart .products .product header .qty { color: var(--h5-ink-faint); }
.h5 #order-standard_cart .products .product div.product-desc { color: var(--h5-ink-dim); }
.h5 #order-standard_cart .products .product div.product-desc ul li { border-bottom: 1px solid var(--h5-line); }
.h5 #order-standard_cart .products .product footer { background: transparent; color: var(--h5-ink); }
.h5 #order-standard_cart .products .product .product-pricing .price { font: 850 30px/1 var(--h5-f-display); color: var(--h5-ink); }
.h5 #order-standard_cart .cart-sidebar .card, .h5 #order-standard_cart .secondary-cart-sidebar .card { background: var(--h5-night-2); }
.h5 #order-standard_cart .cart-sidebar .list-group-item.active { background: rgba(98, 173, 50, 0.14); }
.h5 #order-standard_cart .order-summary { background: var(--h5-night-2) !important; border: 1px solid var(--h5-line-strong) !important; border-radius: var(--h5-radius-lg); color: var(--h5-ink); }
.h5 #order-standard_cart .order-summary h2 { background: transparent !important; color: var(--h5-ink) !important; font: 700 16px/1.2 var(--h5-f-display); border-bottom: 1px solid var(--h5-line); }
.h5 #order-standard_cart .order-summary .summary-container { background: transparent !important; color: var(--h5-ink); }
.h5 #order-standard_cart .order-summary .product-name { color: var(--h5-ink); }
.h5 #order-standard_cart .order-summary .product-group, .h5 #order-standard_cart .order-summary .item-group { color: var(--h5-ink-faint); }
.h5 #order-standard_cart .order-summary .total-due-today .amt { font: 850 30px/1 var(--h5-f-display); color: var(--h5-accent-text); }
.h5 #order-standard_cart .order-summary .subtotal, .h5 #order-standard_cart .order-summary .bordered-totals { border-color: var(--h5-line); }
.h5 #order-standard_cart .view-cart-items-header { background: var(--h5-night-3) !important; color: var(--h5-glow) !important; font: 600 12px/1.4 var(--h5-f-mono); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 12px 12px 0 0; }
.h5 #order-standard_cart .view-cart-items { border-color: var(--h5-line) !important; }
.h5 #order-standard_cart .view-cart-items .item { background: var(--h5-night-2) !important; border-color: var(--h5-line) !important; color: var(--h5-ink); }
.h5 #order-standard_cart .view-cart-items .item-title { color: var(--h5-ink); }
.h5 #order-standard_cart .view-cart-items .item-group, .h5 #order-standard_cart .view-cart-items .item-domain { color: var(--h5-ink-faint) !important; }
.h5 #order-standard_cart .view-cart-tabs .nav-tabs a { color: var(--h5-ink-dim); background: transparent; }
.h5 #order-standard_cart .view-cart-tabs .nav-tabs .active a, .h5 #order-standard_cart .view-cart-tabs .nav-tabs a.active { color: var(--h5-ink); border-bottom-color: var(--h5-accent); }
.h5 #order-standard_cart .view-cart-tabs .tab-content { background: var(--h5-night-2); border-color: var(--h5-line); }
.h5 #order-standard_cart .empty-cart .btn, .h5 #order-standard_cart .btn-remove-from-cart { color: var(--h5-bad); }
.h5 #order-standard_cart .panel-addon, .h5 #order-standard_cart .addon-promo-container, .h5 #order-standard_cart .domain-selection-options .option, .h5 #order-standard_cart .account-select-container .account, .h5 #order-standard_cart .apply-credit-container, .h5 #order-standard_cart .cc-input-container { background: var(--h5-night-2) !important; border-color: var(--h5-line) !important; color: var(--h5-ink); border-radius: var(--h5-radius); }
.h5 #order-standard_cart .panel-addon-selected, .h5 #order-standard_cart .domain-selection-options .option-selected, .h5 #order-standard_cart .account-select-container .account.active { border-color: var(--h5-accent) !important; background: rgba(98, 173, 50, 0.1) !important; }
.h5 #order-standard_cart .panel-addon .panel-add { background: var(--h5-night-3); color: var(--h5-ink); }
.h5 #order-standard_cart .panel-addon-selected .panel-add { background: var(--h5-accent); color: var(--h5-accent-ink); }
.h5 #order-standard_cart .domain-checker-container, .h5 #order-standard_cart .domain-checker-bg { background: var(--h5-night-2) !important; border: 1px solid var(--h5-line); border-radius: var(--h5-radius-lg); }
.h5 #order-standard_cart .domain-checker-result-headline .domain-checker-available { color: var(--h5-good); }
.h5 #order-standard_cart .domain-checker-result-headline .domain-checker-unavailable { color: var(--h5-bad); }
.h5 #order-standard_cart .domain-suggestions .list-group-item, .h5 #order-standard_cart .domain-lookup-primary-results { background: var(--h5-night-2); border-color: var(--h5-line); color: var(--h5-ink); }
.h5 #order-standard_cart .domains-row .domain-text { color: var(--h5-ink); }
.h5 #order-standard_cart .field, .h5 #order-standard_cart .form-control { background: var(--h5-night); color: var(--h5-ink); border-color: var(--h5-line-strong); }
.h5 #order-standard_cart .prepend-icon .field-icon { color: var(--h5-ink-faint); }
.h5 #order-standard_cart .checkout-security-msg { background: color-mix(in srgb, var(--h5-tint) 6%, transparent); border-color: var(--h5-line); color: var(--h5-ink-dim); }
.h5 #order-standard_cart .order-confirmation { background: var(--h5-night-2); border: 1px solid var(--h5-line); color: var(--h5-ink); border-radius: var(--h5-radius); }
.h5 #order-standard_cart .mc-promo .header { background: var(--h5-night-3); color: var(--h5-ink); }
.h5 #order-standard_cart .mc-promo .body, .h5 #order-standard_cart .mc-promo { background: var(--h5-night-2); color: var(--h5-ink-dim); border-color: var(--h5-line); }
.h5 #order-standard_cart .transfer-eligible { color: var(--h5-good); }
.h5 #order-standard_cart .transfer-not-eligible { color: var(--h5-bad); }
.h5 #order-standard_cart .sidebar-collapsed { background: var(--h5-night-2); }

/* store landing pages (MarketConnect) keep their imagery; recolor text only */
.h5 .landing-page, .h5 .landing-page .content-block { color: var(--h5-ink); }
.h5 .landing-page .hero { background-color: var(--h5-night-2); }

/* ---------- footer ---------- */
.h5 footer.footer.h5-footer { background: var(--h5-footer-bg); border-top: 1px solid var(--h5-line); color: var(--h5-ink-faint); padding: 56px 0 calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.h5-foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.h5-foot-grid h2 { font: 600 12px/1 var(--h5-f-mono) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--h5-ink-dim) !important; margin-bottom: 14px; }
.h5-foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.h5-foot-grid li a { display: inline-block; padding-block: 6px; }
.h5 .h5-foot-grid a { text-decoration: none; color: var(--h5-ink-faint); }
.h5 .h5-foot-grid a:hover { color: var(--h5-ink); }
.h5-foot-brand { display: grid; gap: 14px; align-content: start; }
.h5-foot-brand .h5-logo { height: 30px; }
.h5-foot-brand p { max-width: 36ch; margin: 0; }
.h5 .h5-foot-brand p a { color: var(--h5-glow); text-decoration: underline; text-underline-offset: 3px; }
.h5-tagline { font: 700 15px/1.2 var(--h5-f-display); font-stretch: 108%; color: var(--h5-ink); text-transform: uppercase; letter-spacing: 0.02em; }
.h5-tagline em { font-style: normal; color: var(--h5-accent-text); }
.h5-foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--h5-line); font: 500 12px/1.4 var(--h5-f-mono); }
.h5-foot-end { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* theme switch (System / Light / Dark), same as the site footer: quiet until you look for it */
.h5-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--h5-line); background: var(--h5-night-2); }
.h5-theme-switch button { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 999px; color: var(--h5-ink-faint); cursor: pointer; transition: color 0.2s, background 0.2s; }
.h5-theme-switch button:hover { color: var(--h5-ink); }
.h5-theme-switch button[aria-checked="true"] { color: var(--h5-ink); background: color-mix(in srgb, var(--h5-tint) 14%, transparent); }
.h5-theme-switch button:focus-visible { outline: 2px solid var(--h5-glow); outline-offset: 1px; }
.h5-theme-switch svg { width: 15px; height: 15px; }
@media (max-width: 860px) { .h5-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h5-foot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .h5 *, .h5 *::before, .h5 *::after { transition: none !important; animation: none !important; }
}