/* Atyaf Console — Unified Surface & Component Architecture (Gate 6 Cutover — Atyaf Architectural Prism)
   Embodies the visual identity of https://atyaf.co (Manrope weight-500 + IBM Plex Sans Arabic,
   warm architectural paper #f3f4f1 / deep obsidian #0b0d10, 3-stop Rose/Violet/Mint prism spectrum,
   crisp 1px hairline grids, and sharp 4px–6px architectural controls). */

/* 1. Base & Document Shell */
html {
  font-size: 100% !important;
}

html,
body {
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  text-align: start !important;
  margin: 0;
  padding: 0;
  min-block-size: 100dvh;
  max-inline-size: 100%;
}

body.primary-bg-color {
  background-color: var(--surface-canvas) !important;
  color: var(--text-primary) !important;
  text-align: start !important;
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

:lang(ar) body {
  font-family: var(--font-arabic);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.22;
  text-wrap: balance;
}

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) h4, :lang(ar) h5, :lang(ar) h6 {
  font-family: var(--font-arabic);
  font-weight: 600;
  line-height: 1.35;
}

:lang(en) h1, :lang(en) h2, :lang(tr) h1, :lang(tr) h2 {
  letter-spacing: -0.03em;
}

:lang(en) h3, :lang(tr) h3 {
  letter-spacing: -0.02em;
}

p, li, dd, dt {
  color: var(--text-secondary);
  text-wrap: pretty;
}

:lang(ar) p,
:lang(ar) li,
:lang(ar) label,
:lang(ar) .field-help-text,
:lang(ar) small,
:lang(ar) .small {
  line-height: 1.65 !important;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-out-quint),
              background-color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint);
}

a:hover {
  color: var(--accent-hover);
}

/* 2. Skip Link & Universal Focus Ring (WCAG 2.4.1 / 2.4.7 / 1.4.11) */
.console-skip-link {
  position: fixed;
  inset-block-start: -9999px;
  inset-inline-start: var(--space-3);
  z-index: var(--z-tooltip);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  background-color: var(--surface-card);
  color: var(--text-primary);
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--elevation-overlay);
  pointer-events: none;
}

.console-skip-link:focus,
.console-skip-link:focus-visible {
  inset-block-start: var(--space-3);
  pointer-events: auto;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
  outline-color: transparent !important;
  box-shadow: none !important;
}

.list-group-item:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: -2px !important;
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
.form-control:focus,
.form-control:focus-visible,
.custom-select:focus,
.custom-select:focus-visible,
.field:focus,
.field:focus-visible {
  border-color: var(--border-input-focus) !important;
  box-shadow: var(--ring-input-focus) !important;
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
}

/* 3. Top Header & Navigation Shell — Atyaf.co Obsidian Architectural Bar + Prism Hairline */
@media (min-width: 1280px) {
  .container {
    max-inline-size: 1320px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-inline-size: 1400px;
  }
}

header#header.header {
  background-color: var(--shell-bg);
  color: var(--shell-text);
  border-block-end: 1px solid var(--shell-border);
  position: relative;
  z-index: var(--z-sticky);
}

header#header.header::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 2px;
  background: var(--atyaf-prism-line);
}

header#header .topbar {
  background-color: var(--shell-topbar-bg);
  border-block-end: 1px solid var(--shell-border-subtle);
  padding-block: 4px;
  font-size: var(--text-xs);
}

header#header .topbar .d-flex {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

header#header .topbar .btn,
header#header .topbar .input-group-text {
  background-color: var(--shell-surface) !important;
  color: var(--shell-text-secondary) !important;
  border: 1px solid var(--shell-border-control) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  min-block-size: 28px !important;
  min-inline-size: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-block: 3px !important;
  padding-inline: var(--space-2) !important;
  border-radius: var(--radius-sm) !important;
}

header#header .topbar .input-group-text {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--shell-text-muted) !important;
  padding-inline-end: 4px !important;
}

header#header .topbar .btn:hover {
  background-color: var(--shell-surface-hover) !important;
  color: var(--atyaf-mint) !important;
  border-color: var(--atyaf-mint-border) !important;
}

.console-app-header {
  background-color: var(--shell-bg);
  color: var(--shell-text);
}

.console-app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 10px;
  flex-wrap: wrap;
}

.console-app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 36px;
  padding-inline: var(--space-1);
  color: var(--shell-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-lg);
}

.console-app-brand:hover {
  color: var(--shell-text);
  text-decoration: none;
}

.console-app-brand .logo-img,
.console-app-footer-brand .logo-img {
  inline-size: 28px;
  block-size: 28px;
  flex-shrink: 0;
}

.console-app-wordmark {
  color: var(--shell-text);
  font-weight: 600;
}

:lang(en) .console-app-wordmark, :lang(tr) .console-app-wordmark { letter-spacing: -0.02em; }

.console-app-context {
  display: inline-flex;
  align-items: center;
  color: var(--shell-text-muted) !important;
  font-size: var(--text-xs);
  font-weight: 500;
  padding-block: 2px;
  padding-inline: 8px;
  background-color: oklch(1 0 0 / 0.06);
  border: 1px solid var(--shell-border);
  border-radius: var(--radius-xs);
}

.console-app-context::before {
  display: none;
}

.console-app-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.console-cart,
.console-account-link,
.console-site-link,
.console-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 34px;
  min-inline-size: 34px;
  padding-block: 5px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--shell-border-control);
  background-color: var(--shell-surface);
  color: var(--shell-text);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

.console-cart:hover,
.console-account-link:hover,
.console-site-link:hover,
.console-theme-toggle:hover {
  background-color: var(--shell-surface-hover);
  color: var(--shell-text);
  border-color: var(--shell-border-strong);
  text-decoration: none;
}

.console-account-link--accent {
  background-color: var(--shell-accent) !important;
  color: var(--shell-text) !important;
  border-color: var(--shell-accent-border) !important;
}

.console-account-link--accent .console-account-label,
.console-account-link--accent i {
  color: var(--shell-text) !important;
}

.console-account-link--accent:hover {
  background-color: var(--shell-accent-hover) !important;
  color: var(--shell-text) !important;
}

.console-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background-color: oklch(1 0 0 / 0.14);
  color: var(--shell-text);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.console-app-languages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--shell-border-control);
  background-color: var(--shell-surface);
}

.console-app-languages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 28px;
  min-inline-size: 28px;
  padding-inline: 8px;
  border-radius: 6px;
  color: var(--shell-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.console-app-languages a:hover {
  color: var(--shell-text);
  background-color: var(--shell-surface-hover);
}

.console-app-languages a.is-active {
  background-color: var(--shell-accent);
  color: var(--shell-text);
}

.console-app-navigation {
  background-color: var(--shell-nav-bg);
  border-block-start: 1px solid var(--shell-border-subtle);
  padding: 0 !important;
}

.console-app-navigation > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.console-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 36px;
  min-inline-size: 36px;
  padding-inline: var(--space-3);
  margin-block: var(--space-1);
  background-color: var(--shell-surface) !important;
  color: var(--shell-text) !important;
  border: 1px solid var(--shell-border-strong) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5 !important;
}

.console-nav-toggle-label {
  color: var(--shell-text) !important;
  line-height: 1.5 !important;
}

.console-nav-collapse {
  justify-content: space-between;
  inline-size: 100%;
}

.console-app-navigation .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-block: 4px;
}

.console-app-navigation .navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 34px;
  padding-block: 5px;
  padding-inline: 12px !important;
  border-radius: var(--radius-sm);
  color: var(--shell-text-secondary) !important;
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

.console-app-navigation .navbar-nav > li > a:hover,
.console-app-navigation .navbar-nav > li.show > a {
  background-color: var(--shell-surface-hover);
  color: var(--shell-text) !important;
}

.console-app-navigation .dropdown-menu {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-raised);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
}

.console-app-navigation .dropdown-item {
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  min-block-size: 34px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 6px !important;
  padding-inline: var(--space-3) !important;
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

.console-app-navigation .dropdown-item:hover,
.console-app-navigation .dropdown-item:focus {
  background-color: var(--surface-subtle);
  color: var(--accent);
}

/* 4. Page Context Header & Breadcrumb */
.master-breadcrumb {
  background-color: var(--surface-card);
  border-block-end: 1px solid var(--border-subtle);
  padding-block: var(--space-4);
  margin-block-end: 0;
}

.console-page-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.console-page-title {
  margin: 0;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.console-page-title::before {
  display: none;
}

.master-breadcrumb .breadcrumb {
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a,
.master-breadcrumb .breadcrumb-item.active {
  color: var(--text-secondary) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}

.master-breadcrumb .breadcrumb-item a {
  min-inline-size: 24px;
  padding-inline: 4px;
  border-radius: var(--radius-xs);
}

.master-breadcrumb .breadcrumb-item.active {
  color: var(--text-primary) !important;
  font-weight: 600;
}

@media (max-width: 768px) {
  header#header .topbar .btn,
  header#header .topbar .input-group-text,
  .console-app-brand,
  .console-cart,
  .console-account-link,
  .console-site-link,
  .console-theme-toggle,
  .console-app-languages a,
  .console-nav-toggle,
  .console-app-navigation .navbar-nav > li > a,
  .console-app-navigation .dropdown-item,
  .master-breadcrumb .breadcrumb-item,
  .master-breadcrumb .breadcrumb-item a {
    min-block-size: 44px !important;
    min-inline-size: 44px !important;
  }
}

.verification-banner,
.verification-banner .container,
.verification-banner .row,
.verification-banner [class*="col-"],
#btnResendVerificationEmail {
  overflow: visible !important;
  white-space: normal !important;
  block-size: auto !important;
  max-block-size: none !important;
}

.verification-banner {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block: var(--space-2) !important;
}

.console-verify-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 100%;
}

.console-verify-banner-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 200px;
  min-inline-size: 0;
  font-size: var(--text-sm);
}

.console-verify-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-inline-size: 100%;
}

.verification-banner .text {
  color: var(--text-secondary) !important;
}

.verification-banner .console-verify-banner-text i {
  color: var(--status-warning) !important;
  font-size: var(--text-base) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.close,
.close:hover,
.close:focus,
button.close,
#btnEmailVerificationClose,
#btnEmailVerificationClose span,
#btnEmailVerificationClose i,
#btnUserValidationClose,
#btnUserValidationClose span {
  float: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  text-shadow: none !important;
  font-size: var(--text-xs) !important;
  line-height: 1 !important;
}

#btnEmailVerificationClose,
#btnUserValidationClose,
.verification-banner .btn.close {
  min-block-size: 28px !important;
  min-inline-size: 28px !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
}

@media (max-width: 768px) {
  #btnEmailVerificationClose,
  #btnUserValidationClose,
  .verification-banner .btn.close {
    min-block-size: 44px !important;
    min-inline-size: 44px !important;
    padding: var(--space-2) !important;
  }
}

/* 5. Main Workspace Container, Grid & Universal Typographic Hierarchy */
main#main-content.console-main {
  flex: 1 0 auto;
  display: block;
  inline-size: 100%;
}

