/* *****************************************************
   cloudhost.ke brand theme — child of Nexus
   Palette sampled from Logo2.png, fixed. See marketing
   site src/styles/global.css for the canonical values.
***************************************************** */

/* ============================================================
   1. Brand tokens — repoints the scaffold that Nexus's newer
   "modern" components (footer, topbar, cards) already consume
   via var(). Classic Bootstrap-compiled components (buttons,
   links, badges, pagination, forms) use hardcoded hex instead
   and are overridden explicitly in section 2.
   ============================================================ */
:root {
  --brand-blue: #004EFE;
  --brand-blue-hover: #0047e9;
  --brand-blue-active: #0042d7;
  --brand-navy: #001537;
  --brand-green: #038F30;
  --brand-green-ink: #02772A;

  --primary: var(--brand-blue);
  --primary-lifted: var(--brand-blue-hover);
  --primary-accented: var(--brand-blue-active);

  --success: var(--brand-green);
  --success-lifted: #02772A;
  --success-accented: #025F22;

  /* dark neutrals tinted toward navy instead of pure grey */
  --grayscale: var(--brand-navy);
  --grayscale-lifted: #0A2450;
  --grayscale-accented: #0A2450;
  --bg-inverted: var(--brand-navy);
  --text-inverted: #F7F9FC;

  --text: #001537;
  --text-lifted: #2A4470;
  --text-accented: #2A4470;
  --text-muted: #7C8CA8;

  --bg: #FFFFFF;
  --bg-muted: #F7F9FC;
  --bg-lifted: #EEF2F8;
  --bg-accented: #D9DFE9;

  --border: #D9DFE9;
  --border-muted: #EEF2F8;
  --border-lifted: #7C8CA8;
  --border-accented: #2A4470;
}

/* ============================================================
   2. Support strip — present on every page, ties this property
   to cloudhost.ke's marketing site. Same treatment as the
   marketing site's footer band: hours in green, phone in white.
   ============================================================ */
.cloudtrade-support-strip {
  background: var(--brand-navy);
  padding: 18px 0;
}
.cloudtrade-support-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.cloudtrade-support-strip__claim {
  color: rgba(247, 249, 252, 0.75);
  font-size: 15px;
  font-weight: 600;
}
.cloudtrade-support-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
}
.cloudtrade-support-strip__hours {
  color: #3FCB63;
}
.cloudtrade-support-strip__phone {
  color: #F7F9FC;
  font-weight: 800;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cloudtrade-support-strip__phone .fa-phone {
  color: #3FCB63;
  font-size: 14px;
}
.cloudtrade-support-strip__link:hover .cloudtrade-support-strip__phone,
.cloudtrade-support-strip__link:focus .cloudtrade-support-strip__phone {
  text-decoration: underline;
}
@media (max-width: 700px) {
  .cloudtrade-support-strip__claim { display: none; }
}

/* ============================================================
   3. Domain checker banner — the yellow gradient + globe image
   live in templates/orderforms/standard_cart/, which we were
   told not to touch. Overridden here via cascade only; no files
   in that directory are modified.
   ============================================================ */
.domain-checker-container {
  background-color: var(--brand-navy) !important;
  background: var(--brand-navy) !important;
}
.domain-checker-bg {
  background-image: none !important;
}

/* Search box inside the banner was a 592x120 multi-line textarea
   with the button absolutely positioned inside it (right:20px;
   top:74px, from orderforms' own style.css), sitting in an
   80px-padding panel — read as a bug, not a search bar. Restyled
   to match the marketing site's search field (2px navy border,
   3px radius, 56px height) and restructured into two stacked
   rows — search bar, then TLD/length/safe-search controls — by
   the script at the end of footer.tpl, which wraps the existing
   elements without touching orderforms markup. */
.domain-checker-bg {
  padding: 40px 0 !important;
}
.domain-checker-container .input-group-box {
  padding: 20px;
  border-radius: 8px;
}
.cloudtrade-domain-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.domain-checker-container.domain-checker-advanced textarea#message {
  width: auto !important;
  flex: 1;
  min-width: 0;
  height: 56px !important;
  max-height: 56px;
  min-height: 56px;
  resize: none;
  overflow: hidden;
  padding: 16px;
  line-height: 1.25;
  font-size: 16px;
  border: 2px solid var(--brand-navy);
  border-radius: 3px;
  box-shadow: none;
}
.domain-checker-container textarea#message:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.25);
  outline: none;
}
.domain-checker-container.domain-checker-advanced #btnCheckAvailability {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  height: 56px;
  border-radius: 3px;
  padding: 0 28px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.cloudtrade-domain-helper {
  width: 100%;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--navy-300, #7C8CA8);
}
.cloudtrade-domain-options {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.domain-checker-container .multiselect.btn-default {
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}
.domain-checker-container .multiselect.btn-default:hover,
.domain-checker-container .multiselect.btn-default:focus {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.domain-checker-container .checkbox label {
  color: var(--brand-navy);
}

/* The domain search textarea auto-shows a Bootstrap tooltip on
   page load (confirmed via a fresh, uninteracted page load) that
   sits directly over the Search button. Bootstrap injects tooltip
   elements as a direct child of <body>, not nested in the banner,
   so this can't be scoped by container — scoped by page instead
   (body.cloudtrade-cart-page, set in header.tpl) rather than
   hiding .tooltip everywhere, which would also break legitimate
   tooltips like the account-switcher in the logged-in topbar. */
body.cloudtrade-cart-page .tooltip {
  display: none !important;
}

/* ============================================================
   4. Classic Bootstrap-compiled components — theme.css bakes
   these in as literal hex (#007bff etc.) from the Sass compile,
   so CSS variables above don't reach them. Overridden directly.
   ============================================================ */
a {
  color: var(--brand-blue);
}
a:hover {
  color: var(--brand-blue-active);
}

.btn-primary {
  color: #fff;
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-primary:hover {
  background-color: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.5);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--brand-blue-active);
  border-color: var(--brand-blue-active);
}

.btn-outline-primary {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-outline-primary:hover {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.5);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--brand-blue);
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-link {
  color: var(--brand-blue);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-blue);
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--brand-blue);
  background-color: var(--brand-blue);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: var(--brand-blue);
  background-color: var(--brand-blue);
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--brand-blue);
}
.custom-range::-webkit-slider-thumb {
  background-color: var(--brand-blue);
}
.custom-range::-moz-range-thumb {
  background-color: var(--brand-blue);
}
.custom-range::-ms-thumb {
  background-color: var(--brand-blue);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand-blue);
}

