/* =============================================================================
   WHMCS Client Area - custom.css (Drop-in)
   Palette:
   - Primary Dark (glass): #161616cc
   - Accent (emerald):     #047857
   Goals:
   - Full dark coverage (no white gaps)
   - Action icons support
   - Domain search header styling
   - Product description styling
   - Shopping cart header styling
   ============================================================================= */

/* -----------------------------
   0) Manual Edits
------------------------------ */
.master-breadcrumb {
  background-color: var(--card2) !important;
}

.bg-white {
  background-color: #161616cc !important;
}

.home-domain-search .input-group-wrapper {
  margin: 15px 0;
  padding: 6px;
  background-color: #161616cc;
  border: 0px solid #161616cc;
  border-radius: .25rem;
}

.dataTables_wrapper table.table-list {
  margin: 10px 0 !important;
  width: 100% !important;
  border-radius: 4px;
  border: 1px solid #161616cc;
}

.table-list > tbody > tr > td {
  background-color: #161616cc;
}

.table-list > tbody > tr:hover > td {
  background-color: #1c1c1c;
}

.badge-secondary {
  background-color: #161616cc;
}

a.badge-secondary:focus,
a.badge-secondary:hover {
  background-color: #282828;
}

.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
  padding: 15px !important;
  border-top: 1px solid #282828 !important;
  border-bottom: 1px solid #282828 !important;
  background-color: #161616cc !important;
}

.md-editor .md-footer,
.md-editor > .md-header {
  display: block;
  padding: 6px 4px;
  background: #161616cc;
}

.md-editor {
  border: 1px solid #161616cc;
  border-radius: 3px;
}

.md-editor > .btn-toolbar {
  background-color: #161616cc !important;
}

div.md-editor.active {
  display: block;
  border: 1px solid #161616cc;
  outline: 0;
  box-shadow: none;
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #222222;
  border: 1px solid #282828;
  border-radius: .25rem;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
  border: 0px solid #161616cc;
  border-radius: 12px;
}

.action-icon-btns a {
  margin: 0 0 10px 0;
  padding: 10px 0 15px;
  display: block;
  text-align: center;
  transition: all .3s ease;
  color: #666;
  text-decoration: none;
  background-color: #161616cc;
  border-radius: .25rem;
}

.panel-heading,
.card-header,
.panel-title {
  background: rgb(255 255 255 / 0.00%) !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.00%) !important;
  color: var(--text) !important;
}

#order-standard_cart .products .product header {
  position: relative;
  padding: 10px 20px;
  margin: 0 1px;
  background: #282828 !important;
  border-radius: 3px 3px 0 0;
}

#order-standard_cart .products .product header span {
  margin: 0;
  color: #fff !important;
  font-size: 1.2em;
}

.primary-content .card,
.primary-content .mc-promo-login,
.primary-content .mc-promo-manage {
  margin-top: 10px;
}

/* 1) Put the whole header/nav above the page */
#header,
#main-menu,
.navbar,
.navbar-main,
.top-nav,
.navigation {
  position: relative !important;
  z-index: 50000 !important;
  overflow: visible !important;
}

/* 2) Ensure the dropdown itself is above everything */
.navbar .dropdown-menu,
#main-menu .dropdown-menu,
.navbar-main .dropdown-menu {
  z-index: 60000 !important;
}

/* 3) Bootstrap nav containers sometimes clip dropdowns */
.navbar-collapse,
.navbar-nav,
.dropdown,
.dropup,
.btn-group,
.input-group {
  overflow: visible !important;
}

#order-standard_cart .product-info {
  margin: 0 0 20px 0;
  padding: 6px 15px;
  font-size: .85em;
  background-color: #1c1c1c !important;
  border-top: 1px solid #2e2e2e !important;
  border-bottom: 1px solid #2e2e2e !important;
  border-radius: 12px !important;
}

#order-standard_cart .view-cart-items .item {
  margin: 0;
  padding: 10px;
  background-color: #1c1c1c !important;
  border-left: 0;
  border-right: 0;
  font-size: .8em;
}

#order-standard_cart .view-cart-tabs .tab-content {
  background-color: #1c1c1c !important;
  padding: 15px;
}

.verification-banner {
  margin: 0;
  padding: 10px;
  font-weight: 300;
  background-color: #222222 !important;
  border-bottom: 1px solid #2e2e2e;
  color: #fff !important;
}

div.product-details div.product-icon {
  margin: 0;
  background-color: #282828;
  border-radius: 10px;
  padding: 30px;
  line-height: 1em;
  font-size: 60px;
}

.fa-inverse {
  color: #282828;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #161616cc;
  border-color: #343434 #343434 #343434;
}

.responsive-tabs-sm .nav-item a:hover {
  background-color: #3a3a3a;
  border-bottom: 0;
}

div.product-details-tab-container {
  margin: 0;
  padding: 20px;
  border: 1px solid #343434;
  border-top: 0;
  background-color: #fff;
}

/* Force form-control + select dark in all cases (higher specificity than theme.css) */
body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body textarea,
body select.form-control,
body select {
  background-color: #222222 !important;
  color: var(--text) !important;
  border: 1px solid #282828 !important;
  border-radius: 12px !important;
  background-clip: padding-box !important;
}

header.header .search {
  width: 325px;
  border: 1px solid transparent;
  border-radius: .25rem;
}

header.header .search:focus-within {
  border-color: transparent;
}

header.header .search .btn {
  color: #a5a5a5;
  padding: 5px 12px !important;
  background: transparent !important;
  border-color: transparent !important;
}

header.header .topbar .active-client .btn.btn-active-client span {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.00);
}

/* =========================================================
   Notifications dropdown: force the panel to open correctly
   (without globally breaking w-hidden site-wide)
   ========================================================= */

/* 1) The dropdown/panel container (common patterns) */
.notifications-dropdown,
.notification-dropdown,
#notifications,
#notificationsPanel,
[data-notifications-panel],
[data-dropdown="notifications"] {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 320px !important;
  max-width: 420px !important;
  background: #121212 !important;
  border: 1px solid #282828 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important;
  padding: 10px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

.domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-color: #369;
  background-color: #1c1c1c !important;
}

.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-xs-4 {
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 6px solid #97b5d2;
  background-color: #222222 !important;
  border-radius: 4px 4px 0 0;
}

.domain-pricing .tld-row.highlighted {
  background: #222222 !important;
}

.domain-pricing .tld-row {
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid #2e2e2e !important;
}

.domain-checker-container .input-group-box {
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  background-color: #1c1c1c !important;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.domain-promo-box {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #1c1c1c !important;
  border: 1px solid #222222 !important;
  color: #fff !important;
  border-radius: 4px;
}

/* =========================================================
   Webflow Notifications Dropdown Fix (.w-dropdown)
   Makes the dropdown list render + show content properly
   ========================================================= */

