/* Bytelegion 2026 theme: self-hosted fonts, previous overrides (re-tokened), legion layer. */

/* Big Shoulders latin-ext */
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/legion/BigShoulders-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders latin */
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/legion/BigShoulders-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Castoro Titling latin-ext */
@font-face {
  font-family: 'Castoro Titling';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/legion/CastoroTitling-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Castoro Titling latin */
@font-face {
  font-family: 'Castoro Titling';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/legion/CastoroTitling-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/legion/Geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/legion/Geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Bytelegion — override for the WHMCS "twenty-one" theme (WHMCS 9.0.x)
   Drop-in file: templates/twenty-one/css/custom.css
   twenty-one loads this automatically after its own stylesheet — no template
   edits, so WHMCS updates stay safe.
   ========================================================================== */


:root {
  --bl-cream: #f1f2f3;
  --bl-surface: #ffffff;
  --bl-text: #02182a;
  --bl-navy: #02182a;
  --bl-navy-700: #0b2740;
  --bl-navy-300: #aebbd2;
  --bl-brick: #a11d18;
  --bl-brick-600: #7c1512;
  --bl-brick-100: #fbeeea;
  --bl-gold: #d3af5f;
  --bl-gold-soft: rgba(211, 171, 82, 0.15);
  --bl-line: #d5dade;
  --bl-heading: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --bl-body: 'Geist', system-ui, -apple-system, sans-serif;
  --bl-radius: 0px;
  --bl-shadow: none;
}

/* --- Base ---------------------------------------------------------------- */

body {
  background: var(--bl-cream);
  color: var(--bl-text);
  font-family: var(--bl-body);
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.card-title, .panel-title, .header-lined h1 {
  font-family: var(--bl-heading);
  font-weight: 700;
  color: var(--bl-navy);
  letter-spacing: 0.01em;
  line-height: 1.25;
}

a { color: var(--bl-brick); }
a:hover, a:focus { color: var(--bl-brick-600); }

*:focus-visible {
  outline: 2px solid var(--bl-gold);
  outline-offset: 2px;
  box-shadow: none;
}

::selection { background: var(--bl-gold-soft); }

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

/* Page heading with the site's gold rule instead of a grey border */
.header-lined {
  border-bottom: 1px solid var(--bl-line);
  padding-bottom: 14px;
  margin-bottom: 30px;
  position: relative;
}
.header-lined::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, var(--bl-brick), var(--bl-gold));
}

/* --- Top bar & header --------------------------------------------------- */

#top-bar, .top-bar {
  background: var(--bl-navy);
  border-bottom: 1px solid rgba(211, 171, 82, 0.28);
}
#top-bar a, .top-bar a, #top-bar .btn-link {
  color: rgba(253, 248, 240, 0.82);
  font-size: 13.5px;
  font-weight: 500;
}
#top-bar a:hover, .top-bar a:hover { color: var(--bl-gold); }

#header, .header, #header .navbar {
  background: var(--bl-navy);
  border: 0;
  box-shadow: none;
}
#header .logo img, .navbar-brand img { max-height: 40px; width: auto; }

/* Primary navigation */
#nav, .primary-nav, #main-menu, .navbar-nav {
  background: var(--bl-navy);
}
#nav .navbar-nav > li > a,
.navbar-nav > li > a,
.navbar .nav-link {
  color: rgba(253, 248, 240, 0.88);
  font-family: var(--bl-body);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.2s ease;
}
#nav .navbar-nav > li > a:hover,
.navbar-nav > li > a:hover,
.navbar .nav-link:hover,
.navbar-nav > li.active > a,
.navbar .nav-link.active {
  color: var(--bl-gold);
  background: transparent;
}
#nav .navbar-nav > li > a,
.navbar .nav-link { padding-left: 14px; padding-right: 14px; }
#nav .navbar-nav > li > a::after,
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 100%;
  bottom: 6px;
  height: 2px;
  background: var(--bl-gold);
  transition: right 0.3s cubic-bezier(.2, .7, .2, 1);
}
#nav .navbar-nav > li > a:hover::after,
.navbar .nav-link:hover::after,
.navbar-nav > li.active > a::after { right: 14px; }
/* keep the caret/dropdown arrows from inheriting the underline */
.navbar .dropdown-toggle::after { all: revert; }

.dropdown-menu {
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow);
  padding: 8px;
  background: var(--bl-surface);
}
.dropdown-menu .dropdown-item, .dropdown-menu > li > a {
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 14.5px;
  color: var(--bl-text);
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu > li > a:hover {
  background: var(--bl-brick-100);
  color: var(--bl-brick-600);
}
.dropdown-divider { border-top-color: var(--bl-line); }

/* Knowledge base gets a gold pill in the primary nav — it is the item we most
   want customers to find before they open a ticket. */
#nav .navbar-nav > li > a[href*="knowledgebase"],
.navbar .nav-link[href*="knowledgebase"] {
  background: var(--bl-gold-soft);
  border: 1px solid rgba(211, 171, 82, 0.55);
  border-radius: 999px;
  color: var(--bl-gold);
  margin: 0 6px;
}
#nav .navbar-nav > li > a[href*="knowledgebase"]:hover,
.navbar .nav-link[href*="knowledgebase"]:hover {
  background: var(--bl-gold);
  color: #2a0609;
}
#nav .navbar-nav > li > a[href*="knowledgebase"]::after,
.navbar .nav-link[href*="knowledgebase"]::after { display: none; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  font-family: var(--bl-body);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 999px;
  padding: 11px 24px;
  border-width: 1px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary, .btn-info, .btn-success, .btn-checkout {
  background: var(--bl-brick);
  border-color: var(--bl-brick);
  color: var(--bl-cream);
  box-shadow: 0 6px 18px rgba(156, 20, 32, 0.22);
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-checkout:hover,
.btn-primary:focus, .btn-info:focus, .btn-success:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--bl-brick-600);
  border-color: var(--bl-brick-600);
  color: var(--bl-cream);
}

.btn-secondary, .btn-default, .btn-outline-primary, .btn-light {
  background: transparent;
  border-color: var(--bl-navy);
  color: var(--bl-navy);
  box-shadow: none;
}
.btn-secondary:hover, .btn-default:hover, .btn-outline-primary:hover, .btn-light:hover {
  background: var(--bl-navy);
  border-color: var(--bl-navy);
  color: var(--bl-cream);
}

.btn-warning { background: var(--bl-gold); border-color: var(--bl-gold); color: #2a0609; }
.btn-warning:hover { background: #c39c45; border-color: #c39c45; color: #2a0609; }
.btn-danger { background: var(--bl-brick-600); border-color: var(--bl-brick-600); }
.btn-link { color: var(--bl-brick); font-weight: 500; }
.btn-sm { padding: 8px 18px; font-size: 13.5px; }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn:disabled, .btn.disabled { opacity: 0.45; box-shadow: none; transform: none; }

/* --- Cards, panels, wells ---------------------------------------------- */

.card, .panel, .well, .list-group, .home-shortcuts .shortcut {
  background: var(--bl-surface);
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-radius);
  box-shadow: none;
}
.card-header, .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--bl-line);
  font-family: var(--bl-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--bl-navy);
  padding: 18px 22px;
  border-radius: var(--bl-radius) var(--bl-radius) 0 0;
}
.card-body, .panel-body { padding: 22px; }
.card-footer, .panel-footer {
  background: transparent;
  border-top: 1px solid var(--bl-line);
}
.panel-primary, .card-primary { border-color: var(--bl-line); }
.panel-primary > .panel-heading, .card-primary > .card-header {
  background: var(--bl-navy);
  color: var(--bl-cream);
  border-bottom-color: var(--bl-navy);
}

