@charset "UTF-8";
/* =============================================================================
   giddyhost-2026.css - GiddyHost client-area re-skin
   -----------------------------------------------------------------------------
   Re-styles the WHMCS client area (child theme of "Twenty-One", Bootstrap 4) so
   it matches the GiddyHost Next.js marketing site.

   LOAD ORDER  1. Bootstrap 4 (Twenty-One parent)
               2. templates/<theme>/assets/css/custom.css  (~14k lines, legacy)
               3. THIS FILE                                 <-- must load last

   SOURCE OF TRUTH  giddyhost-next/src/app/globals.css
                    giddyhost-next/src/components/{Header,Footer,ui}.tsx
                    giddyhost-next/src/data/site.ts

   COLOURS REPLACED (old custom.css value -> new token)
     #35b5e9 #22bcf4 #25b9e8          -> var(--gh-action)       #0b89dc
     #159ef0 #0b74d1 #2478ff          -> var(--gh-action-dark)  #0670bd
     #eefcff #eefdff #dff7ff          -> var(--gh-sky-25/50)    #eef6ff / #e4f0ff
     #102a43 #071529 #0d2340          -> var(--gh-ink-900)      #041124
     #64788f #40566e #6f8194          -> var(--gh-muted)        #5b6b82
     #d9ebf7 #e6eef6 #d9ebff          -> var(--gh-line)         #d8e6f5

   TYPE SCALE (compressed)
     globals.css overrides Tailwind's type tokens site-wide, so every size here
     is quantised to that ramp. px equivalents:
       --text-xs   11  | --text-sm   13  | --text-base 15 | --text-lg   17
       --text-xl   19  | --text-2xl  22  | --text-3xl  27 | --text-4xl  32
       --text-5xl  42  | --text-6xl  52  | --text-7xl  62
     globals.css also sets --spacing: 0.235rem (Tailwind's default is 0.25rem),
     so every h-, p- and gap- utility is 94% of its usual value. That is why the
     pixel heights below look "off": h-10 = 37.6px, h-11 = 41.4px, h-16 = 60px,
     size-9 = 33.8px, size-11 = 41.4px. Paddings here are trimmed to match.

   !important POLICY
     custom.css contains ~5,500 `!important` declarations, so source order alone
     cannot win against them. `!important` is therefore used ONLY inside blocks
     tagged `[forced]`, i.e. where custom.css (or a Bootstrap utility) already
     flags that exact property as important. Everything else is plain.

   RESPONSIVE  No fixed widths anywhere - only max-width - and a final safety
               section clips accidental sideways scroll on phones.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");


/* === Design tokens ========================================================
   Hex values copied verbatim from the @theme block in src/app/globals.css. */
:root {
  /* Brand ramp */
  --gh-brand-50: #eefaff;  --gh-brand-100: #d7effc; --gh-brand-200: #b3e4fb;
  --gh-brand-300: #7dd3fa; --gh-brand-400: #3fc2f8; --gh-brand-500: #17b9f7;
  --gh-brand-600: #0495d4; --gh-brand-700: #0577ab; --gh-brand-800: #0a638c;
  --gh-brand-900: #0e5274;

  /* Ink - body text and dark surfaces */
  --gh-ink-950: #020a16; --gh-ink-900: #041124; --gh-ink-800: #0b1d36;
  --gh-ink-700: #16294a; --gh-ink-600: #2a3f63;

  /* Light "sky" surfaces */
  --gh-sky-25: #eef6ff; --gh-sky-50: #e4f0ff; --gh-sky-100: #d3e8fd; --gh-sky-150: #bcdcfb;

  /* Deep blue statement bands (top bar + footer) */
  --gh-deep-950: #031630; --gh-deep-900: #062449; --gh-deep-800: #0a3569; --gh-deep-700: #0d4c93;

  /* Action blue - every link and every primary button */
  --gh-action: #0b89dc;
  --gh-action-dark: #0670bd;

  /* The pale blue used for icons and hover text on the deep bands */
  --gh-on-deep: #7fd6fb;

  /* Hairlines, secondary text, error */
  --gh-line: #d8e6f5;
  --gh-muted: #5b6b82;
  --gh-danger: #fd3014;

  /* Elevation */
  --gh-shadow-card: 0 1px 2px rgb(15 50 90 / 0.04), 0 8px 24px -6px rgb(15 60 110 / 0.08);
  --gh-shadow-card-hover: 0 2px 4px rgb(15 50 90 / 0.05), 0 22px 44px -12px rgb(11 110 200 / 0.22);
  --gh-shadow-float: 0 18px 40px -12px rgb(11 110 200 / 0.28);

  /* Type ramp, mirroring the @theme block in globals.css */
  --gh-text-xs: 0.6875rem;   /* 11px */
  --gh-text-sm: 0.8125rem;   /* 13px */
  --gh-text-base: 0.9375rem; /* 15px */
  --gh-text-lg: 1.0625rem;   /* 17px */
  --gh-text-xl: 1.1875rem;   /* 19px */
  --gh-text-2xl: 1.375rem;   /* 22px */
  --gh-text-3xl: 1.6875rem;  /* 27px */

  /* Derived helpers used throughout this file */
  --gh-radius-card: 16px;
  --gh-radius-field: 12px;

  /* Names the client-area sheet reaches for. They were written as
     var(--gh-radius, 16px) fallbacks, which work but keep the value in two
     files; defined here so a radius or the success green changes in one place.
     --gh-success matches giddyhost-cart.css exactly, so the green a customer
     sees on "domain available" is the green they see on a paid invoice. */
  --gh-radius: 16px;
  --gh-radius-lg: 24px;
  --gh-radius-pill: 999px;
  --gh-success: #22b07d;
  --gh-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* .btn-primary gradient + hover shadow, lifted out of globals.css */
  --gh-btn-grad: linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%);
  --gh-btn-grad-hover: linear-gradient(180deg, #13a5ee 0%, #0a7fcf 55%, #066bb3 100%);
  --gh-btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 8px 20px -6px rgb(11 137 220 / 0.55);
  --gh-btn-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 12px 26px -6px rgb(11 137 220 / 0.6);

  /* Surfaces from globals.css .bg-tint and .bg-deep */
  --gh-tint: radial-gradient(40rem 22rem at 100% 0%, rgb(23 185 247 / 0.12), transparent 60%),
             linear-gradient(180deg, #e8f3ff 0%, #f1f7ff 100%);
  --gh-deep: radial-gradient(50rem 26rem at 90% 0%, rgb(23 185 247 / 0.35), transparent 60%),
             radial-gradient(40rem 26rem at 0% 100%, rgb(11 137 220 / 0.3), transparent 60%),
             linear-gradient(150deg, #062449 0%, #0a3569 55%, #0d4c93 100%);
}


/* === Base typography & page surface ====================================== */
body {
  font-family: var(--gh-font);
  font-size: var(--gh-text-base);      /* 15px = --text-base */
  line-height: 1.6;
  color: var(--gh-ink-900);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* [forced] custom.css: `.primary-bg-color { background-color: #eefcff !important }` */
body.primary-bg-color {
  background-color: #f1f7ff !important;
  background-image: var(--gh-tint);
  background-attachment: fixed;
}
/* [forced] custom.css uses this exact :has() selector with `background: ... !important`
   on the dashboard. Same specificity + later source order = this one wins. */
body:has(.tiles):has(.client-home-cards) { background: #f1f7ff var(--gh-tint) fixed !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--gh-font);
  color: var(--gh-ink-900);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
/* One step down the compressed ramp each: 2xl->3xl, xl->2xl, lg->xl, then
   flat lg / base / sm. The old file topped out at 34px, which read oversized
   against the new scale. */
h1, .h1 { font-size: clamp(1.375rem, 1.06rem + 1.05vw, 1.6875rem); }   /* 22 -> 27 */
h2, .h2 { font-size: clamp(1.1875rem, 1.02rem + 0.62vw, 1.375rem); }   /* 19 -> 22 */
h3, .h3 { font-size: clamp(1.0625rem, 0.97rem + 0.4vw, 1.1875rem); }   /* 17 -> 19 */
h4, .h4 { font-size: var(--gh-text-lg); }                              /* 17 */
h5, .h5 { font-size: var(--gh-text-base); }                            /* 15 */
h6, .h6 { font-size: var(--gh-text-sm); }                              /* 13 */

/* Twenty-One's section headings: "Your Active Products", "Recent News", ... */
.header-lined, .page-header { border-bottom: 1px solid var(--gh-line); padding-bottom: 0.6rem; margin-bottom: 1.25rem; }
small, .small, .text-muted { color: var(--gh-muted); }
small, .small { font-size: var(--gh-text-sm); }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gh-line) 12%, var(--gh-line) 88%, transparent); }


/* === Links =============================================================== */
a { color: var(--gh-action-dark); transition: color 0.18s ease; }
a:hover, a:focus { color: var(--gh-action); }
a:focus-visible { outline: 2px solid var(--gh-action); outline-offset: 2px; border-radius: 4px; }


/* === Page shell: containers & main body ==================================
   The marketing site caps content at 1200px (Container in components/ui.tsx). */
.top-bar .container,
.main-header .container,
.main-header > .container,
.master-breadcrumb .container,
#main-body > .container,
.site-footer .container,
.gh-footer-contact-strip .container { max-width: 1200px; }

#main-body { padding-top: 1.6rem; padding-bottom: 2.8rem; }
/* min-width:0 stops a wide table inside a flex/grid column widening the page. */
.primary-content { min-width: 0; }


/* =============================================================================
   HEADER
   ========================================================================== */

/* === Top bar =============================================================
   <TopBar> in components/Header.tsx: deep-blue gradient band, h-10 (37.6px),
   12px white/80 text, and `hidden lg:block` - hence the display:none below. */
.top-bar {
  background: linear-gradient(90deg, var(--gh-deep-900), var(--gh-deep-800) 55%, var(--gh-deep-700));
  color: rgb(255 255 255 / 0.8);
  height: auto;
  font-size: 12px;
  font-weight: 500;
}
.top-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px; height: auto; flex-wrap: wrap; gap: 4px 20px;
}
.top-bar a, .top-bar div, .top-right a { color: rgb(255 255 255 / 0.8); font-weight: 500; }
.top-bar a:hover, .top-right a:hover { color: #fff; }
.top-bar i { color: var(--gh-on-deep); font-size: 13px; margin-right: 0; }
.top-left, .top-right { display: flex; align-items: center; gap: 22px; }

.gh-top-claim { display: flex; align-items: center; gap: 7px; }
/* The thin vertical rule between the two promises. */
.gh-top-rule { display: inline-block; width: 1px; height: 13px; background: rgb(255 255 255 / 0.2); margin: 0 5px; }

.top_bar_so { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.top_bar_so a { display: inline-flex; align-items: center; gap: 6px; }

/* "Live Chat" is a pill, not a plain link (bg-white/10 + ring-white/15). */
.gh-live-chat, .top-bar .gh-live-chat {
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
  padding: 4px 12px;
  color: #fff;
  font-weight: 600;
}
.gh-live-chat:hover, .top-bar .gh-live-chat:hover { background: rgb(255 255 255 / 0.2); color: #fff; }

/* Kept for any page that still renders the old light dropdowns in the band. */
.top_bar_so li.dropdown ul,
.nav-menu .dropdown-menu {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: 14px;
  box-shadow: var(--gh-shadow-float);
  padding: 6px;
}
.top_bar_so li.dropdown ul li a,
.nav-menu .dropdown-menu a { border-radius: 9px; font-size: var(--gh-text-sm); font-weight: 600; border-bottom: 0; }
.top_bar_so li.dropdown ul li a:hover,
.nav-menu .dropdown-menu a:hover { background: var(--gh-sky-25); }
/* [forced] custom.css sets `.nav-menu .dropdown-menu a { color: #222 !important }`
   and `#24aef2 !important` on hover. */
.nav-menu .dropdown-menu a { color: var(--gh-ink-800) !important; }
.nav-menu .dropdown-menu a:hover { color: var(--gh-action) !important; }
.top_bar_so li.dropdown ul li a { color: var(--gh-ink-800); }
.top_bar_so li.dropdown ul li a:hover { color: var(--gh-action); }


/* === Main header =========================================================
   Sticky white bar, hairline + soft shadow, h-16 / lg:h-[76px]. */
.main-header {
  position: sticky; top: 0; z-index: 1030;
  height: auto;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gh-line);
  box-shadow: 0 8px 30px -12px rgb(15 60 110 / 0.18);
}
.main-header .container, .main-header > .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; height: auto; gap: 1.25rem;
}
.brand-area { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Sized by height, not width, so logo and flag share a baseline like the
   React header (Logo h-9 / lg:h-12, flag h-9 / lg:h-11). */
.logo img { width: auto; height: 45px; max-width: none; display: block; }
.flag { display: inline-flex; align-items: center; }
/* The flag is a <canvas> now, and it sets its own width and height in
   script - a canvas sized in CSS is stretched rather than redrawn, so the
   height lives in header.tpl alongside the breakpoints it matches. */
.flag canvas { display: block; }

/* Top-level nav items: h-10 pills (37.6px), 14px semibold, ink -> action. */
.nav-menu, .client-main-nav > ul {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
/* custom.css pushes the nav hard right with margin-left:auto; the marketing
   header lets `justify-content: space-between` centre it instead. */
.client-main-nav { margin-left: 0; }
/* position:static lets the mega panel span the whole header, as it does on the
   marketing site, rather than being clipped to one nav item. */
.client-main-nav > ul > li, .nav-menu > li { position: static; }
.nav-menu > li > a,
.client-main-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 15px; border-radius: 999px;
  color: var(--gh-ink-800); font-size: 14px; font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav-menu > li > a:hover, .nav-menu > li > a.active, .nav-menu > li:hover > a,
.client-main-nav > ul > li > a:hover,
.client-main-nav > ul > li > a.active,
.client-main-nav > ul > li:hover > a { background: var(--gh-sky-25); }
/* [forced] custom.css paints these four states `color: #24aef2 !important`
   (the pre-2026 cyan), so the action blue has to be forced too. */
.nav-menu > li > a:hover, .nav-menu > li > a.active,
.client-main-nav > ul > li > a:hover,
.client-main-nav > ul > li > a.active { color: var(--gh-action) !important; }
.nav-menu > li:hover > a, .client-main-nav > ul > li:hover > a { color: var(--gh-action); }
.nav-menu > li > a i,
.client-main-nav > ul > li > a i {
  opacity: 0.6; font-size: 11px; color: inherit;
  transition: transform 0.2s ease;
}
.client-main-nav > ul > li:hover > a i, .nav-menu > li:hover > a i { transform: rotate(180deg); }

/* Simple dropdowns (WHMCS-driven menus that still use these classes). */
.client-dropdown-menu, .dropdown-box {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: 18px;
  box-shadow: var(--gh-shadow-float);
  padding: 8px;
}
.client-dropdown-menu a, .dropdown-box a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px; border-bottom: 0;
  color: var(--gh-ink-800); font-size: var(--gh-text-sm); font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.client-dropdown-menu a:hover, .dropdown-box a:hover { background: var(--gh-sky-25); color: var(--gh-action); }
.client-dropdown-menu a i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px;
  background: var(--gh-sky-100); color: var(--gh-action); font-size: 13px;
}


/* === Mega panel ==========================================================
   MegaPanel in Header.tsx: a full-width white sheet under the header, its
   contents capped at the same 1200px container as the rest of the page. */
.client-mega-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  width: auto; max-width: none; transform: none;
  background: #fff;
  border: 0; border-top: 1px solid var(--gh-line); border-radius: 0;
  box-shadow: 0 40px 60px -30px rgb(15 60 110 / 0.28);
  padding: 26px 0;
}
.client-mega-grid {
  display: grid;
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
  gap: 22px 38px;
}
.client-mega-grid.gh-mega-2 { grid-template-columns: 1fr 1fr 300px; }
.client-mega-grid.gh-mega-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.client-mega-menu h4 {
  font-size: var(--gh-text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gh-muted); margin: 0 0 6px;
  line-height: 1.4;
}
.client-mega-menu a {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 10px 11px; margin: 0 -11px; border-radius: 16px;
  color: var(--gh-ink-900); font-size: 14px; font-weight: 700;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.client-mega-menu a:hover { background: var(--gh-sky-25); color: var(--gh-action); }
/* Icon chip, same as MenuLink in Header.tsx (size-10 -> 37.6px, rounded-xl). */
.client-mega-menu a > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  background: var(--gh-sky-100); color: var(--gh-action); font-size: 15px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.client-mega-menu a:hover > i { background: var(--gh-action); color: #fff; }
.gh-menu-text { min-width: 0; padding-top: 1px; }
.gh-menu-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px;
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--gh-ink-900);
}
.client-mega-menu a:hover .gh-menu-label { color: var(--gh-action); }
.gh-menu-price {
  border-radius: 999px; background: var(--gh-sky-100);
  padding: 1px 8px; font-size: var(--gh-text-xs); font-weight: 700; color: var(--gh-action);
}
.gh-menu-desc {
  display: block; margin-top: 3px;
  font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--gh-muted);
}

/* Promo card in the Hosting / Domains panels. Specificity is raised to
   `.client-mega-menu .gh-mega-promo` so it beats `.client-mega-menu a` above. */