section#main-body {
  background-color: var(--surface-canvas);
  padding-block: var(--space-6);
}

/* Universal Console Heading Scale — Prevents Bootstrap 4 h1-h5 (20px-40px) from overpowering 14px content */
#main-body h1:not(.console-page-title) {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
  margin-block: 0 var(--space-3) !important;
}

#main-body h2,
.primary-content h2,
.card-body h2 {
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--text-primary) !important;
  margin-block: 0 var(--space-3) !important;
}

#main-body h3,
.primary-content h3,
.tab-pane > h3 {
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--text-primary) !important;
  margin-block: 0 var(--space-3) !important;
}

#main-body h4,
.primary-content h4,
.card-body h4,
.panel-body h4,
.tab-pane h4 {
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--text-secondary) !important;
  margin-block-start: 0 !important;
  margin-block-end: 6px !important;
}

#main-body h5,
#main-body h6,
.primary-content h5,
.primary-content h6,
.card-body h5,
.card-body h6 {
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--text-primary) !important;
  margin-block-start: 0 !important;
  margin-block-end: 4px !important;
}

@media (min-width: 1200px) {
  section#main-body > .container > .row > .col-xl-3 {
    flex: 0 0 264px;
    max-inline-size: 264px;
  }

  section#main-body > .container > .row > .col-xl-9.primary-content {
    flex: 1 1 0%;
    max-inline-size: calc(100% - 264px);
  }
}

body.console-is-homepage section#main-body {
  display: none;
}

/* 6. Cards, Panels, and Sidebar Navigation — Unified Spacing & Soft Surfaces */
.card,
.panel,
.well,
.primary-content .card,
.primary-content .panel,
.primary-content .card.mb-3,
.primary-content .panel.mb-3,
.client-home-cards .card {
  background-color: var(--surface-card) !important;
  color: var(--text-primary);
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elevation-card);
  margin-block-end: var(--space-5) !important;
}

.card > .table:last-child,
.panel > .table:last-child {
  margin-block-end: 0 !important;
}

.sidebar .card,
.sidebar .panel,
.card-sidebar,
.card-sidebar.mb-3 {
  margin-block-end: var(--space-4) !important;
}

.card-header,
.panel-heading,
.client-home-cards .card-header {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block: 14px !important;
  padding-inline: var(--space-5) !important;
  border-start-start-radius: var(--radius-md) !important;
  border-start-end-radius: var(--radius-md) !important;
}

.card-sidebar .card-header,
.sidebar .card-header {
  padding-block: 12px !important;
  padding-inline: var(--space-4) !important;
}

.card-title,
.panel-title,
.card-header .card-title,
.panel-heading .panel-title {
  display: flow-root;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.card-sidebar .card-title,
.sidebar .card-title {
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
}

.card-body > .card-title,
.panel-body > .panel-title,
.primary-content .card-body > h3.card-title,
.primary-content .card-body > h2.card-title {
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  margin-block-start: 0 !important;
  margin-block-end: var(--space-5) !important;
  padding-block-end: var(--space-3) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
}

.card-body > .card-title ~ .card-title,
.primary-content .card-body > h3.card-title ~ h3.card-title {
  margin-block-start: var(--space-6) !important;
}

.client-home-cards .card-header .card-title > span:first-child::before {
  display: none;
}

.card-title .float-right,
.panel-title .float-right,
.card-header .float-right {
  float: inline-end !important;
  margin-inline-start: var(--space-2) !important;
}

.card-body,
.panel-body,
.primary-content .card-body,
.primary-content .panel-body,
.primary-content .card-body.extra-padding,
.client-home-cards .card-body {
  background-color: var(--surface-card) !important;
  color: var(--text-primary);
  padding: var(--space-5) !important;
}

.card-sidebar .card-body,
.sidebar .card-body {
  padding: 14px var(--space-4) !important;
  font-size: var(--text-label) !important;
}

.card-body:empty,
.panel-body:empty {
  display: none !important;
}

.client-home-cards .card-body p {
  padding: 0 !important;
  margin-block: 0 !important;
}

.client-home-cards .card-body p + p {
  margin-block-start: var(--space-3) !important;
}

.card-footer,
.panel-footer,
.client-home-cards .card-footer,
div[menuitemname="Active Products/Services"] .card-footer {
  background-color: var(--surface-card) !important;
  color: var(--text-secondary);
  border-block-start: 1px solid var(--border-subtle) !important;
  padding-block: 12px !important;
  padding-inline: var(--space-5) !important;
  border-end-start-radius: var(--radius-md) !important;
  border-end-end-radius: var(--radius-md) !important;
}

.card-sidebar .card-footer,
.sidebar .card-footer {
  padding-block: 10px !important;
  padding-inline: var(--space-4) !important;
}

.card-sidebar .btn,
.sidebar .btn {
  min-block-size: var(--control-height-sm) !important;
  padding-block: 5px !important;
  padding-inline: 12px !important;
  font-size: var(--text-xs) !important;
}

.card-sidebar .card-footer .btn,
.sidebar .card-footer .btn {
  padding-inline: 8px !important;
  white-space: nowrap !important;
  inline-size: 100% !important;
}

.card-sidebar {
  overflow: hidden;
}

.card-sidebar .list-group {
  margin: 0 !important;
  padding: 6px !important;
}

.list-group-item,
.sidebar .list-group-item,
.card-sidebar .list-group-item {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  margin-block: 1px !important;
  margin-inline: 0 !important;
  min-block-size: 36px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-2);
  padding-block: 7px !important;
  padding-inline: 10px !important;
  font-size: var(--text-label);
  text-decoration: none !important;
  position: relative;
  transition: background-color var(--duration-fast) var(--ease-out-quint),
              color var(--duration-fast) var(--ease-out-quint);
}

.card-sidebar .list-group-item:last-child,
.sidebar .list-group-item:last-child {
  border-block-end: 0 !important;
}

.list-group-item:hover,
.list-group-item-action:hover,
.sidebar .list-group-item:hover {
  background-color: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
}

.list-group-item.active,
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover,
.card-sidebar .list-group-item.active {
  background-color: var(--accent-bg) !important;
  color: var(--accent) !important;
  border: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.card-sidebar .list-group-item.active::before,
.sidebar .list-group-item.active::before {
  display: none;
}

.card-sidebar .list-group-item .sidebar-menu-item-icon-wrapper:has(.fa-circle, .fa-dot-circle),
.card-sidebar .list-group-item i.fa-circle,
.card-sidebar .list-group-item i.fa-dot-circle {
  display: none !important;
}

.sidebar-menu-item-wrapper,
.sidebar .sidebar-menu-item-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  inline-size: 100% !important;
}

.sidebar-menu-item-icon-wrapper,
.sidebar .sidebar-menu-item-icon-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  color: var(--text-tertiary) !important;
  font-size: 13px !important;
}

.list-group-item.active .sidebar-menu-item-icon-wrapper,
.list-group-item:hover .sidebar-menu-item-icon-wrapper,
.list-group-item.active .sidebar-menu-item-icon,
.list-group-item:hover .sidebar-menu-item-icon {
  color: var(--accent) !important;
}

.sidebar-menu-item-label {
  flex: 1 1 auto !important;
  min-inline-size: 0;
  font-weight: 500;
  text-align: start;
}

.list-group-item.active .sidebar-menu-item-label {
  font-weight: 600;
}

.sidebar-menu-item-badge,
.sidebar .sidebar-menu-item-badge {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
  inline-size: auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-sidebar .badge,
.sidebar .list-group-item .badge,
.sidebar-menu-item-badge .badge {
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: 24px !important;
  block-size: 22px !important;
  height: 22px !important;
  padding-block: 0 !important;
  padding-inline: 8px !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--surface-subtle) !important;
  color: var(--text-secondary) !important;
  border: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  margin: 0 !important;
}

.card-sidebar .list-group-item.active .badge,
.sidebar .list-group-item.active .badge,
.list-group-item.active .sidebar-menu-item-badge .badge {
  background-color: var(--accent-subtle) !important;
  color: var(--accent) !important;
  border: 0 !important;
}

/* 7. Forms, Inputs, Selects & Buttons — Unified 38px Control Standard & Proportional Icons */
.form-group {
  margin-block-end: var(--space-4) !important;
}

.form-group:last-child {
  margin-block-end: 0;
}

label,
.col-form-label,
.form-control-label,
.control-label {
  display: block;
  color: var(--text-secondary) !important;
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  padding-block: 0 !important;
  margin-block-end: 6px !important;
}

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.usage-dial):not(.dial-usage)),
input[type="text"]:where(:not(.usage-dial):not(.dial-usage)),
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea,
.form-control,
.custom-select,
.field {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.45 !important;
  min-block-size: var(--control-height-md) !important;
  block-size: var(--control-height-md);
  padding-block: 6px !important;
  padding-inline: 12px !important;
  box-shadow: 0 1px 2px 0 oklch(0.17 0.012 260 / 0.02) !important;
  outline: none !important;
  transition: border-color 180ms var(--ease-out-quint),
              box-shadow 180ms var(--ease-out-quint),
              background-color 180ms var(--ease-out-quint) !important;
}

textarea,
textarea.form-control {
  min-block-size: 76px !important;
  block-size: auto !important;
  padding-block: 8px !important;
  line-height: 1.55 !important;
}

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.usage-dial):not(.dial-usage)):hover:not(:disabled):not([readonly]):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not([readonly]):not(:focus),
.form-control:hover:not(:disabled):not([readonly]):not(:focus):not(.disabled),
.custom-select:hover:not(:disabled):not(:focus),
.field:hover:not(:disabled):not([readonly]):not(:focus) {
  border-color: var(--border-input-hover) !important;
}

input:disabled:where(:not(.usage-dial):not(.dial-usage)),
input[readonly]:where(:not(.usage-dial):not(.dial-usage)),
select:disabled,
textarea:disabled,
textarea[readonly],
.form-control:disabled,
.form-control[readonly],
.form-control.disabled,
.field:disabled,
.field[readonly] {
  background-color: var(--surface-subtle) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.form-control-sm,
.custom-select-sm,
.dataTables_wrapper select,
.dataTables_wrapper input[type="search"] {
  min-block-size: var(--control-height-sm) !important;
  block-size: var(--control-height-sm) !important;
  padding-block: 4px !important;
  padding-inline: 10px !important;
  font-size: var(--text-xs) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.field::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
}

.input-group-text {
  background-color: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  min-block-size: var(--control-height-md);
  padding-inline: 12px;
  font-size: var(--text-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-group {
  display: inline-flex;
  flex-wrap: wrap !important;
  max-inline-size: 100% !important;
  gap: var(--space-1);
}

.btn,
button.btn,
input.btn,
a.btn,
.btn-lg,
button.btn-lg,
input.btn-lg,
a.btn-lg,
.btn-group-lg > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: var(--control-height-md) !important;
  block-size: auto !important;
  min-inline-size: var(--control-height-md);
  padding-block: 6px !important;
  padding-inline: 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid var(--border-default) !important;
  background-color: var(--surface-card);
  color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint),
              color var(--duration-fast) var(--ease-out-quint),
              transform var(--duration-fast) var(--ease-out-quint);
}

/* Normalize all icons inside buttons — prevents WHMCS fa-2x / fa-3x + <br> from bloating buttons */
.btn i,
.btn .fas,
.btn .far,
.btn .fal,
.btn .fab,
.btn .fa-lg,
.btn .fa-2x,
.btn .fa-3x,
.btn .fa-4x,
.btn .fa-5x {
  font-size: 0.925em !important;
  line-height: 1 !important;
  vertical-align: -0.05em !important;
  margin: 0 !important;
}

.btn br {
  display: none !important;
}

#main-body .fa-2x:not(.fa-stack-2x) {
  font-size: 1.25rem !important;
}

