/* ==========================================================================
   Xnet — Netheimur design system applied to WHMCS "six" template
   Loaded automatically by six/includes/header.tpl after the parent theme's
   own stylesheet, so every rule below only needs to override Bootstrap 4 /
   six defaults — it does not need to reimplement layout from scratch.

   Source of truth for the design tokens/components: /netheimur-design-system.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Backgrounds — from darkest to lightest, used for section alternation */
  --navy-950: #0a1830;
  --navy-900: #11253f;
  --navy-800: #17324f;
  --navy-700: #204365;
  --navy-600: #2a5378;
  --line: rgba(255, 255, 255, 0.08);

  /* Accent trio */
  --teal: #14b8a6;
  --teal-dark: #2dd4bf;
  --teal-light: #2dd4bf;
  --cyan: #39c5f2;
  --green: #34e0a1;

  /* Text */
  --white: #ffffff;
  --text: #eef3f9;
  --text-muted: #a9bad0;
  --text-faint: #7d90aa;
  --surface-light: #1f3a57;
  --ink: #ffffff;
  --ink-muted: #55647a;

  /* Type */
  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Shape */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-soft: 0 20px 60px rgba(3, 10, 22, 0.45);

  /* Measured heights, kept in sync by js/custom.js. #header (logo + utility
     bar) and #main-menu (the Home/Store/... nav) are two separate fixed
     sections in six's markup, stacked via --topbar-height; --header-height
     is both combined, used to offset page content below them. */
  --topbar-height: 58px;
  --header-height: 116px;
}

/* ==========================================================================
   1. Base / typography
   ========================================================================== */

/* six sets html { font-size: 10px } (its own px-based CSS is calibrated to
   that, e.g. "1.4rem" meaning 14px) — every rem value THIS theme uses
   (buttons, dropdowns, form fields, hero/section headings) was sized
   assuming the normal 16px root, so it was all rendering at 62.5% of the
   intended size. This is the actual fix for "everything is small" — six's
   own CSS barely uses rem (two declarations total), so overriding the root
   back to 16px doesn't disturb it. */
html {
  font-size: 16px !important;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background: var(--navy-950) !important;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
}

a {
  color: var(--teal-light);
  transition: color 0.15s ease;
}
a:hover,
a:focus {
  color: var(--cyan);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  color: var(--white);
}

/* six wraps every interior page's title in <div class="header-lined"> (the
   Login page included) and hardcodes div.header-lined h1 { color: #058 },
   which the <small> description inherits — near-invisible dark blue on
   this theme's dark navy background. */
div.header-lined h1 {
  color: var(--white) !important;
  border-bottom-color: var(--line) !important;
}
div.header-lined h1 small {
  color: var(--text-muted) !important;
}
div.header-lined .breadcrumb {
  background: transparent !important;
}
div.header-lined .breadcrumb li a {
  color: var(--text-muted) !important;
}
div.header-lined .breadcrumb > .active {
  color: var(--teal-light) !important;
}

p {
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-faint) !important;
}

hr {
  border-color: var(--line);
}

.eyebrow,
.section-eyebrow {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--teal-light);
  margin-bottom: 0.6em;
}