.page-link {
  color: var(--brand-blue);
}
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.25);
}
.page-item.active .page-link {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.badge-primary {
  color: #fff;
  background-color: var(--brand-blue);
}

.progress-bar {
  background-color: var(--brand-blue);
}

.list-group-item.active {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.bg-primary {
  background-color: var(--brand-blue) !important;
}
.border-primary {
  border-color: var(--brand-blue) !important;
}
.text-primary {
  color: var(--brand-blue) !important;
}

.form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.25);
}

/* success family — brand green, since our green already is the
   site's semantic "good/available/online" color */
.badge-success {
  background-color: var(--brand-green);
}
.text-success {
  color: var(--brand-green-ink) !important;
}
.btn-success {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}
.btn-success:hover {
  background-color: var(--brand-green-ink);
  border-color: var(--brand-green-ink);
}

/* ============================================================
   5. Navbar — light bg per Nexus default, brand-tinted text
   ============================================================ */
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: var(--brand-blue);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--brand-blue);
}
.navbar-light .navbar-nav .nav-link.active {
  color: var(--brand-blue);
}

/* ============================================================
   6. Homepage "Powered by WHMCompleteSolution" notice — this is
   appended by WHMCS core to the homepage's rendered content
   itself (confirmed absent from homepage.tpl and its compiled
   cache), not something any theme template controls. Hidden via
   :has() rather than edited at the source, since there is no
   source file to edit.
   ============================================================ */
#main-body p:has(> a[href="https://www.whmcs.com/"]) {
  display: none;
}

/* ============================================================
   7. Email verification banner — stock Nexus ships this as
   #f9f9f9 grey with a #333 warning triangle, off-palette against
   everything else on the site (support strip, CTA bands, and the
   domain-checker banner are all navy). Brought into the same
   treatment rather than removed.
   ============================================================ */
.verification-banner.email-verification {
  background-color: var(--brand-navy);
  border-bottom: none;
  color: #F7F9FC;
}
.verification-banner.email-verification .text {
  color: #F7F9FC;
}
.verification-banner.email-verification i.fa-exclamation-triangle {
  color: #F7F9FC;
}
.verification-banner.email-verification .btn.close {
  color: #F7F9FC;
  opacity: 0.7;
}
.verification-banner.email-verification .btn.close:hover {
  opacity: 1;
}
.verification-banner.email-verification .btn-resend-verify-email {
  background: transparent;
  border: 1px solid rgba(247, 249, 252, 0.4);
  color: #F7F9FC;
}
.verification-banner.email-verification .btn-resend-verify-email:hover {
  border-color: #F7F9FC;
}

/* ============================================================
   8. Container width — match the marketing site's container
   (src/styles/global.css: max-width 1680px, clamp(24,4vw,96)
   padding) so crossing from cloudhost.ke to billing.cloudhost.ke
   doesn't suddenly feel like a narrower, emptier page. Bootstrap
   compiles its own per-breakpoint .container rules into theme.css
   at the same specificity, loaded after this file, so !important
   is needed to win regardless of load order.
   ============================================================ */
.container {
  max-width: 1680px !important;
  padding-left: clamp(24px, 4vw, 96px) !important;
  padding-right: clamp(24px, 4vw, 96px) !important;
}

/* ============================================================
   9. Domain checker result colors. Reported bug: a taken domain
   rendered as red text sitting inside a leftover green-bordered
   band — exactly backwards from the palette rule (green =
   available, muted navy = taken, never red-on-green). Both ends
   are set explicitly here rather than assumed neutral, so there's
   no dependency on whatever border color the taken state
   inherited before.
   ============================================================ */
#primaryLookupResult p.domain-available,
#primaryLookupResult p.domain-unavailable,
#primaryLookupResult p.domain-tld-unavailable,
#primaryLookupResult p.domain-invalid {
  display: block;
  padding: 16px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
}
#primaryLookupResult p.domain-available {
  color: var(--brand-green-ink) !important;
  background: rgba(3, 143, 48, 0.08);
  border: 1px solid rgba(3, 143, 48, 0.35);
}
#primaryLookupResult p.domain-unavailable,
#primaryLookupResult p.domain-tld-unavailable,
#primaryLookupResult p.domain-invalid {
  color: var(--text-muted) !important;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}
#primaryLookupResult .domain-price {
  margin-top: 12px;
}

/* Same available/taken treatment for the spotlight widget and
   our own TLD-alternatives table (section 11) below. */
.spotlight-tld .btn.unavailable,
.spotlight-tld .btn.invalid {
  color: var(--text-muted) !important;
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
}
.spotlight-tld .available.price {
  color: var(--brand-green-ink) !important;
  font-weight: 700;
}