/* Client-area home tiles and shortcuts lift on hover, like the site cards */
.home-shortcuts .shortcut, .client-home-panels .card, .panel-hover {
  transition: transform 0.28s cubic-bezier(.2, .7, .2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.home-shortcuts .shortcut:hover, .client-home-panels .card:hover, .panel-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--bl-shadow);
  border-color: rgba(211, 171, 82, 0.6);
}
.home-shortcuts .shortcut i, .home-shortcuts .shortcut .fa { color: var(--bl-brick); }

/* --- Forms -------------------------------------------------------------- */

label, .control-label {
  font-family: var(--bl-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--bl-navy);
  letter-spacing: 0.01em;
}
.form-control, .input-group-text, select.form-control, textarea.form-control {
  background: var(--bl-surface);
  border: 1px solid var(--bl-line);
  border-radius: 999px;
  color: var(--bl-text);
  font-family: var(--bl-body);
  font-size: 15px;
  padding: 11px 18px;
  height: auto;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea.form-control { border-radius: var(--bl-radius); }
.form-control:focus {
  border-color: var(--bl-gold);
  box-shadow: 0 0 0 3px var(--bl-gold-soft);
}
.form-control::placeholder { color: rgba(13, 27, 51, 0.4); }
.input-group-text { border-radius: 999px 0 0 999px; }

.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background: var(--bl-brick);
  border-color: var(--bl-brick);
}

/* --- Tables ------------------------------------------------------------- */

.table { color: var(--bl-text); }
.table thead th, .table > thead > tr > th {
  font-family: var(--bl-body);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(13, 27, 51, 0.6);
  border-bottom: 1px solid var(--bl-line);
  border-top: 0;
  padding: 14px 16px;
}
.table td, .table > tbody > tr > td {
  border-top: 1px solid var(--bl-line);
  padding: 15px 16px;
  vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(236, 226, 205, 0.28); }
.table-hover tbody tr:hover { background: var(--bl-gold-soft); }

/* --- Alerts, labels, badges -------------------------------------------- */

.alert {
  border-radius: var(--bl-radius);
  border-width: 1px;
  font-size: 14.5px;
}
.alert-info { background: #eaeef5; border-color: var(--bl-navy-300); color: var(--bl-navy-700); }
.alert-success { background: #eef4e9; border-color: #c3d3ae; color: #3f5230; }
.alert-warning { background: #fbf3df; border-color: rgba(211, 171, 82, 0.6); color: #6b5216; }
.alert-danger { background: var(--bl-brick-100); border-color: #e5aeaa; color: var(--bl-brick-600); }

.badge, .label {
  border-radius: 999px;
  font-family: var(--bl-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
}
.badge-primary, .label-primary { background: var(--bl-brick); color: var(--bl-cream); }
.badge-success, .label-success { background: #7a8a5e; color: #fff; }
.badge-warning, .label-warning { background: var(--bl-gold); color: #2a0609; }
.badge-info, .label-info { background: var(--bl-navy-700); color: var(--bl-cream); }

/* --- Portal home: lightened ------------------------------------------- */
/* Keeps login and the store entry points; drops the oversized domain-search
   hero and the announcement feed. Remove these three rules to restore them. */

#home-banner, #home-banner-container, .home-banner,
.domain-search-form-container, #searchTLD, .domain-checker-bg {
  display: none !important;
}
.home-announcements, #home-announcements, .announcement-list-home { display: none !important; }

/* Give the shortcut row the breathing room the hero used to occupy */
.home-shortcuts {
  margin-top: 46px;
}
.home-shortcuts .shortcut {
  padding: 30px 24px;
  text-align: left;
}
.home-shortcuts .shortcut h3, .home-shortcuts .shortcut .shortcut-title {
  font-family: var(--bl-heading);
  font-size: 17px;
  margin-top: 14px;
}

/* --- Cyan quick-actions bar ("How can we help today?") ----------------- */
/* twenty-one paints this strip in its own teal; repaint it navy with gold
   dividers. The class names differ slightly between releases, so several
   candidates are covered. */

.home-shortcuts, .shortcut-bar, .quick-actions, .top-tasks,
#quickNav, [class*="shortcut-bar"], [id*="shortcut-bar"] {
  background: var(--bl-navy) !important;
  border-top: 1px solid rgba(211, 171, 82, 0.3);
  border-bottom: 1px solid rgba(211, 171, 82, 0.3);
}
.home-shortcuts a, .shortcut-bar a, .quick-actions a, .top-tasks a,
.home-shortcuts h2, .home-shortcuts h3,
.shortcut-bar h2, .shortcut-bar h3 {
  color: var(--bl-cream) !important;
}
.home-shortcuts a:hover, .shortcut-bar a:hover,
.quick-actions a:hover, .top-tasks a:hover {
  background: rgba(211, 171, 82, 0.16) !important;
  color: var(--bl-gold) !important;
}
.home-shortcuts a i, .home-shortcuts a .fa,
.shortcut-bar a i, .quick-actions a i, .top-tasks a i {
  color: var(--bl-gold) !important;
}

/* Sidebar: active item was WHMCS grey with red text — make it navy on cream */
.sidebar .list-group-item.active,
#Primary_Sidebar-Categories .list-group-item.active,
.list-group-item.active,
.panel-sidebar .list-group-item.active {
  background: var(--bl-navy) !important;
  border-color: var(--bl-navy) !important;
  color: var(--bl-cream) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--bl-gold);
}
.sidebar .list-group-item.active a,
.list-group-item.active a,
.list-group-item.active span,
.list-group-item.active i {
  color: var(--bl-cream) !important;
}
.sidebar .list-group-item:hover:not(.active) {
  background: var(--bl-brick-100) !important;
  color: var(--bl-brick-600) !important;
}

/* twenty-one draws its radios/checkboxes as icon circles — recolour them */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.domain-selection-option input:checked + label::before,
.radio-container input:checked + label::before {
  background-color: var(--bl-brick) !important;
  border-color: var(--bl-brick) !important;
}
.fa-check-circle, .fa-dot-circle, .fa-check-square,
.domain-selection-option .fa-check-circle,
label input:checked + .fa-check-circle {
  color: var(--bl-brick) !important;
}
input[type="radio"]:checked, input[type="checkbox"]:checked { accent-color: var(--bl-brick); }

/* The big round radio on the cart's domain step is a styled span, not a native
   input — twenty-one paints it blue. Cover the usual class names. */
.checkmark, [class*="checkmark"],
.radio-mark, .radio-indicator, .radio-circle,
input:checked ~ .checkmark,
input:checked ~ [class*="checkmark"],
.domain-selection-option input:checked ~ span,
.domain-selection-option.selected .icon,
.select-option.selected .icon {
  background-color: var(--bl-brick) !important;
  border-color: var(--bl-brick) !important;
  color: var(--bl-cream) !important;
}
.checkmark:not(:has(*)):empty { box-shadow: none; }

/* iCheck (the plugin twenty-one uses on the cart) draws its radios and
   checkboxes from a blue sprite PNG, so colour cannot be overridden — we drop
   the sprite and draw the control in CSS instead. */
[class*="icheckbox_"], [class*="iradio_"] {
  background: var(--bl-surface) !important;
  background-image: none !important;
  border: 2px solid var(--bl-line) !important;
  width: 22px !important;
  height: 22px !important;
  position: relative !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
[class*="iradio_"] { border-radius: 50% !important; }
[class*="icheckbox_"] { border-radius: 5px !important; }

[class*="icheckbox_"].hover, [class*="iradio_"].hover {
  border-color: var(--bl-gold) !important;
}
[class*="icheckbox_"].checked, [class*="iradio_"].checked {
  background: var(--bl-brick) !important;
  border-color: var(--bl-brick) !important;
}
/* the tick / dot */
[class*="iradio_"].checked::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--bl-cream);
}
[class*="icheckbox_"].checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid var(--bl-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
[class*="icheckbox_"].disabled, [class*="iradio_"].disabled { opacity: 0.45; }

/* "Added to cart" modal: the recommendation rows inherit theme fills that turn
   them navy-on-navy, and their buttons stay WHMCS green. Repaint them. */
#modalAddedToCart .recommendation,
#modalAddedToCart .recommendations > * {
  background: var(--bl-surface) !important;
  background-image: none !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: var(--bl-radius) !important;
  color: var(--bl-text) !important;
  box-shadow: none !important;
  padding: 14px 16px;
}
#modalAddedToCart .recommendation * {
  color: var(--bl-text) !important;
  text-shadow: none !important;
}
#modalAddedToCart .recommendation .price {
  color: var(--bl-brick) !important;
  font-weight: 600;
}
#modalAddedToCart .btn {
  background: var(--bl-brick) !important;
  background-image: none !important;
  border-color: var(--bl-brick) !important;
  border-radius: 999px !important;
  color: var(--bl-cream) !important;
}
#modalAddedToCart .btn:hover {
  background: var(--bl-brick-600) !important;
  border-color: var(--bl-brick-600) !important;
}
#modalAddedToCart .btn * {
  color: var(--bl-cream) !important;
}
.modal-content {
  border-radius: var(--bl-radius) !important;
  border: 1px solid var(--bl-line);
}
.modal-header { border-bottom: 1px solid var(--bl-line); }
.modal-footer { border-top: 1px solid var(--bl-line); }