.client-mega-menu .gh-mega-promo {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0; padding: 22px; border-radius: 24px;
  background: linear-gradient(135deg, var(--gh-sky-25), var(--gh-sky-100));
  box-shadow: inset 0 0 0 1px var(--gh-sky-150);
  transition: box-shadow 0.2s ease;
}
.client-mega-menu .gh-mega-promo:hover { background: linear-gradient(135deg, var(--gh-sky-25), var(--gh-sky-100)); box-shadow: inset 0 0 0 1px var(--gh-action); }
.gh-promo-title { font-size: var(--gh-text-lg); font-weight: 800; line-height: 1.25; color: var(--gh-ink-900); }
.gh-promo-text { display: block; margin-top: 7px; max-width: 11rem; font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--gh-muted); }
.gh-promo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-size: var(--gh-text-sm); font-weight: 700; color: var(--gh-action); }
.gh-promo-cta i { font-size: 12px; transition: transform 0.2s ease; }
.client-mega-menu .gh-mega-promo:hover .gh-promo-cta i { transform: translateX(3px); }


/* === Header actions: cart / Login / Get Started / hamburger ===============
   Same order and geometry as the right-hand cluster in Header.tsx. */
.gh-header-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.gh-cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--gh-sky-50); color: var(--gh-ink-900);
  box-shadow: inset 0 0 0 1px var(--gh-sky-150);
  font-size: 15px;
  transition: color 0.18s ease, box-shadow 0.18s ease;
}
.gh-cart-btn:hover { color: var(--gh-action); box-shadow: inset 0 0 0 1px var(--gh-action); }

.gh-login-btn {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 19px; border-radius: 999px;
  color: var(--gh-ink-900); font-size: var(--gh-text-sm); font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--gh-line);
  transition: color 0.18s ease, box-shadow 0.18s ease;
}
.gh-login-btn:hover { color: var(--gh-action); box-shadow: inset 0 0 0 1px var(--gh-action); }

/* The gradient CTA, including the periodic sheen (.btn-shine in globals.css). */
.gh-cta-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 19px; border-radius: 999px;
  background-image: var(--gh-btn-grad);
  color: #fff; font-size: var(--gh-text-sm); font-weight: 600; white-space: nowrap;
  box-shadow: var(--gh-btn-shadow);
  transition: background-image 0.2s ease, box-shadow 0.2s ease;
}
.gh-cta-btn:hover { background-image: var(--gh-btn-grad-hover); color: #fff; box-shadow: var(--gh-btn-shadow-hover); }
.gh-cta-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: gh-btn-shine 4.5s ease-in-out 1.5s infinite;
}
@keyframes gh-btn-shine {
  0%, 70% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Hamburger: size-10 sky circle, desktop-hidden. */
.mobile-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--gh-sky-50); color: var(--gh-ink-900);
  box-shadow: inset 0 0 0 1px var(--gh-sky-150);
  font-size: 16px; cursor: pointer;
}


/* === Account menu (logged-in avatar dropdown) ============================
   [forced] custom.css declares every .client-account-* property !important. */
.gh-header-actions .user-icon,
.client-account-dropdown .user-icon {
  width: 38px !important; height: 38px !important;
  border-radius: 999px !important;
  background: var(--gh-sky-50) !important;
  color: var(--gh-action-dark) !important;
  box-shadow: inset 0 0 0 1px var(--gh-sky-150) !important;
  font-size: 15px !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}
.gh-header-actions .user-icon:hover,
.client-account-dropdown .user-icon:hover {
  background: var(--gh-action) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px var(--gh-action) !important;
  transform: none !important;
}
.client-account-menu {
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: var(--gh-shadow-float) !important;
  padding: 8px !important;
  width: 310px !important;
  max-width: min(310px, calc(100vw - 32px)) !important;
}
.client-account-header {
  padding: 13px 12px !important; margin-bottom: 4px !important;
  border-radius: 16px !important; background: var(--gh-sky-25) !important;
}
.client-account-header strong { color: var(--gh-ink-900) !important; font-size: var(--gh-text-sm) !important; font-weight: 800 !important; }
.client-account-header span { color: var(--gh-muted) !important; font-size: var(--gh-text-xs) !important; }
.client-account-avatar {
  width: 38px !important; height: 38px !important;
  background: var(--gh-btn-grad) !important; color: #fff !important;
}
.client-account-menu a {
  padding: 8px 12px !important; border-radius: 11px !important;
  color: var(--gh-ink-800) !important; font-size: var(--gh-text-sm) !important; font-weight: 600 !important;
}
.client-account-menu a:hover { background: var(--gh-sky-25) !important; color: var(--gh-action) !important; }
.client-account-menu a i { width: 18px !important; color: var(--gh-action) !important; font-size: 13px !important; }
.client-account-divider { height: 1px; margin: 6px 10px; background: var(--gh-line); }
.client-account-menu a.client-account-logout,
.client-account-menu a.client-account-logout i { color: var(--gh-danger) !important; }
.client-account-menu a.client-account-logout:hover { background: rgb(253 48 20 / 0.08) !important; color: var(--gh-danger) !important; }