/* ============================================================
   10. Domain-page promo cards ("Add Web Hosting" / "Transfer a
   Domain to Us") shipped with amber btn-warning buttons and
   stock globe/server FontAwesome icons — neither is in the
   palette. Brand-blue primary + navy border; icons dropped.
   ============================================================ */
.domain-promo-box {
  background: var(--bg-muted);
  border: 1px solid var(--brand-navy);
  color: var(--text);
}
.domain-promo-box i.fa-globe,
.domain-promo-box i.fa-server {
  display: none;
}
.domain-promo-box h3 {
  color: var(--brand-navy);
}
.domain-promo-box .text-warning,
.domain-promo-box p.text-primary {
  color: var(--text-muted) !important;
}
.domain-promo-box .btn-warning {
  color: #fff;
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.domain-promo-box .btn-warning:hover,
.domain-promo-box .btn-warning:focus {
  background-color: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}

/* ============================================================
   11. "Suggested Domains" is permanently non-functional in this
   install — the ResellerClub registrar module has no suggestion
   (namespinning) hook at all (confirmed by grepping the whole
   module: zero matches), so the panel always reports "could not
   find any suggestions" regardless of keyword. Not a credentials
   or credit problem; there is nothing for WHMCS to call. Hidden
   here rather than left showing a dead end on every search.
   Replaced by our own TLD-alternatives table, built in
   footer.tpl from repeated calls to the one lookup endpoint that
   does work (/domain/check, type=domain — confirmed live against
   ResellerClub, returns real pricing).
   ============================================================ */
body.cloudtrade-cart-page .suggested-domains {
  display: none !important;
}

.cloudtrade-live-tlds {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}
.cloudtrade-live-tlds .panel-heading {
  background: var(--bg-muted);
  padding: 12px 20px;
  font-weight: 700;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--border);
}
.cloudtrade-live-tlds-rows .domain-suggestion {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-muted);
}
.cloudtrade-live-tlds-rows .domain-suggestion:last-child {
  border-bottom: none;
}
.cloudtrade-live-tlds-rows .domain-suggestion .actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Available = brand green, taken = muted navy ("navy-300") -- same
   semantic pairing as section 9's primary result colors, never red. */
.cloudtrade-live-tlds-rows .domain-suggestion.cloudtrade-live-tld-taken {
  opacity: 0.75;
}
.cloudtrade-live-tld-status {
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}
.cloudtrade-live-tlds-rows .domain-suggestion.cloudtrade-live-tld-available .cloudtrade-live-tld-status {
  color: var(--brand-green-ink);
  background: rgba(3, 143, 48, 0.08);
  border-color: rgba(3, 143, 48, 0.35);
}
.cloudtrade-live-tlds-rows .domain-suggestion .price {
  font-weight: 700;
  color: var(--brand-green-ink);
}
.cloudtrade-live-tlds-notice {
  padding: 14px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   12. Footer — was just a Contact Us link + language picker on
   a navy band. Product links, address, and the support
   commitment brought in from the marketing site's footer,
   adapted to WHMCS's existing footer markup rather than
   reproducing the marketing site's own grid 1:1.
   ============================================================ */
.footer {
  background: var(--brand-navy);
  color: rgba(247, 249, 252, 0.78);
  padding-top: 40px;
}
.cloudtrade-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(247, 249, 252, 0.14);
  margin-bottom: 24px;
}
.cloudtrade-footer-col .eyebrow {
  color: rgba(247, 249, 252, 0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  display: block;
}
.cloudtrade-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cloudtrade-footer-col a {
  color: rgba(247, 249, 252, 0.78);
  text-decoration: none;
  font-size: 14px;
}
.cloudtrade-footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}
.cloudtrade-footer-col--brand p {
  font-size: 14px;
  color: rgba(247, 249, 252, 0.6);
  margin: 0 0 8px;
}
.cloudtrade-footer-hours {
  color: #3FCB63;
  font-weight: 700;
}
.footer .nav-link,
.footer .copyright {
  color: rgba(247, 249, 252, 0.6);
}
.footer .nav-link:hover {
  color: #fff;
}
@media (max-width: 900px) {
  .cloudtrade-footer-grid { grid-template-columns: 1fr 1fr; }
  .cloudtrade-footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .cloudtrade-footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   13. Domains Configuration (cart.php?a=confdomains) — was stock
   Bootstrap-panel styling: a bare hairline "sub-heading" divider
   for the domain name, a hardcoded #cc0000 "[No Hosting!]"
   warning inline in the template (can't be edited — lives in
   orderforms/standard_cart/configuredomains.tpl), and flat grey
   addon panels with a saturated Bootstrap-green (#5cb85c) Add to
   Cart bar that doesn't match the brand-blue CTA used everywhere
   else on the site. Redesigned entirely via cascade + the click
   -to-toggle script in footer.tpl; no orderforms files touched.
   ============================================================ */
#order-standard_cart .sub-heading {
  border-top-color: var(--border);
  margin-top: 32px;
  margin-bottom: 36px;
}
#order-standard_cart .sub-heading span {
  background: var(--bg);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 18px;
  padding: 0 20px;
}

/* Registration Period / Hosting status row */
#order-standard_cart .cart-body > form > .row > .col-sm-6 .form-group label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

/* "Hosting: [has hosting]" — brand green, matches the available/
   success treatment used on the domain search results page. */
#order-standard_cart span[style*="color:#009900"],
#order-standard_cart span[style*="color: #009900"] {
  color: var(--brand-green-ink) !important;
  font-weight: 700;
}