/* MarketConnect promo strips (NordVPN, SiteLock, marketgoo…) come with their
   own dark artwork and expect light text — keep their vendor colours, just make
   the copy legible again. */
#recommendations .promo, .marketconnect-promo, .promo-container,
[class*="promo-"] .promo-content, .recommendations .promo {
  color: rgba(253, 248, 240, 0.92) !important;
}
#recommendations .promo h1, #recommendations .promo h2, #recommendations .promo h3,
#recommendations .promo p, #recommendations .promo span, #recommendations .promo li,
.marketconnect-promo h1, .marketconnect-promo h2, .marketconnect-promo h3,
.marketconnect-promo p, .marketconnect-promo span {
  color: rgba(253, 248, 240, 0.92) !important;
}

/* --- Mobile: hide the sidebar dropdowns on the store pages ------------- */
/* twenty-one collapses the store sidebars (Categories / Actions / Choose
   Currency) into <select> menus on narrow screens. They sit right above the
   product list and get tapped by mistake, so hide them on mobile — the plans
   below are the only thing that needs to be reachable. Everything stays intact
   on desktop, and other pages' sidebars (client area nav) are untouched. */
@media (max-width: 767px) {
  /* keep the real currency chooser (the small form at the end of the
     collapsed sidebar) reachable — only the category/action menus go */
  .sidebar-collapsed > .panel,
  .sidebar-collapsed > .card,
  [id*="Sidebar-Store"],
  [id*="Sidebar-Categories"],
  [id*="Sidebar-Currency"],
  [id*="Sidebar-Actions"],
  [id*="Store_Product_Categories"],
  [id*="Store_Actions"],
  [id*="Currency_Chooser"] {
    display: none !important;
  }
  /* the loose currency <select> that floats above the plan list */
  #order-standard_cart form[action*="currency"],
  .cart-currency-chooser {
    display: none !important;
  }
  .sidebar-collapsed {
    display: block !important;
    margin-bottom: 16px;
  }
  .sidebar-collapsed .pull-right,
  .sidebar-collapsed .float-right {
    float: none !important;
    display: block !important;
  }
  .sidebar-collapsed select[name="currency"] {
    display: block !important;
    width: 100% !important;
  }
  /* close the gap the hidden panels leave behind */
  #order-standard_cart .row > [class*="col-"]:empty { display: none !important; }
}

/* --- Product recommendations in the "Added to cart" modal --------------- */
/* WHMCS paints these rows dark and colours the price/button inline from the
   product's accent colour; !important beats the inline styles. */