#main-body .fa-3x:not(.fa-stack-2x),
#main-body .fa-4x:not(.fa-stack-2x),
#main-body .fa-5x:not(.fa-stack-2x) {
  font-size: 1.5rem !important;
}

.btn-sm,
button.btn-sm,
input.btn-sm,
a.btn-sm,
.btn-xs,
button.btn-xs,
input.btn-xs,
a.btn-xs,
.btn-group-sm > .btn,
.card-header .btn,
.panel-heading .btn,
.div-service-buttons .btn {
  min-block-size: var(--control-height-sm) !important;
  min-inline-size: var(--control-height-sm) !important;
  padding-block: 4px !important;
  padding-inline: 10px !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border-radius: var(--radius-sm) !important;
}

/* Seamless Logical Corner Joining for Horizontal Input Groups (LTR & RTL) */
.input-group:not(.attachment-group) {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
}

.input-group:not(.attachment-group) > .form-control:first-child:not(:last-child),
.input-group:not(.attachment-group) > input.form-control:first-child:not(:last-child),
.input-group:not(.attachment-group) > .custom-select:first-child:not(:last-child) {
  border-start-start-radius: var(--radius-sm) !important;
  border-end-start-radius: var(--radius-sm) !important;
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.input-group:not(.attachment-group) > .form-control:last-child:not(:first-child),
.input-group:not(.attachment-group) > input.form-control:last-child:not(:first-child),
.input-group:not(.attachment-group) > .custom-select:last-child:not(:first-child) {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-start-end-radius: var(--radius-sm) !important;
  border-end-end-radius: var(--radius-sm) !important;
  margin-inline-start: -1px !important;
}

.input-group:not(.attachment-group) > .form-control:not(:first-child):not(:last-child),
.input-group:not(.attachment-group) > input.form-control:not(:first-child):not(:last-child),
.input-group:not(.attachment-group) > .custom-select:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
  margin-inline-start: -1px !important;
}

.input-group:not(.attachment-group) > .input-group-prepend > .btn,
.input-group:not(.attachment-group) > .input-group-prepend > button.btn,
.input-group:not(.attachment-group) > .input-group-prepend > .input-group-text {
  border-start-start-radius: var(--radius-sm) !important;
  border-end-start-radius: var(--radius-sm) !important;
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.input-group:not(.attachment-group) > .input-group-append > .btn,
.input-group:not(.attachment-group) > .input-group-append > button.btn,
.input-group:not(.attachment-group) > .input-group-append > .input-group-text,
.input-group:not(.attachment-group) > .input-group-btn:last-child > .btn {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-start-end-radius: var(--radius-sm) !important;
  border-end-end-radius: var(--radius-sm) !important;
  margin-inline-start: -1px !important;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  .list-group-item {
    min-block-size: 44px;
    padding-block: var(--space-2);
  }

  input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.usage-dial):not(.dial-usage)),
  input[type="text"]:where(:not(.usage-dial):not(.dial-usage)),
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  select,
  textarea,
  .form-control,
  .form-control-sm,
  .custom-select,
  .custom-select-sm,
  .dataTables_wrapper select,
  .dataTables_wrapper input[type="search"],
  .field {
    font-size: 16px !important;
    min-block-size: 44px !important;
    padding-block: var(--space-2) !important;
  }

  .input-group-text {
    min-block-size: 44px;
  }

  .btn,
  button.btn,
  input.btn,
  a.btn,
  .btn-lg,
  button.btn-lg,
  input.btn-lg,
  a.btn-lg,
  .btn-sm,
  button.btn-sm,
  input.btn-sm,
  a.btn-sm,
  .btn-xs,
  button.btn-xs,
  input.btn-xs,
  a.btn-xs,
  .btn-group-sm > .btn,
  .card-header .btn,
  .panel-heading .btn,
  .div-service-buttons .btn {
    min-block-size: 44px !important;
    min-inline-size: 44px !important;
    padding-block: var(--space-2) !important;
    padding-inline: var(--space-3) !important;
    font-size: 16px !important;
  }
}

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

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
  background-color: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.btn-primary,
.btn-success,
.btn-info,
.bg-color-blue,
.bg-color-green,
.bg-color-red,
.bg-color-gold {
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background-color: var(--accent-hover) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent-hover) !important;
}

.card-header .btn,
.panel-heading .btn {
  background-color: var(--surface-subtle) !important;
  color: var(--text-secondary) !important;
  border: 0 !important;
}

.card-header .btn:hover,
.panel-heading .btn:hover {
  background-color: var(--accent-bg) !important;
  color: var(--accent) !important;
  border: 0 !important;
}

.btn-danger {
  background-color: var(--status-danger-bg) !important;
  color: var(--status-danger) !important;
  border: 1px solid var(--status-danger-border) !important;
}

.btn-danger:hover {
  background-color: var(--status-danger) !important;
  color: var(--accent-fg) !important;
  border-color: var(--status-danger) !important;
}

.text-muted,
small,
.small,
.field-help-text {
  color: var(--text-secondary) !important;
  font-size: var(--text-xs);
}

/* 8. Badges, Labels & Alerts (WCAG 1.4.3 >= 4.5:1) */
.badge,
.label,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-block: 4px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: normal !important;
  overflow-wrap: anywhere;
  block-size: auto;
  background-color: var(--surface-subtle);
  color: var(--text-primary);
  border: 0 !important;
}

.status-active,
.status-paid,
.status-open,
.status-answered,
.badge-success,
.label-success {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border: 0 !important;
}

.status-pending,
.status-unpaid,
.status-customer-reply,
.badge-warning,
.label-warning {
  background-color: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border: 0 !important;
}

.status-expired,
.status-cancelled,
.status-terminated,
.status-suspended,
.status-fraud,
.badge-danger,
.label-danger {
  background-color: var(--status-danger-bg) !important;
  color: var(--status-danger) !important;
  border: 0 !important;
}

.status-closed,
.badge-secondary,
.label-default {
  background-color: var(--surface-subtle) !important;
  color: var(--text-secondary) !important;
  border: 0 !important;
}

.alert {
  background-color: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4);
}

.alert-danger {
  background-color: var(--status-danger-bg) !important;
  color: var(--status-danger) !important;
  border: 0 !important;
}

.alert-warning {
  background-color: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border: 0 !important;
}

.alert-success {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border: 0 !important;
}

.alert-info {
  background-color: var(--status-info-bg) !important;
  color: var(--status-info) !important;
  border: 0 !important;
}

/* 9. Public Portal Landing Page (console-landing-safe.tpl) — Soft, Airy Hero & Service Grid */
.console-landing {
  background-color: var(--surface-canvas);
  color: var(--text-primary);
}

.console-landing-hero {
  background-color: var(--surface-card);
  border-block-end: 1px solid var(--border-subtle);
  padding-block: var(--space-10);
  position: relative;
}

.console-landing-hero::before {
  display: none;
}

.console-landing-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8);
  align-items: center;
}

.console-landing-hero-grid > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.console-landing-kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding-block: 5px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  background-color: var(--accent-bg);
  color: var(--accent);
  border: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-block-end: var(--space-4);
}

.console-landing-kicker::before {
  display: none;
}

.console-landing-title {
  font-size: clamp(1.95rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.16;
  color: var(--text-primary);
  text-align: start;
  margin-block: 0 var(--space-4);
}

.console-landing-lead {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-secondary);
  text-align: start;
  margin-block: 0 var(--space-6);
  margin-inline: 0;
  max-inline-size: 56ch;
}

.console-landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3);
}

.console-landing-panel {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--elevation-card);
  position: relative;
  overflow: hidden;
  text-align: start;
}

.console-landing-panel::before {
  display: none;
}

.console-landing-panel-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-block: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-landing-panel-title::before {
  display: none;
}

.console-quick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.console-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 44px;
  padding-block: 8px;
  padding-inline: var(--space-3);
  background-color: var(--surface-inset);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.console-quick-link span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.console-quick-link span i {
  color: var(--accent);
  inline-size: 16px;
  text-align: center;
}

.console-quick-link:hover {
  background-color: var(--accent-bg);
  border-color: transparent;
  color: var(--accent);
  text-decoration: none;
}

.console-landing-section {
  padding-block: var(--space-10);
  border-block-end: 1px solid var(--border-subtle);
}

.console-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  margin-block-end: var(--space-6);
  margin-inline-start: 0;
  margin-inline-end: auto;
  max-inline-size: 65ch;
}

.console-section-title {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 600;
  color: var(--text-primary);
  text-align: start;
  margin-block: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.console-section-title::before {
  display: none;
}

.console-section-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: start;
  margin: 0;
}

.console-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}

.console-service-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: start;
  gap: var(--space-5);
  box-shadow: var(--elevation-card);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out-quint),
              box-shadow var(--duration-fast) var(--ease-out-quint);
}

.console-service-card > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.console-service-card::before {
  display: none;
}

.console-service-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elevation-raised);
}

.console-service-card-icon,
.console-service-card:nth-child(2) .console-service-card-icon,
.console-service-card:nth-child(3) .console-service-card-icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-bg);
  color: var(--accent);
  border: 0;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  margin-block-end: var(--space-3);
}

.console-service-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-align: start;
  margin-block: 0 var(--space-2);
}

.console-service-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: start;
  margin: 0;
  line-height: 1.6;
}

.console-service-card .btn {
  inline-size: 100%;
  border-radius: var(--radius-sm) !important;
}

.console-payment-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
}

/* 10. Client Area Dashboard & DataTables — Soft Stat Cards & Clean Lists */
.tiles,
.tiles.mb-4 {
  margin-block-end: var(--space-6) !important;
}

.tiles > .row,
.tiles > .row.no-gutters,
.tiles > .atyaf-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
  margin-inline: 0 !important;
  inline-size: 100% !important;
}

@media (max-width: 575.98px) {
  .tiles > .row,
  .tiles > .row.no-gutters,
  .tiles > .atyaf-tiles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.tiles > .row::before,
.tiles > .row::after,
.tiles > .row.no-gutters::before,
.tiles > .row.no-gutters::after,
.tiles > .atyaf-tiles-grid::before,
.tiles > .atyaf-tiles-grid::after {
  display: none !important;
  content: none !important;
}

.tiles > .row > .atyaf-tile-col,
.tiles > .row > [class*="col-"],
.tiles > .row.no-gutters > [class*="col-"],
section#main-body .tiles .row > .col-xl-3 {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  inline-size: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tiles .tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: start !important;
  min-block-size: 88px !important;
  padding: var(--space-4) var(--space-5) !important;
  margin: 0 !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elevation-card) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: border-color var(--duration-fast) var(--ease-out-quint),
              box-shadow var(--duration-fast) var(--ease-out-quint) !important;
}