/* 1) Ensure the dropdown wrapper can layer above content */
.w-dropdown {
  position: relative !important;
  z-index: 99999 !important;
}

/* 2) Default dropdown list styling (the box/container) */
.w-dropdown-list {
  background: #121212 !important;
  border: 1px solid #282828 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important;
  min-width: 320px !important;
  max-width: 420px !important;
  overflow: hidden !important;
}

/* 3) CRITICAL: when Webflow opens the dropdown, it adds .w--open
      Force it visible and sized (even if w-hidden is present) */
.w-dropdown-list.w--open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: 420px !important;
  overflow: auto !important;
}

/* 4) If your list ALSO has w-hidden, override it only when open */
.w-dropdown-list.w-hidden.w--open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: 420px !important;
  overflow: auto !important;
}

/* 5) Fix “empty dropdown” caused by text inheriting dark color */
.w-dropdown-list.w--open,
.w-dropdown-list.w--open * {
  color: #eef2f0 !important;
}

/* 6) Dropdown item styling (links/buttons inside the notification list) */
.w-dropdown-link,
.w-dropdown-list a {
  color: #eef2f0 !important;
  background: transparent !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  display: block !important;
}

.w-dropdown-link:hover,
.w-dropdown-list a:hover {
  background: #1f1f1f !important;
  color: #059669 !important;
}

.card-footer {
  padding: .74rem 1rem;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid rgba(0, 0, 0, .125);
}

.view-ticket .posted-by {
  color: #888;
  font-size: .9rem;
  background-color: transparent;
  padding: .5rem 1rem;
}

/* =========================================================
   Align "Pay Invoice" button inside unpaid invoice notice
   ========================================================= */

/*.alert.alert-warning,
.invoice-unpaid,
.unpaid-invoice,
.pay-invoice-alert {
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
} */

/* Remove old float-based positioning */
.alert.alert-warning .btn,
.invoice-unpaid .btn,
.unpaid-invoice .btn,
.pay-invoice-alert .btn {
  float: none !important;
  margin: 0 !important;
}

/* Ensure text block doesn't push button off */
.alert.alert-warning p,
.invoice-unpaid p,
.unpaid-invoice p,
.pay-invoice-alert p {
  margin: 0 !important;
}

/* Kill all white hover backgrounds inside navbar dropdowns */
.navbar .dropdown-menu,
#main-menu .dropdown-menu {
  background: #121212 !important;
}

/* Remove background from list items themselves */
.navbar .dropdown-menu > li,
#main-menu .dropdown-menu > li {
  background: transparent !important;
}

/* Style the link */
.navbar .dropdown-menu > li > a,
#main-menu .dropdown-menu > li > a {
  background: transparent !important;
  color: #e6e6e6 !important;
}

/* Hover / Focus state */
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus,
#main-menu .dropdown-menu > li > a:hover,
#main-menu .dropdown-menu > li > a:focus {
  background: transparent !important;
  color: #059669 !important;
}

#order-standard_cart .domain-selection-options .option {
  margin-bottom: 2px;
  padding: 6px 20px;
  border-radius: 6px;
  background-color: #222222 !important;
}

/* -----------------------------
   0) Variables
------------------------------ */
:root {
  --bg: #0b0b0b;                 /* page base */
  --bg2: #101010;                /* secondary base */
  --glass: #161616cc;            /* your Primary Dark */
  --glass2: rgba(22, 22, 22, .82);  /* stronger fill */
  --card: rgba(22, 22, 22, .78);
  --card2: rgba(22, 22, 22, .64);

  --text: #eef2f0;
  --muted: #b7c3bd;
  --muted2: #93a39b;

  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .12);

  --accent: #047857;              /* your Accent */
  --accent2: #059669;             /* brighter hover */
  --accentText: #07110d;

  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #ef4444;
  --info: #38bdf8;

  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow2: 0 8px 22px rgba(0, 0, 0, .32);

  --r: 16px;
  --r2: 12px;
  --pad: 18px;

  --focus: 0 0 0 3px rgba(4, 120, 87, .28);
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* -----------------------------
   1) HARD RESET: kill white gaps
   (WHMCS themes differ; we target common wrappers)
------------------------------ */
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Common WHMCS wrappers that often default to white */
#main-body,
.main-content,
.content-wrapper,
#content,
#container,
#main,
#mainContent,
.body-content,
section,
section.section,
.section,
.wrapper,
.wrap,
.home-banner,
.header-lined,
.client-home-panels,
.clientareacontainer,
#order-standard_cart,
#order-standard_cart .primary-content,
#order-standard_cart .secondary-content,
#order-standard_cart .cart-body,
#order-standard_cart .order-summary,
#order-standard_cart .checkout,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .view-cart-items,
#order-standard_cart .products,
#order-standard_cart .sidebar,
.domain-checker-container,
.domain-search,
.domainresults,
.domain-search-results,
.kb-article,
.announcements,
.affiliates,
.downloads,
.invoices,
.credit-card,
.tickets,
.ticket-content,
.ticket-reply,
.ticket-message,
.supporttickets,
#domain-checker,
#domainchecker,
#frmDomainChecker,
#frmDomainSearch,
#frmProductDomain,
#frmConfigureProduct {
  background: transparent !important;
}

/* Some themes set body background via containers */
.container,
.container-fluid {
  background: transparent !important;
}

/* Ensure any leftover "white panels" become dark */
.panel,
.panel.panel-default,
.card,
.cards,
.well,
.tile,
.summary-container,
.list-group,
.list-group-item,
.table-container,
.modal-content,
.dropdown-menu,
.pagination,
.breadcrumb,
.navbar,
.footer,
#footer {
  color: var(--text) !important;
}

/* -----------------------------
   2) Base elements
------------------------------ */
a,
a:hover,
a:focus {
  color: var(--accent2) !important;
  text-decoration: none;
}

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

::selection {
  background: rgba(4, 120, 87, .25);
  color: var(--text);
}

.small,
small,
.text-muted,
.help-block,
.form-text,
.hint {
  color: var(--muted) !important;
}

code,
pre {
  font-family: var(--mono) !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r2) !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text) !important;
  letter-spacing: .2px;
}

/* -----------------------------
   3) Nav / Header
------------------------------ */
.navbar,
.navbar-default,
.navbar-inverse,
#header,
#main-menu,
.top-nav,
.navigation,
.navbar-main,
.header,
.topbar,
.top-bar {
  background: var(--glass) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
}

.navbar a,
.navbar-nav > li > a,
.navbar-brand {
  color: var(--text) !important;
  opacity: .92;
}

.navbar a:hover,
.navbar-nav > li > a:hover {
  opacity: 1;
  color: var(--accent2) !important;
}