.accent-text {
  background: linear-gradient(90deg, #2dd4bf 0%, #39c5f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

::selection {
  background: var(--teal);
  color: #06201c;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ==========================================================================
   2. Layout / sections
   ========================================================================== */
.container,
.container-fluid {
  max-width: 1180px;
}

/* six hardcodes light-mode backgrounds directly on these ID'd <section>
   elements (section#main-body #fff, section#main-menu #006687) — real
   selectors this time, confirmed against a live install, not the
   #content-wrapper/.body-container/main ones six doesn't actually have.
   !important is required: six's rules match by id, same or higher
   specificity than a plain #id selector without it. #footer gets the same
   treatment in section 11 below (it needs a gradient, not plain
   transparent); body's own dark background is set separately above — not
   repeated here, since a later same-specificity !important rule would win
   and make it transparent instead. */
#header,
#main-menu,
#main-body,
.main-content,
.sidebar,
.homepage-panel {
  background-color: transparent !important;
}

.section,
.homepage-panel,
.panel-group + .panel-group {
  padding: 90px 0;
}

.section-head,
.homepage-panel-heading {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-head h2,
.homepage-panel-heading h2 {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
}

/* ==========================================================================
   3. Header / navbar — fixed, transparent, blurs in on scroll

   six renders the header as TWO separate, independently-flowing sections,
   not one combined Bootstrap navbar:
     <section id="header">    — slim utility bar: logo + language/login/cart
     <section id="main-menu"> — <nav class="navbar navbar-default"> with the
                                 actual Home/Store/... menu (Bootstrap 3
                                 markup: .navbar-nav > li > a, .navbar-toggle,
                                 no .nav-link / .navbar-brand / .dropdown-item)
   Both are pinned with position:fixed and stacked via --topbar-height,
   which js/custom.js measures from #header's own rendered height, so
   #main-menu always sits directly under it instead of on top of it.
   ========================================================================== */

#header,
#main-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1030;
  width: 100%;
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease, top 0.25s ease;
}

#header {
  top: 0;
  padding: 18px 0;
  background: transparent !important;
}

/* Utility bar (language/login/register/cart) — six: ul.top-nav > li > a {
   color:#777 }, hover/focus #333. More specific than the sitewide `a`
   colour rule (type+class+type+type vs a plain type selector), so it wins
   without !important needed here. */
ul.top-nav > li > a {
  color: var(--text-muted);
}
ul.top-nav > li:hover > a,
ul.top-nav > li:focus > a,
ul.top-nav > li > a:focus {
  color: var(--teal-light);
}
ul.top-nav > li.primary-action {
  border-left-color: var(--line);
}

#main-menu {
  top: var(--topbar-height);
}

#main-menu .navbar,
#main-menu .navbar-main {
  margin: 0;
  min-height: 0;
  padding: 14px 0;
  background: transparent !important;
  border: none;
  box-shadow: none;
  font-size: 1rem;
}

/* six's own css/all.css sets a hardcoded teal .navbar-main { background-color:
   #0e5077 } and a per-item dark navy hover/active fill — both need an
   explicit override, since they target that exact class rather than the
   shared .navbar one above. */
#main-menu .navbar-main li.account {
  background: transparent !important;
}

html.is-scrolled #header {
  background: rgba(10, 24, 48, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 0;
}

html.is-scrolled #main-menu .navbar,
html.is-scrolled #main-menu .navbar-main {
  background: rgba(10, 24, 48, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

/* Company logo — six renders either <a class="logo"><img></a>, or, with no
   logo uploaded in General Settings, a text fallback
   <a class="logo logo-text">{$companyname}</a>. WHMCS only has one "Company
   Logo" setting, reused for the header *and* PDF invoices *and* emails —
   and invoices/emails render on a plain white page, so that single upload
   should stay your normal DARK/colour logo. The rule below derives a light
   (solid white) version of it automatically for the header via a CSS
   filter, so no second upload is required. */
#header .logo {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  color: var(--white) !important;
}

#header .logo img {
  max-height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Better-fidelity alternative for multi-colour logos: hand-author a real
   light/white logo file instead of relying on the CSS-derived silhouette
   above. Drop it at templates/xnet/img/logo-light.svg (or .png), then
   delete the `filter` line above and uncomment the rule below. */
/*
#header .logo img {
  content: url('../img/logo-light.svg');
}
*/

/* To go back to the original white-patch + unmodified (dark/colour) logo
   treatment instead, delete the `filter` rule above and use this one: */
/*
#header .logo {
  padding: 6px 10px;
  background: #ffffff;
  border-radius: var(--radius-sm);
}
#header .logo img {
  filter: none;
}
*/

/* Primary + secondary menu — six: <ul class="nav navbar-nav"><li><a>, with
   no .nav-link class on the links themselves. */
#main-menu .navbar-nav > li > a {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  color: var(--text) !important;
}

#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li > a:focus,
#main-menu .navbar-nav > li.active > a,
#main-menu .navbar-nav > li.active > a:hover,
#main-menu .navbar-nav > li.active > a:focus {
  color: var(--teal-light) !important;
  background: transparent !important;
}

.navbar-toggle {
  border-color: var(--line);
  margin-top: 0;
}
.navbar-toggle .icon-bar {
  background-color: var(--white);
}
.navbar-toggle:hover,
.navbar-toggle:focus {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-menu {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 8px;
}

.dropdown-menu > li > a {
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  font-size: 1rem !important;
  padding: 10px 14px;
  background: transparent !important;
}

/* !important: six's own css/all.css has a more specific
   .navbar-main .dropdown-menu > li > a:hover rule (fills #006687 blue)
   for the header's dropdowns specifically. */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--white) !important;
}