.product-recommendation {
  background: var(--bl-surface) !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: var(--bl-radius) !important;
  overflow: hidden;
  margin-bottom: 10px;
}
.product-recommendation .header,
.product-recommendation .header.header-static {
  background: var(--bl-surface) !important;
  background-image: none !important;
  border: 0 !important;
}
.product-recommendation .headline { color: var(--bl-navy) !important; }
.product-recommendation .tagline { color: rgba(13, 27, 51, 0.62) !important; }
.product-recommendation .price,
.product-recommendation .price span {
  color: var(--bl-brick) !important;
  font-weight: 600;
}
.product-recommendation .expander,
.product-recommendation .expander i { color: var(--bl-gold) !important; }
.product-recommendation .btn-add {
  background-color: var(--bl-brick) !important;
  background-image: none !important;
  border-color: var(--bl-brick) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.product-recommendation .btn-add:hover { background-color: var(--bl-brick-600) !important; }
.product-recommendation .btn-add .text,
.product-recommendation .btn-add .arrow,
.product-recommendation .btn-add i { color: var(--bl-cream) !important; }
.product-recommendation .btn-add .arrow { background-color: var(--bl-brick-600) !important; }
.product-recommendation .body {
  background: rgba(236, 226, 205, 0.28) !important;
  color: var(--bl-text) !important;
}
.product-recommendation .body:empty,
.product-recommendation .body p:empty { display: none; }

/* Bootstrap's blue focus/active flash on buttons — replace with gold ring */
.btn:focus, .btn:active, .btn.active, .btn:focus-visible,
.btn:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 3px var(--bl-gold-soft) !important;
  outline: none !important;
}
.btn-primary:focus, .btn-primary:active,
.btn-info:focus, .btn-success:focus, .btn-checkout:focus {
  background: var(--bl-brick-600) !important;
  border-color: var(--bl-brick-600) !important;
}

/* --- MarketConnect promo strips (.mc-promos) --------------------------- */
/* Vendor artwork stays; only the copy, price and button are re-themed so the
   text is legible on their dark headers. */

.mc-promos .mc-promo {
  border-radius: var(--bl-radius) !important;
  overflow: hidden;
  margin-bottom: 12px;
}
.mc-promos .mc-promo > .header {
  background: var(--bl-surface) !important;
  background-image: none !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: var(--bl-radius) !important;
}
.mc-promos .mc-promo > .header .headline,
.mc-promos .mc-promo > .header .content,
.mc-promos .mc-promo > .header .expander i {
  color: var(--bl-navy) !important;
  text-shadow: none !important;
}
.mc-promos .mc-promo > .header .tagline { color: rgba(13, 27, 51, 0.66) !important; }
.mc-promos .mc-promo > .header .price {
  color: var(--bl-brick) !important;
  font-weight: 600;
}
.mc-promos .mc-promo .btn-add {
  background: var(--bl-brick) !important;
  background-image: none !important;
  border-color: var(--bl-brick) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mc-promos .mc-promo .btn-add:hover {
  background: var(--bl-brick-600) !important;
  border-color: var(--bl-brick-600) !important;
}
.mc-promos .mc-promo .btn-add,
.mc-promos .mc-promo .btn-add .text,
.mc-promos .mc-promo .btn-add .arrow,
.mc-promos .mc-promo .btn-add i {
  color: var(--bl-cream) !important;
}
.mc-promos .mc-promo .body {
  background: rgba(236, 226, 205, 0.28) !important;
  border: 1px solid var(--bl-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--bl-radius) var(--bl-radius) !important;
}
.mc-promos .mc-promo .body,
.mc-promos .mc-promo .body li {
  color: var(--bl-text) !important;
}
.mc-promos .mc-promo .body li i.fas { color: #7a8a5e !important; }

/* The blue rule WHMCS draws under the cart line items */
#order-standard_cart .view-cart-items,
.view-cart-items {
  border-bottom: 1px solid var(--bl-line) !important;
}

/* Cart items header strip (twenty-one's blue bar above the line items) */
.view-cart-items-header, .cart-items-header, .summary-container .header {
  background: var(--bl-navy) !important;
  background-image: none !important;
  color: var(--bl-cream) !important;
  border: 0 !important;
  border-radius: var(--bl-radius) var(--bl-radius) 0 0 !important;
  font-weight: 600;
  padding: 12px 16px;
}
.view-cart-items-header * { color: var(--bl-cream) !important; }

/* Cart table header: WHMCS blue → navy */
#order-standard_cart .table > thead > tr > th,
#order-standard_cart thead th,
#cart .table thead th,
.cart-table thead th,
#products thead th {
  background: var(--bl-navy) !important;
  color: var(--bl-cream) !important;
  border-color: var(--bl-navy) !important;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 14px;
}

/* Empty Cart button and the blue rule above it */
#btnEmptyCart, .btn-empty-cart,
a[href*="a=empty"], a[href*="emptyCart"], button[name="empty"] {
  background: var(--bl-brick) !important;
  border-color: var(--bl-brick) !important;
  color: var(--bl-cream) !important;
  border-radius: 999px !important;
}
#btnEmptyCart:hover, .btn-empty-cart:hover, a[href*="a=empty"]:hover {
  background: var(--bl-brick-600) !important;
  border-color: var(--bl-brick-600) !important;
}
#order-standard_cart .empty-cart-container,
#order-standard_cart .cart-footer,
.cart-actions {
  border-top: 1px solid var(--bl-line) !important;
}

/* Any element still carrying Bootstrap's info/primary fills.
   Scoped away from the cart modal, whose rows are handled above. */
.bg-info:not(.recommendation), .bg-primary:not(.recommendation),
.panel-info > .panel-heading, .card-info > .card-header {
  background: var(--bl-navy) !important;
  color: var(--bl-cream) !important;
  border-color: var(--bl-navy) !important;
}

/* View Cart in the top bar — was Bootstrap blue */
#top-bar .btn, .top-bar .btn,
a.btn[href*="cart.php?a=view"], #btnViewCart, .btn-view-cart {
  background: var(--bl-brick) !important;
  border-color: var(--bl-brick) !important;
  color: var(--bl-cream) !important;
  border-radius: 999px !important;
}
#top-bar .btn:hover, .top-bar .btn:hover,
a.btn[href*="cart.php?a=view"]:hover, #btnViewCart:hover, .btn-view-cart:hover {
  background: var(--bl-brick-600) !important;
  border-color: var(--bl-brick-600) !important;
}

/* Native radios and checkboxes: brick instead of browser blue */
input[type="radio"], input[type="checkbox"] { accent-color: var(--bl-brick); }
.form-check-input:checked, .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--bl-brick) !important;
  border-color: var(--bl-brick) !important;
}

/* --- Store / order flow ----------------------------------------------- */

#order-standard_cart .products .product,
#order-boxes .product-box,
.product-group .product {
  background: var(--bl-surface);
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-radius);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(.2, .7, .2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
#order-standard_cart .products .product:hover,
#order-boxes .product-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--bl-shadow);
  border-color: rgba(211, 171, 82, 0.65);
}
#order-standard_cart .products .product header,
#order-boxes .product-box header,
#order-boxes .product-box .header {
  background: var(--bl-navy);
  color: var(--bl-cream);
  border-bottom: 0;
  padding: 20px 22px;
}
#order-standard_cart .products .product header h3,
#order-boxes .product-box header h3 {
  color: var(--bl-cream);
  font-family: var(--bl-heading);
  font-size: 18px;
  margin: 0;
}
#order-standard_cart .products .product .price,
#order-boxes .product-box .price,
.product-price {
  font-family: var(--bl-heading);
  font-weight: 700;
  font-size: 30px;
  color: var(--bl-brick);
}
#order-standard_cart .products .product ul,
#order-boxes .product-box ul { padding-left: 0; list-style: none; }
#order-standard_cart .products .product ul li,
#order-boxes .product-box ul li {
  border-bottom: 1px solid var(--bl-line);
  padding: 11px 0;
  font-size: 14.5px;
}
#order-standard_cart .products .product ul li:last-child { border-bottom: 0; }