.tiles .tile::before {
  display: none;
}

.tiles .tile:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--elevation-raised) !important;
}

.tiles .tile .stat {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-primary) !important;
  text-align: start !important;
  margin: 0 !important;
}

.tiles .tile .title {
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--text-secondary) !important;
  text-align: start !important;
  margin: 0 !important;
}

.tiles .tile i,
.tiles .tile:hover i,
.tiles .tile:focus i,
.tiles .row > div:nth-child(2) .tile i,
.tiles .row > div:nth-child(3) .tile i,
.tiles .row > div:nth-child(4) .tile i {
  position: absolute !important;
  inset-block-start: var(--space-4) !important;
  inset-inline-end: var(--space-4) !important;
  inset-inline-start: auto !important;
  inline-size: 34px !important;
  block-size: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--accent-bg) !important;
  border: 0 !important;
  color: var(--accent) !important;
  font-size: var(--text-sm) !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

.tiles .tile .highlight {
  display: none !important;
}

.client-home-cards,
.client-home-cards .card,
.client-home-cards .card-body,
.client-home-cards .list-group,
.client-home-cards .list-group-item,
.client-home-cards .list-group-item * {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-block-size: none !important;
  block-size: auto !important;
}

.client-home-cards {
  inline-size: 100%;
}

.client-home-cards .card {
  min-block-size: 0 !important;
  margin-block-end: var(--space-6) !important;
}

.card-footer:empty,
.panel-footer:empty {
  display: none !important;
}

.client-home-cards .list-group-item {
  display: block !important;
  padding-block: 14px !important;
  padding-inline: var(--space-6) !important;
  max-inline-size: 100% !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
}

.client-home-cards .list-group-item:last-child {
  border-block-end: 0 !important;
}

.div-service-item {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin: 0 !important;
}

.div-service-status {
  float: none !important;
  flex: 0 0 92px !important;
  inline-size: 92px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.div-service-status .label,
.div-service-status .status {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.div-service-status .label-placeholder,
.label-placeholder {
  display: none !important;
}

.div-service-name {
  float: none !important;
  flex: 1 1 180px !important;
  min-inline-size: 0 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.div-service-name .text-domain {
  float: none !important;
  display: inline-block !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs) !important;
  color: var(--text-secondary) !important;
  margin-block-start: 2px !important;
}

.div-service-buttons {
  float: none !important;
  flex: 0 0 auto !important;
  margin-inline-start: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.div-service-buttons .btn-group-primary {
  display: none !important;
}

.div-service-buttons .btn-group-secondary,
.div-service-buttons .btn-group-secondary > .btn-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.div-service-buttons .btn-group-secondary > .btn:first-child {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.div-service-buttons .btn-group-secondary > .btn-group > .dropdown-toggle,
.div-service-buttons .btn-group > .dropdown-toggle-split {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  margin-inline-start: -1px !important;
  padding-inline: 8px !important;
}

#registerDomainPanel .input-group,
#ClientAreaHomePagePanels-Register_a_New_Domain .input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#registerDomainPanel .input-group > .form-control,
#registerDomainPanel .input-group > input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
#ClientAreaHomePagePanels-Register_a_New_Domain .input-group > .form-control,
#ClientAreaHomePagePanels-Register_a_New_Domain .input-group > input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]) {
  inline-size: 100% !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 !important;
}

#registerDomainPanel .input-group-append,
#ClientAreaHomePagePanels-Register_a_New_Domain .input-group-append {
  display: flex !important;
  inline-size: 100% !important;
  gap: var(--space-3) !important;
  margin: 0 !important;
}

#registerDomainPanel .input-group-append > .btn,
#registerDomainPanel .input-group-append > input.btn,
#ClientAreaHomePagePanels-Register_a_New_Domain .input-group-append > .btn,
#ClientAreaHomePagePanels-Register_a_New_Domain .input-group-append > input.btn {
  flex: 1 1 0% !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 !important;
}

.main-body,
.primary-content,
.secondary-sidebar,
.table-container,
.dataTables_wrapper,
.listtable,
form#domainForm {
  min-inline-size: 0;
  max-inline-size: 100% !important;
}

.w-hidden:not(.modal),
.hidden,
.d-none,
.btn.w-hidden,
.btn.d-none,
a.btn.w-hidden,
span.w-hidden,
div.w-hidden:not(.modal) {
  display: none !important;
}

/* 10. Enterprise DataTables Architecture (admin-datatable-ux 3-Zone Card: Toolbar -> Edge-to-Edge Table -> Footer) */
.primary-content > .tab-content,
.primary-content > .tab-content > .tab-pane {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.table-container {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 !important;
  box-shadow: var(--elevation-card) !important;
  position: relative;
  overflow: hidden !important;
  margin-block-end: var(--space-6) !important;
}

.table-container::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--atyaf-prism-line);
  z-index: 2;
}

.atyaf-dt-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: 16px;
  padding-inline: var(--space-5);
  background-color: var(--surface-card);
  border-block-end: 1px solid var(--border-subtle);
}

.atyaf-dt-toolbar-start {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-inline-size: 0;
}

.atyaf-dt-toolbar-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
}

.atyaf-quick-filters {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.atyaf-qf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  padding-block: 4px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint),
              color var(--duration-fast) var(--ease-out-quint);
}

.atyaf-qf-pill:hover {
  background-color: var(--surface-subtle);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.atyaf-qf-pill.is-active {
  background-color: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
  font-weight: 600;
}

.atyaf-qf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 18px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.atyaf-qf-pill.is-active .atyaf-qf-count {
  background-color: var(--accent);
  color: var(--accent-fg);
}

.atyaf-bulk-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 !important;
}

.atyaf-bulk-count {
  display: none;
  align-items: center;
  min-block-size: 32px;
  padding-block: 4px;
  padding-inline: 10px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.atyaf-bulk-count.is-active {
  display: inline-flex;
}

.atyaf-bulk-toolbar .btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.atyaf-bulk-toolbar .btn {
  min-block-size: 34px !important;
  padding-block: 6px !important;
  padding-inline: 12px !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}

.atyaf-bulk-toolbar .btn:hover {
  background-color: var(--surface-subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.atyaf-dt-scroll {
  inline-size: 100%;
  overflow-x: auto;
}

.table,
.table-list,
table.dataTable,
div.dataTables_wrapper table.dataTable,
div.dataTables_wrapper .atyaf-dt-scroll > table.dataTable.table-list,
table.dataTable.table-list {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-collapse: collapse !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block: 0 !important;
  border: 0 !important;
  table-layout: auto !important;
}

.table thead th,
.table-list thead th,
table.dataTable thead th {
  background-color: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
  border-block-start: 0 !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  padding-block: 11px !important;
  padding-inline: var(--space-4) !important;
  text-align: start;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
  padding-inline-end: 30px !important;
}

[dir="rtl"] table.dataTable thead > tr > th.sorting::before,
[dir="rtl"] table.dataTable thead > tr > th.sorting::after,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc::before,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc::after,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc::before,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc::after {
  inset-inline-start: auto !important;
  inset-inline-end: 0.6em !important;
}

.table thead th:lang(en),
table.dataTable thead th:lang(en) {
  letter-spacing: 0.04em;
}

/* Eliminate zebra striping per admin-datatable-ux ("Avoid zebra striping — easily mistaken for hover or disabled state") */
.table tbody tr,
.table-list tbody tr,
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.stripe tbody tr.even,
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even),
.table tbody td,
.table-list tbody td,
table.dataTable tbody td {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
}

.table tbody td,
.table-list tbody td,
table.dataTable tbody td {
  border-block-start: 0 !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block: 13px !important;
  padding-inline: var(--space-4) !important;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: break-word;
}

.table tbody tr:last-child td,
.table-list tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
  border-block-end: 0 !important;
}

.table-list tbody tr[data-row-href] {
  cursor: pointer;
}

.table tbody tr:hover td,
.table-list tbody tr:hover td,
table.dataTable tbody tr:hover td {
  background-color: var(--surface-subtle) !important;
}

.table tbody tr.is-selected td,
.table-list tbody tr.is-selected td,
table.dataTable tbody tr.is-selected td {
  background-color: var(--accent-bg) !important;
}

/* Column Archetypes: Checkbox, SSL, Primary, Date, Amount, Status */
.table th.cell-checkbox,
.table td.cell-checkbox,
#tableDomainsList th:nth-child(1),
#tableDomainsList td:nth-child(1) {
  inline-size: 44px !important;
  min-inline-size: 44px !important;
  max-inline-size: 44px !important;
  padding-inline: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.table th.cell-checkbox input[type="checkbox"],
.table td.cell-checkbox input[type="checkbox"],
#tableDomainsList input[type="checkbox"] {
  inline-size: 16px !important;
  block-size: 16px !important;
  min-block-size: 16px !important;
  margin: 0 !important;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

.table th.cell-ssl,
.table td.cell-ssl,
.table td.ssl-info,
#tableDomainsList th:nth-child(2),
#tableDomainsList td:nth-child(2),
#tableServicesList th:nth-child(1),
#tableServicesList td:nth-child(1) {
  inline-size: 40px !important;
  min-inline-size: 40px !important;
  max-inline-size: 40px !important;
  padding-inline: 4px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.table td.ssl-info img,
.table td.cell-ssl img {
  inline-size: 18px !important;
  block-size: 18px !important;
  vertical-align: middle;
  opacity: 0.9;
}

.table th.cell-primary,
.table td.cell-primary {
  inline-size: auto !important;
  min-inline-size: 200px;
}

.atyaf-cell-primary-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.atyaf-cell-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  line-height: 1.55;
}

.atyaf-cell-title:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

.atyaf-cell-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.55;
}

.atyaf-cell-domain {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent) !important;
  text-decoration: none;
}

.table th.cell-date,
.table td.cell-date {
  white-space: nowrap !important;
  text-align: start !important;
}

.atyaf-cell-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}

:lang(ar) .atyaf-cell-mono,
:lang(ar) .atyaf-bulk-count {
  font-family: var(--font-arabic) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
}

.table th.cell-amount,
.table td.cell-amount {
  white-space: nowrap !important;
  text-align: end !important;
}

.table td.cell-amount .atyaf-cell-mono {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  display: block;
}

.table th.cell-status,
.table td.cell-status {
  white-space: nowrap !important;
  text-align: end !important;
  inline-size: 140px;
}

.atyaf-status-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  inline-size: 100%;
}

.table td.cell-date .atyaf-status-row {
  justify-content: space-between;
}