/* === Breadcrumbs ========================================================= */
.master-breadcrumb, .master-breadcrumb .breadcrumb { background-color: transparent; }
.master-breadcrumb {
  border-bottom: 1px solid var(--gh-line);
  background: linear-gradient(180deg, var(--gh-sky-25), rgb(255 255 255 / 0));
}
.master-breadcrumb .breadcrumb { padding: 0.8rem 0; margin: 0; font-size: 12px; font-weight: 600; flex-wrap: wrap; }
.master-breadcrumb .breadcrumb-item { color: var(--gh-muted); }
.master-breadcrumb .breadcrumb-item a { color: var(--gh-action-dark); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--gh-action); }
.master-breadcrumb .breadcrumb-item.active { color: var(--gh-ink-900); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: #9db4cd; padding-right: 0.5rem; }

/* The bespoke welcome bar custom.css injects above the dashboard tiles. */
.gh-client-topbar-inner {
  background: linear-gradient(135deg, var(--gh-sky-50) 0%, var(--gh-sky-25) 100%);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-card);
  box-shadow: var(--gh-shadow-card);
  flex-wrap: wrap;
}
.gh-client-breadcrumb { color: var(--gh-muted); font-size: 12px; }
.gh-client-breadcrumb .sep { color: #9db4cd; }
.gh-client-welcome-box { background: #fff; border: 1px solid var(--gh-line); box-shadow: var(--gh-shadow-card); max-width: 100%; }
.gh-client-welcome-label { color: var(--gh-muted); font-size: var(--gh-text-xs); }
.gh-client-welcome-name { color: var(--gh-ink-900); font-weight: 800; }
/* [forced] custom.css declares these two link colours with !important. */
.gh-client-breadcrumb a { color: var(--gh-action-dark) !important; }
.gh-client-breadcrumb a:hover { color: var(--gh-action) !important; }


/* =============================================================================
   CONTENT
   ========================================================================== */

/* === Buttons =============================================================
   Button in components/ui.tsx: pill, weight 600, and on the compressed scale
   h-11 = 41.4px with 13px text (size "md"), h-9 = 33.8px / 12px ("sm"),
   h-13 = 48.9px / 14px ("lg"). Padding here reproduces those heights. */
.btn {
  font-family: var(--gh-font);
  font-size: var(--gh-text-sm); font-weight: 600; line-height: 1.2;
  border-radius: 999px; border-width: 1px;
  padding: 0.78rem 1.45rem; white-space: nowrap;
  transition: background-color 0.2s ease, background-image 0.2s ease,
              box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgb(11 137 220 / 0.25); }
.btn:focus-visible { outline: 2px solid var(--gh-action); outline-offset: 2px; }
.btn-lg { padding: 1rem 1.7rem; font-size: 14px; }
.btn-sm { padding: 0.6rem 1rem; font-size: 12px; }
.btn-block { white-space: normal; }
/* Square inner edges keep a pill button group legible. */
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* -- Primary: the gradient pill from globals.css .btn-primary ------------- */
.btn-primary, .btn-info, .btn-success, .btn-main, .modal-submit {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--gh-action);
  background-image: var(--gh-btn-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--gh-btn-shadow);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-main:hover, .btn-main:focus,
.modal-submit:hover, .modal-submit:focus {
  background-color: var(--gh-action-dark);
  background-image: var(--gh-btn-grad-hover);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--gh-btn-shadow-hover);
}
/* The diagonal sheen that sweeps across the site's CTA on hover. */
.btn-primary::after, .btn-main::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.btn-primary:hover::after, .btn-main:hover::after { transform: translateX(120%); }
.btn-primary:disabled, .btn-primary.disabled, .btn-success:disabled, .btn-info:disabled {
  background-image: none; background-color: #9cc7e8; box-shadow: none; opacity: 1;
}
.btn-main { border-radius: 999px; padding: 14px 32px; font-size: 14px; font-weight: 700; min-width: 0; max-width: 100%; }

/* -- Default / secondary: white pill with a hairline ring ----------------- */
.btn-default, .btn-secondary, .btn-outline-primary, .btn-light {
  background: #fff; background-image: none;
  border-color: var(--gh-line); color: var(--gh-ink-900); box-shadow: none;
}
.btn-default:hover, .btn-default:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-light:hover, .btn-light:focus { background: var(--gh-sky-25); border-color: var(--gh-action); color: var(--gh-action-dark); }

/* -- Semantic buttons: still meaningful, same pill geometry --------------- */
.btn-danger { background-image: none; background-color: var(--gh-danger); border-color: var(--gh-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #d92710; border-color: #d92710; color: #fff; }
.btn-warning { background-image: none; background-color: #f5a400; border-color: #f5a400; color: var(--gh-ink-900); }
.btn-warning:hover, .btn-warning:focus { background-color: #dd9400; border-color: #dd9400; }
.btn-link { color: var(--gh-action-dark); font-weight: 600; box-shadow: none; }
.btn-link:hover { color: var(--gh-action); text-decoration: none; }

/* WHMCS's floating "return to admin area" chip (footer.tpl). */
.btn-return-to-admin {
  border-radius: 999px; background: var(--gh-ink-900);
  border-color: var(--gh-ink-900); color: #fff; box-shadow: var(--gh-shadow-float);
}
.btn-return-to-admin:hover { background: var(--gh-ink-700); color: #fff; }


/* === Cards, panels & wells ===============================================
   One surface treatment everywhere: white, 16px radius, 1px var(--gh-line),
   var(--gh-shadow-card). No heavy borders, no solid coloured header bars. */
.card, .panel, .well {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-card);
  box-shadow: var(--gh-shadow-card);
}
.card, .panel { margin-bottom: 1.4rem; }
.well { padding: 1.15rem 1.25rem; margin-bottom: 1.4rem; }

/* Header: white with a hairline, replacing the old solid #22bcf4 band. */
.card-header, .panel-heading {
  background: #fff;
  border-bottom: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-card) var(--gh-radius-card) 0 0;
  padding: 0.95rem 1.25rem;
  color: var(--gh-ink-900);
  font-weight: 800;
}
.card-header h3, .card-header .card-title, .panel-heading h3, .panel-title {
  color: var(--gh-ink-900); font-size: var(--gh-text-base); font-weight: 800; margin: 0; letter-spacing: -0.015em;
}
.card-body, .panel-body { padding: 1.25rem; color: var(--gh-ink-700); font-size: var(--gh-text-sm); }
.card-footer {
  background: var(--gh-sky-25);
  border-top: 1px solid var(--gh-line);
  border-radius: 0 0 var(--gh-radius-card) var(--gh-radius-card);
  padding: 0.8rem 1.25rem;
  color: var(--gh-muted);
  font-size: 12px;
}
.card .card-body .card-title { color: var(--gh-ink-900); font-size: var(--gh-text-base); font-weight: 800; letter-spacing: -0.015em; }

/* Knowledge base + announcement cards share the same surface and lift. */
.kb-category, .kb-article-item, .announcements .announcement {
  border-radius: var(--gh-radius-card);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.kb-category:hover, .announcements .announcement:hover {
  border-color: var(--gh-sky-150); box-shadow: var(--gh-shadow-card-hover); transform: translateY(-2px);
}
.announcements .announcement h1 a, .announcements .announcement article a { color: var(--gh-ink-900); }
.announcements .announcement h1 a:hover, .announcements .announcement article a:hover { color: var(--gh-action); }


/* === Client area home: service status tiles ==============================
   Markup: .tiles .row > .col-6 > .tile > (i, .stat, .title, .highlight)
   [forced] every tile declaration in custom.css carries !important. */
.tiles .tile {
  background: #fff !important;
  border: 1px solid var(--gh-line) !important;
  border-radius: var(--gh-radius-card) !important;
  box-shadow: var(--gh-shadow-card) !important;
  min-height: 118px !important;
  padding: 20px 18px 16px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.tiles .tile:hover {
  transform: translateY(-3px) !important;
  border-color: var(--gh-sky-150) !important;
  box-shadow: var(--gh-shadow-card-hover) !important;
}
.tiles .tile i { color: rgb(11 137 220 / 0.12) !important; font-size: 38px !important; }
.tiles .tile:hover i { color: rgb(11 137 220 / 0.22) !important; }
/* 27px = --text-3xl, one step down from the 32px this used to be. */
.tiles .tile .stat {
  color: var(--gh-ink-900) !important; font-size: 1.6875rem !important;
  font-weight: 800 !important; letter-spacing: -0.03em !important;
}
.tiles .tile .title {
  color: var(--gh-muted) !important; font-size: 0.6875rem !important; font-weight: 700 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
}
/* The 4px strip at the bottom of each tile: one brand gradient, not four colours. */
.tiles .tile .highlight,
.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red,
.tiles .tile .highlight.bg-color-gold,
.tiles .col-6:nth-child(1) .tile .highlight,
.tiles .col-6:nth-child(2) .tile .highlight,
.tiles .col-6:nth-child(3) .tile .highlight,
.tiles .col-6:nth-child(4) .tile .highlight {
  height: 4px !important;
  background: linear-gradient(90deg, var(--gh-brand-500) 0%, var(--gh-action) 100%) !important;
}


/* === Client area home: panel cards =======================================
   [forced] custom.css styles every .client-home-cards rule with !important. */
.client-home-cards .card {
  background: #fff !important;
  border: 1px solid var(--gh-line) !important;
  border-radius: var(--gh-radius-card) !important;
  box-shadow: var(--gh-shadow-card) !important;
  transition: box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.client-home-cards .card:hover { border-color: var(--gh-sky-150) !important; box-shadow: var(--gh-shadow-card-hover) !important; }
.client-home-cards .card-header,
.client-home-cards [menuitemname*="recommended"] .card-header {
  background: #fff !important; border-bottom: 1px solid var(--gh-line) !important; padding: 15px 18px !important;
}
/* custom.css paints a 3px gradient rule under each card header - keep it on brand. */
.client-home-cards .card-header::after,
.client-home-cards .card-accent-orange .card-header::after {
  background: linear-gradient(90deg, var(--gh-brand-500) 0%, var(--gh-action) 100%) !important;
}
.client-home-cards .card-title {
  color: var(--gh-ink-900) !important; font-size: 0.9375rem !important;
  font-weight: 800 !important; letter-spacing: -0.015em !important;
}
.client-home-cards .card-title i { color: var(--gh-action) !important; }
.client-home-cards .card-title .badge,
.client-home-cards .list-group-item .badge {
  background: var(--gh-sky-100) !important; color: var(--gh-action-dark) !important;
  border-radius: 999px !important; font-weight: 700 !important; font-size: 0.6875rem !important;
}
.client-home-cards .card-body,
.client-home-cards .card-body p,
.client-home-cards [menuitemname*="recommended"] .card-body {
  background: #fff !important; color: var(--gh-ink-700) !important; font-size: 0.8125rem !important;
}
.client-home-cards .card-footer {
  background: var(--gh-sky-25) !important; border-top: 1px solid var(--gh-line) !important; color: var(--gh-muted) !important;
}
.client-home-cards .list-group-item {
  background: #fff !important; border-color: var(--gh-line) !important;
  color: var(--gh-ink-800) !important; font-weight: 600 !important; font-size: 0.8125rem !important;
}
.client-home-cards .list-group-item:hover { background: var(--gh-sky-25) !important; color: var(--gh-action-dark) !important; }
.client-home-cards .list-group-item.active {
  background: var(--gh-sky-50) !important; border-color: var(--gh-line) !important; color: var(--gh-action-dark) !important;
}
.client-home-cards .list-group-item i,
.client-home-cards .list-group-item.active i { color: var(--gh-action) !important; }

/* Buttons inside the dashboard cards inherit the pill + gradient. */
.client-home-cards .card-header .btn,
.client-home-cards .card-title .btn,
.client-home-cards .card-body .btn-primary,
.client-home-cards .card-footer .btn-primary,
.client-home-cards .card-body .btn-success,
.client-home-cards .card-footer .btn-success {
  background: var(--gh-btn-grad) !important;
  border: 0 !important; border-radius: 999px !important;
  color: #fff !important; font-weight: 600 !important; font-size: 0.8125rem !important;
  box-shadow: var(--gh-btn-shadow) !important;
}
.client-home-cards .card-header .btn:hover,
.client-home-cards .card-title .btn:hover,
.client-home-cards .card-body .btn-primary:hover,
.client-home-cards .card-footer .btn-primary:hover,
.client-home-cards .card-body .btn-success:hover,
.client-home-cards .card-footer .btn-success:hover {
  background: var(--gh-btn-grad-hover) !important; box-shadow: var(--gh-btn-shadow-hover) !important; color: #fff !important;
}
.client-home-cards .card-body .btn-default,
.client-home-cards .card-footer .btn-default,
.client-home-cards .card-body .btn-secondary,
.client-home-cards .card-footer .btn-secondary {
  background: #fff !important; border: 1px solid var(--gh-line) !important; color: var(--gh-ink-900) !important;
}
.client-home-cards .card-body .btn-default:hover,
.client-home-cards .card-footer .btn-default:hover,
.client-home-cards .card-body .btn-secondary:hover,
.client-home-cards .card-footer .btn-secondary:hover { background: var(--gh-sky-25) !important; color: var(--gh-action-dark) !important; }
/* The dashboard's inline domain search field. */
.client-home-cards .form-control {
  border: 1px solid var(--gh-line) !important; border-radius: var(--gh-radius-field) !important;
  background: #fff !important; color: var(--gh-ink-900) !important; font-size: 0.8125rem !important;
}


/* === Sidebar / client-area menus =========================================
   header.tpl renders `.sidebar` columns; custom.css also targets #sidebar,
   .sidebar-primary and .clientarea-sidebar.
   [forced] all four selector families are declared !important in custom.css. */
.sidebar .card, .sidebar .panel, #sidebar .card, #sidebar .panel,
.clientarea-sidebar .card, .sidebar-primary .card {
  background: #fff !important;
  border: 1px solid var(--gh-line) !important;
  border-radius: var(--gh-radius-card) !important;
  box-shadow: var(--gh-shadow-card) !important;
  margin-bottom: 1.15rem !important;
}
.sidebar .card-sidebar { border: 1px solid var(--gh-line); }

.sidebar .card-header, .sidebar .panel-heading,
#sidebar .card-header, #sidebar .panel-heading,
.clientarea-sidebar .card-header, .sidebar-primary .card-header {
  background: var(--gh-sky-25) !important;
  border-bottom: 1px solid var(--gh-line) !important;
  color: var(--gh-ink-900) !important;
  padding: 13px 17px !important;
}
.sidebar .card-title, .sidebar .card-header h3,
#sidebar .card-title, #sidebar .card-header h3,
.clientarea-sidebar .card-title, .sidebar-primary .card-title {
  color: var(--gh-ink-900) !important; font-size: 0.6875rem !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
}
.sidebar .card-body, #sidebar .card-body,
.clientarea-sidebar .card-body, .sidebar-primary .card-body {
  color: var(--gh-ink-700) !important; padding: 15px 17px !important; font-size: 0.8125rem !important;
}
.sidebar .card-body a, #sidebar .card-body a, .clientarea-sidebar .card-body a { color: var(--gh-action-dark) !important; }
.sidebar .card-body .text-success, #sidebar .card-body .text-success,
.clientarea-sidebar .card-body .text-success { color: #0f9d58 !important; }

/* Sidebar navigation links */
.sidebar .list-group-item, #sidebar .list-group-item, #sidebar .list-group a,
.clientarea-sidebar .list-group-item, .sidebar-primary .list-group-item {
  background: #fff !important; border-color: var(--gh-line) !important;
  color: var(--gh-ink-800) !important; font-size: 0.8125rem !important;
  font-weight: 600 !important; padding: 11px 17px !important;
}
.sidebar .list-group-item:hover, #sidebar .list-group-item:hover, #sidebar .list-group a:hover,
.clientarea-sidebar .list-group-item:hover, .sidebar-primary .list-group-item:hover {
  background: var(--gh-sky-25) !important; color: var(--gh-action) !important;
}
/* Active item: sky fill plus a 3px action rail on the leading edge. */
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus, #sidebar .list-group a.active {
  background: var(--gh-sky-50) !important; border-color: var(--gh-line) !important;
  color: var(--gh-action-dark) !important; font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--gh-action) !important;
}
.sidebar .btn, #sidebar .btn, .clientarea-sidebar .btn, .sidebar-primary .btn {
  border-radius: 999px !important; font-weight: 600 !important; font-size: 0.8125rem !important;
}
.sidebar .btn-primary, #sidebar .btn-primary,
.clientarea-sidebar .btn-primary, .sidebar-primary .btn-primary {
  background: var(--gh-btn-grad) !important; border: 0 !important;
  color: #fff !important; box-shadow: var(--gh-btn-shadow) !important;
}
/* Secondary sidebar stacked under the content on phones (footer.tpl). */
.sidebar.sidebar-secondary { margin-top: 1.4rem; }


/* === List groups (generic) =============================================== */
.list-group { border-radius: var(--gh-radius-card); overflow: hidden; }
.list-group-item {
  background-color: #fff; border-color: var(--gh-line); color: var(--gh-ink-800);
  font-size: var(--gh-text-sm); padding: 0.75rem 1rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.list-group-item:hover { background-color: var(--gh-sky-25); color: var(--gh-action-dark); }
.list-group-item.active { background-color: var(--gh-sky-50); border-color: var(--gh-line); color: var(--gh-action-dark); font-weight: 700; }
.list-group-item-action { color: var(--gh-ink-800); }


/* === Tables ==============================================================
   WHMCS renders invoices, services and domains with .table / .table-list. */
.table { color: var(--gh-ink-700); font-size: var(--gh-text-sm); margin-bottom: 0; border-color: var(--gh-line); }
.table thead th {
  background: var(--gh-sky-25);
  border-top: 0; border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink-900); font-size: var(--gh-text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.table td, .table th { border-top: 1px solid var(--gh-line); padding: 0.8rem 0.95rem; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--gh-sky-25); }
.table-hover tbody tr:hover { background-color: var(--gh-sky-50); color: var(--gh-ink-900); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--gh-line); }
/* A table flush against the bottom of a card should share its rounded edge. */
.card > .table:last-child,
.card > .table-responsive:last-child > .table,
.panel > .table:last-child {
  border-bottom-left-radius: var(--gh-radius-card);
  border-bottom-right-radius: var(--gh-radius-card);
  overflow: hidden;
}
/* Wide tables scroll inside their own box instead of widening the page. */
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: var(--gh-radius-card); }

/* Price strings used across the cart and domain pages. */
.price { color: var(--gh-ink-900); font-weight: 800; }
.price del { color: var(--gh-muted); font-weight: 500; }
.price span { color: var(--gh-action); }


/* === Forms & inputs ====================================================== */
label, .control-label { color: var(--gh-ink-800); font-size: 12px; font-weight: 700; margin-bottom: 0.3rem; }
.form-control, .custom-select, select.form-control, textarea.form-control {
  font-family: var(--gh-font); font-size: var(--gh-text-sm);
  min-height: 41px; padding: 0.55rem 0.85rem; max-width: 100%;
  background-color: #fff; border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-field); color: var(--gh-ink-900); box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.form-control::placeholder { color: #93a6bd; }
.form-control:hover, .custom-select:hover { border-color: var(--gh-sky-150); }
.form-control:focus, .custom-select:focus {
  background-color: #fff; border-color: var(--gh-action);
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.15); color: var(--gh-ink-900);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--gh-sky-25); color: var(--gh-muted); }
textarea.form-control { min-height: 112px; line-height: 1.6; }
.form-group { margin-bottom: 1rem; }
.form-text { color: var(--gh-muted); font-size: var(--gh-text-xs); }
.is-invalid, .form-control.is-invalid { border-color: var(--gh-danger); }
.invalid-feedback { color: var(--gh-danger); font-size: var(--gh-text-xs); }

/* Input groups: pill on the outer edges, square where the parts meet. */
.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append .btn, .input-group-btn .btn, .input-group-append .input-group-text {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: var(--gh-radius-field); border-bottom-right-radius: var(--gh-radius-field);
}
.input-group-prepend .btn, .input-group-prepend .input-group-text {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-top-left-radius: var(--gh-radius-field); border-bottom-left-radius: var(--gh-radius-field);
}
.input-group-text, .input-group-addon { background: var(--gh-sky-25); border-color: var(--gh-line); color: var(--gh-muted); font-size: 12px; }

/* Knowledge base search bar (.kb-search in custom.css). */
.kb-search .form-control { border-right: 0; }
.kb-search .form-control:focus { box-shadow: none; border-color: var(--gh-action); }
.kb-search #btnKnowledgebaseSearch,
.kb-search #btnKnowledgebaseSearch:hover,
.kb-search #btnKnowledgebaseSearch:focus { background-image: var(--gh-btn-grad); border-color: transparent; color: #fff; }

/* Ticket form, styled scope-wide in custom.css. */
form[action*="submitticket"] .form-control,
form[action*="submitticket"] select.form-control,
form[action*="submitticket"] textarea { border-radius: var(--gh-radius-field); border-color: var(--gh-line); font-size: var(--gh-text-sm); }
form[action*="submitticket"] .form-control:focus { border-color: var(--gh-action); box-shadow: 0 0 0 3px rgb(11 137 220 / 0.15); }
form[action*="submitticket"] label { color: var(--gh-ink-800); }
/* Markdown toolbar buttons stay quiet chips, not primary CTAs. */
form[action*="submitticket"] .md-header .btn,
form[action*="submitticket"] .md-header .btn-info {
  border-radius: 8px; background-image: none; background-color: var(--gh-sky-25);
  border-color: var(--gh-line); color: var(--gh-ink-800); box-shadow: none; font-size: 12px;
}
form[action*="submitticket"] .md-header .btn:hover { background-color: var(--gh-sky-50); color: var(--gh-action-dark); }


/* === Alerts ==============================================================
   Soft tinted panel plus a 4px left rail, same radius as the cards. */
.alert {
  border: 1px solid var(--gh-line); border-left-width: 4px;
  border-radius: var(--gh-radius-card); padding: 0.9rem 1.1rem;
  font-size: var(--gh-text-sm); color: var(--gh-ink-800); box-shadow: var(--gh-shadow-card);
}
.alert a { font-weight: 700; }
.alert .close { color: inherit; opacity: 0.45; text-shadow: none; }
.alert .close:hover { opacity: 0.8; }
.alert-info, .alert-primary { background: var(--gh-sky-25); border-color: var(--gh-line); border-left-color: var(--gh-action); color: var(--gh-ink-800); }
.alert-success { background: #ecfdf5; border-color: #b7ecd6; border-left-color: #0f9d58; color: #0a5c38; }
/* custom.css recolours .alert-warning to a blue text tone - reset it properly. */
.alert-warning { background: #fffaeb; border-color: #fbe3ad; border-left-color: #f5a400; color: #6b4a00; }
.alert-danger { background: #fff1ef; border-color: #fcd2cc; border-left-color: var(--gh-danger); color: #8c1a0a; }
/* Network status notice above the breadcrumb (includes/network-issues-notifications). */
#Primary_Navbar-Network_Status { color: var(--gh-action-dark); }


/* === Badges ============================================================== */
.badge {
  border-radius: 999px; padding: 0.35em 0.75em; font-family: var(--gh-font);
  font-size: var(--gh-text-xs); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4;
}
.badge-info, .badge-primary, .kb-category .badge-info { background-color: var(--gh-sky-100); color: var(--gh-action-dark); }
.kb-category:hover .badge-info { background-color: var(--gh-action); color: #fff; }
.badge-success { background-color: #d6f5e6; color: #0a5c38; }
.badge-warning { background-color: #fdeeca; color: #6b4a00; }
.badge-danger { background-color: #fddad4; color: #8c1a0a; }
.badge-secondary, .badge-default { background-color: var(--gh-sky-25); color: var(--gh-muted); }


/* === Pagination ==========================================================
   [forced] custom.css declares every pagination rule with !important. */
.pagination { gap: 6px !important; }
.pagination .page-item .page-link {
  background: #fff !important; border: 1px solid var(--gh-line) !important;
  border-radius: 999px !important; color: var(--gh-ink-800) !important;
  font-size: 0.8125rem !important; font-weight: 600 !important;
  min-width: 38px !important; padding: 9px 13px !important; text-align: center !important;
  transition: all 0.18s ease !important;
}
.pagination .page-item .page-link:hover {
  background: var(--gh-sky-25) !important; border-color: var(--gh-sky-150) !important; color: var(--gh-action-dark) !important;
}
.pagination .page-item.active .page-link {
  background: var(--gh-btn-grad) !important; border-color: transparent !important;
  color: #fff !important; box-shadow: var(--gh-btn-shadow) !important;
}
.pagination .page-item.disabled .page-link {
  background: var(--gh-sky-25) !important; border-color: var(--gh-line) !important; color: #a4b6cb !important;
}


/* === Tabs ================================================================ */
.nav-tabs { border-bottom: 1px solid var(--gh-line); gap: 4px; flex-wrap: wrap; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0;
  color: var(--gh-muted); font-size: var(--gh-text-sm); font-weight: 600; padding: 0.65rem 1rem;
}
.nav-tabs .nav-link:hover { background: var(--gh-sky-25); border-bottom-color: var(--gh-sky-150); color: var(--gh-action-dark); }
.nav-tabs .nav-link.active { background: transparent; border-bottom-color: var(--gh-action); color: var(--gh-action-dark); font-weight: 700; }


/* === Modals & overlays ===================================================
   #modalAjax, .system-modal and #modalChooseLanguage all live in footer.tpl. */
.modal-content { border: 1px solid var(--gh-line); border-radius: 20px; box-shadow: var(--gh-shadow-float); overflow: hidden; }
.modal-header { background: var(--gh-sky-25); border-bottom: 1px solid var(--gh-line); padding: 1rem 1.25rem; }
.modal-title { color: var(--gh-ink-900); font-size: var(--gh-text-lg); font-weight: 800; }
.modal-body { padding: 1.25rem; color: var(--gh-ink-700); font-size: var(--gh-text-sm); }
.modal-footer { background: #fff; border-top: 1px solid var(--gh-line); padding: 0.85rem 1.25rem; gap: 8px; }
.modal .close { color: var(--gh-ink-900); opacity: 0.5; text-shadow: none; }
.modal .close:hover { opacity: 0.9; }
/* The language / currency chooser is a deep-blue sheet on the marketing site. */
.modal-localisation .modal-content { background: var(--gh-deep-900); }
.modal-localisation .modal-body { color: rgb(255 255 255 / 0.85); }
.modal-localisation .item-selector .item { display: block; border-radius: 12px; padding: 0.55rem 0.85rem; color: rgb(255 255 255 / 0.8); font-size: var(--gh-text-sm); font-weight: 600; }
.modal-localisation .item-selector .item:hover,
.modal-localisation .item-selector .item.active { background: rgb(255 255 255 / 0.12); color: #fff; }
#fullpage-overlay .inner-wrapper { color: var(--gh-ink-900); font-weight: 600; }


/* === Login & register pages ==============================================
   header.tpl swaps in .login-main-body / .login-page-wrapper for these views.
   The login/registration design itself lives in
   giddyhost-login-responsive-complete.css and is deliberately untouched. */
.login-main-body { background: var(--gh-tint); padding: 3rem 1rem; min-height: 70vh; }
.login-page-wrapper { width: 100%; max-width: 1100px; margin: 0 auto; }
.login-page-content .card, .login-page-content .panel { border-radius: 20px; box-shadow: var(--gh-shadow-card-hover); }


/* =============================================================================
   FOOTER - mirrors src/components/Footer.tsx
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--gh-deep);
  color: rgb(255 255 255 / 0.7);
  padding: 0;
  overflow: hidden;
}

/* --- 1. Contact strip ---------------------------------------------------- */
.gh-footer-contact-strip {
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
}
.gh-footer-contact-strip .container {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; padding-top: 22px; padding-bottom: 22px;
}
.gh-contact-item {
  display: flex; align-items: center; gap: 13px;
  padding: 7px; border-radius: 16px;
  color: rgb(255 255 255 / 0.7);
  transition: background-color 0.18s ease;
}
.gh-contact-item:hover { background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.7); }
.gh-contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 41px; height: 41px; flex: 0 0 41px; border-radius: 16px;
  background: rgb(255 255 255 / 0.1); color: var(--gh-on-deep); font-size: 16px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.gh-contact-item:hover .gh-contact-icon { background: var(--gh-action); color: #fff; }
/* The live-chat tile is already action blue at rest. */
.gh-contact-icon-solid, .gh-contact-item:hover .gh-contact-icon-solid { background: var(--gh-action); color: #fff; }
.gh-contact-text { min-width: 0; }
.gh-contact-label { display: block; font-size: var(--gh-text-xs); font-weight: 600; color: rgb(255 255 255 / 0.6); }
.gh-contact-value {
  display: block; font-size: 14px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 2. Brand column + link columns -------------------------------------- */
.gh-footer-main {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 3fr;
  gap: 56px;
  padding-top: 52px; padding-bottom: 36px;
}
.gh-footer-brand { max-width: 28rem; }
.gh-footer-logo { display: inline-block; }
.gh-footer-logo img { height: 52px; width: auto; display: block; }
/* custom.css centres the old single-column footer; this one is a left-aligned
   brand column, so text-align / justify-content / margins are reset here. */
.footer-about {
  color: rgb(255 255 255 / 0.7); font-size: var(--gh-text-sm); line-height: 1.7;
  margin: 18px 0 0; max-width: 46ch; text-align: left; font-weight: 400;
}
.footer-social { display: flex; justify-content: flex-start; gap: 9px; margin: 22px 0 0; }
.footer-social a, .footer-social a.facebook, .footer-social a.instagram,
.footer-social a.x-twitter, .footer-social a.youtube {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgb(255 255 255 / 0.1); color: #fff; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.footer-social a:hover { background: var(--gh-action); box-shadow: inset 0 0 0 1px var(--gh-action); color: #fff; }

.gh-footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; }
.footer-title {
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 18px; line-height: 1.4;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 13px; }
.footer-links li:last-child { margin-bottom: 0; }
.footer-links a { color: rgb(255 255 255 / 0.65); font-size: var(--gh-text-sm); line-height: 1.4; transition: color 0.18s ease; }
.footer-links a:hover { color: var(--gh-on-deep); }

/* --- 3. Payment strip + legal links -------------------------------------- */
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.gh-footer-accept { display: flex; align-items: center; gap: 18px; }
.gh-accept-label { margin: 0; font-size: 12px; font-weight: 600; color: rgb(255 255 255 / 0.6); white-space: nowrap; }
.gh-accept-art { height: 34px; width: auto; background: #fff; border-radius: 12px; padding: 7px 11px; }

/* One evenly divided row: every item but the first carries its own left rule
   and every item has the same padding on both sides, so the spacing either
   side of a divider is equal and no stray rule starts or ends a line. */
.gh-legal-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  list-style: none; margin: 0; padding: 0; row-gap: 7px; font-size: 12px;
}
.gh-legal-nav li { padding: 0 11px; }
.gh-legal-nav li + li { border-left: 1px solid rgb(255 255 255 / 0.15); }
.gh-legal-nav li:first-child { padding-left: 0; }
.gh-legal-nav li:last-child { padding-right: 0; }
.gh-legal-nav a { color: rgb(255 255 255 / 0.6); line-height: 1.35; white-space: nowrap; }
.gh-legal-nav a:hover { color: #fff; }

/* --- 4. Copyright -------------------------------------------------------- */
.copyright {
  color: rgb(255 255 255 / 0.5); font-size: 12px; font-weight: 400; line-height: 1.7;
  margin: 0; padding-bottom: 24px; text-align: left;
}


/* === Responsive ==========================================================
   Several rules here restate a property custom.css already sets inside its own
   media query. A media query adds no specificity, so without the restatement
   the unconditional rules above (which load later) would win at every width. */
@media (max-width: 1199.98px) {
  /* [forced] custom.css hides the whole right half of the band at this width
     (`.top-right { display: none !important }`); the contact details and the
     Live Chat pill must stay, exactly as they do on the marketing site. */
  .top-bar .top-right { display: flex !important; }
  .top-bar .container { gap: 4px 14px; }
  .top_bar_so { gap: 14px; }

  .gh-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
  .gh-footer-contact-strip .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-mega-grid.gh-mega-2 { grid-template-columns: 1fr 1fr 250px; }
}

@media (max-width: 991.98px) {
  /* TopBar is `hidden lg:block` on the marketing site. */
  .top-bar { display: none; }

  .main-header { height: auto; }
  .main-header .container, .main-header > .container { min-height: 60px; height: auto; gap: 0.75rem; }
  .logo img { height: 34px; }
  .mobile-toggle { display: inline-flex; margin-left: 0; }

  /* The drawer. custom.css pins it to `top: 82px` and toggles it with
     display none/block (custom.js adds `.active`). Both the top offset and the
     display switch have to be restated, because the unconditional
     `.nav-menu { display: flex }` above would otherwise leave the drawer open
     on every phone page load. */
  .nav-menu, .client-main-nav { display: none; top: 100%; margin-left: 0; max-height: calc(100vh - 60px); }
  .nav-menu.active, .client-main-nav.active { display: block; }
  .nav-menu, .client-main-nav > ul {
    flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
  }
  .client-main-nav > ul { display: flex; }
  .nav-menu > li, .client-main-nav > ul > li { width: 100%; }
  .nav-menu > li > a, .client-main-nav > ul > li > a {
    height: auto; padding: 12px 2px; border-radius: 0;
    border-bottom: 1px solid var(--gh-line);
    font-size: 14px; justify-content: space-between; width: 100%;
  }
  .nav-menu > li:hover > a, .client-main-nav > ul > li:hover > a { background: transparent; }
  .client-main-nav > ul > li:hover > a i, .nav-menu > li:hover > a i { transform: none; }
  .client-main-nav > ul > li.open > a i, .nav-menu > li.open > a i { transform: rotate(180deg); }

  /* Restate custom.css's in-drawer accordion geometry. */
  .client-mega-menu {
    position: static; width: 100%; max-width: 100%; transform: none;
    border-top: 0; box-shadow: none; padding: 4px 0 10px 10px;
    background: #f8fbff; border-radius: 0;
  }
  .client-mega-grid, .client-mega-grid.gh-mega-2, .client-mega-grid.gh-mega-3 {
    grid-template-columns: 1fr; gap: 14px; padding: 0; max-width: none; margin: 0;
  }
  .client-mega-menu h4 { margin-top: 8px; margin-bottom: 4px; }
  .client-mega-menu a { margin: 0; padding: 9px 8px; border-radius: 12px; }
  .client-mega-menu .gh-mega-promo { padding: 16px; border-radius: 18px; }
  .gh-promo-text { max-width: none; }
  .gh-promo-cta { padding-top: 14px; }

  /* custom.css hides the account icon below 992px; the client area needs it. */
  .gh-header-actions .user-icon, .client-account-dropdown .user-icon { display: inline-flex !important; }

  #main-body { padding-top: 1.15rem; padding-bottom: 1.9rem; }

  .gh-footer-main { grid-template-columns: 1fr; gap: 34px; padding-top: 34px; padding-bottom: 26px; }
  .gh-footer-brand { max-width: none; }
}

@media (max-width: 767.98px) {
  body { font-size: 0.875rem; }   /* 14px - the phone floor used by .prose-gh */
  .card, .panel, .well { border-radius: 14px; }
  .card-body, .panel-body, .well { padding: 1rem; }
  .card-header, .panel-heading { padding: 0.85rem 1rem; }
  .table td, .table th { padding: 0.65rem 0.7rem; }
  .btn { padding: 0.7rem 1.1rem; }
  .btn-main { width: 100%; }
  /* [forced] custom.css pins the tile metrics with !important at this breakpoint. */
  .tiles .tile { min-height: 102px !important; padding: 16px 14px !important; }
  .tiles .tile .stat { font-size: 1.375rem !important; }   /* 22px = --text-2xl */

  .gh-footer-contact-strip .container { grid-template-columns: 1fr; gap: 4px; padding-top: 14px; padding-bottom: 14px; }
  .gh-contact-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 14px; font-size: 14px; }
  .gh-contact-value { font-size: var(--gh-text-sm); }
  .gh-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .gh-footer-logo img { height: 41px; }
  .footer-title { margin-bottom: 12px; }
  .footer-links li { margin-bottom: 10px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .gh-footer-accept { flex-direction: column; align-items: flex-start; gap: 9px; }
  .gh-legal-nav { justify-content: center; }
}

@media (max-width: 575.98px) {
  .main-header .container, .main-header > .container { gap: 0.5rem; }
  .brand-area { gap: 10px; }
  .logo img { height: 30px; }
  /* The marketing header keeps the flag on every screen; custom.css hid it. */
  .flag { display: inline-flex; }
  .gh-header-actions { gap: 6px; }
  /* "Get Started" is `hidden sm:inline-flex` in Header.tsx. Login stays: it is
     the only way into the client area on a phone. */
  .gh-cta-btn { display: none; }
  .gh-login-btn { padding: 0 14px; }
  .gh-cart-btn, .gh-login-btn, .gh-cta-btn, .mobile-toggle { height: 34px; }
  .gh-cart-btn, .mobile-toggle { width: 34px; }
  .gh-header-actions .user-icon, .client-account-dropdown .user-icon { width: 34px !important; height: 34px !important; }
  .client-account-menu { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .modal-content { border-radius: 16px; }
  .gh-accept-art { height: 30px; }
}


/* === Overflow safety =====================================================
   Nothing may make the page scroll sideways on a phone. `clip` is used rather
   than `hidden` so the sticky header keeps working. */
html, body { overflow-x: clip; }
/* Long invoice numbers, domains and e-mail addresses wrap instead of stretching. */
.card-body, .panel-body, .list-group-item, .table td, .breadcrumb-item { overflow-wrap: anywhere; }
#main-body img, .card img { max-width: 100%; height: auto; }
/* Footer images only get the width cap: the logo and the payment art are sized
   by height above, and `height: auto` here would undo that. */
.site-footer img { max-width: 100%; }


/* === Motion preferences ==================================================
   [forced] must beat the transition/animation declarations custom.css marks as
   important; this is the accessibility escape hatch carried over from globals.css. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   GIDDYHOST 2026 - CLIENT AREA
   Appended to templates/giddyhost3/assets/css/giddyhost-2026.css (loads last).

   SCOPE
   Every rule below is prefixed with

       #main-body:not(:has(#order-standard_cart))

   `<section id="main-body">` is emitted by giddyhost3/header.tpl line 516 for
   every page and was confirmed in the fetched HTML of login, register,
   announcements, knowledgebase, contact, serverstatus and pwreset. It is the
   only wrapper that is (a) always present and (b) excludes the header, the
   breadcrumb bar and the footer, all of which are already styled.

   cart.php also renders inside #main-body - verified: the fetched cart.php has
   `id="main-body"` followed by `id="order-standard_cart"`. The `:not(:has())`
   guard therefore switches this whole block OFF on any page that contains the
   standard cart, so nothing here can reach the order form, which someone else
   owns. custom.css already ships 55 `:has()` rules in production, so the
   selector is within this project's established browser baseline.

   Side effect: the guard contributes an ID, so every selector starts at
   specificity (2,0,0). That is deliberate - it clears theme.min.css and
   all.min.css (both plain, both loaded first) without any !important.

   !important appears on eight declarations in five blocks, each one where a
   sheet that loads before this one already marks that same property important.
   Every such block is tagged [forced] and quotes the original. Nothing else in
   this file uses it.

   NOT DISPLACED ON PURPOSE
   giddyhost-2026.css already sets `.sidebar .card-header{background:
   var(--gh-sky-25)!important}`. The generic `.card > .card-header{background:
   #fff}` below is plain, so sidebar headers keep their tint and only content
   cards go white. That is the intended split, not an accident.

   TOKEN FALLBACKS
   The brief lists --gh-success, --gh-radius, --gh-radius-lg and
   --gh-radius-pill, but the :root block currently live in giddyhost-2026.css
   declares --gh-radius-card / --gh-radius-field and no --gh-success. Every use
   below therefore carries a literal fallback, so the rules still render if
   those tokens are never added.
   ========================================================================== */


/* =============================================================================
   1. PANELS, CARDS AND THE SIDEBAR
   ========================================================================== */

/* Displaces: .card,.mc-promo-login,.mc-promo-manage{border:1px solid
   rgba(0,0,0,.125);border-radius:.25rem} (theme.min.css)
   The brief puts client-area cards at 24px; giddyhost-2026.css currently rounds
   every .card to 16px. Restating it here inside #main-body keeps the whole
   client area on one radius rather than mixing the two. */
#main-body:not(:has(#order-standard_cart)) > .container > .row > div > .card,
#main-body:not(:has(#order-standard_cart)) .primary-content > .card,
#main-body:not(:has(#order-standard_cart)) .client-home-cards .card,
#main-body:not(:has(#order-standard_cart)) .card.view-ticket,
#main-body:not(:has(#order-standard_cart)) #ticketReplyContainer {
  border-radius: var(--gh-radius-lg, 24px);
  border: 1px solid var(--gh-line);
  background: #fff;
  box-shadow: var(--gh-shadow-card);
}

/* A card's first and last children have to follow the outer radius or the
   header band and footer square off the corners they sit in. */
#main-body:not(:has(#order-standard_cart)) .card > .card-header:first-child {
  border-radius: calc(var(--gh-radius-lg, 24px) - 1px) calc(var(--gh-radius-lg, 24px) - 1px) 0 0;
}
#main-body:not(:has(#order-standard_cart)) .card > .card-footer:last-child {
  border-radius: 0 0 calc(var(--gh-radius-lg, 24px) - 1px) calc(var(--gh-radius-lg, 24px) - 1px);
}

/* Displaces: .card-header{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03)}
   The 3% black wash reads as dirty grey against the sky surface; a hairline and
   a white ground is the site's card treatment. */
#main-body:not(:has(#order-standard_cart)) .card > .card-header {
  background: #fff;
  border-bottom: 1px solid var(--gh-line);
  padding: 1rem 1.25rem;
}
#main-body:not(:has(#order-standard_cart)) .card > .card-header > .card-title,
#main-body:not(:has(#order-standard_cart)) .card > .card-body > .card-title {
  font-size: var(--gh-text-lg, 1.0625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gh-ink-900);
}

/* Displaces: .card-subtitle{margin-top:-.375rem} and the inline
   `card-header bg-success text-white` on the invoice credit card. A solid
   green header band is the one piece of Bootstrap colour left in the client
   area; the palette expresses the same thing with a tinted surface. */
#main-body:not(:has(#order-standard_cart)) .card > .card-header.bg-success,
#main-body:not(:has(#order-standard_cart)) .card > .card-title.bg-info,
#main-body:not(:has(#order-standard_cart)) .card > .card-title.bg-success,
#main-body:not(:has(#order-standard_cart)) .card > .card-title.bg-warning,
#main-body:not(:has(#order-standard_cart)) .card > .card-title.bg-danger {
  background: var(--gh-sky-25);
  color: var(--gh-ink-900);
  border-bottom: 1px solid var(--gh-line);
  font-size: var(--gh-text-base, 0.9375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 0.85rem 1.25rem;
  border-radius: calc(var(--gh-radius-lg, 24px) - 1px) calc(var(--gh-radius-lg, 24px) - 1px) 0 0;
}
/* [forced] Bootstrap's own `.text-white{color:#fff!important}` is on the same
   element as the header above, so the ink colour needs the same weight. */
#main-body:not(:has(#order-standard_cart)) .card > .card-header.bg-success.text-white,
#main-body:not(:has(#order-standard_cart)) .card > .card-title.text-white {
  color: var(--gh-ink-900) !important;
}

/* Displaces: .card.bg-default - `bg-default` is a Bootstrap 3 leftover with no
   rule behind it in Bootstrap 4, so the invoice line-item card was inheriting
   nothing. Named explicitly so it matches its neighbours. */
#main-body:not(:has(#order-standard_cart)) .card.bg-default {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg, 24px);
  box-shadow: var(--gh-shadow-card);
}

/* -- Sidebar ---------------------------------------------------------------
   Markup, from includes/sidebar.tpl:
     .card.card-sidebar > .card-header > h3.card-title > i.card-minimise
                        > .collapsable-card-body > .list-group.list-group-flush
                          > a.list-group-item > .sidebar-menu-item-wrapper
                            > .sidebar-menu-item-icon-wrapper > i
                            > .sidebar-menu-item-label
                            > .sidebar-menu-item-badge > .badge
   giddyhost-2026.css already colours .sidebar .card / .list-group-item. What is
   missing is the internal geometry, the badge, and the collapse affordance. */

#main-body:not(:has(#order-standard_cart)) .card-sidebar {
  border-radius: var(--gh-radius, 16px);
  overflow: hidden;
}
/* The whole header is the collapse hit target, so it needs a hover and a focus
   state - theme.min.css only gives it `cursor:pointer`. */
#main-body:not(:has(#order-standard_cart)) .card-sidebar > .card-header:hover {
  background: var(--gh-sky-50);
}
#main-body:not(:has(#order-standard_cart)) .card-sidebar > .card-header:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: -2px;
}
/* Displaces: .sidebar .card-sidebar .card-minimise{transition:transform .2s}
   A chevron at full ink weight competes with the section title it sits beside. */
#main-body:not(:has(#order-standard_cart)) .card-sidebar .card-minimise {
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  margin-top: 0.2rem;
}
#main-body:not(:has(#order-standard_cart)) .card-sidebar .card-header:hover .card-minimise {
  color: var(--gh-action);
}

/* Displaces: .sidebar .sidebar-menu-item-wrapper{display:flex;flex-flow:row}
   Baseline alignment: the icon column is fixed so every label starts on the
   same x, which is what makes a long nav scan as a column. */
#main-body:not(:has(#order-standard_cart)) .sidebar-menu-item-wrapper {
  align-items: center;
  gap: 0.6rem;
  line-height: 1.35;
}
#main-body:not(:has(#order-standard_cart)) .sidebar-menu-item-icon-wrapper {
  flex: 0 0 18px;
  width: 18px;
  margin-right: 0;
  text-align: center;
  color: var(--gh-action);
}
#main-body:not(:has(#order-standard_cart)) .list-group-item.active .sidebar-menu-item-icon-wrapper {
  color: var(--gh-action-dark);
}
#main-body:not(:has(#order-standard_cart)) .sidebar-menu-item-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Displaces: .sidebar .sidebar-menu-item-badge{margin-left:auto}
   A count next to a nav label is a quiet counter, not a call to action. */
#main-body:not(:has(#order-standard_cart)) .sidebar-menu-item-badge .badge,
#main-body:not(:has(#order-standard_cart)) .card-sidebar .card-title .badge {
  background: var(--gh-sky-100);
  color: var(--gh-deep-800);
  border-radius: var(--gh-radius-pill, 999px);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
  padding: 0.3em 0.6em;
  min-width: 1.6em;
}
#main-body:not(:has(#order-standard_cart)) .list-group-item.active .sidebar-menu-item-badge .badge {
  background: var(--gh-action);
  color: #fff;
}