/* Featured / recommended product gets the gold treatment from the site */
#order-standard_cart .products .product.featured,
#order-boxes .product-box.featured,
.product.recommended {
  border-color: var(--bl-gold);
  box-shadow: 0 0 0 3px var(--bl-gold-soft);
}
#order-standard_cart .products .product.featured header,
#order-boxes .product-box.featured header {
  background: linear-gradient(120deg, var(--bl-navy), var(--bl-navy-700));
}

/* Cart summary, order review, checkout */
#order-standard_cart .cart-body, .order-summary, #order-summary,
.summary-container, #total-due {
  background: var(--bl-surface);
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-radius);
}
.order-summary .total, #total-due .amount, .summary-total {
  font-family: var(--bl-heading);
  font-weight: 700;
  color: var(--bl-brick);
}
#order-standard_cart .cart-sidebar, .cart-sidebar {
  background: var(--bl-surface);
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-radius);
}
.cycle-selector .btn, .billing-cycle .btn { border-radius: 999px; }
#order-standard_cart .term-options .term,
.billing-cycle-options label {
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
#order-standard_cart .term-options .term:hover,
.billing-cycle-options label:hover { border-color: var(--bl-gold); background: var(--bl-gold-soft); }
#order-standard_cart .term-options .term.selected,
.billing-cycle-options input:checked + label {
  border-color: var(--bl-brick);
  background: var(--bl-brick-100);
}

/* Progress / checkout steps */
.order-steps, .checkout-steps, .nav-pills {
  font-family: var(--bl-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-pills .nav-link.active, .order-steps .active {
  background: var(--bl-brick);
  color: var(--bl-cream);
  border-radius: 999px;
}

/* --- Sidebars (client area) ------------------------------------------- */

.sidebar .panel, .panel-sidebar {
  border-radius: var(--bl-radius);
  border-color: var(--bl-line);
}
.list-group-item {
  border-color: var(--bl-line);
  font-size: 14.5px;
  color: var(--bl-text);
  padding: 13px 18px;
}
.list-group-item:first-child { border-radius: var(--bl-radius) var(--bl-radius) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--bl-radius) var(--bl-radius); }
.list-group-item.active, .list-group-item-action:hover {
  background: var(--bl-brick-100);
  border-color: var(--bl-line);
  color: var(--bl-brick-600);
  font-weight: 600;
}

/* --- Footer ------------------------------------------------------------ */

#footer, .footer {
  background: var(--bl-navy);
  color: rgba(253, 248, 240, 0.72);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--bl-brick), var(--bl-gold), var(--bl-brick)) 1;
  padding: 42px 0 34px;
  font-size: 14px;
}
#footer a, .footer a { color: rgba(253, 248, 240, 0.86); }
#footer a:hover, .footer a:hover { color: var(--bl-gold); }

/* --- Language chooser: keep only English and Italian ----------------- */
/* CSS-only trim of the language menu; the definitive fix is deactivating the
   other language files in WHMCS (see README). */
#languageChooser .dropdown-menu a,
.language-chooser .dropdown-menu a { display: none; }
#languageChooser .dropdown-menu a[href*="language=english"],
#languageChooser .dropdown-menu a[href*="language=italian"],
.language-chooser .dropdown-menu a[href*="language=english"],
.language-chooser .dropdown-menu a[href*="language=italian"] { display: block; }

/* --- Mobile ----------------------------------------------------------- */

@media (max-width: 767px) {
  body { font-size: 15px; }
  .card-body, .panel-body { padding: 18px; }
  .btn { padding: 12px 22px; }
  .btn-block { display: block; width: 100%; }
  .header-lined { margin-bottom: 22px; }
  .table thead { display: none; }
  .table.table-responsive-stack td { display: block; text-align: left; }
  #main-body { padding: 26px 0 40px; }
  .home-shortcuts { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .home-shortcuts .shortcut:hover,
  #order-boxes .product-box:hover { transform: none; }
  * { transition-duration: 0.01ms !important; }
}


/* ==========================================================================
   Bytelegion 2026: the client area in the bytelegion.site world.
   Legion red ground for the header, navy for navigation and data, gold for
   highlights, marble for the page. Big Shoulders (display), Castoro Titling
   (inscriptions), Geist (text). Square corners everywhere.
   This layer sits after the previous custom.css, whose tokens it remaps.
   ========================================================================== */

:root {
  --lg-red: #a11d18;
  --lg-red-2: #911a17;
  --lg-red-3: #7c1512;
  --lg-red-ink: #ffe3dc;
  --lg-navy: #02182a;
  --lg-navy-2: #0b2740;
  --lg-navy-3: #123250;
  --lg-navy-ink: #c3cfda;
  --lg-gold: #d3af5f;
  --lg-marble: #f1f2f3;
  --lg-stone: #dfe2e5;
  --lg-line: #d5dade;
  --lg-ink-2: #3a4756;
  --lg-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --lg-roman: 'Castoro Titling', 'Times New Roman', serif;
  --lg-text: 'Geist', system-ui, -apple-system, sans-serif;
}

html body { background: var(--lg-marble); color: var(--lg-navy); font-family: var(--lg-text); font-size: 15px; line-height: 1.55; }
::selection { background: var(--lg-gold); color: var(--lg-navy); }
a { color: var(--lg-red); }
a:hover, a:focus { color: var(--lg-red-3); }
*:focus-visible { outline: 3px solid var(--lg-gold) !important; outline-offset: 2px; }

h1, h2, h3, .h1, .h2, .h3, .header-lined h1, .panel-title, .card-title {
  font-family: var(--lg-display);
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.95;
  color: var(--lg-navy);
}
h4, h5, h6, .h4, .h5 { font-family: var(--lg-text); font-weight: 600; text-transform: none; color: var(--lg-navy); }
.header-lined { border-bottom: 0; margin-bottom: 28px; }
.header-lined::after { display: none; }
div.header-lined h1, .header-lined h1 { font-size: 52px; margin: 0; color: var(--lg-navy) !important; }
div.header-lined h1 small, .header-lined h1 small { font-family: var(--lg-roman); font-size: 15px; letter-spacing: 0.14em; color: var(--lg-ink-2); text-transform: uppercase; display: block; margin-top: 10px; }
.breadcrumb { background: transparent; padding: 0; font-size: 13px; }
.breadcrumb > li + li::before { color: var(--lg-ink-2); }

/* --- Header: red band, helmet on a marble disc ------------------------------- */
section#header { background: var(--lg-red) !important; border: 0; padding: 14px 0; }
section#header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#header .logo { order: 1; float: none; margin: 0; padding: 0; }
#header .top-nav { order: 2; float: none; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.bl-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; }
.bl-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--lg-marble); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--lg-gold); flex: none; }
#header .bl-mark img, #footer .bl-mark img, .bl-mark img { width: 26px !important; height: auto !important; max-height: none !important; position: static !important; }
.bl-word { font-family: var(--lg-roman); text-transform: uppercase; letter-spacing: 0.28em; font-size: 17px; color: var(--lg-marble); }
#header .top-nav > li { float: none; }
#header .top-nav > li > a, #header .top-nav > li > a:focus { color: var(--lg-marble); font-weight: 500; font-size: 14px; padding: 8px 10px; background: transparent; }
#header .top-nav > li > a:hover { color: var(--lg-marble); box-shadow: inset 0 -2px 0 var(--lg-marble); }
#header .top-nav .bl-back a { color: var(--lg-red-ink); }
#header .top-nav > li.primary-action { border: 0; padding: 0; margin-left: 6px; }
#header .top-nav > li.primary-action > a.btn,
#header .top-nav > li.primary-action > a.btn:hover {
  background: var(--lg-navy) !important; color: var(--lg-gold) !important; border: 0 !important; border-radius: 0 !important;
  padding: 11px 18px !important; font-weight: 600; box-shadow: none !important; transform: none;
}
#header .top-nav > li.primary-action > a.btn:hover { background: var(--lg-navy-2) !important; }
#header .top-nav .caret { border-top-color: currentColor; }
.popover { border-radius: 0; border: 0; box-shadow: 0 14px 30px -12px rgba(2, 24, 42, 0.45); }
.popover-content a { color: var(--lg-navy); }