.dropdown-menu .divider {
  background-color: var(--line);
}

/* Cart / notification / account badges in the six navbar */
#header .badge,
#main-menu .badge {
  background: var(--teal);
  color: #06201c;
}

/* ==========================================================================
   4. Hero / page-header banners (order pages, homepage, top of client area)
   ========================================================================== */

.hero,
.page-header,
.homepage-header,
.masthead {
  position: relative;
  padding: 168px 0 110px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 15% 0%, #163a5c 0%, var(--navy-950) 55%);
  border: none;
}

.hero h1,
.page-header h1,
.homepage-header h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 0.3em;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem !important;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary,
.btn-success,
.btn-main-color,
a.btn-primary {
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%) !important;
  color: #06201c !important;
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.35);
}
.btn-primary:hover,
.btn-success:hover,
.btn-main-color:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(20, 184, 166, 0.45);
  color: #06201c !important;
}

.btn-secondary,
.btn-default,
.btn-outline-secondary,
.btn-light {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}

.btn-danger {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3);
}
.btn-danger:hover {
  transform: translateY(-2px);
}

.btn-lg { padding: 15px 30px; font-size: 1.15rem !important; }
.btn-sm { padding: 10px 18px; font-size: 0.92rem !important; gap: 6px; border-radius: 999px; }
/* Never defined before — used e.g. by clientareahome.tpl's per-widget-item
   action buttons (class="btn btn-default bg-color-... btn-xs"), which were
   falling back to the full 12px 22px pill padding with nothing to shrink
   them, since only .btn-lg/.btn-sm existed here. */
.btn-xs { padding: 3px 10px; font-size: 0.75rem !important; gap: 4px; border-radius: 999px; }

/* Rows like the client-area active-service list (active-products-services-item.tpl)
   place several separate .btn-group's plus a standalone .btn side by side
   inline — with no explicit vertical-align they default to baseline, which
   drifts noticeably when one group is icon-only (a caret, no text baseline
   to align against) and its neighbour has a text label. */
.btn,
.btn-group,
.btn-group-vertical {
  vertical-align: middle;
}

/* The actual cause: Bootstrap's whole grouping mechanism (corner-radius
   squaring, the -1px shared-border overlap) is built on
   ".btn-group > .btn { float: left }" laying out as a floated inline-block.
   Our .btn rule above forces display:inline-flex onto every button
   unconditionally, so a grouped button becomes a floated flex container
   instead — a different box model than that math was built for, which is
   what was actually misaligning/offsetting them (vertical-align was a
   symptom fix, not this). Let grouped buttons keep Bootstrap's own display. */
.btn-group > .btn,
.btn-group-vertical > .btn,
.input-group-btn > .btn {
  display: inline-block;
}

/* Same root cause, different symptom: the base .btn padding (12px 22px) is
   sized for a standalone pill CTA (hero buttons, Checkout) — Bootstrap's
   grouped/attached-button contexts expect its own compact native padding so
   a button's height lines up with its siblings (the adjacent input in an
   input-group, the other buttons in a btn-group). The oversized padding was
   making these taller than what they're flush/joined against, reading as
   offset. Reset to Bootstrap's own .btn-group/.input-group-btn sizing. */
.btn-group > .btn,
.btn-group-vertical > .btn,
.input-group-btn > .btn {
  padding: 6px 12px;
}
.btn-group > .btn.btn-sm,
.btn-group-vertical > .btn.btn-sm,
.input-group-btn > .btn.btn-sm {
  padding: 5px 10px;
}

/* Buttons that double as Bootstrap grid columns (e.g. .btn.col-xs-6, used
   for side-by-side "Greiða allt / ..." action pairs) or .btn-block —
   narrow half-columns in a sidebar panel don't leave room for our .btn's
   fixed horizontal padding plus its inherited white-space:nowrap, so text
   was clipping instead of wrapping. */
.btn[class*="col-xs-"],
.btn[class*="col-sm-"],
.btn.btn-block {
  white-space: normal !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: center;
  line-height: 1.3;
}

/* ==========================================================================
   6. Cards / panels — diagonal gradient fill + sheen-on-hover
   ========================================================================== */

