@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
html {
  scroll-behavior: smooth !important;
}

* {
  font-family: "Inter", serif;
}
.site-head,
body.body-pause {
  overflow: unset !important;
}
.header_bottom_vector {
  position: absolute;
  right: 0%;
  bottom: -10%;
}
.ws-nowrap {
  white-space: nowrap !important;
}
.home-customer .home-customer--carousel .comment-stars,
a {
  color: #ffffff !important;
}

a .card.card--home-login a,
.d-card a {
  color: #fff !important;
}
.hidden {
  display: none;
}
body,
html {
  font-family: "Inter", serif;
}
body {
  background: #000000; 
  color: white !important;
 /* background: url(https://storage.perfectcdn.com/ruvc5x/49m05n0luqfosp6q.jpg); */
  background-size:contain;
}

body.no-auth-body {
  background: #000000;
}
.site-head {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 140px;
  min-height: 400px;
}
.btn-primary:hover {
  background-color: #214af0 !important;
  color: #ffffff;
  border: #214af0;
}
.site-head .site-head--content {
  position: relative;
  padding: 40px 0 100px;
}
.mw-450 {
  max-width: 450px;
  margin-right: 70px !important;
}
.footer,
.haac-l,
.home-customer .home-customer--carousel .home-customer--item .hci--foot,
.referans-page .ref-items,
.services-mobile,
.site-head .home-head-left {
  position: relative;
}
.site-head .home-head-left .hhl-title {
  font-size: 50px;
  font-weight: 600;
  line-height: 120%;
  max-width: 536px;
  text-align: start !important;
}
.mobile_nav {
  top: -100%;
  background-color: black;
  width: 100%;
}
.h_45 {
  height: 45%;
}
.gradient-text {
  font-weight: 600;
  background: linear-gradient(90deg, #2f86fa, #e606ff, #0471ff);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-x 3s ease infinite;
}

@keyframes gradient-x {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

.site-head .home-head-left .hhl-text {
  font-size: 16px;
  color: #bbb3c3;
  line-height: 150%;
  max-width: 500px;
}
.site-head .home-login-alt-text {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.site-head .home-head-bot {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
  margin-top: 70px;
  margin-bottom: 40px;
}
.site-head .home-head-bot .row .hhb-item + .hhb-item {
  border-left: 1px solid #fff;
}
.header {
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.header .site-icon-container,
.register-links li,
.tos-page .tos-nav-btn.active span,
ul.nav.navbar-nav.navbar-left-block {
  display: inline-block;
}
.header .site-icon-container img {
  max-height: 54px;
  width: auto;
}
.header .site-name {
  font-size: 30px;
  color: #fff !important;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-left: 20px;
}
.header .site-name img {
  max-height: 43px;
}
.header .header-menu ul,
.register-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header .header-menu ul li {
  display: inline-block;
  padding-left: 25px;
}

.header .header-menu ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 15px;
  display: block;
  font-weight: 600;
  height: 100px;
  line-height: 100px;
  position: relative;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.header .header-menu ul li a:hover {
  color: rgba(255, 255, 255, 0.9);
}
.btn {
  line-height: 24px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  outline: 0;
  border: none;
  border-radius: 10px;
}
.btn.btn-sm {
  padding: 10px 14px;
  line-height: 18px;
  border-radius: 5px;
}
.btn.btn-rounded {
  border-radius: 15px;
}
.btn.btn-primary {
  background: #860df5;
}
.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.home-features-section .hfs-item:hover,
.tos-page .tos-nav-btn,
.tos-page .tos-nav-btn:hover {
  background-color: #214af0;
}
.btn.btn-secondary:active {
  background: #214af0 !important;
}
.btn.btn-primary-outline {
  border-color: #214af0 !important;
  color: #214af0;
  border: 2px solid;
  padding: 12px 24px;
}
.btn.btn-primary-outline:hover {
  background-color: #214af0;
  color: #fff;
  border-color: #214af0;
}
.btn.btn-secondary-outline {
  border-color: #214af0 !important;
  color: #fff;
  border: 2px solid;
  padding: 12px 24px;
}
.btn.btn-secondary-outline:hover {
  background-color: #214af0;
  color: #fff;
  border-color: #214af0;
}
.btn.btn-gradient:active,
.btn.btn-gradient:hover,
.card.card--home-login {
  backdrop-filter: blur(22px);
  background-color: #214af0 !important;
}
.btn.btn-light-outline {
  color: #fff;
  border: 2px solid;
  padding: 12px 24px;
}
.btn.btn-light-outline:hover {
  background-color: #214af0;
  color: #ffffff;
  border-color: #214af0;
}
.video-play-icon {
  height: 36px;
  width: 36px;
  background-color: #026d99;
  border: 2px solid #026d99;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin-left: 3px;
  margin-top: -8px;
  margin-bottom: -8px;
}
.video-play-icon .fas {
  vertical-align: -1px;
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}
.mw_770 {
  max-width: 770px;
}
.card {
  border-radius: 15px;
  border: none !important;
}
.card.card--home-login .card-header {
  font-size: 30px !important;
  font-weight: 500 !important;
  color: #fff;
  padding: 14px 0;
  background: 0 0 !important;
}
.card.card--home-login .card-header span,
.fw-600,
.sipsta {
  font-weight: 600;
}
.card.card--home-login .card-body {
  padding-left: 0;
  padding-right: 0;
}
.form-group .form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.form-group .form-control:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.form-group .form-control::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.form-group .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
body.light .form-group .form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.light .form-group .form-control:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.light .form-group .form-control::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.light .form-group .form-control::placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}
.form-group label {
  color: #e9e9eb;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 12px;
}
.form-group.fg-for-login label,
.home-top-section .hts-item:hover .hts-item--title {
  color: #fff;
}
.form-group.fg-for-login .form-control {
  background-color: #edeef2;
  color: #444;
}
.form-group.fg-for-login .form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.form-group.fg-for-login .form-control:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.form-group.fg-for-login .form-control::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.form-group.fg-for-login .form-control::placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.home-customer .home-customer--carousel .comment-stars,
a {
  color: #026d99;
}
.home-top-section {
  padding: 100px 0;
  position: relative;
}
.home-top-section .hts-item {
  border-radius: 5px;
  padding: 40px 30px;
  text-align: center;
  background-color: #026d99;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.home-top-section .hts-item .hts-item--title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  height: 50px;
}
.home-top-section .hts-item .hts-item--icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  position: relative;
  border: 2px solid #026d99;
  background: 0 0;
  border-radius: 50%;
}
.home-top-section .hts-item .hts-item--icon img {
  height: 60px;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.home-top-section .hts-item .hts-item--icon::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -10px;
  top: -10px;
  border: 2px solid;
  border-radius: 50%;
  -webkit-transition: 0.14s;
  transition: 0.14s;
}
.home-top-section .hts-item .hts-item--icon:hover,
.home-top-section .hts-item .hts-item--icon:hover::after,
.home-top-section .hts-item:hover .hts-item--icon::after {
  border-color: #fff;
}
.home-top-section .hts-item .hts-item--text {
  margin: 20px 0 10px;
  font-size: 13px;
  color: #c2c2c2;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.3px;
}
.home-top-section .hts-item:hover {
  background: linear-gradient(#fff, #026d99);
}
.home-title .ht--bottom-line,
.home-title .ht--bottom-line::after,
.home-title .ht--bottom-line::before {
  height: 5px;
  border-radius: 3px;
  background-color: #026d99;
}
.home-top-section .hts-item:hover .hts-item--icon {
  border-color: #fff;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.home-top-section .hts-item:hover .hts-item--text {
  color: #fff;
}
.h_25 {
  height: 90%;
}
.home-title {
  font-weight: 500;
  font-size: 34px;
  color: #026d99;
  line-height: 140%;
  letter-spacing: 0.4px;
  padding: 10px 0 0;
  position: relative;
}
.home-title .ht--bottom-line {
  position: relative;
  bottom: 0;
  left: 0;
  width: 60px;
  margin-top: 25px;
}
.services-list-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 300ms;
}
.home-title .ht--bottom-line::before {
  content: "";
  width: 20px;
  position: absolute;
  left: 65px;
}
.home-title .ht--bottom-line::after {
  content: "";
  width: 40px;
  position: absolute;
  left: 90px;
}
.home-info-section {
  position: relative;
  padding: 100px 0;
}
.home-info-section .his--text {
  font-size: 17px;
  font-weight: 400;
  color: #9f9f9f;
  line-height: 180%;
}
.haac-l span a,
.register-links li:hover a,
.text-primary {
  color: #026d99 !important;
}
.text-danger {
  color: #631fc2 !important;
}
.text-success {
  color: #33bb8d !important;
}
.bg-primary {
  background: #24ca7a !important;
}
.text-secondary {
  color: #1e3aa9 !important;
}
.bg-secondary {
  background: #1e3aa9 !important;
}
.footer,
.home-features-section .hfs-item,
.home-image-1 {
  background-position: center;
  background-size: cover;
}
.home-image-1 {
  border-radius: 10px;
  background-color: #026d99;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  padding-top: 30px;
  -webkit-box-shadow: 0 5px 50px rgba(200, 200, 200, 0.01);
  box-shadow: 0 5px 50px rgba(200, 200, 200, 0.01);
}
.home-image-bot-info .hibi--text {
  position: relative;
  line-height: 120%;
  font-weight: 700;
  font-size: 22px;
}
.home-customer,
.home-features-section {
  padding: 100px 0;
}
.home-features-section .hfs-item {
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  background-color: #026d99;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  background-repeat: no-repeat;
  position: relative;
}
.home-features-section .hfs-item .hfs-item--title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  -webkit-transition: 0.14s;
  transition: 0.14s;
}
.home-features-section .hfs-item .hfs-item--icon {
  max-width: 120px;
  max-height: 120px;
  width: 100%;
  display: inline-block;
  margin-bottom: 30px;
}
.home-features-section .hfs-item .hfs-item--icon img,
.table.table-full {
  width: 100%;
}
.home-features-section .hfs-item .hfs-item--text {
  margin: 20px 0 10px;
  font-size: 13px;
  color: #c2c2c2;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.3px;
}
.home-features-section .hfs-item .hfs-item--btn {
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 56px;
  border-radius: 35px;
  color: #fff;
  background-color: #026d99;
  line-height: 30px;
  font-size: 0px;
  font-weight: 500;
  min-width: 56px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.home-features-section .hfs-item .hfs-item--btn::before {
  content: ">";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.home-features-section .hfs-item:hover .hfs-item--btn {
  padding: 13px 20px;
  font-size: 16px;
  background: #fff;
  color: #026d99;
  -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.for-mobile,
.home-features-section .hfs-item:hover .hfs-item--btn::before {
  display: none;
}
.dropdown li a,
.dropdown-item,
.home-features-section .hfs-item:hover .hfs-item--title,
.table,
body.dark .announcement,
body.dark .link-blk {
  color: #fff;
}
.home-features-section .hfs-item:hover .hfs-item--icon img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.home-features-section .hfs-item:hover .hfs-item--text {
  color: #fff !important;
}
.home-customer .home-customer--carousel .home-customer--item {
  background-color: #026d99;
  padding: 33px 40px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: 2px solid #313131;
}
.home-customer .home-customer--carousel .home-customer--item .hci--title {
  margin-bottom: 30px;
}
.home-customer
  .home-customer--carousel
  .home-customer--item
  .hci--title
  .comment-owner {
  max-height: 83px !important;
  height: 100px;
}
.home-customer .home-customer--carousel .home-customer--item .hci--username {
  color: #026d99;
}
.home-customer .home-customer--carousel .home-customer--item .hci--text {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 20px;
}
.home-customer .home-customer--carousel .home-customer--item .hci--info {
  color: rgba(255, 255, 255, 0.67);
}
.home-customer .home-customer--carousel .owl-dots {
  padding-top: 30px;
}
.home-customer .home-customer--carousel .owl-dots .owl-dot span {
  border-radius: 0;
  height: 6px;
  width: 40px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  background: rgba(255, 255, 255, 0.3);
}
.home-customer .home-customer--carousel .owl-dots .owl-dot span:hover {
  background: rgba(255, 255, 255, 0.5);
}
.home-customer .home-customer--carousel .owl-dots .owl-dot.active span {
  width: 60px;
  background: #026d99;
}
.fw-300 {
  font-weight: 300;
}
.fw-500 {
  font-weight: 500;
}
.fw-700 {
  font-weight: 700;
}
.footer {
  background-color: #060606;
}
.footer .footer-top {
  margin-top: -60px;
  float: left;
  width: 100%;
}
.footer .footer-top .footer-top--btn {
  height: 100px;
  width: 100%;
  border-radius: 18px;
  display: block;
  color: #fff;
  line-height: 30px;
  font-size: 20px;
  padding: 35px;
  text-align: center;
  background-color: #026d99;
  font-weight: 600;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  text-decoration: none !important;
}
.footer .footer-top .footer-top--btn:hover {
  background: #25b55c;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
.footer .footer-top .footer-top--btn.ftb--register {
  background: #383436;
}
.footer .footer-top .footer-top--btn.ftb--register:hover {
  background: #4b4649;
}
.footer .footer-top .footer-top--btn .ftb--icon {
  height: 26px;
  vertical-align: middle;
}
.footer .footer-content {
  padding: 100px 0 50px;
}
.footer .footer-link {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
.footer .footer-bottom {
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 20px 30px;
  margin-top: 10px;
}
.dashboard .container {
  max-width: 1400px;
}
.dashboard.menu-active .dash-sidebar {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.dashboard.menu-active .site-content {
  margin-left: 0;
  width: 100%;
  min-height: 100vh !important;
  overflow-x: hidden;
}
.dashboard .dash-header {
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background: rgb(255 255 255 / 11%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
body.light .dashboard .dash-header {
  background: #631fc27d;
}

.dash-home-well {
  overflow: hidden;
}
.dashboard .dash-header .dash-header-btn {
  color: #ffffff;
  font-weight: 500;
  background-color: #631fc2;
  text-decoration: none;
  -webkit-transition: 0.15s;
  padding: 12px 14px;
  transition: 0.15s;
  border-radius: 8px;
  margin-right: 12px;
}
body.light .dash-header-btn {
  color: #000d53 !important;
  background-color: white !important;
}
.dash-header-btn:hover {
  background-color: #214af0 !important;
  color: white;
}

.dashboard .dash-header .dash-header-btn .dhb--icon {
  max-width: 22px;
  max-height: 22px;
  color: white;
  margin-right: 8px;
  vertical-align: middle;
}

body.light .dhb--icon {
  color: #000d53 !important;
}

.dashboard .dash-sidebar .ds-content {
  padding: 34px 26px 30px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar {
  width: 4px;
  border-radius: 8px;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar-track {
  background: #00000000;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a166ff 0%, #00a7ff 99.99%);
  border-radius: 2px;
}

.dashboard .dash-sidebar .ds-content .ds-content--user-info {
  margin-bottom: 30px;
  text-align: center;
}
.dashboard .dash-sidebar .ds-content .ds-content--user-info .dsui-avatar {
  width: 76px;
  position: relative;
  display: inline-block;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar
  .dsui-avatar--wrapper {
  border: 2px solid #520fd0;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar
  .dsui-avatar--wrapper
  img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar::after {
  content: "";
  position: absolute;
  font-family: "Inter", serif;
  right: 0;
  bottom: 0;
  background-color: #000000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  z-index: 5;
  background-image: url(https://storage.perfectcdn.com/49e927/kn4wro068jsl7zjn.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
.dashboard .dash-sidebar .ds-content .ds-content--user-info .dsui--username {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-top: 14px;
}
.site-head,
body.body-pause {
  overflow: unset !important;
}
.header_bottom_vector {
  position: absolute;
  right: 0%;
  bottom: -10%;
}
.home-customer .home-customer--carousel .comment-stars,
a {
  color: #ffffff !important;
}
.site-head,
body.body-pause {
  overflow: hidden;
}
a .card.card--home-login a,
.d-card a {
  color: #fff !important;
}
.hidden {
  display: none;
}
body,
html {
  font-family: "Inter", serif;
}
body.no-auth-body {
  background: #000000;
}
.site-head {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 140px;
  min-height: 400px;
}
.btn-primary:hover {
  background-color: #214af0 !important;
  color: #ffffff;
  border: #214af0;
}
.site-head .site-head--content {
  position: relative;
  padding: 40px 0 100px;
}
.footer,
.haac-l,
.home-customer .home-customer--carousel .home-customer--item .hci--foot,
.referans-page .ref-items,
.services-mobile,
.site-head .home-head-left {
  position: relative;
}
.site-head .home-head-left .hhl-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 120%;
  max-width: 536px;
  text-align: start !important;
}
.h_45 {
  height: 45%;
}
.gradient-text {
  font-weight: 600;
  background: linear-gradient(90deg, #2f86fa, #e606ff, #0471ff);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-x 3s ease infinite;
}

@keyframes gradient-x {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

.site-head .home-head-left .hhl-text {
  font-size: 16px;
  color: #bbb3c3;
  line-height: 150%;
  max-width: 500px;
}
.site-head .home-login-alt-text {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.site-head .home-head-bot {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
  margin-top: 70px;
  margin-bottom: 40px;
}
.site-head .home-head-bot .row .hhb-item + .hhb-item {
  border-left: 1px solid #fff;
}
.header {
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.header .site-icon-container,
.register-links li,
.tos-page .tos-nav-btn.active span,
ul.nav.navbar-nav.navbar-left-block {
  display: inline-block;
}
.header .site-icon-container img {
  max-height: 54px;
  width: auto;
}

.header .header-menu ul,
.register-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header .header-menu ul li {
  display: inline-block;
  padding-left: 25px;
}

.header .header-menu ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 15px;
  display: block;
  font-weight: 600;
  height: 100px;
  line-height: 100px;
  position: relative;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.header .header-menu ul li a:hover {
  color: rgba(255, 255, 255, 0.9);
}
.btn {
  line-height: 24px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  outline: 0;
  border: none;
  border-radius: 10px;
}

.btn.btn-light-outline:hover {
  background-color: #214af0;
  color: #ffffff;
  border-color: #214af0;
}
.video-play-icon {
  height: 36px;
  width: 36px;
  background-color: #026d99;
  border: 2px solid #026d99;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin-left: 3px;
  margin-top: -8px;
  margin-bottom: -8px;
}
.video-play-icon .fas {
  vertical-align: -1px;
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}
.mw_770 {
  max-width: 770px;
}
.card {
  border-radius: 15px;
  border: none !important;
}

.form-group label {
  color: #e9e9eb;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 12px;
}
.form-group.fg-for-login label,
.home-top-section .hts-item:hover .hts-item--title {
  color: #fff;
}
.form-group.fg-for-login .form-control {
  background-color: #edeef2;
  color: #444;
}
.form-group.fg-for-login .form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.form-group.fg-for-login .form-control:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.form-group.fg-for-login .form-control::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.form-group.fg-for-login .form-control::placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.home-customer .home-customer--carousel .comment-stars,
a {
  color: #026d99;
}
.home-top-section {
  padding: 100px 0;
  position: relative;
}
.home-top-section .hts-item {
  border-radius: 5px;
  padding: 40px 30px;
  text-align: center;
  background-color: #026d99;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.home-top-section .hts-item .hts-item--title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  height: 50px;
}
.home-top-section .hts-item .hts-item--icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  position: relative;
  border: 2px solid #026d99;
  background: 0 0;
  border-radius: 50%;
}
.home-top-section .hts-item .hts-item--icon img {
  height: 60px;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.home-top-section .hts-item .hts-item--icon::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -10px;
  top: -10px;
  border: 2px solid;
  border-radius: 50%;
  -webkit-transition: 0.14s;
  transition: 0.14s;
}
.home-top-section .hts-item .hts-item--icon:hover,
.home-top-section .hts-item .hts-item--icon:hover::after,
.home-top-section .hts-item:hover .hts-item--icon::after {
  border-color: #fff;
}
.home-top-section .hts-item .hts-item--text {
  margin: 20px 0 10px;
  font-size: 13px;
  color: #c2c2c2;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.3px;
}
.home-top-section .hts-item:hover {
  background: linear-gradient(#fff, #026d99);
}
.home-title .ht--bottom-line,
.home-title .ht--bottom-line::after,
.home-title .ht--bottom-line::before {
  height: 5px;
  border-radius: 3px;
  background-color: #026d99;
}
.home-top-section .hts-item:hover .hts-item--icon {
  border-color: #fff;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.home-top-section .hts-item:hover .hts-item--text {
  color: #fff;
}
.h_25 {
  height: 90%;
}
.home-title {
  font-weight: 500;
  font-size: 34px;
  color: #026d99;
  line-height: 140%;
  letter-spacing: 0.4px;
  padding: 10px 0 0;
  position: relative;
}
.home-title .ht--bottom-line {
  position: relative;
  bottom: 0;
  left: 0;
  width: 60px;
  margin-top: 25px;
}
.services-list-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 300ms;
}
.home-title .ht--bottom-line::before {
  content: "";
  width: 20px;
  position: absolute;
  left: 65px;
}
.home-title .ht--bottom-line::after {
  content: "";
  width: 40px;
  position: absolute;
  left: 90px;
}
.home-info-section {
  position: relative;
  padding: 100px 0;
}
.home-info-section .his--text {
  font-size: 17px;
  font-weight: 400;
  color: #9f9f9f;
  line-height: 180%;
}
.haac-l span a,
.register-links li:hover a,
.text-primary {
  color: #026d99 !important;
}
.text-danger {
  color: #631fc2 !important;
}
.text-success {
  color: #33bb8d !important;
}
.bg-primary {
  background: #24ca7a !important;
}
.text-secondary {
  color: #1e3aa9 !important;
}
.bg-secondary {
  background: #1e3aa9 !important;
}
.footer,
.home-features-section .hfs-item,
.home-image-1 {
  background-position: center;
  background-size: cover;
}
.home-image-1 {
  border-radius: 10px;
  background-color: #026d99;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  padding-top: 30px;
  -webkit-box-shadow: 0 5px 50px rgba(200, 200, 200, 0.01);
  box-shadow: 0 5px 50px rgba(200, 200, 200, 0.01);
}
.home-image-bot-info .hibi--text {
  position: relative;
  line-height: 120%;
  font-weight: 700;
  font-size: 22px;
}
.home-customer,
.home-features-section {
  padding: 100px 0;
}
.home-features-section .hfs-item {
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  background-color: #026d99;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  background-repeat: no-repeat;
  position: relative;
}
.home-features-section .hfs-item .hfs-item--title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  -webkit-transition: 0.14s;
  transition: 0.14s;
}
.home-features-section .hfs-item .hfs-item--icon {
  max-width: 120px;
  max-height: 120px;
  width: 100%;
  display: inline-block;
  margin-bottom: 30px;
}
.home-features-section .hfs-item .hfs-item--icon img,
.table.table-full {
  width: 100%;
}
.home-features-section .hfs-item .hfs-item--text {
  margin: 20px 0 10px;
  font-size: 13px;
  color: #c2c2c2;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.3px;
}
.home-features-section .hfs-item .hfs-item--btn {
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 56px;
  border-radius: 35px;
  color: #fff;
  background-color: #026d99;
  line-height: 30px;
  font-size: 0px;
  font-weight: 500;
  min-width: 56px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.home-features-section .hfs-item .hfs-item--btn::before {
  content: ">";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.home-features-section .hfs-item:hover .hfs-item--btn {
  padding: 13px 20px;
  font-size: 16px;
  background: #fff;
  color: #026d99;
  -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.for-mobile,
.home-features-section .hfs-item:hover .hfs-item--btn::before {
  display: none;
}

.home-features-section .hfs-item:hover .hfs-item--icon img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.home-features-section .hfs-item:hover .hfs-item--text {
  color: #fff !important;
}
.home-customer .home-customer--carousel .home-customer--item {
  background-color: #026d99;
  padding: 33px 40px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: 2px solid #313131;
}
.home-customer .home-customer--carousel .home-customer--item .hci--title {
  margin-bottom: 30px;
}
.home-customer
  .home-customer--carousel
  .home-customer--item
  .hci--title
  .comment-owner {
  max-height: 83px !important;
  height: 100px;
}
.home-customer .home-customer--carousel .home-customer--item .hci--username {
  color: #026d99;
}
.home-customer .home-customer--carousel .home-customer--item .hci--text {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 20px;
}
.home-customer .home-customer--carousel .home-customer--item .hci--info {
  color: rgba(255, 255, 255, 0.67);
}
.home-customer .home-customer--carousel .owl-dots {
  padding-top: 30px;
}
.home-customer .home-customer--carousel .owl-dots .owl-dot span {
  border-radius: 0;
  height: 6px;
  width: 40px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  background: rgba(255, 255, 255, 0.3);
}
.home-customer .home-customer--carousel .owl-dots .owl-dot span:hover {
  background: rgba(255, 255, 255, 0.5);
}
.home-customer .home-customer--carousel .owl-dots .owl-dot.active span {
  width: 60px;
  background: #026d99;
}
.fw-300 {
  font-weight: 300;
}
.fw-500 {
  font-weight: 500;
}
.fw-700 {
  font-weight: 700;
}
.footer {
  background-color: #060606;
}
.footer .footer-top {
  margin-top: -60px;
  float: left;
  width: 100%;
}
.footer .footer-top .footer-top--btn {
  height: 100px;
  width: 100%;
  border-radius: 18px;
  display: block;
  color: #fff;
  line-height: 30px;
  font-size: 20px;
  padding: 35px;
  text-align: center;
  background-color: #026d99;
  font-weight: 600;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  text-decoration: none !important;
}
.footer .footer-top .footer-top--btn:hover {
  background: #25b55c;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
.footer .footer-top .footer-top--btn.ftb--register {
  background: #383436;
}
.footer .footer-top .footer-top--btn.ftb--register:hover {
  background: #4b4649;
}
.footer .footer-top .footer-top--btn .ftb--icon {
  height: 26px;
  vertical-align: middle;
}
.footer .footer-content {
  padding: 100px 0 50px;
}
.footer .footer-link {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
.footer .footer-bottom {
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 20px 30px;
  margin-top: 10px;
}
.dashboard .container {
  max-width: 1400px;
}
.dashboard.menu-active .dash-sidebar {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.dashboard.menu-active .site-content {
  margin-left: 0;
  width: 100%;
  overflow-x: hidden;
}

.dash-home-well {
  overflow: hidden;
}

.dashboard .dash-header .dash-header--left {
  float: left;
  width: 280px;
  padding: 0 30px;
}

.dashboard .dash-header .dash-header--sitename > .row,
.dashboard .dash-sidebar .ds-content .ds-user-tools > .row {
  margin-left: -5px;
  margin-right: -5px;
}
.dashboard .dash-header .dash-header--sitename > .row > div,
.dashboard .dash-sidebar .ds-content .ds-user-tools > .row > div {
  padding: 0 5px;
}
.dashboard .dash-header .dash-header--sitename .site-icon-container {
  height: 40px;
  display: inline-block;
}
.dashboard .dash-header .dash-header--sitename .site-icon-container img {
  height: 100%;
}
.dashboard .dash-header .dash-header--sitename .site-name {
  font-size: 28px;
  color: #fff;
  font-weight: 400;
}
.dashboard .dash-header .dash-header--right {
  position: relative;
  width: calc(100% - 280px);
  float: left;
  height: 80px;
}
.dashboard .dash-header .dash-header--right .header-menu-btn {
  position: absolute;
  left: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  color: #fff;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  z-index: 2000;
}
.dashboard .dash-header .dash-header--right .header-menu-btn:hover {
  opacity: 1;
}
.dashboard .dash-sidebar {
  background-color: #000000;
  position: fixed;
  top: 80px;
  border-right: 2px solid #000000;
  left: 0;
  z-index: 100;
  width: 280px;
  bottom: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  overflow: hidden;
}
.dashboard .dash-sidebar .ds-content {
  padding: 34px 26px 30px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar {
  width: 4px;
  border-radius: 8px;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar-track {
  background: #00000080;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a166ff 0%, #00a7ff 99.99%);
  border-radius: 2px;
}
.dashboard .dash-sidebar .ds-content::-webkit-scrollbar-thumb:hover {
  background: rgb(10, 10, 10);
}
.dashboard .dash-sidebar .ds-content .ds-content--user-info {
  margin-bottom: 30px;
  text-align: center;
}
.dashboard .dash-sidebar .ds-content .ds-content--user-info .dsui-avatar {
  width: 76px;
  position: relative;
  display: inline-block;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar
  .dsui-avatar--wrapper {
  border: 2px solid #520fd0;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar
  .dsui-avatar--wrapper
  img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar::after {
  content: "";
  position: absolute;
  font-family: "Inter", serif;
  right: 0;
  bottom: 0;
  background-color: #000000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  z-index: 5;
  background-image: url(https://storage.perfectcdn.com/49e927/kn4wro068jsl7zjn.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
.dashboard .dash-sidebar .ds-content .ds-content--user-info .dsui--username {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-top: 14px;
}
.dashboard .dash-sidebar .ds-content .ds-user-tools {
  background: #000000;
  padding: 14px 26px;
  margin: 30px -18px 26px;
  border-radius: 10px;
}
.dashboard .dash-sidebar .ds-content .ds-user-tools .ds-user-tools--item {
  position: relative;
  text-align: center;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item:hover
  .dsti-title {
  color: rgba(255, 255, 255, 0.8);
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item
  .dsti-icon {
  text-align: center;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item
  .dsti-icon
  img {
  height: 34px;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item
  .dsti-title {
  -webkit-transition: 0.15s;
  transition: 0.15s;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 8px;
}
.navbar-left-block {
  position: relative;
  margin-left: -6px;
  margin-right: -6px;
}
.navbar-left-block {
  list-style: none;
  margin: 0 -24px;
  padding: 0;
  white-space: nowrap;
  overflow-x: hidden !important;
}
.navbar-left-block > li,
.home-ss-tabs .home-ss-tab.active .fa-minus,
.tab-content > .active,
.tos-page .tos-tabs .tos-tab.active {
  display: block;
}

.navbar-left-block > li > a {
  display: block;
  color: #ffffffb8;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  line-height: 24px;
  border: 1.5px transparent;
  padding: 12px 16px;
  white-space: nowrap;
  border-radius: 16px;
}

.navbar-left-block > li {
  margin: 5px;
  border-radius: 16px;
}

.navbar-left-block > li:hover a {
  color: #ffffff;
  background: #6c04f4;
}
.navbar-left-block > li.active a {
  color: #ffffff;
  background: #6c04f4;
}
.navbar-left-block > li > a .link-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

body.light .dashboard .site-content {
  background-color: #FCF8F8;
}

.dashboard .site-content {
  margin-left: 280px;
  margin-top: 80px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  min-height: 100vh !important;
  padding-bottom: 40px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #000000;
}
.d-card .d-card-head,
body.light .d-card .d-card-head {
  padding: 24px 4px 16px;
  margin: 0 32px;
  border-bottom: 1px solid #ffffff;
}
.d-card .d-card-head {
  font-weight: 600;
  color: #fff;
  font-size: 24px;
}
.d-card .d-card-head .dch-icon {
  height: 30px;
  margin-right: 10px;
}
.d-card .d-card-body {
  padding: 24px 30px 34px;
}
.d-card.d-pad {
  padding: 34px 30px;
}
.d-card.d-pad-2 {
  padding: 20px 30px;
}
.d-card.dc-home-1 {
  background-color: #3b3a3aa6 !important;
  color: white !important;
}
.dc-title {
  font-size: 30px;
  font-weight: 600;
}
.dc-text {
  font-size: 18px;
}
.radius_6 {
  border-radius: 6px !important;
}
.dc-ht-sup-box {
  display: block;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.dc-ht-sup-box .dc-ht-sup-title {
  font-size: 28px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 14px;
}
#dc2-body {
  padding: 30px 24px;
}
.dh-noti .dh-item {
  border-radius: 20px;
  background-color: #333;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
}
.dh-noti .dh-item .dh-item--left {
  width: 140px;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.dh-noti .dh-item .dh-item--right {
  margin-left: 140px;
  padding: 24px 30px;
}

.dh-noti .dh-item .dh-item--icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 30;
  font-size: 80px;
}
.dh-noti .dh-item .dh-item--date {
  font-size: 13px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 20px;
}
.dh-noti .dh-item .dh-item--date .dh-item--date-ico {
  height: 20px;
  vertical-align: middle;
}
.dh-noti .dh-item .dh-item--title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}
.dh-noti .dh-item .dh-item--text {
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.alert {
  border: none;
  outline: 0;
  font-size: 14px;
  font-weight: 400;
}

.ds-items-icons {
  max-width: 60px !important;
}
.dash-home-status {
  width: 100%;
}
.dash-home-status > .row {
  margin-left: -8px;
  margin-right: -8px;
}
.dash-home-status > .row > div {
  padding-left: 8px;
  padding-right: 8px;
}
.dash-home-status .dhs-item:hover {
  box-shadow: 0 4px 26px #ffffff;
}
.dash-home-status .dhs-item .dhs-item--icon {
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  background: transparent;
  border-radius: 50%;
  display: block;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}
.dash-home-status .dhs-item .dhs-item--icon .dhs-item--icon-img {
  width: auto;
  height: 60%;
}
.dash-home-status .dhs-item .dhs-item--title {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
}
.dash-home-status .dhs-item .dhs-item--text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.dash-page-head {
  margin-top: 150px;
  padding: 16px;
}
.dash-page-head .dash-page-head--box {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 44px 30px;
  position: relative;
}
.dash-page-head .dash-page-head--box .dph--title {
  font-size: 32px;
  font-weight: 400;
}
.dash-page-head .dash-page-head--box .col-for-title {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.dash-page-head .dash-page-head--box .dph--text {
  font-size: 16px;
  line-height: 170%;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.4px;
}
.dash-page-head .dash-page-head--box .dc-right-img {
  position: absolute;
  height: calc(100% + 20px);
  top: -20px;
  right: 10px;
  bottom: 0;
}
.table tbody,
.table th,
.table thead {
  border: none !important;
}
.table td,
.table th,
.table tr {
  font-size: 16px;
  padding: 1rem 0.75rem;
  border-bottom: 2px solid rgb(255, 255, 255) !important;
}
.d-card.dc-green.d-pad.text-center.dc-ht-sup-box,
.dashboard .dash-sidebar .ds-content .ds-content--user-info .dsui-avatar::after,
.ds-user-tools,
.home-ss-tabs .home-ss-tab .fa-minus,
.home-ss-tabs .home-ss-tab.active .fa-plus,
.table-d-for-mobile,
.tos-page .tos-tabs .tos-tab {
  display: none;
}
.services-title.st-mobile {
  margin-left: 0;
  margin-right: 0;
}
.add-left-border {
  border-left: 1px solid #9194a0;
}
.haac-l span {
  padding: 12px 20px;
  background: #5100ff;
  position: relative;
  font-size: 14px;
}
.haac-l::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  width: 100%;
  height: 1px;
  background: #fff;
}
@media screen and (max-width: 600px) {
  .add-left-border {
    border: none !important;
  }
  .table-d-for-mobile {
    display: block;
  }
  .table-d-for-pc {
    display: none !important;
  }
  .services-title {
    font-size: 15px !important;
  }
  .dosomethingformobile-table {
    border: none !important;
    outline: 0 !important;
    width: 100%;
    display: block;
  }
  .dosomethingformobile-table caption {
    font-size: 1.3em;
  }
  .dosomethingformobile-table tbody {
    width: 100%;
    display: block !important;
  }
  .dosomethingformobile-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .dosomethingformobile-table tr {
    display: block;
    margin-bottom: 30px;
    background: #154f9b;
    border-radius: 20px;
    border: 2px solid #fffffffe;
    overflow: hidden;
    border: none;
    padding: 18px 6px;
  }
  .dosomethingformobile-table td {
    border: none !important;
    display: block;
    font-size: 0.8em;
    text-align: left !important;
    width: 100%;
    padding: 10px 0.75rem;
    word-wrap: break-word;
    min-height: 50px !important;
    color: #fff;
  }
  .dosomethingformobile-table td + td {
    border-top: 1px solid rgb(255, 255, 255) !important;
  }
  .dosomethingformobile-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
    color: #fff;
    margin-bottom: 3px;
  }
  .dosomethingformobile-table td:last-child {
    border-bottom: 0;
  }
}
.dfb-search,
.ds-filter-btns #dfb-btn {
  font-size: 11px;
  border: none;
  color: #fff;
  min-height: 40px;
  cursor: pointer;
  outline: 0;
}
.referans-page .ref-items.ri-sm .ref-item .icon,
pre.code {
  color: #631fc2;
}

.mb_80 {
  margin-bottom: 80px;
}
.ds-filter-btns .row {
  margin-left: -3px;
  margin-right: -3px;
}
.ds-filter-btns .row > div {
  padding: 0 3px;
}
.ds-filter-btns #dfb-btn {
  background-color: #0089ff;
  padding: 12px 8px;
  border-radius: 5px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  display: inline-block;
  margin-bottom: 4px;
  width: 100%;
}
.ds-filter-btns #dfb-btn.active {
  background: #2d44ab;
  color: #fff !important;
}
.ds-filter-btns #dfb-btn:hover {
  background-color: #2d44ab;
}
.ds-filter-btns #dfb-btn i {
  margin-right: 4px;
}
.dfb-search {
  border-radius: 5px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  position: relative;
  border-radius: 16px;
}
.dfb-search .dfb-input {
  width: calc(100% - 40px);
  background: 0 0;
  border: none;
  outline: 0;
  height: 40px;
  color: #000000;
  padding: 0 14px;
}
.dfb-search .dfb-input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.dfb-search .dfb-input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.dfb-search .dfb-input::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.dfb-search .dfb-input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.dfb-search .dfb-submit {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  text-align: center;
  border: none;
  background: #631fc2;
  color: #fff;
}

.bakiye-yukle-page .byp-text {
  font-size: 14px;
  color: #fff;
  padding: 10px 0;
  font-weight: 500;
  line-height: 160%;
}
.bakiye-yukle-page .byp-ta.row > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.bakiye-yukle-page .byp-ta.row .site-icon {
  height: 32px;
  margin-right: 10px;
}
.bakiye-yukle-page .byp-ta.row .site-name {
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  color: #fff;
  font-weight: 400;
}
.bakiye-yukle-page .byp-ta.row .byp-name {
  font-size: 16px;
  font-weight: 600;
}
.bakiye-yukle-page .byp-ta.row .byp-info {
  font-size: 14px;
  font-weight: 400;
  color: #026d99;
}
.pg-supcent .psc-title {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
}
.pg-supcent .psc-title span {
  color: #3ad89e;
}
.pg-supcent .psc-falt {
  color: rgba(255, 255, 255, 0.7);
}
.pg-supcent .psc-item-icon {
  font-size: 48px;
  color: #3ad89f;
}
.pg-supcent .psc-item-top {
  color: #3ad89f;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
}
.pg-supcent .psc-item-bot {
  font-size: 33px;
  font-weight: 500;
}
.referans-page .ref-items.ri-sm .ref-item {
  font-size: 16px;
  padding: 16px 0;
}
.referans-page .ref-items.ri-sm .ref-item .the-title {
  line-height: 28px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.referans-page .ref-items.ri-sm .ref-item .row {
  margin-left: -9px;
}
.referans-page .ref-items.ri-sm .ref-item .row > div {
  padding-left: 9px;
  padding-right: 9px;
}
.referans-page .ref-items .ref-item {
  padding: 22px 0;
  font-size: 16px;
  line-height: 32px;
  color: #fff;
  font-weight: 500;
}
.referans-page .ref-items .ref-item span {
  color: #631fc2;
}
.referans-page .ref-items .ref-item + .ref-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.referans-page .ref-items .ref-item .text-style-2 {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #fff;
}
.referans-page .rp-text {
  line-height: 180%;
  font-size: 14px;
  color: #f3f3f3;
}
hr {
  border: none;
  border-bottom: 1px solid #9194a0;
}
.page-rent-panel .prp-info {
  padding: 16px;
  background: #33333347;
  color: #fff;
  font-size: 18px;
  border-radius: 18px;
}
.page-rent-panel .prp-info-2 {
  padding: 16px;
  background: #33333347;
  color: #fff;
  font-size: 15px;
  border-radius: 18px;
}
.page-rent-panel .prp-info-2 .prp-info-2--btn {
  background: #ffffff00;
  border-radius: 100%;
  margin-left: 16px;
  max-width: 60px;
}
.page-rent-panel .prp-info-2 .prp-info-2--btn:hover {
  box-shadow: 0 0 15px 5px rgba(177, 89, 249, 0.6);
  background-color: white;
}

.home-ss-tabs .home-ss-tab {
  position: relative;
  cursor: pointer;
  background: 0 0;
  color: #fff;
  padding: 20px;
  border-radius: 16px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-bottom: 14px;
}
.home-ss-tabs .home-ss-tab.active,
body.light .home-ss-tabs .home-ss-tab.active {
  background: #860df5;
  color: #fff;
}
.home-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
  color: #cfff;
}
.home-ss-tabs .home-ss-tab .ss-tab-head {
  font-size: 18px;
  font-weight: 700;
}
.home-ss-tabs .home-ss-tab .ss-tab-head .right-p {
  color: #fff;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
}
.home-ss-tabs .home-ss-tab .ss-tab-content {
  display: none;
  padding-top: 12px;
  font-size: 14px;
  padding-bottom: 8px;
}
pre.code {
  border-radius: 10px;
  background-color: #026d9940;
  padding: 24px;
}
.tos-page .tos-nav-btn {
  min-width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  border-radius: 10px;
  -webkit-transition: 0.13s;
  transition: 0.13s;
  background-color: #5100ff;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 20px;
}
.tos-page .tos-nav-btn span {
  font-size: 15px;
  padding: 0 20px;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  display: inline-block;
}
.tos-page .tos-tabs {
  line-height: 170%;
}
body.register-page-body {
  background-image: url(https://storage.perfectcdn.com/49e927/q4moxoodpr7t3agg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #173096;
}
.register-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  min-height: 100vh;
  padding: 100px 0;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.register-page .register-d-card {
  background-image: url(https://storage.perfectcdn.com/49e927/5ec8pqa1dy27tpg4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.register-page .register-pl-img {
  width: calc(100% + 30px);
  margin-left: -10px;
  margin-right: -20px;
  margin-top: 104px;
}
.register-links li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  padding: 4px 14px;
}
.forget-pass-page,
.siparis-without-login {
  width: 100%;
  padding: 100px 0;
}
.forget-pass-page .container {
  max-width: 600px;
}
.siparis-without-login .swl-info {
  margin-bottom: 18px;
}
.siparis-without-login .swl-info .swl-info--title {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}
.siparis-without-login .swl-info .swl-info--text {
  font-weight: 400;
  color: #586bbb;
  font-size: 14px;
}
@media screen and (max-width: 1000px) {
  .head-menu .header-menu > ul > li,
  .head-menu .header-menu > ul > li > a {
    display: block;
    position: relative;
  }
  .for-mobile,
  .head-menu .btn,
  .head-menu.active {
    display: block !important;
  }
  .dc-right-img,
  .for-desktop,
  .head-menu,
  .head-menu .header-menu > ul > li > a::after {
    display: none;
  }
  .dashboard .dash-header .dash-header--right {
    width: 100% !important;
  }
  .dashboard.menu-active .dash-sidebar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .dashboard .dash-sidebar {
    left: -500px;
    z-index: 50;
  }
  .dashboard .site-content {
    margin-left: 0;
    width: 100%;
  }

  .head-menu {
    position: fixed;
    top: 80px;
    left: 16px;
    right: 16px;
    background-color: #ffffff;
    padding: 20px;
    z-index: 1003;
    border-radius: 20px;
    overflow-x: hidden;
  }
  .head-menu .mmff {
    width: 100%;
    display: block;
  }
  .head-menu .hm-close {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 18px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    opacity: 0.6;
    z-index: 1004;
  }
  .head-menu .bs-btn {
    display: block;
    width: 100%;
  }
  .head-menu .bs-btn + .bs-btn {
    margin-top: 14px;
  }
  .head-menu .header-menu > ul {
    width: 100%;
    padding: 0 20px 30px;
  }
  .head-menu .header-menu > ul > li + li {
    margin: 0;
  }
  .head-menu .header-menu > ul > li > a {
    text-align: left;
    max-height: 40px;
    padding: 10px 0;
    line-height: 30px;
    font-size: 18px;
    font-weight: 400;
  }
  .rtl-enable .dashboard .dash-sidebar {
    transform: translateX(0);
  }
}
.services-mobile .service-item {
  border-radius: 20px;
  background: #026d99;
  padding: 10px 26px 30px;
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}
#acc-status .nav-tabs li a:focus,
#acc-status .nav-tabs li a:hover,
#acc-status .nav-tabs li.active a,
#acc-status .nav-tabs li.active a:hover,
#vipstatus .nav-tabs li a:focus,
#vipstatus .nav-tabs li a:hover,
#vipstatus .nav-tabs li.active a,
#vipstatus .nav-tabs li.active a:hover,
.dropdown li:hover,
.dropdown-item:hover,
.acc-status .nav-tabs li.active a {
  background-color: #8400ff;
  color: #fff;
}
.services-mobile .service-item .item-id {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.services-mobile .service-item .item-title {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}
.services-mobile .service-item .item-info {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 24px;
  margin-top: 4px;
}
.services-mobile .service-item .pricing {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  background-color: #363434;
  margin-top: 10px;
}
.services-mobile .service-item .pricing .this-price {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.services-mobile .service-item .pricing .adet {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
}
@media screen and (max-width: 770px) {
  xd .dash-page-head .dash-page-head--box .col-for-title,
  .site-head .home-head-bot .row .hhb-item + .hhb-item {
    border: none !important;
  }
  .dashboard.menu-active .dash-sidebar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .dashboard .site-content {
    margin-left: 0;
    width: 100%;
  }

  .dh-noti .dh-item .dh-item--icon {
    font-size: 40px;
  }
  .dh-noti .dh-item .dh-item--title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .dh-noti .dh-item .dh-item--text {
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    color: #8195e2;
  }
}
@media screen and (max-width: 576px) {
  .h-sm-65 {
    height: 65px;
  }
  .dash-page-head .dash-page-head--box .col-for-title {
    border-right: none;
  }
  .site-head .home-head-left .hhl-title {
    font-size: 28px;
  }
  .site-head .home-head-left .hhl-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.875);
    line-height: 180%;
    letter-spacing: 0.2px;
  }
  .blog_h_27 {
    height: 22% !important;
  }
}
.sipsta.tamam {
  color: #00b97d;
}
.sipsta.iptal {
  color: #ff3651;
}
.sipsta.yari-iade {
  color: #3e55b2;
}
a:hover {
  color: #214af0;
  text-decoration: none;
}
ul.dropdown-menu.dropdown-max-height.beforeauthdrop.show li {
  display: block !important;
  font-size: 14px !important;
  border-bottom: 1px #ffffff54;
  padding-left: 12px;
}
ul.dropdown-menu.dropdown-max-height.beforeauthdrop.show li a {
  height: 35px;
  line-height: 30px;
}
.ht--bottom-line {
  right: 12%;
}
.rtl-enable {
  background: #0e223a;
}
.rtl-enable .owl-stage-outer {
  direction: ltr;
}
.rtl-enable ul.dropdown-menu.dropdown-max-height.beforeauthdrop.show li {
  padding-right: 10px;
}
.rtl-enable .d-card.dc-home-1 .dc-right-img,
.rtl-enable .dh-noti .dh-item .dh-item--icon-bg,
.rtl-enable button.dfb-submit {
  left: 0;
  right: auto;
}
.rtl-enable .dh-noti .dh-item .dh-item--right {
  margin-right: 140px;
  margin-left: 0;
}
.rtl-enable .dashboard .dash-header .dash-header--right .header-menu-btn {
  right: 30px;
  left: auto;
}
.rtl-enable .dashboard .dash-sidebar {
  right: 0;
  left: auto;
}
.rtl-enable .dashboard.menu-active .dash-sidebar {
  transform: translateX(100%);
}
@media screen and (min-width: 1001px) {
  .desktop_none {
    display: none !important;
  }
  .rtl-enable .dashboard .site-content {
    margin-right: 280px;
    margin-left: 0;
  }
  .rtl-enable .dashboard.menu-active .site-content {
    margin-right: 0;
  }
}
.rtl-enable .dashboard .dash-header .dash-header--left {
  float: right;
}
.rtl-enable #service-filter {
  border-radius: 5px 0 0 5px;
}
.rtl-enable .dash-page-head .dash-page-head--box .dc-right-img {
  left: 10px;
  right: auto;
}
#acc-status.modal.fade.in,
#vipstatus.modal.fade.in {
  margin: auto;
  display: flex !important;
  align-items: center !important;
}
#acc-status,
#vipstatus {
  background-color: rgb(63 197 141 / 80%);
}
#acc-status .modal-dialog,
#vipstatus .modal-dialog {
  max-width: 80%;
  margin-top: -200px;
  border-radius: 0;
}
#acc-status .modal-dialog .modal-content,
#vipstatus .modal-dialog .modal-content {
  background-color: #161429;
  border-radius: 0;
}
#acc-status button.close,
#vipstatus button.close {
  opacity: 1;
  background-color: #161429;
  width: 45px;
  height: 50px;
  position: absolute;
  top: -55px;
  right: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 100;
  transition: 0.1s linear;
}
#acc-status .nav-tabs,
#vipstatus .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 0;
}
.status-txt {
  color: #dacef6;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
}
.acc-stat-title,
.dual-status .media-heading {
  font-size: 24px;
  color: #fff;
}
.status-row {
  width: 100%;
  height: 10px;
  background-color: #d9cef6;
}
#acc-status .tab-pane,
#vipstatus .tab-pane {
  padding: 35px;
}
.dual-status .media-body p {
  color: #acb7e4;
  margin-bottom: 0;
}
#acc-status .acc-status-detail,
#vipstatus .acc-status-detail {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
.acc-status-detail li.acc-status-li {
  color: #fff;
  text-decoration: none;
}
.acc-status-detail li.acc-status-li i {
  font-size: 22px;
  margin-right: 8px;
  color: #25b55c;
}
.acc-status-detail li {
  font-size: 15px;
  color: #919199;
  text-decoration: line-through;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px 0;
}
.dual-status {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 25px;
}
.acc-stat-title {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 35px;
  display: none;
}
.status-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  color: #d9cef6;
}
#acc-status .nav-tabs li.active a::after,
#vipstatus .nav-tabs li.active a::after {
  content: "";
  width: 101%;
  height: 10px;
  background-color: #25b55c;
  position: absolute;
  bottom: -41px;
}
#acc-status .nav-tabs li.active a i::before,
#vipstatus .nav-tabs li.active a i::before {
  content: "\f058";
}
#acc-status .nav-tabs li a,
#vipstatus .nav-tabs li a {
  color: #d9cef8;
  background: 0 0;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  min-width: 126px;
  margin-right: 30px;
  text-align: center;
  justify-content: center;
}
#acc-status .nav-tabs li a i,
#vipstatus .nav-tabs li a i {
  font-size: 20px;
  margin-right: 10px;
}

.dropdown-menu {
  background-color: #100230;
  border: 1px solid #550eda;
}
body.light .dropdown-menu{
  background-color: #000d53;
}
.dropdown-menu.setting.show {
  overflow-y: scroll;
  height: 500px;
  width: 100%;
}
.dfb-search {
  overflow: visible;
}
#service-filter {
  padding: 10px 0;
  float: left;
  border-radius: 0 5px 5px 0;
}
li.showOnMob {
  display: none !important;
}
@media (max-width: 1000px) {
  li.showOnMob {
    display: block !important;
  }
}
@media (max-width: 670px) {
  .ticketSide .row {
    display: block !important;
  }
  .dual-status {
    display: block;
    line-height: 40px;
  }
  #filtermera {
    display: none;
  }
  a#service-filter {
    width: 200px !important;
    padding: 10px 12px;
  }
}
.col-auto.align-self-center,
.col.align-self-center {
  padding: 0;
}
.template-input::placeholder {
  color: white !important;
}

body.light .dashboard .dash-header .dash-header--sitename .site-name {
  font-size: 28px;
  color: #ffffff !important;
  font-weight: 400;
}
.mode-btn {
  font-size: 24px; /* Adjust the size of the sun/moon icon */
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.mode-btn span {
  transition: transform 0.3s ease; /* Smooth transition for the icon */
}

.dfb-search,
body.light .d-card,
body.light .dashboard .dash-sidebar {
  background-color: #631fc27d;
}
body.light .dashboard .dash-header .dash-header--right .header-menu-btn,
body.light
  .dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui--username,
body.light .navbar-left-block > li > a,
body.light .dc-ht-sup-box .dc-ht-sup-title,
body.light button#changeEmailLink,
body.light i.fa.fa-search,
body.light i.fas.fa-plus,
body.light tbody,
body.light th {
  color: #fffff !important;
}
body.light .d-card,
.home-image-bot-info {
  background-color: #000d53;
  color: #ffffff;
}
body.light .dashboard .dash-header .dash-header-btn .dhb--icon,
body.light
  .dashboard
  .dash-sidebar
  .ds-content
  .ds-menu
  > ul
  > li
  > a
  .link-icon {
  filter: brightness(1) invert(1);
}
body.light .d-card a,
body.light .navbar-left-block > li.active > a {
  color: #ffffff !important;
  background-color: #027cff;
}
body.light .d-card {
  color: #ffffff;
}
body.light .d-card .d-card-head {
  font-weight: 600;
  color: #000;
  font-size: 18px;
}
body.light .form-group label {
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 12px;
}
body.light .form-group .form-control {
  background: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
}

body.dark .detail-table th {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  padding: 8px 0;
  border: none;
  text-transform: uppercase;
}
body.dark .detail-table td {
  font-size: 14px;
  font-weight: 400;
  color: #fff !important;
  padding: 8px 0;
  border-top: 2px solid #efecec;
}

body.light .dashboard .dash-sidebar .ds-content::-webkit-scrollbar-track {
  background: #fffdfd;
}
body.light .dash-page-head .dash-page-head--box {
  border-radius: 18px;
  background-color: #000d53;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 44px 30px;
  position: relative;
  color: #ffffff;
}
body.light .dash-page-head .dash-page-head--box .dph--text {
  font-size: 16px;
  line-height: 170%;
  color: #ffffff;
  letter-spacing: 0.4px;
}
body.light .ds-filter-btns #dfb-btn {
  background-color: #0084cf;
  color: white;
  padding: 12px 8px;
  font-size: 11px;
  border: none;
  outline: 0;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  min-height: 40px;
  display: inline-block;
  margin-bottom: 4px;
  width: 100%;
}
body.light .dfb-search .dfb-input {
  width: 100%;
  background: #ffffff;
  border: none;
  outline: 0;
  height: 40px;
  color: #000;
  padding: 0 14px;
  box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}
body.light .dfb-search {
  background-color: #ffffff;
  color: #000000 !important;
  font-size: 11px;
  border: none;
  outline: 0;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  min-height: 40px;
  position: relative;
  box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}
body.light ::placeholder {
  color: #000000 !important;
}
body.light .bakiye-yukle-page .byp-text {
  font-size: 14px;
  color: #ffffff;
  padding: 10px 0;
  font-weight: 500;
  line-height: 160%;
}
body.light .bakiye-yukle-page .byp-ta.row .site-name {
  font-size: 24px;
  color: #ffffff;
  font-weight: 400;
}

body.light .home-ss-tabs .home-ss-tab {
  position: relative;
  cursor: pointer;
  background: 0 0;
  color: #000;
  padding: 20px;
  border-radius: 16px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-bottom: 14px;
}

button.mode-btn.darkMode.cust {
  margin-left: 90px;
  margin-top: 17px;
  float: left;
}
@media screen and (min-width: 1000px) {
  button.mode-btn.darkMode.cust {
    display: none;
  }
}
.cardrob {
  position: absolute;
  width: 230px;
  height: 180px;
  top: -139px;
  left: 50px;
}
.cardrob.rev {
  transform: rotateY(180deg);
  right: 50px;
  left: auto;
}
.row.cardrow {
  margin-top: 150px;
}
.cardicon img {
  width: 150px;
  height: 150px;
}
.item-title {
  color: #ffff;
}
.home-image-1 img {
  margin-left: 0;
  width: 100%;
  border-radius: 10px;
}
.container1,
.container1-lg,
.container1-md,
.container1-sm,
.container1-xl {
  max-width: 1140px;
  margin-bottom: 180px !important;
  overflow: hidden;
}
.home-image-bot-info {
  padding: 0 0 0 55px;
  border-radius: 10px 75px 75px 10px;
  margin: -80px 20px 0;
  z-index: 40;
  position: relative;
}
.home-image-bot-info .hibi--image {
  max-width: 210px;
  height: 100px;
  margin-right: 10px !important;
}
.btn.btn-primary:active {
  background: #005cbf !important;
}
button.btn.btn-primary.btn-block {
  border-radius: 5px;
  background: #a512ff;
  color: white;
}
.d-card {
  border-radius: 16px;
  background-color: #000000;
}
body.dark .well {
  border-radius: 16px !important;
  border: 0 !important;
}
body.light .well {
  background-color: #000d53 !important;
}

.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar
  .dsui-avatar--wrapper {
  border-radius: 0;
  width: 100%;
  height: auto;
  background: linear-gradient(to bottom right, black, #4b0082);
  overflow: visible;
  display: inline-block;
  border: none;
}
.navbar-left-block > li {
  border: 2px transparent;
}
.navbar-left-menu > li.active > a {
  background: #6c04f4;
  color: white;
  padding: 12px 12px !important;
}

/* body.light .dash-home-status .dhs-item.dhs-item--1 {
  background: #000d53;
  border-radius: 16px;
}
body.light .dash-home-status .dhs-item.dhs-item--2 {
  background: #000d53;
  border-radius: 16px;
}
body.light .dash-home-status .dhs-item.dhs-item--3 {
  background: #000d53;
  border-radius: 16px;
}

body.light .dash-home-status .dhs-item.dhs-item--4 {
  background: #154f9b;
  border-radius: 16px;
} */
.dash-home-status .dhs-item.dhs-item--1 {
  background: #f6780a;
  border-radius: 16px;
}
.dash-home-status .dhs-item.dhs-item--2 {
  background: #e7007e;
  border-radius: 16px;
}
.dash-home-status .dhs-item.dhs-item--3 {
  background: #f2032b;
  border-radius: 16px;
}

.light .dash-home-status .dhs-item {
    box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}

.dash-home-status .dhs-item.dhs-item--4 {
  background: #002c10;
  border-radius: 16px;
}

i.dhs-item--icon-img {
  font-size: 45px;
  vertical-align: middle;
}
.form-group .form-control {
  border: none;
  outline: 0;
  background-color: #ffffff2b;
  color: #ffffff;
  min-height: 44px;
  border-radius: 12px;
  overflow: hidden;
}
.alert.alert-success {
  background-color: #631fc2;
  color: #fff;
  padding: 8px !important;
}
.form-group .input-group .input-group-prepend .input-group-text {
  background-color: #6a00ff78 !important;
  color: #fff;
  outline: 0;
  border: none;
}
.btn.btn-gradient {
  background: #fff;
  -webkit-transition: 0.15s;
  transition: 0.3s;
}
.dash-page-head .dash-page-head--box {
  border-radius: 16px;
  background-color: #ffffff23;
  color: #fff;
  background-image: none !important;
}
.btn.btn-secondary {
  background: #2d44ab;
  color: #fff;
}
.my_120 {
  padding-top: 120px;
  padding-bottom: 80px;
}
.h_800 {
  height: 800px;
}
.mb_80 {
  margin-bottom: 80px;
}
.mw_650 {
  max-width: 650px;
}
.services-title {
  padding: 12px 30px;
  background: #520fd0 !important;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  border-radius: 6px;
  min-width: 350px;
  margin-left: -12px;
  margin-right: -12px;
}
input#serv-inp::placeholder {
  color: #000;
}
.tos-nav-btn {
  margin: 0 8px;
  padding: 0 14px;
  background-color: #5100ff;
}
.tos-page .tos-nav-btn.active {
  background-color: #631fc2;
  color: #fff;
  padding: 0 14px;
}
.width-40 {
  max-width: 182px;
  width: 150px;
  overflow-wrap: break-word;
}
.dashboard .siparisler-page {
  zoom: 0.9;
}
.dashboard.menu-active .siparisler-page {
  zoom: normal;
}
.dark .announcement.for-mobile {
  background: #081828;
}
.light .announcement.for-mobile {
  background: #fff;
}
.dark .dashboard .dash-header .dash-header--right .header-menu-btn {
  background: #081828;
  opacity: 1;
  left: 0;
}
.light .dashboard .dash-header .dash-header--right .header-menu-btn {
  background: #fff !important;
  opacity: 1;
  left: 0;
}
.dark .for-mobile .panel-body.border-solid.border-rounded {
    background: #474647;
    color: #fff;
    padding: 12px;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    font-size: 16px;
    font-weight: initial;
}

.work-image {
  width: 60px !important;
  height: 60px;
}
.card_width {
  width: 220px;
  height: 220px;
}
.work-card:hover .work-image {
  transform: scale(115%);
}

.header-bottom-vector {
  position: absolute;
  bottom: 0%;
  right: 0%;
  transform: rotate(180deg);
}

.read-btn {
  border-radius: 32px;
  padding: 10px 8px;
  background: #631fc2;
  border: 2px solid;
  max-width: 146px;
  font-weight: 500;
  border: none;
}
.read-btn:hover {
  background-color: #214af0;
}
.more-text {
  display: none;
  transition: max-height 0.3s ease;
}
.opacity-70 {
  color: #919191;
  text-transform: capitalize;
}

.footer-logo {
  font-size: 30px;
}
.clr_purple {
  color: #1e3aa9;
}
.socilal_icons_gap {
  gap: 16px;
}
.social_icons:hover {
  transform: scale(1.1);
}
.fs_18 {
  font-size: 18px;
}
.opacity_80 {
  opacity: 80%;
}
.opacity_80:hover {
  opacity: 100%;
}
.light-white {
  color: #b5b5b5;
}
.footer_color {
  background-color: #060606 !important;
}
.footer_line {
  background-color: #383838;
  height: 2px;
  width: 100%;
}

.copyright_color {
  color: #6a6a6a;
  font-size: 14px;
}
.footer-ellipse {
  background-color: #cc05e2;
  width: 161px;
  height: 169px;
  pointer-events: none;
  border-radius: 174px;
  filter: blur(200px);
  bottom: -5%;
  right: -8%;
}
.footer_links::before {
  content: "";
  background-color: white;
  width: 0%;
  height: 2px;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transition: 300ms linear;
  transform: translateX(-50%);
}
.footer_links:hover::before {
  width: 100%;
}
.z_50 {
  z-index: 50;
}
.modal-dialog {
  margin-top: 250px;
}
/* ----contact----- */
.contact-spacing {
  padding-top: 150px;
  padding-bottom: 150px;
  background-color: #000;
}
.mw-761 {
  max-width: 761px;
}
.contact-text {
  color: #fbfffd;
  max-width: 761px;
}
.contact_input {
  background: #05080d;
  border: 0.5px solid #2f86fa52 !important;
  border-radius: 16px;
  height: 58px;
  padding: 16px;
  color: #dadada;
  outline: none;
}
.contact_input:active {
  border: #2f86fa !important;
}
.contact_input::placeholder {
  color: #dadada !important;
}
.input_gaps {
  gap: 16px;
}
.message {
  width: 100%;
  background: #05080d;
  height: 122px;
  outline: none;
  border: 0.5px solid #2f86fa52;
  border-radius: 16px;
  color: #dadada;
}
.message::placeholder {
  color: #dadada;
}
.submit_btn {
  background-color: #2f86fa;
  border-radius: 32px;
  padding: 12px 0px;
  color: #fbfffd;
  outline: none;
  border: none;
}
.submit_btn:hover {
  background-color: #214af0;
}
/* Optional: Add styling for invalid fields */
.contact_input.invalid,
.message.invalid {
  border: 2px solid red;
}

.ps-3 {
  padding-left: 16px;
}

.contact-bottom-ellipse {
  height: 354px;
  width: 354px;
  background-color: #5e00d7;
  pointer-events: none;
  border-radius: 10000px;
  pointer-events: none;
  filter: blur(200px);
  position: absolute;
  left: 0px;
  bottom: 144px;
}
.contact-top-ellipse {
  height: 354px;
  width: 354px;
  pointer-events: none;
  background-color: #cc05e2;
  border-radius: 10000px;
  filter: blur(200px);
  position: absolute;
  pointer-events: none;
  right: 0px;
  top: -40px;
}
.mx-n12 {
  margin: 0px -16px;
}
/* -- custemor review */
.ms_12 {
  margin-left: 12px;
}
.mw_196 {
  max-width: 196px;
}
.customer-img {
  max-width: 45px;
  height: 45px;
}
.stars {
  max-width: 78px;
}
.mw_168 {
  color: #ffff;
  opacity: 70%;
}
.mw_267 {
  background-color: #18093b;
  border-radius: 16px;
}
.slider_border {
  overflow: hidden;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(180deg, #8a2fff 0%, #519bff 100%);
}
.slick-slide {
  margin: 12px !important;
}
.slick-track {
  padding-bottom: 50px !important;
  padding-top: 48px;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  background-color: #3086fa !important;
  width: 16px !important;
}
li.slick-active {
  color: #03abb5 !important;
  width: 51px !important;
  height: 11px !important;
  border-radius: 23px;
  width: 16px !important;
  height: 16px !important;
  opacity: 100 !important;
  border-radius: 100px !important;
  background: #3086fa !important;
}

.slick-dots li button:before {
  width: 16px !important;
  height: 16px !important;
  content: "" !important;
  border-radius: 100px !important;
  opacity: 0.9 !important;
  background-color: rgb(0, 0, 0) !important;
  position: absolute;
  border: 1px solid #3086fa;
  left: 0;
}

.slider .slick-current {
  box-shadow: 0px 0px 30px 0px rgba(165, 18, 255, 0.5) !important;
}
.mt_150 {
  margin-top: 150px !important;
}
.customer_vector {
  right: 0%;
  top: -70%;
}
/* ------------------------ FAQ ---------------------- */
.faq-section {
  color: #fff;
  max-width: 736px;
  z-index: 40 !important;
}
.question-img {
  margin-left: 16px;
}
.faq-item {
  border: 1px solid #5740ef;
  padding: 24px;
  border-radius: 16px;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.faq-question span {
  font-size: 18px !important;
}

.faq-answer {
  overflow: hidden;
  max-height: 0px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #bbb;
  font-size: 16px !important;
}

.faq-item.active .faq-answer {
  max-height: 250px;
  padding-top: 10px;
}
.faq-item.active {
  box-shadow: 0px 0px 30px 0px #a512ff80;
}
.faq-item {
  background-color: #090709;
}
/* Custom Toggle Button Styling */
.toggle-answer {
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.toggle-answer.plus {
  background-image: url("https://storage.perfectcdn.com/ruvc5x/lujz1wdnucn7o5c0.png"); /* URL for + icon */
  display: inline-block !important;
}

.toggle-answer.minus {
  background-image: url("https://storage.perfectcdn.com/ruvc5x/h0s804s9828pkl7o.svg"); /* URL for - icon */
}

.faq-right-ellipse {
  width: 354px;
  height: 354px;
  background-color: #cc05e2;
  border-radius: 1000px;
  pointer-events: none;
  filter: blur(300px);
  top: 40%;
  right: -5%;
}
.faq-left-ellipse {
  width: 354px;
  height: 354px;
  background-color: #5e00d7;
  border-radius: 1000px;
  pointer-events: none;
  filter: blur(200px);
  top: 0%;
  left: -5%;
}
.faq_vector {
  left: 0%;
  z-index: 0;
  top: 20%;
}
.lh_120 {
  margin-bottom: 6px !important;
}
/* --------- Using social media panel ------------ */
.panel_box {
  background-color: #270045;
  overflow: hidden;
  border-radius: 16px;
}
.fs_36 {
  font-size: 36px;
}
.h-w-50 {
  max-width: 50px;
}

/* ----------- NAVBAR -------------- */

.nav_logo {
  font-size: 30px;
  color: #ffff;
  font-weight: 700;
}
nav ul li a {
  color: #bbbbbb !important;
  position: relative;
}
nav ul li a:before {
  content: "";
  height: 2px;
  width: 0%;
  background-color: white;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}
.nav ul li a:hover::before,
.nav ul li a.active::before {
  width: 100%;
}
.nav_btn {
  padding: 16px 30px 16px 30px;
  border-radius: 12px;
  color: white;
  height: 51px;
  white-space: nowrap;
}
.login {
  background: transparent;
  border: 2px solid white;
}
.sign {
  background-color: #2f86fa;
  margin-left: 16px;
  border: 2px solid #2f86fa;
  width: 120px;
}

.body-no-scroll {
  overflow: hidden;
}
.h_100 {
  height: 80%;
}
.sign:hover {
  background-color: #214af0;
  border-color: #214af0;
}

.login:hover {
  background-color: #214af0;
  border: 2px solid #214af0;
}
.mobile_nav {
  z-index: 10000;
  height: 100%;
}
nav ul li a:hover,
.active {
  color: white !important;
}
/* Tailwind classes and custom styles */
/* Hamburger line styling */
.hamburger .line {
  width: 30px; /* Width of each line */
  height: 4px; /* Height of each line */
  background-color: white; /* Color of the lines */
  margin: 3px 0; /* Space between lines */
  transition: 0.3s ease; /* Smooth transition for animations */
}
.hamburger {
  z-index: 50000;
  cursor: pointer;
  position: relative !important;
}
/* Transform lines on toggle */
.hamburger.active .line1 {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .line2 {
  opacity: 0; /* Hide the middle line */
}

.hamburger.active .line3 {
  transform: rotate(-45deg) translate(5px, -5px);
}
.mobile_list {
  top: 400px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.marquee {
  width: 1920px;
  height: var(--marquee-height);
  background-color: transparent;
  color: #0000007d;
  overflow: hidden;
  position: relative;
  margin: auto;
}
.marquee-logo-hover {
  color: #ffffff63;
}
.marquee-logo-hover:hover {
  color: #214af0;
}
.marquee:before,
.marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #000000 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #000000 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(-1 * var(--marquee-element-width) * var(--marquee-elements))
    );
  }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height) * 3 / 4); /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}
.opacity_0 {
  opacity: 0% !important;
}

@media (max-width: 1599.98px) {
  .customer_vector {
    max-width: 300px;
    top: -30%;
  }
}

@media (max-width: 1199.98px) {
  .opacity_0 {
    opacity: 100% !important;
  }
  .mw-450 {
    max-width: 350px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 120%;
  }
  .slick-track {
    padding-bottom: 20px !important;
  }
  .blog-image {
    border-radius: 0px !important;
  }
  .marquee-content li {
    font-size: calc(var(--marquee-height) * 2 / 4); /* 5rem; */
  }
  .service-name-icon {
    margin-bottom: 16px;
  }
}
@media (max-width: 991.98px) {
  .dashboard .dash-header {
    height: auto;
  }
  .dashboard .dash-header .dash-header--left {
    float: left;

    padding: 0 30px;
  }
  .dashboard .dash-header .dash-header--left {
    float: left;
    padding: 12px;
  }
  .dashboard .dash-header .dash-header-btn {
    display: none;
  }
  .fs_36 {
    font-size: 30px;
  }
  .mb_80 {
    margin-bottom: 60px;
  }
  .mw-450 {
    max-width: 450px;
    margin-right: 0px !important;
  }
  .dash-home-status {
    position: relative;
    margin: 40px 0;
    overflow: visible;
  }
  .md_520 {
    max-width: 520px;
    margin: 0px auto;
  }
  .py_100 {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .header-top-vector {
    position: absolute;
    top: 0%;
    left: 0%;
    max-width: 250px;
  }
  .slick-track {
    padding-bottom: 50px !important;
    padding-top: 30px;
  }
 
 /* h2,
  h4 {
    font-size: 45px !important;
    line-height: 120% !important;
  } */

/*  h3 {
    font-size: 25px !important;
  } */
  .faq-answer {
    padding-left: 18px;
  }
  #acc-status .modal-dialog,
  #vipstatus .modal-dialog {
    max-width: 95%;
  }
  .contact_input {
    padding: 12px;
    height: 45px;
  }
  .question-img {
    margin-left: 0px;
    margin-top: 40px;
    max-width: 250px;
  }
}
@media (max-width: 767.98px) {
  .tos-page .tos-nav-btn span {
    padding: 0px;
  }
  .my_120 {
    padding-top: 80px;
    padding-bottom: 60px;
  }
  .marquee-content li {
    font-size: calc(var(--marquee-height) * 1.6 / 4); /* 5rem; */
  }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before,
  .marquee:after {
    width: 5rem;
  }
  .py_100 {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media (max-width: 550px) {
  .dosomethingformobile-table td {
    font-size: 14px !important;
  }
  .py_100 {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .mw_sm_400 {
    max-width: 400px !important;
  }
  .blog-spacing {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .mt_150 {
    margin-top: 96px !important;
  }
  .contact-spacing {
    padding-top: 80px;
    padding-bottom: 48px;
    background-color: #000;
  }

  .faq-answer {
    padding-left: 0px;
  }

  #acc-status.modal.fade.in,
  #vipstatus.modal.fade.in {
    align-items: flex-start !important;
  }
  #acc-status .modal-dialog,
  #vipstatus .modal-dialog {
    max-width: 100%;
    border-radius: 0;
    margin: 50px auto;
  }
  .modal-body {
    white-space: normal;
    word-break: break-word;
  }

/*  h2,
  h3,
  h4 {
    font-size: 35px !important;
    line-height: 120% !important;
  }
  */
}
.profile-img-container.has-profile-img:before {
  content: none;
}
.profile-container {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: white;
  margin: auto;
}
.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #9200c4;
}
.upload-button {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #631fc2;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.upload-button:hover {
  background-color: #0056b3;
}
input[type="file"] {
  display: none;
}

/* ------ service icons ----------- */
.icons-container {
  display: flex;
  flex-wrap: nowrap; /* Keep in one row */
  padding: 16px;
  overflow: hidden;
  margin-bottom: 0px !important; /* Prevent overflow */
}

.services-list-filter {
  max-width: 75px;
  aspect-ratio: 1;
  max-height: 76px;
  display: flex;
  justify-content: center;
  transition: 300ms linear !important;
  align-items: center;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.3s ease;
  padding: 12px;
}

.services-list-filter:hover {
  box-shadow: 0 0px 11px 5px rgba(231, 231, 190, 0.957);
}
body.light .services-list-filter {
  background: white;
}
.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  width: 0px !important;
  height: 0px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.h-234 {
  height: 280px;
}
.max-w-45 {
  max-width: 45px;
}
option {
  background: #100230 !important;
  color: white;
}
body.light option {
  color: white;
  background: white;
}

/* General styles for the table */
.table-container {
  margin: 20px auto;
  max-width: 600px;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.copy-icon {
  cursor: pointer;
  font-size: 1.2rem;
  color: #631fc2;
  transition: color 0.2s;
}

.copy-icon:hover {
  color: #0056b3;
}

/* Hide copy icon below 576px */
@media (max-width: 576px) {
  .copy-icon {
    display: none;
  }
  .d-card .d-card-head,
  body.light .d-card .d-card-head {
    padding: 12px 2px 8px;
    margin: 0 8px;
  }
}

/* Copied list container styles */
.copied-list-container {
  margin: 20px auto;
  max-width: 600px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.copied-list-container h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  color: #333;
}

.copied-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.copied-list li {
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #333;
  font-size: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* sun moon button */
.mode-btn {
  font-size: 24px; /* Adjust the size of the sun/moon icon */
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.mode-btn span {
  transition: transform 0.3s ease; /* Smooth transition for the icon */
}
.mobile_left_0 {
  left: 0px !important;
}
.bg_purple {
  background-color: #214af0;
  width: 45px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.light select {
  border: 2px soldi white;
}
.small {
  color: white !important;
}
.dropdown-menu.show {
  top: 30px !important;
}
.min-w-268 {
  min-width: 268px;
}

/* -------- profile image container ----------- */

.profile-img-container {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ddd;
  background-color: #ffffff;
  font-size: 48px;
  color: #555;
  font-weight: bold;
  text-transform: uppercase;
}
.profile-img-container:before {
  content: url("https://storage.perfectcdn.com/ruvc5x/w1w65jdnyz0muzts.png");
  max-width: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.profile-img-container img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-btn {
  text-align: center;
  font-size: 16px;
  color: #fff;
  background: #631fc2;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

.upload-btn:hover {
  background: #0056b3;
}

.dashboard .dash-sidebar .ds-content .ds-user-tools .ds-user-tools--item {
  position: relative;
  text-align: center;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item:hover
  .dsti-title {
  color: rgba(255, 255, 255, 0.8);
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item
  .dsti-icon {
  text-align: center;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item
  .dsti-icon
  img {
  height: 34px;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-user-tools
  .ds-user-tools--item
  .dsti-title {
  -webkit-transition: 0.15s;
  transition: 0.15s;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 8px;
}
.navbar-left-block {
  position: relative;
  margin-left: -6px;
  margin-right: -6px;
}
.navbar-left-block {
  list-style: none;
  margin: 0 -24px;
  padding: 0;
  white-space: nowrap;
  overflow-x: hidden !important;
}
.navbar-left-block > li,
.home-ss-tabs .home-ss-tab.active .fa-minus,
.tab-content > .active,
.tos-page .tos-tabs .tos-tab.active {
  display: block;
}

.navbar-left-block > li > a {
  display: block;
  color: #ffffffb8;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  line-height: 24px;
  border: 1.5px transparent;
  padding: 12px 16px;
  white-space: nowrap;
  border-radius: 16px;
}

.navbar-left-block > li {
  margin: 5px;
  border-radius: 16px;
}

.navbar-left-block > li:hover a {
  color: #ffffff;
  background: #6c04f4;
}
.navbar-left-block > li.active a {
  color: #ffffff;
  background: #6c04f4;
}
.navbar-left-block > li > a .link-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

body.dark .d-card {
background: rgb(255 255 255 / 5%);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.dashboard .site-content {
  margin-left: 280px;
  margin-top: 80px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  padding-bottom: 40px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #2d0d61;
}
.d-card .d-card-head,
body.light .d-card .d-card-head {
  padding: 24px 4px 16px;
  margin: 0 32px;
  border-bottom: 1px solid #ffffff;
}
.d-card .d-card-head {
  font-weight: 600;
  color: #fff;
  font-size: 24px;
}
.d-card .d-card-head .dch-icon {
  height: 30px;
  margin-right: 10px;
}
.d-card .d-card-body {
  padding: 24px 30px 34px;
}
.d-card.d-pad {
  padding: 34px 30px;
}
.d-card.d-pad-2 {
  padding: 20px 30px;
}

.dc-title {
  font-size: 30px;
  font-weight: 600;
}
.dc-text {
  font-size: 18px;
}
.radius_6 {
  border-radius: 6px !important;
}
.dc-ht-sup-box {
  display: block;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.dc-ht-sup-box .dc-ht-sup-title {
  font-size: 28px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 14px;
}
#dc2-body {
  padding: 30px 24px;
}
.dh-noti .dh-item {
  border-radius: 20px;
  background-color: #333;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
}
.dh-noti .dh-item .dh-item--left {
  width: 140px;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.dh-noti .dh-item .dh-item--right {
  margin-left: 140px;
  padding: 24px 30px;
}
.dh-noti .dh-item.dh-ig .dh-item--icon-bg {
  background-color: #000000;
  border: 2px solid #550eda;
}
.dh-noti .dh-item.dh-tw .dh-item--icon-bg {
  background-color: #000000;
  border: 2px solid #550eda;
}
.dh-noti .dh-item.dh-fb .dh-item--icon-bg {
  background-color: #000000;
  border: 2px solid #550eda;
}
.dh-noti .dh-item.dh-yt .dh-item--icon-bg {
  background-color: #000000;
  border: 2px solid #550eda;
}

.dh-noti .dh-item .dh-item--icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 30;
  font-size: 80px;
}
.dh-noti .dh-item .dh-item--date {
  font-size: 13px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 20px;
}
.dh-noti .dh-item .dh-item--date .dh-item--date-ico {
  height: 20px;
  vertical-align: middle;
}
.dh-noti .dh-item .dh-item--title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}
.dh-noti .dh-item .dh-item--text {
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.alert {
  border: none;
  outline: 0;
  font-size: 14px;
  font-weight: 400;
}

.ds-items-icons {
  max-width: 60px !important;
}
.dash-home-status {
  width: 100%;
}
.dash-home-status > .row {
  margin-left: -8px;
  margin-right: -8px;
}
.dash-home-status > .row > div {
  padding-left: 8px;
  padding-right: 8px;
}
.dash-home-status .dhs-item:hover {
  box-shadow: 0 4px 26px #6a00ff78;
}
.dash-home-status .dhs-item .dhs-item--icon {
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  background: transparent;
  border-radius: 50%;
  display: block;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}
.dash-home-status .dhs-item .dhs-item--icon .dhs-item--icon-img {
  width: auto;
  height: 60%;
}
.dash-home-status .dhs-item .dhs-item--title {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
}
.dash-home-status .dhs-item .dhs-item--text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.dash-page-head {
  margin-top: 150px;
  padding: 16px;
}
.dash-page-head .dash-page-head--box {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 44px 30px;
  position: relative;
}
.dash-page-head .dash-page-head--box .dph--title {
  font-size: 32px;
  font-weight: 400;
}
.dash-page-head .dash-page-head--box .col-for-title {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.dash-page-head .dash-page-head--box .dph--text {
  font-size: 16px;
  line-height: 170%;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.4px;
}
.dash-page-head .dash-page-head--box .dc-right-img {
  position: absolute;
  height: calc(100% + 20px);
  top: -20px;
  right: 10px;
  bottom: 0;
}

.d-card.dc-green.d-pad.text-center.dc-ht-sup-box,
.dashboard .dash-sidebar .ds-content .ds-content--user-info .dsui-avatar::after,
.ds-user-tools,
.home-ss-tabs .home-ss-tab .fa-minus,
.home-ss-tabs .home-ss-tab.active .fa-plus,
.table-d-for-mobile,
.tos-page .tos-tabs .tos-tab {
  display: none;
}
.services-title.st-mobile {
  margin-left: 0;
  margin-right: 0;
}
.add-left-border {
  border-left: 1px solid #9194a0;
}
.haac-l span {
  padding: 12px 20px;
  background: #5100ff;
  position: relative;
  font-size: 14px;
}
.haac-l::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  width: 100%;
  height: 1px;
  background: #fff;
}
.referans-page .ref-items.ri-sm .ref-item .icon,
pre.code {
  color: #631fc2;
}

.mb_80 {
  margin-bottom: 80px;
}
.ds-filter-btns .row {
  margin-left: -3px;
  margin-right: -3px;
}
.ds-filter-btns .row > div {
  padding: 0 3px;
}

.byp-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  padding-bottom: 20px;
  position: relative;
}

.bakiye-yukle-page .byp-text {
  font-size: 14px;
  color: #fff;
  padding: 10px 0;
  font-weight: 500;
  line-height: 160%;
}
.bakiye-yukle-page .byp-ta.row > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.bakiye-yukle-page .byp-ta.row .site-icon {
  height: 32px;
  margin-right: 10px;
}
.bakiye-yukle-page .byp-ta.row .site-name {
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  color: #fff;
  font-weight: 400;
}
.bakiye-yukle-page .byp-ta.row .byp-name {
  font-size: 16px;
  font-weight: 600;
}
.bakiye-yukle-page .byp-ta.row .byp-info {
  font-size: 14px;
  font-weight: 400;
  color: #026d99;
}
.pg-supcent .psc-title {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
}
.pg-supcent .psc-title span {
  color: #3ad89e;
}
.pg-supcent .psc-falt {
  color: rgba(255, 255, 255, 0.7);
}
.pg-supcent .psc-item-icon {
  font-size: 48px;
  color: #3ad89f;
}
.pg-supcent .psc-item-top {
  color: #3ad89f;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
}
.pg-supcent .psc-item-bot {
  font-size: 33px;
  font-weight: 500;
}
.referans-page .ref-items.ri-sm .ref-item {
  font-size: 16px;
  padding: 16px 0;
}
.referans-page .ref-items.ri-sm .ref-item .the-title {
  line-height: 28px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.referans-page .ref-items.ri-sm .ref-item .row {
  margin-left: -9px;
}
.referans-page .ref-items.ri-sm .ref-item .row > div {
  padding-left: 9px;
  padding-right: 9px;
}
.referans-page .ref-items .ref-item {
  padding: 22px 0;
  font-size: 16px;
  line-height: 32px;
  color: #fff;
  font-weight: 500;
}
.referans-page .ref-items .ref-item span {
  color: #631fc2;
}
.referans-page .ref-items .ref-item + .ref-item {
  border-top: 1px solid white;
}
.referans-page .ref-items .ref-item .text-style-2 {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #fff;
}
.referans-page .rp-text {
  line-height: 180%;
  font-size: 14px;
  color: #f3f3f3;
}
hr {
  border: none;
  border-bottom: 1px solid #9194a0;
}
.page-rent-panel .prp-info {
  padding: 16px;
  background: #33333347;
  border: 1px solid #173096;
  color: #fff;
  font-size: 18px;
  border-radius: 18px;
}
.page-rent-panel .prp-info-2 {
  padding: 30px;
  background: #33333347;
  border: 1px solid #173096;
  color: #fff;
  font-size: 15px;
  border-radius: 18px;
}
.page-rent-panel .prp-info-2 .prp-info-2--btn {
  background: #ffffff00;
  border-radius: 100%;
  margin-left: 16px;
  max-width: 60px;
}
.page-rent-panel .prp-info-2 .prp-info-2--btn:hover {
  box-shadow: 0 0 15px 5px rgba(177, 89, 249, 0.6);
  background-color: white;
}

.home-ss-tabs .home-ss-tab {
  position: relative;
  cursor: pointer;
  background: 0 0;
  color: #fff;
  padding: 20px;
  border-radius: 16px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-bottom: 14px;
}
.home-ss-tabs .home-ss-tab.active,
body.light .home-ss-tabs .home-ss-tab.active {
  background: #0084cf;
  color: #fff;
}
.home-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
  color: #cfff;
}
.home-ss-tabs .home-ss-tab .ss-tab-head {
  font-size: 18px;
  font-weight: 700;
}
.home-ss-tabs .home-ss-tab .ss-tab-head .right-p {
  color: #fff;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
}
.home-ss-tabs .home-ss-tab .ss-tab-content {
  display: none;
  padding-top: 12px;
  font-size: 14px;
  padding-bottom: 8px;
}
pre.code {
  border-radius: 10px;
  background-color: #026d9940;
  padding: 24px;
}
.tos-page .tos-nav-btn {
  min-width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  border-radius: 10px;
  -webkit-transition: 0.13s;
  transition: 0.13s;
  background-color: #5100ff;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 20px;
}
.tos-page .tos-nav-btn span {
  font-size: 15px;
  padding: 0 20px;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  display: inline-block;
}
.tos-page .tos-tabs {
  line-height: 170%;
}
body.register-page-body {
  background-image: url(https://storage.perfectcdn.com/49e927/q4moxoodpr7t3agg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #173096;
}
.register-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  min-height: 100vh;
  padding: 100px 0;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.register-page .register-d-card {
  background-image: url(https://storage.perfectcdn.com/49e927/5ec8pqa1dy27tpg4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.register-page .register-pl-img {
  width: calc(100% + 30px);
  margin-left: -10px;
  margin-right: -20px;
  margin-top: 104px;
}
.register-links li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  padding: 4px 14px;
}
.forget-pass-page,
.siparis-without-login {
  width: 100%;
  padding: 100px 0;
}
.forget-pass-page .container {
  max-width: 600px;
}
.siparis-without-login .swl-info {
  margin-bottom: 18px;
}
.siparis-without-login .swl-info .swl-info--title {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}
.siparis-without-login .swl-info .swl-info--text {
  font-weight: 400;
  color: #586bbb;
  font-size: 14px;
}
@media screen and (max-width: 1000px) {
  .head-menu .header-menu > ul > li,
  .head-menu .header-menu > ul > li > a {
    display: block;
    position: relative;
  }
  .for-mobile,
  .head-menu .btn,
  .head-menu.active {
    display: block !important;
  }
  .dc-right-img,
  .for-desktop,
  .head-menu,
  .head-menu .header-menu > ul > li > a::after {
    display: none;
  }
  .dashboard .dash-header .dash-header--right {
    width: 100% !important;
  }
  .dashboard.menu-active .dash-sidebar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .dashboard .dash-sidebar {
    left: -500px;
    z-index: 1002;
  }
  .dashboard .site-content {
    margin-left: 0;
    width: 100%;
  }

  .head-menu {
    position: fixed;
    top: 80px;
    left: 16px;
    right: 16px;
    background-color: #ffffff;
    padding: 20px;
    z-index: 1003;
    border-radius: 20px;
    overflow-x: hidden;
  }
  .head-menu .mmff {
    width: 100%;
    display: block;
  }
  .head-menu .hm-close {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 18px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    opacity: 0.6;
    z-index: 1004;
  }
  .head-menu .bs-btn {
    display: block;
    width: 100%;
  }
  .head-menu .bs-btn + .bs-btn {
    margin-top: 14px;
  }
  .head-menu .header-menu > ul {
    width: 100%;
    padding: 0 20px 30px;
  }
  .head-menu .header-menu > ul > li + li {
    margin: 0;
  }
  .head-menu .header-menu > ul > li > a {
    text-align: left;
    max-height: 40px;
    padding: 10px 0;
    line-height: 30px;
    font-size: 18px;
    font-weight: 400;
  }
  .rtl-enable .dashboard .dash-sidebar {
    transform: translateX(0);
  }
}
.services-mobile .service-item {
  border-radius: 20px;
  background: #026d99;
  padding: 10px 26px 30px;
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}

.services-mobile .service-item .item-id {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.services-mobile .service-item .item-title {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}
.services-mobile .service-item .item-info {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 24px;
  margin-top: 4px;
}
.services-mobile .service-item .pricing {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  background-color: #363434;
  margin-top: 10px;
}
.services-mobile .service-item .pricing .this-price {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.services-mobile .service-item .pricing .adet {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
}
@media screen and (max-width: 770px) {
  xd .dash-page-head .dash-page-head--box .col-for-title,
  .site-head .home-head-bot .row .hhb-item + .hhb-item {
    border: none !important;
  }
  .dashboard.menu-active .dash-sidebar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .dashboard .site-content {
    margin-left: 0;
    width: 100%;
  }
  .dh-noti .dh-item .dh-item--left {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 16px 0 0 24px;
  }
  .dh-noti .dh-item .dh-item--right {
    margin-left: 0;
  }
  .dh-noti .dh-item .dh-item--icon-bg {
    width: 100%;
    padding-top: 100%;
  }
  .dh-noti .dh-item .dh-item--icon {
    font-size: 40px;
  }
  .dh-noti .dh-item .dh-item--title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .dh-noti .dh-item .dh-item--text {
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    color: #8195e2;
  }
}

@media screen and (min-width: 1001px) {
  .desktop_none {
    display: none !important;
  }
  .rtl-enable .dashboard .site-content {
    margin-right: 280px;
    margin-left: 0;
  }
  .rtl-enable .dashboard.menu-active .site-content {
    margin-right: 0;
  }
}
.rtl-enable .dashboard .dash-header .dash-header--left {
  float: right;
}
.rtl-enable #service-filter {
  border-radius: 5px 0 0 5px;
}
.rtl-enable .dash-page-head .dash-page-head--box .dc-right-img {
  left: 10px;
  right: auto;
}

@media (max-width: 1000px) {
  li.showOnMob {
    display: block !important;
  }
}
@media (max-width: 670px) {
  .ticketSide .row {
    display: block !important;
  }
  .dual-status {
    display: block;
    line-height: 40px;
  }
  #filtermera {
    display: none;
  }
  a#service-filter {
    width: 200px !important;
    padding: 10px 12px;
  }
}
.col-auto.align-self-center,
.col.align-self-center {
  padding: 0;
}
.template-input::placeholder {
  color: white !important;
}

body.light .dashboard .dash-header .dash-header--sitename .site-name {
  font-size: 28px;
  color: #ffffff !important;
  font-weight: 400;
}
.mode-btn {
  font-size: 24px; /* Adjust the size of the sun/moon icon */
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.mode-btn span {
  transition: transform 0.3s ease; /* Smooth transition for the icon */
}

/* body.light .d-card,
body.light .dashboard .dash-sidebar {
  background: #000d53;
  color: white;
} */

body.dark .dashboard .dash-sidebar {
    background: linear-gradient(to bottom right, #2d0d61, #000000);
    background: rgb(0 0 0 / 67%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.dfb-search,
.dfb-input {
  background-color: white;
  color: black;
}
body.light .dashboard .dash-header .dash-header--right .header-menu-btn,
body.light
  .dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui--username,
body.light .navbar-left-block > li > a,
body.light .dc-ht-sup-box .dc-ht-sup-title,
body.light button#changeEmailLink,
body.light i.fa.fa-search,
body.light i.fas.fa-plus,
body.light tbody,
body.light th {
  color: #000 !important;
}
body.light .d-card,
.home-image-bot-info {
  background-color: #000d53;
  color: #ffffff;
}

body.dark .detail-table th {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  padding: 8px 0;
  border: none;
  text-transform: uppercase;
}
body.dark .detail-table td {
  font-size: 14px;
  font-weight: 400;
  color: #fff !important;
  padding: 8px 0;
  border-top: 2px solid #383838;
}

body.light .dashboard .dash-sidebar .ds-content::-webkit-scrollbar-track {
  background: #000d53;
}

body.light .dfb-search .dfb-input {
  width: calc(100% - 40px);
  background: #ffffff;
  border: none;
  outline: 0;
  height: 40px;
  color: #000;
  padding: 0 14px;
}
body.light .dfb-search {
  background-color: #ffffff;
  color: #ffffff !important;
  font-size: 11px;
  border: none;
  outline: 0;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  min-height: 40px;
  position: relative;
}
body.light ::placeholder {
  color: #ffffff !important;
}
body.light .bakiye-yukle-page .byp-ta.row .site-name {
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  color: #ffffff;
  font-weight: 400;
}

body.light .home-ss-tabs .home-ss-tab {
  position: relative;
  cursor: pointer;
  background: 0 0;
  color: #000;
  padding: 20px;
  border-radius: 16px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin-bottom: 14px;
}

button.mode-btn.darkMode.cust {
  margin-left: 90px;
  margin-top: 17px;
  float: left;
}
@media screen and (min-width: 1000px) {
  button.mode-btn.darkMode.cust {
    display: none;
  }
}
.cardrob {
  position: absolute;
  width: 230px;
  height: 180px;
  top: -139px;
  left: 50px;
}
.cardrob.rev {
  transform: rotateY(180deg);
  right: 50px;
  left: auto;
}
.row.cardrow {
  margin-top: 150px;
}
.cardicon img {
  width: 150px;
  height: 150px;
}
.item-title {
  color: #ffff;
}
.home-image-1 img {
  margin-left: 0;
  width: 100%;
  border-radius: 10px;
}
.container1,
.container1-lg,
.container1-md,
.container1-sm,
.container1-xl {
  max-width: 1140px;
  margin-bottom: 180px !important;
  overflow: hidden;
}
.home-image-bot-info {
  padding: 0 0 0 55px;
  border-radius: 10px 75px 75px 10px;
  margin: -80px 20px 0;
  z-index: 40;
  position: relative;
}
.home-image-bot-info .hibi--image {
  max-width: 210px;
  height: 100px;
  margin-right: 10px !important;
}

body.dark .well {
  background: linear-gradient(to bottom right, #2d0d61, #a900ff);
  border-radius: 16px !important;
  border: 0 !important;
}

.dash-home-status .dhs-item {
  border-radius: 5px;
  background-color: #3054e0;
  color: #fff;
  padding: 24px;
}
.site-content {
  background-image: url(https://storage.perfectcdn.com/ruvc5x/qhhhfbwf2jz9822i.png);
  background-size: cover;
  background-position: center;
}
.d-card.dc-home-1 .dc-right-img {
  position: absolute;
  height: calc(100% + 20px);
  top: -20px;
  right: 50px;
  bottom: 0;
}
.dashboard
  .dash-sidebar
  .ds-content
  .ds-content--user-info
  .dsui-avatar
  .dsui-avatar--wrapper {
  border-radius: 0;
  width: 100%;
  height: auto;
  background-color: transparent;
  overflow: visible;
  display: inline-block;
  border: none;
}
.navbar-left-block > li {
  border: 2px transparent;
}
.navbar-left-menu > li.active > a {
  background: #6c04f4;
  color: white;
  padding: 12px 12px !important;
}

.light .for-mobile .panel-body.border-solid.border-rounded {
  background: #5548c8;
  color: white;
  padding: 12px;
  box-shadow: white;
  border-radius: 6px;
}
.mw-369 {
  max-width: 369px !important;
}
@media screen and (max-width: 992px) {
  .text_sm_center {
    text-align: center;
  }
  .dashboard.menu-active .dash-sidebar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .ml-60 {
    margin-left: 0px !important;
  }

  .mb_80 {
    margin-bottom: 60px;
  }
  .dashboard .dash-header .dash-header--right .header-menu-btn {
    left: 30px !important;
  }
  .sidehero {
    margin-top: 20px;
  }
}
@media screen and (max-width: 420px) {
  .dash-header {
    zoom: 80%;
  }
}
@media screen and (max-width: 330px) {
  .dash-header {
    zoom: 70%;
  }
}
@media screen and (max-width: 284px) {
  .dash-header {
    zoom: 60%;
  }
}
@media (max-width: 767.98px) {
  .container1,
  .container1-lg,
  .container1-md,
  .container1-sm,
  .container1-xl {
    margin-bottom: 80px !important;
    margin-top: 80px !important;
  }
  .mw-369 {
    max-width: 769px !important;
  }
}
.dark .form-group .form-control::placeholder {
  color: #ffffff;
}

.male-avatar {
  background: url("https://storage.perfectcdn.com/ruvc5x/wlw2yz5ip7cm3uy8.png")
    center/contain no-repeat;
  width: 75px;
  height: 100px;
}
.form-group {
  gap: 12px !important;
}
.female-avatar {
  background: url("https://storage.perfectcdn.com/ruvc5x/a9nrkzngugt5o8k8.png")
    center/contain no-repeat;
  width: 75px;
  height: 100px;
}
label.gender-label {
  display: block;
  width: 100%;
  margin-left: 20px;
}
a.btn.btn-rounded.btn-primary.btn-block,
.btn.btn-gradient,
.btn.btn-primary {
  background: #631fc2;
}
.navbar-icon {
  margin-right: 24px;
  font-size: 20px;
}
.header-top-vector {
  position: absolute;
  top: 0%;
  left: 0%;
}
.header-bottom-4 {
  position: absolute;
  bottom: 0%;
  right: 0%;
  max-width: 460px;
}
.transition_300 {
  transition: 300ms linear;
}
.bg-about {
  background: #0000 !important;
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
}
.about-border {
  border-radius: 16px;
}
.about-flex {
  background-color: #0b0b0b;
  border-radius: 16px;
  overflow: hidden; /* Add this */
}
.bg_black {
  background-color: #000;
}
.mw-600 {
  max-width: 600px;
}

.gradient-border {
  /* background: linear-gradient(180deg, #a166ff 0%, #00a7ff 99.99%); */
  padding: 2px;
  border-radius: 16px;
}
.bg-stars {
  background-color: #000;
  background-image: url(https://storage.perfectcdn.com/ruvc5x/2sherp89s0fcz21x.png);
  background-position: center;
  background-size: cover;
}
.clr_sky {
  color: #2f86fa;
}
.work-card {
  border-radius: 16px;
  max-width: 350px;
  background-color: #000000;
  padding: 20px;
  width: 100%;
  height: 100%;
  border-color: #ab4bff;
  box-shadow: 0px 0px 40px 0px #ab4bff80;
}
.work-image {
  width: 60px !important;
  height: 60px;
}
.card_width {
  width: 220px;
  height: 220px;
}
.work-card:hover .work-image {
  transform: scale(115%);
}

.bg-works {
  background: linear-gradient(44.95deg, #001f48 0.23%, #9200c4 100%);
}
.fs_24 {
  font-size: 24px;
}
.arrow-1 {
  right: -50%;
  top: 40%;
}
.arrow-2 {
  transform: rotatex(-180deg);
  right: -50%;
  bottom: 30%;
}
.arrow-3 {
  transform: rotatex(-180deg);
  right: -50%;
  bottom: 30%;
}
.work-ellipse {
  width: 354px;
  height: 354px;
  background-color: #9200c4;
  border-radius: 1000px;
  pointer-events: none;
  filter: blur(230px);
  top: 30px;
  left: 30px;
}
.about_ellipse {
  width: 354px;
  height: 354px;
  background-color: #cc05e2;
  border-radius: 1000px;
  pointer-events: none;
  filter: blur(230px);
  top: 30px;
  right: 30px;
}

.customer-ellipse {
  width: 354px;
  pointer-events: none;
  height: 354px;
  background-color: #5e00d7;
  border-radius: 1000px;
  filter: blur(230px);
  top: 0px;
  left: 30px;
}
.blog-bg {
  background-color: #5d00d731;
  background-image: url(https://storage.perfectcdn.com/ruvc5x/m4uf24pphncyfyjy.png);
  background-position: center;
  background-size: cover;
}
.blog-card {
  border-radius: 16px;
  overflow: hidden !important;
}

.blog-image {
  min-height: 300px !important;
  width: 100% !important;
  position: center;
  object-fit: cover;
}
.blog_h_27 {
  height: 40%;
}
body.dark .bg-blog-card {
  background-color: #1c0534e5 !important;
  border-radius: 0px 16px 16px 0px;
}
body.light .bg-blog-card {
  background-color: #000d53 !important;
}
.blog-text {
  color: #fffdfa;
  opacity: 70%;
}
.py_100 {
  padding-top: 150px;
  padding-bottom: 150px;
}
.header-bottom-vector {
  position: absolute;
  bottom: 0%;
  right: 0%;
  transform: rotate(180deg);
}

.upload-button:hover {
  background-color: #0056b3;
}

.extra-icon.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  width: 75px;
  height: auto !important;
}

/* Toggle button animation */
.toggle-icon img {
  transition: transform 0.3s ease;
}

.toggle-icon img.rotate {
  transform: rotate(-45deg);
}
.min-w-200 {
  min-width: 164px !important;
}
.max-w-158 {
  max-width: 158px;
}
.max-w-400 {
  max-width: 400px;
}
.dashboard .site-content {
  background-image: none !important;
  background-color: #171618a4;
}

.sidebar_button {
  background: none;
  gap: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  height: 40px;
}

.left-0 {
  width: 60px !important;
  overflow-x: hidden !important;
}

.ml-60 {
  margin-left: 60px !important;
}
.mr-24 {
  margin-right: 24px !important;
}

.upload-btn {
  text-align: center;
  font-size: 16px;
  color: #fff;
  background: #631fc2;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

.upload-btn:hover {
  background: #214af0;
}
body.light .upload-btn {
  background-color: white;
  color: #000d53;
}
/* ---------- telegram channel ----------------- */
body.light .heading_column {
  background-color: #631fc285;
  margin-bottom: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  border: 2px solid white;
  border-radius: 16px;
}
.telegram-card {
  width: 100%;
  background: #631fc2;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  height: 100%;
}
body.light .telegram-card {
  background: #000d53;
}
.telegram-card img {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
}

.telegram-heading {
  font-size: 20px;
  color: white;
}

.telegram-card p {
  font-size: 16px;
  margin: 10px 0;
  color: white;
  line-height: 1.5;
  max-width: 500px;
  margin: 0px auto;
}

.telegram-card .join-btn {
  display: inline-block;
  padding: 12px 20px;
  background-color: white;
  color: #631fc2 !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  margin-top: 15px;
  transition: background-color 0.3s ease;
}

.telegram-card .join-btn:hover {
  background-color: #214af0;
  color: white !important;
}
@media (max-width: 1580px) {
  .hi-img {
    max-width: 200px !important;
  }
}
@media (max-width: 1400px) {
  .hi-img {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .form-group .form-control {
    min-height: 0px;
  }
  .form-group {
    gap: 12px !important;
  }

  .search_popup {
    position: absolute;
    top: 0;
  }
}

.max-w-60 {
  max-width: 60px;
}
.clr_white {
  color: white !important;
}
.border_grey {
  border: 1px solid rgba(192, 192, 192, 0.524);
  border-radius: 12px;
}
.text-underline {
  text-decoration: underline;
}
body.dark {
  color: white !important;
}
/* ------------ dash-sidebar menu --------------------- */

.dashboard .dash-sidebar .ds-content .ds-menu {
  position: relative;
  margin-left: -6px;
  margin-right: -6px;
}
.dashboard .dash-sidebar .ds-content .ds-menu {
  list-style: none;
  margin: 0 -20px;
  padding: 0;
}
.dashboard .dash-sidebar .ds-content .ds-menu > li,
.home-ss-tabs .home-ss-tab.active .fa-minus,
.tab-content > .active,
.tos-page .tos-tabs .tos-tab.active {
  display: block;
}

.dashboard .dash-sidebar .ds-content .ds-menu > li > a {
  display: block;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  line-height: 24px;
  padding: 14px 8px;
  margin-bottom: 10px;
  border-radius: 16px;
  transition: all 0.3s ease;
}
.dashboard .dash-sidebar .ds-content .ds-menu > li > a:hover {
  background-color: white;
  color: #2d44ab !important;
}

.dashboard .dash-sidebar .ds-content .ds-menu > li.active a {
  background-color: white;
  color: #2d44ab !important;
}
.dashboard .dash-sidebar .ds-content .ds-menu > li > a .link-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
body.light .form-control:-ms-input-placeholder {
  color: black !important;
}
.top-selling-card {
  border: 1px solid #fff;
  padding: 24px;
  border-radius: 16px;
  position: relative;
  min-height: 100%;
}
.top-selling-card:hover {
  background-color: #270045;
}
.slick-slide{
  min-height: 100% !important;
}


/* ---------- top selling card ----------------- */
.top-selling-modern {
    background: #0a0a0a;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
  }

  .top-selling-modern .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .modern-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
  }

  .highlight-text {
    background: linear-gradient(90deg, #00d4ff, #2e8bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .modern-subtext {
    color: #aaa;
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto 30px;
  }

  .cards-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 10px 0;
    scroll-behavior: smooth;
  }

  .cards-carousel::-webkit-scrollbar {
    display: none;
  }

  .modern-card {
    flex: 0 0 300px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 25px 20px;
    backdrop-filter: blur(8px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .modern-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.2);
  }

  .icon-wrap {
    background: #111;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
  }

  .icon-wrap img {
    width: 36px;
    height: 36px;
  }

  .modern-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.25rem;
  }

  .feature-scroll {
    max-height: 140px;
    overflow-y: auto;
    margin-bottom: 10px;
  }

  .feature-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .feature-scroll::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    text-align: left;
  }

  .feature-list li {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #eee;
    transition: background 0.3s;
  }

  .feature-list li:hover {
    background-color: rgba(0, 212, 255, 0.1);
  }

  .seo-line {
    font-size: 0.85rem;
    color: #bbb;
    margin-bottom: 15px;
    font-style: italic;
  }

  .modern-btn {
    background: #00d4ff;
    color: #000;
    padding: 10px 18px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
  }

  .modern-btn:hover {
    background: #2e8bff;
    color: white;
  }

  .slider-nav {
    text-align: center;
    margin-top: 20px;
  }

  .slider-btn {
    background: #111;
    border: 1px solid #444;
    color: #00d4ff;
    padding: 8px 14px;
    font-size: 20px;
    border-radius: 50px;
    margin: 0 8px;
    cursor: pointer;
    transition: 0.3s;
  }

  .slider-btn:hover {
    background: #00d4ff;
    color: #000;
  }
/* Bright neon effects per platform card */

.instagram {
  background: linear-gradient(135deg, #ff00c8, #7700ff);
  border: none;
  box-shadow: 0 0 25px rgba(255, 0, 200, 0.7);
}

.tiktok {
  background: linear-gradient(135deg, #00fff7, #0077ff);
  border: none;
  box-shadow: 0 0 25px rgba(0, 255, 247, 0.7);
}

.facebook {
  background: linear-gradient(135deg, #0084ff, #0044cc);
  border: none;
  box-shadow: 0 0 25px rgba(0, 132, 255, 0.7);
}

.youtube {
  background: linear-gradient(135deg, #ff0000, #990000);
  border: none;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
}

.spotify {
  background: linear-gradient(135deg, #1db954, #0a402a);
  border: none;
  box-shadow: 0 0 25px rgba(30, 215, 96, 0.7);
}
.modern-card h3,
.modern-card p,
.modern-card li {
  color: white;
}

/* Platform-specific Explore button colors */
.explore-btn {
  width: 100%;
  padding: 12px;
  margin-top: 25px;
  font-weight: bold;
  border-radius: 30px;
  font-size: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.explore-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.2));
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 0;
}

.explore-btn:hover::before {
  opacity: 1;
}

.explore-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* Optional: Change text color for better visibility */
.explore-btn {
  color: #ffffff;
  letter-spacing: 0.5px;
}









/* Card Styling */
.blog-card {
  background: #111;
  color: white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  margin: 0 12px;
}
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}
.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.blog-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}
.blog-card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.blog-card-category {
  font-size: 0.8rem;
  color: #ccc;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.blog-card-content {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 1rem;
}
.read-more-btn {
  align-self: flex-start;
  background: #4f46e5;
  color: white;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s ease;
}
.read-more-btn:hover {
  background: #3730a3;
}
@media (max-width: 768px) {
  .blog-card {
    margin: 0 auto 20px;
  }
}



.blog-wrapper {
  padding-top: 100px; /* Prevent header overlap */
  padding-left: 30px;  /* Adjust this value as needed to push away from sidebar */
  padding-right: 15px;
}

.blog-card {
  background: #1a1a1a;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-card-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-card-body h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.blog-card-body p {
  color: #ccc;
  font-size: 14px;
  margin-top: 10px;
  flex-grow: 1;
}

.read-more-btn {
  background: #00bcd4;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.read-more-btn:hover {
  background: #0097a7;
}

a.btn.btn-rounded.btn-primary.btn-block, .btn.btn-gradient, .btn.btn-primary {
    background: #631fc2;
    box-shadow: 0 0 0px #8c53dd, 0 0 0px #8c53dd, 0 0 5px #631fc2;
}
.dashboard .dash-header .dash-header-btn {
    background: #631fc2;
    box-shadow: 0 0 0px #8c53dd, 0 0 0px #8c53dd, 0 0 5px #631fc2;
 }
button.fs-4.fw-bold.mb-3.text-center.btn.btn-primary.btn-lg.px-4.py-3.rounded.shadow-lg {
    background: #631fc2 !important;
    box-shadow: 0 0 5px #8c53dd, 0 0 15px #8c53dd, 0 0 30px #631fc2 !important;
}
.ds-menu {
    width: 100%;
}
.dashboard .dash-sidebar .ds-content .ds-menu > li.active a,
.dashboard .dash-sidebar .ds-content .ds-menu > li > a:hover{
    color: #fff !important;
    background: #631fc2 !important;
}
.ds-filter-btns #dfb-btn {
    background: #631fc2 !important;
    box-shadow: 0 0 5px #8c53dd, 0 0 15px #8c53dd, 0 0 30px #631fc2 !important;
}
.clr_sky {
    background: linear-gradient(90deg, #8c53dd, #631fc2);
    -webkit-background-clip: text;
     -webkit-text-fill-color: #fff; 
    text-shadow: 0 0 5px #8c53dd,
        0 0 15px #8c53dd,
        0 0 30px #631fc2;
}
button.btn.btn-primary.btn-block {
    border-radius: 5px;
    background-color: #a512ff !IMPORTANT;
    color: white;
}
a.btn.btn-rounded.btn-primary.btn-block, .btn.btn-gradient, .btn.btn-primary {
    background: #631fc2 !important;
    box-shadow: 0 0 5px #8c53dd, 0 0 15px #8c53dd, 0 0 30px #631fc2 !important;
}
.btn.btn-secondary {
   background: #631fc2 !important;
    box-shadow: 0 0 5px #8c53dd, 0 0 15px #8c53dd, 0 0 30px #631fc2 !important;
}
/* M2B: `.serv-re` scoped to Services only.
   Orders no longer renders `.serv-re` (M2A moved it to `.es-ord-card`), so this
   selector now has exactly one consumer: the Services card, which renders
   `class="serv-re es-card es-svc-item"`. Narrowing it to `.serv-re.es-svc-item`
   documents that single ownership and prevents this rule from silently reaching
   any future page that reuses the name.
   `.light button.desc-serv` is deliberately LEFT UNSCOPED — Orders still renders
   `.desc-serv` buttons and depends on this border. Only the `.serv-re` half of
   the selector is narrowed. */
.light .serv-re.es-svc-item, .light button.desc-serv{
    border: 1px solid #000;
}
.light .name-serv, .light button.desc-serv{
    color: #000;
}
 .light .id-serv {
    color: #fff;
}

.profile-info {
    background: #ffffff05;
    border: 1px solid #0000000d;
    padding: 5px 0px 5px 10px;
    border-radius: 20px;
    margin-bottom: 11px;
    color: #ffffff;
    margin: 0 0 10px;
}
.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}
.feature-iconorder {
    width: 75px;
    height: 75px;
    line-height: 70px;
    text-align: center;
      background: #631fc2;
    box-shadow: 0 0 0px #8c53dd, 0 0 0px #8c53dd, 0 0 5px #631fc2;
}
.profile-info .icon {
    margin-right: 8px;
    width: 35px;
    height: 35px;
    border: 12px;
    margin-top: 0.4rem;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
    border-radius: 14px;
    color: #11111f;
}
.bx {
    font-family: boxicons!important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.media .media-body {
    width: 100%;
    margin-top: 3px;
    padding: 0px 10px 0px 0px;
}
.media .media-body h3 {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}
.pminmax {
    padding: 2.5px 10px;
    background: #ffffff0a;
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
}
.media-body p {
    margin-bottom: 2px;
}

.icon-info.feature-iconorder.icon i {
    color: #fff;
}
body.light .d-card, .home-image-bot-info {
    background-color: #631fc27d;
    color: #000;
}
body.light .form-group label {
    color: #000;
}
body.light .bakiye-yukle-page .byp-text {
    color: #000;
   }

body.light .d-card {
    box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
    background-color: #FFF;
}

body.light .dashboard .dash-header {
    background: #fff;
    color: #000;
}
body.light .dashboard .dash-sidebar {
    background-color: #fff;
    color: #000;
}
body.light .dashboard .dash-sidebar .ds-content .ds-menu > li > a {
    color: #000 !important;
    font-weight: initial;
}
body.light .dashboard .dash-sidebar .ds-content .ds-menu > li.active a, body.light .dashboard .dash-sidebar .ds-content .ds-menu > li > a:hover {
    background: #631fc285 !important;
    box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}
body.light .form-control {
    box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}
body.light .media .media-body h3{
  color: #000;
}
body.light .text-white{
  color:#000 !important;
}
body.light .pminmax{
  color: #000;
}
body.light .d-card .d-card-head .dch-icon {
    filter: invert(1);
}
body.light .profile-info{
     box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}
body.light .d-card a{
  background: transparent;
}
/* M2B: `.serv-re` scoped to Services only — same rationale as the rule above.
   Verified empirically that Services renders IDENTICALLY with or without this
   rule: `body.light .es26 .es-card` (0,3,1) outranks `.light .serv-re` (0,2,0)
   for background/border/box-shadow, so .es-card has been painting the Services
   card all along. This rule is kept (not deleted) purely to avoid any unmeasured
   edge case; scoping it makes its single owner explicit. */
.light .serv-re.es-svc-item {
    border: none;
    box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
    background: #fff;
}
body.light span.min-serv,body.light span.max-serv,body.light span.avg-serv {
    color: #000;
        box-shadow: 14px 14px 28px rgba(209, 231, 255, 0.9), -10px -10px 24px rgba(255, 255, 255, 1), inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(209, 231, 255, 0.3);
}

body.light .d-card .primary-color {
    color: #000 !important;
    text-decoration: underline !important;
}

body.dark .d-card .primary-color {
    color: #fff !important;
    text-decoration: underline !important;
}
body.light ul#myTab li a {
    color: #000 !important;
}
body.dark ul#myTab li a {
    background-color: rgb(255 255 255 / 5%);
}

body.dark ul#myTab li .nav-link.active {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
}
body.dark div#home .d-card {
    border-radius: 0 16px 16px 16px;
}
ul#myTab {
    border: none;
}
.light .hamburger .line {
    background-color: #000;
}
.light input::placeholder {
    color: #000 !important;
}
.light .table td, .light .table th, .light .table tr {
    background: #fff;
    border-bottom: 1px solid #000 !important;
}

@media screen and (max-width:576px){
.dashboard .container {
    padding: 0;
}

.dashboard .site-content {
    padding: 80px 3px;
}
}
/* ============================================================
   EliteSMM v2026 — Design System (appended; scoped to .es26)
   Source of truth: approved V2026 mockups + level-system file.
   Theme classes body.dark / body.light already exist (default dark).
   ============================================================ */
.es26 {
  --es-violet-50:#EEEDFE; --es-violet-100:#CECBF6; --es-violet-200:#AFA9EC;
  --es-violet-400:#7F77DD; --es-violet-600:#534AB7; --es-violet-800:#3C3489; --es-violet-900:#26215C;
  --es-teal:#1D9E75; --es-teal-d:#0F6E56; --es-teal-l:#E1F5EE;
  --es-blue:#378ADD; --es-blue-d:#185FA5; --es-blue-l:#E6F1FB;
  --es-amber:#EF9F27; --es-amber-d:#854F0B; --es-amber-l:#FAEEDA;
  --es-pink:#D4537E; --es-pink-d:#993556; --es-pink-l:#FBEAF0;
  --es-gray:#B4B2A9; --es-gray-d:#5F5E5A; --es-gray-l:#F1EFE8;
  --es-radius-hero:16px; --es-radius-card:14px; --es-radius-ctrl:11px; --es-radius-pill:999px;
}
/* Light tokens (default + body.light) */
.es26,
body.light .es26 {
  --es-bg:#F4F3FA; --es-surface:#FFFFFF; --es-inset:#F4F3FA;
  --es-border:#E6E4F0; --es-border-2:#D8D5E8;
  --es-text:#1B1830; --es-text-2:#5C5878; --es-text-3:#8E8AA6; --es-hero-text:#FFFFFF;
}
/* Dark tokens (layered charcoal-violet, matches mobile dark mockup) */
body.dark .es26 {
  --es-bg:#15121F; --es-surface:#1F1B2E; --es-inset:#15121F;
  --es-border:#2E2A40; --es-border-2:#3C3656;
  --es-text:#E8E6F0; --es-text-2:#B9B5C9; --es-text-3:#79748C; --es-hero-text:#FFFFFF;
}

.es26{ color:var(--es-text); font-size:14px; }
.es26 *,.es26 *::before,.es26 *::after{ box-sizing:border-box; }
.es26 .d-flex{ display:flex; } .es26 .flex-column{ flex-direction:column; }
.es26 .align-items-center{ align-items:center; } .es26 .align-items-start{ align-items:flex-start; }
.es26 .justify-content-between{ justify-content:space-between; }

.es26 .es-card{ background:var(--es-surface); border:1px solid var(--es-border); border-radius:var(--es-radius-card); }
.es26 .es-inset{ background:var(--es-inset); border-radius:var(--es-radius-ctrl); }
.es26 .es-label{ font-size:11px; font-weight:500; color:var(--es-text-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.es26 .es-muted{ color:var(--es-text-2); } .es26 .es-hint{ color:var(--es-text-3); }

/* HERO */
.es26 .es-hero{ position:relative; overflow:hidden; background:var(--es-violet-900); border-radius:var(--es-radius-hero); padding:22px 24px; color:var(--es-hero-text); }
.es26 .es-hero__accent{ position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:var(--es-violet-600); opacity:.35; pointer-events:none; }
.es26 .es-hero__accent2{ position:absolute; right:60px; bottom:-60px; width:140px; height:140px; border-radius:50%; background:var(--es-violet-400); opacity:.25; pointer-events:none; }
.es26 .es-hero__inner{ position:relative; z-index:2; }
.es26 .es-hero__greet{ font-size:13px; color:var(--es-violet-100); }
.es26 .es-hero__name{ font-size:19px; font-weight:500; }
.es26 .es-metric{ display:block; text-decoration:none; }
.es26 .es-metric__l{ font-size:11px; color:var(--es-violet-200); margin-bottom:3px; }
.es26 .es-metric__v{ font-size:22px; font-weight:500; color:#fff; }
.es26 .es-levelbox{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:13px; padding:14px; }
.es26 .es-progress{ height:7px; background:rgba(255,255,255,.15); border-radius:var(--es-radius-pill); overflow:hidden; }
.es26 .es-progress>span{ display:block; height:100%; background:#9FE1CB; border-radius:var(--es-radius-pill); }

/* RANK BADGE (diamond) */
.es26 .es-rank{ width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; transform:rotate(45deg); border:2px solid; flex-shrink:0; }
.es26 .es-rank>span{ transform:rotate(-45deg); font-weight:500; font-size:12px; line-height:1; }
.es26 .es-rank--lg{ width:54px; height:54px; border-radius:14px; } .es26 .es-rank--lg>span{ font-size:16px; }
.es26 .es-rank--new{ background:var(--es-gray-l); border-color:var(--es-gray); } .es26 .es-rank--new>span{ color:var(--es-gray-d); }
.es26 .es-rank--junior{ background:var(--es-teal-l); border-color:var(--es-teal); } .es26 .es-rank--junior>span{ color:var(--es-teal-d); }
.es26 .es-rank--frequent{ background:var(--es-blue-l); border-color:var(--es-blue); } .es26 .es-rank--frequent>span{ color:var(--es-blue-d); }
.es26 .es-rank--elite{ background:var(--es-violet-50); border-color:var(--es-violet-400); } .es26 .es-rank--elite>span{ color:var(--es-violet-600); }
.es26 .es-rank--master{ background:var(--es-amber-l); border-color:var(--es-amber); } .es26 .es-rank--master>span{ color:var(--es-amber-d); }
body.dark .es26 .es-rank--new{ background:#2A2838; } body.dark .es26 .es-rank--new>span{ color:#B4B2A9; }
body.dark .es26 .es-rank--junior{ background:#0F3D32; } body.dark .es26 .es-rank--junior>span{ color:#5DCAA5; }
body.dark .es26 .es-rank--frequent{ background:#103458; } body.dark .es26 .es-rank--frequent>span{ color:#85B7EB; }
body.dark .es26 .es-rank--elite{ background:#2C2752; } body.dark .es26 .es-rank--elite>span{ color:var(--es-violet-200); }
body.dark .es26 .es-rank--master{ background:#4A3208; } body.dark .es26 .es-rank--master>span{ color:#FAC775; }

/* CHIPS */
.es26 .es-chiprow{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.es26 .es-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--es-radius-pill); font-size:13px; border:1px solid var(--es-border); background:var(--es-surface); color:var(--es-text-2); cursor:pointer; white-space:nowrap; transition:all .15s; line-height:1; }
.es26 .es-chip:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 .es-chip.is-active{ background:var(--es-violet-900); color:#fff; border-color:var(--es-violet-900); }
.es26 .es-chip i{ font-size:16px; }
.es26 .es-chip__ig{ color:#D4537E; } .es26 .es-chip__yt{ color:#E24B4A; } .es26 .es-chip__fb{ color:#378ADD; }
.es26 .es-chip__tg{ color:#378ADD; } .es26 .es-chip__sp{ color:#1D9E75; }
.es26 .es-chip.is-active i{ color:#fff; }

/* TAGS */
.es26 .es-tag{ display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:500; line-height:1.4; }
.es26 .es-tag i{ font-size:10px; }
.es26 .es-tag--popular{ background:var(--es-amber-l); color:var(--es-amber-d); }
.es26 .es-tag--fast{ background:var(--es-blue-l); color:var(--es-blue-d); }
.es26 .es-tag--refill{ background:var(--es-teal-l); color:var(--es-teal-d); }
.es26 .es-tag--bestseller{ background:var(--es-pink-l); color:var(--es-pink-d); }
.es26 .es-tag--premium{ background:var(--es-violet-50); color:var(--es-violet-600); }
body.dark .es26 .es-tag--popular{ background:#4A3208; color:#FAC775; }
body.dark .es26 .es-tag--fast{ background:#103458; color:#85B7EB; }
body.dark .es26 .es-tag--refill{ background:#0F3D32; color:#5DCAA5; }
body.dark .es26 .es-tag--bestseller{ background:#4B1528; color:#ED93B1; }
body.dark .es26 .es-tag--premium{ background:#2C2752; color:var(--es-violet-200); }

/* METRIC BOXES */
.es26 .es-metrics3{ display:flex; gap:8px; }
.es26 .es-mbox{ flex:1; text-align:center; background:var(--es-inset); border-radius:var(--es-radius-ctrl); padding:13px 10px; }
.es26 .es-mbox i{ font-size:18px; color:var(--es-violet-600); display:block; margin-bottom:4px; }
.es26 .es-mbox__l{ font-size:11px; color:var(--es-text-2); margin-bottom:2px; }
.es26 .es-mbox__v{ font-size:15px; font-weight:500; }
.es26 .es-mbox--avg{ background:var(--es-violet-50); }
.es26 .es-mbox--avg i{ color:var(--es-violet-600); }
.es26 .es-mbox--avg .es-mbox__l{ color:var(--es-violet-600); }
.es26 .es-mbox--avg .es-mbox__v{ color:var(--es-violet-900); }
body.dark .es26 .es-mbox--avg{ background:var(--es-violet-900); }
body.dark .es26 .es-mbox--avg i{ color:#9FE1CB; }
body.dark .es26 .es-mbox--avg .es-mbox__l{ color:var(--es-violet-100); }
body.dark .es26 .es-mbox--avg .es-mbox__v{ color:#fff; }

/* SERVICE DETAILS */
.es26 .es-svc-head{ display:flex; align-items:center; gap:11px; }
.es26 .es-svc-icon{ width:44px; height:44px; border-radius:12px; flex-shrink:0; background:var(--es-violet-50); color:var(--es-violet-600); display:flex; align-items:center; justify-content:center; font-size:21px; }
body.dark .es26 .es-svc-icon{ background:#2C2752; color:var(--es-violet-200); }
.es26 .es-svc-title{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es26 .es-svc-title .service-name-icon{ display:none; }  /* hide engine-injected giant PNG */
.es26 .es-inforow{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--es-border); font-size:13px; }
.es26 .es-inforow:last-child{ border-bottom:none; }
.es26 .es-inforow__v{ font-weight:500; }
.es26 .es-idcopy{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--es-text-2); font-size:12px; background:none; border:none; padding:0; }
.es26 .es-idcopy:hover{ color:var(--es-violet-600); }
.es26 .es-idcopy i{ font-size:13px; }
.es26 .es-idcopy.is-copied{ color:var(--es-teal); }
.es26 .es-heart{ background:none; border:1px solid var(--es-border); border-radius:10px; width:38px; height:38px; cursor:pointer; color:var(--es-text-3); display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:all .15s; }
.es26 .es-heart:hover{ border-color:var(--es-pink); color:var(--es-pink); }
.es26 .es-heart.is-fav{ color:var(--es-pink); border-color:var(--es-pink); }
.es26 .es-desc{ font-size:13px; color:var(--es-text-2); line-height:1.65; }
.es26 .es-desc__clip{ max-height:84px; overflow:hidden; position:relative; transition:max-height .25s ease; }
.es26 .es-desc__clip.is-open{ max-height:1600px; }
.es26 .es-desc__clip:not(.is-open)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(to bottom, transparent, var(--es-surface)); }
.es26 .es-desc__toggle{ margin-top:6px; background:none; border:none; cursor:pointer; padding:0; font-size:12px; font-weight:500; color:var(--es-violet-600); display:inline-flex; align-items:center; gap:4px; }
.es26 .es-desc__toggle i{ font-size:13px; transition:transform .2s; }
.es26 .es-desc__toggle.is-open i{ transform:rotate(180deg); }

/* FAVOURITES */
.es26 .es-favgrid{ display:flex; gap:8px; flex-wrap:wrap; }
.es26 .es-favcard{ flex:1; min-width:150px; cursor:pointer; background:var(--es-surface); border:1px solid var(--es-border); border-radius:var(--es-radius-ctrl); padding:11px 13px; }
.es26 .es-favcard:hover{ border-color:var(--es-violet-200); }
.es26 .es-favcard__name{ font-size:12px; font-weight:500; margin-bottom:5px; }

/* BUTTONS */
.es26 .es-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:500; border-radius:var(--es-radius-ctrl); cursor:pointer; border:none; padding:13px 18px; line-height:1; text-decoration:none; }
.es26 .es-btn--primary{ background:var(--es-violet-600); color:#fff; width:100%; }
.es26 .es-btn--primary:hover{ background:var(--es-violet-800); color:#fff; }
.es26 .es-btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); padding:9px 14px; font-size:12px; }
.es26 .es-btn--light{ background:#fff; color:var(--es-violet-900); padding:9px 14px; font-size:12px; }

/* CHARGE ROW */
.es26 .es-charge{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px; background:var(--es-violet-50); border-radius:var(--es-radius-ctrl); }
.es26 .es-charge__l{ font-size:13px; color:var(--es-violet-800); }
.es26 .es-charge__v{ font-size:21px; font-weight:500; color:var(--es-violet-900); }
body.dark .es26 .es-charge{ background:var(--es-violet-900); }
body.dark .es26 .es-charge__l{ color:var(--es-violet-100); }
body.dark .es26 .es-charge__v{ color:#fff; }

/* HEADER CONTROLS */
.es26 .es-headctrls{ display:flex; align-items:center; gap:10px; }
.es26 .es-iconbtn{ width:38px; height:38px; border-radius:var(--es-radius-ctrl); border:1px solid var(--es-border); background:var(--es-surface); color:var(--es-text-2); cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.es26 .es-iconbtn:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 .es-iconbtn__dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; background:var(--es-pink); border-radius:50%; border:1.5px solid var(--es-surface); }
.es26 .es-headbtn{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:var(--es-radius-ctrl); border:1px solid var(--es-border); background:var(--es-surface); color:var(--es-text-2); font-size:13px; text-decoration:none; }
.es26 .es-headbtn:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 .es-headbtn i{ font-size:17px; }
.es26 .es-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--es-violet-50); color:var(--es-violet-600); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; }
body.dark .es26 .es-avatar{ background:#2C2752; color:var(--es-violet-200); }
.es26 .es-notify{ position:relative; }
.es26 .es-notify__panel{ position:absolute; right:0; top:calc(100% + 8px); width:300px; z-index:60; background:var(--es-surface); border:1px solid var(--es-border); border-radius:var(--es-radius-card); padding:12px; display:none; box-shadow:0 8px 30px rgba(16,12,40,.16); }
.es26 .es-notify.is-open .es-notify__panel{ display:block; }
.es26 .es-notify__title{ font-size:13px; font-weight:500; margin-bottom:10px; }
.es26 .es-annc{ background:var(--es-inset); border-radius:10px; padding:11px 12px; font-size:12px; color:var(--es-text-2); line-height:1.55; display:flex; gap:9px; align-items:flex-start; }
.es26 .es-annc i{ color:var(--es-violet-600); font-size:14px; margin-top:1px; }

/* MODAL / BOTTOM SHEET */
.es26-modal{ position:fixed; inset:0; z-index:1050; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(38,33,92,.5); }
.es26-modal.is-open{ display:flex; }
.es26-modal__box{ width:100%; max-width:440px; max-height:90vh; overflow-y:auto; background:var(--es-surface); border:1px solid var(--es-border); border-radius:var(--es-radius-hero); padding:22px; position:relative; }
.es26-modal__close{ position:absolute; right:16px; top:16px; background:none; border:none; font-size:18px; color:var(--es-text-3); cursor:pointer; }
.es26 .es-mult{ flex:1; text-align:center; background:var(--es-inset); border-radius:10px; padding:11px 8px; }
.es26 .es-mult__v{ font-size:18px; font-weight:500; color:var(--es-violet-600); }
.es26 .es-mult__l{ font-size:10px; color:var(--es-text-2); margin-top:2px; }
.es26 .es-benefit{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13px; color:var(--es-text-2); }
.es26 .es-benefit i{ font-size:15px; color:var(--es-teal); flex-shrink:0; }
.es26 .es-rewards-ph{ border:1px dashed var(--es-border-2); border-radius:var(--es-radius-ctrl); padding:13px 15px; display:flex; align-items:center; gap:10px; }
.es26 .es-rewards-ph i{ font-size:20px; color:var(--es-violet-600); }

/* SUCCESS ALERT */
.es26 .es-success{ background:var(--es-teal-l); border:1px solid var(--es-teal); border-radius:var(--es-radius-card); padding:16px 18px; position:relative; }
body.dark .es26 .es-success{ background:#0F3D32; border-color:var(--es-teal); }
.es26 .es-success__head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.es26 .es-success__ico{ width:36px; height:36px; border-radius:10px; background:var(--es-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.es26 .es-success__title{ font-size:15px; font-weight:500; color:var(--es-teal-d); }
body.dark .es26 .es-success__title{ color:#9FE1CB; }
.es26 .es-success__row{ display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-top:1px solid rgba(29,158,117,.25); }
.es26 .es-success__row span:first-child{ color:var(--es-text-2); }
.es26 .es-success__row span:last-child{ font-weight:500; word-break:break-all; text-align:right; padding-left:12px; }
.es26 .es-success__close{ position:absolute; right:14px; top:14px; background:none; border:none; color:var(--es-teal-d); font-size:16px; cursor:pointer; }
body.dark .es26 .es-success__close{ color:#9FE1CB; }

/* Select2 bridge */
.es26 .select2-container .select2-selection--single{ width:100%; height:44px; display:flex; align-items:center; font-size:14px; border-radius:var(--es-radius-ctrl); background:var(--es-inset); border:1px solid var(--es-border); }
.es26 .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--es-text); line-height:42px; }
.es26 .select2-container--default .select2-selection--single .select2-selection__arrow{ height:42px; }
.es26 .select2-container--default .select2-results>.select2-results__options{ max-height:330px; overflow-y:auto; }
.es26 .select2-container--default .select2-results__option[aria-selected=true]{ background-color:var(--es-violet-600); color:#fff; }
.es26 .select2-dropdown{ background:var(--es-surface); border-color:var(--es-border); }
.es26 .select2-search__field{ background:var(--es-inset); color:var(--es-text); border-color:var(--es-border); }

/* LAYOUT GRID */
.es26 .es-ordergrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.es26 .es-svcpanel{ align-self:start; position:sticky; top:16px; }
.es26 .es-svc-inline{ display:none; }
.es26 .es-stickybar{ display:none; }

/* RESPONSIVE */
@media (max-width:991px){
  .es26 .es-ordergrid{ grid-template-columns:1fr; }
  .es26 .es-svcpanel{ position:static; }
}
@media (max-width:768px){
  .es26 .es-hero{ padding:16px; }
  .es26 .es-metric__v{ font-size:16px; }
  .es26 .es-hero__metrics{ gap:14px !important; }
  .es26 .es-svcpanel-desktop{ display:none; }
  .es26 .es-svc-inline{ display:block; }
  .es26 .es-chiprow--scroll{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:3px; scrollbar-width:none; }
  .es26 .es-chiprow--scroll::-webkit-scrollbar{ display:none; }
  .es26 .es-favgrid--scroll{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .es26 .es-favgrid--scroll .es-favcard{ min-width:160px; flex:0 0 auto; }
  .es26 .es-stickybar{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; bottom:0; z-index:40; margin:12px -4px 0; padding:10px 13px; background:var(--es-surface); border:1px solid var(--es-violet-600); border-radius:12px; }
  .es26 .es-stickybar .es-btn{ padding:11px 20px; width:auto; }
  .es26 .es-charge--informbar{ display:none; }
  .es26-modal{ align-items:flex-end; padding:0; }
  .es26-modal__box{ max-width:100%; border-radius:var(--es-radius-hero) var(--es-radius-hero) 0 0; border-left:none; border-right:none; border-bottom:none; padding-top:26px; }
  .es26-modal__box::before{ content:""; position:absolute; left:50%; top:12px; transform:translateX(-50%); width:36px; height:4px; border-radius:99px; background:var(--es-border-2); }
  .es26 .es-headctrls{ gap:8px; }
  .es26 .es-iconbtn{ width:34px; height:34px; font-size:16px; }
  .es26 .es-headbtn__txt{ display:none; }
  .es26 .es-headbtn{ padding:8px; }
  .es26 .es-notify__panel{ width:270px; }
}
@media (max-width:414px){
  .es26 .es-hero__metrics{ gap:12px !important; }
  .es26 .es-metric__v{ font-size:15px; }
  .es26 .es-metrics3{ gap:6px; }
  .es26 .es-mbox{ padding:10px 6px; }
  .es26 .es-mbox__v{ font-size:13px; }
}
@media (max-width:360px){
  .es26{ font-size:13px; }
  .es26 .es-hero__metrics{ gap:10px !important; }
  .es26 .es-metric__l{ font-size:10px; }
  .es26 .es-metric__v{ font-size:14px; }
  .es26 .es-chip{ padding:6px 11px; font-size:12px; }
  .es26 .es-notify__panel{ width:240px; }
}
@media (pointer:coarse){
  .es26 .es-chip{ min-height:40px; }
  .es26 .es-heart,.es26 .es-iconbtn{ min-width:44px; min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .es26 .es-desc__clip,.es26 .es-chip,.es26 .es-desc__toggle i{ transition:none; }
}
.es26 .es-chip:focus-visible,.es26 .es-btn:focus-visible,.es26 .es-iconbtn:focus-visible,
.es26 .es-heart:focus-visible,.es26 .es-idcopy:focus-visible,.es26 .es-favcard:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }

/* ============================================================
   EliteSMM V2026 — FINAL STABILIZATION PASS (appended)
   Responsive + overflow + light-theme audit. Additive only:
   placed last so it wins the cascade. No structural CSS removed.
   ============================================================ */

/* ---- 1. Kill all horizontal overflow globally ---- */
html, body { max-width: 100%; overflow-x: hidden; }
.es26, .es26 .site-content, .es26 .es-page { max-width: 100%; }
.es26 * { min-width: 0; }                 /* let flex/grid children shrink */
.es26 .es-ordergrid > * { min-width: 0; } /* prevent grid blowout */

/* ---- 2. Service title must WRAP, never overflow (was nowrap) ---- */
.es26 .es-svc-title,
.es26 #serviceName,
.es26 #serviceName-desktop {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.es26 .es-svc-head { align-items: flex-start; }

/* ---- 3. Long text / price / description never overflow ---- */
.es26 .es-inforow__v,
.es26 .es-desc,
.es26 .es-mbox__v,
.es26 .es-svc-title,
.es26 .es-charge__v { overflow-wrap: anywhere; word-break: break-word; }
.es26 .es-inforow { flex-wrap: wrap; gap: 4px 10px; }
.es26 .es-desc { max-width: 100%; }

/* ---- 4. Form fields always full width inside their card ---- */
.es26 .es-card .form-control,
.es26 .es-card input,
.es26 .es-card textarea,
.es26 .es-card select,
.es26 .es-card .select2-container { max-width: 100% !important; box-sizing: border-box; }

/* ---- 5. Hero metrics wrap gracefully on small screens ---- */
.es26 .es-hero__metrics { flex-wrap: wrap; }
.es26 .es-hero { overflow: hidden; }       /* clip the decorative circles */

/* ---- 6. Platform chips: wrap on desktop, scroll-pills on mobile ---- */
.es26 .es-chiprow { max-width: 100%; }
@media (max-width: 768px) {
  .es26 .es-chiprow--scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- 7. Tighten breakpoints 480 / 414 / 390 / 375 / 360 / 320 ---- */
@media (max-width: 480px) {
  .es26 .es-svcpanel.es-card,
  .es26 .es-card { padding-left: 13px; padding-right: 13px; }
  .es26 .es-metrics3 { gap: 6px; }
  .es26 .es-svc-title { font-size: 13px; }
}
@media (max-width: 390px) {
  .es26 .es-hero__name { font-size: 17px; }
  .es26 .es-metrics3 .es-mbox { padding: 9px 5px; }
}
@media (max-width: 360px) {
  .es26 .es-stickybar { margin-left: -2px; margin-right: -2px; padding: 9px 11px; }
  .es26 .es-stickybar .es-btn { padding: 10px 14px; }
}
@media (max-width: 320px) {
  .es26 { font-size: 12.5px; }
  .es26 .es-hero { padding: 13px; }
  .es26 .es-hero__name { font-size: 16px; }
  .es26 .es-card { padding: 12px; }
  .es26 .es-mbox__l { font-size: 10px; }
  .es26 .es-chip { padding: 6px 10px; font-size: 11.5px; }
}

/* ---- 8. Mobile: detail panel stacks BELOW the order form ---- */
@media (max-width: 991px) {
  .es26 .es-ordergrid { grid-template-columns: 1fr; }
  .es26 .es-svcpanel { position: static; order: 2; }   /* after the form */
  .es26 .es-ordergrid > .d-flex.flex-column { order: 1; }
}

/* ---- 9. Sidebar/mobile menu must not push content off-screen ---- */
@media (max-width: 991px) {
  .es26 .dashboard, .es26 .site-content { max-width: 100vw; overflow-x: hidden; }
}

/* ============================================================
   LIGHT-THEME AUDIT — ensure nothing disappears / stays readable
   The V2026 scope (.es26) uses CSS vars that are dark by default;
   under body.light these must resolve to light-readable values.
   ============================================================ */
body.light .es26 {
  --es-surface: #ffffff;
  --es-inset: #f4f4f9;
  --es-border: #e8e8f0;
  --es-border-2: #d8d8e6;
  --es-text: #1a1726;
  --es-text-2: #5a5670;
  --es-text-3: #8b87a0;
  --es-violet-50: #eeedfe;
}
/* Service detail card + inputs readable in light mode */
body.light .es26 .es-card { background: #fff; border-color: #e8e8f0; color: #1a1726; }
body.light .es26 .es-inset,
body.light .es26 .es-mbox { background: #f4f4f9; }
body.light .es26 .es-svc-title,
body.light .es26 #serviceName,
body.light .es26 #serviceName-desktop,
body.light .es26 .es-inforow__v,
body.light .es26 .es-mbox__v { color: #1a1726; }
body.light .es26 .es-muted,
body.light .es26 .es-label,
body.light .es26 .es-hint { color: #5a5670; }
body.light .es26 .es-desc { color: #5a5670; }
/* Search field + selects: dark text on light field */
body.light .es26 .form-control,
body.light .es26 .select2-container--default .select2-selection--single .select2-selection__rendered { color: #1a1726; }
body.light .es26 .es-search input { color: #1a1726; }
/* Chips readable when not active */
body.light .es26 .es-chip { background: #fff; border-color: #e8e8f0; color: #5a5670; }
body.light .es26 .es-chip.is-active { background: var(--es-violet-900, #26215c); color: #fff; }
/* Notification panel + modal surfaces in light */
body.light .es26 .es-notify__panel,
body.light .es26 .es26-modal__box { background: #fff; border-color: #e8e8f0; color: #1a1726; }
/* Hero text stays white (hero keeps its dark gradient in both themes) */
body.light .es26 .es-hero .es-svc-title { color: #fff; }
/* Avg-time highlighted box stays legible in light */
body.light .es26 .es-mbox--avg { background: #eeedfe; }
body.light .es26 .es-mbox--avg .es-mbox__v,
body.light .es26 .es-mbox--avg .es-mbox__l,
body.light .es26 .es-mbox--avg i { color: var(--es-violet-700, #3c3489); }

/* ============================================================
   EliteSMM V2026 — FINAL UI POLISH PASS (appended, authoritative)
   Items: light-theme header buttons, duplicate desc, mobile submit/
   charge, dropdown restyle, mobile header, slide menu, bottom nav,
   sidebar/hero/service-card polish, light theme contrast.
   Additive + scoped; wins the cascade. No backend impact.
   ============================================================ */

/* ---------- 1. Header Profile/Logout visible in BOTH themes ---------- */
.es26 .es-headbtn, .dash-header--right .es-headbtn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:11px; text-decoration:none;
  font-size:14px; font-weight:600; white-space:nowrap;
  border:1px solid var(--es-border,#2e2a40);
  background:var(--es-surface,#1f1b2e); color:var(--es-text,#e8e6f0);
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.es26 .es-headbtn:hover{ background:var(--es-inset,#15121f); transform:translateY(-1px); }
.es26 .es-headbtn i{ font-size:17px; }
body.light .es26 .es-headbtn, body.light .dash-header--right .es-headbtn{
  background:#ffffff; color:#1a1726; border-color:#e2e2ee;
  box-shadow:0 1px 2px rgba(16,16,40,.05);
}
body.light .es26 .es-headbtn:hover{ background:#f4f4f9; color:#26215c; }
/* icon-only buttons (bell/currency/theme) light theme */
body.light .es26 .es-iconbtn{
  background:#ffffff; color:#26215c; border:1px solid #e2e2ee;
  box-shadow:0 1px 2px rgba(16,16,40,.05);
}
body.light .es26 .es-iconbtn:hover{ background:#f4f4f9; }
body.light .es26 .es-iconbtn i, body.light .es26 #mode-icon{ color:#26215c; }

/* ---------- 2. Remove duplicate description (legacy panel) ---------- */
#service_description, .for-mobile #service_description,
.serviceDetailsCard .card-footer{ display:none !important; }
/* keep our custom es-desc only */

/* ---------- 3. Mobile: single submit, charge stays in form ---------- */
@media (max-width:991px){
  /* In-form submit hidden on mobile; sticky bar is the action */
  .es26 #order-form button[type="submit"]:not(.es-stickybar button){ display:none !important; }
  /* Charge row stays inside the form card (already in-form); sticky bar shows mirror */
  .es26 .es-stickybar{
    position:fixed; left:0; right:0; bottom:0; z-index:1090;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--es-surface,#1f1b2e); border-top:1px solid var(--es-border,#2e2a40);
    box-shadow:0 -6px 24px rgba(16,16,40,.18);
  }
  /* Add bottom padding so floating nav + sticky bar never cover content */
  .es26 .site-content, .es26 .es-page{ padding-bottom:150px; }
}
@media (min-width:992px){ .es26 .es-stickybar{ display:none; } }

/* ---------- 4. Description: never blurred/faded ---------- */
.es26 .es-desc, .es26 .es-desc__clip{ opacity:1 !important; filter:none !important; color:var(--es-text-2,#b9b5c9); }
.es26 .es-desc__clip{ position:relative; max-height:92px; overflow:hidden; transition:max-height .3s ease; }
.es26 .es-desc__clip.is-open{ max-height:2000px; }
/* remove any gradient fade overlay that caused "blurry" look */
.es26 .es-desc__clip::after{ display:none !important; }
body.light .es26 .es-desc, body.light .es26 .es-desc__clip{ color:#4a4660; }

/* ---------- 9. Category & Service dropdowns (Select2) full restyle ---------- */
.es26 .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single{
  height:48px; border-radius:12px; border:1px solid var(--es-border,#2e2a40);
  background:var(--es-inset,#15121f); display:flex; align-items:center; padding:0 14px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--es-text,#e8e6f0); line-height:46px; padding:0; font-size:14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; right:10px; }
.select2-container--open .select2-dropdown, .select2-dropdown{
  background:var(--es-surface,#1f1b2e); border:1px solid var(--es-border,#2e2a40);
  border-radius:12px; overflow:hidden; box-shadow:0 12px 40px rgba(16,16,40,.28); margin-top:6px;
}
.select2-container--default .select2-results__option{ color:var(--es-text,#e8e6f0); padding:11px 14px; font-size:14px; transition:background .12s; }
.select2-container--default .select2-results__option--highlighted{ background:var(--es-violet-600,#534ab7) !important; color:#fff !important; }
.select2-container--default .select2-results__option[aria-selected=true]{ background:var(--es-inset,#15121f); }
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--es-inset,#15121f); color:var(--es-text,#e8e6f0); border:1px solid var(--es-border,#2e2a40);
  border-radius:9px; padding:9px 12px;
}
.select2-results__options{ max-height:340px; overflow-y:auto; scrollbar-width:thin; }
.select2-results__options::-webkit-scrollbar{ width:8px; }
.select2-results__options::-webkit-scrollbar-thumb{ background:var(--es-border-2,#3c3658); border-radius:8px; }
.select2-results__options::-webkit-scrollbar-track{ background:transparent; }
/* light theme dropdowns */
body.light .select2-container--default .select2-selection--single{ background:#f4f4f9; border-color:#e2e2ee; }
body.light .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#1a1726; }
body.light .select2-container--open .select2-dropdown{ background:#fff; border-color:#e2e2ee; box-shadow:0 12px 40px rgba(16,16,40,.14); }
body.light .select2-container--default .select2-results__option{ color:#1a1726; }
body.light .select2-container--default .select2-results__option[aria-selected=true]{ background:#f4f4f9; }
body.light .select2-container--default .select2-search--dropdown .select2-search__field{ background:#f4f4f9; color:#1a1726; border-color:#e2e2ee; }

/* ---------- 10. Platform filter chips ---------- */
.es26 .es-chiprow{
  display:flex; flex-wrap:nowrap; gap:9px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding:2px 2px 8px; max-width:100%;
}
.es26 .es-chiprow::-webkit-scrollbar{ display:none; height:0; }
.es26 .es-chip{ flex:0 0 auto; white-space:nowrap; transition:transform .12s, background .15s, border-color .15s; }
.es26 .es-chip:hover{ transform:translateY(-2px); }
.es26 .es-chip.is-active{ box-shadow:0 4px 14px rgba(83,74,183,.35); }

/* ---------- 11. Sidebar polish ---------- */
.es26 .ds-menu li > a, .dashboard .ds-menu li > a{
  transition:background .15s, color .15s, padding-left .15s; border-radius:10px;
}
.dashboard .ds-menu li > a:hover{ padding-left:6px; }
.dashboard .ds-menu li.active > a{ box-shadow:0 4px 16px rgba(83,74,183,.35); }
.dashboard .dash-sidebar::-webkit-scrollbar{ width:7px; }
.dashboard .dash-sidebar::-webkit-scrollbar-thumb{ background:var(--es-border-2,#3c3658); border-radius:8px; }
body.light .dashboard .dash-sidebar{ background:#ffffff; border-right:1px solid #ececf4; }
body.light .dashboard .ds-menu li > a{ color:#3a3650; }
body.light .dashboard .ds-menu li.active > a{ color:#fff; }

/* ---------- 5/6. Hero + service card breathing room ---------- */
.es26 .es-hero{ overflow:hidden; }
.es26 .es-level{ transform:scale(.97); transform-origin:top right; }
.es26 .es-svcpanel .es-mbox{ padding:14px 10px; }
.es26 .es-svcpanel .es-inforow{ padding:11px 0; }
.es26 .es-svc-title{ line-height:1.45; }

/* ---------- 13. Light theme global contrast ---------- */
body.light .es26{ --es-surface:#fff; --es-inset:#f4f4f9; --es-border:#e8e8f0; --es-border-2:#d8d8e6; --es-text:#1a1726; --es-text-2:#5a5670; --es-text-3:#8b87a0; }
body.light .es26 .es-card{ background:#fff; border:1px solid #ececf4; box-shadow:0 1px 3px rgba(16,16,40,.05),0 8px 24px rgba(16,16,40,.04); }
body.light .es26 .es-mbox{ background:#f4f4f9; }
body.light .es26 .es-svc-title, body.light .es26 .es-inforow__v, body.light .es26 .es-mbox__v{ color:#1a1726; }

/* ---------- 7. Description toggle label spacing ---------- */
.es26 .es-desc__toggle{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:none; border:none; padding:0; color:var(--es-violet-300,#afa9ec); font-size:13px; font-weight:600; cursor:pointer; }
.es26 .es-desc__toggle i{ transition:transform .2s; }
.es26 .es-desc__toggle.is-open i{ transform:rotate(180deg); }

/* ============================================================
   MOBILE HEADER + SLIDE MENU + BOTTOM NAV (V2026 mobile app feel)
   ============================================================ */
@media (max-width:991px){
  /* --- 2. Minimal mobile header: only Menu + Notify + Theme --- */
  /* Hide logo, profile, logout, currency, language in the header bar */
  .dashboard .dash-header--left .site-name,
  .dashboard .dash-header--left img{ display:none !important; }
  .es26 .es-headbtn,                         /* Profile + Logout */
  .es26 .navbar-left-block{ display:none !important; } /* language */
  /* Theme toggle removed from mobile header (lives in side menu only) */
  .es26 .mode-btn{ display:none !important; }
  .es26 .es-headctrls{ height:60px !important; gap:8px; justify-content:flex-end; }
  .dashboard .dash-header{ padding:0 12px; }
  /* Mobile header shows: Menu (☰, in left) + Notifications + Currency */
  .es26 .es-notify, .es26 .dropdown-currencies{ display:inline-flex !important; }
  .es26 .dropdown-currencies .dropdown-toggle{ display:inline-flex !important; }
}

/* --- 3. Premium slide menu header (logo + user + balance + actions) --- */
.es-mmenu-head{ display:none; }
@media (max-width:991px){
  .es-mmenu-head{
    display:block; padding:18px 16px 14px;
    background:linear-gradient(150deg,var(--es-violet-900,#26215c),var(--es-violet-700,#3c3489));
    border-radius:0 0 18px 18px; margin:-1px -1px 14px;
  }
  .es-mmenu-logo img{ height:30px; width:auto; margin-bottom:14px; }
  .es-mmenu-user{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .es-mmenu-user img{ width:46px; height:46px; border-radius:12px; object-fit:cover; }
  .es-mmenu-uname{ color:#fff; font-size:15px; font-weight:600; }
  .es-mmenu-ubal{ color:var(--es-mint,#9fe1cb); font-size:13px; font-weight:600; margin-top:2px; }
  .es-mmenu-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .es-mmenu-act{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:11px 4px; border-radius:12px; text-decoration:none; cursor:pointer;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
    color:#fff; font-size:10.5px; font-weight:600; transition:background .15s,transform .1s;
  }
  .es-mmenu-act:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); color:#fff; }
  .es-mmenu-act i{ font-size:19px; }
  /* hide the old sidebar user tools / profile block on mobile (replaced by mmenu-head) */
  .dashboard .dash-sidebar .ds-user-tools,
  .dashboard .dash-sidebar #profile{ display:none !important; }
}

/* --- 4. Floating bottom navigation --- */
.es-botnav{ display:none; }
@media (max-width:991px){
  .es-botnav{
    display:flex; align-items:center; justify-content:space-around;
    position:fixed; left:12px; right:12px; bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:1095; height:64px; padding:0 8px;
    background:var(--es-surface,#1f1b2e); border:1px solid var(--es-border,#2e2a40);
    border-radius:20px; box-shadow:0 10px 30px rgba(16,16,40,.30);
  }
  body.light .es-botnav{ background:#fff; border-color:#e6e6f0; box-shadow:0 10px 30px rgba(16,16,40,.14); }
  .es-botnav__item{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    text-decoration:none; color:var(--es-text-3,#79748c); font-size:10.5px; font-weight:600;
    flex:1; padding:6px 0; transition:color .15s, transform .1s;
  }
  .es-botnav__item i{ font-size:21px; }
  .es-botnav__item.is-active{ color:var(--es-violet-300,#afa9ec); }
  body.light .es-botnav__item.is-active{ color:var(--es-violet-600,#534ab7); }
  .es-botnav__item:active{ transform:scale(.92); }
  .es-botnav__fab{
    flex:0 0 auto; width:56px; height:56px; margin-top:-22px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:linear-gradient(135deg,var(--es-violet-600,#534ab7),var(--es-violet-700,#3c3489));
    color:#fff; box-shadow:0 8px 22px rgba(83,74,183,.5); border:3px solid var(--es-surface,#1f1b2e);
  }
  body.light .es-botnav__fab{ border-color:#fff; }
  .es-botnav__fab i{ font-size:26px; }
  /* extra bottom clearance so content/sticky bar clear the floating nav */
  .es26 .site-content, .es26 .es-page{ padding-bottom:170px; }
  .es26 .es-stickybar{ bottom:calc(80px + env(safe-area-inset-bottom)); left:12px; right:12px; border-radius:16px; border:1px solid var(--es-border,#2e2a40); }
}

/* ============================================================
   FINAL QA OVERRIDES (appended last — authoritative)
   Removes favourites + floating charge/submit bar; keeps in-form
   submit on mobile; ensures bottom-nav-only fixed element.
   ============================================================ */

/* Favourites fully gone */
.es26 .es-heart, .es26 .es-favgrid, .es26 .es-favgrid--scroll,
.es26 .es-favcard, #es-fav-list{ display:none !important; }

/* Floating charge/submit bar fully gone (all breakpoints) */
.es26 .es-stickybar{ display:none !important; }

/* In-form submit MUST show on mobile (override previous hide rule) */
@media (max-width:991px){
  .es26 #order-form button[type="submit"]{ display:inline-flex !important; }
  /* Charge + submit scroll naturally inside the form; only bottom nav is fixed.
     Bottom padding clears the floating bottom nav (no sticky bar anymore). */
  .es26 .site-content, .es26 .es-page{ padding-bottom:96px !important; }
}

/* Select2 results: remove default list bullets, tidy spacing */
.es26 .select2-results__options,
.select2-results__options{ list-style:none !important; margin:0; padding:6px; }
.select2-results__option{ list-style:none !important; border-radius:8px; }
.select2-container--default .select2-results>.select2-results__options{ max-height:340px; }
/* Selected option subtle check */
.select2-container--default .select2-results__option[aria-selected=true]{ font-weight:600; }

/* Light theme dropdown: enforce readable option text (high specificity) */
body.light .select2-container--default .select2-results__option,
body.light .select2-dropdown .select2-results__option{ color:#1a1726 !important; }
body.light .select2-container--default .select2-results__option--highlighted,
body.light .select2-container--default .select2-results__option--highlighted[aria-selected]{ color:#fff !important; background:var(--es-violet-600,#534ab7) !important; }
body.light .select2-dropdown{ background:#fff !important; }

/* ============================================================
   FINAL QA BUGFIX PASS (appended last — authoritative)
   Issues: light header buttons, Benefits button area, blank space
   above mobile title, mobile header alignment, mmenu 3-col,
   currency action visibility, duplicate theme removed.
   ============================================================ */

/* ---- 1 & 3. Header buttons fully visible in BOTH themes ---- */
.es26 .es-headbtn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border-radius:var(--es-radius-ctrl,11px); border:1px solid var(--es-border);
  background:var(--es-surface); color:var(--es-text); font-size:13px;
  font-weight:600; text-decoration:none; white-space:nowrap;
}
.es26 .es-headbtn:hover{ background:var(--es-inset); }
body.light .es26 .es-headbtn{ background:#fff !important; color:#1a1726 !important; border-color:#e2e2ee !important; box-shadow:0 1px 2px rgba(16,16,40,.05); }
body.light .es26 .es-headbtn i{ color:#26215c !important; }
body.light .es26 .es-headbtn:hover{ background:#f4f4f9 !important; color:#26215c !important; }
/* icon-only header buttons (bell, currency, theme) */
body.light .es26 .es-iconbtn{ background:#fff !important; color:#26215c !important; border:1px solid #e2e2ee !important; box-shadow:0 1px 2px rgba(16,16,40,.05); }
body.light .es26 .es-iconbtn i, body.light .es26 #mode-icon{ color:#26215c !important; }

/* Issue 3: Funds (es-btn--light) + Benefits (es-btn--ghost) fully visible */
.es26 .es-btn--light{ background:#fff !important; color:var(--es-violet-900,#26215c) !important; border:1px solid rgba(255,255,255,.4); font-weight:600; }
.es26 .es-btn--light i{ color:var(--es-violet-900,#26215c) !important; }
.es26 .es-btn--ghost{ background:rgba(255,255,255,.14) !important; color:#fff !important; border:1px solid rgba(255,255,255,.30) !important; font-weight:600; }
.es26 .es-btn--ghost:hover{ background:rgba(255,255,255,.22) !important; }
/* In light theme the hero stays dark (gradient), so these stay as-is — readable on the purple hero */

/* ---- 4 & 9. Mobile header: kill blank space + align controls ---- */
@media (max-width:991px){
  /* Header must be a single centered row, fixed height — not a column */
  .dashboard .dash-header.flex-column{ flex-direction:row !important; }
  .dashboard .dash-header{ display:flex !important; flex-direction:row !important; align-items:center !important; height:58px !important; min-height:58px !important; padding:0 12px !important; }
  /* Remove the empty mobile-only spacer column that created the gap */
  .dashboard .dash-header .col.d-lg-none:empty,
  .dashboard .dash-header--left .col.d-lg-none:empty{ display:none !important; }
  /* Right controls centered within header height */
  .es26 .es-headctrls, .dashboard .dash-header--right{ height:58px !important; display:flex; align-items:center; gap:8px; margin-left:auto; }
  .es26 .es-iconbtn, .es26 .mode-btn, .es26 .es-notify__btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
  /* No extra top padding pushing the page title down */
  .es26 .es26-page, .es26 .site-content{ padding-top:14px !important; }
  /* Remove any second header row */
  .dashboard .dash-header > .row + .row,
  .dashboard .dash-header .col.align-self-center.d-flex.d-lg-none{ display:none !important; }
}

/* ---- 8. Mobile menu actions now 3 columns (Theme removed) ---- */
.es-mmenu-actions{ grid-template-columns:repeat(3,1fr) !important; }

/* ---- 7. Currency action: allow the header dropdown to show when triggered from menu ---- */
@media (max-width:991px){
  /* Currency dropdown (now directly in mobile header) — positions below button, on top of everything */
  .es26 .dropdown-currencies{ position:relative; }
  .es26 .dropdown-currencies .dropdown-menu{
    position:absolute; right:0; left:auto; top:calc(100% + 6px);
    z-index:2000; min-width:210px; max-height:62vh; overflow-y:auto;
    background:var(--es-surface); border:1px solid var(--es-border);
    border-radius:12px; box-shadow:0 14px 44px rgba(16,16,40,.34); padding:6px;
  }
  body.light .es26 .dropdown-currencies .dropdown-menu{ background:#fff; border-color:#e2e2ee; box-shadow:0 14px 44px rgba(16,16,40,.16); }
  .es26 .dropdown-currencies .dropdown-menu a{ color:var(--es-text); border-radius:8px; }
  body.light .es26 .dropdown-currencies .dropdown-menu a{ color:#1a1726; }
  .es26 .dropdown-currencies .dropdown-menu a:hover{ background:var(--es-inset); }
  body.light .es26 .dropdown-currencies .dropdown-menu a:hover{ background:#f4f4f9; }
}

/* ---- 5. CRITICAL: Submit button MUST be visible inside the form on mobile ---- */
/* Neutralize the older hide rule with equal-or-higher specificity. */
@media (max-width:991px){
  .es26 #order-form button[type="submit"],
  .es26 #order-form button[type="submit"]:not(.es-stickybar button){
    display:inline-flex !important; visibility:visible !important; opacity:1 !important;
    width:100%; align-items:center; justify-content:center;
  }
}

/* ============================================================
   FINAL PATCH PASS (appended last — authoritative)
   P4 bottom-nav light contrast · P5 mobile charge restore ·
   P6 mobile top spacing · P7 sidebar polish
   ============================================================ */

/* ---- P5. Mobile Charge: in-form charge field MUST show (was hidden) ---- */
@media (max-width:991px){
  .es26 .es-charge--informbar{ display:flex !important; align-items:center; justify-content:space-between; }
  .es26 .es-charge__v #charge{ color:inherit; }
}

/* ---- P4. Bottom navigation — LIGHT THEME contrast only (dark unchanged) ---- */
@media (max-width:991px){
  /* Dark theme: keep the intended muted color (guard against broad white !important link rules) */
  body.dark .es-botnav__item{ color:var(--es-text-3,#79748c) !important; }
  body.dark .es-botnav__item i, body.dark .es-botnav__item span{ color:inherit !important; }
  body.dark .es-botnav__item.is-active{ color:var(--es-violet-300,#afa9ec) !important; }
  body.dark .es-botnav__item.is-active i, body.dark .es-botnav__item.is-active span{ color:var(--es-violet-300,#afa9ec) !important; }
  body.light .es-botnav{ background:#ffffff; border-color:#e4e4ef; box-shadow:0 8px 28px rgba(16,16,40,.12); }
  body.light .es-botnav__item{ color:#5a5670 !important; }
  body.light .es-botnav__item i{ color:#5a5670 !important; }
  body.light .es-botnav__item span{ color:#5a5670 !important; }
  body.light .es-botnav__item.is-active{ color:var(--es-violet-600,#534ab7) !important; }
  body.light .es-botnav__item.is-active i,
  body.light .es-botnav__item.is-active span{ color:var(--es-violet-600,#534ab7) !important; }
  body.light .es-botnav__fab{ background:linear-gradient(135deg,#534ab7,#3c3489); color:#fff !important; border-color:#fff; }
  body.light .es-botnav__fab i{ color:#fff !important; }
}

/* ---- P6. Mobile top spacing: tighten gap between header and page title ---- */
@media (max-width:991px){
  .es26 .es26-page, .es26 .site-content{ padding-top:8px !important; }
  /* ISSUE 2 REAL CAUSE: .site-content has margin-top:80px to clear the desktop
     80px fixed header, but the mobile header is only 58px — leaving ~30px blank.
     Match the margin-top to the actual mobile header height. */
  .dashboard .site-content{ margin-top:58px !important; }
  .es26 .es26-page{ padding-top:6px !important; }
  /* Kill any extra leading gap before the page title */
  .es26 .es26-page > :first-child{ margin-top:0 !important; }
  .es26 .es26-page > :first-child{ margin-top:0 !important; }
  /* collapse any empty leading spacer rows */
  .dashboard .dash-header + *{ margin-top:0 !important; }
}

/* ---- P7. Desktop sidebar polish (structure/links/icons unchanged) ---- */
@media (min-width:992px){
  .dashboard .dash-sidebar{ border-right:1px solid var(--es-border); }
  .dashboard .ds-menu li > a{
    border-radius:11px; margin:2px 8px; padding:11px 14px;
    transition:background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
  }
  .dashboard .ds-menu li > a:hover{ background:var(--es-inset); transform:translateX(2px); }
  .dashboard .ds-menu li.active > a,
  .dashboard .ds-menu li > a.active{
    box-shadow:0 6px 18px rgba(83,74,183,.34);
  }
  .dashboard .ds-menu li > a i,
  .dashboard .ds-menu li > a .ti{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; }
  /* Scrollbar */
  .dashboard .dash-sidebar .ds-content::-webkit-scrollbar{ width:7px; }
  .dashboard .dash-sidebar .ds-content::-webkit-scrollbar-thumb{ background:var(--es-border-2,#3c3658); border-radius:8px; }
  .dashboard .dash-sidebar .ds-content::-webkit-scrollbar-track{ background:transparent; }
  /* Light theme sidebar */
  body.light .dashboard .dash-sidebar{ background:#ffffff; border-right:1px solid #ececf4; }
  body.light .dashboard .ds-menu li > a{ color:#3a3650; }
  body.light .dashboard .ds-menu li > a:hover{ background:#f4f4f9; color:#26215c; }
  body.light .dashboard .ds-menu li.active > a,
  body.light .dashboard .ds-menu li > a.active{ color:#fff; }
  /* Dark theme sidebar refinement */
  body.dark .dashboard .dash-sidebar{ background:var(--es-surface); }
  body.dark .dashboard .ds-menu li > a:hover{ background:rgba(255,255,255,.05); }
}

/* ============================================================
   FINAL PATCH R — unified dropdowns, sidebar redesign, mobile spacing
   ============================================================ */

/* ---- Category Select2: default (enabled) search box ---- */
/* The prior "focusable-but-invisible" hide override was removed. Category now uses
   Select2's default search (minimumResultsForSearch left at default), exactly like
   the previously-working production theme, so the search input renders normally and
   is genuinely focusable. That real focus target is what prevents the open->blur->
   close race (the jump/flicker/auto-close/auto-select-first). The search field is
   themed for dark/light by the existing .select2-search__field rules above.
   (Service is a native <select> and has no Select2 search, so it is unaffected.) */

/* Identical dropdown panel for category + service.
   NOTE: Select2 appends .select2-dropdown to <body>, OUTSIDE the .es26 scope,
   so the --es-* theme variables are UNDEFINED there. Every value below carries
   a hardcoded DARK fallback (matching body.dark .es26 tokens) so the panel is a
   proper dark surface by default even at body level. body.light overrides follow. */
.es26 .select2-container--default .select2-dropdown,
.select2-container--default .select2-dropdown,
.select2-dropdown{
  background:var(--es-surface,#1F1B2E) !important;
  border:1px solid var(--es-border,#2E2A40) !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:0 14px 44px rgba(16,16,40,.30) !important;
  margin-top:6px;
}
/* Identical option rows */
.es26 .select2-container--default .select2-results__option,
.select2-container--default .select2-results__option{
  color:var(--es-text,#E8E6F0) !important; padding:11px 14px !important;
  font-size:14px !important; line-height:1.4; transition:background .12s;
}
.es26 .select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted{
  background:var(--es-violet-600,#534ab7) !important; color:#fff !important;
}
.es26 .select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true]{
  background:var(--es-inset,#15121F) !important; color:var(--es-text,#E8E6F0) !important; font-weight:600;
}
/* Identical results list + scrollbar */
.es26 .select2-results__options,
.select2-results__options{ max-height:340px !important; overflow-y:auto; list-style:none !important; margin:0; padding:6px !important; scrollbar-width:thin; }
.es26 .select2-results__options::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar{ width:8px; }
.es26 .select2-results__options::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb{ background:var(--es-border-2,#3c3658); border-radius:8px; }
.es26 .select2-results__options::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track{ background:transparent; }
.select2-results__option{ list-style:none !important; border-radius:8px; }
/* Identical selection box (closed state) for both */
.es26 .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single{
  height:46px !important; border-radius:var(--es-radius-ctrl,12px) !important;
  background:var(--es-inset,#15121F) !important; border:1px solid var(--es-border,#2E2A40) !important;
  display:flex; align-items:center; padding:0 14px;
}
.es26 .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--es-text,#E8E6F0) !important; line-height:44px !important; padding:0;
}
/* Light theme parity for both dropdowns */
body.light .es26 .select2-dropdown,
body.light .select2-dropdown{ background:#fff !important; border-color:#e2e2ee !important; box-shadow:0 14px 44px rgba(16,16,40,.14) !important; }
body.light .es26 .select2-container--default .select2-results__option,
body.light .select2-container--default .select2-results__option{ color:#1a1726 !important; }
body.light .es26 .select2-container--default .select2-results__option[aria-selected=true],
body.light .select2-container--default .select2-results__option[aria-selected=true]{ background:#f4f4f9 !important; color:#1a1726 !important; }
body.light .es26 .select2-container .select2-selection--single,
body.light .select2-container--default .select2-selection--single{ background:#f4f4f9 !important; border-color:#e2e2ee !important; }
body.light .es26 .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#1a1726 !important; }

/* ---- Category icon wrapper (restored backend icons: icon / emoji / image) ---- */
/* The <option data-icon> HTML is emitted verbatim inside .es-cat-ico. Constrain
   images so the original .img-responsive class cannot stretch them, and align the
   glyph/emoji/image neatly with the label in both the list and the closed box. */
.select2-container .es-cat-ico{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-right:2px; vertical-align:middle; line-height:1; }
.select2-container .es-cat-ico img{ max-width:18px; max-height:18px; width:auto; height:auto; border-radius:3px; display:block; }
.select2-container .es-cat-ico span{ display:inline-flex; align-items:center; line-height:1; }

/* ---- 1. DESKTOP SIDEBAR — V2026 visual redesign (structure/links/icons unchanged) ---- */
/* Matches base specificity (.dashboard .dash-sidebar .ds-content .ds-menu > li > a) so it wins. */
@media (min-width:992px){
  .dashboard .dash-sidebar{
    background:var(--es-surface) !important;
    border-right:1px solid var(--es-border);
  }
  .dashboard .dash-sidebar .ds-content .ds-menu{ margin:0 -8px; padding:4px 0; }
  .dashboard .dash-sidebar .ds-content .ds-menu > li > a{
    color:var(--es-text-2,#b9b5c9) !important;
    font-size:14.5px !important;
    font-weight:600 !important;
    line-height:22px !important;
    padding:11px 14px !important;
    margin:3px 8px !important;
    border-radius:12px !important;
    display:flex !important; align-items:center;
    transition:background .18s ease, color .18s ease, box-shadow .2s ease, transform .14s ease !important;
  }
  .dashboard .dash-sidebar .ds-content .ds-menu > li > a .link-icon,
  .dashboard .dash-sidebar .ds-content .ds-menu > li > a i,
  .dashboard .dash-sidebar .ds-content .ds-menu > li > a .ti{
    width:24px !important; min-width:24px; height:24px; margin-right:11px !important;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* Hover — subtle inset + slide, V2026 purple text */
  .dashboard .dash-sidebar .ds-content .ds-menu > li > a:hover{
    background:var(--es-inset) !important;
    color:var(--es-text) !important;
    transform:translateX(3px);
  }
  /* Active — V2026 purple gradient + glow */
  .dashboard .dash-sidebar .ds-content .ds-menu > li.active a,
  .dashboard .dash-sidebar .ds-content .ds-menu > li.active > a{
    background:linear-gradient(135deg,var(--es-violet-600,#534ab7),var(--es-violet-700,#3c3489)) !important;
    color:#fff !important;
    box-shadow:0 8px 22px rgba(83,74,183,.45) !important;
  }
  .dashboard .dash-sidebar .ds-content .ds-menu > li.active a *{ color:#fff !important; }
  /* Scrollbar */
  .dashboard .dash-sidebar .ds-content::-webkit-scrollbar{ width:7px; }
  .dashboard .dash-sidebar .ds-content::-webkit-scrollbar-thumb{ background:var(--es-border-2,#3c3658); border-radius:8px; }
  .dashboard .dash-sidebar .ds-content::-webkit-scrollbar-track{ background:transparent; }

  /* DARK theme */
  body.dark .dashboard .dash-sidebar{ background:var(--es-surface) !important; }
  body.dark .dashboard .dash-sidebar .ds-content .ds-menu > li > a{ color:var(--es-text-2,#b9b5c9) !important; }
  body.dark .dashboard .dash-sidebar .ds-content .ds-menu > li > a:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }

  /* LIGHT theme */
  body.light .dashboard .dash-sidebar{ background:#ffffff !important; border-right:1px solid #ececf4; }
  body.light .dashboard .dash-sidebar .ds-content .ds-menu > li > a{ color:#3a3650 !important; }
  body.light .dashboard .dash-sidebar .ds-content .ds-menu > li > a:hover{ background:#f4f4f9 !important; color:#26215c !important; transform:translateX(3px); }
  body.light .dashboard .dash-sidebar .ds-content .ds-menu > li.active a,
  body.light .dashboard .dash-sidebar .ds-content .ds-menu > li.active > a{
    background:linear-gradient(135deg,var(--es-violet-600,#534ab7),var(--es-violet-700,#3c3489)) !important;
    color:#fff !important; box-shadow:0 8px 22px rgba(83,74,183,.32) !important;
  }
}


/* ===========================================================
   ELITESMM V2026 FOUNDATION
   Reusable, prefix: es-fx-  ·  Appended only — nothing above
   is modified, renamed, reordered, or removed. Inherits the
   existing .es26 design tokens (--es-*). Safe for future pages
   (Orders, Tickets, History, API, Child Panel, Affiliates...).
   These components must NOT be used to restyle the live New
   Order page; they are additive building blocks only.
   =========================================================== */

/* --- Foundation: page wrapper (standard page rhythm) --- */
.es26 .es-fx-page{ padding:18px; display:flex; flex-direction:column; gap:16px; max-width:100%; }
@media (max-width:768px){ .es26 .es-fx-page{ padding:14px; gap:14px; } }
@media (max-width:360px){ .es26 .es-fx-page{ padding:12px; gap:12px; } }

/* --- Foundation: section header (eyebrow + title + optional action) --- */
.es26 .es-fx-shead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.es26 .es-fx-shead__main{ display:flex; align-items:center; gap:10px; min-width:0; }
.es26 .es-fx-shead__ico{ width:32px; height:32px; border-radius:9px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:17px; background:var(--es-violet-50); color:var(--es-violet-600); }
body.dark .es26 .es-fx-shead__ico{ background:#2C2752; color:var(--es-violet-200); }
.es26 .es-fx-shead__title{ font-size:15px; font-weight:500; color:var(--es-text); line-height:1.3; overflow-wrap:anywhere; }
.es26 .es-fx-shead__sub{ font-size:12px; color:var(--es-text-2); margin-top:1px; }

/* --- Foundation: stat block (label over value; for wallet/overview cards) --- */
.es26 .es-fx-stat{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.es26 .es-fx-stat__l{ font-size:11px; font-weight:500; color:var(--es-text-3); text-transform:uppercase; letter-spacing:.05em; }
.es26 .es-fx-stat__v{ font-size:22px; font-weight:500; color:var(--es-text); line-height:1.15; overflow-wrap:anywhere; }
.es26 a.es-fx-stat{ text-decoration:none; }
@media (max-width:768px){ .es26 .es-fx-stat__v{ font-size:18px; } }
@media (max-width:414px){ .es26 .es-fx-stat__v{ font-size:16px; } }

/* --- Foundation: trust strip (security reassurance row) --- */
.es26 .es-fx-trust{ display:flex; align-items:center; gap:9px; padding:11px 13px; background:var(--es-inset); border-radius:var(--es-radius-ctrl); font-size:12px; color:var(--es-text-2); line-height:1.45; }
.es26 .es-fx-trust__ico{ color:var(--es-teal); font-size:15px; flex-shrink:0; }
.es26 .es-fx-trust b{ color:var(--es-text); font-weight:500; }

/* --- Foundation: empty state (dashed invitation block) --- */
.es26 .es-fx-empty{ border:1px dashed var(--es-border-2); border-radius:var(--es-radius-ctrl); padding:22px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; }
.es26 .es-fx-empty__ico{ font-size:24px; color:var(--es-violet-600); }
body.dark .es26 .es-fx-empty__ico{ color:var(--es-violet-200); }
.es26 .es-fx-empty__title{ font-size:13px; font-weight:500; color:var(--es-text); }
.es26 .es-fx-empty__hint{ font-size:11px; color:var(--es-text-3); max-width:34ch; line-height:1.5; }

/* --- Foundation: placeholder (phase scaffolding; quietly removable later) --- */
.es26 .es-fx-ph{ border:1px dashed var(--es-border-2); border-radius:var(--es-radius-ctrl); padding:18px 16px; display:flex; align-items:center; gap:11px; color:var(--es-text-3); font-size:12.5px; line-height:1.5; }
.es26 .es-fx-ph__ico{ font-size:19px; color:var(--es-violet-600); flex-shrink:0; }
body.dark .es26 .es-fx-ph__ico{ color:var(--es-violet-200); }
.es26 .es-fx-ph__b{ font-weight:500; color:var(--es-text-2); }

/* --- Foundation: two-column grid w/ sticky rail (Order-style, new class) --- */
.es26 .es-fx-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start; }
.es26 .es-fx-rail{ align-self:start; position:sticky; top:16px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.es26 .es-fx-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
@media (max-width:991px){
  .es26 .es-fx-grid{ grid-template-columns:1fr; }
  .es26 .es-fx-rail{ position:static; order:2; }
  .es26 .es-fx-col{ order:1; }
}

/* --- Foundation: skeleton shimmer utility --- */
.es26 .es-fx-skel{ position:relative; overflow:hidden; background:var(--es-inset); border-radius:8px; }
.es26 .es-fx-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--es-border-2), transparent); opacity:.55; animation:es-fx-shimmer 1.2s linear infinite; }
@keyframes es-fx-shimmer{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .es26 .es-fx-skel::after{ animation:none; display:none; } }


/* ===========================================================
   ELITESMM V2026 ADD FUNDS
   Page-specific, prefix: es-af-  ·  Appended only.
   Scoped under .es26 #es-af-page so it cannot reach any other
   page. Reuses .es26 tokens + es-fx- foundation. No existing
   rule is touched; New Order is unaffected.
   =========================================================== */

/* --- Hero (Add Funds banner; reuses hero look, own class) --- */
.es26 #es-af-page .es-af-hero{ position:relative; overflow:hidden; background:var(--es-violet-900); border-radius:var(--es-radius-hero); padding:22px 24px; color:var(--es-hero-text); }
.es26 #es-af-page .es-af-hero__orb1{ position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:var(--es-violet-600); opacity:.35; pointer-events:none; }
.es26 #es-af-page .es-af-hero__orb2{ position:absolute; right:64px; bottom:-60px; width:140px; height:140px; border-radius:50%; background:var(--es-violet-400); opacity:.25; pointer-events:none; }
.es26 #es-af-page .es-af-hero__inner{ position:relative; z-index:2; }
.es26 #es-af-page .es-af-hero__title{ font-size:20px; font-weight:500; margin:0 0 4px; color:#fff; overflow-wrap:anywhere; }
.es26 #es-af-page .es-af-hero__sub{ font-size:13px; color:var(--es-violet-100); margin:0; max-width:52ch; line-height:1.5; }
@media (max-width:768px){ .es26 #es-af-page .es-af-hero{ padding:16px; } .es26 #es-af-page .es-af-hero__title{ font-size:18px; } }
@media (max-width:320px){ .es26 #es-af-page .es-af-hero{ padding:13px; } .es26 #es-af-page .es-af-hero__title{ font-size:16px; } }

/* --- Wallet summary --- */
.es26 #es-af-page .es-af-wallet{ padding:17px 18px; }
.es26 #es-af-page .es-af-wallet__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.es26 #es-af-page .es-af-wallet__stats{ display:flex; gap:30px; flex-wrap:wrap; min-width:0; }
.es26 #es-af-page .es-af-wallet__level{ width:230px; max-width:100%; }
.es26 #es-af-page .es-af-wallet__lvlhead{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.es26 #es-af-page .es-af-wallet__lvlmeta-l{ font-size:10px; color:var(--es-text-3); }
.es26 #es-af-page .es-af-wallet__lvlmeta-v{ font-size:14px; font-weight:500; color:var(--es-text); }
.es26 #es-af-page .es-af-wallet__next{ font-size:11px; color:var(--es-text-2); margin-top:6px; }
@media (max-width:768px){
  .es26 #es-af-page .es-af-wallet__stats{ gap:18px; width:100%; }
  .es26 #es-af-page .es-af-wallet__level{ width:100%; }
}
@media (max-width:414px){ .es26 #es-af-page .es-af-wallet__stats{ gap:14px; } }

/* --- Add Funds card (generic surface used by the page's cards) --- */
.es26 #es-af-page .es-af-card{ background:var(--es-surface); border:1px solid var(--es-border); border-radius:var(--es-radius-card); padding:17px 18px; }
body.light .es26 #es-af-page .es-af-card{ box-shadow:0 1px 3px rgba(16,16,40,.05),0 8px 24px rgba(16,16,40,.04); }
@media (max-width:480px){ .es26 #es-af-page .es-af-card{ padding:14px; } }
@media (max-width:320px){ .es26 #es-af-page .es-af-card{ padding:12px; } }

/* Phase-1 card min-height so empty scaffolding reads intentionally */
.es26 #es-af-page .es-af-card--scaffold{ min-height:104px; }

/* --- Tab pills (restyled, hooks preserved) — scoped to this page --- */
.es26 #es-af-page .es-af-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.es26 #es-af-page .es-af-tabs .nav-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--es-radius-pill); font-size:13px; font-weight:500; border:1px solid var(--es-border); background:var(--es-surface); color:var(--es-text-2); cursor:pointer; transition:all .15s; }
.es26 #es-af-page .es-af-tabs .nav-link:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 #es-af-page .es-af-tabs .nav-link.active{ background:var(--es-violet-900); color:#fff; border-color:var(--es-violet-900); box-shadow:0 4px 14px rgba(83,74,183,.30); }

/* --- Keep the live form fully functional but visually neutral in Phase 1 --- */
/* (no engine/markup change; just spacing so the preserved form sits tidily) */
.es26 #es-af-page .es-af-formhost .form-group{ margin-bottom:13px; }
.es26 #es-af-page .es-af-formhost .control-label{ font-size:11px; font-weight:500; color:var(--es-text-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; display:block; }
.es26 #es-af-page .es-af-formhost .form-control{ height:46px; border-radius:var(--es-radius-ctrl); background:var(--es-inset); border:1px solid var(--es-border); color:var(--es-text); width:100%; padding:0 14px; }
.es26 #es-af-page .es-af-formhost textarea.form-control{ height:auto; padding:10px 14px; }
.es26 #es-af-page .es-af-formhost .form-control:focus{ border-color:var(--es-violet-400); outline:none; }
.es26 #es-af-page .es-af-formhost button[type="submit"]{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; font-size:14px; font-weight:500; border-radius:var(--es-radius-ctrl); cursor:pointer; border:none; padding:13px 18px; line-height:1; background:var(--es-violet-600); color:#fff; transition:background .15s; }
.es26 #es-af-page .es-af-formhost button[type="submit"]:hover{ background:var(--es-violet-800); color:#fff; }

/* --- History table → neutral, readable inside the rail (Phase-1 minimal) --- */
.es26 #es-af-page .es-af-history .table{ width:100%; background:transparent !important; }
.es26 #es-af-page .es-af-history .table th{ font-size:11px; font-weight:500; color:var(--es-text-3); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:8px 10px; border-bottom:1px solid var(--es-border); }
.es26 #es-af-page .es-af-history .table td{ font-size:13px; color:var(--es-text); padding:10px; border-bottom:1px solid var(--es-border); }
.es26 #es-af-page .es-af-history .pagination{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:14px 0 0; }
.es26 #es-af-page .es-af-history .pagination a{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border-radius:9px; border:1px solid var(--es-border); color:var(--es-text-2); text-decoration:none; font-size:13px; transition:all .15s; }
.es26 #es-af-page .es-af-history .pagination a:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 #es-af-page .es-af-history .pagination .active a{ background:var(--es-violet-900); color:#fff; border-color:var(--es-violet-900); pointer-events:none; }
@media (max-width:768px){
  .es26 #es-af-page .es-af-history .table,
  .es26 #es-af-page .es-af-history .table tbody,
  .es26 #es-af-page .es-af-history .table tr,
  .es26 #es-af-page .es-af-history .table td{ display:block; width:100%; }
  .es26 #es-af-page .es-af-history .table thead{ display:none; }
  .es26 #es-af-page .es-af-history .table tr{ border:1px solid var(--es-border); border-radius:var(--es-radius-ctrl); padding:10px 12px; margin-bottom:8px; }
  .es26 #es-af-page .es-af-history .table td{ border-bottom:none; padding:3px 0; }
}

/* --- Support card actions --- */
.es26 #es-af-page .es-af-support__actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.es26 #es-af-page .es-af-support__btn{ flex:1; min-width:130px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 14px; border-radius:var(--es-radius-ctrl); font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; transition:all .15s; }
.es26 #es-af-page .es-af-support__btn--primary{ background:var(--es-violet-600); color:#fff; border:none; }
.es26 #es-af-page .es-af-support__btn--primary:hover{ background:var(--es-violet-800); color:#fff; }
.es26 #es-af-page .es-af-support__btn--ghost{ background:var(--es-surface); color:var(--es-text-2); border:1px solid var(--es-border); }
.es26 #es-af-page .es-af-support__btn--ghost:hover{ border-color:var(--es-border-2); color:var(--es-text); }

/* --- Bottom-nav / sticky clearance on mobile (page-local, additive) --- */
@media (max-width:991px){ .es26 #es-af-page{ padding-bottom:24px; } }


/* ===========================================================
   ELITESMM V2026 ADD FUNDS — FIX PASS (appended, authoritative)
   1) Binance/engine modal positioning hardening (CSS-only)
   2) Bottom-nav safe spacing
   3) Visual polish (spacing/align/shadow/type)
   No backend logic, no modal engine, no JS touched here.
   =========================================================== */

/* ---- 1. Engine modal: pin fixed overlay to the viewport ----
   The engine renders a Bootstrap-style overlay (.modal.binance-modal).
   A position:fixed element only stays viewport-centered when it is
   actually pinned on all sides and no ancestor transforms it. We pin
   it and let its dialog center via flex — without altering contents,
   classes the engine toggles (.fade/.in/.show), or any JS.
   Scoped to the known engine modal class so nothing else is affected. */
.modal.binance-modal{
  position:fixed !important;
  inset:0 !important;                 /* top/right/bottom/left:0 */
  margin:0 !important;
  width:100% !important; height:100% !important;
  max-width:100% !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  display:none;                        /* engine flips to block/show */
  z-index:1100 !important;
}
.modal.binance-modal.in,
.modal.binance-modal.show{ display:block !important; }
/* ---- BOOTSTRAP VERSION-MISMATCH BRIDGE (the real root cause) ----
   PROVEN: bootstrap.css is v4.5.0 but bootstrap.js is v3.3.7.
   • bootstrap.css:5534  `.modal.fade .modal-dialog { transform: translate(0,-50px) }`
     starts the dialog 50px HIGH (the fade-in start position).
   • bootstrap.css:5546  `.modal.show .modal-dialog { transform: none }`
     is the ONLY rule that clears that offset — it needs the `.show` class.
   • bootstrap.js:1081   the v3 JS adds `.in`, NOT `.show`
     (verified: bootstrap.css has 0 rules matching `.modal.in .modal-dialog`).
   Result: `.show` is never added, so the -50px transform is NEVER cleared,
   and the dialog is permanently pulled 50px up → it touches/clips the top.
   The amount of visible clipping shifts with scrollbar width, DPI scaling
   and zoom, which is why it differed across PCs and zoom levels. The default
   theme hid this because its `.modal-dialog{ margin-top:250px }` buffer
   absorbed the -50px; V2026 replaced that buffer, exposing the bug.
   FIX: clear the fade transform on the `.in` class the v3 JS actually adds
   (and keep `.show` for safety). One declaration; no JS, no version swap. */
.modal.binance-modal.in .modal-dialog,
.modal.binance-modal.show .modal-dialog{
  -webkit-transform:none !important;
  transform:none !important;
}
/* Dialog spacing: Bootstrap-native block flow (matches default theme).
   ROOT CAUSE (proven by cascade trace): the winning rule for .modal-dialog
   was THIS selector (highest specificity 0,0,3,0 + !important on margin),
   and it set `display:flex; align-items:center; min-height:100%`. Centering
   a near-viewport-height dialog sits at the fit/overflow boundary, which
   sub-pixel-rounds differently per display scaling and browser zoom — so
   the top touched/clipped on some PCs/zooms and not others. The default
   theme has NO such rule, so Bootstrap's block flow (margin + overlay
   scroll) applies and is stable everywhere.
   Fix: drop flex + min-height so this dialog flows from the top with a
   margin, exactly like the default theme. Keep the !important margin so it
   still beats the base `.modal-dialog{ margin-top:250px }`. */
.modal.binance-modal .modal-dialog{
  margin:1.75rem auto !important;
  max-width:480px; width:calc(100% - 24px);
  box-sizing:border-box;
}
.modal.binance-modal .modal-content{ width:100%; margin:0 auto; }
/* iOS Safari: use small-viewport units where supported so the dynamic
   toolbar can't change the overlay height. Overlay only — the dialog has
   NO min-height so it can never be forced to viewport height. */
@supports (height: 100svh){
  .modal.binance-modal{ height:100svh !important; }
}
/* Lock background scroll when a modal is open (engine adds modal-open to body) */
body.modal-open{ overflow:hidden; }

/* ---- 2. Bottom-nav safe spacing (content never hidden behind floating nav) ----
   Floating bottom nav is ~64px tall, offset ~8px, plus iOS safe area.
   Give the page generous, predictable clearance on mobile/tablet. */
@media (max-width:991px){
  .es26 #es-af-page{
    padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---- 3. Visual polish (Add Funds only) ---- */
/* Card surface: unify radius/shadow rhythm; dark uses border, light soft shadow */
.es26 #es-af-page .es-af-card{ transition:border-color .15s ease, box-shadow .2s ease; }
body.dark .es26 #es-af-page .es-af-card{ box-shadow:0 1px 2px rgba(0,0,0,.18); }
/* Wallet: align level box baseline with stats on wide screens */
.es26 #es-af-page .es-af-wallet__row{ align-items:flex-start; }
.es26 #es-af-page .es-af-wallet__stats{ padding-top:2px; }
/* Section headers: tighten icon-to-text optical alignment */
.es26 #es-af-page .es-fx-shead{ margin-bottom:14px; }
.es26 #es-af-page .es-fx-shead__title{ letter-spacing:-.01em; }
/* Trust strip: slightly stronger affordance, consistent with cards */
.es26 #es-af-page .es-fx-trust{ border:1px solid var(--es-border); }
/* Hero sub: comfortable measure on large screens */
.es26 #es-af-page .es-af-hero__sub{ line-height:1.55; }
/* Form host: consistent vertical rhythm + larger tap target on Pay */
.es26 #es-af-page .es-af-formhost .form-group:last-of-type{ margin-bottom:14px; }
.es26 #es-af-page .es-af-formhost button[type="submit"]{ min-height:48px; box-shadow:0 6px 18px rgba(83,74,183,.28); }
.es26 #es-af-page .es-af-formhost button[type="submit"]:active{ transform:translateY(1px); }
/* Support buttons: equal height, crisp icon baseline */
.es26 #es-af-page .es-af-support__btn{ min-height:44px; }
/* Pagination focus ring parity */
.es26 #es-af-page .es-af-history .pagination a:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }


/* ===========================================================
   ELITESMM V2026 FOUNDATION — PAYMENT SELECTOR
   Reusable card-grid selector. Prefix: es-fx-pm-
   Drives a hidden <select> as the single source of truth.
   Reusable across future pages (any "pick one of N" backed by
   a native select). Appended only; inherits .es26 tokens.
   =========================================================== */
.es26 .es-fx-pmgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:1200px){ .es26 .es-fx-pmgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:991px){ .es26 .es-fx-pmgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px){ .es26 .es-fx-pmgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:360px){ .es26 .es-fx-pmgrid{ grid-template-columns:1fr; } }

.es26 .es-fx-pmcard{
  position:relative; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:9px;
  background:var(--es-surface); border:1px solid var(--es-border);
  border-radius:var(--es-radius-card); padding:13px 13px 12px;
  transition:border-color .15s ease, box-shadow .2s ease, transform .12s ease, background .15s ease;
  min-width:0; width:100%; font:inherit; color:var(--es-text);
  -webkit-tap-highlight-color:transparent;
}
.es26 .es-fx-pmcard:hover{ border-color:var(--es-violet-200); transform:translateY(-2px); }
body.dark .es26 .es-fx-pmcard:hover{ border-color:var(--es-violet-400); }
.es26 .es-fx-pmcard:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }

/* Selected state — violet ring + glow + check */
.es26 .es-fx-pmcard.is-active{
  border-color:var(--es-violet-600);
  box-shadow:0 4px 16px rgba(83,74,183,.34);
}
body.dark .es26 .es-fx-pmcard.is-active{ background:rgba(83,74,183,.10); }
body.light .es26 .es-fx-pmcard.is-active{ background:var(--es-violet-50); }

/* Head row: icon + name */
.es26 .es-fx-pmcard__head{ display:flex; align-items:center; gap:10px; min-width:0; }
.es26 .es-fx-pmcard__icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; font-size:19px;
  background:var(--es-violet-50); color:var(--es-violet-600); overflow:hidden;
}
body.dark .es26 .es-fx-pmcard__icon{ background:#2C2752; color:var(--es-violet-200); }
.es26 .es-fx-pmcard__icon img{ width:24px; height:24px; object-fit:contain; display:block; }
.es26 .es-fx-pmcard__name{ font-size:13.5px; font-weight:500; line-height:1.25; overflow-wrap:anywhere; }

/* Check badge (selected) */
.es26 .es-fx-pmcard__check{
  position:absolute; top:9px; right:9px;
  width:20px; height:20px; border-radius:50%;
  background:var(--es-violet-600); color:#fff;
  display:none; align-items:center; justify-content:center; font-size:12px;
  transform:scale(.4); transition:transform .14s ease;
}
.es26 .es-fx-pmcard.is-active .es-fx-pmcard__check{ display:inline-flex; transform:scale(1); }
@media (prefers-reduced-motion:reduce){
  .es26 .es-fx-pmcard,.es26 .es-fx-pmcard__check{ transition:none; }
  .es26 .es-fx-pmcard:hover{ transform:none; }
}

/* Badge row: bonus / instant / manual / popular / type */
.es26 .es-fx-pmcard__badges{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.es26 .es-fx-pmbadge{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:7px; font-size:10.5px; font-weight:500; line-height:1.4; white-space:nowrap;
}
.es26 .es-fx-pmbadge i{ font-size:11px; }
.es26 .es-fx-pmbadge--bonus{ background:var(--es-amber-l); color:var(--es-amber-d); }
.es26 .es-fx-pmbadge--instant{ background:var(--es-teal-l); color:var(--es-teal-d); }
.es26 .es-fx-pmbadge--manual{ background:var(--es-blue-l); color:var(--es-blue-d); }
.es26 .es-fx-pmbadge--popular{ background:var(--es-pink-l); color:var(--es-pink-d); }
.es26 .es-fx-pmbadge--type{ background:var(--es-inset); color:var(--es-text-2); }
body.dark .es26 .es-fx-pmbadge--bonus{ background:#4A3208; color:#FAC775; }
body.dark .es26 .es-fx-pmbadge--instant{ background:#0F3D32; color:#5DCAA5; }
body.dark .es26 .es-fx-pmbadge--manual{ background:#103458; color:#85B7EB; }
body.dark .es26 .es-fx-pmbadge--popular{ background:#4B1528; color:#ED93B1; }
body.dark .es26 .es-fx-pmbadge--type{ background:var(--es-inset); color:var(--es-text-2); }

/* Footer line: short payment type text */
.es26 .es-fx-pmcard__type{ font-size:11px; color:var(--es-text-3); margin-top:auto; }

/* When the selector is active, the native select is visually hidden but
   remains in the DOM, accessible, and the single backend source of truth. */
.es26 .es-fx-pmselect-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ===========================================================
   ELITESMM V2026 ADD FUNDS — PAYMENT SELECTOR (page glue)
   Prefix: es-af-  ·  scoped under #es-af-page
   =========================================================== */
.es26 #es-af-page .es-af-methods .es-fx-pmgrid{ margin-top:2px; }
.es26 #es-af-page .es-af-methods .form-group--method{ margin-bottom:13px; }
/* The original method label sits above the card grid */
.es26 #es-af-page .es-af-methods .control-label{ margin-bottom:8px; }


/* ===========================================================
   ELITESMM V2026 FOUNDATION — PAYMENT SELECTOR: SCROLL VARIANT
   Reusable. Prefix: es-fx-pm-  ·  Appended only.
   Adds a horizontally-scrollable layout + arrow controls and a
   "keep native select visible" companion. No existing rule is
   modified; the base grid component is untouched.
   =========================================================== */

/* Wrapper holds the rail + optional arrows */
.es26 .es-fx-pmscroll{ position:relative; }
.es26 .es-fx-pmscroll__rail{
  display:flex; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 8px; margin:0; max-width:100%;
  scrollbar-width:none; -ms-overflow-style:none;
}
.es26 .es-fx-pmscroll__rail::-webkit-scrollbar{ display:none; height:0; }

/* In scroll mode each card is a fixed-ish width snap item (not full grid) */
.es26 .es-fx-pmscroll .es-fx-pmcard{
  scroll-snap-align:start; flex:0 0 auto;
  width:172px; max-width:74vw;
}
@media (max-width:480px){ .es26 .es-fx-pmscroll .es-fx-pmcard{ width:158px; } }
@media (max-width:360px){ .es26 .es-fx-pmscroll .es-fx-pmcard{ width:150px; } }

/* Arrow controls (desktop affordance; hidden on coarse pointers) */
.es26 .es-fx-pmscroll__arrow{
  position:absolute; top:calc(50% - 4px); transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:var(--es-surface); border:1px solid var(--es-border);
  color:var(--es-text-2); cursor:pointer; z-index:3; padding:0;
  box-shadow:0 4px 14px rgba(16,16,40,.16); transition:opacity .15s, border-color .15s, color .15s;
}
.es26 .es-fx-pmscroll__arrow:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 .es-fx-pmscroll__arrow:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-fx-pmscroll__arrow i{ font-size:18px; }
.es26 .es-fx-pmscroll__arrow--prev{ left:-6px; }
.es26 .es-fx-pmscroll__arrow--next{ right:-6px; }
.es26 .es-fx-pmscroll__arrow[disabled]{ opacity:0; pointer-events:none; }
body.dark .es26 .es-fx-pmscroll__arrow{ box-shadow:0 4px 14px rgba(0,0,0,.35); }
/* Show arrows only when scrolling is possible AND a fine pointer is present */
.es26 .es-fx-pmscroll.is-scrollable .es-fx-pmscroll__arrow{ display:inline-flex; }
@media (pointer:coarse){ .es26 .es-fx-pmscroll__arrow{ display:none !important; } }

/* Edge fades hint there's more to scroll (pure decoration) */
.es26 .es-fx-pmscroll::before,
.es26 .es-fx-pmscroll::after{
  content:""; position:absolute; top:0; bottom:8px; width:26px; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .15s;
}
.es26 .es-fx-pmscroll::before{ left:0; background:linear-gradient(to right, var(--es-surface), transparent); }
.es26 .es-fx-pmscroll::after{ right:0; background:linear-gradient(to left, var(--es-surface), transparent); }
.es26 .es-fx-pmscroll.can-prev::before{ opacity:1; }
.es26 .es-fx-pmscroll.can-next::after{ opacity:1; }

/* Native select kept VISIBLE below the rail, styled as V2026 control.
   Companion to the selector; reusable wherever a select stays shown. */
.es26 .es-fx-pmselect{
  height:46px; width:100%; border-radius:var(--es-radius-ctrl);
  background:var(--es-inset); border:1px solid var(--es-border);
  color:var(--es-text); padding:0 38px 0 14px; font:inherit; font-size:14px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7689' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.es26 .es-fx-pmselect:focus{ outline:none; border-color:var(--es-violet-400); }
body.light .es26 .es-fx-pmselect{ background-color:#f4f4f9; }


/* ===========================================================
   ELITESMM V2026 FOUNDATION — COMPACT DENSITY MODIFIERS
   Reusable. Prefix: es-fx-  ·  Appended only.
   Opt-in compaction for premium dense SaaS layouts. Applied via
   .es-fx-dense on a page/section root; never changes base values.
   =========================================================== */
.es26 .es-fx-dense.es-fx-page{ gap:12px; }
.es26 .es-fx-dense .es-fx-grid{ gap:12px; }
.es26 .es-fx-dense .es-fx-rail{ gap:12px; }
.es26 .es-fx-dense .es-fx-col{ gap:12px; }
.es26 .es-fx-dense .es-fx-shead{ margin-bottom:11px; }
@media (max-width:768px){ .es26 .es-fx-dense.es-fx-page{ gap:11px; } .es26 .es-fx-dense .es-fx-grid{ gap:11px; } }


/* ===========================================================
   ELITESMM V2026 FOUNDATION — SECONDARY BUTTON (reusable)
   Prefix: es-fx-btn-  ·  fixes light-mode "empty white" buttons.
   Reusable across Tickets, Orders, Affiliates, etc.
   =========================================================== */
.es26 .es-fx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 14px; min-height:44px; border-radius:var(--es-radius-ctrl);
  font-size:13px; font-weight:500; line-height:1; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.es26 .es-fx-btn:active{ transform:translateY(1px); }
.es26 .es-fx-btn--primary{ background:var(--es-violet-600); color:#fff; }
.es26 .es-fx-btn--primary:hover{ background:var(--es-violet-800); color:#fff; }
/* Secondary: filled tonal surface in BOTH themes (never blank white) */
.es26 .es-fx-btn--secondary{
  background:var(--es-inset); color:var(--es-text); border-color:var(--es-border);
}
.es26 .es-fx-btn--secondary:hover{ background:var(--es-surface); border-color:var(--es-border-2); color:var(--es-text); }
body.light .es26 .es-fx-btn--secondary{ background:#eef0f6; color:#26215c; border-color:#e2e2ee; }
body.light .es26 .es-fx-btn--secondary:hover{ background:#e6e8f2; color:#26215c; }
body.dark .es26 .es-fx-btn--secondary{ background:var(--es-inset); color:var(--es-text); border-color:var(--es-border-2); }
.es26 .es-fx-btn i{ font-size:16px; }


/* ===========================================================
   ELITESMM V2026 ADD FUNDS — REFINEMENT PASS (page glue)
   scoped under #es-af-page · appended only.
   Compaction (hero/wallet/cards) + selector layout + WA button.
   =========================================================== */

/* --- Part 3: hero ~25-30% shorter, same language --- */
.es26 #es-af-page .es-af-hero{ padding:15px 22px; }
.es26 #es-af-page .es-af-hero__title{ font-size:18px; margin-bottom:2px; }
.es26 #es-af-page .es-af-hero__sub{ font-size:12.5px; line-height:1.45; }
@media (max-width:768px){ .es26 #es-af-page .es-af-hero{ padding:13px 15px; } .es26 #es-af-page .es-af-hero__title{ font-size:16.5px; } }
@media (max-width:320px){ .es26 #es-af-page .es-af-hero{ padding:11px 13px; } }

/* --- Part 4: wallet summary more compact --- */
.es26 #es-af-page .es-af-wallet{ padding:13px 16px; }
.es26 #es-af-page .es-af-wallet__stats{ gap:24px; }
.es26 #es-af-page .es-fx-stat__v{ font-size:19px; }
.es26 #es-af-page .es-af-wallet__lvlhead{ margin-bottom:7px; }
.es26 #es-af-page .es-af-wallet__next{ margin-top:5px; }
@media (max-width:768px){ .es26 #es-af-page .es-af-wallet__stats{ gap:16px; } .es26 #es-af-page .es-fx-stat__v{ font-size:17px; } }

/* --- Part 2: tighten card padding + section rhythm (premium, not crowded) --- */
.es26 #es-af-page .es-af-card{ padding:14px 16px; }
@media (max-width:480px){ .es26 #es-af-page .es-af-card{ padding:13px; } }
.es26 #es-af-page .es-af-methods .es-fx-shead,
.es26 #es-af-page .es-af-card .es-fx-shead{ margin-bottom:11px; }
.es26 #es-af-page .es-af-tabs{ margin-bottom:13px; }

/* --- Part 1: selector spacing inside the methods card --- */
.es26 #es-af-page .es-af-methods .es-fx-pmscroll{ margin-bottom:10px; }
.es26 #es-af-page .es-af-methods .control-label{ margin-bottom:7px; }
.es26 #es-af-page .es-af-methods .form-group--method{ margin-bottom:12px; }
/* small helper label above the visible dropdown */
.es26 #es-af-page .es-af-methods .es-af-method-or{
  font-size:11px; color:var(--es-text-3); margin:2px 0 6px;
}

/* --- Part 6: WhatsApp / support secondary button now uses foundation style --- */
/* (markup switched to es-fx-btn--secondary; this guarantees light-mode fill) */
.es26 #es-af-page .es-af-support__actions{ gap:9px; }


/* ===========================================================
   ELITESMM V2026 — PHASE 3 FIXES + PHASE 4 (appended)
   Polish + new reusable Foundation components (es-fx-*).
   Additive only. No existing rule modified/renamed/removed.
   Later source order lets these win where intended.
   =========================================================== */

/* ===========================================================
   BUG 1 — Payment rail always peeks the next card (all widths,
   Android + iPhone). Width is viewport-relative so a partial
   next card is guaranteed; snap loosened so the peek persists.
   =========================================================== */
.es26 .es-fx-pmscroll__rail{
  scroll-snap-type:x proximity;            /* keeps a peek after momentum */
  scroll-padding-left:2px;
  overscroll-behavior-x:contain;
}
/* Base (desktop rail): keep fixed-ish width but never full-bleed */
.es26 .es-fx-pmscroll .es-fx-pmcard{ scroll-snap-align:start; scroll-snap-stop:normal; }

/* Mobile/tablet: size cards so ~2.25 are visible → next card always peeks.
   Uses the rail's own width via calc; robust on Android Chrome + iOS. */
@media (max-width:768px){
  .es26 .es-fx-pmscroll .es-fx-pmcard{
    flex:0 0 auto;
    width:calc((100% - (10px * 2)) / 2.25);  /* 2 gaps of 10px, 2.25 cards */
    min-width:140px; max-width:none;
  }
  .es26 .es-fx-pmscroll__rail{ padding-right:8px; }
}
@media (max-width:420px){
  .es26 .es-fx-pmscroll .es-fx-pmcard{
    width:calc((100% - (10px * 2)) / 2.15);  /* a touch wider peek on small phones */
    min-width:132px;
  }
}
@media (max-width:340px){
  .es26 .es-fx-pmscroll .es-fx-pmcard{ width:calc((100% - 10px) / 1.8); min-width:0; }
}
/* Edge fades reinforce "more exists" regardless of arrows */
.es26 .es-fx-pmscroll::before,
.es26 .es-fx-pmscroll::after{ width:30px; bottom:8px; }
@media (max-width:680px){
  .es26 .es-fx-pmscroll::before,
  .es26 .es-fx-pmscroll::after{ width:32px; }
}
body.light .es26 #es-af-page .es-fx-pmscroll::before{ background:linear-gradient(to right,var(--es-surface),transparent); }
body.light .es26 #es-af-page .es-fx-pmscroll::after{ background:linear-gradient(to left,var(--es-surface),transparent); }

/* ===========================================================
   WhatsApp / secondary button — guaranteed light-mode contrast
   (re-assert at #es-af-page specificity, both themes)
   =========================================================== */
body.light .es26 #es-af-page .es-fx-btn--secondary,
body.light .es26 #es-af-page .es-af-support__btn.es-fx-btn--secondary{
  background:#eef0f6 !important; color:#26215c !important; border:1px solid #e2e2ee !important;
}
body.light .es26 #es-af-page .es-fx-btn--secondary:hover{ background:#e6e8f2 !important; }
body.dark .es26 #es-af-page .es-fx-btn--secondary{
  background:var(--es-inset); color:var(--es-text); border:1px solid var(--es-border-2);
}

/* ===========================================================
   BUG 3 — Compact single-line trust row (Foundation)
   es-fx-trustline: tiny, horizontal, responsive. Sits BELOW
   the Pay button. Reusable anywhere.
   =========================================================== */
.es26 .es-fx-trustline{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px; margin-top:10px; padding:0 2px;
}
.es26 .es-fx-trustline__i{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--es-text-3); line-height:1.2; white-space:nowrap;
}
.es26 .es-fx-trustline__i i{ font-size:13px; }
.es26 .es-fx-trustline__i b{ color:var(--es-text-2); font-weight:500; }
.es26 .es-fx-trustline__i--secure i{ color:var(--es-teal); }
.es26 .es-fx-trustline__i--instant i{ color:var(--es-amber); }
.es26 .es-fx-trustline__i--verify i{ color:var(--es-blue); }
@media (max-width:360px){ .es26 .es-fx-trustline{ gap:10px; } .es26 .es-fx-trustline__i{ font-size:11px; } }

/* ===========================================================
   BUG 2 — Sticky mobile dock that RELOCATES the real submit
   button (no duplicate). es-fx-actiondock (Foundation).
   The real <button> is physically moved here on mobile and
   returned to the form on desktop. Only ONE button ever exists.
   =========================================================== */
.es26 .es-fx-actiondock{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--es-bg); border-top:1px solid var(--es-border);
  box-shadow:0 -6px 20px rgba(16,16,40,.10);
}
body.dark .es26 .es-fx-actiondock{ box-shadow:0 -6px 20px rgba(0,0,0,.35); }
.es26 .es-fx-actiondock.is-active{ display:block; }
@media (min-width:769px){ .es26 .es-fx-actiondock{ display:none !important; } }
/* Placeholder that reserves the button's spot in the form while it's docked */
.es26 .es-fx-dockslot{ display:none; }
.es26 .es-fx-dockslot.is-reserved{ display:block; }

/* ===========================================================
   PHASE 4.5 — Deposit suggestion chips (Foundation)
   es-fx-amtchips: quick-fill amount chips. Reusable.
   =========================================================== */
.es26 .es-fx-amtchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.es26 .es-fx-amtchip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:var(--es-radius-pill);
  background:var(--es-inset); border:1px solid var(--es-border);
  color:var(--es-text-2); font-size:13px; font-weight:500; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.es26 .es-fx-amtchip:hover{ border-color:var(--es-violet-200); color:var(--es-text); transform:translateY(-1px); }
.es26 .es-fx-amtchip:active{ transform:translateY(0); }
.es26 .es-fx-amtchip.is-active{ background:var(--es-violet-900); color:#fff; border-color:var(--es-violet-900); }
.es26 .es-fx-amtchip:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
body.light .es26 .es-fx-amtchip{ background:#f4f4f9; }
@media (max-width:768px){ .es26 .es-fx-amtchip{ padding:9px 15px; font-size:14px; } }
@media (prefers-reduced-motion:reduce){ .es26 .es-fx-amtchip{ transition:none; } }

/* ===========================================================
   PHASE 4.1 — Bonus calculator (Foundation: es-fx-calc)
   Live "you pay → you receive" panel. Reusable.
   =========================================================== */
.es26 .es-fx-calc{ display:flex; flex-direction:column; gap:9px; }
.es26 .es-fx-calc__rows{ display:flex; flex-direction:column; gap:7px; }
.es26 .es-fx-calc__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.es26 .es-fx-calc__row .es-fx-calc__l{ color:var(--es-text-2); }
.es26 .es-fx-calc__row .es-fx-calc__v{ color:var(--es-text); font-weight:500; }
.es26 .es-fx-calc__row--bonus .es-fx-calc__v{ color:var(--es-teal-d); }
body.dark .es26 .es-fx-calc__row--bonus .es-fx-calc__v{ color:#5DCAA5; }
.es26 .es-fx-calc__total{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:var(--es-radius-ctrl);
  background:var(--es-violet-50);
}
body.dark .es26 .es-fx-calc__total{ background:var(--es-violet-900); }
.es26 .es-fx-calc__total .es-fx-calc__tl{ font-size:12.5px; color:var(--es-violet-800); }
body.dark .es26 .es-fx-calc__total .es-fx-calc__tl{ color:var(--es-violet-100); }
.es26 .es-fx-calc__total .es-fx-calc__tv{ font-size:20px; font-weight:600; color:var(--es-violet-900); }
body.dark .es26 .es-fx-calc__total .es-fx-calc__tv{ color:#fff; }
.es26 .es-fx-calc__hint{ font-size:11.5px; color:var(--es-text-3); }
.es26 .es-fx-calc__tv.is-flash{ animation:es-fx-flash .5s ease; }
@keyframes es-fx-flash{ 0%{ color:var(--es-teal); } 100%{} }
@media (prefers-reduced-motion:reduce){ .es26 .es-fx-calc__tv.is-flash{ animation:none; } }

/* ===========================================================
   PHASE 4.2 — Bonus ladder (Foundation: es-fx-ladder)
   Tier rows with active highlight. Reusable.
   =========================================================== */
.es26 .es-fx-ladder{ display:flex; flex-direction:column; }
.es26 .es-fx-ladder__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--es-border); font-size:13px;
  transition:background .15s, padding-left .15s;
}
.es26 .es-fx-ladder__row:last-child{ border-bottom:none; }
.es26 .es-fx-ladder__amt{ color:var(--es-text); font-weight:500; }
.es26 .es-fx-ladder__pct{
  display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--es-radius-pill);
  background:var(--es-amber-l); color:var(--es-amber-d); font-size:11.5px; font-weight:500;
}
body.dark .es26 .es-fx-ladder__pct{ background:#4A3208; color:#FAC775; }
.es26 .es-fx-ladder__row.is-active{
  background:var(--es-violet-50); border-radius:8px; padding-left:10px; border-bottom-color:transparent;
}
body.dark .es26 .es-fx-ladder__row.is-active{ background:rgba(83,74,183,.14); }
.es26 .es-fx-ladder__row.is-active .es-fx-ladder__amt{ color:var(--es-violet-800); }
body.dark .es26 .es-fx-ladder__row.is-active .es-fx-ladder__amt{ color:#fff; }
.es26 .es-fx-ladder__empty{ font-size:12.5px; color:var(--es-text-3); padding:6px 2px; line-height:1.5; }

/* ===========================================================
   PHASE 4.3 — Step instructions (Foundation: es-fx-steps)
   Numbered step chips. Reusable for any how-to flow.
   =========================================================== */
.es26 .es-fx-steps{ display:flex; flex-direction:column; gap:8px; }
.es26 .es-fx-step{
  display:flex; align-items:flex-start; gap:11px;
  padding:10px 12px; border-radius:var(--es-radius-ctrl);
  background:var(--es-inset); border:1px solid var(--es-border);
}
body.light .es26 .es-fx-step{ background:#f4f4f9; }
.es26 .es-fx-step__n{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--es-violet-600); color:#fff; font-size:12px; font-weight:600;
}
.es26 .es-fx-step__t{ font-size:13px; color:var(--es-text); line-height:1.45; padding-top:2px; }
.es26 .es-fx-step__t b{ font-weight:600; }
.es26 .es-fx-steps__note{
  display:flex; align-items:center; gap:7px; margin-top:2px;
  font-size:12px; color:var(--es-text-2);
}
.es26 .es-fx-steps__note i{ color:var(--es-teal); font-size:14px; }

/* ===========================================================
   PHASE 4.4 — Recent payment cards (Foundation: es-fx-paylist)
   Compact deposit rows. Reusable list pattern.
   =========================================================== */
.es26 .es-fx-paylist{ display:flex; flex-direction:column; gap:8px; }
.es26 .es-fx-payrow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; border-radius:var(--es-radius-ctrl);
  background:var(--es-inset); border:1px solid var(--es-border);
}
body.light .es26 .es-fx-payrow{ background:#f4f4f9; }
.es26 .es-fx-payrow__main{ min-width:0; }
.es26 .es-fx-payrow__method{ font-size:13px; font-weight:500; color:var(--es-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es26 .es-fx-payrow__date{ font-size:11px; color:var(--es-text-3); margin-top:2px; }
.es26 .es-fx-payrow__amt{ font-size:14px; font-weight:600; color:var(--es-text); flex-shrink:0; }

/* Add Funds glue */
.es26 #es-af-page .es-af-calc__mount--empty,
.es26 #es-af-page .es-af-steps__empty{ }


/* ===========================================================
   ELITESMM V2026 — FINAL POLISH PASS (appended, authoritative)
   Add Funds only. Additive; higher specificity (#es-af-page)
   lets these win over earlier rules without editing them.
   =========================================================== */

/* ===========================================================
   TASK 1 — Android carousel: always ~2.2 cards, next peeking.
   Root cause: earlier min-width floor + content width let long
   method names expand the flex item on Android. We pin the width
   with viewport units (robust on Android Chrome/Samsung/iOS) and
   stop content from growing the item.
   =========================================================== */
.es26 #es-af-page .es-fx-pmscroll__rail{ gap:10px; scroll-padding-left:0; }
.es26 #es-af-page .es-fx-pmscroll .es-fx-pmcard{
  flex:0 0 auto !important;
  box-sizing:border-box;
}
/* Desktop/tablet keep comfortable fixed width */
@media (min-width:769px){
  .es26 #es-af-page .es-fx-pmscroll .es-fx-pmcard{ width:180px !important; max-width:none !important; min-width:0 !important; }
}
/* Mobile: width is a fraction of the RAIL (container), not viewport, so
   ~2.2 cards show regardless of page/card padding. (100% - 2 gaps)/2.2. */
@media (max-width:768px){
  .es26 #es-af-page .es-fx-pmscroll .es-fx-pmcard{
    width:calc((100% - 20px) / 2.2) !important; max-width:none !important; min-width:0 !important;
  }
  .es26 #es-af-page .es-fx-pmscroll__rail{ padding-right:14px; }
}
@media (max-width:400px){
  .es26 #es-af-page .es-fx-pmscroll .es-fx-pmcard{ width:calc((100% - 20px) / 2.1) !important; max-width:none !important; }
}
/* Prevent long names from stretching the card or breaking layout */
.es26 #es-af-page .es-fx-pmcard__name{ overflow-wrap:anywhere; word-break:break-word; }

/* ===========================================================
   TASK 2 — Selected card: keep checkmark, add "Selected" badge.
   No size change (badge is absolutely positioned).
   =========================================================== */
.es26 #es-af-page .es-fx-pmcard{ position:relative; }
.es26 #es-af-page .es-fx-pmcard__selbadge{
  position:absolute; left:10px; bottom:10px;
  display:none; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--es-radius-pill);
  background:var(--es-violet-600); color:#fff; font-size:10px; font-weight:600;
  letter-spacing:.02em; line-height:1.4; z-index:2;
}
.es26 #es-af-page .es-fx-pmcard__selbadge i{ font-size:11px; }
.es26 #es-af-page .es-fx-pmcard.is-active .es-fx-pmcard__selbadge{ display:inline-flex; }
/* Nudge the footer type text so it never sits under the badge */
.es26 #es-af-page .es-fx-pmcard.is-active .es-fx-pmcard__type{ visibility:hidden; }

/* ===========================================================
   TASK 3 — Floating WhatsApp sits above the mobile dock.
   The WA widget is third-party; we can only nudge common
   containers. Target typical fixed bottom-right widgets and
   raise them above the bottom nav + safe area on mobile.
   Desktop untouched (only applies <=768px).
   =========================================================== */
@media (max-width:768px){
  /* Common WhatsApp/chat widget hooks — raise above the dock (~72px). */
  .es26 ~ .whatsapp-button,
  .whatsapp-button,
  a.whatsapp-float, .whatsapp-float,
  .wa-float, .wa-widget, .floating-whatsapp,
  a[href*="wa.me"].float, a[href*="api.whatsapp.com"].float{
    bottom:calc(84px + env(safe-area-inset-bottom)) !important;
    z-index:901 !important;
  }
}

/* ===========================================================
   TASK 4 — Bonus calculator typography hierarchy.
   "You receive" becomes the clear focus; deposit/bonus recede.
   Calculations unchanged (JS untouched).
   =========================================================== */
.es26 #es-af-page .es-fx-calc__rows{ gap:5px; }
.es26 #es-af-page .es-fx-calc__row{ font-size:12.5px; }
.es26 #es-af-page .es-fx-calc__row .es-fx-calc__l{ color:var(--es-text-3); }
.es26 #es-af-page .es-fx-calc__total{ padding:14px 16px; margin-top:3px; align-items:center; }
.es26 #es-af-page .es-fx-calc__total .es-fx-calc__tl{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; opacity:.9; }
.es26 #es-af-page .es-fx-calc__total .es-fx-calc__tv{ font-size:26px; font-weight:700; letter-spacing:-.01em; }
@media (max-width:768px){ .es26 #es-af-page .es-fx-calc__total .es-fx-calc__tv{ font-size:24px; } }
.es26 #es-af-page .es-fx-calc__hint{ margin-top:1px; }

/* ===========================================================
   TASK 5 — Bonus ladder active-tier emphasis (visual only;
   JS already sets .is-active from the existing parser).
   =========================================================== */
.es26 #es-af-page .es-fx-ladder__row.is-active{
  box-shadow:inset 3px 0 0 var(--es-violet-600);
}
.es26 #es-af-page .es-fx-ladder__row.is-active .es-fx-ladder__pct{
  background:var(--es-violet-600); color:#fff;
}
body.dark .es26 #es-af-page .es-fx-ladder__row.is-active .es-fx-ladder__pct{ background:var(--es-violet-600); color:#fff; }

/* ===========================================================
   TASK 6 — Recent payments empty state polish (already elegant;
   tighten and center within its card).
   =========================================================== */
.es26 #es-af-page #es-af-recent-mount .es-fx-empty{ padding:26px 16px; }
.es26 #es-af-page #es-af-recent-mount .es-fx-empty__ico{ font-size:26px; }

/* ===========================================================
   TASK 7 — Amount chips: bigger touch area + clearer active.
   =========================================================== */
.es26 #es-af-page .es-fx-amtchip{ padding:10px 16px; font-size:13.5px; }
@media (max-width:768px){ .es26 #es-af-page .es-fx-amtchip{ padding:12px 18px; font-size:14.5px; min-height:44px; } }
.es26 #es-af-page .es-fx-amtchip.is-active{
  box-shadow:0 4px 14px rgba(83,74,183,.34);
}

/* ===========================================================
   TASK 8 — Yellow engine instruction: DO NOT restyle content.
   Only tidy the spacing around the block so it doesn't crowd
   neighbours. We never touch its colors/markup.
   =========================================================== */
.es26 #es-af-page .es-af-formhost .control-label{ margin-top:2px; }

/* ===========================================================
   TASK 9 — Spacing review: reduce vertical gaps, keep dense.
   =========================================================== */
.es26 #es-af-page.es-fx-dense.es-fx-page{ gap:11px; }
.es26 #es-af-page .es-fx-dense .es-fx-grid,
.es26 #es-af-page .es-fx-grid{ gap:11px; }
.es26 #es-af-page .es-fx-col,
.es26 #es-af-page .es-fx-rail{ gap:11px; }
.es26 #es-af-page .es-af-card{ padding:13px 15px; }
.es26 #es-af-page .es-fx-shead{ margin-bottom:10px; }
.es26 #es-af-page .es-af-formhost .form-group{ margin-bottom:11px; }
.es26 #es-af-page .es-af-methods .es-fx-pmscroll{ margin-bottom:9px; }
.es26 #es-af-page .es-fx-trustline{ margin-top:9px; }
.es26 #es-af-page .es-fx-amtchips{ margin-top:9px; }
@media (max-width:768px){
  .es26 #es-af-page .es-af-card{ padding:13px; }
}