/* ==========================================================================

   DHENDRA — Modern UI/UX Override Layer

   Loaded AFTER the MotaAdmin theme so these rules win the cascade.

   --------------------------------------------------------------------------

   Design tokens:

     Primary   : #00543C  (forest green)     Secondary : #D4AF57 (gold)

     Background: #FAF8F3  Text       : #193B2D

   Scope: userpanel (member dashboard), auth pages, reports, wallets, tables.

   ========================================================================== */



:root {

  /* Brand palette mapped onto Bootstrap 5 vars used by the theme */

  --brand-primary: #00543C;

  --brand-primary-dark: #003D2C;

  --brand-primary-soft: rgba(0, 84, 60, 0.12);

  --brand-secondary: #D4AF57;

  --brand-secondary-dark: #C29A40;

  --brand-bg: #FAF8F3;

  --brand-text: #193B2D;

  --brand-text-muted: #657368;

  --brand-border: #E4E3D7;



  --app-radius: 16px;

  --app-radius-sm: 10px;

  --app-radius-lg: 24px;

  --app-shadow-sm: 0 1px 2px rgba(0, 46, 34, 0.04), 0 1px 3px rgba(0, 46, 34, 0.06);

  --app-shadow: 0 6px 18px -4px rgba(0, 46, 34, 0.10), 0 2px 6px rgba(0, 46, 34, 0.05);

  --app-shadow-lg: 0 20px 45px -18px rgba(0, 46, 34, 0.22), 0 6px 18px rgba(0, 46, 34, 0.06);

  --app-grad-primary: linear-gradient(135deg, #00543C 0%, #00543C 100%);

  --app-grad-warm: linear-gradient(135deg, #E7CC83 0%, #D4AF57 100%);

  --app-grad-violet: linear-gradient(135deg, #00543C 0%, #003D2C 100%);

  --app-grad-pink: linear-gradient(135deg, #B08B39 0%, #85671F 100%);

  --app-grad-blue: linear-gradient(135deg, #39745A 0%, #00543C 100%);

  --app-grad-green: linear-gradient(135deg, #39745A 0%, #00543C 100%);



  --bs-primary: #00543C;

  --bs-primary-rgb: 0, 84, 60;

  --bs-secondary: #D4AF57;

  --bs-secondary-rgb: 212, 175, 87;

  --bs-body-color: #193B2D;

  --bs-body-color-rgb: 25, 59, 45;

  --bs-body-bg: #FAF8F3;

  --bs-body-bg-rgb: 250, 248, 243;

  --bs-border-color: #E4E3D7;

  --bs-link-color: #00543C;

  --bs-link-hover-color: #003D2C;

  --bs-body-font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}



/* --------------------------------------------------------------------------

   1. Base & typography

   -------------------------------------------------------------------------- */

html {

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: var(--bs-body-font-family);

  background-color: var(--brand-bg);

  color: var(--brand-text);

  letter-spacing: 0.1px;

  overflow-x: hidden;

}



h1, h2, h3, h4, h5, h6,

.card-title, .welcome-text h4, .page-titles h4 {

  color: var(--brand-text);

  font-weight: 600;

  letter-spacing: -0.2px;

}



a {

  color: var(--brand-primary);

  text-decoration: none;

  transition: color 0.2s ease;

}

a:hover {

  color: var(--brand-primary-dark);

}



::selection {

  background: var(--brand-primary);

  color: #fff;

}



/* Scrollbars */

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: #CED4C6; border-radius: 8px; }

::-webkit-scrollbar-thumb:hover { background: #929D91; }



/* --------------------------------------------------------------------------

   2. Preloader

   -------------------------------------------------------------------------- */

#preloader {

  background: radial-gradient(circle at 30% 20%, #EFF5EF, #FAF8F3 55%, #F2EFE6);

}

#preloader .sk-three-bounce .sk-child {

  background: var(--brand-primary);

  border-radius: 50%;

}

#preloader .loader1 span {

  background: var(--brand-primary);

}



/* --------------------------------------------------------------------------

   3. Sidebar (.deznav) — glassmorphism

   -------------------------------------------------------------------------- */

.deznav {

  background: rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-right: 1px solid rgba(228, 227, 215, 0.8);

  box-shadow: 8px 0 30px -18px rgba(0, 46, 34, 0.18);

  transition: all 0.3s ease;

}



.deznav .metismenu {

  padding: 12px 12px 20px;

}



.deznav .metismenu > li > a {

  border-radius: 12px;

  padding: 11px 14px;

  font-size: 14px;

  font-weight: 500;

  color: var(--brand-text-muted);

  display: flex;

  align-items: center;

  gap: 10px;

  transition: all 0.22s ease;

  margin: 2px 0;

}

.deznav .metismenu > li > a > i {

  font-size: 1.05rem;

  width: 22px;

  text-align: center;

  top: 0;

}

.deznav .metismenu > li > a:hover {

  color: var(--brand-primary);

  background: var(--brand-primary-soft);

  transform: translateX(3px);

}

.deznav .metismenu > li.mm-active > a,

.deznav .metismenu > li.active > a {

  color: #fff;

  background: var(--app-grad-primary);

  box-shadow: 0 8px 18px -8px rgba(0, 84, 60, 0.7);

  font-weight: 600;

}

.deznav .metismenu > li.mm-active > a:hover,

.deznav .metismenu > li.active > a:hover {

  color: #fff;

  transform: translateX(0);

}



.deznav .metismenu .nav-label {

  color: #929D91;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.2px;

  text-transform: uppercase;

  padding: 18px 14px 6px;

}



.deznav .metismenu li a .badge {

  margin-left: auto;

  border-radius: 20px;

  font-weight: 600;

}



/* Collapsed / mini mode keeps icons centered */

[data-sidebar-style="mini"] .deznav .metismenu > li > a {

  justify-content: center;

  padding: 12px;

}



/* --------------------------------------------------------------------------

   4. Nav header (brand area)

   -------------------------------------------------------------------------- */

.nav-header {

  background: #fff;

  border-bottom: 1px solid var(--brand-border);

}

.nav-header .brand-logo {

  padding: 12px 20px;

  display: flex;

  align-items: center;

}

.nav-header .brand-logo .logo-abbr,

.nav-header .brand-logo img {

  border-radius: 10px;

  max-height: 42px;

  object-fit: contain;

}

.nav-control .hamburger .line {

  background: var(--brand-text);

  border-radius: 3px;

}



/* --------------------------------------------------------------------------

   5. Top header — sticky glass bar

   -------------------------------------------------------------------------- */

.header {

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(228, 227, 215, 0.7);

  transition: box-shadow 0.25s ease, background 0.25s ease;

}

.header.is-sticky {

  box-shadow: 0 6px 24px -12px rgba(0, 46, 34, 0.16);

  background: rgba(255, 255, 255, 0.96);

}

.header .navbar {

  padding: 0.45rem 0;

}

.header .header-content {

  padding: 0 1.5rem;

}

@media (max-width: 767px) {

  .header .header-content { padding: 0 0.75rem; }

}



.header .navbar-nav .nav-item > a {

  color: var(--brand-text-muted);

  border-radius: 10px;

  width: 42px;

  height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

  position: relative;

}

.header .navbar-nav .nav-item > a:hover {

  background: var(--brand-primary-soft);

  color: var(--brand-primary);

}



/* Profile chip */

.header .navbar-nav .nav-item.header-profile > .nav-link {

  display: flex;

  align-items: center;

  gap: 12px;

  width: auto;

  height: auto;

  padding: 4px 8px 4px 4px;

  border-radius: 40px;

  background: #F2EFE6;

}

.header .navbar-nav .nav-item.header-profile > .nav-link:hover {

  background: #E4E3D7;

  color: var(--brand-text);

}

.header .header-profile .profile-pic {

  width: 40px !important;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid #fff;

  box-shadow: var(--app-shadow-sm);

}

.header .header-profile .header-info span,

.header .header-profile .header-info strong {

  color: var(--brand-text);

  font-size: 13px;

}

.header .header-profile .header-info small {

  color: var(--brand-text-muted);

  font-size: 11px;

}



/* Topbar search */

.header-search {

  position: relative;

  width: 320px;

}

@media (max-width: 991px) {

  .header-search { display: none; }

}

.header-search .search-icon {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  color: #929D91;

  pointer-events: none;

}

.header-search .form-control {

  border-radius: 40px;

  background: #F2EFE6;

  border: 1px solid transparent;

  padding-left: 40px;

  height: 42px;

}

.header-search .form-control:focus {

  background: #fff;

  border-color: var(--brand-primary);

  box-shadow: 0 0 0 4px rgba(0, 84, 60, 0.12);

}



/* Dropdown menus */

.header .dropdown-menu {

  border: 1px solid var(--brand-border);

  border-radius: 14px;

  box-shadow: var(--app-shadow-lg);

  padding: 8px;

  min-width: 230px;

  overflow: hidden;

}

.header .dropdown-menu .dropdown-item {

  border-radius: 9px;

  padding: 10px 12px;

  font-size: 13px;

  font-weight: 500;

  color: var(--brand-text);

  transition: all 0.15s ease;

}

.header .dropdown-menu .dropdown-item:hover {

  background: var(--brand-primary-soft);

  color: var(--brand-primary);

}



/* Notification dropdown */

.notification_dropdown .dropdown-menu {

  min-width: 320px;

}

.notification_dropdown .dropdown-header {

  font-weight: 600;

  color: var(--brand-text);

  padding: 10px 12px 8px;

}

.notification_dropdown .dropdown-menu .dropdown-item {

  white-space: normal;

  display: flex;

  gap: 10px;

  align-items: flex-start;

}

.notification_dropdown .notification-avatar {

  width: 38px;

  height: 38px;

  border-radius: 10px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 15px;

}



/* Notification badge bubble */

.notification_dropdown .badge-bubble {

  position: absolute;

  top: 6px;

  right: 6px;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background: #F2565F;

  color: #fff;

  font-size: 10px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #fff;

}



/* --------------------------------------------------------------------------

   6. Content area & page titles

   -------------------------------------------------------------------------- */

.content-body {

  background: var(--brand-bg);

  min-height: calc(100vh - 120px);

}

.page-titles {

  background: transparent;

  /* padding: 6px 0 16px; */

  border: 0;

}

.welcome-text h4 {

  font-size: 22px;

  margin-bottom: 2px;

}

.welcome-text span {

  color: var(--brand-text-muted);

  font-size: 13px;

}



/* --------------------------------------------------------------------------

   7. Cards — glassmorphism

   -------------------------------------------------------------------------- */

.card,

.iq-card {

  border: 1px solid rgba(228, 227, 215, 0.85);

  border-radius: var(--app-radius);

  box-shadow: var(--app-shadow);

  background-color: #fff;

  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;

  overflow: hidden;

}

.card:hover,

.iq-card:hover {

  border-color: rgba(0, 84, 60, 0.35);

  box-shadow: var(--app-shadow-lg);

}



.card-header {

  background: #fff;

  border-bottom: 1px solid var(--brand-border);

  padding: 16px 22px;

}

.card-header.border-0 {

  border-bottom: 0;

}

.card-title {

  font-size: 16px;

  font-weight: 600;

  color: var(--brand-text);

}

.card-body {

  padding: 20px 22px;

}



/* Dashboard stat cards — legacy markup (.box-main) gets a full modern makeover */

.content-body .card .card-body {

  position: relative;

}

.content-body .card .card-body > a {

  display: block;

  text-decoration: none;

}

.content-body .card .card-body .box-main {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 14px;

}

.content-body .card .card-body .box-main i.fa {

  width: 46px;

  height: 46px;

  border-radius: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--brand-primary-soft);

  flex-shrink: 0;

}

.content-body .card .card-body .box-main i.fa img {

  width: 24px !important;

  height: auto;

  object-fit: contain;

  filter: saturate(1) brightness(0.92);

}

/* Tint the icon chips with an alternating premium gradient palette */

.content-body .card .card-body .box-main i.fa:nth-child(1) { background: var(--app-grad-primary); }

.content-body .card .card-body .box-main i.fa:nth-child(1) img { filter: brightness(0) invert(1); }



/* Stat number */

.content-body .card .card-body > a > span.mb-0,

.content-body .card .card-body .box-main > span.mb-0 {

  display: block;

  font-size: 21px !important;

  font-weight: 700;

  color: var(--brand-text) !important;

  line-height: 1.25;

  margin-top: 0 !important;

  letter-spacing: -0.3px;

}

.content-body .card .card-body > a > span.mb-0:not(#dayaa) { display: block !important; }

.content-body .card .card-body .box-main > span.mb-0 { margin-left: 2px; }

/* Stat label */

.content-body .card .card-body > a > h6 {

  margin: 4px 0 0;

  font-size: 13px;

  font-weight: 500;

  color: var(--brand-text-muted);

}

.content-body .card .card-body > a > h6 strong { font-weight: 500; }

.content-body .card .card-body > a > h6 strong::after {

  content: "";

  display: block;

  width: 28px;

  height: 3px;

  border-radius: 3px;

  background: var(--app-grad-primary);

  margin-top: 8px;

  transition: width 0.3s ease;

}

.content-body .card:hover .card-body > a > h6 strong::after { width: 44px; }



/* Generic inline stat emphasis inside cards */

.content-body .card .card-body .nav-value { color: var(--brand-primary); font-weight: 600; }



/* --------------------------------------------------------------------------

   8. Buttons

   -------------------------------------------------------------------------- */

.btn {

  border-radius: var(--app-radius-sm);

  font-weight: 500;

  letter-spacing: 0.2px;

  padding: 9px 20px;

  transition: all 0.22s ease;

  position: relative;

}

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



.btn-primary {

  background: var(--app-grad-primary);

  border: 0;

  color: #fff;

  box-shadow: 0 8px 18px -8px rgba(0, 84, 60, 0.8);

}

.btn-primary:hover,

.btn-primary:focus,

.btn-primary:active {

  background: var(--app-grad-primary);

  transform: translateY(-2px);

  box-shadow: 0 12px 24px -10px rgba(0, 84, 60, 0.9);

  color: #fff;

}



.btn-secondary {

  background: var(--app-grad-warm);

  border: 0;

  color: #fff;

  box-shadow: 0 8px 18px -8px rgba(212, 175, 87, 0.8);

}

.btn-secondary:hover,

.btn-secondary:focus,

.btn-secondary:active {

  background: var(--app-grad-warm);

  transform: translateY(-2px);

  color: #fff;

}



.btn-outline-primary {

  border: 1.5px solid var(--brand-primary);

  color: var(--brand-primary);

  background: transparent;

}

.btn-outline-primary:hover {

  background: var(--brand-primary);

  color: #fff;

  transform: translateY(-2px);

  box-shadow: 0 10px 20px -10px rgba(0, 84, 60, 0.7);

}



.btn-outline-secondary {

  border: 1.5px solid var(--brand-secondary);

  color: var(--brand-secondary-dark);

}

.btn-outline-secondary:hover {

  background: var(--brand-secondary);

  border-color: var(--brand-secondary);

  color: #fff;

  transform: translateY(-2px);

}



.btn-success,

.btn-danger,

.btn-warning,

.btn-info {

  border: 0;

}

.btn-success:hover,

.btn-danger:hover,

.btn-warning:hover,

.btn-info:hover {

  transform: translateY(-2px);

  filter: brightness(1.04);

  box-shadow: 0 10px 20px -10px rgba(0, 46, 34, 0.35);

}



.btn-light {

  background: #F2EFE6;

  border: 1px solid var(--brand-border);

  color: var(--brand-text);

}

.btn-light:hover {

  background: #E4E3D7;

  transform: translateY(-2px);

}



.btn-link {

  color: var(--brand-primary);

  font-weight: 500;

}

.btn-link:hover { color: var(--brand-primary-dark); }



.btn-block { width: 100%; }



/* Social share chips on dashboard */

.social-graph-wrapper {

  border-radius: 12px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.social-graph-wrapper:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 20px -10px rgba(0, 46, 34, 0.4);

}



/* --------------------------------------------------------------------------

   9. Forms — modern inputs + floating labels

   -------------------------------------------------------------------------- */

.form-control,

.form-select {

  border-radius: var(--app-radius-sm);

  border: 1.5px solid #CED4C6;

  padding: 0.55rem 0.9rem;

  font-size: 0.9rem;

  color: var(--brand-text);

  background-color: #fff;

  transition: all 0.2s ease;

}

.form-control:focus,

.form-select:focus {

  border-color: var(--brand-primary);

  box-shadow: 0 0 0 4px rgba(0, 84, 60, 0.12);

  color: var(--brand-text);

}

.form-control-lg { border-radius: 12px; }

.form-control::placeholder { color: #929D91; }

.form-control[readonly] { background: #FAF8F3; }

textarea.form-control { resize: vertical; }



label {

  color: var(--brand-text);

  font-weight: 500;

  font-size: 13px;

}



.form-check-input:checked {

  background-color: var(--brand-primary);

  border-color: var(--brand-primary);

}



.form-check-label { font-weight: 400; }



/* Floating label fields (used on auth pages) */

.floating-field { position: relative; margin-bottom: 1.1rem; }

.floating-field .form-control {

  height: 54px;

  padding: 1.25rem 0.95rem 0.4rem;

  border-radius: 12px;

}

.floating-field > label {

  position: absolute;

  top: 0.85rem;

  left: 0.95rem;

  margin: 0;

  font-size: 0.95rem;

  color: #929D91;

  pointer-events: none;

  transition: all 0.2s ease;

  background: transparent;

  padding: 0 4px;

}

.floating-field .form-control:focus + label,

.floating-field .form-control:not(:placeholder-shown) + label,

.floating-field.is-filled .form-control + label,

.floating-field.is-filled > label {

  top: -9px;

  left: 0.7rem;

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--brand-primary);

  background: #fff;

  border-radius: 4px;

}



/* --------------------------------------------------------------------------

   10. Tables & pagination

   -------------------------------------------------------------------------- */

.table-responsive {

  border-radius: var(--app-radius-sm);

}

.table {

  --bs-table-hover-bg: #EFF5EF;

  color: var(--brand-text);

  margin-bottom: 0;

}

.table thead th {

  background: #F2EFE6;

  color: #475569;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.6px;

  border-bottom: 1px solid var(--brand-border);

  white-space: nowrap;

  padding: 12px 14px;

}

.table tbody td {

  padding: 12px 14px;

  vertical-align: middle;

  border-color: #EEF2F7;

  font-size: 13.5px;

}

.table tbody tr {

  transition: background 0.18s ease;

}

.table tbody tr:hover {

  background: #EFF5EF;

}

.table.table-bordered {

  border: 1px solid var(--brand-border);

}

.table.table-bordered th,

.table.table-bordered td {

  border-color: var(--brand-border);

}

.table-striped tbody tr:nth-of-type(odd) {

  background: #FAF8F3;

}



/* Badges inside tables */

.table .badge {

  border-radius: 30px;

  padding: 5px 12px;

  font-weight: 600;

  font-size: 11px;

}

.badge-success { background: #D1FAE5; color: #047857; }

.badge-warning { background: #FEF3C7; color: #B45309; }

.badge-danger  { background: #FEE2E2; color: #B91C1C; }

.badge-primary { background: #DCEADE; color: #00543C; }



/* Pagination */

.pagination {

  gap: 6px;

  flex-wrap: wrap;

}

.pagination .page-item .page-link {

  border: 0;

  border-radius: 10px !important;

  min-width: 38px;

  height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--brand-text-muted);

  font-weight: 500;

  background: #F2EFE6;

  transition: all 0.2s ease;

}

.pagination .page-item .page-link:hover {

  background: var(--brand-primary-soft);

  color: var(--brand-primary);

}

.pagination .page-item.active .page-link {

  background: var(--app-grad-primary);

  color: #fff;

  box-shadow: 0 8px 16px -8px rgba(0, 84, 60, 0.8);

}

.pagination .page-item.disabled .page-link {

  background: #F2EFE6;

  color: #CED4C6;

}



.dataTables_info {

  color: var(--brand-text-muted);

  font-size: 13px;

}



/* Datatables controls */

.dataTables_wrapper .dataTables_filter input,

.dataTables_wrapper .dataTables_length select {

  border-radius: 10px;

  border: 1.5px solid #CED4C6;

  padding: 6px 12px;

}

.dataTables_wrapper .dataTables_filter input:focus,

.dataTables_wrapper .dataTables_length select:focus {

  border-color: var(--brand-primary);

  box-shadow: 0 0 0 4px rgba(0, 84, 60, 0.12);

}



/* --------------------------------------------------------------------------

   11. Modals

   -------------------------------------------------------------------------- */

.modal-content {

  border: 0;

  border-radius: var(--app-radius-lg);

  box-shadow: var(--app-shadow-lg);

  overflow: hidden;

}

.modal-header {

  border-bottom: 1px solid var(--brand-border);

  padding: 18px 24px;

}

.modal-header .modal-title {

  font-weight: 600;

  color: var(--brand-text);

}

.modal-header .btn-close:focus {

  box-shadow: 0 0 0 4px rgba(0, 84, 60, 0.12);

}

.modal-body { padding: 22px 24px; }

.modal-footer {

  border-top: 1px solid var(--brand-border);

  padding: 16px 24px;

}

.modal-backdrop.show {

  opacity: 0.45;

}



/* --------------------------------------------------------------------------

   12. Alerts & callouts

   -------------------------------------------------------------------------- */

.alert {

  border-radius: 12px;

  border: 0;

  box-shadow: var(--app-shadow-sm);

}

.alert-success { background: #ECFDF5; color: #065F46; }

.alert-danger  { background: #FEF2F2; color: #991B1B; }

.alert-warning { background: #FFFBEB; color: #92400E; }

.alert-info    { background: #ECFEFF; color: #155E75; }



/* --------------------------------------------------------------------------

   13. Auth pages — glassmorphism

   -------------------------------------------------------------------------- */

.login-account {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: 40px 16px;

  background:

    radial-gradient(680px 480px at 12% 8%, rgba(0, 84, 60, 0.16), transparent 60%),

    radial-gradient(720px 520px at 92% 90%, rgba(212, 175, 87, 0.18), transparent 60%),

    linear-gradient(160deg, #EFF5EF 0%, var(--brand-bg) 45%, #FAF3DF 100%);

}



.auth-theme-page {

  isolation: isolate;

  overflow: hidden;

}



body:has(.auth-theme-page) .alpha-mobile-actions,

body.auth-public-page .alpha-mobile-actions {

  display: none !important;

}



.auth-theme-page::before {

  position: absolute;

  z-index: -2;

  inset: 0;

  content: "";

  background: url("../../assetsuser/images/alpha-invest-cityscape.jpg") center / cover no-repeat;
  opacity: 0.16;

}



.auth-theme-page::after {

  position: absolute;

  z-index: -1;

  inset: 0;

  content: "";

  background: linear-gradient(135deg, rgba(7, 22, 51, 0.94), rgba(18, 48, 102, 0.78) 52%, rgba(201, 162, 39, 0.2));

}



.auth-theme-page .login-form {

  position: relative;

  z-index: 1;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(255, 255, 255, 0.9);

  box-shadow: 0 20px 60px rgba(7, 22, 51, 0.3);

}



.auth-theme-page .login-title {

  color: #123066;

}



.auth-theme-page .login-title::before,

.auth-theme-page .login-title::after {

  background: #d9e1ef;

}



.auth-theme-page .btn-primary,

.auth-theme-page .btn-outline-theme {

  background: #1e4fd8;

  border-color: #1e4fd8;

  color: #fff;

}



.auth-theme-page .btn-primary:hover,

.auth-theme-page .btn-outline-theme:hover {

  background: #123066;

  border-color: #123066;

  color: #fff;

}



.auth-theme-page .text-primary,

.auth-theme-page .btn-link {

  color: #1e4fd8 !important;

}



#signin-main.auth-theme-page {

  position: relative;

  min-height: 100vh;

  overflow: hidden;

  background: #0b1f4d;

}



#signin-main.auth-theme-page .signin-content {

  position: relative;

  z-index: 1;

}



#signin-main.auth-theme-page .left-content {

  background: rgba(255, 255, 255, 0.96);

  border-radius: 14px;

  box-shadow: 0 20px 60px rgba(7, 22, 51, 0.3);

}



#signin-main.auth-theme-page .right-content {

  background: linear-gradient(145deg, #123066, #0b1f4d);

}



@media (max-width: 767px) {

  .auth-theme-page::before {

    opacity: 0.1;

  }



  .auth-theme-page .login-form {

    padding: 26px 18px 22px;

    border-radius: 12px;

  }



  #signin-main.auth-theme-page .left-content {

    border-radius: 12px;

  }

}

.login-account .row { width: 100%; margin: 0; }

.login-account .login-form {

  width: 100%;

  max-width: 600px;

  margin: 0 auto;

  background: rgba(255, 255, 255, 0.78);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.9);

  border-radius: var(--app-radius-lg);

  box-shadow: var(--app-shadow-lg);

  padding: 40px 40px 34px;

}



/* Dholera public login treatment */

.auth-theme-page.login-account {

  min-height: 100svh;

  padding: 24px 16px;

  background: #123066 url("../../assetsuser/images/alpha-invest-cityscape.jpg") center / cover no-repeat;
}

.auth-theme-page.login-account::before {

  opacity: 0.24;

  background: #123066 url("../../assetsuser/images/alpha-invest-cityscape.jpg") center / cover no-repeat;
}

.auth-theme-page.login-account::after {

  background: linear-gradient(180deg, rgba(7, 32, 73, 0.2), rgba(7, 32, 73, 0.62));

}

.auth-theme-page .login-form {

  max-width: 440px;

  padding: 24px 26px 20px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.97);

  box-shadow: 0 14px 38px rgba(7, 22, 51, 0.36);

}

.auth-theme-page .login-head img {

  width: 154px !important;

  height: auto;

  max-height: 76px;

  object-fit: contain;

  border-radius: 0;

  box-shadow: none;

}

.auth-theme-page .login-head .title {

  margin-top: 6px;

  color: #164f9e;

  font-size: 18px;

}

.auth-theme-page .login-title {

  margin: 10px 0 16px;

  color: #164f9e;

  font-size: 14px;

  letter-spacing: 0.4px;

}

.auth-theme-page .login-title::before,

.auth-theme-page .login-title::after {

  background: transparent;

}

.auth-theme-page .floating-field {

  margin-bottom: 12px;

}

.auth-theme-page .floating-field .form-control {

  min-height: 40px;

  padding: 8px 12px;

  border: 1px solid #cbd5e1;

  border-radius: 4px;

  background: #fff;

  font-size: 13px;

}

.auth-theme-page .floating-field > label {

  left: 12px;

  font-size: 12px;

}

.auth-theme-page .floating-field .form-control:focus + label,

.auth-theme-page .floating-field .form-control:not(:placeholder-shown) + label,

.auth-theme-page .floating-field.is-filled > label {

  background: #fff;

  color: #164f9e;

}

.auth-theme-page .captcha-box {

  min-height: 40px;

  border: 1px solid #cbd5e1;

  border-radius: 4px;

  color: #123066;

}

.auth-theme-page .btn-primary {

  height: 40px;

  border-radius: 4px;

  background: #0756a6;

  border-color: #0756a6;

  font-size: 14px;

}

.auth-theme-page .btn-primary:hover {

  background: #123066;

  border-color: #123066;

}

.auth-theme-page .text-center.mb-0 {

  color: #26364d;

  font-size: 12px;

}

.auth-theme-page .text-center.mb-0 .btn-link {

  font-weight: 700;

}

.auth-theme-page.login-account.signup-theme-page {

  align-items: flex-start;

  padding-top: 30px;

  padding-bottom: 30px;

  background-image: url("../../assetsuser/images/alpha-invest-cityscape.jpg");
  background-position: center;

}

.auth-theme-page.login-account.signup-theme-page::before {

  background-image: url("../../assetsuser/images/alpha-invest-cityscape.jpg");
  background-position: center;

  opacity: 0.3;

}

.signup-theme-page .login-form {

  max-width: 680px;

  padding: 24px 30px 22px;

}

.signup-theme-page .login-title {

  margin-top: 4px;

  margin-bottom: 14px;

}

.signup-theme-page .auth-field-row {

  margin-left: -6px;

  margin-right: -6px;

}

.signup-theme-page .auth-field-row > [class*="col-"] {

  padding-left: 6px;

  padding-right: 6px;

}

.signup-theme-page .floating-field {

  margin-bottom: 10px;

}

.signup-theme-page .floating-field .form-control {

  min-height: 38px;

}

.signup-theme-page .custom-control {

  margin-top: 2px;

  margin-bottom: 12px !important;

}

.signup-theme-page .custom-control-label {

  color: #26364d;

}

.signup-theme-page .custom-control-label a {

  color: #0756a6;

  font-weight: 600;

}

.signup-theme-page > .row > [class*="col-"] {

  max-width: 100%;

}

.signup-theme-page .form-row {

  align-items: center;

}

.signup-theme-page .form-row .mb-4 {

  margin-bottom: 0.5rem !important;

}

.signup-theme-page .form-row .btn {

  width: auto;

  min-width: 110px;

  height: 38px;

  padding: 6px 18px;

}

@media (max-width: 575px) {

  .signup-theme-page {

    padding-top: 16px;

    padding-bottom: 16px;

  }

  .signup-theme-page .login-form {

    max-width: 440px;

    padding: 20px 16px 16px;

  }

  .signup-theme-page .auth-field-row {

    margin-left: 0;

    margin-right: 0;

  }

  .signup-theme-page .auth-field-row > [class*="col-"] {

    padding-left: 0;

    padding-right: 0;

  }

}

@media (max-width: 575px) {

  .auth-theme-page.login-account {

    padding: 16px 10px;

    background-position: 52% center;

  }

  .auth-theme-page .login-form {

    padding: 20px 16px 16px;

  }

}

@media (max-width: 575px) {

  .login-account { padding: 20px 12px; }

  .login-account .login-form { max-width: 440px; padding: 30px 22px 24px; }

  .login-account > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

}

@media (max-width: 991px) {

  .auth-field-row { display: block; }

  .auth-field-row > [class*="col-"] {

    width: 100%;

    max-width: 100%;

    padding-left: 0;

    padding-right: 0;

  }

}

.login-account .login-head img {

  border-radius: 14px;

  box-shadow: var(--app-shadow);

}

.login-account .login-head .title {

  font-size: 24px;

  font-weight: 700;

  color: var(--brand-text);

  margin-top: 14px;

}

.login-account .login-title {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin: 20px 0 22px;

  font-size: 13px;

  font-weight: 600;

  color: var(--brand-text-muted);

  text-transform: uppercase;

  letter-spacing: 1px;

}

.login-account .login-title::before,

.login-account .login-title::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--brand-border);

}

.login-account .login-title span {

  padding: 0 14px;

}

.login-account .btn {

  height: 48px;

  border-radius: 12px;

  font-size: 15px;

}



/* Password visibility toggle */

.login-account .password-field { position: relative; }

.login-account .password-field .form-control {

  padding-right: 3.2rem;

}

.login-account .password-toggle {

  position: absolute;

  top: 50%;

  right: 12px;

  transform: translateY(-50%);

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: none;

  border-radius: 9px;

  color: var(--brand-text-muted);

  font-size: 15px;

  cursor: pointer;

  transition: color 0.2s ease, background 0.2s ease;

  z-index: 3;

}

.login-account .password-toggle:hover {

  color: var(--brand-primary);

  background: rgba(0, 84, 60, 0.08);

}

.login-account .password-toggle .fa-eye-slash { color: var(--brand-primary); }



/* Social login buttons + divider */

.login-account .social-login {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 6px;

}

.login-account .social-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  height: 48px;

  border: 1.5px solid var(--brand-border);

  border-radius: 12px;

  background: #fff;

  color: var(--brand-text);

  font-family: var(--app-font);

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition: all 0.25s ease;

}

.login-account .social-btn svg { flex-shrink: 0; }

.login-account .social-btn:hover {

  border-color: var(--brand-primary);

  background: var(--brand-bg);

  transform: translateY(-2px);

  box-shadow: var(--app-shadow-sm);

  color: var(--brand-text);

}

.login-account .auth-divider {

  display: flex;

  align-items: center;

  text-align: center;

  margin: 16px 0 6px;

  color: var(--brand-text-muted);

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.login-account .auth-divider::before,

.login-account .auth-divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--brand-border);

}

.login-account .auth-divider span { padding: 0 14px; }

@media (max-width: 360px) {

  .login-account .social-login { grid-template-columns: 1fr; }

}



/* Captcha box on login */

.login-account .captcha-box {

  height: 54px;

  background: linear-gradient(135deg, #FEF3C7, #FDE68A);

  border: 1px dashed var(--brand-secondary);

  border-radius: 12px;

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 4px;

  color: #78350F;

  display: flex;

  align-items: center;

  justify-content: center;

  user-select: none;

}



/* Terms checkbox block on signup */

.login-account .custom-checkbox .custom-control-label {

  font-weight: 400;

  font-size: 13px;

}



/* --------------------------------------------------------------------------

   14. Dashboard ticker (replaces <marquee>)

   -------------------------------------------------------------------------- */

.dashboard-ticker {

  background: linear-gradient(90deg, rgba(0, 84, 60, 0.08), rgba(212, 175, 87, 0.10), rgba(0, 84, 60, 0.08));

  border: 1px solid rgba(0, 84, 60, 0.25);

  border-radius: 12px;

  padding: 11px 18px;

  overflow: hidden;

  white-space: nowrap;

  position: relative;

  margin-bottom: 22px;

}

.dashboard-ticker .ticker-track {

  display: inline-block;

  animation: ticker-scroll 28s linear infinite;

  font-weight: 600;

  color: var(--brand-text);

  font-size: 14px;

}

.dashboard-ticker .ticker-track::before {

  content: "★";

  color: var(--brand-secondary);

  margin-right: 14px;

}

@keyframes ticker-scroll {

  0%   { transform: translateX(100%); }

  100% { transform: translateX(-100%); }

}



/* --------------------------------------------------------------------------

   15. Profile summary card (dashboard)

   -------------------------------------------------------------------------- */

.content-body .card .overlay-box {

  background-size: cover !important;

  background-position: center !important;

  border-radius: var(--app-radius) var(--app-radius) 0 0;

}

.content-body .card .overlay-box img {

  border: 3px solid rgba(255, 255, 255, 0.85);

  box-shadow: var(--app-shadow);

}

.list-group-item {

  border-color: var(--brand-border);

  color: var(--brand-text);

  background: transparent;

}

.list-group-item strong { color: var(--brand-text-muted); font-weight: 500; }

.list-group-item span { font-weight: 600; }



/* Referral link box (dashboard profile card) */

.referral-box {

  background: #FAF8F3;

  border: 1px dashed #CED4C6;

  border-radius: 14px;

  padding: 16px 14px 18px;

}

.referral-box h4 { font-size: 15px; }

.referral-link {

  display: flex;

  align-items: center;

  gap: 8px;

  background: #fff;

  border: 1.5px solid var(--brand-border);

  border-radius: 10px;

  padding: 6px 6px 6px 12px;

}

.referral-link .referral-url {

  flex: 1;

  min-width: 0;

  font-size: 12px;

  color: var(--brand-text-muted);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.referral-link .btn {

  flex-shrink: 0;

  min-height: 34px;

  padding: 5px 12px;

  border-radius: 8px;

}



/* Social share buttons on profile card */

.social-graph-wrapper {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  padding: 10px;

  color: #fff !important;

  height: 44px;

}

.social-graph-wrapper .s-icon { line-height: 1; }

.widget-facebook { background: #1877F2 !important; }

.widget-twitter  { background: #1DA1F2 !important; }

.widget-googleplus { background: #25D366 !important; }





/* --------------------------------------------------------------------------

   16. Dark mode support

   -------------------------------------------------------------------------- */

[data-theme-version="dark"] {

  --brand-bg: #002E22;

  --brand-text: #E4E3D7;

  --brand-text-muted: #929D91;

  --brand-border: #193B2D;

}

[data-theme-version="dark"] body {

  background-color: #002E22;

  color: #E4E3D7;

}

[data-theme-version="dark"] .deznav {

  background: rgba(0, 46, 34, 0.92);

  border-right-color: #193B2D;

}

[data-theme-version="dark"] .header {

  background: rgba(0, 46, 34, 0.82);

  border-bottom-color: #193B2D;

}

[data-theme-version="dark"] .header.is-sticky { background: rgba(0, 46, 34, 0.96); }

[data-theme-version="dark"] .card,

[data-theme-version="dark"] .iq-card,

[data-theme-version="dark"] .card-header {

  background: #193B2D;

  border-color: #344C40;

  color: #E4E3D7;

}

[data-theme-version="dark"] .card-title,

[data-theme-version="dark"] .card h4,

[data-theme-version="dark"] .card h6,

[data-theme-version="dark"] .welcome-text h4 {

  color: #F2EFE6;

}

[data-theme-version="dark"] .table thead th { background: #002E22; color: #CED4C6; }

[data-theme-version="dark"] .table tbody td { border-color: #344C40; color: #CED4C6; }

[data-theme-version="dark"] .table tbody tr:hover { background: #002E22; }

[data-theme-version="dark"] .form-control,

[data-theme-version="dark"] .form-select {

  background: #002E22;

  border-color: #344C40;

  color: #E4E3D7;

}

[data-theme-version="dark"] .login-account .login-form {

  background: rgba(25, 59, 45, 0.8);

  border-color: rgba(52, 76, 64, 0.7);

}

[data-theme-version="dark"] .floating-field .form-control:focus + label,

[data-theme-version="dark"] .floating-field .form-control:not(:placeholder-shown) + label,

[data-theme-version="dark"] .floating-field.is-filled .form-control + label,

[data-theme-version="dark"] .floating-field.is-filled > label {

  background: #193B2D;

}

[data-theme-version="dark"] .pagination .page-item .page-link { background: #193B2D; color: #929D91; }

[data-theme-version="dark"] .header .header-profile > .nav-link { background: #193B2D; }

[data-theme-version="dark"] .header-search .form-control { background: #193B2D; }



/* --------------------------------------------------------------------------

   17. Responsive & mobile UX

   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {

  .header .header-profile .header-info { display: none; }

  .header .navbar-nav .nav-item.header-profile > .nav-link { padding: 4px; }

}



@media (max-width: 767px) {

  /* Touch friendly buttons */

  .btn { min-height: 44px; }

  .deznav { width: 15.5rem; }



  /* No horizontal scroll on mobile */

  .content-body,

  .container-fluid { overflow-x: hidden; }



  .card-body { padding: 16px 16px; }

  .card-title { font-size: 15px; }

  .page-titles .welcome-text h4 { font-size: 19px; }



  /* Stat cards breathe on small screens */

  .content-body .card .card-body .box-main { gap: 12px; }

  .content-body .card .card-body > a > span.mb-0 { font-size: 18px !important; }



  .table thead th { padding: 10px 10px; }

  .table tbody td { padding: 10px 10px; }



  .modal-dialog { margin: 0.75rem; }

  .modal-body { padding: 18px; }

}



@media (max-width: 575px) {

  .header .navbar-nav .nav-item.dz-fullscreen { display: none; }

  .login-account { padding: 24px 12px; }

}



/* Touch devices get a slightly larger hit target on sidebar links */

html.touch .deznav .metismenu > li > a { padding: 13px 14px; }



/* Print-friendly tables */

@media print {

  .header, .deznav, .nav-header, .scroll-top { display: none !important; }

  .content-body { padding: 0; }

  .card { box-shadow: none; border: 1px solid #CED4C6; }

}



/* FineGrow finishing accents; keep status badges semantically distinct. */

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {

  color: #002E22;

}

.content-body .star-img { background: var(--app-grad-primary) !important; }

.content-body a[data-bs-target="#Activate"] { color: var(--brand-primary) !important; }

.deznav { border-right-color: #D4AF57; }

.card-header { border-bottom-color: var(--brand-border); }



/* --------------------------------------------------------------------------

   15. User Panel modal system — premium navy/gold treatment

   -------------------------------------------------------------------------- */

:root {

  --modal-primary: #0B2D5B;

  --modal-primary-dark: #071F40;

  --modal-secondary: #D9A441;

  --modal-success: #16A34A;

  --modal-danger: #DC2626;

  --modal-surface: #FFFFFF;

  --modal-background: #F8FAFC;

  --modal-border: #E2E8F0;

  --modal-muted: #64748B;

  --modal-shadow: 0 24px 70px rgba(7, 31, 64, 0.24), 0 8px 24px rgba(15, 23, 42, 0.08);

}



.modal {

  background: rgba(7, 31, 64, 0.5);

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);

}



.modal.fade .modal-dialog {

  transform: translateY(-16px) scale(0.97);

  transition: transform 250ms ease, opacity 250ms ease;

  opacity: 0;

}



.modal.show .modal-dialog,

.modal.in .modal-dialog {

  transform: translateY(0) scale(1);

  opacity: 1;

}



.modal-dialog {

  width: calc(100% - 32px);

  max-width: 640px;

  margin: 2rem auto;

}



.modal-dialog.modal-lg {

  max-width: 900px;

}



.modal-dialog.modal-xl {

  max-width: 1140px;

}



.modal-content {

  background: var(--modal-surface);

  border: 1px solid rgba(226, 232, 240, 0.9);

  border-radius: 16px;

  box-shadow: var(--modal-shadow);

  overflow: hidden;

}



.modal-header {

  display: flex;

  align-items: center;

  gap: 16px;

  min-height: 68px;

  padding: 18px 24px;

  color: #fff;

  background: linear-gradient(135deg, var(--modal-primary) 0%, #174A87 100%);

  border-bottom: 0;

}



.modal-header .modal-title {

  flex: 1;

  margin: 0;

  color: #fff;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.1px;

}



.modal-header .close,

.modal-header .btn-close {

  float: none;

  width: 32px;

  height: 32px;

  margin: 0 0 0 auto;

  padding: 0;

  color: #fff;

  /* background: transparent; */

  border: 0;

  opacity: 0.86;

  filter: brightness(0) invert(1);

  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;

}



.modal-header .close:hover,

.modal-header .btn-close:hover {

  opacity: 1;

  transform: rotate(90deg);

  background-color: rgba(255, 255, 255, 0.12);

}



.modal-header .close:focus-visible,

.modal-header .btn-close:focus-visible {

  outline: 2px solid #fff;

  outline-offset: 2px;

  box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.35);

}



.modal-body {

  max-height: min(70vh, 680px);

  padding: 24px;

  overflow-y: auto;

  background: var(--modal-surface);

}



.modal-footer {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  padding: 16px 24px;

  background: #fff;

  border-top: 1px solid var(--modal-border);

}



/* Add Fund keeps the existing request form but presents it as a guided payment flow. */

.alpha-addfund-modal .modal-dialog {

  max-width: 760px;

}



.alpha-addfund-modal .modal-header {

  min-height: 82px;

  padding: 18px 26px;

}



.alpha-addfund-heading {

  display: flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

}



.alpha-addfund-heading p {

  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.76rem;

  font-weight: 400;

}



.alpha-addfund-icon,

.alpha-addfund-section-title > span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 40px;

  width: 40px;

  height: 40px;

  border-radius: 12px;

  color: #0B2D5B;

  background: #fff;

  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);

}



.alpha-addfund-body {

  padding: 24px 28px 30px;

}



.alpha-addfund-body > .col-xl-12 {

  padding: 0;

}



.alpha-addfund-body .card {

  margin: 0;

  border: 0;

  box-shadow: none;

}



.alpha-addfund-body .card-body {

  padding: 0;

}



.alpha-addfund-body .nav-tabs {

  gap: 8px;

  margin-bottom: 22px;

  border-bottom: 1px solid #e5eaf1;

}



.alpha-addfund-body .nav-tabs .nav-link {

  border: 0;

  border-bottom: 3px solid transparent;

  color: #64748b;

  font-weight: 700;

  padding: 10px 16px;

}



.alpha-addfund-body .nav-tabs .nav-link.active {

  color: #0B2D5B;

  border-bottom-color: #D9A441;

  background: transparent;

}



.alpha-addfund-section-title {

  display: flex;

  align-items: center;

  gap: 12px;

  margin: 0 0 12px;

  padding: 9px 12px;

  border: 1px solid #e5eaf1;

  border-radius: 12px;

  background: #f8fafc;

}



.alpha-addfund-section-title > span {

  flex-basis: 36px;

  width: 36px;

  height: 32px;

  color: #fff;

  background: #0B2D5B;

  box-shadow: none;

}



.alpha-addfund-section-title .modal-title {

  margin: 0;

  color: #0f2748;

  font-size: 0.9rem;

}



.alpha-addfund-section-title small {

  display: block;

  margin-top: 1px;

  color: #64748b;

  font-size: 0.68rem;

}



.alpha-addfund-body .field-wrap {

  margin-bottom: 16px;

}



.alpha-addfund-body .field-wrap > div {

  padding: 14px 16px;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  background: #fff;

}



.alpha-addfund-body .field-wrap strong,

.alpha-addfund-body .field-wrap > label {

  display: block;

  margin-bottom: 7px;

  color: #64748b;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.alpha-addfund-body .field-wrap > div > label {

  color: #0f2748;

  font-size: 0.94rem;

  font-weight: 700;

}



.alpha-addfund-body .field-wrap .fa-copy {

  color: #0B2D5B !important;

  cursor: pointer;

  transition: color 180ms ease, transform 180ms ease;

}



.alpha-addfund-body .field-wrap .fa-copy:hover {

  color: #D9A441 !important;

  transform: scale(1.12);

}



.alpha-addfund-body input.form-control,

.alpha-addfund-body textarea.form-control {

  min-height: 46px;

  border: 1px solid #dbe3ee;

  border-radius: 10px;

  background: #f8fafc;

}



.alpha-addfund-body input.form-control:focus,

.alpha-addfund-body textarea.form-control:focus {

  border-color: #2563eb;

  background: #fff;

  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);

}



.alpha-addfund-body .btn-primary {

  min-width: 140px;

  border: 0;

  border-radius: 10px;

  background: linear-gradient(135deg, #0B2D5B, #174A87);

  box-shadow: 0 8px 16px rgba(11, 45, 91, 0.2);

  font-weight: 700;

}



.alpha-addfund-body .btn-primary:hover {

  transform: translateY(-1px);

  box-shadow: 0 11px 20px rgba(11, 45, 91, 0.28);

}



@media (max-width: 575.98px) {

  .alpha-addfund-modal .modal-dialog {

    width: 100%;

    margin: auto;

  }



  .alpha-addfund-modal .modal-content {

    min-height: 100vh;

    border-radius: 0;

  }



  .alpha-addfund-body {

    padding: 18px 16px 24px;

  }



  .alpha-addfund-heading p {

    display: none;

  }

}



.modal .form-group,

.modal .mb-3,

.modal .form-row {

  margin-bottom: 18px;

}



.modal label,

.modal .form-label,

.modal .control-label {

  display: block;

  margin-bottom: 7px;

  color: var(--modal-primary);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.02em;

}



.modal .form-control,

.modal .form-select,

.modal select,

.modal textarea,

.modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {

  min-height: 46px;

  border: 1px solid #CBD5E1;

  border-radius: 10px;

  background: #fff;

  color: #1E293B;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);

  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;

}



.modal textarea,

.modal textarea.form-control {

  min-height: 110px;

  resize: vertical;

  line-height: 1.55;

}



.modal .form-control:focus,

.modal .form-select:focus,

.modal select:focus,

.modal textarea:focus,

.modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {

  border-color: var(--modal-primary);

  background: #fff;

  outline: 0;

  box-shadow: 0 0 0 4px rgba(11, 45, 91, 0.12), 0 4px 12px rgba(11, 45, 91, 0.08);

}



.modal .form-control::placeholder,

.modal textarea::placeholder {

  color: #94A3B8;

}



.modal .form-control.is-invalid,

.modal .form-control:invalid:focus,

.modal .form-select.is-invalid {

  border-color: var(--modal-danger);

  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);

}



.modal .form-control.is-valid,

.modal .form-select.is-valid {

  border-color: var(--modal-success);

}



.modal .btn {

  min-height: 42px;

  border-radius: 10px;

  padding: 10px 18px;

  font-weight: 700;

  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;

}



.modal .btn:hover,

.modal .btn:focus-visible {

  transform: translateY(-2px);

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);

}



.modal .btn-primary {

  color: #fff;

  background: linear-gradient(135deg, var(--modal-primary) 0%, #174A87 100%);

  border-color: transparent;

}



.modal .btn-secondary,

.modal .btn-light,

.modal .btn-default {

  color: #334155;

  background: #F1F5F9;

  border: 1px solid #E2E8F0;

}



.modal .btn-success {

  color: #fff;

  background: var(--modal-success);

  border-color: var(--modal-success);

}



.modal .btn-danger {

  color: #fff;

  background: var(--modal-danger);

  border-color: var(--modal-danger);

}



.modal .table-responsive {

  max-width: 100%;

  overflow-x: auto;

  border: 1px solid var(--modal-border);

  border-radius: 12px;

  background: #fff;

}



.modal .table {

  margin-bottom: 0;

  color: #334155;

}



.modal .table thead th {

  padding: 13px 14px;

  color: #fff;

  background: var(--modal-primary);

  border: 0;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  white-space: nowrap;

}



.modal .table tbody td {

  padding: 12px 14px;

  border-color: #E8EEF5;

}



.modal .table tbody tr:nth-child(even) {

  background: #F8FAFC;

}



.modal .table tbody tr:hover {

  background: #EFF6FF;

}



.modal input[type="file"] {

  min-height: 96px;

  padding: 30px 18px;

  border: 1.5px dashed #94A3B8;

  background: #F8FAFC;

  text-align: center;

  cursor: pointer;

}



.modal input[type="file"]:hover,

.modal input[type="file"]:focus {

  border-color: var(--modal-primary);

  background: #EFF6FF;

}



.modal .card,

.modal .payment-summary,

.modal .receipt-card {

  border: 1px solid var(--modal-border);

  border-radius: 12px;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);

}



.alpha-activation-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.alpha-activation-actions .alpha-btn-receipt {

  margin: 0;

  border: 0;

  cursor: pointer;

  font-family: inherit;

}



.alpha-activation-actions .alpha-btn-receipt--print {

  background: #E2E8F0;

  color: #0B2D5B;

}



/* Legacy transaction popups use these classes instead of Bootstrap markup. */

.showpopup,

.showpopupChSp {

  max-width: min(92vw, 720px);

  padding: 18px 20px;

  color: #334155;

  background: #fff;

  border: 1px solid var(--modal-border);

  border-radius: 16px;

  box-shadow: var(--modal-shadow);

}



.showpopup th,

.showpopupChSp th {

  padding: 12px 14px;

  color: #fff;

  background: var(--modal-primary);

  font-weight: 700;

}



.showpopup td,

.showpopupChSp td {

  padding: 10px 14px;

  border-bottom: 1px solid #E8EEF5;

}



@media (max-width: 767px) {

  .modal-dialog {

    width: calc(100% - 20px);

    margin: 1rem auto;

  }



  .modal-body {

    max-height: calc(100vh - 150px);

    padding: 20px 16px;

  }



  .modal-header,

  .modal-footer {

    padding-left: 16px;

    padding-right: 16px;

  }

}



@media (max-width: 575px) {

  .modal {

    align-items: flex-end;

  }



  .modal-dialog,

  .modal-dialog.modal-lg,

  .modal-dialog.modal-xl {

    width: 100%;

    max-width: none;

    margin: auto 0 0;

  }



  .modal-content {

    border-radius: 16px 16px 0 0;

  }



  .modal.fade .modal-dialog {

    transform: translateY(24px);

  }



  .modal.show .modal-dialog,

  .modal.in .modal-dialog {

    transform: translateY(0);

  }

}



@media (prefers-reduced-motion: reduce) {

  .modal.fade .modal-dialog,

  .modal-header .close,

  .modal-header .btn-close,

  .modal .btn {

    transition: none;

  }

}



/* User panel responsive tightening */

.content-body {

  font-size: 14px;

}

.content-body .card h6,

.content-body .list-group-item,

.content-body .table,

.content-body .modal {

  font-size: 13px;

}

.content-body .card .card-body > a > span.mb-0,

.content-body .card .card-body span.mb-0 {

  font-size: 14px !important;

  line-height: 1.25;

  overflow-wrap: anywhere;

}

.content-body .card-title,

.content-body .modal-title {

  font-size: 16px;

  line-height: 1.3;

}

.content-body .table th,

.content-body .table td {

  vertical-align: middle;

  white-space: nowrap;

}

.content-body .modal .table-responsive {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}

.content-body #exampleModalEMI .table,

.content-body #exampleModal31 .table {

  min-width: 680px;

}

.content-body #Activate .modal-dialog,

.content-body #exampleModal2 .modal-dialog,

.content-body #A2ATransfer .modal-dialog {

  max-width: 520px;

}



@media (max-width: 767px) {

  .content-body {

    font-size: 13px;

  }

  .content-body .container-fluid {

    padding-left: 10px;

    padding-right: 10px;

  }

  .content-body .card-body {

    padding: 14px 12px;

  }

  .content-body .card .card-body > a > span.mb-0,

  .content-body .card .card-body span.mb-0 {

    font-size: 13px !important;

  }

  .content-body .card h6 {

    font-size: 12px;

    line-height: 1.3;

  }

  .content-body .modal-dialog,

  .content-body #Activate .modal-dialog,

  .content-body #exampleModal2 .modal-dialog,

  .content-body #A2ATransfer .modal-dialog {

    width: calc(100% - 16px);

    max-width: none;

    margin: 8px auto;

  }

  .content-body .modal-body {

    padding: 12px;

    max-height: calc(100vh - 120px);

    overflow-y: auto;

  }

  .content-body .modal-title {

    font-size: 15px;

  }

  .content-body .table th,

  .content-body .table td {

    padding: 8px;

    font-size: 12px;

  }

  .content-body .btn {

    min-height: 36px;

    padding: 7px 10px;

    font-size: 12px;

  }

  .content-body .referral-link {

    padding-left: 8px;

  }

  .content-body .referral-link .referral-url {

    font-size: 11px;

  }

}