/* =============================================================
   TechGurus WHMCS portal skin — Modernist (light) identity
   Source of truth: origin/main app/globals.css, "Modernist redesign"
   as deployed at https://www.techgurus.com.au

   Flat, editorial, light-ground system:
     - no corner radius anywhere
     - no gradients, no glows, no elevation
     - Archivo carries every weight (400 / 600 / 800)
     - hard 1px rules at 40% black do the structural work

   Replaces the previous dark navy / blue-cyan skin entirely. That palette
   belonged to the pre-redesign brand and no longer exists on the site.
   ============================================================= */

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

:root {
  --tg-bg:            #f3f2f2;
  --tg-surface:       #eae9e9;
  --tg-text:          #201e1d;
  --tg-accent:        #ec3013;
  --tg-accent-2:      #e15b47;

  --tg-accent-100:    #fff2ef;
  --tg-accent-200:    #ffe0d9;
  --tg-accent-300:    #ffc4b8;
  --tg-accent-600:    #dd2b0f;
  --tg-accent-700:    #ae1800;

  --tg-n100:          #f8f4f4;
  --tg-n200:          #eae7e7;
  --tg-n300:          #d7d3d3;
  --tg-n400:          #bab6b6;
  --tg-n500:          #9b9797;
  --tg-n600:          #7d7979;
  --tg-n700:          #605d5d;
  --tg-n800:          #444141;
  --tg-n900:          #2d2b2b;

  /* Literal rgba rather than color-mix — WHMCS still ships to some older
     embedded browsers (invoice previews, PDF renderers). */
  --tg-divider:       rgba(32, 30, 29, 0.40);
  --tg-divider-soft:  rgba(32, 30, 29, 0.18);
  --tg-divider-hair:  rgba(32, 30, 29, 0.10);

  --tg-font:          'Archivo', system-ui, -apple-system, sans-serif;

  --tg-success:       #1c7c4a;
  --tg-warn:          #9a6200;
  --tg-danger:        #b3241a;
}

/* =============================================================
   Base
   ============================================================= */

html, body {
  background-color: var(--tg-bg) !important;
  color: var(--tg-text) !important;
  font-family: var(--tg-font) !important;
  -webkit-font-smoothing: antialiased;
}
body > * { background-color: transparent; }

h1, h2, h3, h4, h5, h6,
.panel-title,
.logincontainer h1 {
  font-family: var(--tg-font) !important;
  color: var(--tg-text) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}

p, span, label, td, th, li, div,
.main-content, .form-horizontal, .form-group {
  color: var(--tg-text);
}

a { color: var(--tg-accent) !important; text-decoration: none !important; }
a:hover, a:focus { color: var(--tg-accent-700) !important; }

small, .small, .text-muted, .help-block,
#footer p, #footer a {
  color: var(--tg-n700) !important;
}

/* Keyboard-only focus ring — mouse clicks must not leave one behind. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tg-accent) !important;
  outline-offset: 2px !important;
}
/* Fields already turn accent on focus; an offset ring on top of that reads as
   a doubled error box. The deployed system uses offset 0 here. */
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0 !important;
}
::selection { background: var(--tg-accent-200); color: var(--tg-text); }

/* No radius anywhere in this system. */
.btn, .form-control, .panel, .well, .dropdown-menu, .modal-content,
.breadcrumb, .list-group-item, .alert, .label, .progress, .input-group-addon,
.package, .package-container, .product-options .item, .nav-tabs > li > a,
.tab-content, input, select, textarea {
  border-radius: 0 !important;
}

/* =============================================================
   Header + wordmark

   The live site renders its logo as text, not an image: "Tech" at 400 and
   "Gurus" at 800, a 3px accent rule, then a letterspaced tagline. Reproduced
   here so it stays crisp at any size and tracks the palette. Values lifted
   from the deployed Nav component.
   ============================================================= */

#header {
  background-color: var(--tg-bg) !important;
  border-bottom: 1px solid var(--tg-divider) !important;
  padding: 14px 0 !important;
}

#header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

#header .logo,
#header a.logo {
  order: 1 !important;
  float: none !important;
  display: block !important;
  background: transparent !important;
  line-height: 1 !important;
  color: var(--tg-text) !important;
  text-decoration: none !important;
  margin-right: auto !important;
  /* The wordmark is live text now, so a click (or click-drag) would otherwise
     select it and paint the ::selection block behind the letters. */
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
#header .logo:focus { outline: none !important; }
#header .logo:focus-visible { outline: 2px solid var(--tg-accent) !important; outline-offset: 4px !important; }

