/* ============================================ */
/* NEOMAAA CONSOLIDATED STYLES */
/* ============================================ */

/* Google Fonts - Add these as link tags in your HTML:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700&family=Outfit:wght@700&display=swap" rel="stylesheet">
*/

/* ============================================ */
/* BASE STYLES */
/* ============================================ */
* {
  font-family: 'Poppins', sans-serif !important;
  box-sizing: border-box !important;
}

/* REMOVED FLICKERING CAUSE - No longer hiding content by default */
.page-container .page-content {
  opacity: 1 !important;
  transition: none !important;
}

.page-container .page-content .page-content-wrap {
  margin-left: 15px;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  text-rendering: optimizeLegibility !important;
}

body {
  background: #f5f5f7 !important;
  color: #0a0a0a !important;
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reserve topbar space to prevent flickering - only on pages that will have a topbar */
body.neo-has-topbar::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  z-index: 9997 !important;
  pointer-events: none !important;
}

/* Hide the placeholder once real topbar loads - more compatible approach */
body.neo-topbar-loaded::before {
  display: none !important;
}

.main-header,
.x-navigation-horizontal,
.mobile-header,
.mobile-welcome-row {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================ */
/* SIDEBAR STYLES */
/* ============================================ */
#leftSideMenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 260px !important;
  height: 100vh !important;
  background: #fff !important;
  border-right: 1px solid #e5e7eb !important;
  z-index: 9999 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.neo-sidebar {
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.neo-item,
.neo-single-item,
.neo-section-title {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#leftSideMenu .page-sidebar {
  display: none !important;
}

.neo-logo {
  padding: 20px 24px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.neo-logo a {
  display: block !important;
  text-decoration: none !important;
}

.neo-logo img {
  max-width: 180px !important;
  height: auto !important;
  display: block !important;
}

.neo-nav {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 0 !important;
}

.neo-nav::-webkit-scrollbar {
  width: 6px !important;
}

.neo-nav::-webkit-scrollbar-track {
  background: transparent !important;
}

.neo-nav::-webkit-scrollbar-thumb {
  background: #e0e0e0 !important;
  border-radius: 3px !important;
}

.neo-nav::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0 !important;
}

.neo-section {
  margin-bottom: 4px !important;
}

.neo-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s !important;
}

.neo-section-title:hover {
  background: #f9fafb !important;
}

.neo-section-title .material-icons-outlined {
  font-size: 18px !important;
  transition: transform 0.2s !important;
}

.neo-section.open .neo-section-title .material-icons-outlined {
  transform: rotate(90deg) !important;
}

.neo-section-items {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
}

.neo-section.open .neo-section-items {
  max-height: 500px !important;
}

.neo-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 24px 10px 40px !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  border-left: 3px solid transparent !important;
}

.neo-item:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.neo-item.active {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-left-color: #dc2626 !important;
}

.neo-item .material-icons-outlined {
  font-size: 20px !important;
  color: inherit !important;
}

.neo-single-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 24px !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  border-left: 3px solid transparent !important;
}

.neo-single-item:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.neo-single-item .material-icons-outlined {
  font-size: 20px !important;
  color: inherit !important;
}

/* ============================================ */
/* TOPBAR STYLES */
/* ============================================ */
.neo-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 24px !important;
  gap: 16px !important;
  z-index: 9998 !important;
  margin: 0 !important;
}

.neo-burger {
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 8px !important;
  margin-right: auto !important;
}

.neo-burger span {
  width: 24px !important;
  height: 2px !important;
  background: #374151 !important;
  border-radius: 2px !important;
  transition: all 0.3s !important;
}

.neo-burger.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px) !important;
}

.neo-burger.is-active span:nth-child(2) {
  opacity: 0 !important;
}

.neo-burger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px) !important;
}

.neo-lang,
.neo-info {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

.neo-lang:hover,
.neo-info:hover {
  background: #f9fafb !important;
}

.neo-lang .material-icons-outlined,
.neo-info .material-icons-outlined {
  font-size: 20px !important;
}

.neo-lang-dropdown,
.neo-info-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
  min-width: 220px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: all 0.2s !important;
  z-index: 10000 !important;
}