/* --- Main navigation: navy bar ------------------------------------------------ */
#main-menu, #main-menu .navbar-main { background: var(--lg-navy); border: 0; border-radius: 0; margin: 0; min-height: 52px; }
#main-menu .navbar-nav > li > a, #main-menu .navbar-nav > li > a:focus {
  color: var(--lg-marble) !important; font-weight: 500; font-size: 14.5px; padding: 16px 14px; background: transparent !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none;
}
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li.active > a,
#main-menu .navbar-nav > .open > a { color: var(--lg-gold) !important; background: transparent !important; box-shadow: inset 0 -3px 0 var(--lg-gold); }
#main-menu .navbar-nav > li > a::after { display: none !important; }
#main-menu .navbar-nav a[href*="knowledgebase"] { background: transparent !important; border: 0 !important; color: var(--lg-marble) !important; }
#main-menu .navbar-toggle { border: 0; border-radius: 0; background: var(--lg-red); margin: 8px 0; }
#main-menu .navbar-toggle .icon-bar { background: var(--lg-marble); }
#main-menu .navbar-collapse { border: 0; box-shadow: none; }
.dropdown-menu { border-radius: 0 !important; border: 0; padding: 6px 0; box-shadow: 0 18px 34px -14px rgba(2, 24, 42, 0.5); }
.dropdown-menu > li > a { color: var(--lg-navy); padding: 9px 18px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--lg-marble); color: var(--lg-red); }
@media (max-width: 767px) {
  #main-menu .navbar-nav .open .dropdown-menu > li > a { color: var(--lg-navy-ink); }
  #main-menu .navbar-nav .open .dropdown-menu { background: var(--lg-navy-2); }
}

/* --- Home: red hero with the domain search, navy shortcuts --------------------- */
section#home-banner { display: block !important; background: var(--lg-red) !important; padding: 56px 0 64px; margin: 0; border: 0; }
#home-banner .container { text-align: left !important; }
.bl-hero { font-family: var(--lg-display); font-variation-settings: "opsz" 72; font-weight: 900; text-transform: uppercase; color: var(--lg-marble) !important; font-size: clamp(58px, 9vw, 132px); line-height: 0.84; margin: 0 0 18px; }
.bl-hero span { display: block; color: var(--lg-gold); }
.bl-hero-lead { color: var(--lg-red-ink); font-size: 18px; max-width: 44ch; margin: 0 0 28px; }
#home-banner h2:not(.bl-hero) { display: none; }
#home-banner form, #frmDomainHomepage { display: block !important; }
.home-shortcuts { background: var(--lg-navy) !important; border: 0; padding: 0; margin: 0; }
.home-shortcuts .lead { font-family: var(--lg-roman); text-transform: uppercase; letter-spacing: 0.16em; font-size: 14px; color: var(--lg-gold); margin: 0; padding: 30px 0; }
.home-shortcuts ul { margin: 0; }
.home-shortcuts ul li { border-color: var(--lg-navy-3) !important; }
.home-shortcuts ul li a { background: transparent !important; color: var(--lg-marble) !important; padding: 22px 10px !important; }
.home-shortcuts ul li a:hover { background: var(--lg-navy-2) !important; }
.home-shortcuts ul li a i { color: var(--lg-gold) !important; font-size: 24px; }
.home-shortcuts ul li a p { font-family: var(--lg-display); font-variation-settings: "opsz" 72; font-weight: 800; text-transform: uppercase; font-size: 19px; letter-spacing: 0.02em; margin-top: 8px; }
.home-shortcuts ul li a p span { display: none; }

/* --- Body spacing ---------------------------------------------------------------- */
section#main-body { background: var(--lg-marble) !important; padding: 48px 0 72px; }

