/* Registration dark theme overrides */
:root {
  --dashboard-sidebar-width: 280px;
  --bg-color: #141a21;
  --box-color: #1c252e;
  --form-bg: #808080;
  --form-border: #808080;
  --primary: #ff6633;
  --primary-hover: #e55c2e;
  --primary-light: #c16b4e;
  --text-color: #ffffff;
  --overlay: rgba(20, 26, 33, 0.8);
  --hover-transparent: rgba(255, 102, 51, 0.1);
  --active-transparent: rgba(255, 102, 51, 0.35);

  --border-color: #2a3642;
  --menu-text-color: #919eab;
  --success-color: #00a76f;
  --surface-muted: #343434;
  --text-muted: #e0e0e0;
  --placeholder-color: #f0f0f0;
  --pure-black: #000000;
  --ps-renew-on: #fcd02f;
  --ps-renew-off: #666666;
  --ps-progress-success: #8cc63f;
  --ps-progress-bg: #d9d9d9;
  --ps-text-light: #d4d4d4;
  --ps-bg-alpha: rgba(255, 255, 255, 0.03);
  --ps-bg-alpha-plus: rgba(255, 255, 255, 0.05);
  --ps-border-alpha: rgba(255, 255, 255, 0.05);
  --ps-border-alpha-plus: rgba(255, 255, 255, 0.1);
  --ps-expired-color: #ff2f2f;
  --status-red: #FF0000;
  --status-green: #009933;
  --status-yellow: #FCD02F;
  --social-blue: #24a1de;
  --divider-grey: #6c757d;
  --btn-disabled: #4D4D4D;

  /* Documents Module Theme variables */
  --doc-primary-glow-alpha: rgba(255, 102, 51, 0.25);
  --doc-primary-glow-card: rgba(255, 102, 51, 0.2);
  --doc-primary-glow-card-hover: rgba(255, 102, 51, 0.3);
  --doc-bg-alpha-focus: rgba(255, 255, 255, 0.08);
  --doc-text-placeholder: rgba(255, 255, 255, 0.8);
  --doc-text-muted-date: rgba(255, 255, 255, 0.4);
  --doc-icon-fallback: rgba(255, 255, 255, 0.15);

  /* Referrals & Vouchers variables */
  --tab-inactive-bg: #383838;
  --tab-active-bg: #707070;
  --tab-hover-bg: #444444;
  --tree-child-card: #4D4D4D;
  --tree-connector-color: #6F6F6F;
  --voucher-divider: rgba(255, 255, 255, 0.25);
  --status-orange: #ff9933;
  --status-light-red: #ff3333;
  --voucher-row-mobile-bg: #242f3a;
  --voucher-row-mobile-border: #2d3b49;
  --modal-bg: #242e38;
  --modal-border: #3c4b57;
}

.account-section {
  background-color: var(--bg-color);
}

.account-section .account-form {
  background-color: var(--box-color);
  border: 1px solid var(--box-color);
  color: var(--text-color);
}

/* .account-section .account-form h4, */
.account-section .account-form h5,
.account-section .account-form h6,
.account-section .account-form p,
.account-section .account-form label,
.account-section .account-form .form-label,
.account-section .account-form .text-muted,
.account-section .account-form .form-check-label {
  color: var(--text-color) !important;
}

.account-section .form-check-input {
  background-color: transparent;
  border: 1px solid var(--text-color);
}

.account-section .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.account-section .account-form .text-danger {
  color: var(--primary) !important;
}

.account-section .form--control,
.account-section .form-select,
.account-section .input-group-text {
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
  color: var(--text-color);
}

.mobile-code {
  background-color: var(--pure-black) !important;
}

.account-section .form--control:focus,
.account-section .form-select:focus {
  border-color: var(--primary);
}

.account-section .form--control:autofill,
.account-section .form--control:autofill:hover,
.account-section .form--control:autofill:focus,
.account-section .form--control:-webkit-autofill,
.account-section .form--control:-webkit-autofill:hover,
.account-section .form--control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color) !important;
  caret-color: var(--text-color);
  box-shadow: 0 0 0 1000px var(--form-bg) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--form-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.account-section ::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 0.7 !important;
}