.neo-lang-dropdown.open,
.neo-info-dropdown.open {
  max-height: 400px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.neo-lang-dropdown a,
.neo-info-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  color: #374151 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}

.neo-lang-dropdown a:hover,
.neo-info-dropdown a:hover {
  background: #f9fafb !important;
}

.neo-lang-dropdown a:first-child {
  border-radius: 12px 12px 0 0 !important;
}

.neo-lang-dropdown a:last-child {
  border-radius: 0 0 12px 12px !important;
}

.neo-lang-dropdown span.flag {
  display: inline-block !important;
  width: 24px !important;
  height: 18px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

.neo-info-dropdown .material-icons-outlined {
  font-size: 18px !important;
  color: #6b7280 !important;
}

.neo-btn-deposit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.neo-btn-deposit:hover {
  background: #1a1a1a !important;
}

.neo-btn-deposit .material-icons-outlined {
  font-size: 18px !important;
}

/* ============================================ */
/* PAGE CONTENT LAYOUT */
/* ============================================ */
.page-container {
  padding-top: 64px !important;
  min-height: 100vh !important;
}

.page-content {
  padding: 24px !important;
}

/* ============================================ */
/* MOBILE RESPONSIVE */
/* ============================================ */
@media (max-width: 768px) {
  #leftSideMenu {
    transform: translateX(-100%) !important;
    transition: transform 0.3s !important;
  }

  #leftSideMenu.mobile-open {
    transform: translateX(0) !important;
  }

  .neo-burger {
    display: flex !important;
  }


  .neo-topbar {
    padding: 0 16px !important;
  }
}

/* ============================================ */
/* ICONS FIX - MUST BE FIRST */
/* ============================================ */
.fa, .fas, .far, .fab, .fal,
i[class*="fa-"],
span[class*="fa-"],
.fa.fa-legal,
.fa.fa-files-o,
.fa.fa-user {
  font-family: FontAwesome !important;
  speak: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.glyphicon {
  font-family: 'Glyphicons Halflings' !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
}

/* Specific icon content */
.fa-legal:before {
  content: "\f0e3" !important;
  font-family: FontAwesome !important;
}

.fa-files-o:before {
  content: "\f0c5" !important;
  font-family: FontAwesome !important;
}

.fa-user:before {
  content: "\f007" !important;
  font-family: FontAwesome !important;
}

/* Icon colors */
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }

/* ============================================ */
/* DASHBOARD: WIDGETS */
/* ============================================ */

/* Trading Platform Widget - Light */
#platformWidget,
.metatrader-color,
#platformWidget.tile {
  background: #f8fafc !important;
  border: 1px solid #e2e4e9 !important;
}

#platformWidget,
#platformWidget *,
.metatrader-color,
.metatrader-color * {
  color: #1a1d27 !important;
}

#platformWidget h3,
#platformWidget .tile-title,
.metatrader-color h3 {
  color: #0d0f16 !important;
  font-weight: 600 !important;
}

/* Balance Widget - Dark */
.widget.balance-color,
.balance-color.tile {
  background: #0d0f16 !important;
}

.widget.balance-color,
.widget.balance-color * {
  color: #fff !important;
}

/* Deposit Button - White on Dark */
.balance-color .btn-deposit,
.balance-color .btn,
.widget.balance-color a.btn,
.widget-danger.balance-color .btn-deposit {
  background: #ffffff !important;
  color: #0d0f16 !important;
  border: 2px solid #ffffff !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.balance-color .btn-deposit:hover,
.balance-color .btn:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  border-color: #f0f0f0 !important;
}

/* ============================================ */
/* REGISTRATION & LOGIN PAGES */
/* ============================================ */

/* Buttons Alignment */
.neo-btn-deposit,.btn-deposit,.btn-danger.btn-rounded,.btn.btn-primary.btn-lg,.btn.btn-sm,.btn.btn-lg{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important
}
.message-box .mb-footer .pull-right{
  display:flex!important;
  flex-direction:row!important;
  gap:10px!important
}
.message-box .btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important
}

/* Registration & Login Pages Base */
#Register,#Login,#Register-Demo-Account,#Password-Reminder{
  background:#fff!important;
  font-family:'DM Sans',sans-serif!important;
  margin:0!important;
  padding:0!important;
  min-height:100vh;
  display:flex!important;
  flex-direction:column!important
}