.card,
.panel,
.pricing-table,
.product-listing,
.list-group-item,
.homepage-panel .card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 20px rgba(20, 38, 62, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  color: var(--text) !important;
}

/* The overflow:hidden above (needed to clip the diagonal hover-sheen below
   to the card's rounded corners) also clips any Bootstrap .dropdown-menu
   nested inside one of these — e.g. the caret-only dropdown-toggle in the
   active-services row — cutting it off/hiding it wherever it extends past
   the card edge, regardless of z-index. Relax it only for cards that
   actually contain a dropdown; every other card keeps the clipped sheen. */
.card:has(.dropdown-menu),
.panel:has(.dropdown-menu),
.pricing-table:has(.dropdown-menu),
.product-listing:has(.dropdown-menu),
.list-group-item:has(.dropdown-menu) {
  overflow: visible;
}

/* six's own .list-group-item default (~#555 grey) otherwise wins on
   hover/focus too since it's an <a>, not just the resting state. */
.list-group-item:hover,
.list-group-item:focus {
  color: var(--white) !important;
}

/* Active-services row dropdown (the caret-toggle menu fixed above) — its
   items are <li class="dropdown-item"> directly, no nested <a>, so the
   generic .dropdown-menu > li > a fix doesn't reach them. six scopes a
   separate, more specific rule just to this widget. */
.div-service-item .dropdown-menu li {
  color: var(--text) !important;
}
.div-service-item .dropdown-menu > li:hover,
.div-service-item .dropdown-menu > li:focus {
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.div-service-item .dropdown-menu > li:active {
  color: var(--white) !important;
  background: var(--teal) !important;
}

.card::before,
.panel::before,
.pricing-table::before {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, 0.06) 50%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card:hover,
.panel:hover,
.pricing-table:hover {
  transform: translateY(-6px);
  border-color: rgba(20, 184, 166, 0.4) !important;
  box-shadow: 0 26px 48px rgba(20, 38, 62, 0.22), 0 10px 20px rgba(20, 38, 62, 0.14);
}
.card:hover::before,
.panel:hover::before,
.pricing-table:hover::before {
  opacity: 1;
}

.card-header,
.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--white) !important;
}

/* six's own css/all.css sets .panel-sidebar .panel-title { color: #555 }
   (and .panel-title itself just inherits from .panel-heading), both more
   specific than the generic heading rule above. */
.panel-title,
.panel-title > a {
  color: var(--white) !important;
}

.card-body,
.panel-body {
  padding: 30px 26px;
  background: transparent !important;
}

.card-footer,
.panel-footer {
  background: transparent !important;
  border-top: 1px solid var(--line) !important;
}

.icon-tile {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-teal  { background: rgba(20, 184, 166, 0.14); color: var(--teal); }
.icon-cyan  { background: rgba(57, 197, 242, 0.14); color: var(--cyan); }
.icon-green { background: rgba(52, 224, 161, 0.14); color: var(--green); }

/* Brand / partner / payment-gateway logos always sit on a white patch */
.logo-tile,
.payment-logo,
.gateway-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border-radius: var(--radius-md);
  padding: 10px 18px;
}
.logo-tile img,
.payment-logo img,
.gateway-logo img {
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"] {
  padding: 13px 16px;
  height: auto;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--white) !important;
  font-family: var(--font-body);
  font-size: 1rem !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.form-control::placeholder {
  color: var(--text-faint);
}

/* The closed <select> picks up the dark background/white text above, but
   browsers render the open dropdown's <option> list separately and don't
   inherit it — left unstyled, that list falls back to native white-on-white
   (e.g. the currency picker). Setting background/color directly on <option>
   is the one thing that reliably reaches it across Chrome/Firefox/Edge. */
select option {
  background: var(--navy-800);
  color: var(--white);
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--teal) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.input-group-text {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--text-muted);
}

.form-check-input:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}

/* Native checkboxes/radios (six's login "remember me" etc. are plain
   <input type="checkbox">, not Bootstrap 4's .form-check-input) — recolour
   via accent-color rather than trying to fully re-skin them. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--teal);
}

/* Browser autofill (near-certain on a login form) otherwise forces a stark
   white input background that `background` alone can't override. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px var(--navy-800) inset !important;
  box-shadow: 0 0 0 1000px var(--navy-800) inset !important;
  border-color: var(--line) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ==========================================================================
   8. Tables (invoices, order summaries, product tables)
   ========================================================================== */