/* Breadcrumb */
.breadcrumb {
  margin: 0 !important;
  padding: 9px 9px !important;
  font-size: .9rem !important;
  background: var(--card2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
}

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

.breadcrumb > li.active {
  color: var(--text) !important;
}

/* Page header bars that are often white */
.header-lined,
.header-lined h1,
.header-lined h2,
.header-lined h3 {
  background: transparent !important;
  color: var(--text) !important;
}

.header-lined {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 10px;
}

/* -----------------------------
   4) Panels / Cards
------------------------------ */
.panel,
.panel.panel-default,
.card,
.well,
.tile,
#order-standard_cart .product,
#order-standard_cart .cart-body,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items,
#order-standard_cart .sidebar,
.domain-checker-result,
.kb-article,
.announcements {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 45%),
    var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
  overflow: hidden;
}

.panel-body,
.card-body,
.well {
  padding: var(--pad) !important;
  color: var(--text) !important;
}

/* -----------------------------
   5) Buttons
------------------------------ */
.btn {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  border: 1px solid var(--line2) !important;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn:focus {
  outline: none !important;
  box-shadow: var(--focus) !important;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow2) !important;
}

/* Accent primary */
.btn-primary,
.btn.btn-primary {
  background: linear-gradient(180deg, rgba(4, 120, 87, .95), rgba(5, 150, 105, .95)) !important;
  border-color: rgba(4, 120, 87, .55) !important;
  color: #07110d !important;
}

.btn-primary:hover {
  filter: brightness(1.04);
}

/* Default / secondary */
.btn-default,
.btn-secondary,
.btn.btn-default {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--text) !important;
  border-color: var(--line2) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: rgba(255, 255, 255, .06) !important;
}

/* Status buttons */
.btn-success {
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .35) !important;
  color: var(--text) !important;
}

.btn-warning {
  background: rgba(251, 191, 36, .12) !important;
  border-color: rgba(251, 191, 36, .35) !important;
  color: var(--text) !important;
}

.btn-danger {
  background: rgba(239, 68, 68, .12) !important;
  border-color: rgba(239, 68, 68, .35) !important;
  color: var(--text) !important;
}

.btn-info {
  background: rgba(56, 189, 248, .12) !important;
  border-color: rgba(56, 189, 248, .35) !important;
  color: var(--text) !important;
}

.btn-link {
  color: var(--accent2) !important;
}

/* -----------------------------
   6) Forms / Inputs
------------------------------ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--line2) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.form-control:focus,
textarea:focus,
select:focus {
  border-color: rgba(4, 120, 87, .75) !important;
  box-shadow: var(--focus) !important;
}

label,
.control-label {
  color: var(--muted) !important;
  font-weight: 700;
}

input::placeholder,
textarea::placeholder {
  color: rgba(183, 195, 189, .65) !important;
}

/* Select2 (often used in WHMCS) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
}

.select2-container--default .select2-results__option {
  background: var(--card) !important;
  color: var(--text) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background: rgba(4, 120, 87, .22) !important;
}

/* -----------------------------
   7) Tables
------------------------------ */
.table,
table {
  color: var(--text) !important;
}

.table > thead > tr > th,
thead th {
  background: rgba(255, 255, 255, .03) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
tbody td,
tbody th {
  border-top: 1px solid var(--line) !important;
}

.table-hover > tbody > tr:hover {
  background: rgba(255, 255, 255, .03) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, .02) !important;
}

/* -----------------------------
   8) Alerts / Badges
------------------------------ */
.alert {
  border-radius: var(--r) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: var(--shadow2) !important;
  color: var(--text) !important;
}

.alert-success {
  background: rgba(34, 197, 94, .12) !important;
}

.alert-info {
  background: rgba(56, 189, 248, .12) !important;
}

.alert-warning {
  background: rgba(251, 191, 36, .12) !important;
}

.alert-danger {
  background: rgba(239, 68, 68, .12) !important;
}

.label,
.badge {
  border-radius: 999px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--line) !important;
  font-weight: 800;
}

.label-success,
.badge-success {
  background: rgba(34, 197, 94, .16) !important;
}

.label-info,
.badge-info {
  background: rgba(56, 189, 248, .16) !important;
}

.label-warning,
.badge-warning {
  background: rgba(251, 191, 36, .16) !important;
}

.label-danger,
.badge-danger {
  background: rgba(239, 68, 68, .16) !important;
}

/* -----------------------------
   9) Modals / Dropdowns / Pagination
------------------------------ */
.modal-content {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
}

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

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

.modal-title {
  color: var(--text) !important;
}

.close {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.dropdown-menu {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--shadow) !important;
}

.dropdown-menu > li > a {
  color: var(--text) !important;
}

.dropdown-menu > li > a:hover {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--accent2) !important;
}

.pagination > li > a,
.pagination > li > span {
  background: rgba(255, 255, 255, .02) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: rgba(4, 120, 87, .92) !important;
  border-color: rgba(4, 120, 87, .55) !important;
  color: var(--accentText) !important;
}

/* -----------------------------
   10) Tabs / Pills / Lists
------------------------------ */
.nav-tabs,
.nav-pills {
  border-bottom: 1px solid var(--line) !important;
}

.nav-tabs > li > a,
.nav-pills > li > a {
  color: var(--muted) !important;
  border-radius: 12px 12px 0 0 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--line) !important;
  border-bottom-color: transparent !important;
}

.list-group-item {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.list-group-item:hover {
  background: rgba(255, 255, 255, .03) !important;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background: rgba(4, 120, 87, .18) !important;
  border-color: rgba(4, 120, 87, .35) !important;
  color: var(--text) !important;
}

/* -----------------------------
   11) ACTION ICONS (requested)
   WHMCS uses various icon patterns depending on theme.
------------------------------ */
/* Generic icon anchors/buttons */
a .fa,
a .fas,
a .far,
a .fal,
a .fab,
a .glyphicon,
.btn .fa,
.btn .fas,
.btn .far,
.btn .glyphicon,
.action-icon,
.action-icon i,
.action-icon svg,
.btn-icon,
.icon-btn,
.btn-action {
  color: var(--muted) !important;
  transition: color .12s ease, transform .08s ease, opacity .12s ease;
}

a:hover .fa,
a:hover .fas,
a:hover .far,
a:hover .fab,
.btn:hover .fa,
.btn:hover .fas,
.btn:hover .far,
.action-icon:hover,
.action-icon:hover i,
.action-icon:hover svg,
.btn-icon:hover,
.icon-btn:hover,
.btn-action:hover {
  color: var(--accent2) !important;
  transform: translateY(-1px);
}

/* Small icon containers often appear as circular buttons */
.action-icon,
.btn-icon,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px;
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--line) !important;
}

.action-icon:hover,
.btn-icon:hover,
.icon-btn:hover {
  background: rgba(4, 120, 87, .14) !important;
  border-color: rgba(4, 120, 87, .35) !important;
}