@media (max-width: 768px) {
  .table thead th,
  .table-list thead th,
  table.dataTable thead th {
    min-block-size: 44px !important;
    block-size: 44px !important;
    padding-block: 13px !important;
  }

  .atyaf-qf-pill,
  .atyaf-bulk-toolbar .btn {
    min-block-size: 44px !important;
    padding-block: 8px !important;
  }

  .atyaf-row-action {
    inline-size: 44px !important;
    block-size: 44px !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
}

.atyaf-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary) !important;
  background-color: transparent;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background-color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint),
              color var(--duration-fast) var(--ease-out-quint);
}

.table tbody tr:hover .atyaf-row-action {
  color: var(--text-primary) !important;
  background-color: var(--surface-card);
  border-color: var(--border-default);
}

[dir="rtl"] .atyaf-row-action i.fa-chevron-right {
  transform: scaleX(-1);
}

.atyaf-dept-badge {
  display: inline-flex;
  align-items: center;
  padding-block: 3px;
  padding-inline: 10px;
  border-radius: var(--radius-sm);
  background-color: var(--surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.atyaf-ticket-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none !important;
}

.atyaf-ticket-link .ticket-number {
  color: var(--accent) !important;
  font-weight: 600;
}

.atyaf-ticket-link .ticket-subject {
  color: var(--text-primary) !important;
  font-weight: 500;
}

.atyaf-dt-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: 12px;
  padding-inline: var(--space-4);
  background-color: var(--surface-card);
  border-block-start: 1px solid var(--border-subtle);
}

.atyaf-dt-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.atyaf-dt-meta .dataTables_info,
.atyaf-dt-meta .dataTables_length {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  font-size: var(--text-xs) !important;
  color: var(--text-secondary) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.atyaf-dt-meta .dataTables_length label,
.atyaf-dt-toolbar-end .dataTables_filter label {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
  color: var(--text-secondary) !important;
}

.atyaf-dt-pages .dataTables_paginate {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.atyaf-dt-pages .pagination {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#tableLoading {
  padding: var(--space-6);
  margin: 0;
}

@media (max-width: 767px) {
  .atyaf-dt-toolbar,
  .atyaf-dt-footer {
    padding-inline: var(--space-3);
  }

  .table,
  .table-list,
  table.dataTable {
    table-layout: fixed !important;
  }

  .table thead th,
  .table tbody td,
  table.dataTable thead th,
  table.dataTable tbody td {
    padding-inline: var(--space-2) !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .table th.cell-primary,
  .table td.cell-primary {
    min-inline-size: 0;
  }

  #tableDomainsList th:nth-child(1),
  #tableDomainsList td:nth-child(1) {
    inline-size: 48px !important;
    min-inline-size: 48px !important;
  }

  #tableDomainsList th:nth-child(2),
  #tableDomainsList td:nth-child(2),
  #tableDomainsList th:nth-child(4),
  #tableDomainsList td:nth-child(4),
  #tableDomainsList th:nth-child(5),
  #tableDomainsList td:nth-child(5),
  #tableServicesList th:nth-child(1),
  #tableServicesList td:nth-child(1),
  #tableServicesList th:nth-child(4),
  #tableServicesList td:nth-child(4),
  #tableTicketsList th:nth-child(1),
  #tableTicketsList td:nth-child(1),
  #tableTicketsList th:nth-child(4),
  #tableTicketsList td:nth-child(4) {
    display: none !important;
  }

  .atyaf-row-action {
    display: none !important;
  }
}

.modal:not(.show) {
  display: none !important;
}

/* 11. Domain Registry & DNSSEC Console (.atyaf-registry / .atyaf-dnssec / .atyaf-kv-grid) */
.atyaf-domain-registry,
.atyaf-registry-wrap {
  margin-block-end: var(--space-5);
}

.atyaf-registry {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}

.atyaf-registry::before,
.atyaf-dnssec::before {
  display: none;
}

.atyaf-registry__bar,
.atyaf-registry__domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
}

.atyaf-registry__domain,
.atyaf-dnssec__domain {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.atyaf-registry__seal,
.atyaf-registry__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 4px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--status-success-bg);
  color: var(--status-success);
  border: 0 !important;
  font-size: var(--text-xs);
  font-weight: 600;
}

.atyaf-registry__seal::before {
  display: none;
}

.atyaf-registry__seal--wait {
  background-color: var(--status-warning-bg);
  color: var(--status-warning);
  border: 0 !important;
}

.atyaf-registry__seal--stop {
  background-color: var(--status-danger-bg);
  color: var(--status-danger);
  border: 0 !important;
}

.atyaf-registry__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.atyaf-registry__headline {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.atyaf-registry__next,
.atyaf-registry__who,
.atyaf-registry__expiry {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.atyaf-registry__ns,
.atyaf-registry__ns-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}

.atyaf-registry__ns li,
.atyaf-registry__ns-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
}

.atyaf-registry__host,
.atyaf-registry__ns-host,
.atyaf-registry__value--mono,
.atyaf-dnssec__code,
.atyaf-dnssec__digest {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.atyaf-registry__tag,
.atyaf-registry__ns-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding-block: 3px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--status-success-bg);
  color: var(--status-success);
  border: 0 !important;
}

.atyaf-registry__tag--wait,
.atyaf-registry__tag--foreign {
  background-color: var(--status-warning-bg);
  color: var(--status-warning);
  border: 0 !important;
}

.atyaf-registry__tag--stop {
  background-color: var(--status-danger-bg);
  color: var(--status-danger);
  border: 0 !important;
}

.atyaf-dnssec {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}

.atyaf-dnssec__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-subtle);
}

.atyaf-dnssec__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}

.atyaf-dnssec__kicker:lang(en) {
  letter-spacing: 0.08em;
}

.atyaf-dnssec__block {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.atyaf-dnssec__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.atyaf-dnssec__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.atyaf-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--space-3);
}

.atyaf-kv-item {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atyaf-kv-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.atyaf-kv-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  gap: var(--space-2);
}

.atyaf-domain-actions {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.atyaf-domain-actions li {
  margin: 0;
}

.atyaf-domain-actions a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-block: 6px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint),
              color var(--duration-fast) var(--ease-out-quint);
}

.atyaf-domain-actions a:hover {
  background-color: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* 12. Hosting Store Orderform (bredh_premium_comparison_atyaf) — Soft Product Cards */
#bredh-cart-custom .main-container.price-01 {
  background-color: transparent !important;
  padding: 0 !important;
}

#bredh-cart-custom .tittle-simple-cart-em {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6) !important;
  margin-block-end: var(--space-6);
  position: relative;
  overflow: hidden;
}

#bredh-cart-custom .tittle-simple-cart-em::before {
  display: none;
}

#bredh-cart-custom .tittle-simple-cart-em h2,
#bredh-cart-custom .tittle-simple-cart-em h5 {
  color: var(--text-primary) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  margin: 0;
}

#bredh-cart-custom .tittle-simple-cart-em span {
  display: block;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  margin-block-start: var(--space-1);
}

#bredh-cart-custom .bredh-orderform-template {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  margin-block-end: var(--space-5);
  box-shadow: var(--elevation-card) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

#bredh-cart-custom .bredh-orderform-template::before {
  display: none;
}

#bredh-cart-custom .price-table {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

#bredh-cart-custom .bredh-orderform-template::after,
#bredh-cart-custom .bredh-orderform-template-header::before,
#bredh-cart-custom .bredh-orderform-template-header::after,
#bredh-cart-custom .price-table::before,
#bredh-cart-custom .price-table::after {
  display: none !important;
}

#bredh-cart-custom .bredh-orderform-template-header,
#bredh-cart-custom .pricing-table-header {
  background-color: var(--surface-inset) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) !important;
  margin-block-end: var(--space-4);
  background-image: none !important;
}

#bredh-cart-custom .pricing-table-title,
#bredh-cart-custom .tha_price {
  color: var(--text-primary) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#bredh-cart-custom .pricing-table-body {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  background: transparent !important;
}

#bredh-cart-custom .pricing-table-body li {
  color: var(--text-secondary) !important;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  display: block;
  line-height: 1.85;
}

#bredh-cart-custom .btn-order-now,
#bredh-cart-custom .pricing-table-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 38px !important;
  padding-block: var(--space-2) !important;
  padding-inline: var(--space-4) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid var(--accent) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  position: static !important;
}

@media (max-width: 768px) {
  #bredh-cart-custom .btn-order-now,
  #bredh-cart-custom .pricing-table-button {
    min-block-size: 44px !important;
  }
}

#bredh-cart-custom .btn-order-now:hover,
#bredh-cart-custom .pricing-table-button:hover {
  background-color: var(--accent-hover) !important;
  color: var(--accent-fg) !important;
}

/* 13. Footer Shell — Atyaf.co Deep Obsidian Architectural Footer */
.console-app-footer {
  background-color: var(--shell-bg);
  color: var(--shell-text-muted);
  border-block-start: 1px solid var(--shell-border);
  padding-block: var(--space-8);
  margin-block-start: auto;
  position: relative;
}

.console-app-footer::before {
  display: none;
}

.console-app-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--shell-border-subtle);
}

.console-app-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 36px;
  color: var(--shell-text);
  font-weight: 600;
  font-size: var(--text-lg);
  text-decoration: none;
}

.console-app-footer-brand:hover {
  color: var(--shell-text);
  text-decoration: none;
}

.console-app-footer-copy {
  margin-block: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--shell-text-muted);
}

.console-app-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.console-app-footer-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  color: var(--shell-text-secondary);
  border: 1px solid var(--shell-border);
  background-color: var(--shell-surface);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

.console-app-footer-links a:hover {
  background-color: var(--shell-surface-hover);
  color: var(--shell-text);
  border-color: var(--shell-border-strong);
}

@media (max-width: 768px) {
  .console-app-footer-brand,
  .console-app-footer-links a {
    min-block-size: 44px !important;
    min-inline-size: 44px !important;
  }
}

.console-app-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  font-size: var(--text-xs);
  color: var(--shell-text-subtle);
}

/* 14. DataTables Controls, Filters, Pagination & Domain Pricing Table */
.dataTables_wrapper .dataTables_filter input,
.dataTables_filter input[type="search"] {
  background-image: none !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  padding-block: 6px !important;
  padding-inline: var(--space-3) !important;
  min-inline-size: 220px !important;
  min-block-size: 36px !important;
  font-size: var(--text-sm) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_length select {
  background-image: none !important;
  appearance: auto !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  min-inline-size: 64px !important;
  min-block-size: 32px !important;
  padding-block: 4px !important;
  padding-inline: 10px !important;
  font-size: var(--text-xs) !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .dataTables_wrapper .dataTables_length select,
  .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_filter input[type="search"] {
    font-size: 16px !important;
    min-block-size: 44px !important;
  }
}

.dataTables_wrapper .table-container {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-card);
}

.dataTables_wrapper .dataTables_info {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  padding-block: var(--space-3) !important;
  font-size: var(--text-xs) !important;
}