.table {
  color: var(--text);
}
.table thead th {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
  border-top: none;
}
.table td,
.table th {
  border-color: var(--line);
  vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02);
}
.table-hover tbody tr:hover {
  background: rgba(20, 184, 166, 0.06);
}

/* Invoices/tickets/etc. lists (table.table-list, e.g. #tableInvoicesList)
   are additionally enhanced client-side into a DataTable, and six hardcodes
   white row/header backgrounds specifically for that combination
   (.table-list thead th, .table-list > tbody > tr > td), which the generic
   .table rule above doesn't reach — white bg + our own white .table text
   made these fully unreadable. */
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
  background: var(--navy-800) !important;
  color: var(--text-faint) !important;
  border-bottom-color: var(--teal) !important;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background: var(--navy-700) !important;
}
.table-list > tbody > tr > td {
  background: var(--navy-900) !important;
  color: var(--text) !important;
}
.table-list > tbody > tr:nth-child(even) > td {
  background: var(--navy-800) !important;
}
.table-list > tbody > tr > td a.border-left {
  border-left-color: var(--line) !important;
}

/* DataTables' own length/filter/pagination controls around the table */
.dataTables_wrapper .dataTables_length {
  background: transparent !important;
  color: var(--text-faint) !important;
}
.dataTables_wrapper .dataTables_info {
  background: var(--navy-800) !important;
  border-bottom-color: var(--line) !important;
  color: var(--text-faint) !important;
}
.dataTables_wrapper .dataTables_filter label .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
}
.pagination > li > a,
.pagination > li > span {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #06201c !important;
}

/* ==========================================================================
   9. Alerts / badges / status labels
   ========================================================================== */

.alert {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--navy-800);
  color: var(--text);
}
.alert-success { border-color: rgba(52, 224, 161, 0.4); }
.alert-danger,
.alert-warning { border-color: rgba(244, 63, 94, 0.4); }
.alert-info { border-color: rgba(57, 197, 242, 0.4); }

.badge {
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  padding: 5px 10px;
}
.badge-success,
.badge-paid { background: rgba(52, 224, 161, 0.16); color: var(--green); }
.badge-danger,
.badge-overdue,
.badge-unpaid { background: rgba(244, 63, 94, 0.16); color: #fb7185; }
.badge-warning,
.badge-pending { background: rgba(57, 197, 242, 0.16); color: var(--cyan); }
.badge-secondary,
.badge-cancelled { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }

/* ==========================================================================
   10. Pagination / breadcrumbs / modals
   ========================================================================== */

.pagination .page-link {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.pagination .page-item.active .page-link {
  background: var(--teal);
  border-color: var(--teal);
  color: #06201c;
}
.pagination .page-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

.breadcrumb {
  background: transparent;
  padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-faint);
}
.breadcrumb-item.active {
  color: var(--text-faint);
}

.modal-content {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.modal-header,
.modal-footer {
  border-color: var(--line);
}
.modal-backdrop.show {
  opacity: 0.75;
  background: var(--navy-950);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

/* Hidden per request — six's real #footer markup is just a one-line
   copyright notice + back-to-top button, not the bigger footer (CTA
   section, link columns) the rules below were designed for. Scoped to the
   #footer id specifically, not the bare footer tag/.footer class below —
   those also match other <footer> elements on the page (e.g. the product
   card's price/button footer), which should stay visible. */
#footer {
  display: none !important;
}

#footer,
.footer,
footer {
  position: relative;
  padding: 110px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-950) 70%) !important;
  border-top: none !important;
  color: var(--text-muted) !important;
}

#footer a,
.footer a,
footer a {
  color: var(--text-muted);
}
#footer a:hover,
.footer a:hover,
footer a:hover {
  color: var(--teal-light);
}

.footer-cta {
  text-align: center;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 60px;
}

.footer-bottom,
.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ==========================================================================
   12. Logo marquee (optional — "trusted by" strips added via custom pages)
   ========================================================================== */