/* -----------------------------
   12) DOMAIN SEARCH HEADER (requested)
------------------------------ */
/* Common domain search header blocks in WHMCS */
.domain-search-header,
.domain-checker-header,
#domain-checker .domain-search-header,
#domainchecker .domain-search-header,
.domainsearch-header,
.domain-search-container .headline,
.domain-checker-container .headline,
#frmDomainChecker .headline {
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
  backdrop-filter: blur(12px);
}

.domain-search-header h1,
.domain-search-header h2,
.domain-search-header h3,
.domain-checker-header h1,
.domain-checker-header h2,
.domain-checker-header h3,
.domainsearch-header h1,
.domainsearch-header h2,
.domainsearch-header h3 {
  color: var(--text) !important;
  margin: 0 !important;
}

.domain-search-header .lead,
.domain-checker-header .lead,
.domainsearch-header .lead,
.domain-search-header p,
.domain-checker-header p,
.domainsearch-header p {
  color: var(--muted) !important;
  margin-top: 6px !important;
}

/* -----------------------------
   13) PRODUCT DESCRIPTIONS (requested)
------------------------------ */
/* WHMCS product cards + descriptions */
.product,
.products,
.product-box,
.product-card,
#order-standard_cart .product,
#order-standard_cart .products .product {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: transparent !important;
  box-shadow: transparent !important;
}

.product .description,
.product .product-desc,
.product .product-description,
.product-box .description,
.product-card .description,
#order-standard_cart .product .product-desc,
#order-standard_cart .product .description,
#order-standard_cart .products .product .product-desc {
  color: var(--muted) !important;
  line-height: 1.55 !important;
}

/* Price + name */
.product .name,
.product .product-name,
.product .product-title,
#order-standard_cart .product .product-name,
#order-standard_cart .product .product-title {
  color: var(--text) !important;
  font-weight: 800 !important;
}

.product .price,
.product .pricing,
.product .product-price {
  color: rgba(5, 150, 105, .95) !important;
  font-weight: 900 !important;
}

/* Feature lists inside product descriptions */
.product ul,
.product ol,
.product-desc ul,
.product-desc ol,
.product-description ul,
.product-description ol {
  color: var(--muted) !important;
}

.product li::marker {
  color: rgba(5, 150, 105, .9) !important;
}

/* -----------------------------
   14) SHOPPING CART HEADER (requested)
------------------------------ */
/* Order form/cart header areas */
.cart-header,
.cart-heading,
#order-standard_cart .cart-header,
#order-standard_cart .header,
#order-standard_cart .secondary-cart-body .header,
#order-standard_cart .view-cart-tabs .nav,
#order-standard_cart .checkout-header,
#order-standard_cart .cart-title {
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(12px);
}

#order-standard_cart .cart-header h1,
#order-standard_cart .cart-header h2,
#order-standard_cart .cart-header h3,
.cart-header h1,
.cart-header h2,
.cart-header h3,
.cart-heading h1,
.cart-heading h2,
.cart-heading h3 {
  color: var(--text) !important;
  margin: 0 !important;
}

/* Make cart step indicators not look washed out */
#order-standard_cart .cart-steps,
#order-standard_cart .cart-steps .step,
#order-standard_cart .cart-steps li {
  color: var(--muted) !important;
}

#order-standard_cart .cart-steps .step.active,
#order-standard_cart .cart-steps li.active {
  color: var(--text) !important;
}

#order-standard_cart .cart-steps .step.active::before,
#order-standard_cart .cart-steps li.active::before {
  background: rgba(4, 120, 87, .9) !important;
}

/* -----------------------------
   15) Tickets / KB blocks
------------------------------ */
.ticket-reply,
.ticket-message,
.message,
.kb-search {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
}

/* -----------------------------
   16) Footer
------------------------------ */
.footer,
#footer,
.footer-bar {
  background: var(--glass) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
  backdrop-filter: blur(12px);
}

/* -----------------------------
   17) Responsive
------------------------------ */
@media (max-width: 767px) {
  .panel-body,
  .card-body {
    padding: 14px !important;
  }

  .cart-header,
  .domain-search-header {
    padding: 12px 14px !important;
  }
}

/* =========================================================
   WHMCS Checkout TLD Selector (select + dropdown list)
   Fixes white dropdown/options in domain step
   ========================================================= */

/* 1) The TLD <select> control itself */
#order-standard_cart select,
#order-standard_cart select.form-control,
#order-standard_cart #inputDomainTld,
#order-standard_cart select[name="domainTld"],
#order-standard_cart select[name="tld"],
#order-standard_cart select.tld-select {
  background-color: #222222 !important;
  color: #eef2f0 !important;
  border: 1px solid #282828 !important;
  border-radius: 12px !important;
}

/* 2) The actual dropdown options (native select list) */
#order-standard_cart select option,
#order-standard_cart select optgroup {
  background-color: #121212 !important;
  color: #eef2f0 !important;
}

/* Hover/selected appearance (browser support varies) */
#order-standard_cart select option:checked {
  background-color: rgba(4, 120, 87, .35) !important;
  color: #eef2f0 !important;
}

/* 3) If WHMCS uses Select2 for TLDs, style the Select2 dropdown */
#order-standard_cart .select2-container--default .select2-selection--single {
  background-color: #222222 !important;
  border: 1px solid #282828 !important;
  border-radius: 12px !important;
  color: #eef2f0 !important;
}

#order-standard_cart .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #eef2f0 !important;
}

#order-standard_cart .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #eef2f0 transparent transparent transparent !important;
}

/* Select2 dropdown panel */
#order-standard_cart .select2-container--default .select2-dropdown {
  background-color: #121212 !important;
  border: 1px solid #282828 !important;
  border-radius: 12px !important;
  overflow: hidden;
  z-index: 70000 !important;
}

/* Select2 option items */
#order-standard_cart .select2-container--default .select2-results__option {
  background-color: #121212 !important;
  color: #eef2f0 !important;
}

/* Select2 hover/highlight */
#order-standard_cart .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(4, 120, 87, .25) !important;
  color: #eef2f0 !important;
}

/* Select2 selected item */
#order-standard_cart .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(4, 120, 87, .35) !important;
  color: #eef2f0 !important;
}
/* =============================================================================
   WHMCS Client Area - custom.css (Drop-in)
   Palette:
   - Primary Dark (glass): #161616cc
   - Accent (emerald):     #047857
   Goals:
   - Full dark coverage (no white gaps)
   - Action icons support
   - Domain search header styling
   - Product description styling
   - Shopping cart header styling
   ============================================================================= */

/* -----------------------------
   0) Manual Edits
------------------------------ */
.master-breadcrumb {
    background-color: var(--card2) !important;
}

.breadcrumb {
    background: #161616a3 !important;
    margin: 0 !important;
    padding: 9px 9px !important;
    font-size: .9rem !important;
}