.account-section .btn--base {
  background-color: var(--primary);
  border-color: var(--primary);
}

.account-section .btn--base:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.account-section .text--base,
.account-section .link-color,
.account-section a {
  color: var(--primary) !important;
}

.account-section .cf-turnstile {
  padding: 10px;
  background-color: var(--box-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

/* OTP modal styling */
.otp-modal {
  background-color: var(--box-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.otp-modal .modal-header {
  background-color: var(--box-color);
  padding: 28px 28px 12px;
  border-bottom: 0;
}

.otp-modal .modal-title {
  color: var(--primary);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.otp-modal .modal-body {
  padding: 0 28px 28px;
}

.otp-modal-copy {
  max-width: 420px;
}

.otp-modal-text {
  color: var(--text-color);
  line-height: 1.7;
}

.otp-modal-badge {
  margin-bottom: 16px;
}

.otp-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-color);
  font-size: 28px;
  line-height: 1;
  opacity: 0.8;
}

.otp-modal-close:hover {
  color: var(--primary);
  opacity: 1;
}

.otp-inputs {
  gap: 14px;
}

.otp-inputs .otp-input {
  width: calc(25% - 11px);
  height: 72px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}

.otp-modal .form--control {
  background-color: #222c36;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.otp-modal .form--control:focus {
  border-color: var(--primary);
  background-color: rgba(255, 102, 51, 0.08);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.otp-modal .btn--base {
  background-color: var(--primary);
  border-color: var(--primary);
  min-height: 48px;
}

.otp-modal .btn--base:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.otp-modal .btn-link {
  text-decoration: none;
  font-weight: 600;
}

.otp-modal .otp-error {
  min-height: 20px;
}

@media (max-width: 575px) {
  .otp-modal .modal-header {
    padding: 24px 20px 10px;
  }

  .otp-modal .modal-body {
    padding: 0 20px 24px;
  }

  .otp-modal .modal-title {
    font-size: 1.7rem;
  }

  .otp-inputs {
    gap: 10px;
  }

  .otp-inputs .otp-input {
    width: calc(25% - 8px);
    height: 64px;
    font-size: 26px;
  }
}

.account-section .cms-content,
.account-section .cms-content h1,
.account-section .cms-content h2,
.account-section .cms-content h3,
.account-section .cms-content h4,
.account-section .cms-content h5,
.account-section .cms-content h6,
.account-section .cms-content p,
.account-section .cms-content li,
.account-section .cms-content span,
.account-section .cms-content a {
  color: var(--text-color);
}

.footer-menu-link {
  color: var(--text-color) !important;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
  font-weight: 500;
}

.footer-menu-link:hover {
  color: var(--primary) !important;
  text-decoration: underline;
}

.base--color {
  color: var(--primary) !important;
}

.header-section .nav-link:hover {
  color: var(--primary) !important;
}

/* CMS dark layout */
.main-content-layout {
  background-color: var(--bg-color);
  min-height: 80vh;
  padding-top: 60px;
  padding-bottom: 80px;
}

.container-content {
  background-color: var(--box-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  max-width: 1140px !important;
}

.cms-content-wrap {
  padding: 40px !important;
}

.main-content-layout .title-section {
  border-bottom: 1px solid var(--border-color);
}

.cms-title {
  color: var(--primary);
  font-weight: 700;
  font-size: 36px;
  margin: 0;
}

.cms-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--text-color);
  line-height: 1.8;
  font-size: 1.05rem;
}

/* .cms-content * {
  max-width: 100%;
  color: #ffffff !important;
} */

.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
  color: var(--primary) !important;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-content p {
  margin-bottom: 15px;
  color: var(--text-muted) !important;
}

.cms-content ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

.cms-content li {
  margin-bottom: 8px;
  color: var(--text-muted) !important;
}

.cms-content table {
  width: 100% !important;
  display: block;
  overflow-x: auto;
  border: 1px solid var(--border-color);
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

.cms-login-btn {
  background-color: var(--primary) !important;
  border-color: var(--primary);
  height: 38px;
  border-radius: 4px;
}

/* Front dashboard dark shell */
body,
.dashboard-wrapper,
.dashboard-container,
.dashboard-inner {
  background-color: var(--bg-color) !important;
}

.dashboard-wrapper {
  /* display: flex;
  flex-direction: column; */
  width: calc(100% - var(--dashboard-sidebar-width));
  min-height: 100vh;
  border-left: 1px solid rgba(145, 158, 171, 0.28);
}

.dashboard-container {
  max-width: 100%;
  /* flex-grow: 1; */
}

.dashboard-container .dashboard-inner {
  padding: 32px 28px 48px;
}

.dashboard-page-header {
  margin-bottom: 1.5rem;
}

.dashboard-page-title {
  margin-bottom: 0.5rem;
  color: var(--primary) !important;
}

.dashboard-page-text {
  margin-bottom: 0;
  color: var(--menu-text-color);
}

.dashboard-panel {
  background-color: var(--box-color);
  border: 1px solid var(--border-color);
}

.dashboard-panel .card-body,
.dashboard-panel-body {
  background-color: var(--box-color);
}

.dashboard-panel--compact {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-page-header--compact {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-form {
  background-color: var(--box-color);
  border: 1px solid var(--box-color);
  color: var(--text-color);
}

.dashboard-form p,
.dashboard-form label,
.dashboard-form .form-label,
.dashboard-form .text-muted,
.dashboard-form .form-check-label {
  color: var(--text-color) !important;
}

.dashboard-form .text-danger {
  color: var(--primary) !important;
}

.dashboard-form .form--control,
.dashboard-form .form-select,
.dashboard-form .input-group-text {
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
  color: var(--text-color);
}

.dashboard-form .form--control[disabled],
.dashboard-form .form--control[readonly] {
  background-color: #707070;
  color: rgba(255, 255, 255, 0.88);
  cursor: not-allowed;
  opacity: 1;
}

.dashboard-form .form--control:focus,
.dashboard-form .form-select:focus {
  border-color: var(--primary);
  box-shadow: none;
}

.dashboard-static-value {
  min-height: 45px;
  display: flex;
  align-items: center;
  color: var(--text-color);
  font-weight: 600;
}

.dashboard-form ::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 0.7 !important;
}

.dashboard-form .btn--base {
  background-color: var(--primary);
  border-color: var(--primary);
}

.dashboard-form .btn--base:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

button.custom-disable,
button.custom-disable:hover,
button.custom-disable:disabled,
button.custom-disable[disabled],
.dashboard-form button.custom-disable,
.dashboard-form button.custom-disable:hover,
.dashboard-form button.custom-disable:disabled,
.dashboard-form button.custom-disable[disabled],
button:disabled,
button[disabled],
.btn:disabled,
.btn[disabled] {
  background-color: var(--btn-disabled) !important;
  border-color: var(--btn-disabled) !important;
  color: #B3B3B3 !important;
  opacity: 1 !important;
}

.dashboard-sidebar {
  width: var(--dashboard-sidebar-width);
  min-height: 100vh;
  background-color: var(--bg-color) !important;
  border-right: 1px solid rgba(145, 158, 171, 0.28);
  padding: 22px 16px 28px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.dashboard-sidebar .btn-close,
.dashboard-sidebar .dash-sidebar-close {
  filter: invert(1);
}

.dashboard-sidebar .logo.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  margin: 4px 0 22px;
  padding: 12px 10px;
  background: transparent;
  border: 0;
}

.dashboard-sidebar .logo.sidebar-brand img {
  max-width: 140px;
  width: 100%;
  object-fit: contain;
}

.twofactor-settings-page {
  max-width: 1120px;
  margin: 0 auto;
}

.twofactor-page-header {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.twofactor-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.twofactor-info-panel,
.twofactor-action-panel {
  border-radius: 14px;
  overflow: hidden;
}

.twofactor-info-panel .dashboard-panel-body,
.twofactor-action-panel .dashboard-panel-body {
  padding: 28px;
}

.twofactor-content-card {
  height: 100%;
}

.twofactor-cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-bottom: 18px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 102, 51, 0.24);
  border-radius: 999px;
  background: rgba(255, 102, 51, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.twofactor-cta-badge--danger {
  border-color: rgba(255, 122, 122, 0.24);
  background: rgba(255, 122, 122, 0.12);
  color: #ff8f8f;
}

.twofactor-content-card h5,
.twofactor-content-card h6,
.twofactor-content-card label,
.twofactor-content-card p {
  color: var(--text-color);
}

.twofactor-content-card h5 {
  color: var(--text-color);
}

.twofactor-section-copy {
  line-height: 1.6;
  font-size: 1.05rem;
}

.twofactor-qr-image {
  display: block;
  width: 100%;
  max-width: 220px;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
}

.twofactor-help-copy {
  margin-top: 18px;
}

.twofactor-help-copy label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
}

.twofactor-help-copy p {
  color: var(--menu-text-color);
  line-height: 1.8;
}

.twofactor-status-stack {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.twofactor-status-item {
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.twofactor-status-label {
  display: block;
  margin-bottom: 6px;
  color: var(--menu-text-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.twofactor-status-value {
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 700;
}

.twofactor-settings-page .copy-link {
  position: relative;
}

.twofactor-settings-page .copy-link .copyURL {
  width: 100%;
  height: 45px;
  padding: 0 100px 0 14px;
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 10px;
  color: var(--text-color);
}

.twofactor-settings-page .copy-link .copyBoard {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color);
  cursor: pointer;
  font-weight: 700;
}

.twofactor-settings-page .dashboard-form .form--control {
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
}

.twofactor-settings-page .twofactor-inline-verification {
  margin-top: 0;
}

.twofactor-settings-page .twofactor-inline-verification label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-color);
  font-weight: 600;
}

.twofactor-settings-page .verification-code {
  overflow: hidden;
}

.twofactor-settings-page .verification-code::after {
  display: none;
}

.twofactor-settings-page .verification-code input {
  width: 100%;
  left: 0;
  padding-left: 18px;
  padding-right: 0;
  letter-spacing: calc((100% - 36px) / 6);
  color: transparent !important;
  caret-color: transparent;
  text-shadow: none;
}

.twofactor-settings-page .verification-code span {
  position: relative;
  width: calc((100% / 6) - 6px);
  background: #222c36;
  border-color: var(--border-color);
  color: var(--text-color);
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.twofactor-settings-page .verification-code span.is-active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: rgba(255, 102, 51, 0.08);
}

.twofactor-settings-page .verification-code span.is-active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 1px;
  height: 22px;
  background: var(--text-color);
  transform: translateY(-50%);
  animation: twofactorCaretBlink 1s steps(1) infinite;
}

.twofactor-auth-page .twofactor-auth-card {
  padding: 32px;
}

.twofactor-auth-page .twofactor-cta-badge {
  margin-bottom: 14px;
}

.twofactor-auth-page .verification-code-wrapper {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.twofactor-auth-page .verification-area {
  width: 100%;
}

.twofactor-auth-page .verification-code {
  margin-bottom: 8px;
  overflow: hidden;
}

.twofactor-auth-page .verification-code::after {
  display: none;
}

.twofactor-auth-page .verification-code input {
  width: 100%;
  left: 0;
  padding-left: 18px;
  padding-right: 0;
  letter-spacing: calc((100% - 36px) / 6);
  color: transparent !important;
  caret-color: transparent;
  text-shadow: none;
}

.twofactor-auth-page .verification-code span {
  position: relative;
  background: #222c36;
  border-color: var(--border-color);
  color: var(--text-color);
  border-radius: 0;
  width: calc((100% / 6) - 6px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.twofactor-auth-page .verification-code span.is-active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: rgba(255, 102, 51, 0.08);
}

.twofactor-auth-page .verification-code span.is-active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 1px;
  height: 22px;
  background: var(--text-color);
  transform: translateY(-50%);
  animation: twofactorCaretBlink 1s steps(1) infinite;
}

@keyframes twofactorCaretBlink {
  50% {
    opacity: 0;
  }
}

.twofactor-auth-page .submit-form label {
  color: var(--text-color);
  font-weight: 600;
}

.twofactor-auth-page .submit-form .btn--base {
  margin-top: 12px;
}

@media (min-width: 992px) {
  .twofactor-layout-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  }
}

@media (max-width: 991px) {

  .twofactor-info-panel .dashboard-panel-body,
  .twofactor-action-panel .dashboard-panel-body {
    padding: 24px;
  }

  .twofactor-auth-page .twofactor-auth-card {
    padding: 28px;
  }
}

@media (max-width: 575px) {
  .twofactor-page-header {
    margin-bottom: 20px;
  }

  .twofactor-info-panel .dashboard-panel-body,
  .twofactor-action-panel .dashboard-panel-body {
    padding: 20px;
  }

  .twofactor-settings-page .copy-link .copyURL {
    padding-right: 88px;
  }

  .twofactor-auth-page .twofactor-auth-card {
    padding: 24px 20px;
  }
}

.sidebar-balance-wrap,
.bg--lights {
  background: transparent !important;
}

.dashboard-sidebar .profile-info.account-balance-panel {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
}

.dashboard-sidebar .profile-info>p,
.label-color-black {
  padding-left: 4px;
  color: var(--menu-text-color) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.label-color-white {
  color: var(--text-color) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.dashboard-sidebar .profile-info>h4.balance-card {
  margin: 0 0 8px;
  padding: 8px 10px 10px;
  background-color: var(--surface-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.label-color-green {
  color: var(--success-color) !important;
  font-size: 13px;
  font-weight: 800;
}

.label-color-orange {
  color: var(--primary) !important;
  font-size: 22px;
  font-weight: 800;
}

.ps-status-counter-green {
  color: var(--status-green) !important;
  font-size: 13px;
  font-weight: 800;
}

.ps-status-counter-yellow {
  color: var(--status-yellow) !important;
  font-size: 13px;
  font-weight: 800;
}

.ps-status-counter-red {
  color: var(--status-red) !important;
  font-size: 13px;
  font-weight: 800;
}

.currency--display--new--theme {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-time-wrap {
  padding: 18px 0 0;
}

.sidebar-time-label {
  color: var(--menu-text-color);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-left: 4px;
}

.sidebar-time-card {
  background-color: var(--surface-muted);
  border-radius: 3px;
  padding: 8px 10px 10px;
}

.sidebar-time-zone {
  display: block;
  color: var(--text-color);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0.92;
}

.sidebar-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.sidebar-time-value {
  color: var(--text-color);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}

.sidebar-time-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--text-color);
  font-size: 24px;
  line-height: 1;
  opacity: 0.9;
}

.sidebar-action-btn.btn--secondary,
.sidebar-action-btn {
  width: 100%;
  justify-content: center;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-color) !important;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 10px;
  box-shadow: none;
}

.sidebar-menu {
  margin-top: 22px;
  font-weight: 600;
}

.sidebar-menu li {
  padding: 0;
}

.sidebar-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px !important;
  border-radius: 0;
  color: var(--menu-text-color) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  background: transparent !important;
}

.sidebar-menu li a img {
  width: 14px;
  height: 14px;
  margin-right: 0;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.7);
}

.sidebar-menu li a.active,
.sidebar-menu li a:hover {
  color: var(--primary) !important;
  background-color: rgba(111, 72, 20, 0.82) !important;
}

.sidebar-menu li a.active img,
.sidebar-menu li a:hover img {
  opacity: 1;
  filter: sepia(1) saturate(7) hue-rotate(-18deg) brightness(1.02);
}

.sidebar-menu .sidebar-submenu {
  padding-left: 18px;
}

.sidebar-menu .sidebar-submenu li a {
  font-size: 12px;
  color: var(--menu-text-color) !important;
}

.sidebar-menu .sidebar-submenu li a.back_none::before {
  background: none !important;
}

.menu-badge {
  padding: 5px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.dashboard-nav {
  min-height: 46px;
  padding: 0 10px 0 18px;
  background-color: var(--bg-color) !important;
  border-bottom: 1px solid rgba(145, 158, 171, 0.28);
}

.dash-sidebar-toggler {
  color: var(--text-color);
}

.dashboard-lang-select.langSel {
  min-width: 84px;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-color) !important;
  font-size: 11px;
  box-shadow: none !important;
}

.dashboard-lang-select.langSel option {
  color: var(--text-color);
  background-color: var(--box-color);
}

.nav-header-link li .link.dashboard-user-badge,
.nav-header-link li .link {
  width: 28px;
  height: 28px;
  background: var(--primary) !important;
  color: var(--text-color) !important;
  font-size: 10px;
  font-weight: 700;
  box-shadow: none;
}

.nav-header-link .dropdown-wrapper {
  background-color: var(--box-color) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.nav-header-link .dropdown-wrapper.show-dropdown {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

.nav-header-link .dropdown-wrapper::before {
  background-color: transparent !important;
  border-bottom-color: var(--box-color) !important;
}

.nav-header-link .dropdown-wrapper .dropdown-header,
.nav-header-link .dropdown-wrapper .links li a,
.nav-header-link .dropdown-wrapper p {
  color: var(--text-color) !important;
}

.nav-header-link .dropdown-wrapper .links li a {
  border-top-color: rgba(145, 158, 171, 0.2);
}

.nav-header-link .dropdown-wrapper .links li a:hover,
.text--base {
  color: var(--primary) !important;
}

.dashboard-wrapper .card,
.dashboard-wrapper .card-body,
.dashboard-wrapper .show--deposit--withdraw--new .card,
.dashboard-wrapper .show--deposit--withdraw--new .card-body {
  background-color: var(--box-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

.dashboard-wrapper .title,
.dashboard-wrapper h1,
.dashboard-wrapper h2,
.dashboard-wrapper h3,
.dashboard-wrapper h4,
.dashboard-wrapper h5,
.dashboard-wrapper h6 {
  color: var(--text-color);
}

/* .dashboard-wrapper p,
.dashboard-wrapper span,
.dashboard-wrapper small,
.dashboard-wrapper td,
.dashboard-wrapper th,
.dashboard-wrapper a:not(.btn) {
  color: var(--menu-text-color);
} */

/* .dashboard-wrapper .green--with--bold,
.dashboard-wrapper .label-color-green,
.dashboard-wrapper .text--base {
  color: var(--primary) !important;
} */

.dashboard-wrapper .red--with--bold,
.dashboard-wrapper .label-color-orange,
.dashboard-wrapper .base--color {
  color: var(--primary) !important;
}

.dashboard-wrapper table th,
.dashboard-wrapper table td {
  border-color: rgba(145, 158, 171, 0.2);
}

.dashboard-content-shell {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.dashboard-data-card {
  background-color: #343434;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: none;
}

.dashboard-card-title {
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-color) !important;
}

.dashboard-card-title--compact {
  margin-bottom: 0;
  min-width: 180px;
}

.dashboard-hero-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 18px;
}

.dashboard-hero-amount {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-color) !important;
}

.dashboard-value-unit,
.dashboard-stat-value small {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-color) !important;
  text-transform: uppercase;
}

.dashboard-card-divider {
  height: 1px;
  margin: 14px 0 10px;
  background-color: rgba(255, 255, 255, 0.28);
}

.dashboard-card-note {
  font-size: 13px;
  font-weight: 500;
  color: #d4d4d4 !important;
}

.dashboard-card-note--center {
  margin-bottom: 16px;
  text-align: center;
}

.dashboard-card-note strong,
.dashboard-card-value strong {
  color: var(--text-color) !important;
  font-weight: 800;
}

.dashboard-card-value {
  font-size: 14px;
  color: var(--text-color);
}

.dashboard-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.dashboard-action-row--center {
  justify-content: center;
}

.dashboard-action-btn.btn--base {
  /* min-width: 166px; */
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-color) !important;
}

.dashboard-action-btn.btn--base:hover,
.dashboard-action-btn.btn--base:focus,
.dashboard-action-btn.btn--base:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-color) !important;
  box-shadow: none !important;
}

.dashboard-action-btn--inline.btn--base {
  min-width: 168px;
}

.dashboard-card-subtitle {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-color) !important;
}

.dashboard-card-stack {
  margin-top: 6px;
}

.dashboard-stat-row,
.dashboard-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-stat-row {
  margin-top: 10px;
}

.dashboard-stat-label {
  font-size: 16px;
  font-weight: 500;
  color: #d9d9d9 !important;
}

.dashboard-stat-label--muted {
  font-style: italic;
}

.dashboard-stat-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-color) !important;
  white-space: nowrap;
}