.pagination .page-link {
  background-color: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  margin-inline: 2px;
  padding-inline: 12px !important;
  font-size: var(--text-xs) !important;
  font-weight: 500;
  min-block-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.pagination .page-link:hover {
  background-color: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--surface-card) !important;
  color: var(--text-disabled) !important;
  border-color: var(--border-subtle) !important;
}

.domain-pricing .tld-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3) var(--space-5);
}

.domain-pricing .tld-filters a.badge {
  padding-block: 6px !important;
  padding-inline: var(--space-3) !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  min-block-size: 32px;
}

.domain-pricing .tld-filters a.badge:hover,
.domain-pricing .tld-filters a.badge.badge-success {
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
}

.tld-sale-group {
  display: inline-flex;
  align-items: center;
  padding-block: 3px !important;
  padding-inline: 8px !important;
  margin-inline-start: 6px;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  background-color: var(--accent-bg) !important;
  color: var(--accent) !important;
  border: 0 !important;
}

/* 15. Hosting Service Details, Tabs & cPanel Module Overview */
.text-info,
.limit-near {
  color: var(--status-info) !important;
}

.nav-tabs {
  border-block-end: 1px solid var(--border-subtle) !important;
  gap: 4px;
  margin-block-end: var(--space-3) !important;
}

.nav-tabs .nav-item {
  margin-block-end: 0 !important;
}

.nav-tabs .nav-link {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  padding-block: 8px !important;
  padding-inline: 14px !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.nav-tabs .nav-link:hover {
  background-color: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--accent-bg) !important;
  color: var(--accent) !important;
}

.responsive-tabs-sm-connector {
  display: none !important;
}

.product-status {
  background-color: var(--surface-inset) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  color: var(--text-primary) !important;
}

.product-status .product-status-text {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border-block-start: 1px solid var(--border-subtle) !important;
  font-weight: 600 !important;
  padding-block: var(--space-2) !important;
}

.product-details-tab-container {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-6) !important;
  margin-block-end: var(--space-6) !important;
}

/* WHMCS App Licenses / Licensing Addon (managelicense.tpl) & Service Overview */
#tabOverview .card-body .row.d-block {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  row-gap: var(--space-4) !important;
}

#tabOverview .card-body .row.d-block::after {
  display: none !important;
}

#tabOverview .card-body .row.d-block > .col-md-4.float-md-right {
  float: none !important;
  order: 2;
}

#tabOverview .card-body .row.d-block > .col-md-8 {
  order: 1;
}

@media (min-width: 768px) {
  #tabOverview .card-body .row.d-block > .col-md-4.float-md-right {
    padding-block-start: 24px !important;
  }
}

#tabOverview .card-body .row.d-block > .col-md-4 > .row {
  row-gap: 10px !important;
}

#tabOverview .card-body .row.d-block > .col-md-4 > .row > [class*="col-"] {
  margin-block-end: 0 !important;
}

#tabOverview .card-body .row.d-block > .col-md-8 > .mb-2 {
  margin-block-end: var(--space-4) !important;
}

#tabOverview .card-body .row.d-block > .col-md-8 > .mb-2:last-child {
  margin-block-end: 0 !important;
}

#tabOverview .card-body .row.d-block textarea.form-control {
  min-block-size: 76px !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
}

#tabOverview .card-body .row.d-block input[readonly].form-control {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  background-color: var(--surface-inset) !important;
}

#tabOverview .card-body > .row.mb-2:not(.d-block) {
  background-color: var(--surface-inset) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
  margin-inline: 0 !important;
  margin-block-start: var(--space-4) !important;
  margin-block-end: 0 !important;
  row-gap: var(--space-3) !important;
}

#tabOverview .card-body > .row.mb-2:not(.d-block):empty,
#tabOverview .card-body > .row.mb-2:not(.d-block):not(:has(*)) {
  display: none !important;
}

#tabOverview .card-body > .row.mb-2:not(.d-block) > [class*="col-"] {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* jQuery Knob donut chart inputs in cPanel overview */
input.usage-dial,
input.dial-usage {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  margin-inline-start: -77px !important;
  margin-inline-end: 0 !important;
}

.cpanel-package-details {
  background-color: var(--surface-inset) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  color: var(--text-primary) !important;
}

@media (min-width: 768px) {
  #cPanelPackagePanel,
  #cPanelUsagePanel {
    block-size: calc(100% - var(--space-5)) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #cPanelPackagePanel > .card-body,
  #cPanelUsagePanel > .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

#cPanelQuickShortcutsPanel .cpanel-feature-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)) !important;
  gap: 12px !important;
  margin-inline: 0 !important;
}

#cPanelQuickShortcutsPanel .cpanel-feature-row > [class*="col-"] {
  max-inline-size: 100% !important;
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
}

#cPanelQuickShortcutsPanel .cpanel-feature-row a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) !important;
  margin-block-end: 0 !important;
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  min-block-size: 68px;
  transition: background-color var(--duration-fast) var(--ease-out-quint),
              border-color var(--duration-fast) var(--ease-out-quint),
              color var(--duration-fast) var(--ease-out-quint);
}

#cPanelQuickShortcutsPanel .cpanel-feature-row a:hover {
  background-color: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

#cPanelQuickEmailPanel .row {
  row-gap: var(--space-3);
  align-items: center;
}

#cPanelBillingOverviewPanel .row {
  row-gap: var(--space-3);
  padding-block: var(--space-1);
}

/* 16. Standalone Invoice & Quote Ledger (viewinvoice.tpl / viewquote.tpl) */
html:has(body.console-invoice-body),
body.console-invoice-body {
  background-color: var(--surface-canvas) !important;
  color: var(--text-primary) !important;
  block-size: auto !important;
  min-block-size: 100dvh !important;
  overflow-y: visible !important;
}

body.console-invoice-body {
  display: flex;
  flex-direction: column;
}

.console-invoice-main {
  flex: 1 0 auto;
  padding-block: var(--space-8);
}

.console-invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  max-inline-size: 920px;
  margin-inline: auto;
}

.console-invoice-toolbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.console-invoice-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}

.console-invoice-kicker:lang(en) {
  letter-spacing: 0.08em;
}

.console-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.invoice-container {
  flex: 1 0 auto !important;
  inline-size: min(100%, 920px) !important;
  max-inline-size: min(100%, 920px) !important;
  block-size: auto !important;
  max-block-size: none !important;
  margin-inline: auto !important;
  margin-block: var(--space-6) !important;
  padding: var(--space-8) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elevation-card) !important;
  position: relative;
  overflow: visible !important;
}

@media (max-width: 639.98px) {
  .invoice-container {
    padding: var(--space-4) !important;
  }

  .invoice-container .table th,
  .invoice-container .table td {
    padding-inline: var(--space-2) !important;
    word-break: break-word;
  }
}

.invoice-container::before {
  display: none;
}

.invoice-container .invoice-status {
  margin: 0 !important;
}

.invoice-container .invoice-status span {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  padding-block: 6px !important;
  padding-inline: var(--space-4) !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  border: 0 !important;
}

.invoice-container .invoice-status span:lang(en) {
  letter-spacing: 0.04em;
}

.invoice-container .invoice-status span.paid {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border: 0 !important;
}

.invoice-container .invoice-status span.unpaid,
.invoice-container .invoice-status span.payment-pending {
  background-color: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border: 0 !important;
}

.invoice-container .invoice-status span.cancelled,
.invoice-container .invoice-status span.collections {
  background-color: var(--status-danger-bg) !important;
  color: var(--status-danger) !important;
  border: 0 !important;
}

.invoice-container .invoice-status span.draft,
.invoice-container .invoice-status span.refunded {
  background-color: var(--status-info-bg) !important;
  color: var(--status-info) !important;
  border: 0 !important;
}

.invoice-container hr {
  border-color: var(--border-subtle) !important;
}

.invoice-container .panel,
.invoice-container .card {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  margin-block: var(--space-4) !important;
  overflow: hidden;
}

.invoice-container .panel-heading,
.invoice-container .panel-heading.bg-info {
  background-color: var(--surface-inset) !important;
  color: var(--text-primary) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block: var(--space-3) !important;
  padding-inline: var(--space-4) !important;
}

.invoice-container .panel-title {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.invoice-container .panel-body {
  padding: var(--space-4) !important;
  color: var(--text-primary) !important;
}

.invoice-container .table {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  margin-block-end: 0 !important;
}

.invoice-container .table th,
.invoice-container .table td {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
  padding-block: var(--space-3) !important;
  padding-inline: var(--space-4) !important;
}

.invoice-container .table tr.total-row td {
  background-color: var(--surface-inset) !important;
  font-weight: 700 !important;
}

/* 17. Orderform & Shopping Cart (#order-standard_cart & #bredh-cart-custom) */
#order-standard_cart .console-section-h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-block: 0 var(--space-4);
}

#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-checker-bg {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-6) !important;
  margin-block-end: var(--space-6) !important;
  box-shadow: var(--elevation-card) !important;
  position: relative;
  overflow: visible !important;
}

#order-standard_cart .domain-checker-container::before {
  display: none;
}

#order-standard_cart .domain-checker-bg {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#order-standard_cart .domain-checker-container .input-group-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background-color: var(--surface-inset) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) !important;
  block-size: auto !important;
  min-block-size: 0 !important;
}

#order-standard_cart #frmDomainChecker .input-group-box > textarea#message,
#order-standard_cart #frmDomainChecker .input-group-box > input.form-control {
  flex: 1 1 220px !important;
  min-block-size: var(--control-height-md) !important;
  block-size: var(--control-height-md) !important;
  margin: 0 !important;
  position: static !important;
}

#order-standard_cart #frmDomainChecker .input-group-box > button.btn,
#order-standard_cart #frmDomainChecker .input-group-box > .btn-group {
  position: static !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

#order-standard_cart .domain-pricing .tld-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-block-end: var(--space-4) !important;
}

#order-standard_cart .domain-pricing .tld-pricing-header {
  background-color: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-start-start-radius: var(--radius-md) !important;
  border-start-end-radius: var(--radius-md) !important;
  padding-block: 10px !important;
  margin-inline: 0 !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
}

#order-standard_cart .domain-pricing .tld-pricing-header > div,
#order-standard_cart .domain-pricing .tld-pricing-header [class*="col-"],
#order-standard_cart .domain-pricing .tld-pricing-header .col-tld {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border: 0 !important;
  border-block-end: 0 !important;
}

#order-standard_cart .domain-pricing .tld-row {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-inline: 1px solid var(--border-default) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block: 10px !important;
  margin-inline: 0 !important;
  align-items: center !important;
}

#order-standard_cart .domain-pricing .tld-row.highlighted {
  background-color: var(--surface-card) !important;
}

#order-standard_cart .domain-pricing .tld-row:hover {
  background-color: var(--surface-subtle) !important;
}

#order-standard_cart .promo-box {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--elevation-card) !important;
}

#order-standard_cart .promo-box .header h3 {
  color: var(--text-primary) !important;
}

#order-standard_cart .promo-box .description {
  color: var(--text-secondary) !important;
}