.bg-white {
    background-color: #161616cc !important;
}

.home-domain-search .input-group-wrapper {
    margin: 15px 0;
    padding: 6px;
    background-color: #161616cc;
    border: 0px solid #161616cc;
    border-radius: .25rem;
}

.dataTables_wrapper table.table-list {
    margin: 10px 0 !important;
    width: 100% !important;
    border-radius: 4px;
    border: 1px solid #161616cc;
}

.table-list>tbody>tr>td {
    background-color: #161616cc;
}

.table-list>tbody>tr:hover>td {
    background-color: #1c1c1c;
}

.badge-secondary {
    background-color: #161616cc;
}

a.badge-secondary:focus, a.badge-secondary:hover {
    background-color: #282828;
}

.md-editor>.md-preview, .md-editor>textarea.markdown-editor {
    padding: 15px !important;
    border-top: 1px solid #282828 !important;
    border-bottom: 1px solid #282828 !important;
    background-color: #161616cc !important;
}

.md-editor .md-footer, .md-editor>.md-header {
    display: block;
    padding: 6px 4px;
    background: #161616cc;
}

.md-editor {
    border: 1px solid #161616cc;
    border-radius: 3px;
}

.md-editor>.btn-toolbar {
    background-color: #161616cc !important;
}

div.md-editor.active {
    display: block;
    border: 1px solid #161616cc;
    outline: 0;
    box-shadow: none;
}

.form-control:focus,
textarea:focus,
select:focus {
  border-color: rgba(40,40,40,.65) !important;
  box-shadow: rgba(40,40,40,.65) !important;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #222222;
    border: 1px solid #282828;
    border-radius: .25rem;
}

.input-group-text{
  display:flex;
  align-items:center;
  padding:.375rem .75rem;
  margin-bottom:0;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:#495057;
  text-align:center;
  white-space:nowrap;
  background-color: transparent;
  border:0px solid #161616cc;
  border-radius: 12px;
}

.action-icon-btns a {
    margin: 0 0 10px 0;
    padding: 10px 0 15px;
    display: block;
    text-align: center;
    transition: all .3s ease;
    color: #666;
    text-decoration: none;
    background-color: #161616cc;
    border-radius: .25rem;
}

.panel-heading, .card-header, .panel-title {
    background: rgb(255 255 255 / 0.00%) !important;
    border-bottom: 1px solid rgb(255 255 255 / 0.00%) !important;
    color: var(--text) !important;
}

#order-standard_cart .products .product header {
    position: relative;
    padding: 10px 20px;
    margin: 0 1px;
    background: #282828 !important;
    border-radius: 3px 3px 0 0;
}

#order-standard_cart .products .product header span {
    margin: 0;
    color: #fff !important;
    font-size: 1.2em;
}

.primary-content .card, .primary-content .mc-promo-login, .primary-content .mc-promo-manage {
    margin-top: 10px;
}

/* 1) Put the whole header/nav above the page */
#header,
#main-menu,
.navbar,
.navbar-main,
.top-nav,
.navigation{
  position: relative !important;
  z-index: 50000 !important;
  overflow: visible !important;
}

/* 2) Ensure the dropdown itself is above everything */
.navbar .dropdown-menu,
#main-menu .dropdown-menu,
.navbar-main .dropdown-menu{
  z-index: 60000 !important;
}

/* 3) Bootstrap nav containers sometimes clip dropdowns */
.navbar-collapse,
.navbar-nav,
.dropdown,
.dropup,
.btn-group,
.input-group{
  overflow: visible !important;
}

#order-standard_cart .product-info {
    margin: 0 0 20px 0;
    padding: 6px 15px;
    font-size: .85em;
    background-color: #1c1c1c !important;
    border-top: 1px solid #2e2e2e !important;
    border-bottom: 1px solid #2e2e2e !important;
    border-radius: 12px !important;
}

#order-standard_cart .view-cart-items .item {
    margin: 0;
    padding: 10px;
    background-color: #1c1c1c !important;
    border-left: 0;
    border-right: 0;
    font-size: .8em;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background-color: #1c1c1c !important;
    padding: 15px;
}

.verification-banner {
    margin: 0;
    padding: 10px;
    font-weight: 300;
    background-color: #222222 !important;
    border-bottom: 1px solid #2e2e2e;
    color: #fff !important;
}

div.product-details div.product-icon {
    margin: 0;
    background-color: #282828;
    border-radius: 10px;
    padding: 30px;
    line-height: 1em;
    font-size: 60px;
}

.fa-inverse {
    color: #282828;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #161616cc;
    border-color: #343434 #343434 #343434;
}

.responsive-tabs-sm .nav-item a:hover {
    background-color: #3a3a3a;
    border-bottom: 0;
}

div.product-details-tab-container {
    margin: 0;
    padding: 20px;
    border: 1px solid #343434;
    border-top: 0;
    background-color: #fff;
}



/* Force form-control + select dark in all cases (higher specificity than theme.css) */
body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body textarea,
body select.form-control,
body select{
  background-color:#222222 !important; /* use real background-color */
  color: var(--text) !important;
  border: 1px solid #282828 !important;
  border-radius: 12px !important;
  background-clip: padding-box !important;
}


header.header .search {
    width: 325px;
    border: 1px solid transparent;
    border-radius: .25rem;
}

header.header .search:focus-within {
    border-color: transparent;
}

header.header .search .btn {
    color: #a5a5a5;
    padding: 5px 12px !important;
    background: transparent !important;
    border-color: transparent !important;
}

header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom: 1px dashed rgba(255,255,255,0.00);
}



/* =========================================================
   Notifications dropdown: force the panel to open correctly
   (without globally breaking w-hidden site-wide)
   ========================================================= */

/* 1) The dropdown/panel container (common patterns) */
.notifications-dropdown,
.notification-dropdown,
#notifications,
#notificationsPanel,
[data-notifications-panel],
[data-dropdown="notifications"]{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 320px !important;
  max-width: 420px !important;

  background: #121212 !important;
  border: 1px solid #282828 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;

  padding: 10px !important;
  overflow: hidden !important;

  z-index: 99999 !important;
}

.domain-pricing .tld-pricing-header div:nth-child(odd) {
    border-color: #369;
    background-color: #1c1c1c !important;
}

.domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-xs-4 {
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 6px solid #97b5d2;
    background-color: #222222 !important;
    border-radius: 4px 4px 0 0;
}

.domain-pricing .tld-row.highlighted {
    background: #222222 !important;
}

.domain-pricing .tld-row {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #2e2e2e !important;
}

.domain-checker-container .input-group-box {
    margin: 0 auto;
    padding: 10px;
    width: 100%;
    background-color: #1c1c1c !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.domain-promo-box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #1c1c1c !important;
    border: 1px solid #222222 !important;
    color: #fff !important;
    border-radius: 4px;
}