/* Any legacy <img> logo left in place by a template revert. */
#header .logo img { display: none !important; }

.tg-wordmark-name {
  display: block;
  font-family: var(--tg-font);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tg-text);
  white-space: nowrap;
}
.tg-wordmark-name .tg-light { font-weight: 400; }
.tg-wordmark-name .tg-bold  { font-weight: 800; }

.tg-wordmark-rule {
  display: block;
  height: 3px;
  background: var(--tg-accent);
  margin: 6px 0 5px;
}

.tg-wordmark-tag {
  display: block;
  font-family: var(--tg-font);
  font-size: 9px;
  letter-spacing: 0.135em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tg-n700);
  white-space: nowrap;
}

/* Top-right utility nav */
#header .top-nav {
  order: 2 !important;
  float: none !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}
#header .top-nav li a {
  font-family: var(--tg-font) !important;
  color: var(--tg-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
}
#header .top-nav li a:hover { color: var(--tg-accent) !important; background: transparent !important; }

#header .top-nav li.primary-action a,
#header .top-nav li.primary-action a.btn {
  background: var(--tg-accent) !important;
  color: var(--tg-bg) !important;
  border: 1px solid var(--tg-accent) !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}
#header .top-nav li.primary-action a:hover {
  background: var(--tg-text) !important;
  border-color: var(--tg-text) !important;
  color: var(--tg-bg) !important;
}

/* =============================================================
   Primary navigation
   ============================================================= */

#main-menu,
.navbar-main {
  background-color: var(--tg-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-divider) !important;
  margin-bottom: 0 !important;
}
.navbar-main .container { border-bottom: 0 !important; }

.navbar-main .navbar-nav > li > a {
  font-family: var(--tg-font) !important;
  color: var(--tg-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  background: transparent !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .open > a {
  color: var(--tg-accent) !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--tg-accent) !important;
}

.navbar-main .navbar-nav > li.account > a {
  color: var(--tg-text) !important;
  font-weight: 800 !important;
}

.navbar-main .dropdown-menu {
  background-color: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.navbar-main .dropdown-menu > li > a {
  color: var(--tg-text) !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
}
.navbar-main .dropdown-menu > li > a:hover {
  color: var(--tg-accent) !important;
  background-color: var(--tg-accent-100) !important;
}
.navbar-main .divider { background-color: var(--tg-divider-soft) !important; }

.navbar-main .navbar-toggle {
  background-color: transparent !important;
  border: 1px solid var(--tg-divider) !important;
}
.navbar-main .navbar-toggle .icon-bar { background-color: var(--tg-text) !important; }
.navbar-main li.account { background-color: transparent !important; }

/* =============================================================
   Page body
   ============================================================= */

#main-body {
  background-color: var(--tg-bg) !important;
  padding: 40px 0 !important;
  min-height: calc(100vh - 260px);
}
#main-body .container,
#main-body .row,
#main-body .main-content,
.container, .row {
  background-color: transparent !important;
}

#main-body h1,
#main-body .main-content h1 {
  color: var(--tg-text) !important;
  font-family: var(--tg-font) !important;
  font-size: clamp(30px, 3.4vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}
/* WHMCS puts the page subtitle inline inside the h1 ("News <small>All the
   latest from TechGurus</small>"). Inline, it inherits the h1's -0.035em
   tracking and clamped size, so it renders squashed and oversized next to the
   title. Drop it onto its own line at body scale with normal tracking. */
#main-body h1 small,
.logincontainer h1 small,
#main-body .main-content h1 small {
  display: block !important;
  margin-top: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  color: var(--tg-n700) !important;
}

.header-lined {
  border-bottom: 2px solid var(--tg-text) !important;
  padding-bottom: 12px !important;
}
/* six ships its own 1px #ccc rule on the h1; inside .header-lined that stacks
   a second line directly under ours. */
.header-lined h1 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#main-body h1 {
  border-bottom-color: var(--tg-divider-soft) !important;
  /* The subtitle is a block now, so the h1 needs its own bottom gap or it
     runs straight into the breadcrumb below. */
  margin-bottom: 20px !important;
}
.breadcrumb { margin-top: 0 !important; margin-bottom: 24px !important; padding-top: 10px !important; }