/* Displaces: .card-sidebar .alert{padding:10px 15px;margin-bottom:5px}
   The "your account is x" notices that WHMCS drops into sidebar bodies are
   inside a 16px column, so the 4px rail plus card shadow is too much furniture. */
#main-body:not(:has(#order-standard_cart)) .card-sidebar .alert {
  border-left-width: 1px;
  border-radius: 10px;
  box-shadow: none;
  padding: 0.6rem 0.75rem;
  font-size: var(--gh-text-xs, 0.6875rem);
}

/* The status filter list in the sidebar (`.view-filter-btns`, wired up in
   includes/tablelist.tpl). Its radio glyph is the only state indicator, so it
   must not be the same colour as the label next to it. */
#main-body:not(:has(#order-standard_cart)) .view-filter-btns .list-group-item i {
  color: var(--gh-line);
}
#main-body:not(:has(#order-standard_cart)) .view-filter-btns .list-group-item.active i,
#main-body:not(:has(#order-standard_cart)) .view-filter-btns .list-group-item:hover i {
  color: var(--gh-action);
}

/* The mobile duplicate of a sidebar menu (`d-block d-md-none` in sidebar.tpl)
   is a bare select; give it the card surface so it does not look unfinished. */
#main-body:not(:has(#order-standard_cart)) .sidebar .card.bg-light {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius, 16px);
  box-shadow: var(--gh-shadow-card);
}


