/*!
 * DevEdge Brand Theme Integration for Lagom 2 WHMCS Theme
 * Matches devedge.co.uk (Nocturne / DevEdge v4 Design System)
 */

:root {
  /* ==========================================================================
     DevEdge v4 Design Tokens
     ========================================================================== */
  --bg: #131719;
  --bg-2: #191F21;
  --surface: #1F272A;
  --text: #ECEEEE;
  --muted: #8E9A9C;
  --accent: #62D1DB;
  --accent-soft: #9AE6ED;
  --line: rgba(236, 238, 238, 0.12);
  --h: 'Sora', sans-serif;
  --b: 'Inter', sans-serif;

  /* ==========================================================================
     Lagom 2 System Variable Overrides
     ========================================================================== */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-system: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --brand-primary: #62D1DB;
  --brand-primary-lighter: #9AE6ED;
  --brand-primary-lighter-2: rgba(98, 209, 219, 0.4);
  --brand-primary-lighter-3: rgba(98, 209, 219, 0.2);
  --brand-primary-lighter-4: rgba(98, 209, 219, 0.1);
  --brand-primary-darker: #45B8C3;
  --brand-primary-gradient-start: #45B8C3;
  --brand-primary-gradient-end: #62D1DB;
  --brand-primary-gradient-h: linear-gradient(90deg, #62D1DB 0%, #45B8C3 100%);
  --brand-primary-gradient-v: linear-gradient(180deg, #62D1DB 0%, #45B8C3 100%);

  --brand-secondary: #191F21;
  --brand-secondary-lighter: #1F272A;
  --brand-secondary-darker: #131719;

  --brand-info: #62D1DB;
  --brand-info-lighter: #9AE6ED;

  --gray-base: #ECEEEE;
  --gray-lighter: #C2C8C9;
  --gray-lighter-2: #8E9A9C;
  --gray-lighter-3: rgba(236, 238, 238, 0.18);
  --gray-lighter-4: rgba(236, 238, 238, 0.12);
  --gray-faded: #191F21;
  --gray-darker: #ECEEEE;

  --text-body-color: #ECEEEE;
  --text-heading-color: #ECEEEE;
  --text-lighter-color: #8E9A9C;
  --text-faded-color: #6C7779;
  --link-color: #62D1DB;
  --link-hover-color: #9AE6ED;

  --ui-block-bg: #1F272A;
  --ui-block-header-bg: #191F21;
  --ui-block-border: 1px solid rgba(236, 238, 238, 0.12);
  --ui-block-border-radius: 12px;
  --ui-block-border-radius-lg: 14px;
  --ui-block-divider-color: rgba(236, 238, 238, 0.12);
  --ui-block-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

  --main-top-bg: rgba(19, 23, 25, 0.92);
  --main-top-border-bottom: 1px solid rgba(236, 238, 238, 0.12);
  --main-body-sidebar-content-bg: #1F272A;

  --tooltip-bg: #191F21;
  --tooltip-color: #ECEEEE;
  --tooltip-arrow-color: #191F21;
  --popover-bg: #191F21;
  --popover-body-color: #ECEEEE;
  --popover-border-color: rgba(236, 238, 238, 0.12);
  --popover-header-bg: #1F272A;
  --popover-arrow-color: #191F21;
  --dropdown-bg: #191F21;
  --dropdown-border-color: rgba(236, 238, 238, 0.12);
  --dropdown-link-color: #ECEEEE;
  --dropdown-link-hover-color: #62D1DB;
  --dropdown-link-hover-bg: rgba(98, 209, 219, 0.12);
}

/* ==========================================================================
   Global Body & Base Typography
   ========================================================================== */
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--b) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.lagom {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: #ECEEEE;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--h) !important;
  color: var(--text) !important;
  letter-spacing: -0.015em;
  font-weight: 500;
}

p, span, div, li, td, th, label, input, select, textarea {
  font-family: var(--b);
}

a {
  color: var(--text);
  transition: color 0.2s ease;
}

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

/* ==========================================================================
   DevEdge Wordmark & Logo Branding
   ========================================================================== */
.devedge-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  gap: 10px;
}

.devedge-brand-wordmark {
  font-family: var(--h) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: -0.02em;
}

.devedge-brand-registered {
  color: var(--accent) !important;
  margin-left: 2px;
  font-size: 13px;
  font-weight: 600;
}

.devedge-portal-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(98, 209, 219, 0.12) !important;
  color: #62D1DB !important;
  border: 1px solid rgba(98, 209, 219, 0.28) !important;
  font-family: var(--h) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin-left: 6px !important;
  box-shadow: 0 0 12px rgba(98, 209, 219, 0.1) !important;
}

/* ==========================================================================
   DevEdge Unified Top Header Navigation (Shared with devedge.co.uk)
   ========================================================================== */
.devedge-navwrap,
.devedge-unified-header {
  position: relative;
  z-index: 1040;
  width: 100%;
  background: rgba(19, 23, 25, 0.98) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line) !important;
  overflow: visible !important;
}

/* Tier 1: Top Brand & Actions Row */
.devedge-top-row,
.devedge-navbar {
  position: relative !important;
  z-index: 1060 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  box-sizing: border-box;
  min-height: 64px;
  overflow: visible !important;
}

.devedge-only-logo {
  justify-content: center;
}

/* Brand Group (Left) */
.devedge-nav-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Tier 2: Dedicated Navigation Row Below */
.devedge-nav-subbar {
  position: relative;
  z-index: 1050;
  border-top: 1px solid rgba(236, 238, 238, 0.07);
  background: rgba(16, 20, 22, 0.75);
  overflow: visible !important;
}

.devedge-subnav-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  min-height: 46px;
  overflow: visible !important;
}

/* Navigation Links in Tier 2 */
.devedge-navlinks {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--h);
  font-size: 13.5px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible !important;
}

.devedge-nav-item {
  position: relative;
  padding: 2px 0;
}

.devedge-nav-link {
  color: #c5cacb !important;
  font-family: var(--h) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 11px 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
}

.devedge-nav-link:hover,
.devedge-nav-item:hover > .devedge-nav-link,
.devedge-nav-item.open > .devedge-nav-link,
.devedge-nav-link.active {
  color: var(--accent) !important;
}

/* Bottom active border bar for Tier 2 nav items */
.devedge-nav-link.active::after,
.devedge-nav-item:hover > .devedge-nav-link::after,
.devedge-nav-item.open > .devedge-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px rgba(98, 209, 219, 0.6);
}

.devedge-nav-arrow {
  font-size: 9px;
  opacity: 0.65;
  transition: transform 0.25s ease;
}

.devedge-nav-item:hover .devedge-nav-arrow,
.devedge-nav-item.open .devedge-nav-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mega Menus & Simple Dropdowns */
.devedge-mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  padding: 10px;
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 9999 !important;
}

.devedge-mega::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 20px;
}

.devedge-nav-item:hover > .devedge-mega,
.devedge-nav-item:focus-within > .devedge-mega,
.devedge-nav-item.open > .devedge-mega {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.devedge-dropdown-simple {
  min-width: 290px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.devedge-mega-grid {
  display: grid;
  gap: 6px;
}

.devedge-mega-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.devedge-mega-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 440px;
}

.devedge-mega-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
}

.devedge-mega-item:hover {
  background: rgba(236, 238, 238, 0.06);
  transform: translateX(3px);
}