/* =============================================================
   Panels / cards
   ============================================================= */

.panel,
.client-home-panels .panel,
.tile {
  background-color: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
  box-shadow: none !important;
}
.panel-heading {
  background-color: var(--tg-surface) !important;
  border-bottom: 1px solid var(--tg-divider) !important;
  color: var(--tg-text) !important;
  padding: 14px 18px !important;
}
.panel-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.panel-body { background-color: var(--tg-bg) !important; color: var(--tg-text) !important; }
.panel-footer {
  background-color: var(--tg-surface) !important;
  border-top: 1px solid var(--tg-divider) !important;
}
.panel-primary > .panel-heading {
  background-color: var(--tg-text) !important;
  border-color: var(--tg-text) !important;
}
.panel-primary > .panel-heading,
.panel-primary > .panel-heading .panel-title { color: var(--tg-bg) !important; }

/* =============================================================
   Forms
   ============================================================= */

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
select, textarea,
.input-group .form-control {
  background-color: var(--tg-surface) !important;
  border: 1px solid var(--tg-divider) !important;
  color: var(--tg-text) !important;
  caret-color: var(--tg-accent) !important;
  box-shadow: none !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-family: var(--tg-font) !important;
}
.form-control:hover,
input:hover, select:hover, textarea:hover {
  border-color: rgba(32, 30, 29, 0.55) !important;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
  background-color: var(--tg-bg) !important;
  border-color: var(--tg-accent) !important;
  box-shadow: none !important;
  color: var(--tg-text) !important;
}
.form-control::placeholder,
input::placeholder, textarea::placeholder { color: var(--tg-n600) !important; }