/* "[No Hosting! Click to Add]" — was a bare #cc0000 red link,
   reading as an error rather than the upsell it actually is.
   Reframed as a soft advisory chip with a real CTA feel. */
#order-standard_cart a[href$="/cart.php"][style*="color:#cc0000"],
#order-standard_cart a[href$="/cart.php"][style*="color: #cc0000"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-blue) !important;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-weight: 600;
  text-decoration: none;
}
#order-standard_cart a[href$="/cart.php"][style*="color:#cc0000"]:hover,
#order-standard_cart a[href$="/cart.php"][style*="color: #cc0000"]:hover {
  border-color: var(--brand-blue);
  text-decoration: none;
}

/* Addon panels (DNS Management / ID Protection / Email Forwarding) */
#order-standard_cart .panel-addon {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#order-standard_cart .panel-addon:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 4px 14px rgba(0, 21, 55, 0.08);
  transform: translateY(-1px);
}
#order-standard_cart .panel-addon .panel-body {
  border-radius: 0;
  padding: 18px 16px;
  background: var(--bg);
}
#order-standard_cart .panel-addon .panel-body label {
  color: var(--brand-navy);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
#order-standard_cart .panel-addon .panel-body {
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.5;
}
#order-standard_cart .panel-addon .panel-price {
  background: var(--bg-muted);
  color: var(--brand-navy);
  font-weight: 700;
  padding: 10px;
  border-top: 1px solid var(--border);
}
#order-standard_cart .panel-addon .panel-add {
  background-color: var(--brand-blue) !important;
  color: #fff;
  font-weight: 700;
  padding: 12px;
  transition: background-color 0.15s ease;
}
#order-standard_cart .panel-addon:hover .panel-add {
  background-color: var(--brand-blue-hover) !important;
}
#order-standard_cart .panel-addon-selected {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 78, 254, 0.12);
}
#order-standard_cart .panel-addon-selected .panel-body {
  background: rgba(0, 78, 254, 0.04);
}
#order-standard_cart .panel-addon-selected .panel-add {
  background-color: var(--brand-blue-active) !important;
}

/* Nameservers grid + Continue button */
#order-standard_cart #inputNs1,
#order-standard_cart #inputNs2,
#order-standard_cart #inputNs3,
#order-standard_cart #inputNs4,
#order-standard_cart #inputNs5 {
  border-radius: 4px;
}
#order-standard_cart button[type="submit"].btn-primary.btn-lg {
  padding: 14px 42px;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 78, 254, 0.25);
}

/* ============================================================
   14. White-flash fix — nothing set html's background before,
   so the browser painted its default white for the brief window
   between navigation and this stylesheet finishing parse, most
   visible arriving from the marketing site (whose own body
   background is already this exact color, #F7F9FC — see
   --paper in src/styles/global.css). --bg-muted here is already
   the same value; reused rather than introducing a second name
   for one color.
   ============================================================ */
html {
  background: var(--bg-muted);
}

/* ============================================================
   15. Header shell — sized to feel continuous with the marketing
   site's header (measured live: 73px tall, 40px logo, fixed 24px
   side padding) rather than jumping to a visibly different shell
   on arrival. WHMCS's header is structurally two stacked rows
   (logo/search/cart, then the primary nav) where the marketing
   site's is one — so this closes the gap as far as CSS
   reasonably can (60px logo -> 40px, row spacing tightened,
   fixed 24px edge padding matching the marketing header
   specifically rather than the wider clamp() used for page
   content below it) without merging the two rows into one,
   which would be a structural nav rebuild, not a style pass.
   ============================================================ */
header.header .logo-img {
  max-height: 40px;
  max-width: 200px;
}
header.header .navbar-light .container.mt-2.mb-2 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
header.header .navbar .container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ============================================================
   16. Domain-search results redesign: popular-TLD cards + the
   "browse by category" pricing table. Replaces the flat,
   unbranded data-grid look (default borders/greys, no hover
   states) with the site's card language, and states the 1-year
   registration term once (table note) instead of repeating it
   in every cell -- see cloudtrade_domain_pricing.php, which also
   moved price formatting off WHMCS's Money::__toString() (whole
   KES, single "KES" label) rather than styling around it here.
   ============================================================ */
.cloudtrade-popular-tlds {
  margin: 8px 0 32px;
}
.cloudtrade-popular-tld-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-top: 12px;
}
.cloudtrade-popular-tld-card {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 700px) {
  .cloudtrade-popular-tld-row {
    flex-wrap: wrap;
  }
  .cloudtrade-popular-tld-card {
    flex: 1 1 45%;
  }
}
.cloudtrade-popular-tld-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cloudtrade-popular-tld-card:hover {
  box-shadow: 0 6px 20px rgba(0, 21, 55, 0.08);
  transform: translateY(-2px);
}
.cloudtrade-popular-tld-ext {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-navy);
}
.cloudtrade-popular-tld-hook {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 6px 0 14px;
  min-height: 2.4em;
}
.cloudtrade-popular-tld-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}
.cloudtrade-popular-tld-price span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}
.cloudtrade-popular-tld-add {
  width: 100%;
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.cloudtrade-popular-tld-add:hover,
.cloudtrade-popular-tld-add:focus {
  background-color: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}

.cloudtrade-tld-table-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: -4px 0 16px;
}

/* Category pricing table: navy header, generous row spacing,
   brand-blue links, full-width to match the rest of the page
   (was capped by the surrounding .cart-body column already, but
   the flat white/grey table chrome read as a bare data grid). */