#Register>.loader,#Login>.loader,#Register-Demo-Account>.loader,#Password-Reminder>.loader{
  display:none!important
}

#Register .x-navigation.x-navigation-horizontal,
#Login .x-navigation.x-navigation-horizontal,
#Register-Demo-Account .x-navigation.x-navigation-horizontal,
#Password-Reminder .x-navigation.x-navigation-horizontal{
  display:block!important;
  visibility:visible!important;
  height:auto!important;
  overflow:visible!important;
  width:100%!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  z-index:1000!important
}

#Register>div:nth-child(2)>hr,
#Login>div:nth-child(2)>hr,
#Register-Demo-Account>div:nth-child(2)>hr,
#Password-Reminder>div:nth-child(2)>hr{
  display:none!important
}

#Register>div:nth-child(2),
#Login>div:nth-child(2),
#Register-Demo-Account>div:nth-child(2),
#Password-Reminder>div:nth-child(2){
  background:#fff!important;
  background-image:none!important;
  flex:1!important;
  display:flex!important;
  min-height:100vh;
  padding-top:50px!important
}

#Register img,#Login img,#Register-Demo-Account img,#Password-Reminder img{
  max-width:200px!important
}

#Register .registration-container,
#Login .login-container,
#Register-Demo-Account .registration-container,
#Password-Reminder .login-container{
  flex:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:48px 24px!important;
  background:#fff!important
}

#Register .registration-box,#Register-Demo-Account .registration-box{
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  background:0 0!important
}

#Register .registration-body,
#Login .login-body,
#Register-Demo-Account .registration-body,
#Password-Reminder .login-body{
  background:#fff!important;
  border:1px solid #e2e4e9!important;
  border-radius:20px!important;
  padding:36px 40px!important;
  box-shadow:0 8px 40px rgba(0,0,0,.06)!important;
  color:#1a1d27!important
}

#Register .form-group,
#Login .form-group,
#Register-Demo-Account .form-group,
#Password-Reminder .form-group{
  margin-bottom:16px!important
}

#Register .col-md-12,#Register-Demo-Account .col-md-12{
  padding:0!important;
  width:100%!important;
  float:none!important;
  display:block!important;
  position:relative!important
}

/* Name Row Layout */
#Register .name-row,
#Register-Demo-Account .name-row{
  display:flex!important;
  gap:14px!important;
  margin-bottom:16px!important
}

#Register .name-row .form-group,
#Register-Demo-Account .name-row .form-group{
  flex:1!important;
  min-width:0!important;
  margin-bottom:0!important
}

#Register .phone-row,
#Register-Demo-Account .phone-row{
  display:flex!important;
  column-gap:2px!important;
  row-gap:0px!important;
  margin-bottom:16px!important
}

#Register .phone-row .form-group,
#Register-Demo-Account .phone-row .form-group{
  margin-bottom:0!important
}

#Register .phone-row .form-group:first-child,
#Register-Demo-Account .phone-row .form-group:first-child{
  flex:0 0 140px!important;
  min-width:120px!important
}

#Register .phone-row .form-group:last-child,
#Register-Demo-Account .phone-row .form-group:last-child{
  flex:1!important;
  min-width:0!important
}

/* Form Controls */
#Register .registration-body .form-control,
#Login .form-control,
#Register-Demo-Account .form-control,
#Password-Reminder .form-control{
  height:48px!important;
  padding:0 16px!important;
  font-size:14px!important;
  color:#1a1d27!important;
  background:#fff!important;
  border:1.5px solid #e2e4e9!important;
  border-radius:12px!important;
  outline:none!important;
  box-shadow:none!important;
  width:100%!important;
  position:relative!important;
  z-index:10!important
}

#Register .registration-body .form-control:focus,
#Login .form-control:focus,
#Register-Demo-Account .form-control:focus,
#Password-Reminder .form-control:focus{
  border-color:#c8102e!important;
  box-shadow:0 0 0 3px rgba(200,16,46,.08)!important
}