/* --- Buttons: solid, square ---------------------------------------------------- */
.btn { border-radius: 0 !important; font-family: var(--lg-text); font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none !important; transform: none !important; }
.btn-primary, .btn-success, .btn-info, .btn-checkout, #btnCompleteOrder, .btn-order-now {
  background: var(--lg-red) !important; border-color: var(--lg-red) !important; color: var(--lg-marble) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-checkout:hover, #btnCompleteOrder:hover {
  background: var(--lg-red-3) !important; border-color: var(--lg-red-3) !important; color: #fff !important;
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary {
  background: transparent !important; border: 2px solid var(--lg-navy) !important; color: var(--lg-navy) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover { background: var(--lg-navy) !important; color: var(--lg-gold) !important; }
.btn-warning { background: var(--lg-gold) !important; border-color: var(--lg-gold) !important; color: var(--lg-navy) !important; }
.btn-danger { background: var(--lg-red-3) !important; border-color: var(--lg-red-3) !important; color: #fff !important; }
.btn-link { color: var(--lg-red) !important; text-decoration: underline; text-underline-offset: 4px; }

/* --- Forms ------------------------------------------------------------------- */
.form-control, select.form-control, textarea.form-control, .input-group-addon {
  border-radius: 0 !important; border: 2px solid var(--lg-line) !important; background: #fff; color: var(--lg-navy); box-shadow: none !important; height: auto; min-height: 44px; padding: 10px 12px;
}
.form-control:focus { border-color: var(--lg-gold) !important; }
label, .control-label { font-weight: 600; color: var(--lg-navy); }

/* --- Panels, sidebars, wells ------------------------------------------------------ */
.panel, .card, .well, .list-group { border-radius: 0 !important; box-shadow: none !important; border-color: var(--lg-line) !important; }
.panel-heading, .card-header { border-radius: 0 !important; background: #fff !important; border-bottom: 1px solid var(--lg-line) !important; }
.panel-title, .panel-heading h3 { font-size: 22px; }
.panel-sidebar .panel-heading { background: var(--lg-navy) !important; border: 0 !important; }
.panel-sidebar .panel-title, .panel-sidebar .panel-heading, .panel-sidebar .panel-heading .fas, .panel-sidebar .panel-heading .far { color: var(--lg-marble) !important; font-size: 20px; }
.list-group-item { border-radius: 0 !important; border-color: var(--lg-line) !important; color: var(--lg-navy); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus, .panel-sidebar .list-group-item.active {
  background: var(--lg-marble) !important; color: var(--lg-red) !important; border-color: var(--lg-line) !important; font-weight: 700; box-shadow: inset 4px 0 0 var(--lg-red);
}
.sidebar .list-group-item:hover:not(.active) { background: var(--lg-marble) !important; color: var(--lg-red) !important; }

/* --- Tables ---------------------------------------------------------------------- */
.table > thead > tr > th, .table thead th { background: var(--lg-navy) !important; color: var(--lg-marble) !important; font-family: var(--lg-display); font-variation-settings: "opsz" 72; font-weight: 800; text-transform: uppercase; font-size: 16px; letter-spacing: 0.02em; border: 0 !important; }
.table > tbody > tr > td { border-color: var(--lg-line) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #f7f8f9; }

/* --- Labels, badges, alerts ------------------------------------------------------- */
.label, .badge { border-radius: 0 !important; font-family: var(--lg-text); font-weight: 600; letter-spacing: 0.02em; }
.label-default { background: var(--lg-ink-2); }
.alert { border-radius: 0 !important; border-width: 0 0 0 0; }

/* --- Store: plan cards and prices -------------------------------------------------- */
.header-lined + p, #order-standard_cart .header-lined p { color: var(--lg-ink-2); }
.domain-pricing .tld-filters a, .tld-filters .label { border-radius: 0 !important; }
.featured-tld .price { border-radius: 0 !important; }
.featured-tld .img-container { border-radius: 0 !important; }
.view-cart-items-header, .summary-container .header, .order-summary h2 { background: var(--lg-navy) !important; border-radius: 0 !important; }
.summary-container, #orderSummary, .order-summary { border-radius: 0 !important; }
.order-summary .total-due-today .amount, .summary-container .total-due-today .amount { font-family: var(--lg-display); font-variation-settings: "opsz" 72; font-weight: 900; font-size: 34px; color: var(--lg-red); }
.modal-content { border-radius: 0 !important; }

/* --- Footer: navy, like the site -------------------------------------------------- */
section#footer.bl-footer { background: var(--lg-navy) !important; color: var(--lg-marble); border: 0 !important; padding: 48px 0 32px; margin: 0; }
.bl-footer .bl-foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.bl-footer .bl-foot-tag { color: var(--lg-navy-ink); margin: 4px 0 0; font-size: 14px; }
.bl-footer .bl-foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bl-footer .bl-foot-links a { color: var(--lg-marble) !important; font-weight: 500; text-decoration: none; padding: 6px 0; }
.bl-footer .bl-foot-links a:hover { color: var(--lg-gold) !important; }
.bl-footer .bl-legal { border-top: 1px solid var(--lg-navy-3); margin: 28px 0 0; padding-top: 20px; color: var(--lg-navy-ink); font-size: 13px; }
.bl-footer .bl-legal a { color: var(--lg-marble) !important; }
.bl-footer .back-to-top { float: none; position: absolute; right: 15px; top: 0; border-radius: 0; background: var(--lg-navy-2); color: var(--lg-gold); }
.bl-footer .container { position: relative; }

@media (max-width: 767px) {
  .bl-word { font-size: 14px; letter-spacing: 0.22em; }
  .bl-mark { width: 38px; height: 38px; }
  #header .bl-mark img, #footer .bl-mark img { width: 22px !important; }
  #header .top-nav { width: 100%; justify-content: flex-start; }
  div.header-lined h1 { font-size: 38px; }
  .bl-hero { font-size: 17vw; }
  section#home-banner { padding: 40px 0 48px; }
  .home-shortcuts ul li a p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* --- Specificity fixes against the Six base (section#… selectors) ------------------- */
section#header .container::before, section#header .container::after,
section#footer.bl-footer .container::before, section#footer.bl-footer .container::after { display: none !important; }
section#home-banner h2.bl-hero { padding: 0 !important; margin: 0 0 18px -0.03em !important; }

section#home-banner h2.bl-hero { font-size: clamp(58px, 9vw, 132px) !important; line-height: 0.84 !important; }
@media (max-width: 767px) { section#home-banner h2.bl-hero { font-size: 19vw !important; } }

/* --- Domain pricing: category filters ---------------------------------------------- */
.tld-filters .badge, .tld-filters a.badge { border-radius: 0 !important; background: var(--lg-stone) !important; color: var(--lg-navy) !important; font-weight: 600; padding: 7px 10px; font-size: 12px; }
.tld-filters .badge.badge-success, .tld-filters a.badge-success, .tld-filters .badge.active { background: var(--lg-navy) !important; color: var(--lg-gold) !important; }
.featured-tld { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--lg-line); }

/* --- Home without announcements: no empty band between the shortcuts and the footer ---- */
section#main-body:has(.bl-home-empty) { display: none; }


/* --- Home domain search: a light field that reads as a field on the red ground ------- */
#frmDomainHomepage.bl-search { max-width: 780px; margin: 0; }
.bl-search-label { display: block; font-family: var(--lg-roman); text-transform: uppercase; letter-spacing: 0.2em; font-size: 13px; font-weight: 400; color: var(--lg-gold); margin: 0 0 12px; }
.bl-search-box { display: flex; align-items: stretch; gap: 6px; background: var(--lg-marble); padding: 6px; box-shadow: 0 0 0 1px rgba(2, 24, 42, 0.25), 0 18px 40px -24px rgba(2, 24, 42, 0.7); }
.bl-search-box:focus-within { outline: 3px solid var(--lg-gold); outline-offset: 3px; }
section#home-banner .bl-search-box textarea#message, section#home-banner .bl-search-box input.form-control {
  flex: 1; min-width: 0; display: block; height: 60px; min-height: 60px; max-height: 160px; resize: none; overflow-y: auto;
  margin: 0; padding: 17px 16px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
  background: transparent !important; color: var(--lg-navy) !important; font: 500 21px/1.25 var(--lg-text); position: static !important; width: auto !important;
}
section#home-banner .bl-search-box textarea::placeholder, section#home-banner .bl-search-box input::placeholder { color: #75808c; opacity: 1; }
.bl-search-actions { display: flex; gap: 6px; flex: none; }
section#home-banner .bl-search-actions .btn { height: 60px; padding: 0 28px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font: 600 17px/1 var(--lg-text); }
section#home-banner .bl-search-actions .btn.search { background: var(--lg-navy) !important; color: var(--lg-gold) !important; }
section#home-banner .bl-search-actions .btn.search:hover { background: var(--lg-navy-3) !important; }
section#home-banner .bl-search-actions .btn.transfer { background: transparent !important; color: var(--lg-navy) !important; padding: 0 16px; text-decoration: underline; text-decoration-color: var(--lg-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
section#home-banner .bl-search-actions .btn.transfer:hover { color: var(--lg-red) !important; }
.bl-search-hint { color: var(--lg-red-ink); font-size: 15px; margin: 14px 0 0; max-width: 60ch; }
.bl-search-options { margin: 14px 0 0; color: var(--lg-red-ink); }
.bl-search-options > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; text-decoration: underline; text-decoration-color: rgba(255, 227, 220, 0.45); text-underline-offset: 4px; }
.bl-search-options > summary::-webkit-details-marker { display: none; }
.bl-search-options > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--lg-gold); border-bottom: 2px solid var(--lg-gold); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.bl-search-options[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.bl-search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bl-search-filters .btn-group > .btn, .bl-search-filters .multiselect { background: var(--lg-navy) !important; color: var(--lg-marble) !important; border: 0 !important; border-radius: 0 !important; height: 42px; padding: 0 14px; font-weight: 500; }
.bl-search-filters .caret { border-top-color: var(--lg-gold); }
.bl-search-filters .multiselect-container { border-radius: 0; }
section#home-banner .bl-search-filters label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 6px; color: var(--lg-red-ink) !important; font-weight: 500; }
@media (max-width: 640px) {
  .bl-search-box { flex-direction: column; }
  section#home-banner .bl-search-box textarea#message, section#home-banner .bl-search-box input.form-control { height: 56px; min-height: 56px; font-size: 19px; padding: 15px 12px; }
  .bl-search-actions .btn.search { flex: 1; }
}

/* --- Store: product cards (every product group uses bytelegion_cart) ------------------ */
body #order-standard_cart .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 8px 0 24px; }
body #order-standard_cart .products > .row { display: contents; }
body #order-standard_cart .products > .row > [class*="col-"] { width: auto; float: none; padding: 0; min-height: 0; }
body #order-standard_cart .products .product { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; background: #fff; border: 0 !important; border-radius: 0 !important; box-shadow: 0 0 0 1px var(--lg-line) !important; }
body #order-standard_cart .products .product header { float: none; margin: 0; padding: 20px 22px 18px; background: var(--lg-navy) !important; border: 0 !important; border-bottom: 4px solid var(--lg-gold) !important; border-radius: 0 !important; }
body #order-standard_cart .products .product header span[id$="-name"] { display: block; font-family: var(--lg-display); font-variation-settings: "opsz" 72; font-weight: 900; text-transform: uppercase; color: var(--lg-marble) !important; font-size: 32px; line-height: 0.95; }
body #order-standard_cart .products .product header .qty { color: var(--lg-navy-ink); font-size: 13px; font-style: normal; }
body #order-standard_cart .products .product .product-desc { float: none; width: auto; flex: 1; padding: 20px 22px 8px; color: var(--lg-ink-2); font-size: 15px; line-height: 1.6; }
body #order-standard_cart .products .product .product-desc p { margin: 0 0 10px; }
body #order-standard_cart .products .product .product-desc ul { margin: 0; padding: 0; list-style: none; }
body #order-standard_cart .products .product footer { float: none; width: auto; margin: 0 22px 22px; padding: 18px 0 0; border-top: 1px solid var(--lg-line); text-align: left; display: flex; flex-direction: column; gap: 14px; }
body #order-standard_cart .products .product .product-pricing { margin: 0; color: var(--lg-ink-2); font-size: 13px; line-height: 1.4; }
body #order-standard_cart .products .product .product-pricing .price { font-family: var(--lg-display); font-variation-settings: "opsz" 72; font-weight: 900; color: var(--lg-red) !important; font-size: 42px; line-height: 1; }
body #order-standard_cart .products .product .product-pricing br + br, body #order-standard_cart .products .product .product-pricing br:last-of-type { display: none; }
body #order-standard_cart .products .product .btn-order-now { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin: 0; padding: 0 16px; background: var(--lg-red) !important; color: var(--lg-marble) !important; border: 0 !important; border-radius: 0 !important; font: 600 16px/1 var(--lg-text); box-shadow: none !important; }
body #order-standard_cart .products .product .btn-order-now:hover { background: var(--lg-red-3) !important; }
body #order-standard_cart .products > .row::before, body #order-standard_cart .products > .row::after { display: none !important; content: none !important; }
html body #order-standard_cart .products .product div.product-desc { float: none !important; width: auto !important; padding: 20px 22px 8px !important; font-size: 15px !important; }
html body #order-standard_cart .products .product footer { float: none !important; width: auto !important; margin: 0 22px 22px !important; font-size: 13px !important; text-align: left !important; }
html body #order-standard_cart .products .product div.product-pricing { margin: 0 !important; }
html body #order-standard_cart .products .product div.product-pricing span.price { font-size: 42px !important; }
html body #order-standard_cart .products .product header span { font-size: 32px; }

/* --- Cart: square buttons, recommendation in the house colours ----------------------- */
html body #order-standard_cart #btnEmptyCart { border-radius: 0 !important; background: transparent !important; color: var(--lg-red) !important; border: 0 !important; font-weight: 600; }
html body #order-standard_cart #btnEmptyCart:hover { color: var(--lg-red-3) !important; text-decoration: underline; }
html body .product-recommendation .btn-add, html body .product-recommendations .btn-add { border-radius: 0 !important; background: var(--lg-red) !important; color: var(--lg-marble) !important; border: 0 !important; overflow: hidden; }
html body .product-recommendation .btn-add .arrow, html body .product-recommendations .btn-add .arrow { background: var(--lg-red-3) !important; border-radius: 0 !important; }
html body .product-recommendation, html body .product-recommendations .product-recommendation { border-radius: 0 !important; border-color: var(--lg-line) !important; }