/* Bredh Custom Orderform Template Polish (#bredh-cart-custom & #order-premium_comparison) */
#bredh-cart-custom .title-head-cart {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-block-end: var(--space-4) !important;
}

#bredh-cart-custom .title-head-cart span {
  display: block;
  font-size: var(--text-label) !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  margin-block-start: 4px !important;
}

#bredh-cart-custom .bredh-orderform-template {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  margin-block-end: var(--space-4) !important;
  box-shadow: var(--elevation-card) !important;
  color: var(--text-primary) !important;
}

#bredh-cart-custom .bredh-orderform-template-header {
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-block-end: var(--space-2) !important;
}

#bredh-cart-custom .tha_price {
  font-family: var(--font-mono) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  margin-block-end: var(--space-4) !important;
}

#bredh-cart-custom .tha_price span {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}

#bredh-cart-custom .pricing-table-body {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-4) 0 !important;
  border-block-start: 1px solid var(--border-subtle) !important;
}

#bredh-cart-custom .pricing-table-body li {
  padding-block: 8px !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  font-size: var(--text-label) !important;
  color: var(--text-secondary) !important;
}

#order-standard_cart .tld-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}

#order-standard_cart .domain-renewals .domain-renewal {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  margin-block-end: var(--space-3) !important;
  color: var(--text-primary) !important;
}

#order-standard_cart .domain-renewals .domain-renewal h3 {
  font-family: var(--font-mono);
  font-size: var(--text-lg) !important;
  color: var(--text-primary) !important;
  margin-block-end: var(--space-2);
}

#order-standard_cart .view-cart-items-header {
  background-color: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-block-end: 0 !important;
  border-start-start-radius: var(--radius-md) !important;
  border-start-end-radius: var(--radius-md) !important;
  padding-block: var(--space-3) !important;
  padding-inline: var(--space-4) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

#order-standard_cart .view-cart-items-header:lang(en) {
  letter-spacing: 0.04em;
}

#order-standard_cart .view-cart-items {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-end-start-radius: var(--radius-md) !important;
  border-end-end-radius: var(--radius-md) !important;
  margin-block-end: var(--space-4) !important;
}

#order-standard_cart .view-cart-items .item {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding: var(--space-4) !important;
}

#order-standard_cart .empty-cart {
  background-color: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  padding: var(--space-8) !important;
  text-align: center;
}

#order-standard_cart .order-summary {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  box-shadow: var(--elevation-card) !important;
  position: relative;
  overflow: hidden;
}

#order-standard_cart .order-summary::before {
  display: none;
}

#order-standard_cart .order-summary h2 {
  color: var(--text-primary) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block-end: var(--space-3) !important;
  margin-block-end: var(--space-3) !important;
}

#order-standard_cart .summary-container {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
}

#order-standard_cart .order-summary .total-due-today span.amt {
  font-family: var(--font-mono);
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

#order-standard_cart #inputPromotionCode,
#order-standard_cart .field {
  background-image: none !important;
  padding-inline: var(--space-3) !important;
}

#order-standard_cart .prepend-icon .field-icon {
  display: none !important;
}

#order-standard_cart .promo-banner,
#order-standard_cart .addon-promo-container {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-6) !important;
}

/* 18. Support Ticket Thread, Knowledgebase & Downloads */
.view-ticket .ticket-reply {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  margin-block-end: var(--space-5) !important;
  overflow: hidden;
}

.view-ticket .ticket-reply.staff {
  border-inline-start: 3px solid var(--accent) !important;
}

.view-ticket .ticket-reply .posted-by {
  background-color: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding-block: var(--space-3) !important;
  padding-inline: var(--space-6) !important;
  font-size: var(--text-xs) !important;
}

.view-ticket .ticket-reply .posted-by-name {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.view-ticket .ticket-reply .message {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  padding: var(--space-6) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.65;
}

.md-editor {
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--surface-card) !important;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out-quint),
              box-shadow var(--duration-fast) var(--ease-out-quint);
}

.md-editor:hover:not(:focus-within) {
  border-color: var(--border-input-hover) !important;
}

.md-editor:focus-within {
  border-color: var(--border-input-focus) !important;
  box-shadow: var(--ring-input-focus) !important;
}

.md-editor > .md-header,
.md-editor .md-footer {
  background-color: var(--surface-inset) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  padding: 6px 10px !important;
  color: var(--text-secondary) !important;
}

.md-editor .md-header .btn,
.md-editor .md-header button {
  min-block-size: 28px !important;
  block-size: 28px !important;
  min-inline-size: 28px !important;
  padding-block: 2px !important;
  padding-inline: 10px !important;
  font-size: var(--text-xs) !important;
}

.md-editor textarea.markdown-editor,
textarea.markdown-editor {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
}

.md-editor textarea.markdown-editor:focus,
textarea.markdown-editor:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.md-editor .small-font,
#inputMessage-footer .small-font,
#inputMessage-footer {
  color: var(--text-secondary) !important;
  margin-block-start: var(--space-2) !important;
}

@media (min-width: 768px) {
  form[action*="step=3"] .card-body > .row > .form-group[class*="col-md-"] {
    flex: 1 1 0 !important;
    max-inline-size: 100% !important;
  }
}

.attachment-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: var(--space-3) !important;
}

.attachment-group > .custom-file {
  flex: 1 1 240px !important;
}

.attachment-group > .input-group-append {
  margin: 0 !important;
}

.attachment-group > .input-group-append > .btn {
  border-radius: var(--radius-sm) !important;
  margin: 0 !important;
}

.custom-file,
.custom-file-input,
.custom-file-label {
  block-size: var(--control-height-md) !important;
  min-block-size: var(--control-height-md) !important;
}

.custom-file-label,
.custom-file-label.text-truncate {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
  padding-block: 6px !important;
  padding-inline: var(--space-3) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: 1.5 !important;
  transition: border-color var(--duration-fast) var(--ease-out-quint),
              box-shadow var(--duration-fast) var(--ease-out-quint);
}

.custom-file-label:hover {
  border-color: var(--border-input-hover) !important;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--border-input-focus) !important;
  box-shadow: var(--ring-input-focus) !important;
}

.custom-file-label::after {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  border-inline-end: 0 !important;
  border-inline-start: 1px solid var(--border-input) !important;
  border-start-end-radius: var(--radius-sm) !important;
  border-end-end-radius: var(--radius-sm) !important;
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  background-color: var(--surface-inset) !important;
  color: var(--text-primary) !important;
  block-size: calc(var(--control-height-md) - 2px) !important;
  padding-block: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 19. International Phone Input (.iti / .intl-tel-input), Bootstrap Switch & Utility Guards */
.bootstrap-switch {
  display: inline-flex !important;
  align-items: center !important;
  inline-size: 78px !important;
  min-inline-size: 78px !important;
  block-size: 32px !important;
  min-block-size: 32px !important;
  padding: 3px !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--surface-subtle) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

.bootstrap-switch.bootstrap-switch-on {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.bootstrap-switch .bootstrap-switch-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-on {
  display: none !important;
}

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
  flex: 1 1 auto !important;
  inline-size: auto !important;
  block-size: 100% !important;
  padding: 0 6px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.bootstrap-switch .bootstrap-switch-handle-on {
  color: var(--accent-fg) !important;
}

.bootstrap-switch .bootstrap-switch-handle-off {
  color: var(--text-secondary) !important;
}

.bootstrap-switch .bootstrap-switch-label {
  flex: 0 0 24px !important;
  inline-size: 24px !important;
  block-size: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--surface-card) !important;
  box-shadow: 0 1px 2px oklch(0.17 0.012 260 / 0.16) !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}

.iti,
.intl-tel-input {
  inline-size: 100%;
  direction: ltr;
}

#inputPhone,
input#inputPhone.form-control,
.intl-tel-input input[name="phonenumber"],
.intl-tel-input.separate-dial-code input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]) {
  padding-inline-start: 96px !important;
  padding-inline-end: var(--space-3) !important;
  direction: ltr !important;
  text-align: start !important;
  font-family: var(--font-mono) !important;
}

.iti__flag-container,
.intl-tel-input .flag-container {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  z-index: 20 !important;
}

.iti__selected-flag,
.intl-tel-input .selected-flag {
  background-color: var(--surface-inset) !important;
  border-inline-end: 1px solid var(--border-input) !important;
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
  padding-inline: 10px !important;
  z-index: 20 !important;
}

.iti__country-list,
.intl-tel-input .country-list {
  background-color: var(--surface-overlay) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elevation-overlay) !important;
  z-index: 40 !important;
}

[dir="rtl"] .atyaf-kv-item__label,
[dir="rtl"] .atyaf-kv-item__value,
[dir="rtl"] .atyaf-registry * {
  line-height: 1.65 !important;
}

/* RTL Custom Select Chevron & Form Checkboxes Polish */
[dir="rtl"] select.custom-select,
[dir="rtl"] select.form-control {
  background-position: left 0.75rem center !important;
  padding-inline-start: 0.75rem !important;
  padding-inline-end: 2.25rem !important;
}

.form-check {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin-block-end: var(--space-2) !important;
}

.controls.form-check,
.controls.checkbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding-inline: 0 !important;
  margin-block-start: 4px !important;
}

.controls.form-check br,
.controls.checkbox br {
  display: none !important;
}

.controls.form-check label,
.controls.checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  cursor: pointer;
}

.form-group > .control:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-block-size: 24px !important;
}

.controls.form-check input[type="checkbox"],
.controls.checkbox input[type="checkbox"],
.form-check .form-check-input,
.form-group > .control > input[type="checkbox"] {
  position: static !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  margin: 0 !important;
  accent-color: var(--accent);
  vertical-align: middle !important;
  flex: 0 0 16px !important;
  cursor: pointer;
}

input[type="radio"],
.form-check input[type="radio"] {
  position: static !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  margin: 0 !important;
  margin-inline-end: 8px !important;
  accent-color: var(--accent);
  vertical-align: middle !important;
  flex: 0 0 16px !important;
  cursor: pointer;
}

.form-check .form-check-label {
  display: inline !important;
  vertical-align: middle !important;
  margin-bottom: 0 !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  cursor: pointer;
}

/* Contact Chooser Bar in account-contacts (clientareacontacts.tpl) */
#main-body .alert.alert-info:has(select) {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-inline-start: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) var(--space-5) !important;
  margin-block-end: var(--space-5) !important;
  box-shadow: var(--elevation-card) !important;
  color: var(--text-primary) !important;
}

/* Form Action Bar / Submit Buttons Spacing */
form > .form-group.text-center,
form > p.text-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6) !important;
  margin-block-end: var(--space-2) !important;
}

form > .form-group.text-center .btn,
form > p.text-center .btn {
  margin: 0 !important;
}

form > .btn {
  margin-block-start: var(--space-3) !important;
  margin-inline-end: var(--space-2) !important;
}

/* 20. Universal Logical Direction & RTL Alignment Overrides for Bootstrap 4 / WHMCS */
th,
.dropdown-menu,
.dropdown-item,
.popover,
.tooltip,
.modal-header,
.modal-body,
.card,
.card-header,
.card-body,
.card-footer,
.panel,
.panel-heading,
.panel-body,
.alert,
.form-group {
  text-align: start;
}