#Register .cp-tooltip-wrapper,
#Login .cp-tooltip-wrapper,
#Register-Demo-Account .cp-tooltip-wrapper,
#Password-Reminder .cp-tooltip-wrapper{
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:20!important
}

#Register .x-navigation.disclaimer-color,
#Login .x-navigation.disclaimer-color,
#Register-Demo-Account .x-navigation.disclaimer-color,
#Password-Reminder .x-navigation.disclaimer-color,
#Register .x-navigation.footer-color,
#Login .x-navigation.footer-color,
#Register-Demo-Account .x-navigation.footer-color,
#Password-Reminder .x-navigation.footer-color{
  background:#0d0f16!important;
  border:none!important;
  padding:16px 32px!important;
  font-size:12px!important;
  color:rgba(255,255,255,.4)!important
}

#Register .registration-title,#Register-Demo-Account .registration-title{
  font-family:Outfit,sans-serif!important;
  font-size:28px!important;
  font-weight:700!important;
  color:#0d0f16!important;
  margin-bottom:6px!important
}

#Register .registration-subtitle,#Register-Demo-Account .registration-subtitle{
  font-size:14px!important;
  color:#7c8393!important;
  margin-bottom:28px!important
}

#Register input[type="checkbox"],#Register-Demo-Account input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  accent-color:#c8102e!important;
  position:relative!important;
  z-index:10!important
}

#Register .show-password-register,
#Login .show-password-register,
#Register-Demo-Account .show-password-register,
#Password-Reminder .show-password-register{
  cursor:pointer!important;
  color:#a0a6b4!important;
  font-size:16px!important;
  padding:4px!important
}

#Register .page-content,
#Login .page-content,
#Register-Demo-Account .page-content,
#Password-Reminder .page-content{
  opacity:1!important
}

#Register *,#Login *,#Register-Demo-Account *,#Password-Reminder *{
  font-family:'DM Sans',sans-serif!important;
  color:#1a1d27!important
}

#Register .x-navigation.disclaimer-color *,
#Login .x-navigation.disclaimer-color *,
#Register-Demo-Account .x-navigation.disclaimer-color *,
#Password-Reminder .x-navigation.disclaimer-color *,
#Register .x-navigation.footer-color *,
#Login .x-navigation.footer-color *,
#Register-Demo-Account .x-navigation.footer-color *,
#Password-Reminder .x-navigation.footer-color *{
  color:rgba(255,255,255,.4)!important
}

#Register .btn-register,#Login .btn-login,#Register-Demo-Account .btn-register,#Password-Reminder .btn-login{
  color:#fff!important
}

#Register .registration-subtitle,
#Register-Demo-Account .registration-subtitle,
#Register .form-group:last-child h4,
#Login .btn-link,
#Register-Demo-Account .btn-link,
#Register .registration-body a[href*="login"],
#Password-Reminder .btn-link{
  color:#7c8393!important
}

#Register .col-md-12 h4 a,#Register-Demo-Account .col-md-12 h4 a{
  color:#c8102e!important
}

#Register .registration-title,#Register-Demo-Account .registration-title{
  color:#0d0f16!important
}

/* Wizard Customization */
#Register #step-1,#Register #step-2{
  display:block!important;
  visibility:visible!important;
  height:auto!important
}

#Register .wizard>ul{
  display:none!important
}

#Register .stepContainer{
  height:auto!important;
  overflow:visible!important
}

#Register .actionBar{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important
}

#Register .actionBar .btn-primary,
#Register .actionBar .pull-left,
#Register .actionBar .pull-right{
  display:none!important
}

#Register #step-1>h4:first-of-type,
#Register #step-2>h4:first-of-type,
#Register #step-2>h4:nth-of-type(2){
  display:none!important
}

#Register #step-2{
  margin-top:30px!important
}

#Register .form-group:last-child .col-md-12{
  display:flex!important;
  align-items:center!important
}

#Register .col-md-12 input[type="checkbox"]{
  width:auto!important;
  margin-right:10px!important;
  flex-shrink:0!important
}

#Register .col-md-12 h4{
  margin:0!important
}

#Register .col-md-12 h4 a::after{
  content:", Client Agreement, Privacy Policy"
}

#Register .col-md-12 h4 a{
  color:#c8102e!important;
  text-decoration:none!important
}