.cloudtrade-tld-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cloudtrade-tld-table .tld-pricing-header {
  background: var(--brand-navy);
  color: var(--text-inverted);
  font-weight: 700;
  padding: 14px 0;
  letter-spacing: 0.02em;
}
.cloudtrade-tld-table .tld-row {
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--border-muted);
  transition: background-color 0.15s ease;
}
.cloudtrade-tld-table .tld-row:last-child {
  border-bottom: none;
}
.cloudtrade-tld-table .tld-row:hover {
  background: var(--bg-muted);
}
.cloudtrade-tld-table .tld-row strong {
  color: var(--brand-navy);
}
.cloudtrade-tld-table a {
  color: var(--brand-blue);
}

/* ============================================================
   17. Typography — port of the marketing site's type system.
   cloudhost.ke self-hosts three variable woff2 faces (Archivo
   display / Public Sans body / JetBrains Mono figures) from
   ~/cloudhost-rebuild/public/fonts. The same files are copied
   into templates/cloudtrade/fonts/ rather than hotlinked across
   origins, and declared with the same weight ranges, swap
   behaviour and Latin unicode-range as
   src/styles/global.css. Nexus's own Open Sans link stays in
   head.tpl as the fallback if a face fails to load.
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/archivo-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body: 'Public Sans', 'Open Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

body,
.btn,
.form-control,
input,
select,
textarea,
button,
.dropdown-item,
.list-group-item,
.nav-link {
  font-family: var(--font-body);
}

body {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Display face for real headings only — .panel-title is a 14px
   chrome label in Nexus, not a heading, so it stays on the body
   face (matching the marketing site, where Archivo starts at h3
   / 18px and never sizes below that). */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
h1.font-size-36,
h2.font-size-30 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  /* deliberately no colour: headings must keep inheriting, or
     every heading on a navy surface (footer, support strip, dark
     panels) turns navy-on-navy. */
}

/* Colour is set here, on the light-surface content area only,
   rather than on the blanket heading rule above — that rule also
   catches headings sitting on navy (footer, support strip), which
   would turn them navy-on-navy. Nexus leaves page titles at
   Bootstrap's #212529, a near-black that isn't in the palette. */
#main-body h1,
#main-body h2,
#main-body h3,
#main-body h4 {
  color: var(--text);
}

h1.font-size-36,
#main-body h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem) !important;
  margin-bottom: 8px;
}
h2.font-size-30,
#main-body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}

/* Figures — prices, totals, invoice amounts, domain names and
   any tabular number — are mono on the marketing site. */
.price,
.product-pricing,
.total-due-today,
.subtotal,
.recurring-totals,
.cloudtrade-popular-tld-price,
.cloudtrade-popular-tld-ext,
.summary-container .amount,
.cloudtrade-footer-meta,
.eyebrow,
.cloudtrade-support-strip__phone {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01';
}

/* The marketing site's eyebrow: mono, 12px, wide tracking. */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   18. Page shell — page background, headings block, breadcrumb.
   Marketing site is content (--paper #F7F9FC) with raised
   surfaces (--paper-raised #EEF2F8) sitting on it. Nexus had it
   inverted: a flat #EEF2F8 page with white cards, which is what
   made the store read as a generic control panel rather than a
   continuation of cloudhost.ke.
   ============================================================ */
body #main-body {
  background: var(--bg-muted);
  padding-top: 32px;
}

/* Breadcrumb was a solid --bg-accented (#D9DFE9) band spanning
   the full width — the heaviest element on the page and the
   first thing under the nav. Reduced to a quiet inline trail.
   Both the band and the inner .breadcrumb carry that colour in
   the parent, and body itself is navy (the footer bleeds up), so
   both are repainted rather than made transparent. */
.master-breadcrumb {
  background-color: var(--bg-muted);
  border-bottom: 1px solid var(--border-muted);
}
.master-breadcrumb .breadcrumb {
  background-color: var(--bg-muted);
  padding: 14px 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.master-breadcrumb .breadcrumb a {
  color: var(--text-muted);
}
.master-breadcrumb .breadcrumb a:hover {
  color: var(--brand-blue);
}

/* ============================================================
   19. Buttons — the marketing site has exactly three: solid blue
   primary, 2px navy outline secondary, and a white outline for
   navy surfaces. All are 3px radius / 700 weight / 48px min
   height. Nexus ships square (0 radius) 400-weight buttons in
   six colours, so the mapping is: primary + every purchase CTA
   -> blue, default -> navy outline, and green is taken off
   buttons entirely (on this brand green means available /
   online / operational, never "click here").
   ============================================================ */
.btn {
  border-radius: 3px;
  font-weight: 700;
  padding: 12px 24px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}
.btn-lg {
  padding: 15px 28px;
  font-size: 17px;
}

/* Purchase CTAs. .btn-order-now (store), .btn-checkout (cart)
   and .btn-add (upsell rows) all inherit btn-success in Nexus. */
.btn-order-now,
.btn-checkout,
.btn-add,
.btn-add-to-cart,
a.btn-success,
button.btn-success,
input.btn-success {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.btn-order-now:hover,
.btn-checkout:hover,
.btn-add:hover,
.btn-add-to-cart:hover,
a.btn-success:hover,
button.btn-success:hover,
input.btn-success:hover {
  background-color: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  color: #fff;
}
.btn-checkout {
  width: 100%;
}

/* Secondary — 2px navy outline, inverts on hover. */
.btn-default,
.btn-secondary {
  background: transparent;
  border: 2px solid var(--brand-navy);
  color: var(--brand-navy);
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--text-inverted);
}

/* On navy surfaces (support strip, footer, dark panels) the
   outline goes white — brand blue is unreadable on navy. */
.footer .btn-outline-light,
.cloudtrade-dark .btn-default {
  border: 2px solid rgba(247, 249, 252, 0.5);
  color: var(--text-inverted);
}
.footer .btn-outline-light:hover {
  background: var(--text-inverted);
  border-color: var(--text-inverted);
  color: var(--brand-navy);
}

/* ============================================================
   20. Form controls — Nexus renders inputs with no border at all
   (a bottom box-shadow only) and square corners; the marketing
   site's one input treatment is a 2px navy box at 3px radius.
   Full 2px navy on every field in a 20-field checkout would be
   far heavier than the reference page it comes from, so the
   weight is stepped down to 1px for ordinary fields and kept at
   2px navy for search/lookup fields, which is where the
   marketing site actually uses it.
   ============================================================ */
.form-control,
.custom-select {
  border: 1px solid var(--border-lifted);
  border-radius: 3px;
  box-shadow: none;
  min-height: 44px;
  color: var(--text);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 254, 0.2);
}
.form-control::placeholder {
  color: var(--text-muted);
}
label {
  font-weight: 600;
  color: var(--text-lifted);
}

/* Knowledgebase search in the header keeps the 2px treatment. */
#header .form-control,
.header .form-control {
  border-width: 2px;
  border-color: var(--brand-navy);
}

/* ============================================================
   21. Cards, panels and the store sidebar — one surface
   treatment everywhere: raised background, 1px hairline border,
   6px radius, no shadow (the marketing site defines cards with
   borders, never shadows).
   ============================================================ */
.card,
.panel,
.panel-sidebar,
.summary-container,
.order-summary {
  background: var(--bg);
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.card-header,
.panel-heading {
  background: var(--bg-lifted) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px;
}
/* .panel-title is an <h3> in Nexus, so it inherits the display
   face from section 17 — but it renders at 13px, and Archivo is
   never used below 18px on the marketing site. Put back on the
   body face explicitly. */
.panel-title,
.card-header .panel-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-lifted);
}