.devedge-mega-title {
  display: block;
  font-family: var(--h);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.devedge-mega-item:hover .devedge-mega-title {
  color: var(--accent);
}

.devedge-mega-desc {
  display: block;
  font-family: var(--b);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* Actions Container (Right) */
.devedge-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* WHMCS Native Topbar Elements (Cart, Currency, Notifications, Account) */
.devedge-whmcs-topbar {
  display: flex;
  align-items: center;
}

.devedge-whmcs-topbar ul.top-nav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.devedge-whmcs-topbar ul.top-nav > li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.devedge-whmcs-topbar ul.top-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 7px 12px !important;
  border-radius: 100px !important;
  background: rgba(236, 238, 238, 0.04) !important;
  border: 1px solid var(--line) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.devedge-whmcs-topbar ul.top-nav > li > a:hover,
.devedge-whmcs-topbar ul.top-nav > li.open > a {
  color: var(--accent) !important;
  background: rgba(98, 209, 219, 0.08) !important;
  border-color: rgba(98, 209, 219, 0.3) !important;
}

/* Cart Badge */
.devedge-whmcs-topbar ul.top-nav .badge,
.top-nav .badge {
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-family: var(--h) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 100px !important;
  margin-left: 4px !important;
}

/* User Account & Currency Dropdowns in Topbar */
.devedge-whmcs-topbar ul.top-nav .dropdown-menu,
.devedge-whmcs-topbar .dropdown-menu,
.top-nav .dropdown-menu {
  position: absolute !important;
  z-index: 99999 !important;
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  min-width: 140px !important;
  right: 0 !important;
  left: auto !important;
}

.devedge-whmcs-topbar ul.top-nav .dropdown-menu .dropdown-menu-item,
.top-nav .dropdown-menu .dropdown-menu-item,
.devedge-whmcs-topbar ul.top-nav .dropdown-menu > li,
.top-nav .dropdown-menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.devedge-whmcs-topbar ul.top-nav .dropdown-menu .dropdown-menu-item > a,
.top-nav .dropdown-menu .dropdown-menu-item > a,
.devedge-whmcs-topbar ul.top-nav .dropdown-menu > li > a,
.top-nav .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.devedge-whmcs-topbar ul.top-nav .dropdown-menu .dropdown-menu-item.active > a,
.top-nav .dropdown-menu .dropdown-menu-item.active > a,
.devedge-whmcs-topbar ul.top-nav .dropdown-menu > li.active > a,
.top-nav .dropdown-menu > li.active > a {
  color: var(--accent) !important;
  background: rgba(98, 209, 219, 0.12) !important;
  font-weight: 600 !important;
}

.devedge-whmcs-topbar ul.top-nav .dropdown-menu .dropdown-menu-item > a:hover,
.top-nav .dropdown-menu .dropdown-menu-item > a:hover,
.devedge-whmcs-topbar ul.top-nav .dropdown-menu > li > a:hover,
.top-nav .dropdown-menu > li > a:hover {
  background: rgba(98, 209, 219, 0.18) !important;
  color: var(--accent) !important;
}

.devedge-whmcs-topbar ul.top-nav .dropdown-menu .divider {
  background: var(--line) !important;
  margin: 6px 0 !important;
}

/* Account dropdown: roomier panel, header block and rows */
.top-nav .dropdown-menu:has(> .dropdown-header--account) {
  min-width: 260px !important;
  padding: 10px !important;
}

.top-nav .dropdown-menu > li.dropdown-header--account {
  padding: 12px 14px 14px !important;
  margin: 0 0 6px !important;
  border-bottom: 1px solid var(--line) !important;
}

.top-nav .dropdown-header--account .dropdown-header-desc {
  color: var(--muted) !important;
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

.top-nav .dropdown-header--account .dropdown-header-title {
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.top-nav .dropdown-menu:has(> .dropdown-header--account) > li.nav-divider {
  height: 1px !important;
  margin: 6px 0 !important;
  font-size: 0 !important;
  background: var(--line) !important;
}

.top-nav .dropdown-header--account + li.nav-divider {
  display: none !important;
}

.top-nav .dropdown-menu:has(> .dropdown-header--account) > li > a {
  gap: 12px !important;
  padding: 10px 14px !important;
  margin: 1px 0 !important;
}

.top-nav .dropdown-menu:has(> .dropdown-header--account) > li > a > i {
  width: 16px !important;
  text-align: center !important;
  color: var(--muted) !important;
}

.top-nav .dropdown-menu:has(> .dropdown-header--account) > li > a:hover > i {
  color: var(--accent) !important;
}

/* DevEdge Action Pill Buttons */
.devedge-btn-pill {
  border-radius: 100px !important;
  font-family: var(--h) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 18px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.devedge-btn-register {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

.devedge-btn-register:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(98, 209, 219, 0.06) !important;
}

.devedge-btn-login {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: 1px solid var(--accent) !important;
  font-weight: 600 !important;
}

.devedge-btn-login:hover {
  background: #7ae0e9 !important;
  color: var(--bg) !important;
  box-shadow: 0 4px 16px rgba(98, 209, 219, 0.3) !important;
  transform: translateY(-1px) !important;
}

.devedge-btn-back-website,
.devedge-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  background: rgba(236, 238, 238, 0.05) !important;
  border: 1px solid var(--line) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.devedge-btn-back-website:hover,
.devedge-back-link:hover {
  color: var(--accent) !important;
  background: rgba(98, 209, 219, 0.1) !important;
  border-color: rgba(98, 209, 219, 0.35) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateX(-1px) !important;
}

.devedge-btn-back-website .devedge-back-arrow,
.devedge-back-link .devedge-back-arrow {
  color: var(--accent) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: transform 0.2s ease !important;
}

.devedge-btn-back-website:hover .devedge-back-arrow,
.devedge-back-link:hover .devedge-back-arrow {
  transform: translateX(-3px) !important;
}

.devedge-mob-back-btn {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
  background: rgba(98, 209, 219, 0.08) !important;
  border: 1px solid rgba(98, 209, 219, 0.3) !important;
  color: var(--accent) !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.devedge-mob-back-btn:hover {
  background: rgba(98, 209, 219, 0.16) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Burger Toggle Button */
.devedge-burger-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  transition: border-color 0.2s ease;
}

.devedge-burger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s ease;
}

.devedge-burger-btn:hover {
  border-color: var(--accent);
}

.devedge-burger-btn:hover span {
  background: var(--accent);
}

/* Mobile Drawer Overlay and Panel */
.devedge-mob-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 99990 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s !important;
}

.devedge-mob-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.devedge-mob-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 320px !important;
  max-width: 86vw !important;
  background: #191F21 !important;
  border-right: 1px solid var(--line) !important;
  z-index: 99999 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.7) !important;
}

.devedge-mob-drawer.active {
  transform: translateX(0) !important;
  visibility: visible !important;
}

.devedge-mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.devedge-mob-close {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.devedge-mob-close:hover {
  color: var(--accent);
}

.devedge-mob-drawer-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.devedge-mob-section-title {
  font-family: var(--h);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.devedge-mob-link {
  display: block;
  font-family: var(--h);
  font-size: 14.5px;
  color: var(--text) !important;
  padding: 8px 0;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.devedge-mob-link:hover {
  color: var(--accent) !important;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .devedge-nav-subbar,
  .devedge-navlinks {
    display: none !important;
  }
  .devedge-burger-btn {
    display: flex !important;
  }
  .devedge-nav-actions .devedge-btn-back-website,
  .devedge-nav-actions .devedge-back-link {
    display: none !important;
  }
  .devedge-top-row {
    padding: 12px 16px !important;
    min-height: 60px !important;
  }
}

@media (max-width: 768px) {
  .devedge-top-row,
  .devedge-navbar {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .devedge-btn-register {
    display: none !important;
  }
  .devedge-whmcs-topbar ul.top-nav > li.nav-item-currency,
  .devedge-whmcs-topbar ul.top-nav > li[menuitemname^="Currencies"] {
    display: none !important;
  }
  .devedge-whmcs-topbar ul.top-nav > li.nav-item-cart .item-text,
  .devedge-whmcs-topbar ul.top-nav > li[menuitemname="View Cart"] .item-text {
    display: none !important;
  }
  .devedge-whmcs-topbar ul.top-nav > li > a {
    padding: 7px 10px !important;
  }
}

@media (max-width: 576px) {
  .devedge-navbar {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .devedge-brand-wordmark {
    font-size: 15px !important;
  }
  .devedge-portal-pill {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    letter-spacing: 0.04em !important;
  }
  .devedge-btn-login {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   Hero & Domain Search Banner (DevEdge Dark Glow)
   ========================================================================== */
.main-banner,
.banner-secondary,
.banner-primary,
.banner-home {
  background: radial-gradient(circle at 50% 0%, rgba(98, 209, 219, 0.18), transparent 60%), linear-gradient(180deg, #131719 0%, #191F21 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  position: relative;
  /* visible so the domain search Filters dropdown can hang below the banner;
     the background graphic is still clipped by .banner-bg's own overflow:hidden */
  overflow: visible !important;
  z-index: 5;
  padding: 40px 0 32px !important;
  min-height: auto !important;
}

.main-banner .banner-content {
  padding: 0 !important;
  margin: 0 auto !important;
}

.main-banner .banner-title {
  font-family: var(--h) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  font-size: clamp(28px, 3.5vw, 46px) !important;
  margin-bottom: 20px !important;
}

.main-banner .svg-illustration {
  opacity: 0.18 !important;
  filter: hue-rotate(130deg) brightness(0.85);
  pointer-events: none;
}

/* Domain search pill */
.domain-search-input:not(.hidden),
.search-group.search-group-combined:not(.hidden) {
  background: #1F272A !important;
  border: 1px solid rgba(236, 238, 238, 0.18) !important;
  border-radius: 100px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
  padding: 4px 8px !important;
  display: flex !important;
  align-items: center !important;
}

.domain-search-input .form-control,
.search-group .form-control {
  background: transparent !important;
  border: none !important;
  color: #ECEEEE !important;
  box-shadow: none !important;
}

.domain-search-input .form-control::placeholder,
.search-group .form-control::placeholder {
  color: var(--muted) !important;
}

.domain-search-input .btn,
.search-group .btn {
  border-radius: 100px !important;
  margin: 2px !important;
}

/* Global Main Body Spacing */
.main-body {
  padding: 24px 0 44px !important;
}

.page-homepage .main-body {
  padding-top: 18px !important;
}

/* ==========================================================================
   Login & Password Reset Pages (DevEdge Dark Gradient)
   ========================================================================== */
body.page-login,
body.page-login-secondary,
body.page-login-primary,
body.page-password-reset,
.page-login,
.page-login .main-body,
.page-login-secondary .main-body,
.page-login-primary .main-body,
.login-wrapper {
  background: radial-gradient(circle at 50% 30%, rgba(98, 209, 219, 0.12), transparent 70%), linear-gradient(180deg, #131719 0%, #191F21 100%) !important;
}

.main-header {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 18px 0 16px !important;
  margin-bottom: 20px !important;
}

.main-header .page-title, .main-header h1 {
  font-family: var(--h) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

/* ==========================================================================
   DevEdge Pill Buttons
   ========================================================================== */
.btn {
  font-family: var(--h) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  padding: 10px 22px !important;
  transition: transform 0.2s cubic-bezier(.16,1,.3,1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary, .btn-primary:not(:disabled):not(.disabled) {
  background: var(--accent) !important;
  color: #0E1416 !important;
  border: 1px solid var(--accent) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  color: #0E1416 !important;
  transform: translateY(-1px);
}

.btn-default, .btn-secondary, .btn-outline {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(236, 238, 238, 0.25) !important;
}

.btn-default:hover, .btn-secondary:hover, .btn-outline:hover {
  background: rgba(98, 209, 219, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
}

.btn-info {
  background: rgba(98, 209, 219, 0.15) !important;
  border-color: rgba(98, 209, 219, 0.3) !important;
  color: var(--accent) !important;
}

.btn-info:hover {
  background: var(--accent) !important;
  color: #0E1416 !important;
}

/* Small / Large modifiers */
.btn-sm, .btn-xs {
  font-size: 12px !important;
  padding: 6px 16px !important;
  border-radius: 100px !important;
}

.btn-lg {
  font-size: 14.5px !important;
  padding: 14px 28px !important;
  border-radius: 100px !important;
}

/* ==========================================================================
   Surfaces, Cards, Sidebars & Panels
   ========================================================================== */
.panel, .card, .widget,
.client-home-panels .panel, .panel-default {
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
  color: var(--text) !important;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.panel:hover, .card:hover {
  border-color: rgba(98, 209, 219, 0.35) !important;
}

.panel-heading, .card-header, .widget-header {
  background-color: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-weight: 500 !important;
  padding: 12px 18px !important;
}

.panel-body, .card-body {
  background: transparent !important;
  color: var(--text) !important;
}

.panel-footer, .card-footer {
  background-color: var(--bg-2) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Round whatever sits at the bottom of a panel so list-item hover backgrounds
   don't square off the panel's corners (11px = 12px radius minus the 1px border).
   Not overflow:hidden on .panel, which would clip dropdowns opened inside it. */
.panel > .list-group:last-child,
.panel > .list-group:last-child > .list-group-item:last-child,
.panel > .panel-body:last-child,
.card > .list-group:last-child,
.card > .list-group:last-child > .list-group-item:last-child {
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

/* ==========================================================================
   Semantic Section Resets (Prevent Nested Box Container Bloat)
   ========================================================================== */
.section, .site-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 28px 0 !important;
}

.section-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

.section-header .section-title,
.section-title {
  font-family: var(--h) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.section-body {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   Homepage Tiles & Announcements Spacing
   ========================================================================== */
.tile,
.tile-home {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 22px 16px !important;
  min-height: 120px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}

.tile:hover,
.tile-home:hover {
  border-color: rgba(98, 209, 219, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4) !important;
}

.tile .tile-icon,
.tile-home .tile-icon {
  margin-bottom: 8px !important;
}

.tile .tile-title,
.tile-home .tile-title {
  font-family: var(--h) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.tile:hover .tile-title,
.tile-home:hover .tile-title {
  color: var(--accent) !important;
}

/* Announcements / News list */
.announcements-list.list-group {
  margin-bottom: 0 !important;
  border: none !important;
}

.announcements-list .list-group-item {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2) !important;
}

.announcements-list .list-group-item .announcement-date,
.announcements-list .list-group-item .text-muted {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-bottom: 6px !important;
}

.announcements-list .list-group-item h3,
.announcements-list .list-group-item .announcement-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 4px 0 10px 0 !important;
}

/* ==========================================================================
   Sidebars (Cart & Store Pages)
   ========================================================================== */
.sidebar .panel,
.main-sidebar .panel,
.panel-sidebar {
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

.sidebar .panel-heading,
.main-sidebar .panel-heading,
.panel-sidebar .panel-heading {
  background-color: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 14px !important;
}

.sidebar .panel-heading .panel-title,
.main-sidebar .panel-heading .panel-title,
.panel-sidebar .panel-heading .panel-title {
  font-family: var(--h) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  display: block !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

.sidebar .panel-heading .panel-title i:not(.panel-minimise),
.main-sidebar .panel-heading .panel-title i:not(.panel-minimise),
.panel-sidebar .panel-heading .panel-title i:not(.panel-minimise) {
  margin-right: 6px !important;
  color: var(--accent) !important;
  font-size: 12.5px !important;
}

.sidebar .panel-heading .panel-minimise,
.main-sidebar .panel-heading .panel-minimise,
.panel-sidebar .panel-heading .panel-minimise {
  float: right !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

.sidebar .panel-body,
.main-sidebar .panel-body,
.panel-sidebar .panel-body {
  padding: 12px 14px !important;
  background: transparent !important;
}

.sidebar .list-group,
.main-sidebar .list-group,
.panel-sidebar .list-group {
  margin-bottom: 0 !important;
  border: none !important;
}

.sidebar .list-group-item,
.main-sidebar .list-group-item,
.panel-sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(236, 238, 238, 0.05) !important;
  color: var(--text) !important;
  font-family: var(--b) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
}

.sidebar .list-group-item:last-child,
.main-sidebar .list-group-item:last-child,
.panel-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

.sidebar .list-group-item:hover,
.main-sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover {
  background: rgba(98, 209, 219, 0.06) !important;
  color: var(--accent) !important;
}

.sidebar .list-group-item.active,
.main-sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active {
  background: rgba(98, 209, 219, 0.12) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}

.sidebar .list-group-item i,
.main-sidebar .list-group-item i,
.panel-sidebar .list-group-item i {
  color: var(--accent) !important;
  font-size: 13.5px !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.sidebar select[name="currency"],
.main-sidebar select[name="currency"],
.panel-sidebar select[name="currency"] {
  width: 100% !important;
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}

/* ==========================================================================
   Product Grid Catalog Cards (.package) - Equal Height & Aligned Layout
   ========================================================================== */
.section.products {
  margin-top: 4px !important;
}

.section.products .row-eq-height {
  row-gap: 16px !important;
}

.row-eq-height > [class*="col"],
.section.products .row-eq-height > [class*="col"],
.section.products .row > [class*="col"],
.section.products .row-eq-height > .col {
  display: flex !important;
  flex-direction: column !important;
}

/* Cap the catalogue at 3 cards per row (Lagom uses auto-width .col, so 4+ products squeeze into one row) */
.section.products .row-eq-height {
  flex-wrap: wrap !important;
}

.section.products .row-eq-height > .col {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
}

@media (max-width: 991px) {
  .section.products .row-eq-height > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 575px) {
  .section.products .row-eq-height > .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.package:not(.package-horizontal) {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 22px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
}

.package:not(.package-horizontal):hover {
  border-color: rgba(98, 209, 219, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.package:not(.package-horizontal) .package-side-left {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  flex: 1 1 auto !important;
}

.package:not(.package-horizontal) .package-header {
  margin-bottom: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.package:not(.package-horizontal) .package-title {
  font-family: var(--h) !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  margin: 0 0 6px 0 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Header price block (visible on vertical cards) */
.package:not(.package-horizontal) .package-header .package-price {
  margin: 6px 0 12px 0 !important;
  width: 100% !important;
  padding: 0 !important;
  min-height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Strictly hide duplicate price in footer for non-horizontal cards */
.package:not(.package-horizontal) .package-footer .package-price,
.package:not(.package-horizontal) .package-side-right .package-price {
  display: none !important;
}

.package:not(.package-horizontal) .package-price .price {
  font-family: var(--h) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.package:not(.package-horizontal) .package-price .price-starting-from {
  font-size: 11px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
}

.package:not(.package-horizontal) .package-price .price-cycle,
.package:not(.package-horizontal) .package-price .package-cycle {
  font-family: var(--b) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 3px !important;
}

.package:not(.package-horizontal) .package-body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.package:not(.package-horizontal) .package-body:empty,
.package:not(.package-horizontal) .package-content:empty {
  display: none !important;
}

.package:not(.package-horizontal) .package-footer,
.package:not(.package-horizontal) .package-side-right {
  margin-top: auto !important;
  padding-top: 14px !important;
  width: 100% !important;
  border-top: none !important;
  background: transparent !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.package:not(.package-horizontal) .btn-order-now {
  min-width: 120px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
}

/* ==========================================================================
   Configure Product Page Spacing
   ========================================================================== */
.page-order .main-content > .section:first-child,
.page-configureproduct .main-content > .section:first-child,
.page-confproduct .main-content > .section:first-child {
  margin-top: 0 !important;
}

.page-order .main-sidebar,
.page-configureproduct .main-sidebar,
.page-confproduct .main-sidebar {
  margin-top: 0 !important;
}

.product-config-info {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.product-config-info .panel-body {
  padding: 0 !important;
}

.product-config-info h2,
.product-config-info h2.gap-2x {
  font-family: var(--h) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
}

.product-config-info .product-info:empty {
  display: none !important;
  margin: 0 !important;
}

.product-config-info .product-info {
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
}

/* Billing Cycle Section */
#sectionCycles {
  margin: 0 0 28px !important;
}

#sectionCycles .section-header {
  margin-bottom: 14px !important;
}

#sectionCycles .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.panel-check-group {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.panel-check-group > div[class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-bottom: 16px !important;
}

.panel-check {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  min-height: auto !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.panel-check:hover {
  border-color: rgba(98, 209, 219, 0.4) !important;
  background: rgba(98, 209, 219, 0.04) !important;
}

.panel-check.checked {
  border-color: var(--accent) !important;
  background: rgba(98, 209, 219, 0.08) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Lagom pads .check too; keep a single padding source on .panel-check */
.panel-check .check {
  padding: 0 !important;
  margin: 0 !important;
}

.panel-check .check.check-cycle label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
}

.panel-check .check-content {
  font-family: var(--b) !important;
  font-size: 13px !important;
  color: var(--text) !important;
  line-height: 1.35 !important;
}

.panel-check .check-title {
  font-family: var(--h) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.5 !important;
}

/* Hide redundant empty hyphen div from Lagom template */
.panel-check .check-content > div:empty,
.panel-check .check-content > div:not([class]):only-of-type {
  display: none !important;
}

.panel-check .label.label-save {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(244, 63, 94, 0.15) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  margin-top: 8px !important;
}

.panel-check .cycle-full-price {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  text-decoration: line-through !important;
  margin-left: 5px !important;
}

/* Configuration Summary Sidebar */
.panel-summary-configuration {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

.panel-summary-configuration .panel-heading {
  padding: 12px 16px !important;
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
}

.panel-summary-configuration .panel-title {
  font-family: var(--h) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.panel-summary-configuration #producttotal {
  padding: 14px 16px !important;
}

.panel-summary-configuration .btn-checkout {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
}

@media (min-width: 992px) {
  .main-grid {
    column-gap: 24px !important;
  }
}

/* ==========================================================================
   Form Controls, Inputs & Selects
   ========================================================================== */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: var(--bg-2) !important;
  border: 1px solid rgba(236, 238, 238, 0.15) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: var(--b) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Phone input: keep text clear of the flag + dial code block (Lagom's .selected-flag is 94px wide) */
.intl-tel-input input,
.intl-tel-input input[type="tel"],
.intl-tel-input input[type="text"] {
  padding-left: 106px !important;
}

/* Searchable dropdowns (TLD select, language picker): keep text clear of the
   magnifier icon Lagom places inside the input (its own rule uses 44px) */
.dropdown-menu-search .dropdown-header .form-control,
.dropdown-language-search .dropdown-header .form-control {
  padding-left: 44px !important;
}

.dropdown-menu-search .dropdown-header .input-group-icon,
.dropdown-language-search .dropdown-header .input-group-icon {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.intl-tel-input .selected-flag .iti-arrow {
  border-top-color: #8E9597 !important;
}

.intl-tel-input .selected-flag .iti-arrow.up {
  border-top: none !important;
  border-bottom-color: #8E9597 !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(98, 209, 219, 0.2) !important;
  outline: none !important;
}

.input-group-addon {
  background-color: var(--bg-2) !important;
  border: 1px solid rgba(236, 238, 238, 0.15) !important;
  color: var(--muted) !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-container, .dataTables_wrapper {
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  /* visible, not hidden: row action dropdowns (e.g. "..." on My Domains) must escape the card */
  overflow: visible !important;
}

/* Round the corner cells instead of clipping, so header/row backgrounds keep the card's corners */
.table-container .table thead tr:first-child > th:first-child { border-top-left-radius: 11px !important; }
.table-container .table thead tr:first-child > th:last-child { border-top-right-radius: 11px !important; }
.table-container .table tbody tr:last-child > td:first-child { border-bottom-left-radius: 11px !important; }
.table-container .table tbody tr:last-child > td:last-child { border-bottom-right-radius: 11px !important; }

/* Tables placed straight in a panel (e.g. DNS Management): .table-responsive already scrolls,
   so rounding it clips the header/row backgrounds to the panel's corners. */
.panel > .table-responsive,
.card > .table-responsive {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.panel > .table-responsive:first-child,
.card > .table-responsive:first-child {
  border-top-left-radius: 11px !important;
  border-top-right-radius: 11px !important;
}
.panel > .table-responsive:last-child,
.card > .table-responsive:last-child {
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

/* Open row dropdowns sit above the table footer/pagination */
.table-container .dropdown.open,
.table-container .dropdown-menu {
  z-index: 1060 !important;
}

.table {
  background: transparent !important;
  color: var(--text) !important;
  margin-bottom: 0 !important;
}

.table > thead > tr > th {
  background-color: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
  color: var(--muted) !important;
  font-family: var(--h) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 14px 16px !important;
}

.table > tbody > tr > td {
  border-top: 1px solid rgba(236, 238, 238, 0.08) !important;
  color: var(--text) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover > td {
  background-color: rgba(98, 209, 219, 0.04) !important;
}

/* ==========================================================================
   Status Badges & Labels
   ========================================================================== */
.status, .label, .badge {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--h) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
}

.status-active, .label-success, .badge-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.status-pending, .label-warning, .badge-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.status-suspended, .status-terminated, .label-danger, .badge-danger, .status-unpaid {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.status-closed, .status-cancelled, .label-default, .badge-default {
  background: rgba(142, 154, 156, 0.15) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(142, 154, 156, 0.25) !important;
}

/* Ticket statuses: WHMCS outputs each status's DB colour inline (Support > Ticket Statuses),
   tuned for light themes. Remap the defaults to readable tones on the dark background.
   Text/dot forms: style="color:#hex" or style="--status-color: #hex". Pill form: style="background-color:#hex".
   Both "prop:#hex" and "prop: #hex" spellings are matched. */
[style*="color:#779500" i]:not([style*="background-color" i]), [style*="color: #779500" i]:not([style*="background-color" i]) { --status-color: #34D399 !important; color: #34D399 !important; } /* Open */
[style*="color:#000000" i]:not([style*="background-color" i]), [style*="color: #000000" i]:not([style*="background-color" i]) { --status-color: #62D1DB !important; color: #62D1DB !important; } /* Answered */
[style*="color:#ff6600" i]:not([style*="background-color" i]), [style*="color: #ff6600" i]:not([style*="background-color" i]) { --status-color: #FB923C !important; color: #FB923C !important; } /* Customer-Reply */
[style*="color:#888888" i]:not([style*="background-color" i]), [style*="color: #888888" i]:not([style*="background-color" i]) { --status-color: #8E9A9C !important; color: #8E9A9C !important; } /* Closed */
[style*="color:#224488" i]:not([style*="background-color" i]), [style*="color: #224488" i]:not([style*="background-color" i]) { --status-color: #93C5FD !important; color: #93C5FD !important; } /* On Hold */
[style*="color:#cc0000" i]:not([style*="background-color" i]), [style*="color: #cc0000" i]:not([style*="background-color" i]) { --status-color: #F87171 !important; color: #F87171 !important; } /* In Progress */

[style*="background-color:#779500" i], [style*="background-color: #779500" i] { background-color: rgba(52, 211, 153, 0.15) !important; color: #34D399 !important; }
[style*="background-color:#000000" i], [style*="background-color: #000000" i] { background-color: rgba(98, 209, 219, 0.15) !important; color: #62D1DB !important; }
[style*="background-color:#ff6600" i], [style*="background-color: #ff6600" i] { background-color: rgba(251, 146, 60, 0.15) !important; color: #FB923C !important; }
[style*="background-color:#888888" i], [style*="background-color: #888888" i] { background-color: rgba(142, 154, 156, 0.15) !important; color: #8E9A9C !important; }
[style*="background-color:#224488" i], [style*="background-color: #224488" i] { background-color: rgba(147, 197, 253, 0.15) !important; color: #93C5FD !important; }
[style*="background-color:#cc0000" i], [style*="background-color: #cc0000" i] { background-color: rgba(248, 113, 113, 0.15) !important; color: #F87171 !important; }

/* ==========================================================================
   Modals & Dropdowns
   ========================================================================== */
.modal-content {
  background-color: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  color: var(--text) !important;
}

.modal-header {
  border-bottom: 1px solid var(--line) !important;
  font-family: var(--h);
}

.modal-footer {
  border-top: 1px solid var(--line) !important;
}

.dropdown-menu {
  background-color: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
  padding: 8px !important;
}

.dropdown-menu > li > a, .dropdown-item {
  color: var(--text) !important;
  font-family: var(--b) !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
}

.dropdown-menu > li > a:hover, .dropdown-item:hover {
  background: rgba(98, 209, 219, 0.1) !important;
  color: var(--accent) !important;
}

/* ==========================================================================
   DevEdge Global Footer (Shared with devedge.co.uk)
   ========================================================================== */
.site-footer-wrap {
  border-top: 1px solid var(--line);
  background: var(--bg);
  width: 100%;
  position: relative;
  font-family: var(--b);
}
.site-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 28px);
}
.g-foot {
  padding: 64px 0 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: clamp(24px, 3vw, 44px);
}
.foot-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--h);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.foot-brand-logo:hover {
  color: var(--text);
  text-decoration: none;
}
.foot-brand-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 32ch;
  margin: 0;
}
.foot-status {
  margin-top: 32px;
}
.foot-status-label {
  font-family: var(--h);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
}
.system-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--line);
  text-decoration: none !important;
  transition: border-color .2s ease, background .2s ease;
}
.system-status:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.system-status .status-text {
  font-family: var(--h);
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  text-decoration: none !important;
}
.system-status:hover .status-text {
  color: var(--text);
}
.foot-heading {
  font-family: var(--h);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 16px;
}
.foot-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-nav-list a,
.foot-link {
  color: color-mix(in srgb, var(--text) 75%, transparent);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
  display: inline-block;
}
.foot-nav-list a:hover,
.foot-link:hover {
  color: var(--accent);
  transform: translateX(2px);
}
.foot-contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-link-icon {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.foot-link-icon svg {
  color: var(--accent);
  flex: none;
}
.foot-address {
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--text) 75%, transparent);
  font-style: normal;
}

/* Climate Badge */
.foot-climate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.climate-badge2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  border: 1px solid var(--line);
  font-family: var(--h);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.climate-badge2:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.climate-badge2 strong {
  font-weight: 600;
  color: var(--text);
}
.climate-badge2 .cb-accent {
  color: var(--accent);
}
.foot-climate-text {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: var(--muted);
}
.foot-climate-text a {
  color: var(--accent);
  text-decoration: none;
}
.foot-climate-text a:hover {
  text-decoration: underline;
}

/* Footer Bottom Bar */
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 0 52px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.foot-bottom-links {
  display: flex;
  gap: 18px;
}
.foot-bottom-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.foot-bottom-links a:hover {
  color: var(--accent);
}

/* Status lights */
.led { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #666; box-shadow: 0 0 6px rgba(0,0,0,0.4); }
.led-green { background: #00d26a; box-shadow: 0 0 8px #00d26a; }
.led-red { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.led-yellow { background: #ffd23c; box-shadow: 0 0 8px #ffd23c; }
.led-orange { background: #ff8a00; box-shadow: 0 0 8px #ff8a00; }
.led-blue { background: #4da6ff; box-shadow: 0 0 8px #4da6ff; }
.led-white { background: #ffffff; box-shadow: 0 0 8px #ffffff; }
.led-dark { background: #333333; box-shadow: 0 0 8px #333333; }
.led-blink { background: #999; box-shadow: 0 0 8px #999; animation: ledBlink 1s infinite; }
@keyframes ledBlink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }
.status-text { color: inherit; text-decoration: none; }

/* Responsive */
@media (max-width:1000px) {
  .g-foot {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 36px 24px !important;
    padding: 56px 0 40px !important;
  }
  .foot-brand {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .foot-brand-desc { max-width: 48ch; }
  .foot-status { margin-top: 0 !important; }
}
@media (max-width:760px) {
  .g-foot {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 20px !important;
    padding: 48px 0 36px !important;
  }
  .foot-brand {
    grid-column: 1 / -1;
    display: block;
    padding-bottom: 20px;
  }
  .foot-status { margin-top: 20px !important; }
  .foot-climate {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .climate-badge2 {
    white-space: normal;
    line-height: 1.4;
  }
}
@media (max-width:520px) {
  .g-foot {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 16px !important;
    padding: 40px 0 28px !important;
  }
  .foot-brand { grid-column: 1 / -1; }
  .foot-services { grid-column: 1; }
  .foot-company { grid-column: 2; }
  .foot-legal { grid-column: 1; }
  .foot-contact {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .foot-contact-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .foot-heading {
    font-size: 11px;
    letter-spacing: .12em;
    margin-bottom: 12px;
  }
  .foot-nav-list a,
  .foot-link {
    font-size: 12.5px;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 60px;
  }
}

#backToTop:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 24px rgba(98, 209, 219, 0.4) !important;
}

/* Universal Print Reset & Hiding */
@media print {
  .no-print,
  .site-footer-wrap,
  .climate-badge2,
  #backToTop {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* Hide Lagom's default bottom footer when DevEdge footer is rendered */
.main-footer {
  display: none !important;
}

/* ==========================================================================
   DevEdge Nocturne: Search Boxes (Domain Register & Knowledgebase)
   ========================================================================== */
.search-box,
.search-box-primary,
.search-box-secondary,
.search-box-default {
  background: radial-gradient(circle at 50% 0%, rgba(98, 209, 219, 0.12), transparent 70%), linear-gradient(180deg, #191F21 0%, #1F272A 100%) !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(98, 209, 219, 0.12), transparent 70%), linear-gradient(180deg, #191F21 0%, #1F272A 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  padding: 32px 36px !important;
  color: var(--text) !important;
  margin-bottom: 30px !important;
}

.search-box .banner-title,
.search-box h1,
.search-box h2,
.search-box h3,
.search-box h4 {
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-weight: 500 !important;
}

/* Ensure hidden search groups stay strictly hidden everywhere */
.hidden,
[hidden],
.search-group.hidden,
.domain-search-input.hidden,
[domain-search-standard].hidden,
[data-domain-search-ai].hidden,
.search-box .search-group.hidden,
.search-box .domain-search-input.hidden,
.search-box [domain-search-standard].hidden,
.search-box [data-domain-search-ai].hidden,
[domain-search-standard][style*="display: none"],
[data-domain-search-ai][style*="display: none"] {
  display: none !important;
}

/* Home domain search box styling */
.home-domain-search {
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.main-banner .home-domain-search {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.main-banner .banner-content {
  max-width: 900px !important;
}

/* Search Box Tabs (AI Generator vs Classic Search) */
.domain-search-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.domain-search-tabs h3,
.domain-search-tabs .h4 {
  color: var(--text) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.domain-search-tabs .btn-tab-group {
  display: inline-flex !important;
  background: rgba(19, 23, 25, 0.6) !important;
  border: 1px solid rgba(236, 238, 238, 0.12) !important;
  border-radius: 100px !important;
  padding: 4px !important;
  gap: 4px !important;
}

.domain-search-tabs .btn-tab-group .btn {
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.domain-search-tabs .btn-tab-group .btn:hover {
  color: var(--text) !important;
}

.domain-search-tabs .btn-tab-group .btn.active {
  background: rgba(98, 209, 219, 0.18) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(98, 209, 219, 0.35) !important;
}

.domain-search-tabs .btn-tab-group .btn svg,
.domain-search-tabs .btn-tab-group .btn i {
  color: inherit !important;
  fill: currentColor !important;
  margin-right: 6px !important;
}

/* Combined Search Bar Container */
.search-box .search-group,
.search-box .domain-search-input {
  background: #191F21 !important;
  border: 1px solid rgba(236, 238, 238, 0.16) !important;
  border-radius: 100px !important;
  padding: 4px 6px 4px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.search-box .search-group:focus-within,
.search-box .domain-search-input:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(98, 209, 219, 0.18) !important;
}

.search-box .search-field {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  flex: 1 1 auto !important;
  width: auto !important;
}

.search-box .search-field .form-control {
  background: transparent !important;
  border: none !important;
  color: #ECEEEE !important;
  font-size: 15px !important;
  height: 46px !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
  box-shadow: none !important;
}

.search-box .search-field .form-control::placeholder {
  color: #8E9A9C !important;
  opacity: 1 !important;
}

.search-box .search-field-icon {
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
}

.search-box .search-field-icon i,
.search-box .search-field-icon svg {
  color: var(--accent) !important;
  fill: var(--accent) !important;
  width: 18px !important;
  height: 18px !important;
}

/* Button inside search group */
.search-box .search-group-btn .btn,
.search-box .search-group > .btn,
.search-box .domain-check-availability,
#btnKnowledgebaseSearch {
  background: var(--accent) !important;
  color: #131719 !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 28px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(98, 209, 219, 0.25) !important;
  transition: all 0.2s ease !important;
}

.search-box .search-group-btn .btn:hover,
.search-box .search-group > .btn:hover,
.search-box .domain-check-availability:hover,
#btnKnowledgebaseSearch:hover {
  background: var(--accent-soft) !important;
  color: #131719 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(98, 209, 219, 0.4) !important;
}

.search-box .search-group-btn .transfer {
  background: rgba(98, 209, 219, 0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(98, 209, 219, 0.28) !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 8px 20px !important;
  height: 44px !important;
  margin-right: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.search-box .search-group-btn .transfer:hover {
  background: rgba(98, 209, 219, 0.22) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

/* Filters dropdown in AI search */
.search-box .domain-search-advanced .dropdown-multi-level .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  padding: 0 16px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.search-box .domain-search-advanced .dropdown-multi-level .dropdown-toggle:hover {
  color: var(--accent) !important;
}

/* Captcha styling inside search box */
.search-box .domain-search-captcha {
  margin-top: 20px !important;
  text-align: center !important;
}

.search-box .captcha-container {
  background: rgba(19, 23, 25, 0.5) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.search-box .captcha-container .captchatext {
  color: var(--muted) !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

.search-box .captcha-container .input-group {
  display: inline-flex !important;
  align-items: center !important;
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.search-box .captcha-container .input-group-addon {
  background: #131719 !important;
  border: none !important;
  padding: 4px 10px !important;
}

.search-box .captcha-container #inputCaptcha {
  background: transparent !important;
  border: none !important;
  color: #ECEEEE !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  height: 38px !important;
  width: 120px !important;
  box-shadow: none !important;
}

.search-box .captcha-container #inputCaptcha:focus {
  background: rgba(98, 209, 219, 0.08) !important;
}

/* ==========================================================================
   Selectize Multiselect Dropdown (TLD Category Filter & Form Selects)
   ========================================================================== */
.selectize-control {
  margin-bottom: 20px !important;
}

.selectize-control.multi .selectize-input,
.selectize-control.single .selectize-input,
.selectize-input,
.selectize-input.full,
.selectize-input.focus {
  background: #191F21 !important;
  background-color: #191F21 !important;
  border: 1px solid rgba(236, 238, 238, 0.15) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  min-height: 46px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

.selectize-control.multi .selectize-input.focus,
.selectize-control.single .selectize-input.focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(98, 209, 219, 0.15) !important;
}

.selectize-control.multi .selectize-input > div,
.selectize-control.multi .selectize-input [data-value],
.selectize-input .item {
  background: rgba(98, 209, 219, 0.14) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(98, 209, 219, 0.28) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.selectize-control.multi .selectize-input [data-value] .remove,
.selectize-input .item .remove {
  color: var(--accent) !important;
  border-left: 1px solid rgba(98, 209, 219, 0.25) !important;
  margin-left: 6px !important;
  padding-left: 6px !important;
  text-decoration: none !important;
  opacity: 0.7 !important;
}

.selectize-control.multi .selectize-input [data-value] .remove:hover,
.selectize-input .item .remove:hover {
  opacity: 1 !important;
  color: #fff !important;
}

.selectize-control .selectize-input > input {
  color: var(--text) !important;
  font-size: 13.5px !important;
}

.selectize-dropdown {
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: var(--text) !important;
  padding: 6px !important;
  z-index: 1000 !important;
}

.selectize-dropdown .option {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.selectize-dropdown .option.active,
.selectize-dropdown .option:hover {
  background: rgba(98, 209, 219, 0.12) !important;
  color: var(--accent) !important;
}

/* ==========================================================================
   TLD Pricing Table & Toolbar
   ========================================================================== */
.tld-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.tld-header .section-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.tld-search.search-group {
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  width: 240px !important;
  box-shadow: none !important;
}

.tld-search .search-field {
  position: relative !important;
  width: 100% !important;
}

.tld-search .search-field .form-control {
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  padding: 8px 12px 8px 36px !important;
  font-size: 13px !important;
  height: 38px !important;
}

.tld-search .search-field .form-control::placeholder {
  color: var(--muted) !important;
}

.tld-search .search-field-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

.domain-pricing .tld-table {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
}

.domain-pricing .table {
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.domain-pricing .table thead th {
  background: #191F21 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
  padding: 14px 20px !important;
}

.domain-pricing .table tbody td {
  padding: 16px 20px !important;
  border-top: 1px solid rgba(236, 238, 238, 0.06) !important;
  color: var(--text) !important;
  vertical-align: middle !important;
}

.domain-pricing .table .dataTables_empty {
  padding: 32px 20px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  text-align: center !important;
}

.domain-pricing .tld-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.domain-pricing .tld-name span {
  color: var(--accent) !important;
}

/* DataTables footer / pagination */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--muted) !important;
  font-size: 12.5px !important;
  padding: 12px 16px !important;
}

.dataTables_wrapper .dataTables_length select {
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  margin-left: 4px !important;
  cursor: pointer !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: rgba(98, 209, 219, 0.15) !important;
  color: var(--accent) !important;
  border-color: rgba(98, 209, 219, 0.3) !important;
}

/* ==========================================================================
   Domain Promo Boxes ("Add Web Hosting" & "Transfer your domain to us")
   ========================================================================== */
.domain-promo-box {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 28px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: 24px !important;
}

.domain-promo-box:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(98, 209, 219, 0.35) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
}

.domain-promo-box .promo-box-body {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.domain-promo-box .promo-box-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

.domain-promo-box .promo-box-icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.domain-promo-box .promo-box-icon svg {
  width: 44px !important;
  height: 44px !important;
}

.domain-promo-box .promo-box-header .h5,
.domain-promo-box .promo-box-header h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 6px 0 !important;
}

.domain-promo-box .promo-box-header .description {
  color: var(--muted) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

.domain-promo-box .promo-box-content-between {
  margin-top: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.domain-promo-box .promo-description {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

.domain-promo-box .btn {
  background: var(--accent) !important;
  color: #131719 !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
  box-shadow: 0 2px 10px rgba(98, 209, 219, 0.25) !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.domain-promo-box .btn:hover {
  background: var(--accent-soft) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(98, 209, 219, 0.4) !important;
}

/* ==========================================================================
   Knowledgebase Categories & Empty State
   ========================================================================== */
.kb-categories .section-header {
  margin-bottom: 20px !important;
}

.kb-categories .section-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.kb-categories .section-body {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 48px 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.kb-categories .message.message-no-data:not(.hidden),
.message.message-no-data:not(.hidden) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.message.message-no-data .message-image svg,
.message.message-no-data .svg-icon {
  width: 56px !important;
  height: 56px !important;
  --svg-icon-color-2: #62D1DB !important;
  --svg-icon-color-3: #8E9A9C !important;
}

.message.message-no-data .message-title {
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.message.message-no-data .message-desc {
  color: var(--muted) !important;
  font-size: 13.5px !important;
  margin: 4px 0 0 0 !important;
}

/* ==========================================================================
   Breadcrumb Navigation
   ========================================================================== */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--muted) !important;
}

.breadcrumb > li + li:before {
  content: "/" !important;
  padding: 0 8px 0 0 !important;
  color: rgba(236, 238, 238, 0.25) !important;
}

.breadcrumb > li > a {
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.breadcrumb > li > a:hover {
  color: var(--accent) !important;
}

.breadcrumb > .active,
.breadcrumb > li:last-child {
  color: var(--text) !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   Sidebar Panels (Domain & KB Sidebars)
   ========================================================================== */
.panel-sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active:hover,
.panel-sidebar .list-group-item.active:focus {
  background: rgba(98, 209, 219, 0.12) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
  border-left: 3px solid var(--accent) !important;
  font-weight: 500 !important;
}

.panel-sidebar .list-group-item.active i {
  color: var(--accent) !important;
}

/* ==========================================================================
   Tooltips & Popovers (DevEdge Nocturne Dark Theme)
   ========================================================================== */
.tooltip {
  opacity: 1 !important;
  z-index: 10000 !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)) !important;
}

.tooltip.in {
  opacity: 1 !important;
}

.tooltip-inner {
  background-color: #191F21 !important;
  background: #191F21 !important;
  color: #ECEEEE !important;
  border: 1px solid rgba(236, 238, 238, 0.16) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: var(--b) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  max-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Tooltip Arrows (All placements & versions: BS3 + BS4/Lagom) */
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow,
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #191F21 !important;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow,
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #191F21 !important;
}

.tooltip.left .tooltip-arrow,
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #191F21 !important;
}

.tooltip.right .tooltip-arrow,
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #191F21 !important;
}

/* Popovers */
.popover {
  background-color: #191F21 !important;
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  color: var(--text) !important;
}

.popover-title,
.popover-header {
  background-color: #1F272A !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: 9px 9px 0 0 !important;
  padding: 10px 14px !important;
}

.popover-content,
.popover-body {
  color: var(--muted) !important;
  font-size: 12.5px !important;
  padding: 12px 14px !important;
}

.popover.top > .arrow,
.popover.top > .arrow:after,
.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^="top"] .arrow::before {
  border-top-color: #191F21 !important;
}

.popover.bottom > .arrow,
.popover.bottom > .arrow:after,
.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #191F21 !important;
}

.popover.left > .arrow,
.popover.left > .arrow:after,
.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^="left"] .arrow::before {
  border-left-color: #191F21 !important;
}

.popover.right > .arrow,
.popover.right > .arrow:after,
.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^="right"] .arrow::before {
  border-right-color: #191F21 !important;
}

/* Dropdown Menus and Hover Colors */
.dropdown-menu {
  background-color: #191F21 !important;
  background: #191F21 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  color: var(--text) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(98, 209, 219, 0.12) !important;
  background: rgba(98, 209, 219, 0.12) !important;
  color: var(--accent) !important;
}

/* Top Nav Admin Return Button Hover State */
.devedge-whmcs-topbar ul.top-nav > li > a[href*="returntoadmin"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(98, 209, 219, 0.08) !important;
  border: 1px solid rgba(98, 209, 219, 0.25) !important;
  color: var(--accent) !important;
  transition: all 0.25s ease !important;
}

.devedge-whmcs-topbar ul.top-nav > li > a[href*="returntoadmin"]:hover {
  background: rgba(98, 209, 219, 0.2) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(98, 209, 219, 0.4) !important;
  transform: translateY(-1px) !important;
}

.devedge-whmcs-topbar ul.top-nav > li > a[href*="returntoadmin"] i,
.devedge-whmcs-topbar ul.top-nav > li > a[href*="returntoadmin"] svg {
  font-size: 15px !important;
  color: inherit !important;
}

/* ==========================================================================
   DevEdge Nocturne: Order Summary Card (Cart, Checkout & Product Config)
   ========================================================================== */
.panel-summary,
.panel-summary-primary,
.panel-summary-secondary,
.panel-summary-default,
#orderSummary.panel-summary,
#orderSummary,
.order-summary {
  background: #191F21 !important;
  background-color: #191F21 !important;
  background-image: none !important;
  border: 1px solid rgba(236, 238, 238, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  color: #ECEEEE !important;
  margin-bottom: 24px !important;
}

/* On Configure, #orderSummary is only the sticky wrapper around .panel-summary; drawing it as a
   card too doubled the border and showed the inner panel's 24px margin as an empty strip. */
#orderSummary.sidebar-sticky:not(.panel-summary) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#orderSummary.sidebar-sticky > .panel-summary {
  margin-bottom: 0 !important;
}

/* Prevent Lagom primary block variables from enforcing cyan background on summary */
.panel-summary,
#orderSummary {
  --primary-block-bg: #191F21 !important;
  --primary-block-bg-h: #191F21 !important;
  --primary-block-border: none !important;
  --secondary-block-bg: #191F21 !important;
  --primary-block-title-color: #FFFFFF !important;
  --primary-block-text-color: #ECEEEE !important;
  --primary-block-text-faded-color: #B4B9BA !important;
  --primary-block-total-font-color: #FFFFFF !important;
  --primary-block-divider-color: rgba(236, 238, 238, 0.08) !important;
}

/* Panel Heading */
.panel-summary .panel-heading,
.panel-summary-primary .panel-heading,
.panel-summary-secondary .panel-heading,
#orderSummary .panel-heading {
  background: #151A1C !important;
  background-color: #151A1C !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(236, 238, 238, 0.08) !important;
  padding: 18px 24px !important;
  min-height: auto !important;
}

.panel-summary .panel-heading .panel-title,
.panel-summary .panel-heading h2,
#orderSummary .panel-heading .panel-title,
#orderSummary .panel-heading h2 {
  font-family: var(--h) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

/* Panel Body */
.panel-summary .panel-body,
.panel-summary-primary .panel-body,
.panel-summary-secondary .panel-body,
#orderSummary .panel-body {
  background: #191F21 !important;
  background-color: #191F21 !important;
  background-image: none !important;
  color: #ECEEEE !important;
  padding: 20px 24px !important;
  border: none !important;
}

/* Summary Content */
.panel-summary .summary-content,
#orderSummary .summary-content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.panel-summary .summary-list,
#orderSummary .summary-list {
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  list-style: none !important;
  border-bottom: none !important;
}

.panel-summary .summary-list:last-child,
#orderSummary .summary-list:last-child {
  margin-bottom: 0 !important;
}

.panel-summary .summary-list + .summary-list,
#orderSummary .summary-list + .summary-list {
  border-top: 1px solid rgba(236, 238, 238, 0.08) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}

/* Visible List Items ONLY - Avoid showing hidden cycles */
.panel-summary .summary-list .list-item:not(.hidden):not([hidden]):not([style*="display:none"]):not([style*="display: none"]),
#orderSummary .summary-list .list-item:not(.hidden):not([hidden]):not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 0 !important;
  font-size: 13.5px !important;
  color: #ECEEEE !important;
}

/* Strictly hide empty/hidden list items */
.panel-summary .summary-list .list-item.hidden,
.panel-summary .summary-list .list-item[hidden],
.panel-summary .summary-list .list-item[style*="display:none"],
.panel-summary .summary-list .list-item[style*="display: none"],
#orderSummary .summary-list .list-item.hidden,
#orderSummary .summary-list .list-item[hidden],
#orderSummary .summary-list .list-item[style*="display:none"],
#orderSummary .summary-list .list-item[style*="display: none"] {
  display: none !important;
}

/* Item labels: crisp, readable light-silver text (NOT faint dark gray) */
.panel-summary .summary-list .list-item.faded,
#orderSummary .summary-list .list-item.faded,
.panel-summary .summary-list .list-item .item-name,
#orderSummary .summary-list .list-item .item-name {
  color: #C5C9CA !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

/* Item values (Prices): bright clear white */
.panel-summary .summary-list .list-item .item-value,
#orderSummary .summary-list .list-item .item-value,
.panel-summary .summary-list .list-item strong,
#orderSummary .summary-list .list-item strong {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Totals section title in recurring list */
#recurring .list-item.faded,
#orderSummary #recurring .list-item.faded {
  display: block !important;
  color: #62D1DB !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(236, 238, 238, 0.08) !important;
}

/* Promocode row */
.list-item-promo,
#orderSummary .list-item-promo {
  color: #62D1DB !important;
}

.list-item-promo .item-name,
#orderSummary .list-item-promo .item-name {
  color: #62D1DB !important;
  font-weight: 500 !important;
}

.list-item-promo .item-value,
#orderSummary .list-item-promo .item-value {
  color: #62D1DB !important;
  font-weight: 600 !important;
}

/* Single items (e.g. configured product name in configureproduct.tpl) */
.panel-summary .summary-item,
#orderSummary .summary-item {
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(236, 238, 238, 0.08) !important;
}

.panel-summary .summary-item .name,
#orderSummary .summary-item .name {
  font-family: var(--h) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

.panel-summary .summary-item .subname,
#orderSummary .summary-item .subname {
  color: #8E9597 !important;
  font-size: 13px !important;
}

.panel-summary .summary-item .item-value,
#orderSummary .summary-item .item-value {
  color: #62D1DB !important;
  font-weight: 600 !important;
}

/* Panel Footer */
.panel-summary .panel-footer,
.panel-summary-primary .panel-footer,
.panel-summary-secondary .panel-footer,
#orderSummary .panel-footer {
  background: #151A1C !important;
  background-color: #151A1C !important;
  background-image: none !important;
  border-top: 1px solid rgba(236, 238, 238, 0.08) !important;
  padding: 20px 24px !important;
}

.panel-summary .panel-footer:after,
#orderSummary .panel-footer:after {
  display: none !important;
}

/* Price block in footer */
.panel-summary .panel-footer .price,
#orderSummary .panel-footer .price {
  margin-bottom: 18px !important;
}

.panel-summary .panel-footer .price-total,
#orderSummary .panel-footer .price-total {
  display: block !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #8E9597 !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
}

.panel-summary .panel-footer .price-amount-total,
#orderSummary .panel-footer .price-amount-total,
#orderSummary .price-amount-total,
#totalDueToday {
  font-family: var(--h) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

/* Action button (Place Order / Checkout / Continue) */
.panel-summary .btn-checkout,
.panel-summary .panel-footer .btn,
#orderSummary .btn-checkout,
#orderSummary .panel-footer .btn-primary,
#orderSummary .panel-footer .btn-primary-faded {
  background: var(--accent) !important;
  color: #131719 !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  height: 48px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(98, 209, 219, 0.3) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.panel-summary .btn-checkout:hover:not(.disabled):not([disabled]),
.panel-summary .panel-footer .btn:hover:not(.disabled):not([disabled]),
#orderSummary .btn-checkout:hover:not(.disabled):not([disabled]) {
  background: var(--accent-soft) !important;
  color: #131719 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(98, 209, 219, 0.45) !important;
}

.panel-summary .btn-checkout.disabled,
.panel-summary .btn-checkout[disabled],
#orderSummary .btn-checkout.disabled,
#orderSummary .btn-checkout[disabled] {
  background: rgba(236, 238, 238, 0.08) !important;
  color: rgba(236, 238, 238, 0.35) !important;
  border: 1px solid rgba(236, 238, 238, 0.1) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  transform: none !important;
}

.panel-summary .btn-checkout i,
#orderSummary .btn-checkout i {
  color: inherit !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease !important;
}

.panel-summary .btn-checkout:hover:not(.disabled) i,
#orderSummary .btn-checkout:hover:not(.disabled) i {
  transform: translateX(3px) !important;
}

/* ==========================================================================
   DevEdge Nocturne: Checkout Page & Cart Table Enhancements
   ========================================================================== */
/* Cart Items Table Panel */
.panel-cart {
  background: #191F21 !important;
  border: 1px solid rgba(236, 238, 238, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.panel-cart .panel-heading.cart-heading {
  background: #151A1C !important;
  border-bottom: 1px solid rgba(236, 238, 238, 0.08) !important;
  padding: 14px 24px !important;
  color: #8E9597 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

.panel-cart .panel-body {
  background: #191F21 !important;
  padding: 20px 24px !important;
}

.panel-cart .cart-item {
  border-bottom: 1px solid rgba(236, 238, 238, 0.08) !important;
  padding: 18px 0 !important;
}

.panel-cart .cart-item:last-child {
  border-bottom: none !important;
}

.panel-cart .cart-item-title-main {
  color: #FFFFFF !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
}

.panel-cart .cart-item-title-small,
.panel-cart .item-domain {
  color: #8E9597 !important;
  font-size: 13px !important;
  margin-top: 3px !important;
}

.panel-cart .cart-item .item-price,
.panel-cart .cart-item .price-col {
  color: #FFFFFF !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
}

.panel-cart .cart-item .btn-remove-from-cart,
.panel-cart .cart-item .btn-actions {
  color: #8E9597 !important;
  transition: color 0.2s ease !important;
}

.panel-cart .cart-item .btn-remove-from-cart:hover,
.panel-cart .cart-item .btn-actions:hover {
  color: #EF4444 !important;
}

.panel-cart .panel-footer {
  background: #151A1C !important;
  border-top: 1px solid rgba(236, 238, 238, 0.08) !important;
  padding: 16px 24px !important;
}

.panel-cart .panel-footer .btn-default,
.panel-cart .panel-footer .btn-sm {
  background: rgba(236, 238, 238, 0.06) !important;
  border: 1px solid rgba(236, 238, 238, 0.14) !important;
  color: #ECEEEE !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.panel-cart .panel-footer .btn-default:hover,
.panel-cart .panel-footer .btn-sm:hover {
  background: rgba(98, 209, 219, 0.12) !important;
  border-color: rgba(98, 209, 219, 0.4) !important;
  color: #62D1DB !important;
  transform: translateY(-1px) !important;
}

/* Agreements & Terms on Checkout - High Contrast Readable Text */
.page-viewcart .section .section-title,
.page-checkout .section .section-title {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.page-viewcart .section .section-desc,
.page-checkout .section .section-desc {
  color: #8E9597 !important;
  font-size: 13.5px !important;
  margin-bottom: 16px !important;
}

.page-viewcart .section .section-body p,
.page-viewcart .section .section-body li,
.page-checkout .section .section-body p,
.page-checkout .section .section-body li {
  color: #C5C9CA !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

.page-viewcart .section .section-body strong,
.page-checkout .section .section-body strong {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.page-viewcart .section .section-body a,
.page-checkout .section .section-body a {
  color: #62D1DB !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.page-viewcart .section .section-body a:hover,
.page-checkout .section .section-body a:hover {
  color: #7FE5EE !important;
}

/* Security notice banner */
.checkout-security-msg {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 12px !important;
  color: #FCD34D !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
}

.checkout-security-msg strong {
  color: #FFFFFF !important;
}

.checkout-security-msg i {
  color: #F59E0B !important;
  margin-right: 8px !important;
}





/* ==========================================================================
   Client Area Dashboard - Sidebar "Your Info" & "Contacts" panels
   (Lagom uses negative margins on these footers; the generic .panel-footer
   box styling above made them render as an inset box with overflowing buttons)
   ========================================================================== */
.panel-sidebar.panel-client-details {
  padding: 20px !important;
}

.panel-sidebar.panel-client-details .panel-body {
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

.panel-sidebar.panel-client-details .panel-body strong {
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}

.panel-sidebar.panel-client-details .panel-body em {
  color: var(--text) !important;
}

.panel-sidebar.panel-client-details .panel-footer,
.panel-sidebar.panel-client-contacts .panel-footer {
  display: flex !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
}

.panel-sidebar.panel-client-details .panel-footer {
  margin: 16px 0 0 !important;
  padding: 16px 0 0 !important;
}

.panel-sidebar.panel-client-contacts .panel-footer {
  margin: 0 !important;
  padding: 12px 14px !important;
}

.panel-sidebar.panel-client-details .panel-footer .btn,
.panel-sidebar.panel-client-contacts .panel-footer .btn {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

.panel-sidebar.panel-client-details .panel-footer .btn-success {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #0E1416 !important;
}

.panel-sidebar.panel-client-details .panel-footer .btn-success:hover,
.panel-sidebar.panel-client-details .panel-footer .btn-success:focus {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  color: #0E1416 !important;
}

.panel-sidebar.panel-client-details .panel-footer .btn-success i {
  color: inherit !important;
}

/* Contacts list: restore Lagom's hiding rules that the generic display:flex overrode */
.panel-sidebar.panel-client-contacts .list-group {
  margin-bottom: 0 !important;
}

.panel-sidebar.panel-client-contacts .list-group-item:nth-child(n+4):not(:last-child),
.panel-sidebar.panel-client-contacts .list-group > div + .contact-more {
  display: none !important;
}

.panel-sidebar.panel-client-contacts .list-group-item.contact-more:before {
  display: none !important;
}

.panel-sidebar.panel-client-contacts .list-group-item:before {
  margin-right: 0 !important;
  color: var(--accent) !important;
}

/* ==========================================================================
   Client Area Dashboard - "Register a New Domain" panel
   ========================================================================== */
.client-home-panels .panel-domain-register {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(98, 209, 219, 0.16) 0%, rgba(98, 209, 219, 0) 60%),
    var(--surface) !important;
  border: 1px solid rgba(98, 209, 219, 0.25) !important;
  padding: 32px 28px !important;
}

.client-home-panels .panel-domain-register .panel-heading {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}

.client-home-panels .panel-domain-register .panel-heading .panel-title {
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-align: center !important;
}

.client-home-panels .panel-domain-register .panel-body {
  padding: 0 !important;
}

.client-home-panels .panel-domain-register input[name=domain] {
  height: 52px !important;
  padding: 12px 22px !important;
  background-color: var(--bg) !important;
  border: 1px solid rgba(236, 238, 238, 0.15) !important;
  border-radius: 100px !important;
  font-size: 15px !important;
  text-align: center !important;
}

.client-home-panels .panel-domain-register input[name=domain]::placeholder {
  color: var(--muted) !important;
}

.client-home-panels .panel-domain-register input[name=domain]:focus {
  border-color: var(--accent) !important;
}

.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-btn {
  gap: 10px !important;
  margin-top: 14px !important;
}

.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-btn .btn {
  height: 48px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border-radius: 100px !important;
  font-size: 14px !important;
}

.client-home-panels .panel-domain-register .btn-success {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #0E1416 !important;
}

.client-home-panels .panel-domain-register .btn-success:hover,
.client-home-panels .panel-domain-register .btn-success:focus {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  color: #0E1416 !important;
}

.client-home-panels .panel-domain-register .btn-default {
  background: transparent !important;
  border: 1px solid rgba(236, 238, 238, 0.25) !important;
  color: var(--text) !important;
}

.client-home-panels .panel-domain-register .btn-default:hover,
.client-home-panels .panel-domain-register .btn-default:focus {
  background: rgba(98, 209, 219, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ==========================================================================
   Page header table search (e.g. My Domains, My Services)
   The global input padding above removed Lagom's room for the search icon
   ========================================================================== */
.search-group .search-field {
  position: relative !important;
}

.search-group .search-field .form-control {
  height: 44px !important;
  padding: 10px 18px 10px 44px !important;
  background-color: var(--bg-2) !important;
  border: 1px solid rgba(236, 238, 238, 0.15) !important;
  border-radius: 100px !important;
  font-size: 13.5px !important;
}

.search-group .search-field .form-control::placeholder {
  color: var(--muted) !important;
}

.search-group .search-field .search-field-icon {
  top: 50% !important;
  left: 18px !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.search-group .search-field .search-field-icon > i {
  color: var(--muted) !important;
}

.search-group .search-field .form-control:focus ~ .search-field-icon > i {
  color: var(--accent) !important;
}

/* ==========================================================================
   Sidebar "Register a New Domain" search panel (My Domains etc.)
   ========================================================================== */
.panel-sidebar.panel-sidebar-primary.panel-register {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(98, 209, 219, 0.16) 0%, rgba(98, 209, 219, 0) 65%),
    var(--surface) !important;
  border: 1px solid rgba(98, 209, 219, 0.25) !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
  color: var(--text) !important;
}

.panel-sidebar.panel-register .panel-heading {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.panel-sidebar.panel-register .panel-heading .panel-title {
  color: var(--text) !important;
  font-family: var(--h) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* WHMCS gives this panel a stray chevron as its title icon */
.panel-sidebar.panel-register .panel-heading .panel-title i:not(.panel-minimise) {
  display: none !important;
}

.panel-sidebar.panel-register .panel-body {
  padding: 0 !important;
}

.panel-sidebar.panel-register .input-group {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  background-color: var(--bg) !important;
  border: 1px solid rgba(236, 238, 238, 0.15) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.panel-sidebar.panel-register .input-group:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(98, 209, 219, 0.2) !important;
}

.panel-sidebar.panel-register .input-group-addon {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 0 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
}

.panel-sidebar.panel-register .input-group-addon i {
  color: var(--muted) !important;
  font-size: 15px !important;
}

.panel-sidebar.panel-register .input-group .form-control,
.panel-sidebar.panel-register .input-group .form-control:focus {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 10px 16px 10px 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.panel-sidebar.panel-register .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #0E1416 !important;
}

.panel-sidebar.panel-register .btn:hover,
.panel-sidebar.panel-register .btn:focus {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  color: #0E1416 !important;
}

.panel-sidebar.panel-register .btn i {
  color: inherit !important;
}

.main-header .search-group {
  align-items: center !important;
  gap: 10px !important;
}

.main-header .search-group > * + * {
  margin-left: 0 !important;
}

/* ==========================================================================
   Left Wide main menu (Lagom "Left Wide" layout, used for logged-in clients)
   Lagom's primary variant fills the sidebar with --brand-primary; restyle it to
   the dark surface, and keep submenus inline instead of the global floating
   .dropdown-menu card.
   ========================================================================== */
.lagom-layout-left-wide .app-nav,
.lagom-layout-left-wide .app-nav.app-nav-primary,
.lagom-layout-left-wide .app-nav .app-nav-header,
.lagom-layout-left-wide .app-nav .app-nav-menu {
  background: var(--bg-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.lagom-layout-left-wide .app-nav {
  border-right: 1px solid var(--line) !important;
}

.lagom-layout-left-wide .app-nav .app-nav-header {
  border-bottom: 1px solid var(--line) !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary {
  padding: 16px 0 !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li {
  margin: 2px 12px !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #c5cacb !important;
  font-family: var(--h) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > a .item-text {
  color: inherit !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > a:hover,
.lagom-layout-left-wide .app-nav-menu .menu-primary > li.open > a,
.lagom-layout-left-wide .app-nav-menu .menu-primary > li > a[aria-expanded="true"] {
  background: rgba(98, 209, 219, 0.06) !important;
  color: var(--accent) !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li.active > a {
  background: rgba(98, 209, 219, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > a .ls-caret {
  color: var(--muted) !important;
  font-size: 10px !important;
  transition: transform 0.25s ease, color 0.2s ease !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > a:hover .ls-caret,
.lagom-layout-left-wide .app-nav-menu .menu-primary > li.open > a .ls-caret {
  color: var(--accent) !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li.open > a .ls-caret {
  transform: rotate(180deg) !important;
}

/* Inline submenu */
.lagom-layout-left-wide .app-nav-menu .menu-primary > li > .dropdown-menu {
  position: static !important;
  float: none !important;
  transform: none !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 4px 0 6px 16px !important;
  padding: 2px 0 2px 10px !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > .dropdown-menu > li.dropdown-header {
  display: none !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > .dropdown-menu > li > a {
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #9aa5a7 !important;
  font-family: var(--b) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > .dropdown-menu > li > a .menu-item-title {
  color: inherit !important;
}

.lagom-layout-left-wide .app-nav-menu .menu-primary > li > .dropdown-menu > li > a:hover,
.lagom-layout-left-wide .app-nav-menu .menu-primary > li > .dropdown-menu > li.active > a {
  background: rgba(98, 209, 219, 0.06) !important;
  color: var(--accent) !important;
}

/* Notification bell: the generic .badge pill rule above inflates Lagom's
   unread dot into a pill over the icon. Restore it as a small accent dot. */
.top-nav li .notification-icon-container,
.app-nav li .notification-icon-container {
  position: relative !important;
  display: inline-flex !important;
}

.top-nav li .notification-icon-container > .badge-dot,
.app-nav li .notification-icon-container > .badge-dot {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  left: auto !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 8px rgba(98, 209, 219, 0.6) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.top-nav li .notification-icon-container > .badge-dot > span,
.app-nav li .notification-icon-container > .badge-dot > span {
  display: none !important;
}

/* Sidebar summary + attached alert (e.g. Add Funds "All deposits are non-refundable").
   Lagom tucks the alert under the panel with a negative margin sized for its own large
   panel spacing; .panel-sidebar here only has a 12px bottom margin, so the alert slid up
   behind the panel. Tuck it 10px under the rounded corner instead. */
.panel-summary.panel-sidebar {
  position: relative !important;
  z-index: 2 !important;
}

.panel-summary.panel-sidebar + .alert-panel,
.panel-summary + .alert-panel {
  position: relative !important;
  z-index: 1 !important;
  margin-top: -22px !important;
  margin-bottom: 12px !important;
  padding-top: 22px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.panel-summary + .alert-panel .alert-icon:before {
  top: auto !important;
}

/* Browser autofill: Chrome paints saved logins pale blue with dark text, which
   clashes with the dark inputs. Repaint via an inset shadow (background-color
   can't be overridden on :-webkit-autofill). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-2) inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset, 0 0 0 3px rgba(98, 209, 219, 0.25) !important;
  box-shadow: 0 0 0 1000px var(--bg-2) inset, 0 0 0 3px rgba(98, 209, 219, 0.25) !important;
}

/* ==========================================================================
   Mobile fixes (1.0.1)
   ========================================================================== */
/* Lagom pads the body for its own fixed mobile header, which the DevEdge header replaces */
@media (max-width: 991.98px) {
  body.lagom-layout-top {
    padding-top: 0 !important;
  }
}

@media (max-width: 576px) {
  .devedge-top-row {
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .devedge-nav-brand-group {
    gap: 10px;
    min-width: 0;
  }
  .devedge-nav-actions {
    gap: 8px;
  }
  .devedge-top-row .devedge-portal-pill {
    display: none !important;
  }

  .search-box,
  .search-box-primary,
  .search-box-secondary,
  .search-box-default {
    padding: 24px 16px !important;
  }
  .domain-search-tabs {
    justify-content: center !important;
    text-align: center;
  }
  .domain-search-tabs .btn-tab-group {
    display: flex !important;
    width: 100%;
  }
  .domain-search-tabs .btn-tab-group .btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* The search pill stacks on phones; give each stacked control its own pill instead */
  .search-box .search-group:not(.hidden),
  .search-box .domain-search-input:not(.hidden) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .search-box .search-group:focus-within,
  .search-box .domain-search-input:focus-within {
    box-shadow: none !important;
  }
  .search-box .search-group .search-field,
  .search-box .domain-search-input .search-field,
  .search-box .domain-search-advanced .dropdown-multi-level {
    width: 100% !important;
    margin: 0 !important;
    background: #191F21 !important;
    border: 1px solid rgba(236, 238, 238, 0.16) !important;
    border-radius: 100px !important;
  }
  .search-box .search-field:focus-within {
    border-color: var(--accent) !important;
  }
  .search-box .search-field .form-control,
  .search-box .search-field .form-control:focus {
    border: none !important;
    border-radius: 100px !important;
    padding-left: 46px !important;
  }
  .search-box .search-field-icon {
    left: 18px !important;
  }
  .search-box .domain-search-advanced .dropdown-multi-level .dropdown-toggle {
    height: 44px !important;
    padding: 0 18px !important;
  }
  .search-box .search-group-btn {
    display: flex !important;
    gap: 8px;
    width: 100%;
    margin: 0 !important;
  }
  .search-box .search-group-btn .btn,
  .search-box .search-group > .btn,
  .search-box .domain-search-input > .btn {
    flex: 1 1 0;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 359px) {
  .devedge-top-row .devedge-brand-wordmark,
  .domain-search-tabs .btn-tab-group .btn i,
  .domain-search-tabs .btn-tab-group .btn svg {
    display: none !important;
  }
}

/* Client area dashboard tiles (swiper on mobile): Lagom lays these out as a row
   (icon | title ... stat); the generic .tile column/centre rule above breaks that. */
@media (max-width: 991.98px) {
  .tiles .tile {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
  }
  .tiles .tile .tile-icon-absolute {
    position: static !important;
    margin: 0 12px 0 0 !important;
  }
  .tiles .tile .tile-title {
    text-align: left !important;
  }
  .tiles .tile .tile-stat {
    order: 2 !important;
    margin-left: auto !important;
    padding: 0 !important;
  }
}

/* Collapsed (responsive) DataTables: keep Lagom's gutter for the absolute "+" expand
   button, which the generic .table cell padding above would otherwise remove. */
table.dataTable.dtr-inline.collapsed > thead > tr > th:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child {
  padding-left: 60px !important;
}

/* Long domain names (page title + Managing card on domain/product details) have no spaces,
   so they overflowed the viewport on mobile. Let them wrap anywhere and scale down on phones. */
.main-header-title,
.product-details .product-name,
.product-details .product-name a {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  min-width: 0;
  max-width: 100%;
}
.product-details .product-icon {
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .main-header-title {
    font-size: clamp(22px, 6.4vw, 28px) !important;
    line-height: 1.2 !important;
  }
  .product-details .product-name {
    font-size: clamp(16px, 5vw, 20px) !important;
    line-height: 1.3 !important;
    padding: 0 12px !important;
  }
}

/* ==========================================================================
   Mobile fixes (Nov 2026)
   ========================================================================== */

/* Closed mobile drawer sits off-screen but its shadow bled ~50px onto the
   left edge of every page (and over the cart's Checkout bar). Only shadow it
   when open, and hide it from keyboard/screen readers while closed. */
.devedge-mob-drawer:not(.active) {
  box-shadow: none !important;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s !important;
}

@media (max-width: 767.98px) {
  /* Homepage domain search. The rebuilt homepage no longer wraps the search in
     .search-box, so the older phone rules (scoped to .search-box) stopped
     matching and the desktop pill turned into an oval when it stacked.
     Same design as before: no outer box, each control its own pill. */
  .main-banner .search-group-combined:not(.hidden) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .main-banner .search-group-combined > .search-field,
  .main-banner .search-group-combined > .dropdown-multi-level {
    width: 100% !important;
    margin: 0 !important;
    background: #191F21 !important;
    border: 1px solid rgba(236, 238, 238, 0.16) !important;
    border-radius: 100px !important;
  }
  .main-banner .search-group-combined > .search-field:focus-within {
    border-color: var(--accent) !important;
  }
  .main-banner .search-group-combined .search-field .form-control,
  .main-banner .search-group-combined .search-field .form-control:focus {
    border: none !important;
    border-radius: 100px !important;
    background: transparent !important;
  }
  .main-banner .search-group-combined .dropdown-multi-level > .dropdown-toggle {
    height: 44px !important;
    padding: 0 18px !important;
    border: 0 !important;
  }
  .main-banner .search-group-combined .search-group-btn {
    width: 100%;
    margin: 0 !important;
  }
  .main-banner .search-group-combined .search-group-btn .btn {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Cart item: no second card inside the panel (Lagom's divider lines are
     drawn for the panel, so the inner card made them stick out). */
  .panel-cart .cart-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Quantity: compact field instead of a full-width box around a tiny input */
  .panel-cart .cart-item-qty .input-number {
    display: inline-flex !important;
    width: auto !important;
  }
  .panel-cart .cart-item-qty .input-number input {
    width: 48px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
  }
  /* "Continue Shopping" / "Empty Cart": wrap instead of clipping the text */
  .panel-cart > .panel-footer .content {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .panel-cart > .panel-footer .content > .btn {
    flex: 1 1 140px;
    justify-content: center;
    white-space: nowrap;
    margin: 0 !important;
  }

  /* Fixed Checkout bar: float it inside the screen edges as a single pill */
  .order-summary.order-summary-mob.is-fixed {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: transparent !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  }
  .order-summary.order-summary-mob.is-fixed #checkout {
    width: 100% !important;
    margin: 0 !important;
  }
}