#Register .form-group:last-child h4{
  font-size:13px!important;
  color:#5c6272!important
}

#Register .wizard{
  background:0 0!important;
  border:none!important;
  box-shadow:none!important;
  margin:0!important;
  padding:0!important
}

#Register .stepContainer,#Register .stepContainer .content{
  padding:0!important;
  margin:0!important;
  background:0 0!important;
  border:none!important
}

#Register .actionBar .btn-register,#Register button.btn.btn-register{
  display:block!important;
  width:100%!important;
  height:52px!important;
  background:#c8102e!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  font-size:15px!important;
  font-weight:600!important;
  cursor:pointer!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:10!important
}

#Register .actionBar .col-md-6{
  flex:1!important;
  width:100%!important;
  float:none!important;
  padding:0!important
}

#Register .actionBar>.loader,#Register .actionBar .buttonFinish{
  display:none!important
}

/* Login Link Fix */
#Register .registration-body a[href*="login"],
#Register .btn-link.btn-block,
#Register a.btn-link[href*="login"]{
  display:block!important;
  text-align:center!important;
  margin-top:16px!important;
  font-size:14px!important;
  color:#7c8393!important;
  text-decoration:none!important;
  background:0 0!important;
  border:none!important;
  position:relative!important;
  z-index:1!important;
  pointer-events:auto!important;
  width:100%!important;
  padding:8px 0!important;
  top: 30px;
}

/* Login Page */
#Login .login-box,#Password-Reminder .login-box{
  width:100%!important;
  max-width:460px!important;
  margin:0 auto!important;
  background:0 0!important
}

#Login .form-group .col-md-12,#Password-Reminder .form-group .col-md-12{
  padding:0!important;
  width:100%!important;
  float:none!important;
  display:block!important;
  position:relative!important
}

#Login .btn-link,#Password-Reminder .btn-link{
  display:block!important;
  text-align:center!important;
  color:#7c8393!important;
  font-size:13px!important;
  text-decoration:none!important;
  padding:8px!important;
  background:0 0!important;
  border:none!important
}

#Login .btn-link:hover,#Password-Reminder .btn-link:hover{
  color:#c8102e!important
}

#Login .btn-login,#Password-Reminder .btn-login{
  display:block!important;
  width:100%!important;
  height:52px!important;
  background:#c8102e!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  font-size:15px!important;
  font-weight:600!important;
  cursor:pointer!important;
  margin:0!important
}

#Login .btn-login:hover,#Password-Reminder .btn-login:hover{
  background:#a30d25!important
}

#Login .login-body>.col-md-12:first-of-type,
#Password-Reminder .login-body>.col-md-12:first-of-type{
  padding:0!important
}

#Login .login-body>.col-md-12:first-of-type .login-title,
#Password-Reminder .login-body>.col-md-12:first-of-type .login-title{
  font-size:14px!important;
  font-weight:400!important;
  color:#7c8393!important;
  margin-top:20px!important;
  margin-bottom:12px!important;
  text-align:center!important
}

#Login .login-body>.col-md-12:last-child,
#Password-Reminder .login-body>.col-md-12:last-child{
  display:flex!important;
  gap:12px!important;
  padding:0!important
}

#Login .login-body>.col-md-12:last-child .col-md-6,
#Password-Reminder .login-body>.col-md-12:last-child .col-md-6{
  flex:1!important;
  width:50%!important;
  float:none!important;
  padding:0!important
}

#Login .btn-live,#Login .btn-demo,#Password-Reminder .btn-live,#Password-Reminder .btn-demo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:44px!important;
  padding:8px 12px!important;
  border:1.5px solid #e2e4e9!important;
  border-radius:12px!important;
  background:0 0!important;
  color:#1a1d27!important;
  font-size:13px!important;
  font-weight:500!important;
  text-align:center!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-sizing:border-box!important
}

#Login .btn-live:hover,#Login .btn-demo:hover,
#Password-Reminder .btn-live:hover,#Password-Reminder .btn-demo:hover{
  border-color:#c8102e!important;
  color:#c8102e!important
}

/* Demo Registration */
#Register-Demo-Account form>h4{
  display:none!important
}