.logo-marquee { background: #ffffff; overflow: hidden; padding: 40px 0; }
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
}
.logo-marquee-track.is-ready { animation: xnetLogoMarquee 140s linear infinite; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-item img {
  max-height: 50px;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.25s ease;
}
a.logo-marquee-item:hover img { filter: grayscale(0) opacity(1); }
@keyframes xnetLogoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   13. Cart / checkout (order forms/standard_cart's own stylesheet)

   Cart/checkout pages load a THIRD stylesheet on top of six's own —
   /templates/orderforms/standard_cart/css/all.css — which hardcodes its own
   set of light backgrounds (.order-summary, .summary-container, the promo
   code tabs/box) at #order-standard_cart-scoped specificity, same pattern
   as six's core CSS.
   ========================================================================== */

/* Product listing cards (store category pages, e.g. /store/thjonusta).
   header still had six's own light-grey title strip (#f8f8f8) inside the
   now-dark card — a two-tone mismatch — and the card's own border was still
   the light-mode #ddd left over from six's original rule. */
#order-standard_cart .products .product {
  padding: 1px 0 10px 0;
  margin: 0 0 20px 0;
  background: var(--surface-light) !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--line) !important;
}
#order-standard_cart .products .product header {
  background: transparent !important;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  float: none;
  clear: both;
  width: 100%;
}
#order-standard_cart .products .product header span {
  color: var(--white) !important;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#order-standard_cart .products .product header .qty {
  color: var(--text-faint) !important;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
#order-standard_cart .products .product .product-pricing,
#order-standard_cart .products .product .product-pricing .price {
  background: none !important;
}

/* six floats the description left (60%) and the price/order-button footer
   right (40%), side by side. Stack them instead: full-width description,
   then full-width footer (price + button) underneath it. */
#order-standard_cart .products .product div.product-desc {
  float: none !important;
  width: 100% !important;
}
/* This is a literal <footer> element, so it was also picking up the
   site-wide page-footer styling below (section 11) — that rule targets the
   bare footer tag, not just #footer — hence the 110px top padding and the
   diagonal navy gradient bleeding into this small per-product footer. */
#order-standard_cart .products .product footer {
  float: none !important;
  clear: both;
  width: 100% !important;
  margin: 10px 0 0;
  padding: 0 !important;
  background: none !important;
  position: static !important;
  overflow: visible !important;
  text-align: center;
}

#order-standard_cart .order-summary {
  background: var(--navy-800) !important;
  border-bottom: none !important;
}
#order-standard_cart .order-summary h2 {
  color: var(--white) !important;
}
#order-standard_cart .summary-container {
  background: var(--navy-900) !important;
  color: var(--text) !important;
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals {
  border-color: var(--line) !important;
}
#order-standard_cart .order-summary .recurring-charges {
  color: var(--text-faint) !important;
}
#order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--text) !important;
}
#order-standard_cart .order-summary .btn-continue-shopping:hover {
  color: var(--white) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs > li > a {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li > a:hover {
  color: var(--white) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:hover,
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:focus,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
  color: var(--white) !important;
  background: var(--navy-800) !important;
  border-color: var(--line) var(--line) var(--navy-800) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
  background: var(--navy-800) !important;
  color: var(--text) !important;
}
#order-standard_cart .view-cart-promotion-code {
  background: var(--navy-800) !important;
  border: 1px dashed var(--line) !important;
}
#order-standard_cart .view-cart-gateway-checkout {
  background: var(--navy-800) !important;
}

/* Cart line items list (the "Product/Options | Price/Cycle" rows on
   cart.php?a=view) — six hardcodes white/light-grey striping and a flat
   #058 blue header for these, all sized for a white page. */
#order-standard_cart .view-cart-items-header {
  background: var(--navy-700) !important;
  color: var(--white) !important;
}
#order-standard_cart .view-cart-items {
  border-bottom: 2px solid var(--teal) !important;
}
#order-standard_cart .view-cart-items .item {
  background: var(--navy-900) !important;
  color: var(--text) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
  background: var(--navy-800) !important;
}
#order-standard_cart .view-cart-items .item-domain {
  color: var(--teal-light) !important;
}
#order-standard_cart .btn-remove-from-cart {
  color: var(--text-faint) !important;
}
#order-standard_cart .btn-remove-from-cart:hover {
  color: #fb7185 !important;
}
#order-standard_cart .empty-cart .btn {
  background: var(--navy-700) !important;
  color: var(--white) !important;
}

/* Domain registration step — "register this domain / use existing /
   register later" option rows, availability messages, transfer-eligibility
   notices, and the product-configuration header strip all hardcode light
   greys sized for a white page. */