.dashboard-stat-value--wide {
  min-width: 240px;
  text-align: right;
}

.dashboard-text-accent {
  color: var(--primary) !important;
}

.dashboard-stat-value.dashboard-text-accent small {
  color: inherit !important;
}

.dashboard-stat-row--compact {
  margin-top: 6px;
}

.dashboard-section-group {
  margin-top: 34px;
}

.dashboard-section-title {
  margin-bottom: 22px;
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  color: var(--primary) !important;
}

.dashboard-stack-gap {
  margin-top: 16px;
}

.dashboard-data-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

@media (max-width: 1199px) {
  .dashboard-sidebar {
    width: var(--dashboard-sidebar-width);
    position: fixed;
    z-index: 1050;
  }

  .dashboard-wrapper {
    width: 100%;
    border-left: 0;
  }

  .dashboard-split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .dashboard-container .dashboard-inner {
    padding: 22px 14px 36px;
  }

  .dashboard-nav {
    padding-inline: 14px;
  }

  .dashboard-data-card {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .dashboard-hero-amount {
    font-size: 36px;
  }

  .dashboard-data-head,
  .dashboard-data-foot,
  .dashboard-stat-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-stat-value {
    min-width: 0;
    text-align: left;
    font-size: 28px;
  }

  .dashboard-card-title--compact {
    min-width: 0;
  }

  .dashboard-action-row {
    justify-content: flex-start;
  }
}

/* ── Wallet Address page – input focus (matches Change Password focus style) ── */
.input-custom:focus,
.input-small:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: none;
}