#Register-Demo-Account .btn-register{
  display:block!important;
  width:100%!important;
  height:52px!important;
  background:#c8102e!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  font-size:15px!important;
  font-weight:600!important;
  cursor:pointer!important;
  margin:0!important
}

#Register-Demo-Account .btn-link{
  display:block!important;
  text-align:center!important;
  color:#7c8393!important;
  font-size:13px!important;
  text-decoration:none!important;
  padding:8px!important;
  background:0 0!important;
  border:none!important
}

#Register-Demo-Account .btn-link:hover{
  color:#c8102e!important
}

#Register-Demo-Account .col-md-12 input[type="checkbox"]{
  width:auto!important;
  margin-right:10px!important;
  flex-shrink:0!important
}

#Register-Demo-Account .col-md-12 h4{
  margin:0!important;
  font-size:13px!important;
  color:#5c6272!important
}

#Register-Demo-Account .col-md-12 h4 a{
  color:#c8102e!important;
  text-decoration:none!important
}

#messages div.alert.alert-danger.alert-dismissable {
  background-color: #ffffff !important;
  border-color: #c8102e !important;
  border-radius: 12px !important;
}

/* Mobile Responsiveness */
@media(max-width:1025px){
  #Register>div:nth-child(2),
  #Login>div:nth-child(2),
  #Register-Demo-Account>div:nth-child(2),
  #Password-Reminder>div:nth-child(2){
    display:block!important
  }

  #Register .registration-body,
  #Login .login-body,
  #Register-Demo-Account .registration-body,
  #Password-Reminder .login-body{
    padding:24px 20px!important;
    border-radius:16px!important;
    border:none!important;
    box-shadow:none!important
  }

  #Register .registration-container,
  #Login .login-container,
  #Register-Demo-Account .registration-container,
  #Password-Reminder .login-container{
    padding:24px 16px!important
  }

  #Register .name-row,
  #Register-Demo-Account .name-row{
    flex-direction:column!important;
    gap:16px!important
  }

  #Register .phone-row,
  #Register-Demo-Account .phone-row{
    flex-direction:column!important;
    gap:16px!important
  }

  #Register .phone-row .form-group:first-child,
  #Register-Demo-Account .phone-row .form-group:first-child{
    flex:1!important
  }
}