/* =============================================================================
   2. DATA TABLES
   The client area's core. Every list page (services, domains, invoices,
   tickets, quotes, emails) is includes/tablelist.tpl:

     div.table-container > div.dataTables_wrapper
        > div.listtable > div.dataTables_filter + div.dataTables_info + table
        > div.dataTables_paginate
        > div.dataTables_length

   from `"dom": '<"listtable"fit>pl'`. `"responsive": true` is set, so
   DataTables Responsive is active and the tables are `dtr-inline collapsed`.

   RESPONSIVE STRATEGY - two mechanisms, chosen per table type:
   (a) List tables: keep DataTables Responsive. It already collapses the
       columns that do not fit into a `tr.child` with `span.dtr-title` labels,
       which is the data-label pattern done natively and kept in sync with the
       sort state. Section 2c styles that child row so it reads as a definition
       list rather than an afterthought. Nothing is re-implemented in CSS,
       because a CSS-only stack would fight the plugin's inline `display`.
   (b) Everything else - invoice line items, transactions, product details,
       and any list table on a browser where the plugin fails to boot - gets a
       real horizontal scroll container on .table-container / .table-responsive
       with a visible slim scrollbar. See section 2e.
   ========================================================================== */

/* -- 2a. The table itself -------------------------------------------------- */

/* Displaces: .dataTables_wrapper table.table-list{margin:10px 0!important;
   width:100%!important;border-radius:4px;border:1px solid #ddd} */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper table.table-list,
#main-body:not(:has(#order-standard_cart)) table.table-list {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius, 16px);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  box-shadow: var(--gh-shadow-card);
  color: var(--gh-ink-700);
  font-size: var(--gh-text-sm, 0.8125rem);
  overflow: hidden;
}

/* Displaces: table.table-list thead th{padding:8px;background-color:#fff;
   border-bottom:1px solid #ccc;color:#333;text-align:center}
   and .dataTables_wrapper table.table-list thead th{border-bottom:4px solid
   rgba(29,57,101,.2);font-weight:400}
   The 4px navy underline is the single most dated element on these pages. A
   tinted header row with an uppercase micro-label does the same separation job
   and matches the card headers. */
#main-body:not(:has(#order-standard_cart)) table.table-list thead th,
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper table.table-list thead th {
  background: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  border-top: 0;
  color: var(--gh-ink-900);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.8rem 0.95rem;
  vertical-align: middle;
  white-space: nowrap;
}
/* Displaces: table.dataTable thead th{text-align:left} for the columns the
   templates explicitly centre (amount, due date, status). */
#main-body:not(:has(#order-standard_cart)) table.table-list thead th.text-center {
  text-align: center;
}

/* Displaces: .table-list>tbody>tr>td{background-color:#fff} and
   table.table-list tbody td{padding:10px 8px;font-size:.9em}
   border-collapse is forced to `separate` by all.min.css, so a per-cell
   border-top would double up between rows - bottom borders only. */
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid var(--gh-line);
  padding: 0.85rem 0.95rem;
  font-size: var(--gh-text-sm, 0.8125rem);
  color: var(--gh-ink-700);
  vertical-align: middle;
}
#main-body:not(:has(#order-standard_cart)) table.table-list tbody tr:last-child > td {
  border-bottom: 0;
}
/* The first cell of each row carries the identity of the record. */
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td strong,
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td a {
  color: var(--gh-ink-900);
  font-weight: 700;
}
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td a:hover {
  color: var(--gh-action);
}
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td small,
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td .text-muted {
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 500;
}

/* Displaces: .table-list>tbody>tr:hover>td{background-color:#f9f9f9}
   Every row in these tables has an onclick redirect, so the hover has to read
   as "this whole row is a link". */
#main-body:not(:has(#order-standard_cart)) table.table-list tbody tr:hover > td {
  background: var(--gh-sky-25);
  color: var(--gh-ink-900);
}
/* Displaces: .table-list>tbody>tr>td a.border-left{border-left:1px solid #eee;
   padding-left:20px} - `border-left` is also a Bootstrap utility name, so this
   rule fires on the ticket subject link and paints a stray rule inside a cell. */
#main-body:not(:has(#order-standard_cart)) .table-list > tbody > tr > td a.border-left {
  border-left: 0;
  padding-left: 0;
}
/* Ticket list: number and subject are one line of information, ranked. */
#main-body:not(:has(#order-standard_cart)) .ticket-number {
  color: var(--gh-muted);
  font-weight: 700;
  font-size: var(--gh-text-xs, 0.6875rem);
  margin-right: 0.4rem;
}
#main-body:not(:has(#order-standard_cart)) .ticket-subject {
  color: var(--gh-ink-900);
  font-weight: 600;
}
/* An unread ticket is the reason the customer opened this page. */
#main-body:not(:has(#order-standard_cart)) .ticket-subject.unread {
  font-weight: 800;
  color: var(--gh-action-dark);
}
#main-body:not(:has(#order-standard_cart)) .ticket-subject.unread::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.45rem;
  border-radius: var(--gh-radius-pill, 999px);
  background: var(--gh-action);
  vertical-align: middle;
}

/* Bulk-select checkbox column on the domains table. */
#main-body:not(:has(#order-standard_cart)) table.table-list td input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gh-action);
  cursor: pointer;
}

/* -- 2b. Sorting affordance ------------------------------------------------ */

/* Displaces: table.dataTable thead>tr>th.sorting:before / :after
   {position:absolute;opacity:.125;right:10px;line-height:9px;font-size:.8em}
   with content "\25B2" and "\25BC". Two stacked triangles at 12.5% opacity are
   invisible on a tinted header and unreadable when active. Kept as two glyphs
   so the unsorted/asc/desc distinction survives, but sized and coloured. */
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_asc,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_desc {
  position: relative;
  padding-right: 1.6rem;
  cursor: pointer;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting:before,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting:after,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_asc:before,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_asc:after,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_desc:before,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_desc:after {
  right: 0.6rem;
  opacity: 1;
  color: #a8bed6;
  font-size: 7px;
  line-height: 7px;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting:before,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_asc:before,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_desc:before {
  bottom: 51%;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting:after,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_asc:after,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_desc:after {
  top: 51%;
}
/* Displaces: th.sorting_asc:before,th.sorting_desc:after{opacity:.6} */
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_asc:before,
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting_desc:after {
  color: var(--gh-action);
  opacity: 1;
}
/* Displaces: .dataTables_wrapper table.table-list thead th.sorting_asc,
   th.sorting_desc{background-color:#f6f6f6} */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper table.table-list thead th.sorting_desc {
  background: var(--gh-sky-50);
  color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th.sorting:hover {
  background: var(--gh-sky-50);
}
/* Displaces: table.dataTable thead>tr>th:active{outline:0}. DataTables puts
   tabindex="0" on sortable headers, so removing the outline strands keyboard
   users on the only interactive control in the table head. */
#main-body:not(:has(#order-standard_cart)) table.dataTable thead > tr > th:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: -2px;
}

/* -- 2c. Responsive child rows (the phone layout) -------------------------- */

/* Displaces: table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before
   {color:#fff;border:.15em solid #fff;border-radius:1em;box-shadow:0 0 .2em #444;
   font-family:"Courier New";content:"+";background-color:#0275d8}
   The expand control is the primary phone affordance for these tables, so it
   gets the action colour and the site's font instead of a shadowed Courier
   chip. */
#main-body:not(:has(#order-standard_cart)) table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  background-color: var(--gh-action);
  border: 0;
  box-shadow: none;
  border-radius: var(--gh-radius-pill, 999px);
  font-family: var(--gh-font);
  font-weight: 700;
  height: 18px;
  width: 18px;
  line-height: 18px;
  margin-top: -9px;
  font-size: 13px;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
  background-color: var(--gh-ink-800);
}
#main-body:not(:has(#order-standard_cart)) table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
  padding-left: 34px;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr > td.dtr-control:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: -2px;
}

/* Displaces: table.dataTable>tbody>tr.child{padding:.5em 1em} and
   tr.child ul.dtr-details>li{border-bottom:1px solid #efefef;padding:.5em 0}
   The expanded row is where the hidden columns live on a phone; it has to read
   as a labelled detail list, tied visually to the row above it. */
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.parent > td {
  border-bottom: 0;
  background: var(--gh-sky-25);
}
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child > td {
  background: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  padding: 0.25rem 0.95rem 0.75rem 34px;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child ul.dtr-details {
  display: block;
  width: 100%;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--gh-line);
  padding: 0.45rem 0;
  font-size: var(--gh-text-sm, 0.8125rem);
}
/* Displaces: tr.child span.dtr-title{display:inline-block;min-width:75px;
   font-weight:700} - the label is metadata, the value is the content. */
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child span.dtr-title {
  flex: 0 0 auto;
  min-width: 96px;
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child span.dtr-data {
  color: var(--gh-ink-900);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* -- 2d. DataTables chrome: search, length, info, pagination ---------------- */

/* The dom string emits pagination BEFORE the length menu. Flex ordering puts
   "showing 10" on the left and the pager on the right, which is the order a
   reader expects, without touching the template. */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
#main-body:not(:has(#order-standard_cart)) .listtable {
  flex: 0 0 100%;
  order: 1;
  min-width: 0;
}
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length {
  order: 2;
  margin-right: auto;
}
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate {
  order: 3;
  margin-left: auto;
  float: none;
}

/* Displaces: .dataTables_wrapper .dataTables_filter{float:right;margin-top:30px;
   width:100%} and .dataTables_filter label{display:block;margin:5px}
   The float plus 30px top margin was compensating for a floated heading that no
   longer exists in this theme, and left a gap above every list. */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter {
  float: none;
  width: 100%;
  max-width: 340px;
  margin: 0 0 1rem 0;
  text-align: left;
}
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter label {
  display: block;
  margin: 0;
  width: 100%;
}
/* [forced] theme.min.css sets `padding:7px 10px 7px 45px!important` on this
   input and pulls a magnifier from ../../../assets/img/search.png, a path that
   does not resolve from this stylesheet's directory. The padding has to be
   re-declared at the same weight, and the icon is inlined so it cannot 404. */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter label .form-control {
  width: 100%;
  margin: 0;
  height: auto;
  min-height: 41px;
  padding: 0.55rem 0.9rem 0.55rem 2.5rem !important;
  font-size: var(--gh-text-sm, 0.8125rem);
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-pill, 999px);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cpath d='M20 20 16.6 16.6'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.9rem center;
}
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter label .form-control:focus {
  border-color: var(--gh-action);
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.15);
}

/* Displaces: div.dataTables_wrapper div.dataTables_info{padding-top:.85em}
   The record count is supporting text, not body copy. */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_info {
  padding: 0 0 0.6rem 0;
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}
/* Displaces: div.dataTables_wrapper div.dataTables_length label{font-weight:400}
   and .dataTables_length select{width:auto;display:inline-block} */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length label {
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length select {
  min-height: 34px;
  padding: 0.25rem 1.6rem 0.25rem 0.7rem;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-pill, 999px);
  background-color: #fff;
  color: var(--gh-ink-900);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
}
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length select:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 1px;
}

/* [forced] all.min.css ends with
   `div.dataTables_wrapper div.dataTables_paginate ul.pagination
    {justify-content:center!important}`, so alignment is the one property here
   that cannot be won on specificity alone. The pager belongs on the right of
   the footer row, opposite the "showing 10 of 24" count. giddyhost-2026.css
   already styles .page-link; what is left is placement and wrapping. */
#main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate ul.pagination {
  margin: 0;
  flex-wrap: wrap;
  white-space: normal;
  justify-content: flex-end !important;
}
/* Focus ring: giddyhost-2026.css restyles .page-link but never gives it one,
   and the pager is fully keyboard driven. */
#main-body:not(:has(#order-standard_cart)) .pagination .page-link:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 2px;
}

/* -- 2e. Overflow container and empty / loading states ---------------------- */

/* .table-container is the template's own wrapper and carries no rules in any
   parent sheet. It is the fallback scroll box for the case DataTables Responsive
   cannot handle: the plugin failing to boot, or a column whose content simply
   cannot shrink (a long domain, a 4-line product name). */
#main-body:not(:has(#order-standard_cart)) .table-container,
#main-body:not(:has(#order-standard_cart)) .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gh-sky-150) transparent;
}
#main-body:not(:has(#order-standard_cart)) .table-container::-webkit-scrollbar,
#main-body:not(:has(#order-standard_cart)) .table-responsive::-webkit-scrollbar {
  height: 8px;
}
#main-body:not(:has(#order-standard_cart)) .table-container::-webkit-scrollbar-thumb,
#main-body:not(:has(#order-standard_cart)) .table-responsive::-webkit-scrollbar-thumb {
  background: var(--gh-sky-150);
  border-radius: var(--gh-radius-pill, 999px);
}

/* Displaces: table.dataTable td.dataTables_empty{text-align:center}
   "No records found" is the first thing a new customer sees on four of these
   pages, so it should look deliberate rather than like a failed query. */
#main-body:not(:has(#order-standard_cart)) table.dataTable td.dataTables_empty {
  padding: 2.75rem 1.25rem;
  background: #fff;
  color: var(--gh-muted);
  font-size: var(--gh-text-base, 0.9375rem);
  font-weight: 600;
  text-align: center;
}
/* The spinner block the templates show until DataTables has drawn. */
#main-body:not(:has(#order-standard_cart)) #tableLoading {
  padding: 2.25rem 1rem;
  color: var(--gh-muted);
  font-size: var(--gh-text-sm, 0.8125rem);
}
#main-body:not(:has(#order-standard_cart)) #tableLoading i {
  color: var(--gh-action);
}

/* Generic (non-DataTables) tables: invoice line items, transactions, markdown
   tables in ticket replies. giddyhost-2026.css styles .table globally; these
   two restate the bottom-border model so a `separate` collapse cannot double up. */
#main-body:not(:has(#order-standard_cart)) .table:not(.table-list) > tbody > tr > td,
#main-body:not(:has(#order-standard_cart)) .table:not(.table-list) > tbody > tr > th {
  border-top: 0;
  border-bottom: 1px solid var(--gh-line);
}
#main-body:not(:has(#order-standard_cart)) .table-sm > tbody > tr > td {
  padding: 0.6rem 0.75rem;
}


/* =============================================================================
   3. BUTTONS, BADGES AND STATUS LABELS
   Status markup is `<span class="label status status-{$class}">`, emitted by
   clientareaproducts, clientareadomains, clientareainvoices, supportticketslist
   and clientareaquotes.
   ========================================================================== */

/* Displaces: .label{border-radius:4px;display:inline;padding:.2em .6em .3em;
   font-size:75%;font-weight:700;color:#fff}
   `display:inline` means the chip cannot hold vertical padding reliably and
   breaks across lines mid-pill. */
#main-body:not(:has(#order-standard_cart)) .label,
#main-body:not(:has(#order-standard_cart)) .label.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.34em 0.8em;
  border-radius: var(--gh-radius-pill, 999px);
  font-family: var(--gh-font);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

/* The status palette. Every one of these displaces a solid Bootstrap-3 fill
   from theme.min.css, quoted per line. Soft ground plus dark ink instead of
   white-on-saturated, because five of the originals (warning orange #f0ad4e,
   info cyan #5bc0de, green #5cb85c, purple #7b4f9d, gold #fc0) do not reach
   4.5:1 against white text. Measured contrast is given for each family. */

/* GOOD: Active / Paid / Completed / Open / Accepted.
   Displaces .status-active,.status-completed,.status-open{background:#5cb85c},
   .status-paid{background:#5cb85c}, .status-accepted{background:#5cb85c}.
   #06603f on #daf4e9 = 8.6:1. Uses --gh-success only for the dot, where it is
   decoration and not text. */
#main-body:not(:has(#order-standard_cart)) .label.status-active,
#main-body:not(:has(#order-standard_cart)) .label.status-completed,
#main-body:not(:has(#order-standard_cart)) .label.status-open,
#main-body:not(:has(#order-standard_cart)) .label.status-paid,
#main-body:not(:has(#order-standard_cart)) .label.status-accepted,
#main-body:not(:has(#order-standard_cart)) .label.status-delivered {
  background: #daf4e9;
  color: #06603f;
  box-shadow: inset 0 0 0 1px rgb(6 96 63 / 0.12);
}

/* BAD: Unpaid / Overdue / Pending / In Progress.
   Displaces .status-pending{background:#d9534f}, .status-unpaid{background:
   #d9534f}, .status-inprogress{background:#c0392b}.
   #8c1a0a on #ffe3de = 8.1:1. WHMCS has no `status-overdue` class of its own -
   an overdue invoice is emitted as status-unpaid - so the selector is included
   for the case a hook adds one. */
#main-body:not(:has(#order-standard_cart)) .label.status-unpaid,
#main-body:not(:has(#order-standard_cart)) .label.status-overdue,
#main-body:not(:has(#order-standard_cart)) .label.status-pending,
#main-body:not(:has(#order-standard_cart)) .label.status-inprogress {
  background: #ffe3de;
  color: #8c1a0a;
  box-shadow: inset 0 0 0 1px rgb(140 26 10 / 0.12);
}