/* Global Modal & Popup Styling */
.modal-content {
  background-color: var(--box-color) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

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

.modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

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

.modal-body .form--control,
.modal-body .form-select,
.modal-body .input-group-text {
  background-color: var(--bg-color) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

.modal-body .form--control:hover,
.modal-body .form-select:hover,
.modal-body .form--control:focus,
.modal-body .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Participation Shares Specific Modal UI */
.ps-total-calculation {
  background: rgba(var(--primary-rgb, 255, 102, 51), 0.05) !important;
  border: 1px dashed var(--primary) !important;
  transition: all 0.3s ease;
}

.ps-total-calculation:hover {
  background: rgba(var(--primary-rgb, 255, 102, 51), 0.1) !important;
  transform: translateY(-2px);
}

.ps-total-calculation .text--base {
  color: var(--primary) !important;
}

/* Modal Popup Button Styling - Standardized Heights & Primary Color */
.otp-modal .modal-footer .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.otp-modal .modal-footer .btn--base,
.otp-modal .modal-footer .submit-form-btn {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-color, #ffffff) !important;
}

.otp-modal .modal-footer .btn--base:hover,
.otp-modal .modal-footer .submit-form-btn:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--text-color, #ffffff) !important;
}

.otp-modal .modal-footer .btn--secondary {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.otp-modal .modal-footer .btn--secondary:hover {
  background-color: var(--primary) !important;
  color: var(--text-color, #ffffff) !important;
}