/* =========================================================
   Webflow Notifications Dropdown Fix (.w-dropdown)
   Makes the dropdown list render + show content properly
   ========================================================= */

/* 1) Ensure the dropdown wrapper can layer above content */
.w-dropdown{
  position: relative !important;
  z-index: 99999 !important;
}

/* 2) Default dropdown list styling (the box/container) */
.w-dropdown-list{
  background: #121212 !important;
  border: 1px solid #282828 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;

  min-width: 320px !important;
  max-width: 420px !important;

  overflow: hidden !important;
}

/* 3) CRITICAL: when Webflow opens the dropdown, it adds .w--open
      Force it visible and sized (even if w-hidden is present) */
.w-dropdown-list.w--open{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  max-height: 420px !important;
  overflow: auto !important;
}

/* 4) If your list ALSO has w-hidden, override it only when open */
.w-dropdown-list.w-hidden.w--open{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: 420px !important;
  overflow: auto !important;
}

/* 5) Fix “empty dropdown” caused by text inheriting dark color */
.w-dropdown-list.w--open,
.w-dropdown-list.w--open *{
  color: #eef2f0 !important;
}

/* 6) Dropdown item styling (links/buttons inside the notification list) */
.w-dropdown-link,
.w-dropdown-list a{
  color: #eef2f0 !important;
  background: transparent !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  display: block !important;
}
.w-dropdown-link:hover,
.w-dropdown-list a:hover{
  background: #1f1f1f !important;
  color: #059669 !important;
}

/* 7) Prevent header/nav from clipping the dropdown */
#header, #main-menu, .navbar, .top-nav, .navigation{
  overflow: visible !important;
  position: relative !important;
  z-index: 50000 !important;
}

.card-footer {
    padding: .74rem 1rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}


.view-ticket .posted-by {
    color: #888;
    font-size: .9rem;
    background-color: transparent;
    padding: .5rem 1rem;
}



/* =========================================================
   Align "Pay Invoice" button inside unpaid invoice notice
   ========================================================= */

/*.alert.alert-warning,
.invoice-unpaid,
.unpaid-invoice,
.pay-invoice-alert{
  display:none !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px;
} */

/* Remove old float-based positioning */
.alert.alert-warning .btn,
.invoice-unpaid .btn,
.unpaid-invoice .btn,
.pay-invoice-alert .btn{
  float:none !important;
  margin:0 !important;
}

/* Ensure text block doesn't push button off */
.alert.alert-warning p,
.invoice-unpaid p,
.unpaid-invoice p,
.pay-invoice-alert p{
  margin:0 !important;
}


/* Kill all white hover backgrounds inside navbar dropdowns */
.navbar .dropdown-menu,
#main-menu .dropdown-menu{
  background:#121212 !important;
}

/* Remove background from list items themselves */
.navbar .dropdown-menu > li,
#main-menu .dropdown-menu > li{
  background:transparent !important;
}

/* Style the link */
.navbar .dropdown-menu > li > a,
#main-menu .dropdown-menu > li > a{
  background:transparent !important;
  color:#e6e6e6 !important;
}

/* Hover / Focus state */
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus,
#main-menu .dropdown-menu > li > a:hover,
#main-menu .dropdown-menu > li > a:focus{
  background:transparent !important;
  color:#059669 !important;
}



#order-standard_cart .domain-selection-options .option {
    margin-bottom: 2px;
    padding: 6px 20px;
    border-radius: 6px;
    background-color: #222222 !important;
}


/* -----------------------------
   0) Variables
------------------------------ */
:root{
  --bg: #0b0b0b;                 /* page base */
  --bg2:#101010;                 /* secondary base */
  --glass: #161616cc;            /* your Primary Dark */
  --glass2: rgba(22,22,22,.82);  /* stronger fill */
  --card: rgba(22,22,22,.78);
  --card2: rgba(22,22,22,.64);

  --text:#eef2f0;
  --muted:#b7c3bd;
  --muted2:#93a39b;

  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.12);

  --accent:#047857;              /* your Accent */
  --accent2:#059669;             /* brighter hover */
  --accentText:#07110d;

  --success:#22c55e;
  --warning:#fbbf24;
  --danger:#ef4444;
  --info:#38bdf8;

  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --shadow2: 0 8px 22px rgba(0,0,0,.32);

  --r: 16px;
  --r2: 12px;
  --pad: 18px;

  --focus: 0 0 0 3px rgba(4,120,87,.28);
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* -----------------------------
   1) HARD RESET: kill white gaps
   (WHMCS themes differ; we target common wrappers)
------------------------------ */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Common WHMCS wrappers that often default to white */
#main-body,
.main-content,
.content-wrapper,
#content,
#container,
#main,
#mainContent,
.body-content,
section,
section.section,
.section,
.wrapper,
.wrap,
.home-banner,
.header-lined,
.client-home-panels,
.clientareacontainer,
#order-standard_cart,
#order-standard_cart .primary-content,
#order-standard_cart .secondary-content,
#order-standard_cart .cart-body,
#order-standard_cart .order-summary,
#order-standard_cart .checkout,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .view-cart-items,
#order-standard_cart .products,
#order-standard_cart .sidebar,
.domain-checker-container,
.domain-search,
.domainresults,
.domain-search-results,
.kb-article,
.announcements,
.affiliates,
.downloads,
.invoices,
.credit-card,
.tickets,
.ticket-content,
.ticket-reply,
.ticket-message,
.supporttickets,
#domain-checker,
#domainchecker,
#frmDomainChecker,
#frmDomainSearch,
#frmProductDomain,
#frmConfigureProduct
{
  background: transparent !important;
}

/* Some themes set body background via containers */
.container, .container-fluid{
  background: transparent !important;
}

/* Ensure any leftover "white panels" become dark */
.panel, .panel.panel-default,
.card, .cards,
.well, .tile, .summary-container,
.list-group, .list-group-item,
.table-container,
.modal-content,
.dropdown-menu,
.pagination,
.breadcrumb,
.navbar,
.footer, #footer
{
  color: var(--text) !important;
}

/* -----------------------------
   2) Base elements
------------------------------ */
a, a:hover, a:focus{
  color: var(--accent2) !important;
  text-decoration: none;
}

hr{ border-color: var(--line) !important; }
::selection{ background: rgba(4,120,87,.25); color: var(--text); }

.small, small, .text-muted, .help-block, .form-text, .hint{
  color: var(--muted) !important;
}

code, pre{
  font-family: var(--mono) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r2) !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: var(--text) !important;
  letter-spacing: .2px;
}

/* -----------------------------
   3) Nav / Header
------------------------------ */
.navbar, .navbar-default, .navbar-inverse,
#header, #main-menu, .top-nav, .navigation, .navbar-main,
.header, .topbar, .top-bar
{
  background: var(--glass) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
}