label {
  color: var(--tg-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: var(--tg-font) !important;
}
.checkbox label, .radio label { color: var(--tg-text) !important; font-weight: 500 !important; }
.help-block { color: var(--tg-n700) !important; }
.input-group-addon {
  background-color: var(--tg-surface) !important;
  border: 1px solid var(--tg-divider) !important;
  color: var(--tg-n800) !important;
}

/* =============================================================
   Buttons — square, Archivo 800, flat accent; hover inverts to near-black
   ============================================================= */

.btn {
  font-family: var(--tg-font) !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.btn-sm, .btn-xs { padding: 7px 13px !important; font-size: 13px !important; }
.btn-lg { padding: 15px 26px !important; font-size: 15px !important; }

.btn-primary, .btn-success,
input[type="submit"].btn, button[type="submit"].btn,
.navbar-main .navbar-nav > li.account > a.btn {
  background: var(--tg-accent) !important;
  border-color: var(--tg-accent) !important;
  color: var(--tg-bg) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
input[type="submit"].btn:hover, button[type="submit"].btn:hover {
  background: var(--tg-text) !important;
  border-color: var(--tg-text) !important;
  color: var(--tg-bg) !important;
}

.btn-default, .btn-secondary, a.btn-default {
  background-color: transparent !important;
  border-color: var(--tg-divider) !important;
  color: var(--tg-text) !important;
}
.btn-default:hover, .btn-secondary:hover, a.btn-default:hover {
  background-color: rgba(32, 30, 29, 0.07) !important;
  border-color: var(--tg-text) !important;
  color: var(--tg-text) !important;
}

.btn-danger  { background-color: var(--tg-danger) !important;  border-color: var(--tg-danger) !important;  color: #fff !important; }
.btn-warning { background-color: var(--tg-warn) !important;    border-color: var(--tg-warn) !important;    color: #fff !important; }
.btn-info    { background-color: var(--tg-n800) !important;    border-color: var(--tg-n800) !important;    color: var(--tg-bg) !important; }
.btn-link    { color: var(--tg-accent) !important; font-weight: 600 !important; }
.btn-link:hover { color: var(--tg-accent-700) !important; }

/* =============================================================
   Tables
   ============================================================= */

.table { background-color: transparent !important; }
.table > thead > tr > th {
  background-color: var(--tg-surface) !important;
  border-color: var(--tg-divider) !important;
  color: var(--tg-text) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
}
.table > tbody > tr > td {
  border-color: var(--tg-divider-soft) !important;
  color: var(--tg-text) !important;
  background-color: transparent !important;
}
.table > tbody > tr:hover > td { background-color: var(--tg-accent-100) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--tg-n100) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--tg-divider-soft) !important; }

/* =============================================================
   Alerts / labels / badges
   ============================================================= */

.alert { border-width: 1px !important; border-style: solid !important; font-weight: 500 !important; }
.alert-info    { background-color: var(--tg-n100) !important;      border-color: var(--tg-divider) !important;  color: var(--tg-text) !important; }
.alert-success { background-color: #e8f4ed !important;             border-color: var(--tg-success) !important;  color: #14532d !important; }
.alert-warning { background-color: #fdf3e2 !important;             border-color: var(--tg-warn) !important;     color: #6b4400 !important; }
.alert-danger  { background-color: var(--tg-accent-100) !important; border-color: var(--tg-accent) !important;  color: var(--tg-accent-700) !important; }

.label, .badge { font-family: var(--tg-font) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; }
.label-default { background-color: var(--tg-n300) !important; color: var(--tg-text) !important; }
.label-primary, .label-info { background-color: var(--tg-text) !important; color: var(--tg-bg) !important; }
.label-success { background-color: var(--tg-success) !important; color: #fff !important; }
.label-warning { background-color: var(--tg-warn) !important;    color: #fff !important; }
.label-danger  { background-color: var(--tg-accent) !important;  color: #fff !important; }
.badge { background-color: var(--tg-accent) !important; color: #fff !important; }

/* =============================================================
   List groups / breadcrumb / pagination
   ============================================================= */

.list-group-item {
  background-color: var(--tg-bg) !important;
  border-color: var(--tg-divider-soft) !important;
  color: var(--tg-text) !important;
}
.list-group-item:hover { background-color: var(--tg-accent-100) !important; color: var(--tg-text) !important; }
.list-group-item.active,
.list-group-item.active:hover {
  background-color: var(--tg-accent-100) !important;
  border-color: var(--tg-divider-soft) !important;
  border-left: 3px solid var(--tg-accent) !important;
  color: var(--tg-text) !important;
  font-weight: 600 !important;
}

.breadcrumb {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-divider-soft) !important;
  padding-left: 0 !important;
  font-size: 13px !important;
}
.breadcrumb > li, .breadcrumb > li + li::before { color: var(--tg-n700) !important; }
.breadcrumb > .active { color: var(--tg-text) !important; font-weight: 600 !important; }

.pagination > li > a, .pagination > li > span {
  background-color: var(--tg-bg) !important;
  border-color: var(--tg-divider-soft) !important;
  color: var(--tg-text) !important;
}
.pagination > li > a:hover { background-color: var(--tg-accent-100) !important; color: var(--tg-accent) !important; }
.pagination > .active > a, .pagination > .active > a:hover {
  background-color: var(--tg-accent) !important;
  border-color: var(--tg-accent) !important;
  color: #fff !important;
}

/* =============================================================
   Modals / wells / tabs
   ============================================================= */

.modal-content { background-color: var(--tg-bg) !important; border: 1px solid var(--tg-text) !important; box-shadow: none !important; }
.modal-header  { background-color: var(--tg-surface) !important; border-bottom: 1px solid var(--tg-divider) !important; }
.modal-header .modal-title { color: var(--tg-text) !important; }
.modal-footer  { background-color: var(--tg-surface) !important; border-top: 1px solid var(--tg-divider) !important; }
.modal-backdrop { background-color: rgba(32, 30, 29, 0.55) !important; }
.close { color: var(--tg-text) !important; opacity: 0.7 !important; text-shadow: none !important; }
.close:hover { color: var(--tg-accent) !important; opacity: 1 !important; }

.well {
  background-color: var(--tg-surface) !important;
  border: 1px solid var(--tg-divider-soft) !important;
  box-shadow: none !important;
  color: var(--tg-text) !important;
}

.nav-tabs { border-bottom: 1px solid var(--tg-divider) !important; }
.nav-tabs > li > a {
  color: var(--tg-n700) !important;
  border: 0 !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
}
.nav-tabs > li > a:hover { color: var(--tg-accent) !important; background-color: transparent !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid var(--tg-accent) !important;
  color: var(--tg-text) !important;
  font-weight: 800 !important;
}
.tab-content {
  background-color: transparent !important;
  border: 0 !important;
  padding: 24px 0 !important;
}

/* =============================================================
   Home banner / shortcuts
   ============================================================= */

#home-banner {
  background-color: var(--tg-surface) !important;
  border-bottom: 1px solid var(--tg-divider) !important;
  padding: 48px 0 !important;
  color: var(--tg-text) !important;
}
#home-banner h1, #home-banner h2, #home-banner p { color: var(--tg-text) !important; }

.home-shortcuts {
  background-color: var(--tg-bg) !important;
  border-bottom: 1px solid var(--tg-divider) !important;
}
.home-shortcuts .lead { color: var(--tg-n800) !important; }
.home-shortcuts ul li a {
  background-color: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
  color: var(--tg-text) !important;
  font-weight: 600 !important;
}
.home-shortcuts ul li a:hover { border-color: var(--tg-accent) !important; background-color: var(--tg-accent-100) !important; color: var(--tg-accent) !important; }
.home-shortcuts ul li a i { color: var(--tg-accent) !important; }

/* =============================================================
   Footer
   ============================================================= */

#footer {
  background-color: var(--tg-surface) !important;
  border-top: 1px solid var(--tg-divider) !important;
  padding: 28px 0 !important;
  margin-top: 56px !important;
}
#footer p, #footer a { color: var(--tg-n700) !important; font-size: 13px !important; }
#footer a:hover { color: var(--tg-accent) !important; }
.back-to-top {
  color: var(--tg-text) !important;
  background-color: transparent !important;
  border: 1px solid var(--tg-divider) !important;
}
.back-to-top:hover { color: var(--tg-accent) !important; border-color: var(--tg-accent) !important; }

/* =============================================================
   Progress / status / scrollbar
   ============================================================= */

.progress { background-color: var(--tg-n200) !important; box-shadow: none !important; }
.progress-bar { background-color: var(--tg-accent) !important; box-shadow: none !important; }

.text-success { color: var(--tg-success) !important; }
.text-danger  { color: var(--tg-danger) !important; }
.text-warning { color: var(--tg-warn) !important; }
.text-info    { color: var(--tg-n800) !important; }
.text-muted   { color: var(--tg-n700) !important; }
.text-primary { color: var(--tg-accent) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tg-n200); }
::-webkit-scrollbar-thumb { background: var(--tg-n400); }
::-webkit-scrollbar-thumb:hover { background: var(--tg-n600); }

/* =============================================================
   Login / register container
   ============================================================= */

.logincontainer,
.logincontainer .panel,
.logincontainer .panel-body {
  background-color: var(--tg-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.logincontainer h1 { font-weight: 800 !important; letter-spacing: -0.035em !important; }

/* =============================================================
   Store / cart / order forms
   ============================================================= */

body.inShoppingCart,
.inShoppingCart #main-body,
#order-standard_cart,
.order-container, .order-form-container, #order-standard-main, .order-standard {
  background-color: var(--tg-bg) !important;
  color: var(--tg-text) !important;
}

.package-container, .package,
.product-options .item,
.landing-page .product-options .item {
  background-color: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
  color: var(--tg-text) !important;
}
.package .package-header, .package .header, .package-name, .package .name {
  background-color: var(--tg-surface) !important;
  color: var(--tg-text) !important;
  border-bottom: 1px solid var(--tg-divider) !important;
  font-weight: 800 !important;
}
.package .price, .package-price, .price-block, .product-options .price { color: var(--tg-accent) !important; }
.package .price .amount, .package-price .amount { color: var(--tg-accent) !important; font-weight: 800 !important; }
.package .package-features, .package ul, .package li { color: var(--tg-text) !important; border-color: var(--tg-divider-hair) !important; }
.package li { background-color: transparent !important; }
.package li:nth-child(odd) { background-color: var(--tg-n100) !important; }

.package .btn-order, .package .btn-buy, .package .btn-primary, .product-options .btn-buy {
  background: var(--tg-accent) !important;
  border-color: var(--tg-accent) !important;
  color: var(--tg-bg) !important;
  font-weight: 800 !important;
}
.package.featured, .package.highlight, .package.recommended {
  border: 2px solid var(--tg-accent) !important;
  box-shadow: none !important;
}

.billing-cycle-select, .billing-cycle-options { background-color: var(--tg-bg) !important; border-color: var(--tg-divider) !important; }
.billing-cycle-option, .billing-cycle-tab {
  background-color: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
  color: var(--tg-text) !important;
}
.billing-cycle-option.active, .billing-cycle-option:hover {
  background-color: var(--tg-accent-100) !important;
  border-color: var(--tg-accent) !important;
  color: var(--tg-text) !important;
}

.order-summary, .order-summary-container, .cart-summary,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
}
#order-standard_cart .order-summary h2,
.order-summary .summary-header, .cart-summary h3 {
  background-color: var(--tg-surface) !important;
  color: var(--tg-text) !important;
  border-bottom: 1px solid var(--tg-divider) !important;
  font-weight: 800 !important;
}
.order-summary .summary-item, .cart-summary .item { color: var(--tg-text) !important; border-bottom-color: var(--tg-divider-hair) !important; }
.order-summary .total, .cart-summary .total,
#order-standard_cart .order-summary .total-due-today .amt { color: var(--tg-accent) !important; font-weight: 800 !important; }
#order-standard_cart .order-summary .product-name { color: var(--tg-text) !important; font-weight: 600 !important; }
#order-standard_cart .order-summary .product-group { color: var(--tg-n700) !important; }
#order-standard_cart .order-summary .loader { background-color: var(--tg-surface) !important; }
#order-standard_cart .order-summary .btn-continue-shopping {
  background-color: transparent !important;
  border-color: var(--tg-divider) !important;
  color: var(--tg-text) !important;
}

.configoptions, .configoption { background-color: var(--tg-bg) !important; border-color: var(--tg-divider-soft) !important; color: var(--tg-text) !important; }
.configoption label { color: var(--tg-text) !important; }
.addon-item { background-color: var(--tg-bg) !important; border-color: var(--tg-divider-soft) !important; }
.addon-item .addon-name { color: var(--tg-text) !important; }
.addon-item .addon-price { color: var(--tg-accent) !important; }

.landing-page .hero, .landing-page .product-options { background-color: var(--tg-bg) !important; color: var(--tg-text) !important; }
.landing-page .hero h2, .landing-page .hero h3,
.landing-page .product-options h2, .landing-page .product-options h3, .landing-page .product-options h4 { color: var(--tg-text) !important; }
.landing-page .product-options p { color: var(--tg-n800) !important; }
.landing-page .product-options .icon { color: var(--tg-accent) !important; }

/* Domain search / checker */
#domain-search-form input[type="text"] { background-color: var(--tg-surface) !important; border-color: var(--tg-divider) !important; color: var(--tg-text) !important; }
.domain-checker-container {
  background-color: var(--tg-surface) !important;
  border: 1px solid var(--tg-divider) !important;
}
.domain-checker-bg { background-image: none !important; }
.domain-checker-container .input-group-box { background-color: var(--tg-surface) !important; }
.domain-checker-available   { background-color: #e8f4ed !important; border-color: var(--tg-success) !important; color: #14532d !important; }
.domain-checker-unavailable,
.domain-checker-invalid     { background-color: var(--tg-accent-100) !important; border-color: var(--tg-accent) !important; color: var(--tg-accent-700) !important; }
div.domainresults div:not(.btn-group) { background-color: var(--tg-bg) !important; color: var(--tg-text) !important; }

.domain-search-results .domain-result { background-color: var(--tg-bg) !important; border-color: var(--tg-divider-soft) !important; }
.domain-result .domain-name  { color: var(--tg-text) !important; }
.domain-result .domain-price { color: var(--tg-accent) !important; }
.domain-result.available   { border-left: 3px solid var(--tg-success) !important; }
.domain-result.unavailable { border-left: 3px solid var(--tg-accent) !important; }

#order-standard_cart .domain-add-domain,
#order-standard_cart .domain-suggestions,
.suggested-domains, .spotlight-tld, .domain-promo-box {
  background-color: var(--tg-bg) !important;
  border-color: var(--tg-divider-soft) !important;
}
.domain-promo-box h3, .domain-promo-box p, .domain-promo-box .small { color: var(--tg-text) !important; }

.domain-pricing .tld-row.highlighted { background: var(--tg-accent-100) !important; }
.domain-pricing .tld-pricing-header div,
.domain-pricing .tld-pricing-header .col-xs-2 { background-color: var(--tg-surface) !important; color: var(--tg-text) !important; }
.domain-pricing .tld-pricing-header div:nth-child(odd) { background-color: var(--tg-n200) !important; }
.domain-pricing .tld-row { border-color: var(--tg-divider-hair) !important; color: var(--tg-text) !important; }

#order-standard_cart .domain-selection-options .option {
  background-color: var(--tg-bg) !important;
  border-color: var(--tg-divider) !important;
  color: var(--tg-text) !important;
}
#order-standard_cart .domain-selection-options .option:hover { background-color: var(--tg-accent-100) !important; border-color: var(--tg-accent) !important; }
#order-standard_cart .domain-selection-options .option-selected,
#order-standard_cart .domain-selection-options .option-selected:hover {
  background-color: var(--tg-accent-100) !important;
  border-color: var(--tg-accent) !important;
}
#order-standard_cart .domain-selection-options label,
#order-standard_cart .domain-selection-options p { color: var(--tg-text) !important; }

.checkout-steps .step { background-color: var(--tg-bg) !important; border-color: var(--tg-divider-soft) !important; color: var(--tg-n700) !important; }
.checkout-steps .step.active   { background-color: var(--tg-accent-100) !important; border-color: var(--tg-accent) !important; color: var(--tg-text) !important; }
.checkout-steps .step.complete { background-color: var(--tg-bg) !important; border-color: var(--tg-success) !important; color: var(--tg-success) !important; }

#order-standard_cart .apply-credit-container .radio,
#order-standard_cart .cc-input-container .radio-inline { background-color: transparent !important; }
.iradio_square-blue, .icheckbox_square-blue, .icheckbox_square-green {
  background-color: var(--tg-surface) !important;
  border: 1px solid var(--tg-divider) !important;
}

/* premium_comparison order form */
#order-premium_comparison { color: var(--tg-text) !important; }
#order-premium_comparison h3, #order-premium_comparison h4 { color: var(--tg-text) !important; }
#order-premium_comparison h5 { color: var(--tg-n700) !important; }
#order-premium_comparison .main-container { background: transparent !important; }
#order-premium_comparison .price-table-container .price-table {
  background: var(--tg-bg) !important;
  border: 1px solid var(--tg-divider) !important;
  box-shadow: none !important;
}
#order-premium_comparison .price-table-container .price-table .top-head {
  background: var(--tg-surface) !important;
}
#order-premium_comparison .price-table-container .price-table .top-head .top-area { border-bottom-color: var(--tg-divider) !important; }
#order-premium_comparison .price-table-container .price-table .top-head .top-area h4 { color: var(--tg-text) !important; }
#order-premium_comparison .price-table-container .price-table .top-head .top-area p { color: var(--tg-n700) !important; }
#order-premium_comparison .price-table-container .price-table .top-head .price-area {
  border-top-color: var(--tg-divider) !important;
  color: var(--tg-accent) !important;
}
#order-premium_comparison .price-table-container .price-table .top-head .price-area .price span { color: var(--tg-accent) !important; }
#order-premium_comparison .price-table-container .price-table ul li {
  color: var(--tg-text) !important;
  border-bottom-color: var(--tg-divider-hair) !important;
  background: none !important;
}
#order-premium_comparison .price-table-container .price-table ul li a { color: var(--tg-accent) !important; }
#order-premium_comparison .price-table-container .order-button,
#order-premium_comparison .price-table-container .order-button:hover {
  background: var(--tg-accent) !important;
  border-color: var(--tg-accent) !important;
  color: var(--tg-bg) !important;
  text-shadow: none !important;
  filter: none !important;
  font-weight: 800 !important;
}
#order-premium_comparison .main-container.price-01 .includes-features .head-area span {
  background: var(--tg-bg) !important;
  color: var(--tg-text) !important;
}
#order-premium_comparison .includes-features ul.list-features li { color: var(--tg-text) !important; }
#order-premium_comparison .price-table-container .price-table .popular-plan {
  background: var(--tg-accent) !important;
  border-bottom-color: var(--tg-accent) !important;
  color: #fff !important;
}

/* Tickets */
.ticket-reply, .ticket-reply .message {
  background-color: var(--tg-bg) !important;
  border-color: var(--tg-divider-soft) !important;
  color: var(--tg-text) !important;
}

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 767px) {
  #header .container { min-height: 60px !important; }
  .tg-wordmark-name { font-size: 22px; }
  .tg-wordmark-rule { height: 2px; margin: 5px 0 4px; }
  .tg-wordmark-tag  { font-size: 7.5px; letter-spacing: 0.11em; }
  #header .top-nav { gap: 2px !important; }
  #header .top-nav li a { padding: 6px 8px !important; font-size: 13px !important; }
  #header .top-nav li.primary-action a { padding: 8px 12px !important; }
  #main-body { padding: 28px 0 !important; }
}

@media (max-width: 400px) {
  .tg-wordmark-tag { display: none; }
}