/* CAUTION: Suspended / Grace / Redemption / Refunded / Customer-Reply /
   Pending Transfer / Pending Registration.
   Displaces .status-suspended{background:#f0ad4e}, .status-refunded{background:
   #f0ad4e}, .status-customer-reply{background:#f60}, .status-grace,
   .status-pending-registration,.status-redemption{background:#f60},
   .status-pending-transfer{background:#f0ad4e}, .status-collections{background:
   #2c3e50}, .status-registereduser{...}.
   #6b4a00 on #fdeeca = 8.9:1. */
#main-body:not(:has(#order-standard_cart)) .label.status-suspended,
#main-body:not(:has(#order-standard_cart)) .label.status-grace,
#main-body:not(:has(#order-standard_cart)) .label.status-redemption,
#main-body:not(:has(#order-standard_cart)) .label.status-refunded,
#main-body:not(:has(#order-standard_cart)) .label.status-collections,
#main-body:not(:has(#order-standard_cart)) .label.status-customer-reply,
#main-body:not(:has(#order-standard_cart)) .label.status-pending-transfer,
#main-body:not(:has(#order-standard_cart)) .label.status-pending-registration {
  background: #fdeeca;
  color: #6b4a00;
  box-shadow: inset 0 0 0 1px rgb(107 74 0 / 0.14);
}

/* INFORMATIONAL: Answered / On Hold / Payment Pending.
   Displaces .status-answered{background:#7b4f9d}, .status-onhold{background:
   #369}, .status-payment-pending{background:#369}.
   --gh-deep-800 #0a3569 on --gh-sky-100 #d3e8fd = 9.7:1. --gh-action-dark on
   sky-100 is only 4.1:1, which is why the deep token is used for the text. */
#main-body:not(:has(#order-standard_cart)) .label.status-answered,
#main-body:not(:has(#order-standard_cart)) .label.status-onhold,
#main-body:not(:has(#order-standard_cart)) .label.status-payment-pending {
  background: var(--gh-sky-100);
  color: var(--gh-deep-800);
  box-shadow: inset 0 0 0 1px rgb(10 53 105 / 0.14);
}

/* NEUTRAL / CLOSED: Cancelled / Terminated / Closed / Expired / Transferred
   Away / Draft.
   Displaces .status-terminated{background:#666}, .status-closed,
   .status-cancelled{background:#87939f}, .status-expired,
   .status-transferred-away{background:#004258}.
   --gh-muted #5b6b82 on --gh-sky-25 #eef6ff = 4.98:1, just over AA. */
#main-body:not(:has(#order-standard_cart)) .label.status-cancelled,
#main-body:not(:has(#order-standard_cart)) .label.status-terminated,
#main-body:not(:has(#order-standard_cart)) .label.status-closed,
#main-body:not(:has(#order-standard_cart)) .label.status-expired,
#main-body:not(:has(#order-standard_cart)) .label.status-transferred-away,
#main-body:not(:has(#order-standard_cart)) .label.status-draft {
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  box-shadow: inset 0 0 0 1px var(--gh-line);
}

/* SEVERE: Fraud / Dead / Lost. Displaces .status-fraud{background:#000} and
   .status-dead,.status-lost{background:#000}. Kept as the only filled chip,
   because it is the only status that must stop the reader. White on
   --gh-ink-900 = 18:1. */
#main-body:not(:has(#order-standard_cart)) .label.status-fraud,
#main-body:not(:has(#order-standard_cart)) .label.status-dead,
#main-body:not(:has(#order-standard_cart)) .label.status-lost {
  background: var(--gh-ink-900);
  color: #fff;
}

/* supportticketslist.tpl emits `status-custom` with an inline
   background-color chosen by an admin. Only the shape is claimed here - the
   fill stays whatever the admin picked, and the text stays white as the parent
   theme had it. Contrast on that pairing is outside this stylesheet's control. */
#main-body:not(:has(#order-standard_cart)) .label.status-custom {
  color: #fff;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.25);
}

/* Displaces: .label-default{background:#666}, .label-success{background:#5cb85c},
   .label-info{background:#5bc0de}, .label-warning{background:#f0ad4e},
   .label-danger{background:#d9534f}. Used by the dashboard services widget. */
#main-body:not(:has(#order-standard_cart)) .label-success {
  background: #daf4e9;
  color: #06603f;
}
#main-body:not(:has(#order-standard_cart)) .label-danger {
  background: #ffe3de;
  color: #8c1a0a;
}
#main-body:not(:has(#order-standard_cart)) .label-warning {
  background: #fdeeca;
  color: #6b4a00;
}
#main-body:not(:has(#order-standard_cart)) .label-info {
  background: var(--gh-sky-100);
  color: var(--gh-deep-800);
}
#main-body:not(:has(#order-standard_cart)) .label-default {
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  box-shadow: inset 0 0 0 1px var(--gh-line);
}

/* Displaces: .div-service-status .label{color:#fff;display:inline-block} and
   .div-service-status .label:not(.label-placeholder){width:3rem}
   The fixed 3rem truncates "Suspended" to three characters. The width becomes a
   floor instead of a cap, so the reserved column still holds but the word
   survives. `.label-placeholder` is position:absolute, so nothing reflows. */
#main-body:not(:has(#order-standard_cart)) .div-service-status .label:not(.label-placeholder) {
  width: auto;
  min-width: 3rem;
  max-width: 100%;
  color: inherit;
  line-height: 1.5;
}

/* Bootstrap badges used as counters in panels and nav. Displaces
   .badge-secondary / .badge-light defaults; giddyhost-2026.css already handles
   .badge-success / -warning / -danger, so only the bare `.badge` is set here. */
#main-body:not(:has(#order-standard_cart)) .badge:not([class*="badge-"]) {
  background: var(--gh-sky-100);
  color: var(--gh-deep-800);
  border-radius: var(--gh-radius-pill, 999px);
  font-weight: 700;
  font-size: var(--gh-text-xs, 0.6875rem);
  padding: 0.35em 0.7em;
}

/* Button groups: the bulk-action bar on clientareadomains and the print/pay
   pair on viewinvoice. giddyhost-2026.css squares the inner edges of a pill
   group; on a phone the group has to be allowed to wrap instead. */
#main-body:not(:has(#order-standard_cart)) .btn-group,
#main-body:not(:has(#order-standard_cart)) .btn-group-sm {
  flex-wrap: wrap;
  gap: 0;
}
#main-body:not(:has(#order-standard_cart)) .btn-group > .btn i,
#main-body:not(:has(#order-standard_cart)) .btn i {
  margin-right: 0.35rem;
}
/* Displaces: .btn-xs - a Bootstrap 3 size with no Bootstrap 4 rule, used for
   the "Order New" style buttons in the dashboard card headers. */
#main-body:not(:has(#order-standard_cart)) .btn-xs {
  padding: 0.4rem 0.85rem;
  font-size: var(--gh-text-xs, 0.6875rem);
  border-radius: var(--gh-radius-pill, 999px);
  line-height: 1.4;
}
/* Displaces: .dropdown-menu default Bootstrap chrome on the bulk-action and
   per-service action menus. */
#main-body:not(:has(#order-standard_cart)) .dropdown-menu {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius, 16px);
  box-shadow: var(--gh-shadow-float);
  padding: 0.4rem;
  font-size: var(--gh-text-sm, 0.8125rem);
}
#main-body:not(:has(#order-standard_cart)) .dropdown-item {
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  color: var(--gh-ink-800);
  font-weight: 600;
}
#main-body:not(:has(#order-standard_cart)) .dropdown-item:hover,
#main-body:not(:has(#order-standard_cart)) .dropdown-item:focus {
  background: var(--gh-sky-25);
  color: var(--gh-action-dark);
}
#main-body:not(:has(#order-standard_cart)) .dropdown-item.disabled {
  color: #a4b6cb;
  background: transparent;
}


/* =============================================================================
   4. FORMS, INPUTS, SELECTS, FILE UPLOADS, VALIDATION
   giddyhost-2026.css covers .form-control, .custom-select and .input-group.
   What is missing is the label grid WHMCS uses, checkboxes and radios, the
   Bootstrap custom file input, and the validation states.
   ========================================================================== */

/* Displaces: .col-form-label / .control-label defaults. clientareadetails.tpl
   and clientareaproductdetails.tpl lay fields out as `.form-group.row` with a
   `col-xl-4 col-form-label`, so the label is a column and needs to sit on the
   field's optical baseline. */
#main-body:not(:has(#order-standard_cart)) .form-group.row > .col-form-label {
  padding-top: 0.6rem;
  color: var(--gh-ink-800);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
#main-body:not(:has(#order-standard_cart)) .form-group.row {
  align-items: flex-start;
}

/* A required-field marker is the only red in a quiet form, so it must not read
   as an error that has already happened. */
#main-body:not(:has(#order-standard_cart)) label .text-danger,
#main-body:not(:has(#order-standard_cart)) .col-form-label .text-danger {
  color: var(--gh-danger);
  font-weight: 700;
}

/* Displaces: .custom-select default caret. The native caret is drawn by the OS
   and clashes with a pill field, so it is replaced with a token-coloured one. */
#main-body:not(:has(#order-standard_cart)) select.form-control,
#main-body:not(:has(#order-standard_cart)) .custom-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9 12 15 18 9'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

/* Checkboxes and radios: Bootstrap 4 leaves these to the OS, which renders a
   grey square that does not belong next to a pill field. */
#main-body:not(:has(#order-standard_cart)) .form-check-input,
#main-body:not(:has(#order-standard_cart)) input[type="checkbox"],
#main-body:not(:has(#order-standard_cart)) input[type="radio"] {
  accent-color: var(--gh-action);
  width: 16px;
  height: 16px;
}
#main-body:not(:has(#order-standard_cart)) .form-check-input:focus-visible,
#main-body:not(:has(#order-standard_cart)) input[type="checkbox"]:focus-visible,
#main-body:not(:has(#order-standard_cart)) input[type="radio"]:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 2px;
}
#main-body:not(:has(#order-standard_cart)) .form-check-label,
#main-body:not(:has(#order-standard_cart)) .controls.form-check label {
  font-size: var(--gh-text-sm, 0.8125rem);
  font-weight: 500;
  color: var(--gh-ink-700);
}

/* -- File upload -----------------------------------------------------------
   Displaces: .custom-file{height:calc(1.5em + .75rem + 2px)},
   .custom-file-label{padding:.375rem .75rem;border:1px solid #ced4da;
   border-radius:.25rem} and
   .custom-file-label::after{background-color:#e9ecef;border-radius:0 .25rem .25rem 0}
   Used by viewticket.tpl and supportticketsubmit-steptwo.tpl. The default is a
   grey "Browse" slab that looks nothing like the rest of the form. */
#main-body:not(:has(#order-standard_cart)) .custom-file,
#main-body:not(:has(#order-standard_cart)) .custom-file-input,
#main-body:not(:has(#order-standard_cart)) .custom-file-label {
  height: 41px;
}
#main-body:not(:has(#order-standard_cart)) .custom-file-label {
  display: flex;
  align-items: center;
  padding: 0 0.95rem;
  border: 1px dashed var(--gh-line);
  border-radius: var(--gh-radius-field, 12px);
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  font-size: var(--gh-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
}
#main-body:not(:has(#order-standard_cart)) .custom-file-label::after {
  display: flex;
  align-items: center;
  height: 39px;
  padding: 0 1.1rem;
  background: #fff;
  border-left: 1px solid var(--gh-line);
  border-radius: 0 var(--gh-radius-field, 12px) var(--gh-radius-field, 12px) 0;
  color: var(--gh-action-dark);
  font-weight: 700;
}
#main-body:not(:has(#order-standard_cart)) .custom-file:hover .custom-file-label {
  border-color: var(--gh-sky-150);
  background: var(--gh-sky-50);
}
/* Displaces: .custom-file-input:focus~.custom-file-label{border-color:#79a6d2;
   box-shadow:0 0 0 .2rem rgba(51,102,153,.25)} - the input itself is
   opacity:0, so this is the only visible focus state a keyboard user gets. */
#main-body:not(:has(#order-standard_cart)) .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--gh-action);
  border-style: solid;
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.15);
}
/* Each extra attachment row from #btnTicketAttachmentsAdd. */
#main-body:not(:has(#order-standard_cart)) .attachment-group {
  margin-bottom: 0.5rem;
}

/* -- Validation ------------------------------------------------------------
   Displaces: .custom-file-input.is-invalid~.custom-file-label{border-color:
   #dc3545}, .invalid-tooltip{background-color:rgba(220,53,69,.9)},
   .valid-tooltip{background-color:rgba(40,167,69,.9)} and
   .form-control.is-valid{border-color:#28a745}. Bootstrap's semantic red and
   green are the last two off-palette colours in the forms. */
#main-body:not(:has(#order-standard_cart)) .form-control.is-invalid,
#main-body:not(:has(#order-standard_cart)) .custom-select.is-invalid,
#main-body:not(:has(#order-standard_cart)) .custom-file-input.is-invalid ~ .custom-file-label,
#main-body:not(:has(#order-standard_cart)) .has-error .form-control {
  border-color: var(--gh-danger);
  background-image: none;
}
#main-body:not(:has(#order-standard_cart)) .form-control.is-invalid:focus,
#main-body:not(:has(#order-standard_cart)) .has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgb(253 48 20 / 0.18);
}
#main-body:not(:has(#order-standard_cart)) .form-control.is-valid,
#main-body:not(:has(#order-standard_cart)) .custom-select.is-valid {
  border-color: var(--gh-success, #22b07d);
  background-image: none;
}
#main-body:not(:has(#order-standard_cart)) .form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgb(34 176 125 / 0.2);
}
/* #8c1a0a on white = 9.3:1; the 4.5:1 floor rules out --gh-danger as text. */
#main-body:not(:has(#order-standard_cart)) .invalid-feedback,
#main-body:not(:has(#order-standard_cart)) .help-block {
  color: #8c1a0a;
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}
#main-body:not(:has(#order-standard_cart)) .valid-feedback {
  color: #06603f;
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}
/* Displaces: .invalid-tooltip / .valid-tooltip{border-radius:.25rem} and
   form[data-role=json-form] .has-error .tooltip-inner{background-color:#9d2a0b} */
#main-body:not(:has(#order-standard_cart)) .invalid-tooltip {
  background: #8c1a0a;
  border-radius: 10px;
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
  box-shadow: var(--gh-shadow-float);
}
#main-body:not(:has(#order-standard_cart)) .valid-tooltip {
  background: #06603f;
  border-radius: 10px;
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}

/* The password generator and strength meter (includes/generate-password.tpl,
   includes/pwstrength.tpl) sit inside clientareadetails and user-password. */
#main-body:not(:has(#order-standard_cart)) .progress {
  height: 6px;
  border-radius: var(--gh-radius-pill, 999px);
  background: var(--gh-sky-50);
  box-shadow: none;
}
#main-body:not(:has(#order-standard_cart)) .progress-bar {
  border-radius: var(--gh-radius-pill, 999px);
}


/* =============================================================================
   5. SUPPORT TICKETS
   viewticket.tpl markup:
     .card.view-ticket > .card-body (one per reply)
        > .ticket-reply.markdown-content[.staff]
           > .posted-by > .posted-by-name + .posted-on
                        + .label.requestor-badge.requestor-type-{type}
           > .message
           > .attachments > .attachment-list
   ========================================================================== */

/* Displaces: .view-ticket .card-body{padding:0;border-bottom:1px solid #ddd}
   Each reply is a band in one card; the separator should be the card hairline. */
#main-body:not(:has(#order-standard_cart)) .view-ticket .card-body {
  border-bottom: 1px solid var(--gh-line);
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .card-body:last-child {
  border-bottom: 0;
}

/* The distinction that matters most on this page is "did a human from support
   write this, or did I". A 3px rail plus a tinted meta bar carries it without
   a second background colour for the message body. */
#main-body:not(:has(#order-standard_cart)) .ticket-reply {
  border-left: 3px solid var(--gh-line);
}
#main-body:not(:has(#order-standard_cart)) .ticket-reply.staff {
  border-left-color: var(--gh-action);
  background: linear-gradient(90deg, rgb(11 137 220 / 0.04), rgb(11 137 220 / 0) 220px);
}

/* Displaces: .view-ticket .posted-by{color:#888;font-size:.9rem;
   background-color:#f6f6f6;padding:.5rem 1rem}
   #f6f6f6 is the only warm grey left in the client area. */
#main-body:not(:has(#order-standard_cart)) .view-ticket .posted-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  background: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
  padding: 0.6rem 1rem;
}
#main-body:not(:has(#order-standard_cart)) .ticket-reply.staff .posted-by {
  background: var(--gh-sky-50);
}
/* Displaces: .view-ticket .posted-by .posted-by-name{font-weight:700} */
#main-body:not(:has(#order-standard_cart)) .view-ticket .posted-by .posted-by-name {
  color: var(--gh-ink-900);
  font-size: var(--gh-text-sm, 0.8125rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .posted-by .posted-on {
  color: var(--gh-muted);
}
/* `float-md-right` is on the badge in the template; margin-left:auto puts it on
   the right in the flex row at every width, including phones. */
#main-body:not(:has(#order-standard_cart)) .view-ticket .posted-by .requestor-badge {
  float: none;
  margin-left: auto;
}