/*-----------------from register.js -----------------*/
.registration-body {
  max-width: 520px;
  margin: 20px auto 20px !important;
  padding: 32px 40px 40px !important;
  background: #fafbfc !important;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
body:has(.registration-body) {
  background-color: #eef5f4 !important;
}
.registration-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  margin-bottom: 6px !important;
}
.registration-subtitle {
  font-size: 0.9375rem !important;
  color: #718096 !important;
  margin-bottom: 24px !important;
}
.registration-body .form-horizontal.register {
  display: block !important;
}
.registration-body .form-group {
  margin-bottom: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.registration-body .form-group .col-md-12 {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}
.registration-body .name-row {
  display: flex !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
.registration-body .name-row .form-group {
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}
.registration-body .name-row .form-group .col-md-12 {
  display: flex !important;
  flex-wrap: wrap !important;
}
.registration-body .name-row .form-group .col-md-12 input {
  width: 100% !important;
}
.registration-body .name-row .form-group .col-md-12 label.error {
  flex-basis: 100% !important;
}
.registration-body .phone-row {
  margin-bottom: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.registration-body .phone-row > div {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 2px !important;
  row-gap: 0px !important;
}
.registration-body .phone-row > div label.error {
  flex-basis: 100% !important;
  width: 100% !important;
}
.registration-body .phone-row .col-md-3 {
  flex: 0 0 auto !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.registration-body .phone-row .col-md-9 {
  flex: 1 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* MOBILE VIEW REFINEMENTS */
@media (max-width: 1025px) {
  .registration-body .phone-row > div {
    /* Stack them vertically on mobile */
    flex-direction: column !important;
    /* MOBILE: Smaller vertical gap (4px instead of default 8px/14px) */
    gap: 4px !important;
  }

  .registration-body .phone-row .col-md-3 {
    /* Make the code full width on mobile so it looks consistent */
    max-width: 100% !important;
    width: 100% !important;
  }
}

.registration-body .form-horizontal h4 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  margin: 22px 0 14px 0 !important;
  padding: 0 !important;
  border: none !important;
}
.registration-body .form-horizontal h4:first-child {
  margin-top: 0 !important;
}
.registration-body .form-control {
  width: 100% !important;
  height: 48px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  color: #2d3748 !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}
.registration-body .form-control::placeholder {
  color: #a0aec0 !important;
}
.registration-body .form-control:hover {
  border-color: #cbd5e0 !important;
}
.registration-body .form-control:focus {
  outline: none !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}
.registration-body select.form-control {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}
.registration-body .form-group.has-password-toggle,
.registration-body .form-group:has(#password-input),
.registration-body .form-group:has(#password-confirm-input) {
  position: relative !important;
}
.registration-body .form-group.has-password-toggle .form-control,
.registration-body .form-group:has(#password-input) .form-control,
.registration-body .form-group:has(#password-confirm-input) .form-control {
  padding-right: 44px !important;
}
.registration-body #password-field,
.registration-body #password-confirm-field {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  color: #718096 !important;
  pointer-events: auto !important;
}
.registration-body #password-field .fa,
.registration-body #password-confirm-field .fa {
  font-size: 18px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
}
.registration-body #password-field:hover .fa,
.registration-body #password-confirm-field:hover .fa {
  color: #7c3aed !important;
}
.registration-body .form-group input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 10px 0 0 !important;
  vertical-align: middle !important;
  accent-color: #7c3aed !important;
  cursor: pointer !important;
}
.registration-body .form-group h4[style*="inline"] {
  display: inline !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  color: #4a5568 !important;
  vertical-align: middle !important;
}
.registration-body .form-group a[href] {
  color: #7c3aed !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.registration-body .form-group a[href]:hover {
  text-decoration: underline !important;
}
.registration-body .btn-register.submit,
.registration-body .btn-register.btn-block.submit {
  width: 100% !important;
  height: 52px !important;
  padding: 14px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: opacity 0.2s, transform 0.1s !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.registration-body .btn-register.submit:hover,
.registration-body .btn-register.btn-block.submit:hover {
  opacity: 0.95 !important;
}
.registration-body .btn-register.submit:active {
  transform: scale(0.99) !important;
}
.registration-body .btn-link.btn-block {
  display: block !important;
  text-align: center !important;
  margin-top: 8px !important;
  padding: 10px !important;
  font-size: 0.9375rem !important;
  color: #4a5568 !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
}
.registration-body .btn-link.btn-block strong {
  color: #c8102e !important;
  font-weight: 600 !important;
}
.registration-body .btn-link.btn-block:hover {
  color: #2d3748 !important;
}
.registration-body .wizard .steps_2.anchor {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}
.registration-body .wizard .steps_2.anchor li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  color: #718096 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.registration-body .wizard .steps_2.anchor li a.selected,
.registration-body .wizard .steps_2.anchor li a[isdone="1"] {
  background: #7c3aed !important;
  color: #fff !important;
}
.registration-body .wizard .stepContainer {
  min-height: 320px !important;
  height: auto !important;
}
.registration-body .wizard .stepContainer .content {
  display: block !important;
}
.registration-body .wizard .stepContainer .content[style*="display: none"] {
  display: none !important;
}
.registration-body .form-group:has(input[name="terms"]) {
  margin-bottom: 8px !important;
}
.registration-body .wizard .actionBar {
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.registration-body .wizard .actionBar .btn-primary,
.registration-body .wizard .actionBar .btn-default {
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.registration-body .wizard .actionBar .btn-primary {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}
.registration-body .wizard .actionBar .btn-primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #fff !important;
}
.registration-body #messages {
  margin-bottom: 16px !important;
}
.registration-body .form-group::after {
  content: "";
  display: table;
  clear: both;
}
.registration-body .form-group {
  position: relative !important;
}
.registration-body .form-group label.error {
  position: relative !important;
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.8125rem !important;
  color: #dc3545 !important;
  width: 100% !important;
}
.registration-body .name-row .form-group {
  position: relative !important;
}
.registration-body .name-row .form-group label.error {
  position: relative !important;
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.8125rem !important;
  color: #dc3545 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}