.panel-sidebar .list-group-item {
  border-color: var(--border-muted);
  padding: 12px 20px;
  font-size: 15px;
  color: var(--text-lifted);
}
.panel-sidebar .list-group-item:hover {
  background: var(--bg-lifted);
  color: var(--text);
}
.panel-sidebar .list-group-item.active {
  background: var(--bg-lifted);
  border-color: var(--border-muted);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand-blue);
}

/* ============================================================
   22. Store product cards — the single biggest "unfinished"
   tell. Nexus renders each product as a white box with a 10px
   header strip, a 14px price and a small dark button, two per
   row, leaving half the page empty on a 3-product group. Rebuilt
   as the marketing site's tier card (--paper-raised surface,
   hairline border, 6px radius, mono price at 26px, full-width
   blue CTA) laid out three per row to match /hosting.
   ============================================================ */
/* Nexus scopes its product rules as
   `body #order-standard_cart .cart-body .products .product …`,
   so every override below has to carry the same prefix to win —
   a plain `.products .product` never lands. Both the .cart-body
   and non-.cart-body forms the parent ships are matched. */

/* Bootstrap's col-md-6 is what puts two cards on a row and
   leaves half the page empty. Replaced with the marketing
   site's own products grid (auto-fit / minmax / 20px gap), which
   fills the row for any product count instead of being pinned
   to a fixed column class.
   products.tpl emits a SEPARATE .row.row-eq-height per PAIR of
   products, so the grid has to sit on .products and the rows be
   flattened with display:contents — putting the grid on the row
   itself can never yield more than two per line. */
body #order-standard_cart .products,
body #order-standard_cart .cart-body .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
body #order-standard_cart .products .row-eq-height,
body #order-standard_cart .cart-body .products .row-eq-height {
  display: contents;
  margin: 0;
}
body #order-standard_cart .products .row-eq-height > [class*="col-"],
body #order-standard_cart .cart-body .products .row-eq-height > [class*="col-"] {
  flex: none;
  max-width: none;
  width: auto;
  padding: 0;
  display: flex;
}
/* products.tpl closes the float layout with .clearfix divs inside
   the row. Harmless under floats, but as grid children they take
   real cells and push the third product onto its own line. */
body #order-standard_cart .products .row-eq-height > .clearfix,
body #order-standard_cart .cart-body .products .row-eq-height > .clearfix {
  display: none;
}

body #order-standard_cart .products .product,
body #order-standard_cart .cart-body .products .product {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  background: var(--bg-lifted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
body #order-standard_cart .products .product:hover,
body #order-standard_cart .cart-body .products .product:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
}
body #order-standard_cart .products .product header,
body #order-standard_cart .cart-body .products .product header {
  display: block;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
}
body #order-standard_cart .products .product div.product-desc,
body #order-standard_cart .cart-body .products .product div.product-desc {
  padding: 0;
  color: var(--text-lifted);
  font-size: 14px;
}
body #order-standard_cart .products .product .product-desc ul,
body #order-standard_cart .cart-body .products .product .product-desc ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-family: var(--font-mono);
  font-size: 13px;
}
body #order-standard_cart .products .product .product-desc ul li,
body #order-standard_cart .cart-body .products .product .product-desc ul li {
  padding: 4px 0;
}
/* Products with no feature list configured must not leave a dead
   gap where the specs should be. (Several groups ship with an
   empty <ul> — see the note to Paul about filling these in.) */