/* Displaces: .view-ticket .requestor-badge{font-size:85%;padding:5px 10px},
   .requestor-type-operator{background:#5bc0de},
   .requestor-type-owner{background:#5cb85c},
   .requestor-type-registereduser{background:#f0ad4e},
   .requestor-type-authorizeduser,.requestor-type-subaccount{background:#666},
   .requestor-type-guest{background:#87939f}
   Five colours for "who wrote this" is four too many. Staff is the only one the
   customer needs to pick out, so it is the only filled chip. */
#main-body:not(:has(#order-standard_cart)) .requestor-badge {
  padding: 0.3em 0.75em;
  font-size: var(--gh-text-xs, 0.6875rem);
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  box-shadow: inset 0 0 0 1px var(--gh-line);
}
#main-body:not(:has(#order-standard_cart)) .requestor-badge.requestor-type-operator {
  background: var(--gh-action);
  color: #fff;
  box-shadow: none;
}
#main-body:not(:has(#order-standard_cart)) .requestor-badge.requestor-type-owner {
  background: var(--gh-sky-100);
  color: var(--gh-deep-800);
  box-shadow: none;
}

/* Displaces: .view-ticket .message p:last-child{margin-bottom:0} - the reply
   body is the longest prose in the client area, so it gets a reading measure
   and the prose line height rather than the 15px UI default. */
#main-body:not(:has(#order-standard_cart)) .view-ticket .message {
  color: var(--gh-ink-700);
  font-size: var(--gh-text-base, 0.9375rem);
  line-height: 1.7;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .message > p {
  max-width: 72ch;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .message hr {
  border-top: 1px solid var(--gh-line);
  margin: 1rem 0 0.6rem;
}
/* Displaces: .markdown-content pre{padding:15px;background-color:#444;
   color:#f8f8f8} and .markdown-content blockquote{border-left:5px solid #eee}
   Support replies routinely paste config blocks and error logs. */
#main-body:not(:has(#order-standard_cart)) .markdown-content pre {
  background: var(--gh-ink-900);
  color: #e6f2ff;
  border-radius: var(--gh-radius, 16px);
  padding: 1rem 1.1rem;
  font-size: var(--gh-text-sm, 0.8125rem);
  overflow-x: auto;
}
#main-body:not(:has(#order-standard_cart)) .markdown-content code {
  background: var(--gh-sky-50);
  color: var(--gh-deep-800);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  font-size: 0.92em;
}
#main-body:not(:has(#order-standard_cart)) .markdown-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
#main-body:not(:has(#order-standard_cart)) .markdown-content blockquote {
  border-left: 3px solid var(--gh-sky-150);
  background: var(--gh-sky-25);
  border-radius: 0 var(--gh-radius, 16px) var(--gh-radius, 16px) 0;
  color: var(--gh-ink-700);
  margin: 0 0 1rem;
  padding: 0.8rem 1.1rem;
}
/* Displaces: .markdown-content h1..h4{color:#333} */
#main-body:not(:has(#order-standard_cart)) .markdown-content h1,
#main-body:not(:has(#order-standard_cart)) .markdown-content h2,
#main-body:not(:has(#order-standard_cart)) .markdown-content h3,
#main-body:not(:has(#order-standard_cart)) .markdown-content h4 {
  color: var(--gh-ink-900);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* Displaces: .markdown-content table{border:1px solid #ddd} and
   .markdown-content table>thead>tr>th{background-color:#f8f8f8;border:1px solid #ddd} */
#main-body:not(:has(#order-standard_cart)) .markdown-content table {
  border: 1px solid var(--gh-line);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  max-width: 100%;
}
#main-body:not(:has(#order-standard_cart)) .markdown-content table > thead > tr > th {
  background: var(--gh-sky-25);
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) .markdown-content table > tbody > tr > td {
  border: 0;
  border-bottom: 1px solid var(--gh-line);
}

/* Displaces: .view-ticket .attachments{border-top:1px dashed #ddd;font-size:80%},
   .view-ticket .attachment-list li{width:190px} and
   .attachment-list li span{border:1px solid #ddd;border-radius:3px} and
   .attachment-list li figure{background-color:#f6f6f6;line-height:100px;
   font-size:4em}
   A 100px-tall grey icon block per file is a lot of furniture for a filename;
   a compact chip row says the same thing and survives 390px. */
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachments {
  border-top: 1px solid var(--gh-line);
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.7rem 0 0 0;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li {
  width: auto;
  max-width: 100%;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.8rem;
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-pill, 999px);
  color: var(--gh-ink-800);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li a:hover span {
  border-color: var(--gh-action);
  color: var(--gh-action-dark);
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li a:focus-visible span {
  outline: 2px solid var(--gh-action);
  outline-offset: 2px;
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li figure {
  margin: 0;
  background: transparent;
  line-height: 1;
  font-size: 1rem;
  color: var(--gh-action);
}
#main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li .caption {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Displaces: .ticket-reply .rating span.star:before{color:#999} and
   .rating span.star:hover:before,.rating-done span.star.active:before
   {color:#f2de88}. #f2de88 on white is 1.4:1 - a rating control the customer
   cannot see. */
#main-body:not(:has(#order-standard_cart)) .ticket-reply .rating span.star:before,
#main-body:not(:has(#order-standard_cart)) .ticket-reply .rating-done span.star:before {
  color: var(--gh-sky-150);
}
#main-body:not(:has(#order-standard_cart)) .ticket-reply .rating span.star:hover:before,
#main-body:not(:has(#order-standard_cart)) .ticket-reply .rating span.star:hover ~ span.star:before,
#main-body:not(:has(#order-standard_cart)) .ticket-reply .rating-done span.star.active:before {
  color: #e8a704;
}
#main-body:not(:has(#order-standard_cart)) .ticket-reply .rating-done .rated {
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
}

/* [forced] custom.css line ~11600 declares
     #frmSubmitTicket .form-control:focus,
     form[action*="submitticket"] .form-control:focus
     { border-color:#25b9e8 !important; background:#fff !important;
       box-shadow:0 0 0 4px rgba(26, 176, 247,.14) !important;
       outline:none !important }
   giddyhost-2026.css already restyles this same selector, but without
   !important, so it loses: the ticket form is still the one place in the client
   area that focuses to the retired cyan, and the outline is removed outright.
   All four properties therefore have to be restated at the same weight, and the
   removed outline is replaced by the ring rather than simply dropped. */
#main-body:not(:has(#order-standard_cart)) #frmSubmitTicket .form-control:focus,
#main-body:not(:has(#order-standard_cart)) form[action*="submitticket"] .form-control:focus,
#main-body:not(:has(#order-standard_cart)) #frmReply .form-control:focus {
  border-color: var(--gh-action) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.18) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px;
}

/* The reply composer. The actions sit centred in the template; on a phone they
   have to stack full width or they wrap into a ragged pair. */
#main-body:not(:has(#order-standard_cart)) #ticketReplyContainer .card-title {
  font-size: var(--gh-text-lg, 1.0625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gh-ink-900);
}
/* The ticket header actions ("Reply" / "Close") are a float in the template, so
   they need a gap of their own rather than inherited word spacing. */
#main-body:not(:has(#order-standard_cart)) .view-ticket .ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Displaces: .btn-danger on #closeTicket. Closing a ticket is reversible and
   routine; a solid red button overstates it. */
#main-body:not(:has(#order-standard_cart)) #closeTicket.btn-danger,
#main-body:not(:has(#order-standard_cart)) #closedTicket.btn-danger {
  background: #fff;
  background-image: none;
  border: 1px solid #f3c1b8;
  color: #8c1a0a;
}
#main-body:not(:has(#order-standard_cart)) #closeTicket.btn-danger:hover {
  background: #ffe3de;
  border-color: #e9a094;
  color: #8c1a0a;
}


/* =============================================================================
   6. INVOICES
   viewinvoice.tpl is styled by templates/twenty-one/css/invoice.min.css, which
   is loaded only on this page.
   ========================================================================== */

/* Displaces: .invoice-container{margin:15px auto;padding:70px;max-width:850px;
   background-color:#fff;border:1px solid #ccc;border-radius:6px}
   70px of padding on a 390px screen leaves 250px of usable width. The padding
   becomes responsive in section 9. */
#main-body:not(:has(#order-standard_cart)) .invoice-container {
  margin: 0 auto 1.5rem;
  padding: 2.75rem;
  max-width: 900px;
  background: #fff;
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg, 24px);
  box-shadow: var(--gh-shadow-card);
}
#main-body:not(:has(#order-standard_cart)) .invoice-header {
  align-items: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gh-line);
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-header img {
  max-height: 44px;
  width: auto;
}
/* Displaces: .invoice-col{padding-right:15px;padding-left:15px} and
   .invoice-col.right{float:right}. The float leaves the two address blocks on
   different baselines once one of them wraps. */
#main-body:not(:has(#order-standard_cart)) .invoice-col.right {
  float: none;
}
/* Displaces: .invoice-container .small-text{font-size:.9em} - the addresses and
   payment-method line are supporting text at the 13px step. */
#main-body:not(:has(#order-standard_cart)) .invoice-container .small-text,
#main-body:not(:has(#order-standard_cart)) .invoice-container address {
  font-size: var(--gh-text-sm, 0.8125rem);
  line-height: 1.65;
  color: var(--gh-ink-700);
  font-style: normal;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container h1,
#main-body:not(:has(#order-standard_cart)) .invoice-container h2,
#main-body:not(:has(#order-standard_cart)) .invoice-container h3 {
  color: var(--gh-ink-900);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Displaces: .invoice-container .invoice-status{margin:20px 0 0;
   text-transform:uppercase;font-size:24px;font-weight:700} together with
   .draft{color:#888} .unpaid{color:#c00} .paid{color:#779500}
   .refunded{color:#248} .cancelled{color:#888} .collections{color:#fc0}
   #779500 olive and #fc0 gold are both off-palette, and #fc0 on white is
   1.7:1 - the single most important word on the page, unreadable. Rendered as
   a chip at 22px so it still dominates the header block. */
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status {
  margin: 0.75rem 0 0;
  font-size: var(--gh-text-2xl, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3em 0.9em;
  border-radius: var(--gh-radius-pill, 999px);
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--gh-radius-pill, 999px);
  background: currentColor;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span.paid {
  background: #daf4e9;
  color: #06603f;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span.unpaid {
  background: #ffe3de;
  color: #8c1a0a;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span.refunded,
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span.collections {
  background: #fdeeca;
  color: #6b4a00;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span.draft,
#main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span.cancelled {
  background: var(--gh-sky-25);
  color: var(--gh-muted);
  box-shadow: inset 0 0 0 1px var(--gh-line);
}

/* Displaces: .invoice-container .payment-btn-container{margin-top:5px;
   text-align:center}. Paying is the only thing this page exists for, so the
   gateway button block gets room and the pay button is never a bare link. */
#main-body:not(:has(#order-standard_cart)) .invoice-container .payment-btn-container {
  margin-top: 1rem;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .payment-btn-container input[type="submit"],
#main-body:not(:has(#order-standard_cart)) .invoice-container .payment-btn-container button {
  background-image: var(--gh-btn-grad, linear-gradient(180deg, #1ab0f7 0%, #0b89dc 55%, #0776c4 100%));
  border: 0;
  border-radius: var(--gh-radius-pill, 999px);
  color: #fff;
  font-family: var(--gh-font);
  font-size: var(--gh-text-sm, 0.8125rem);
  font-weight: 700;
  padding: 0.8rem 1.8rem;
  box-shadow: var(--gh-shadow-float);
  cursor: pointer;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .payment-btn-container input[type="submit"]:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 2px;
}

/* Displaces: .invoice-container td.total-row{background-color:#f8f8f8} and
   .invoice-summary-table td.total-row{background-color:#efefef;font-weight:700}
   The totals block is the answer to the question the page asks, so it gets the
   tinted ground and the last row gets ink weight. */
#main-body:not(:has(#order-standard_cart)) .invoice-container td.total-row {
  background: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink-800);
  font-weight: 700;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container tbody tr:last-child td.total-row {
  background: var(--gh-sky-50);
  color: var(--gh-ink-900);
  font-size: var(--gh-text-lg, 1.0625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  border-bottom: 0;
}
/* Displaces: .invoice-container td.no-line{border:0} */
#main-body:not(:has(#order-standard_cart)) .invoice-container td.no-line {
  border: 0;
  background: transparent;
}
#main-body:not(:has(#order-standard_cart)) .invoice-container .table > thead td,
#main-body:not(:has(#order-standard_cart)) .invoice-container .table > thead th {
  background: var(--gh-sky-25);
  border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink-900);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#main-body:not(:has(#order-standard_cart)) .transactions-container {
  border-radius: var(--gh-radius, 16px);
  overflow: hidden;
}

/* Print and download are secondary to paying, so they stay outline pills. */
#main-body:not(:has(#order-standard_cart)) .invoice-container + .btn-group .btn,
#main-body:not(:has(#order-standard_cart)) .invoice-container ~ .btn-group .btn {
  background: #fff;
  border: 1px solid var(--gh-line);
  color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) .invoice-qr-wrapper img {
  max-width: 140px;
  height: auto;
}

/* A printed invoice should not carry the screen's shadows, tints or rounding. */
@media print {
  #main-body:not(:has(#order-standard_cart)) .invoice-container {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-container td.total-row,
  #main-body:not(:has(#order-standard_cart)) .invoice-container .table > thead td {
    background: transparent;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status > span {
    background: transparent;
    padding: 0;
  }
}


/* =============================================================================
   7. ALERTS, EMPTY STATES, MODALS, TOOLTIPS, BREADCRUMBS, TABS
   ========================================================================== */

/* includes/alert.tpl puts an <h2> inside the alert, which inherits the page
   heading size and dwarfs the message under it. */
#main-body:not(:has(#order-standard_cart)) .alert h2 {
  font-size: var(--gh-text-base, 0.9375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
  color: inherit;
}
/* The error variant renders `<strong> + <ul>`; the list needs to sit under the
   heading rather than at the browser's default 40px indent. */
#main-body:not(:has(#order-standard_cart)) .alert ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}
#main-body:not(:has(#order-standard_cart)) .alert ul li + li {
  margin-top: 0.25rem;
}
/* includes/flashmessage.tpl and the dashboard alerts are full-bleed inside the
   container; keeping them on the card rhythm stops the page looking segmented. */
#main-body:not(:has(#order-standard_cart)) .alert {
  border-radius: var(--gh-radius, 16px);
}

/* Displaces: .breadcrumb{padding:.75rem 1rem;background-color:#e9ecef;
   border-radius:.25rem}. giddyhost-2026.css only neutralises the breadcrumb
   inside .master-breadcrumb; knowledgebase and announcement pages render a
   second, in-content breadcrumb that still carries the grey slab. */
#main-body:not(:has(#order-standard_cart)) .breadcrumb {
  background: transparent;
  border-radius: 0;
  padding: 0 0 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gh-line);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}
#main-body:not(:has(#order-standard_cart)) .breadcrumb-item {
  color: var(--gh-muted);
}
#main-body:not(:has(#order-standard_cart)) .breadcrumb-item a {
  color: var(--gh-action-dark);
}
#main-body:not(:has(#order-standard_cart)) .breadcrumb-item.active {
  color: var(--gh-ink-900);
  font-weight: 700;
}
/* Displaces: .breadcrumb-item+.breadcrumb-item::before{content:"/";color:#6c757d} */
#main-body:not(:has(#order-standard_cart)) .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  color: #9db4cd;
}

/* Displaces: .tooltip-inner{max-width:200px;padding:.25rem .5rem;
   background-color:#000;border-radius:.25rem} and the six
   .bs-tooltip-* .arrow::before rules that set border-*-color:#000.
   Tooltips carry the SSL state on every services and domains row, so they are
   real content here, not decoration. */
#main-body:not(:has(#order-standard_cart)) .tooltip-inner {
  max-width: 260px;
  padding: 0.5rem 0.75rem;
  background: var(--gh-ink-900);
  border-radius: 10px;
  box-shadow: var(--gh-shadow-float);
  font-family: var(--gh-font);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
  line-height: 1.45;
}
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-top .arrow::before,
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-bottom .arrow::before,
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-left .arrow::before,
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-right .arrow::before,
#main-body:not(:has(#order-standard_cart)) .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--gh-ink-900);
}
#main-body:not(:has(#order-standard_cart)) .tooltip.show {
  opacity: 1;
}
#main-body:not(:has(#order-standard_cart)) .popover {
  border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius, 16px);
  box-shadow: var(--gh-shadow-float);
  font-family: var(--gh-font);
  font-size: var(--gh-text-sm, 0.8125rem);
}

/* Tabs. Displaces .nav-tabs defaults for the two places WHMCS uses them inside
   the client area: clientareadomains (.tab-content) and clientareaproductdetails
   (.nav.nav-tabs.responsive-tabs-sm). giddyhost-2026.css styles .nav-tabs
   globally; these add the container relationship the product page needs. */
#main-body:not(:has(#order-standard_cart)) .product-details-tab-container,
#main-body:not(:has(#order-standard_cart)) .tab-content.bg-white {
  background: #fff;
  border: 1px solid var(--gh-line);
  border-top: 0;
  border-radius: 0 0 var(--gh-radius-lg, 24px) var(--gh-radius-lg, 24px);
  padding: 1.5rem;
}
#main-body:not(:has(#order-standard_cart)) .nav-tabs.responsive-tabs-sm {
  border-bottom: 1px solid var(--gh-line);
  background: #fff;
  border: 1px solid var(--gh-line);
  border-bottom: 0;
  border-radius: var(--gh-radius-lg, 24px) var(--gh-radius-lg, 24px) 0 0;
  padding: 0.4rem 0.6rem 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