.navbar a, .navbar-nav>li>a, .navbar-brand{
  color: var(--text) !important;
  opacity: .92;
}
.navbar a:hover, .navbar-nav>li>a:hover{
  opacity: 1;
  color: var(--accent2) !important;
}

/* Breadcrumb */
.breadcrumb{
  background: var(--card2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
}
.breadcrumb > li, .breadcrumb a{ color: var(--muted) !important; }
.breadcrumb > li.active{ color: var(--text) !important; }

/* Page header bars that are often white */
.header-lined,
.header-lined h1,
.header-lined h2,
.header-lined h3{
  background: transparent !important;
  color: var(--text) !important;
}
.header-lined{
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 10px;
}

/* -----------------------------
   4) Panels / Cards
------------------------------ */
.panel, .panel.panel-default,
.card, .well, .tile,
#order-standard_cart .product,
#order-standard_cart .cart-body,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items,
#order-standard_cart .sidebar,
.domain-checker-result,
.kb-article, .announcements
{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%),
              var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
  overflow: hidden;
}

.panel-body, .card-body, .well{
  padding: var(--pad) !important;
  color: var(--text) !important;
}

/* -----------------------------
   5) Buttons
------------------------------ */
.btn{
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  border: 1px solid var(--line2) !important;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:focus{ outline: none !important; box-shadow: var(--focus) !important; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2) !important; }

/* Accent primary */
.btn-primary, .btn.btn-primary{
  background: linear-gradient(180deg, rgba(4,120,87,.95), rgba(5,150,105,.95)) !important;
  border-color: rgba(4,120,87,.55) !important;
  color: #07110d !important;
}
.btn-primary:hover{ filter: brightness(1.04); }

/* Default / secondary */
.btn-default, .btn-secondary, .btn.btn-default{
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border-color: var(--line2) !important;
}
.btn-default:hover, .btn-secondary:hover{ background: rgba(255,255,255,.06) !important; }

/* Status buttons */
.btn-success{ background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.35) !important; color: var(--text) !important; }
.btn-warning{ background: rgba(251,191,36,.12) !important; border-color: rgba(251,191,36,.35) !important; color: var(--text) !important; }
.btn-danger{  background: rgba(239,68,68,.12) !important;  border-color: rgba(239,68,68,.35) !important;  color: var(--text) !important; }
.btn-info{    background: rgba(56,189,248,.12) !important; border-color: rgba(56,189,248,.35) !important; color: var(--text) !important; }

.btn-link{ color: var(--accent2) !important; }

/* -----------------------------
   6) Forms / Inputs
------------------------------ */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line2) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.form-control:focus, textarea:focus, select:focus{
  border-color: rgba(4,120,87,.75) !important;
  box-shadow: var(--focus) !important;
}

label, .control-label{
  color: var(--muted) !important;
  font-weight: 700;
}

input::placeholder, textarea::placeholder{
  color: rgba(183,195,189,.65) !important;
}

/* Select2 (often used in WHMCS) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
}
.select2-container--default .select2-results__option{
  background: var(--card) !important;
  color: var(--text) !important;
}
.select2-container--default .select2-results__option--highlighted{
  background: rgba(4,120,87,.22) !important;
}

/* -----------------------------
   7) Tables
------------------------------ */
.table, table{ color: var(--text) !important; }

.table>thead>tr>th, thead th{
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important;
}
.table>tbody>tr>td, .table>tbody>tr>th, tbody td, tbody th{
  border-top: 1px solid var(--line) !important;
}
.table-hover>tbody>tr:hover{ background: rgba(255,255,255,.03) !important; }
.table-striped>tbody>tr:nth-of-type(odd){ background: rgba(255,255,255,.02) !important; }

/* -----------------------------
   8) Alerts / Badges
------------------------------ */
.alert{
  border-radius: var(--r) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: var(--shadow2) !important;
  color: var(--text) !important;
}
.alert-success{ background: rgba(34,197,94,.12) !important; }
.alert-info{    background: rgba(56,189,248,.12) !important; }
.alert-warning{ background: rgba(251,191,36,.12) !important; }
.alert-danger{  background: rgba(239,68,68,.12) !important; }

.label, .badge{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--line) !important;
  font-weight: 800;
}
.label-success, .badge-success{ background: rgba(34,197,94,.16) !important; }
.label-info, .badge-info{ background: rgba(56,189,248,.16) !important; }
.label-warning, .badge-warning{ background: rgba(251,191,36,.16) !important; }
.label-danger, .badge-danger{ background: rgba(239,68,68,.16) !important; }

/* -----------------------------
   9) Modals / Dropdowns / Pagination
------------------------------ */
.modal-content{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
}
.modal-header{ border-bottom: 1px solid var(--line) !important; }
.modal-footer{ border-top: 1px solid var(--line) !important; }
.modal-title{ color: var(--text) !important; }
.close{ color: var(--muted) !important; opacity: 1 !important; }

.dropdown-menu{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--shadow) !important;
}
.dropdown-menu>li>a{ color: var(--text) !important; }
.dropdown-menu>li>a:hover{
  background: rgba(255,255,255,.04) !important;
  color: var(--accent2) !important;
}

.pagination>li>a, .pagination>li>span{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
}
.pagination>.active>a, .pagination>.active>span{
  background: rgba(4,120,87,.92) !important;
  border-color: rgba(4,120,87,.55) !important;
  color: var(--accentText) !important;
}

/* -----------------------------
   10) Tabs / Pills / Lists
------------------------------ */
.nav-tabs, .nav-pills{ border-bottom: 1px solid var(--line) !important; }
.nav-tabs>li>a, .nav-pills>li>a{ color: var(--muted) !important; border-radius: 12px 12px 0 0 !important; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
  color: var(--text) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line) !important;
  border-bottom-color: transparent !important;
}

.list-group-item{
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.list-group-item:hover{ background: rgba(255,255,255,.03) !important; }
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
  background: rgba(4,120,87,.18) !important;
  border-color: rgba(4,120,87,.35) !important;
  color: var(--text) !important;
}

/* -----------------------------
   11) ACTION ICONS (requested)
   WHMCS uses various icon patterns depending on theme.
------------------------------ */
/* Generic icon anchors/buttons */
a .fa, a .fas, a .far, a .fal, a .fab,
a .glyphicon,
.btn .fa, .btn .fas, .btn .far, .btn .glyphicon,
.action-icon, .action-icon i, .action-icon svg,
.btn-icon, .icon-btn, .btn-action
{
  color: var(--muted) !important;
  transition: color .12s ease, transform .08s ease, opacity .12s ease;
}