.text-left {
  text-align: start !important;
}

.text-right {
  text-align: end !important;
}

/* Logical RTL Overrides for Bootstrap 3 & 4 .offset-* / .col-*-offset-* classes (which use physical margin-left) */
.offset-1,
.col-xs-offset-1 {
  margin-inline-start: 8.333333% !important;
  margin-inline-end: 0 !important;
}
.offset-2,
.col-xs-offset-2 {
  margin-inline-start: 16.666667% !important;
  margin-inline-end: 0 !important;
}
.offset-3,
.col-xs-offset-3 {
  margin-inline-start: 25% !important;
  margin-inline-end: 0 !important;
}
.offset-4,
.col-xs-offset-4 {
  margin-inline-start: 33.333333% !important;
  margin-inline-end: 0 !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: start !important;
  }
  .text-sm-right {
    text-align: end !important;
  }
  .float-sm-left {
    float: inline-start !important;
  }
  .float-sm-right {
    float: inline-end !important;
  }
  .offset-sm-1,
  .col-sm-offset-1 {
    margin-inline-start: 8.333333% !important;
    margin-inline-end: 0 !important;
  }
  .offset-sm-2,
  .col-sm-offset-2 {
    margin-inline-start: 16.666667% !important;
    margin-inline-end: 0 !important;
  }
  .offset-sm-3,
  .col-sm-offset-3 {
    margin-inline-start: 25% !important;
    margin-inline-end: 0 !important;
  }
  .offset-sm-4,
  .col-sm-offset-4 {
    margin-inline-start: 33.333333% !important;
    margin-inline-end: 0 !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: start !important;
  }
  .text-md-right {
    text-align: end !important;
  }
  .float-md-left {
    float: inline-start !important;
  }
  .float-md-right {
    float: inline-end !important;
  }
  .offset-md-1,
  .col-md-offset-1 {
    margin-inline-start: 8.333333% !important;
    margin-inline-end: 0 !important;
  }
  .offset-md-2,
  .col-md-offset-2 {
    margin-inline-start: 16.666667% !important;
    margin-inline-end: 0 !important;
  }
  .offset-md-3,
  .col-md-offset-3 {
    margin-inline-start: 25% !important;
    margin-inline-end: 0 !important;
  }
  .offset-md-4,
  .col-md-offset-4 {
    margin-inline-start: 33.333333% !important;
    margin-inline-end: 0 !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: start !important;
  }
  .text-lg-right {
    text-align: end !important;
  }
  .float-lg-left {
    float: inline-start !important;
  }
  .float-lg-right {
    float: inline-end !important;
  }
  .offset-lg-1,
  .col-lg-offset-1 {
    margin-inline-start: 8.333333% !important;
    margin-inline-end: 0 !important;
  }
  .offset-lg-2,
  .col-lg-offset-2 {
    margin-inline-start: 16.666667% !important;
    margin-inline-end: 0 !important;
  }
  .offset-lg-3,
  .col-lg-offset-3 {
    margin-inline-start: 25% !important;
    margin-inline-end: 0 !important;
  }
  .offset-lg-4,
  .col-lg-offset-4 {
    margin-inline-start: 33.333333% !important;
    margin-inline-end: 0 !important;
  }
}

/* Expand narrow nested .col-md-8.offset-md-2 / .offset-1.col-10 inside 9-col .primary-content */
.primary-content > .row > .col-md-8.offset-md-2,
#order-standard_cart .col-md-8.col-md-offset-2,
#order-standard_cart .col-md-8.offset-md-2,
#order-standard_cart .col-sm-8.offset-sm-2,
.primary-content form .offset-1.col-10 {
  flex: 0 0 100% !important;
  max-inline-size: 100% !important;
  inline-size: 100% !important;
  margin-inline: 0 !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  margin-block-start: var(--space-3) !important;
  box-shadow: var(--elevation-card) !important;
}

.float-left,
.pull-left {
  float: inline-start !important;
}

.float-right,
.pull-right {
  float: inline-end !important;
}

.ml-auto {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

.mr-auto {
  margin-inline-end: auto !important;
  margin-inline-start: 0 !important;
}

[dir="rtl"] .btn i.fa-arrow-right,
[dir="rtl"] .btn i.fa-arrow-left,
[dir="rtl"] .card-header i.fa-arrow-right,
[dir="rtl"] .card-header i.fa-arrow-left,
[dir="rtl"] .breadcrumb-item i.fa-angle-right,
[dir="rtl"] .pagination i.fa-angle-right,
[dir="rtl"] .pagination i.fa-angle-left,
[dir="rtl"] .pagination i.fa-chevron-right,
[dir="rtl"] .pagination i.fa-chevron-left {
  transform: scaleX(-1);
}

.payment-btn-container {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: start;
  font-size: var(--text-xs);
  line-height: 1.6;
}

.console-text-end {
  text-align: end !important;
}

/* ==========================================================================
   21. Registration Page (.atyaf-registration-shell), Captcha & System Modals
   ========================================================================== */

/* Global safeguard for inline checkboxes inside labels (prevents Bootstrap .form-check-input overlap in RTL) */
input[type="checkbox"].form-check-input,
label input[type="checkbox"],
.atyaf-tos-check input[type="checkbox"],
.atyaf-check-card input[type="checkbox"] {
  position: static !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  min-inline-size: 16px !important;
  min-block-size: 16px !important;
  margin: 0 !important;
  flex: 0 0 16px !important;
  accent-color: var(--accent) !important;
  vertical-align: middle !important;
  cursor: pointer;
}

label.d-inline-flex {
  gap: var(--space-2) !important;
  cursor: pointer;
}

/* Registration Section Headers */
.atyaf-reg-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-subtle);
}

.atyaf-reg-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-subtle);
  color: var(--accent);
  font-size: var(--text-sm);
}

.atyaf-reg-section-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-inline-size: 0;
}

.atyaf-reg-section-titles .card-title {
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.atyaf-reg-section-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Custom Field Checkbox Cards (SMS & Marketing Opt-in Cards) */
.atyaf-check-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  margin-block-start: var(--space-1) !important;
  margin-block-end: 0 !important;
  background-color: var(--surface-inset) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out-quint),
              background-color 160ms var(--ease-out-quint);
}

.atyaf-check-card:hover {
  border-color: var(--border-input-hover) !important;
  background-color: var(--surface-card) !important;
}

.atyaf-check-card__box {
  display: inline-flex;
  align-items: center;
  padding-block-start: 2px;
  flex: 0 0 auto;
}

.atyaf-check-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.atyaf-check-card__title {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.atyaf-check-card__desc {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Unified Password Strength & Generator Toolbar */
.atyaf-pw-security-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.atyaf-pw-meter {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
}

.atyaf-pw-meter .progress {
  block-size: 6px !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--border-default) !important;
  overflow: hidden;
  margin: 0 !important;
}

.atyaf-pw-meter #passwordStrengthTextLabel {
  text-align: start !important;
  font-size: var(--text-xs) !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* Hidden Marketing Email Opt-in Container */
#marketingEmailOptInContainer {
  display: none !important;
}

/* Cohesive Captcha Verification Box */
.atyaf-captcha-wrap {
  margin-block-end: var(--space-4);
}

.atyaf-captcha-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.atyaf-captcha-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 !important;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--text-secondary);
}

.atyaf-captcha-hint i {
  color: var(--accent);
}

.atyaf-captcha-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.atyaf-captcha-img-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  block-size: var(--control-height-md);
}

.atyaf-captcha-img-wrap img {
  display: block;
  block-size: 30px !important;
  inline-size: auto !important;
  border-radius: 4px;
}

.atyaf-captcha-input-wrap {
  inline-size: 150px;
}

.atyaf-captcha-input-wrap #inputCaptcha {
  text-align: center !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
}

/* Registration Submit & TOS Row */
.atyaf-reg-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.atyaf-tos-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin: 0 !important;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.atyaf-tos-check a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.atyaf-reg-submit-btn {
  min-inline-size: 180px;
  margin-inline-start: auto;
}

/* Sidebar Informational Text Item on Registration Page */
#Primary_Sidebar-Already_Registered-Already_Registered_Heading {
  background-color: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-xs) !important;
  line-height: 1.65 !important;
  padding: var(--space-3) var(--space-4) !important;
  cursor: default !important;
}

/* System Modals & Generate Password Modal (#modalGeneratePassword) */
.copy-to-clipboard img,
.btn img[src*="clippy"],
img[src*="clippy.svg"] {
  inline-size: 14px !important;
  block-size: 14px !important;
  max-inline-size: 14px !important;
  max-block-size: 14px !important;
  vertical-align: middle !important;
}

.modal-backdrop.show {
  opacity: 0.55 !important;
  backdrop-filter: blur(3px);
}

.modal-dialog {
  max-inline-size: 480px;
  margin: 1.75rem auto;
}

.modal-dialog.modal-lg {
  max-inline-size: 680px;
}

.modal-content,
.atyaf-modal-content {
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-overlay) !important;
  overflow: hidden;
}

.modal-header,
.modal-header.bg-primary,
.atyaf-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) var(--space-5) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-block-end: 1px solid var(--border-subtle) !important;
  border-start-start-radius: var(--radius-lg) !important;
  border-start-end-radius: var(--radius-lg) !important;
}

.modal-header .modal-title,
.modal-header.bg-primary .modal-title,
.atyaf-modal-header .modal-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin: 0 !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
}

.atyaf-modal-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-subtle);
  color: var(--accent);
  font-size: var(--text-xs);
}

.modal-header .close,
.modal-header.bg-primary .close,
.atyaf-modal-header .close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 32px !important;
  block-size: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: auto !important;
  border-radius: var(--radius-sm) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  float: none !important;
  transition: background-color 150ms var(--ease-out-quint),
              color 150ms var(--ease-out-quint);
}

.modal-header .close:hover,
.atyaf-modal-header .close:hover {
  background-color: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
}

.modal-body,
.atyaf-modal-body {
  padding: var(--space-5) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
}

.modal-footer,
.atyaf-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-5) !important;
  background-color: var(--surface-inset) !important;
  border-block-start: 1px solid var(--border-subtle) !important;
  border-end-start-radius: var(--radius-lg) !important;
  border-end-end-radius: var(--radius-lg) !important;
}

.modal-footer > * {
  margin: 0 !important;
}

/* Password Generator Modal Layout */
.atyaf-pw-modal-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

@media (max-width: 575.98px) {
  .atyaf-pw-modal-grid {
    grid-template-columns: 1fr;
  }
}

.atyaf-pw-modal-field {
  margin-block-end: 0 !important;
}

.atyaf-pw-modal-field #inputGeneratePasswordLength {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  font-family: var(--font-mono) !important;
  font-weight: 600;
  text-align: center !important;
}

.atyaf-pw-output-input {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  background-color: var(--surface-inset) !important;
  direction: ltr !important;
  text-align: start !important;
}

.atyaf-pw-modal-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
}