#order-standard_cart .domain-selection-options .option {
  background: var(--navy-800) !important;
}
#order-standard_cart .domain-selection-options .option-selected {
  background: rgba(20, 184, 166, 0.12) !important;
  box-shadow: inset 0 0 0 1px var(--teal);
}
#order-standard_cart .domain-checker-available {
  color: var(--green) !important;
}
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
  color: #fb7185 !important;
}
#order-standard_cart .transfer-eligible {
  color: var(--green) !important;
  background: rgba(52, 224, 161, 0.1) !important;
  border-color: rgba(52, 224, 161, 0.3) !important;
}
#order-standard_cart .transfer-not-eligible {
  color: var(--text-muted) !important;
  background: var(--navy-800) !important;
}
#order-standard_cart .product-info {
  background: var(--navy-800) !important;
  border-top-color: var(--line) !important;
  border-bottom-color: var(--line) !important;
}

/* The "www" prefix label in front of the domain-name field
   (configureproductdomain.tpl/adddomain.tpl, lang key orderForm.www) —
   hidden per request; restore the domain input's left corners since
   Bootstrap normally flattens that side to sit flush against the addon. */
#order-standard_cart .input-group-addon,
#order-standard_cart .input-group-prepend {
  display: none;
}
#order-standard_cart .input-group .form-control:last-child {
  border-top-left-radius: var(--radius-sm) !important;
  border-bottom-left-radius: var(--radius-sm) !important;
}

/* Advanced domain search options (TLD multiselect, max-length select, safe
   search checkbox) — six hardcodes dark label/button text (#333, #111827)
   for these, sized for a white page. */
#order-standard_cart .domain-checker-advanced .multiselect {
  color: var(--white) !important;
}
/* six has a general #order-standard_cart label { color:#666 } rule covering
   every plain <label> in the whole cart form — not just this panel's — so
   the iCheck radio/checkbox labels (.apply-credit-container, .option, etc.)
   needed the same fix, not just the advanced-search ones. */
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc {
  color: var(--text) !important;
}

/* ==========================================================================
   14. Registration form (register.php has its own #registration-scoped
   rules in six's core CSS — same pattern as the header/cart bugs: a light
   "Personal Information" style divider label, and a fixed 36px field height
   at 13px font-size that fights the 1rem inputs set in section 7 above)
   ========================================================================== */

#registration .sub-heading {
  border-top-color: var(--line) !important;
}
#registration .sub-heading span {
  background: var(--navy-950) !important;
  color: var(--teal-light) !important;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* "Join our mailing list" opt-in box, further down the registration form */
.marketing-email-optin {
  background: var(--navy-800) !important;
  color: var(--text) !important;
}
.marketing-email-optin h4 {
  color: var(--white);
}

#registration .field,
#registration .form-control {
  height: auto !important;
  padding: 13px 16px !important;
  font-size: 1rem !important;
}
#registration .prepend-icon .field {
  padding-left: 40px !important;
}
/* Six pins this icon label to a hardcoded 36px height/line-height, which no
   longer matches the input's real (now-taller, 1rem) height — flexbox
   centers it regardless of the exact height instead of chasing a number. */
#registration .prepend-icon .field-icon {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: 40px !important;
  line-height: normal !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The phone field is additionally enhanced client-side into an
   intl-tel-input flag/dial-code picker, which six sets to
   .separate-dial-code and positions at left:0 — the exact same spot as our
   own field-icon above, so the two were stacking on top of each other
   (the "+354 is covering the text" bug). Hide our icon once intl-tel-input
   has taken over, and restore ITS OWN padding-left (which our blanket
   padding-left:40px above was clobbering, since it isn't wide enough for
   the flag + dial code) per the dial-code digit count six's JS assigns. */
#registration .prepend-icon:has(.intl-tel-input) .field-icon {
  display: none;
}

/* intl-tel-input (v12.0.2, per WHMCS's own scripts.min.js) normally
   positions the flag/dial-code chip with position:absolute and gives the
   <input> a matching padding-left sized for that exact chip width — an
   approach two rounds of chasing here couldn't reliably reproduce (its
   width also depends on an .iti-sdc-N class tied to the resolved dial
   code's digit count). Overriding it with flexbox sidesteps the whole
   measurement problem: chip and input become normal flex siblings that
   can't overlap regardless of the chip's actual width. */