a:hover .fa, a:hover .fas, a:hover .far, a:hover .fab,
.btn:hover .fa, .btn:hover .fas, .btn:hover .far,
.action-icon:hover, .action-icon:hover i, .action-icon:hover svg,
.btn-icon:hover, .icon-btn:hover, .btn-action:hover
{
  color: var(--accent2) !important;
  transform: translateY(-1px);
}

/* Small icon containers often appear as circular buttons */
.action-icon, .btn-icon, .icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line) !important;
}
.action-icon:hover, .btn-icon:hover, .icon-btn:hover{
  background: rgba(4,120,87,.14) !important;
  border-color: rgba(4,120,87,.35) !important;
}

/* -----------------------------
   12) DOMAIN SEARCH HEADER (requested)
------------------------------ */
/* Common domain search header blocks in WHMCS */
.domain-search-header,
.domain-checker-header,
#domain-checker .domain-search-header,
#domainchecker .domain-search-header,
.domainsearch-header,
.domain-search-container .headline,
.domain-checker-container .headline,
#frmDomainChecker .headline
{
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
  backdrop-filter: blur(12px);
}

.domain-search-header h1,
.domain-search-header h2,
.domain-search-header h3,
.domain-checker-header h1,
.domain-checker-header h2,
.domain-checker-header h3,
.domainsearch-header h1,
.domainsearch-header h2,
.domainsearch-header h3
{
  color: var(--text) !important;
  margin: 0 !important;
}

.domain-search-header .lead,
.domain-checker-header .lead,
.domainsearch-header .lead,
.domain-search-header p,
.domain-checker-header p,
.domainsearch-header p
{
  color: var(--muted) !important;
  margin-top: 6px !important;
}

/* -----------------------------
   13) PRODUCT DESCRIPTIONS (requested)
------------------------------ */
/* WHMCS product cards + descriptions */
.product, .products, .product-box, .product-card,
#order-standard_cart .product,
#order-standard_cart .products .product
{
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: transparent !important;
  box-shadow: transparent !important;
}

.product .description,
.product .product-desc,
.product .product-description,
.product-box .description,
.product-card .description,
#order-standard_cart .product .product-desc,
#order-standard_cart .product .description,
#order-standard_cart .products .product .product-desc
{
  color: var(--muted) !important;
  line-height: 1.55 !important;
}

/* Price + name */
.product .name, .product .product-name, .product .product-title,
#order-standard_cart .product .product-name, #order-standard_cart .product .product-title{
  color: var(--text) !important;
  font-weight: 800 !important;
}
.product .price, .product .pricing, .product .product-price{
  color: rgba(5,150,105,.95) !important;
  font-weight: 900 !important;
}

/* Feature lists inside product descriptions */
.product ul, .product ol,
.product-desc ul, .product-desc ol,
.product-description ul, .product-description ol{
  color: var(--muted) !important;
}
.product li::marker{ color: rgba(5,150,105,.9) !important; }

/* -----------------------------
   14) SHOPPING CART HEADER (requested)
------------------------------ */
/* Order form/cart header areas */
.cart-header,
.cart-heading,
#order-standard_cart .cart-header,
#order-standard_cart .header,
#order-standard_cart .secondary-cart-body .header,
#order-standard_cart .view-cart-tabs .nav,
#order-standard_cart .checkout-header,
#order-standard_cart .cart-title
{
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow2) !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(12px);
}

#order-standard_cart .cart-header h1,
#order-standard_cart .cart-header h2,
#order-standard_cart .cart-header h3,
.cart-header h1, .cart-header h2, .cart-header h3,
.cart-heading h1, .cart-heading h2, .cart-heading h3
{
  color: var(--text) !important;
  margin: 0 !important;
}

/* Make cart step indicators not look washed out */
#order-standard_cart .cart-steps,
#order-standard_cart .cart-steps .step,
#order-standard_cart .cart-steps li
{
  color: var(--muted) !important;
}
#order-standard_cart .cart-steps .step.active,
#order-standard_cart .cart-steps li.active
{
  color: var(--text) !important;
}
#order-standard_cart .cart-steps .step.active::before,
#order-standard_cart .cart-steps li.active::before{
  background: rgba(4,120,87,.9) !important;
}

/* -----------------------------
   15) Tickets / KB blocks
------------------------------ */
.ticket-reply, .ticket-message, .message, .kb-search{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
}

/* -----------------------------
   16) Footer
------------------------------ */
.footer, #footer, .footer-bar{
  background: var(--glass) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
  backdrop-filter: blur(12px);
}

/* -----------------------------
   17) Responsive
------------------------------ */
@media (max-width: 767px){
  .panel-body, .card-body{ padding: 14px !important; }
  .cart-header, .domain-search-header{ padding: 12px 14px !important; }
}


/* =========================================================
   WHMCS Checkout TLD Selector (select + dropdown list)
   Fixes white dropdown/options in domain step
   ========================================================= */

/* 1) The TLD <select> control itself */
#order-standard_cart select,
#order-standard_cart select.form-control,
#order-standard_cart #inputDomainTld,
#order-standard_cart select[name="domainTld"],
#order-standard_cart select[name="tld"],
#order-standard_cart select.tld-select{
  background-color:#222222 !important;
  color:#eef2f0 !important;
  border:1px solid #282828 !important;
  border-radius:12px !important;
}

/* 2) The actual dropdown options (native select list) */
#order-standard_cart select option,
#order-standard_cart select optgroup{
  background-color:#121212 !important;  /* dropdown background */
  color:#eef2f0 !important;            /* option text */
}

/* Hover/selected appearance (browser support varies) */
#order-standard_cart select option:checked{
  background-color: rgba(4,120,87,.35) !important;
  color:#eef2f0 !important;
}

/* 3) If WHMCS uses Select2 for TLDs, style the Select2 dropdown */
#order-standard_cart .select2-container--default .select2-selection--single{
  background-color:#222222 !important;
  border:1px solid #282828 !important;
  border-radius:12px !important;
  color:#eef2f0 !important;
}

#order-standard_cart .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#eef2f0 !important;
}

#order-standard_cart .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:#eef2f0 transparent transparent transparent !important;
}

/* Select2 dropdown panel */
#order-standard_cart .select2-container--default .select2-dropdown{
  background-color:#121212 !important;
  border:1px solid #282828 !important;
  border-radius:12px !important;
  overflow:hidden;
  z-index: 70000 !important; /* keep above cards */
}

/* Select2 option items */
#order-standard_cart .select2-container--default .select2-results__option{
  background-color:#121212 !important;
  color:#eef2f0 !important;
}

/* Select2 hover/highlight */
#order-standard_cart .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color: rgba(4,120,87,.25) !important;
  color:#eef2f0 !important;
}

/* Select2 selected item */
#order-standard_cart .select2-container--default .select2-results__option[aria-selected="true"]{
  background-color: rgba(4,120,87,.35) !important;
  color:#eef2f0 !important;
}