body #order-standard_cart .products .product .product-desc ul:empty,
body #order-standard_cart .cart-body .products .product .product-desc ul:empty {
  display: none;
}
body #order-standard_cart .products .product footer,
body #order-standard_cart .cart-body .products .product footer {
  margin: auto 0 0;
  padding: 0;
  width: 100%;
  background: transparent;
  border: none;
}
body #order-standard_cart .products .product footer .product-pricing,
body #order-standard_cart .cart-body .products .product footer .product-pricing {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-lifted);
  margin: 20px 0;
  line-height: 1.5;
}
body #order-standard_cart .products .product footer .product-pricing .price,
body #order-standard_cart .cart-body .products .product footer .product-pricing .price {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .cart-body .products .product footer .btn-order-now {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 3px;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
body #order-standard_cart .products .product footer .btn-order-now:hover,
body #order-standard_cart .cart-body .products .product footer .btn-order-now:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}

/* ============================================================
   23. Cart, checkout and order summary — the pre-purchase path.
   ============================================================ */
.summary-container .order-summary,
.order-summary {
  padding: 4px 0;
}
.order-summary .summary-container h2,
.summary-container h2.font-size-30 {
  font-size: 20px !important;
  padding: 18px 20px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.summary-container .subtotal,
.summary-container .recurring-totals,
.summary-container .total-due-today {
  padding-left: 20px;
  padding-right: 20px;
}
.summary-container .total-due-today {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
}
.summary-container .btn-checkout {
  margin: 4px 20px 16px;
  width: calc(100% - 40px);
}
.btn-continue-shopping {
  color: var(--text-lifted);
  font-weight: 600;
}

/* Cart line-item table */
#order-standard_cart .cart-body table,
.table.cart-items {
  background: var(--bg);
}
#order-standard_cart .cart-body table thead th,
.table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-lifted);
  background: var(--bg-lifted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.table td,
.table th {
  border-color: var(--border-muted);
}

/* Promo-code panel + "Your Shopping Cart is Empty" state */
.cart-body .tab-content,
.cart-body .panel-body {
  border-radius: 6px;
}

/* ============================================================
   24. Client area — dashboard, invoices, services. Same surface
   and type rules as the store; only the status badges need
   their own mapping, since this is the one place the brand's
   semantic green legitimately belongs (Active / Paid), with
   navy-muted for neutral states and amber reserved for
   genuinely pending ones.
   ============================================================ */
.client-home-panels .panel,
.card-sidebar,
.client-home-cards .card {
  border-radius: 6px !important;
}
.badge,
.label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 10px;
}
.badge-success,
.label-success,
.status-active,
.status-paid {
  background-color: rgba(3, 143, 48, 0.1) !important;
  color: var(--brand-green-ink) !important;
  border: 1px solid rgba(3, 143, 48, 0.35);
}
.badge-secondary,
.label-default,
.status-cancelled,
.status-expired {
  background-color: var(--bg-lifted) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
}
.badge-primary {
  background-color: rgba(0, 78, 254, 0.1) !important;
  color: var(--brand-blue) !important;
  border: 1px solid rgba(0, 78, 254, 0.3);
}

/* ============================================================
   25. Footer — brings across the two pieces of the marketing
   footer that were missing here: the commitment band (the
   loudest brand asset the company has) and the wordmark /
   payment / origin meta row. Markup added in footer.tpl.
   ============================================================ */
.cloudtrade-footer-commitment {
  border-bottom: 1px solid rgba(247, 249, 252, 0.14);
  padding: 56px 0 48px;
  margin-bottom: 32px;
}
.cloudtrade-footer-commitment__link {
  display: block;
  text-decoration: none;
}
.cloudtrade-footer-commitment__line {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #3FCB63;
}
.cloudtrade-footer-commitment__phone {
  color: var(--text-inverted);
}
.cloudtrade-footer-commitment__link:hover .cloudtrade-footer-commitment__phone {
  text-decoration: underline;
  text-underline-offset: 8px;
}
.cloudtrade-footer-commitment__sub {
  margin: 18px 0 0;
  color: rgba(247, 249, 252, 0.6);
  font-size: 16px;
}

/* Wordmark lockup — the marketing footer's text mark (blue
   square + lowercase name + green .ke), not the header PNG. */
.cloudtrade-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--text-inverted);
  text-transform: lowercase;
  margin-bottom: 14px;
}
.cloudtrade-wordmark__mark {
  width: 10px;
  height: 10px;
  background: var(--brand-blue);
}
.cloudtrade-wordmark__tld {
  color: #3FCB63;
}

.cloudtrade-payment-badges {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cloudtrade-payment-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(247, 249, 252, 0.75);
  border: 1px solid rgba(247, 249, 252, 0.25);
  border-radius: 4px;
  padding: 5px 10px;
}