#registration .intl-tel-input {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
}
#registration .intl-tel-input .flag-container {
  position: static !important;
  flex: 0 0 auto;
  padding: 0 !important;
}
#registration .intl-tel-input .selected-flag {
  position: relative !important;
  width: auto !important;
  min-width: 60px;
  height: auto !important;
  padding: 0 22px 0 14px !important;
  display: flex !important;
  align-items: center;
  background: transparent !important;
}
#registration .intl-tel-input .selected-flag .iti-arrow {
  border-top-color: var(--text-muted) !important;
}
#registration .intl-tel-input .selected-dial-code {
  padding-left: 20px !important;
  color: var(--text) !important;
  white-space: nowrap;
}
#registration .intl-tel-input input.field {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  padding-left: 8px !important;
}
#registration .intl-tel-input .country-list {
  background: var(--navy-800) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
#registration .intl-tel-input .country-list .country {
  color: var(--text) !important;
}
#registration .intl-tel-input .country-list .country .dial-code {
  color: var(--text-faint) !important;
}
#registration .intl-tel-input .country-list .country.highlight {
  background: rgba(255, 255, 255, 0.08) !important;
}
#registration .intl-tel-input .country-list .divider {
  border-bottom-color: var(--line) !important;
}
#registration .field-icon i {
  color: var(--text-faint) !important;
}
#registration label {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   15. Premium comparison order form (order forms/premium_comparison and its
   two customised copies — premium_comparison_xnet, premium_comparison_xnet2
   — all share the same #order-premium_comparison wrapper id and CSS, dark
   text sized for a white page (div#order-premium_comparison { color:#666 },
   h3/h4/h5 in #333/#666). Each plan is its own self-contained white card
   (.price-table) with correctly-paired dark-on-white / white-on-blue text
   that already works and isn't touched here — only the OUTER/page-level
   text sitting directly on this theme's dark page (section titles like the
   reported h3, any loose paragraph text) needs recolouring. */
#order-premium_comparison {
  color: var(--text-muted) !important;
}
#order-premium_comparison h3,
#order-premium_comparison h4,
#order-premium_comparison h5 {
  color: var(--white) !important;
}
/* One nested exception: this specific badge keeps ITS OWN light-grey
   background (#f3f3f3) regardless of the page-level color change above, so
   it needs its own dark text to stay paired with it — otherwise the
   base fix above would leave it light-on-light instead of dark-on-dark. */
#order-premium_comparison .main-container.price-01 .includes-features .head-area span {
  color: #333333 !important;
}

/* ==========================================================================
   16. Ticket message editor (bootstrap-markdown plugin —
   textarea.markdown-editor on submitticket.php etc.). Its CSS
   (assets/css/bootstrap-markdown.min.css) isn't in a <link> tag anywhere in
   six's templates, so it's injected by JS at runtime — likely after this
   stylesheet, hence !important throughout. Toolbar, textarea, and preview
   pane all hardcode light-mode colours (#f5f5f5 toolbar, #eee/#fff
   textarea, #fff preview).
   ========================================================================== */

.md-editor {
  border-color: var(--line) !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.md-editor > .md-header,
.md-editor .md-footer {
  background: var(--navy-800) !important;
  border-color: var(--line) !important;
}
.md-editor .md-controls .md-control {
  color: var(--text-faint) !important;
}
.md-editor .md-controls .md-control:hover {
  color: var(--white) !important;
}
/* The plugin's own rule (.md-editor > textarea.markdown-editor, .md-editor >
   .md-preview { background-color: #fff!important; ... }) matches with equal
   or higher specificity than a plain ".md-editor > textarea" here, and it's
   injected after this stylesheet, so on a tie it wins. Prefixing with "html"
   adds just enough specificity to beat it without an arms-race of !important. */
html .md-editor > textarea {
  background: var(--navy-900) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html .md-editor > textarea:focus {
  background: var(--navy-900) !important;
  color: var(--white) !important;
}
.md-editor.active {
  border-color: var(--teal) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 8px rgba(20, 184, 166, 0.35) !important;
}
html .md-editor > .md-preview {
  background: var(--navy-900) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.md-editor.md-fullscreen-mode,
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
  background: var(--navy-950) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   17. Motion & accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-marquee-track,
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .section,
  .homepage-panel {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {
  .hero,
  .page-header,
  .homepage-header {
    padding: 140px 0 70px;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 120px;
  }
  body {
    padding-top: var(--header-height);
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .card-body,
  .panel-body {
    padding: 24px 20px;
  }
}