#main-body:not(:has(#order-standard_cart)) .nav-tabs.responsive-tabs-sm::-webkit-scrollbar {
  display: none;
}
#main-body:not(:has(#order-standard_cart)) .nav-tabs .nav-link {
  white-space: nowrap;
}
#main-body:not(:has(#order-standard_cart)) .nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: -2px;
  border-radius: 10px 10px 0 0;
}

/* Modals. includes/modal.tpl and includes/confirmation.tpl. giddyhost-2026.css
   styles .modal-content; the footer buttons and the backdrop are still default. */
#main-body:not(:has(#order-standard_cart)) .modal-footer .btn + .btn {
  margin-left: 0;
}
#main-body:not(:has(#order-standard_cart)) .modal-footer {
  flex-wrap: wrap;
}


/* =============================================================================
   8. DASHBOARD - STAT TILES AND PANEL CARDS
   clientareahome.tpl. giddyhost-2026.css already covers .tiles .tile and
   .client-home-cards. What is left is the active-services widget that
   includes/active-products-services-item.tpl renders inside one of those cards.
   ========================================================================== */

/* A tile is an <a> that is the only route to four of the client-area sections,
   and neither theme.min.css nor custom.css ever gives it a focus state.
   custom.css marks the tile's colour and geometry important but never its
   outline, so plain declarations are enough here. */
#main-body:not(:has(#order-standard_cart)) .tiles .tile:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 2px;
}

/* Displaces: nothing - .div-service-item has no rule in any parent sheet, so
   the rows in "Your Active Products/Services" render as unspaced text. */
#main-body:not(:has(#order-standard_cart)) .div-service-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--gh-line);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
#main-body:not(:has(#order-standard_cart)) .div-service-item:last-child {
  border-bottom: 0;
}
#main-body:not(:has(#order-standard_cart)) .div-service-item:hover {
  background: var(--gh-sky-25);
}
#main-body:not(:has(#order-standard_cart)) .div-service-status {
  flex: 0 0 auto;
}
#main-body:not(:has(#order-standard_cart)) .div-service-name {
  flex: 1 1 200px;
  min-width: 0;
  font-size: var(--gh-text-sm, 0.8125rem);
  color: var(--gh-ink-900);
  overflow-wrap: anywhere;
}
#main-body:not(:has(#order-standard_cart)) .div-service-name .text-domain {
  display: block;
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 600;
}
#main-body:not(:has(#order-standard_cart)) .div-service-buttons {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* The circular "view details" affordance at the end of each service row. */
#main-body:not(:has(#order-standard_cart)) .btn-view-details {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gh-radius-pill, 999px);
  color: var(--gh-action);
}
#main-body:not(:has(#order-standard_cart)) .btn-view-details i {
  margin: 0;
}

/* Product details page. .product-icon and .product-status-text carry no rules
   in the parent sheets, so the status line renders at body weight. */
#main-body:not(:has(#order-standard_cart)) .product-icon {
  color: var(--gh-action);
  font-size: 2rem;
  margin-bottom: 0.6rem;
}
#main-body:not(:has(#order-standard_cart)) .product-status-text {
  color: var(--gh-muted);
  font-size: var(--gh-text-xs, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#main-body:not(:has(#order-standard_cart)) .product-details .bottom-border {
  border-bottom: 1px solid var(--gh-line);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
#main-body:not(:has(#order-standard_cart)) .product-actions-wrapper {
  gap: 0.5rem;
  row-gap: 0.5rem;
}


/* =============================================================================
   9. RESPONSIVE
   Reasoned at 390px (iPhone 14/15), 820px (iPad portrait, the width where
   Bootstrap's col-md sidebar stacks) and 1440px (desktop, container capped at
   1200px by giddyhost-2026.css so only rhythm changes).
   ========================================================================== */

/* 1440px and wider: the content column is already capped, so the only change is
   giving the big list tables more breathing room than the phone padding. */
@media (min-width: 1200px) {
  #main-body:not(:has(#order-standard_cart)) table.table-list tbody td {
    padding: 0.95rem 1.1rem;
  }
  #main-body:not(:has(#order-standard_cart)) table.table-list thead th {
    padding: 0.85rem 1.1rem;
  }
}

/* 820px - the sidebar has stacked above the content, so the filter field and
   the pager are competing for a full-width row rather than a narrow column. */
@media (max-width: 991.98px) {
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter {
    max-width: none;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-container {
    padding: 2rem;
  }
  #main-body:not(:has(#order-standard_cart)) .sidebar.sidebar-primary .card-sidebar {
    margin-bottom: 0.9rem;
  }
  /* The ticket header actions stop being a float once the card is full width. */
  #main-body:not(:has(#order-standard_cart)) .view-ticket .ticket-actions {
    float: none;
    margin-top: 0.75rem;
  }
}

/* 390px - the width everything below is aimed at. */
@media (max-width: 767.98px) {
  /* Cards lose the large radius: a 24px corner on a 358px card eats the
     content inset. */
  #main-body:not(:has(#order-standard_cart)) > .container > .row > div > .card,
  #main-body:not(:has(#order-standard_cart)) .primary-content > .card,
  #main-body:not(:has(#order-standard_cart)) .client-home-cards .card,
  #main-body:not(:has(#order-standard_cart)) .card.view-ticket,
  #main-body:not(:has(#order-standard_cart)) #ticketReplyContainer,
  #main-body:not(:has(#order-standard_cart)) .card.bg-default {
    border-radius: 16px;
  }
  #main-body:not(:has(#order-standard_cart)) .card > .card-header:first-child {
    border-radius: 15px 15px 0 0;
  }
  #main-body:not(:has(#order-standard_cart)) .card > .card-footer:last-child {
    border-radius: 0 0 15px 15px;
  }

  /* Tables. DataTables Responsive has collapsed most columns into the child
     row by now, so the visible cells get tighter padding and the header micro-
     label drops a step rather than wrapping to two lines. */
  #main-body:not(:has(#order-standard_cart)) table.table-list {
    border-radius: 14px;
  }
  #main-body:not(:has(#order-standard_cart)) table.table-list thead th {
    padding: 0.65rem 0.7rem;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  #main-body:not(:has(#order-standard_cart)) table.table-list tbody td {
    padding: 0.7rem;
  }
  #main-body:not(:has(#order-standard_cart)) table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 30px;
  }
  #main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child > td {
    padding-left: 30px;
  }
  /* Label above value: at 390px a 96px label column plus a domain name on one
     line guarantees a horizontal scroll. */
  #main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child ul.dtr-details > li {
    flex-direction: column;
    gap: 0.15rem;
  }
  #main-body:not(:has(#order-standard_cart)) table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 0;
  }

  /* Filter, info, length and pager each take the full width and stack. */
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper {
    gap: 0.6rem;
  }
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length,
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate {
    flex: 0 0 100%;
    margin: 0;
  }
  /* [forced] same all.min.css rule as above; on one full-width row the pager
     centres instead. */
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate ul.pagination {
    justify-content: center !important;
  }
  /* A ten-page pager will not fit; shrinking the touch target is worse than
     letting it wrap, so it wraps and each control keeps a 38px hit area. */
  #main-body:not(:has(#order-standard_cart)) .pagination .page-item .page-link {
    min-width: 38px;
    padding: 9px 11px;
  }
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length label {
    justify-content: center;
  }

  /* Invoice. 70px of stock padding becomes 1.1rem, and the header columns stop
     sitting side by side. */
  #main-body:not(:has(#order-standard_cart)) .invoice-container {
    padding: 1.1rem;
    border-radius: 16px;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-col {
    padding-left: 0;
    padding-right: 0;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-header {
    text-align: center;
    gap: 0.75rem;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-container .invoice-status {
    font-size: var(--gh-text-lg, 1.0625rem);
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-container .payment-btn-container input[type="submit"],
  #main-body:not(:has(#order-standard_cart)) .invoice-container .payment-btn-container button {
    width: 100%;
  }
  #main-body:not(:has(#order-standard_cart)) .invoice-container .table-responsive .table {
    min-width: 420px;
  }

  /* Tickets. The meta bar wraps to two lines, so the badge stops being pushed
     to a right edge that no longer exists. */
  #main-body:not(:has(#order-standard_cart)) .view-ticket .posted-by .requestor-badge {
    margin-left: 0;
  }
  #main-body:not(:has(#order-standard_cart)) .view-ticket .message {
    font-size: var(--gh-text-sm, 0.8125rem);
  }
  #main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li,
  #main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li span {
    width: 100%;
  }
  #main-body:not(:has(#order-standard_cart)) .view-ticket .attachment-list li .caption {
    max-width: none;
    flex: 1 1 auto;
  }
  #main-body:not(:has(#order-standard_cart)) .view-ticket .ticket-actions .btn,
  #main-body:not(:has(#order-standard_cart)) #frmReply .form-group.text-center .btn,
  #main-body:not(:has(#order-standard_cart)) #frmReply .form-group.text-center input.btn {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Displaces: .ticket-reply .rating,.rating-done{float:right;font-size:24px} -
     a 24px floated star row overlaps the reply text at this width. */
  #main-body:not(:has(#order-standard_cart)) .ticket-reply .rating,
  #main-body:not(:has(#order-standard_cart)) .ticket-reply .rating-done {
    float: none;
    padding-left: 0;
    font-size: 20px;
  }

  /* Bulk actions on the domains list become a full-width stack rather than a
     four-button group squeezed into 358px. */
  #main-body:not(:has(#order-standard_cart)) #domainForm .btn-group.mb-3 {
    width: 100%;
    gap: 0.4rem;
  }
  #main-body:not(:has(#order-standard_cart)) #domainForm .btn-group.mb-3 > .btn,
  #main-body:not(:has(#order-standard_cart)) #domainForm .btn-group.mb-3 > .btn-group {
    flex: 1 1 calc(50% - 0.2rem);
    border-radius: var(--gh-radius-pill, 999px);
    margin-left: 0;
  }
  #main-body:not(:has(#order-standard_cart)) #domainForm .btn-group.mb-3 > .btn-group > .btn {
    width: 100%;
    border-radius: var(--gh-radius-pill, 999px);
  }

  /* Field label above field on the row-layout forms. */
  #main-body:not(:has(#order-standard_cart)) .form-group.row > .col-form-label {
    padding-top: 0;
    padding-bottom: 0.3rem;
  }

  /* Dashboard service rows: the action buttons drop to their own line. */
  #main-body:not(:has(#order-standard_cart)) .div-service-buttons {
    margin-left: 0;
    width: 100%;
  }
  #main-body:not(:has(#order-standard_cart)) .product-details-tab-container,
  #main-body:not(:has(#order-standard_cart)) .tab-content.bg-white {
    padding: 1rem;
  }
}

/* Narrow phones. The filter input and the length select are the two controls
   that still overflow at 360px. */
@media (max-width: 400px) {
  #main-body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter label .form-control {
    font-size: 12px;
  }
  #main-body:not(:has(#order-standard_cart)) .pagination .page-item .page-link {
    min-width: 34px;
    padding: 8px 9px;
    font-size: 12px;
  }
  #main-body:not(:has(#order-standard_cart)) .label,
  #main-body:not(:has(#order-standard_cart)) .label.status {
    font-size: 10px;
    padding: 0.3em 0.65em;
  }
}


/* =============================================================================
   10. ACCESSIBILITY BACKSTOP
   Every outline removed above is replaced in the same block. This is the
   catch-all for the controls WHMCS generates that none of the sections name.
   ========================================================================== */

#main-body:not(:has(#order-standard_cart)) a:focus-visible,
#main-body:not(:has(#order-standard_cart)) button:focus-visible,
#main-body:not(:has(#order-standard_cart)) [role="button"]:focus-visible,
#main-body:not(:has(#order-standard_cart)) summary:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 2px;
  border-radius: 6px;
}
#main-body:not(:has(#order-standard_cart)) .form-control:focus-visible,
#main-body:not(:has(#order-standard_cart)) .custom-select:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: 1px;
}
/* .list-group-item is an <a> in both the sidebar and the dashboard panels, and
   the hover treatment alone is not a focus state. */
#main-body:not(:has(#order-standard_cart)) .list-group-item:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}
/* Bootstrap's .sr-only is used for the icon-only buttons in the services
   widget; make sure nothing above reintroduces it into the layout. */
#main-body:not(:has(#order-standard_cart)) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* Long invoice numbers, domains and e-mail addresses must wrap rather than
   push the table wider than the phone. */
#main-body:not(:has(#order-standard_cart)) table.table-list tbody td,
#main-body:not(:has(#order-standard_cart)) .invoice-container td,
#main-body:not(:has(#order-standard_cart)) .view-ticket .message {
  overflow-wrap: anywhere;
}


/* ==========================================================================
   [forced] Gradient DIRECTION on three client-area surfaces
   ==========================================================================
   custom.css paints these three with a 135deg diagonal gradient !important.
   The colours are correct now - the retired cyan was removed from that file -
   but every button this theme draws runs --gh-btn-grad top-to-bottom, so a
   diagonal one sitting in the same card reads as a different component.

   `!important` here only matches the `!important` it displaces, and the
   originals are quoted above each block. When custom.css is eventually
   retired in favour of this sheet, all of this can go. Scoped like the rest
   of the section so the order form, which has its own sheet, is untouched. */

/* Displaces: .announcements .announcement .btn.btn-default{background:
   linear-gradient(135deg,...)!important} */
#main-body:not(:has(#order-standard_cart)) .announcements .announcement .btn.btn-default {
  background: var(--gh-btn-grad) !important;
  box-shadow: var(--gh-btn-shadow);
}
#main-body:not(:has(#order-standard_cart)) .announcements .announcement .btn.btn-default:hover,
#main-body:not(:has(#order-standard_cart)) .announcements .announcement .btn.btn-default:focus {
  background: var(--gh-btn-grad-hover) !important;
  box-shadow: var(--gh-btn-shadow-hover);
}

/* The 64x4px heading rule stays horizontal - --gh-btn-grad runs top-to-bottom
   and would read as a flat band at 4px tall. */
#main-body:not(:has(#order-standard_cart)) .announcements .header-lined h1::after,
#main-body:not(:has(#order-standard_cart)) .header-lined h1::after {
  background: linear-gradient(90deg, var(--gh-brand-500) 0%, var(--gh-action-dark) 100%) !important;
}

/* Displaces: .pagination .page-item.active .page-link{background:
   linear-gradient(135deg,...)!important} */
#main-body:not(:has(#order-standard_cart)) .pagination .page-item.active .page-link {
  background: var(--gh-btn-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* The knowledgebase search button, same reason. */
#main-body:not(:has(#order-standard_cart)) .kb-search .btn-primary,
#main-body:not(:has(#order-standard_cart)) .kb-search #btnKnowledgebaseSearch {
  background: var(--gh-btn-grad) !important;
}
#main-body:not(:has(#order-standard_cart)) .kb-search .btn-primary:hover,
#main-body:not(:has(#order-standard_cart)) .kb-search #btnKnowledgebaseSearch:hover {
  background: var(--gh-btn-grad-hover) !important;
}


/* --- Focus ring on a control that lives inside an .input-group ------------
   The blanket `.form-control:focus-visible` outline above is right for a
   standalone field and wrong for a grouped one. An .input-group is one visual
   control - icon addon, field, and sometimes a trailing button, sharing a
   single rounded shape - but the outline is drawn at the INPUT's own 12px
   radius, so it curves around the field alone and cuts straight across the
   addon. The login form rendered as two concentric blue rings with the icon
   box pinched between them.

   Chrome matches :focus-visible on text inputs on a plain mouse click, not
   just keyboard focus, so this was on every customer's screen - it is not a
   keyboard-only edge case.

   The ring moves to the group, via :has(:focus-visible) rather than
   :focus-within so it keeps the same keyboard-intent semantics the blanket
   rule has. The group, not the field, is what gets outlined. */
#main-body:not(:has(#order-standard_cart)) .input-group .form-control:focus-visible,
#main-body:not(:has(#order-standard_cart)) .input-group .custom-select:focus-visible {
  outline: none;
}
/* The ring itself is a border tint plus a soft halo rather than an outline,
   because the login form already indicates focus that way and an outline drawn
   on top of it produced two concentric rings. Groups elsewhere in the client
   area have no border of their own; there the halo alone carries the state. */
#main-body:not(:has(#order-standard_cart)) .input-group:has(.form-control:focus-visible),
#main-body:not(:has(#order-standard_cart)) .input-group:has(.custom-select:focus-visible) {
  border-color: var(--gh-action);
  box-shadow: 0 0 0 3px rgb(11 137 220 / 0.18);
}


/* The renewal line under the introductory price on the login campaign panel.
   Quieter than the headline figure but still legible on the blue panel - the
   point is that a visitor reads both numbers, not just the small one. */
.campaign-offer-card .offer-renew {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.72);
}


/* --- the collapse chevron is an 11x10px tap target ------------------------
   gh-chevron-hit. WHMCS renders `.card-minimise` as a bare icon and binds the
   collapse handler to it, so on a phone the only way to open a sidebar card
   was to hit eleven pixels. footer.tpl now forwards a tap anywhere on the
   header, and this gives the icon itself a 44px box so a direct tap works too.
   The negative margin keeps the header's height unchanged. */
#main-body .card-sidebar > .card-header .card-minimise {
  padding: 16px;
  margin: -16px -12px -16px -16px;
  box-sizing: content-box;
}
/* The header is a control now (role="button" from footer.tpl), so it shows it. */
#main-body .card-sidebar > .card-header {
  cursor: pointer;
  user-select: none;
}
#main-body .card-sidebar > .card-header:focus-visible {
  outline: 2px solid var(--gh-action);
  outline-offset: -2px;
}