.cloudtrade-footer-meta {
  border-top: 1px solid rgba(247, 249, 252, 0.14);
  padding: 18px 0;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(247, 249, 252, 0.58);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cloudtrade-footer-meta__sep {
  opacity: 0.5;
}
.footer .copyright {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(247, 249, 252, 0.58);
}

/* ============================================================
   26. TLD pricing table header — PRE-EXISTING BUG, not caused by
   this pass: the four column labels (Domain / New Price /
   Transfer / Renewal) are invisible on the live site. The band
   itself is navy with near-white text (section 16), but every
   cell div inside it is painted white by the order form's own
   stylesheet, so near-white text lands on white. Cells are
   forced transparent so the band's own colour shows through, and
   the labels take the same mono/uppercase treatment as the other
   table heads in this theme.
   ============================================================ */
.cloudtrade-tld-table .tld-pricing-header,
.cloudtrade-tld-table .tld-pricing-header div {
  background: transparent !important;
  color: var(--text-inverted);
  border: 0 !important;
}
.cloudtrade-tld-table .tld-pricing-header {
  background: var(--brand-navy) !important;
}
.cloudtrade-tld-table .tld-pricing-header div {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   27. Header — logo scale and row rhythm were set in section 15;
   this brings the nav links themselves onto the marketing site's
   treatment (600 weight, muted until hover, 2px blue underline
   on the active item) instead of Nexus's plain dark links.
   ============================================================ */
header.header .main-navbar-wrapper .nav-link {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-lifted);
  border-bottom: 2px solid transparent;
  padding-bottom: 6px;
}
header.header .main-navbar-wrapper .nav-link:hover,
header.header .main-navbar-wrapper .nav-item.active > .nav-link {
  color: var(--text);
  border-bottom-color: var(--brand-blue);
}

/* ============================================================
   28. Storefront redesign 2026-08-12 — design tokens (spacing,
   radius, typography scale). Section 1 already defines color
   tokens; this adds the rest so the redesign has one place to
   tune from instead of scattered magic numbers.
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 21, 55, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 21, 55, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 21, 55, 0.12);

  --container-max: 1400px;
}

/* ============================================================
   29. Kill the redundant Categories/Actions/Choose Currency
   sidebar on the domain search & order-form pages. It duplicates
   the top nav (Domains/Hosting/Infrastructure/Email/SSL) and the
   header cart icon, and it was the single biggest structural
   complaint in the redesign brief. Two separate sidebar mechanisms
   render this content on this install:
     1. WHMCS's generic $primarySidebar (rendered from header.tpl,
        already suppressed server-side for cart/domainchecker/
        homepage templates -- see header.tpl's cloudtradeHideSidebar
        assign).
     2. templates/orderforms/standard_cart's OWN .cart-sidebar,
        which is off-limits to edit directly (see section 3 above)
        -- hidden here via cascade only, exactly like every other
        standard_cart override in this file. Its existing >1199px
        breakpoint behavior (hide sidebar, .cart-body to 100%) is
        simply extended to all widths instead of just narrow ones.
   The mobile-only secondary "Categories" <select> dropdown inside
   .sidebar-collapsed is untouched -- that's the real mobile nav
   fallback, not the desktop duplicate-nav problem.
   ============================================================ */
#order-standard_cart .cart-sidebar {
  display: none !important;
}
#order-standard_cart .cart-body {
  width: 100% !important;
}
/* Deliberately NOT setting float:none here -- real regression found and
   fixed 2026-08-12: forcing float:none broke a JS height calculation on
   the checkout step specifically (cart.php?a=checkout), collapsing the
   Account Security + Payment Details sections to zero height even though
   they were still in the DOM and functional underneath. Confirmed via
   isolated before/after testing (custom.css toggled client-side, not on
   the live site) that width:100% alone reproduces the full visual fix
   (sidebar gone, content full-width) without the collapse animation bug.
   .cart-body already floats right by default in the off-limits
   standard_cart stylesheet; leave that alone. */
/* Same redundant Categories/Actions/Choose Currency content has a second,
   mobile-only rendering (3 stacked <select> dropdown panels) that pushes
   the actual "Search for a domain" heading/box below the fold on phones.
   Currency switching remains reachable via the footer's existing language/
   currency badge+modal on every page, so nothing is lost by hiding this. */
#order-standard_cart .sidebar-collapsed {
  display: none !important;
}

/* ============================================================
   30. Horizontal-overflow at 360/430px -- REVERTED 2026-08-12.
   `html, body { overflow-x: hidden; }` did fix the ~10px nested
   Bootstrap .row bleed at narrow widths, but broke something far
   more serious: it silently corrupted a WHMCS checkout.tpl height/
   position calculation (likely tied to a sticky/fixed-position
   element elsewhere on the page), causing the entire Account
   Security + Payment Details + Complete Order section to render
   with a correct DOM (Playwright's isVisible() returned true,
   getBoundingClientRect() returned real-looking coordinates) but
   paint as a blank gap -- a genuinely dangerous class of bug since
   it looks fine to automated DOM checks and is only catchable by
   actually looking at a screenshot or the real page. Root-caused
   via bisection (isolating custom.css sections) plus a direct
   before/after A-B test of this one rule against the live
   checkout page. Confirmed removing it alone restores Payment
   Details/Complete Order to fully working. A ~10px cosmetic
   horizontal bleed at 360-430px is the acceptable tradeoff --
   FUNCTIONALITY beats VISUAL DECORATION per the redesign brief's
   own stated priority order. Do not reintroduce overflow-x:hidden
   on html/body without testing the full checkout flow at every
   step (cart -> checkout -> payment) afterward, not just the
   domain-search/cart pages.
   ============================================================ */

/* ============================================================
   31. Inline hosting picker on cart.php?a=confdomains, 2026-08-12.
   Replaces the stock "[No Hosting! Click to Add]" link (which was
   hardcoded to a dead-end cart.php href, landing on Infrastructure
   instead of Hosting) with real, live-priced Add buttons for this
   domain. JS builds the DOM in footer.tpl; this only styles it.
   ============================================================ */
.cloudtrade-hosting-picker {
  margin-top: 6px;
}
.cloudtrade-hosting-picker__label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cloudtrade-hosting-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cloudtrade-hosting-picker__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.cloudtrade-hosting-picker__btn span {
  font-weight: 600;
  font-size: 12px;
  color: var(--brand-blue);
}
.cloudtrade-hosting-picker__btn:hover {
  border-color: var(--brand-blue);
  background: var(--bg-muted);
  text-decoration: none;
}