@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;
}
.light .serv-re, .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;
}
.light .serv-re {
    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; }
}

/* ============================================================================
   EliteSMM v2026 — SUPPORT FOUNDATION (M0)
   Reusable primitives + Support-scoped layout components.
   RULES: fully scoped under .es26 · additive only (zero existing rules edited)
   · consumes existing --es-* tokens exclusively · no new color/radius/shadow
   system · reuses existing es-fx-shimmer keyframe · dark-paired · existing
   breakpoints only (991/768/414/360) · all motion <=180ms & reduced-motion safe.
   Renders no backend data. Consumed later by tickets.twig + viewticket.twig.
   ========================================================================== */

/* ---- Shared primitive: status pill (structure-free) -----------------------
   Mirrors the Orders es-ord__status state->token mapping so the two never
   drift, but is NOT welded to any card structure. Reusable panel-wide. */
.es26 .es-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--es-radius-pill); font-size:11px; font-weight:500; line-height:1.5; white-space:nowrap; background:var(--es-inset); color:var(--es-text-2); }
.es26 .es-pill i{ font-size:12px; }
.es26 .es-pill--completed { background:var(--es-teal-l);  color:var(--es-teal-d); }
.es26 .es-pill--inprogress{ background:var(--es-blue-l);  color:var(--es-blue-d); }
.es26 .es-pill--processing{ background:var(--es-blue-l);  color:var(--es-blue-d); }
.es26 .es-pill--pending   { background:var(--es-amber-l); color:var(--es-amber-d); }
.es26 .es-pill--partial   { background:var(--es-amber-l); color:var(--es-amber-d); }
.es26 .es-pill--canceled  { background:var(--es-pink-l);  color:var(--es-pink-d); }
.es26 .es-pill--unknown   { background:var(--es-gray-l);  color:var(--es-gray-d); }
body.dark .es26 .es-pill            { background:rgba(255,255,255,.06); color:var(--es-text-2); }
body.dark .es26 .es-pill--completed { background:rgba(29,158,117,.16);  color:#6FD3B0; }
body.dark .es26 .es-pill--inprogress{ background:rgba(55,138,221,.16);  color:#7FBAF0; }
body.dark .es26 .es-pill--processing{ background:rgba(55,138,221,.16);  color:#7FBAF0; }
body.dark .es26 .es-pill--pending   { background:rgba(239,159,39,.16);  color:#F0BD6B; }
body.dark .es26 .es-pill--partial   { background:rgba(239,159,39,.16);  color:#F0BD6B; }
body.dark .es26 .es-pill--canceled  { background:rgba(212,83,126,.16);  color:#E88AAB; }
body.dark .es26 .es-pill--unknown   { background:rgba(180,178,169,.16); color:#C9C7C0; }

/* ---- Shared primitive: monogram ------------------------------------------
   First-character avatar. Index-cycled tone via data-tone 0..5. Reuses the
   visual language of es-avatar / es-svc-icon. Beautiful with zero icon. */
.es26 .es-monogram{ width:40px; height:40px; border-radius:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; text-transform:uppercase; background:var(--es-violet-50); color:var(--es-violet-600); }
.es26 .es-monogram--sm{ width:30px; height:30px; border-radius:9px; font-size:12px; }
.es26 .es-monogram--lg{ width:52px; height:52px; border-radius:14px; font-size:21px; }
.es26 .es-monogram[data-tone="0"]{ background:var(--es-violet-50); color:var(--es-violet-600); }
.es26 .es-monogram[data-tone="1"]{ background:var(--es-teal-l);   color:var(--es-teal-d); }
.es26 .es-monogram[data-tone="2"]{ background:var(--es-blue-l);   color:var(--es-blue-d); }
.es26 .es-monogram[data-tone="3"]{ background:var(--es-amber-l);  color:var(--es-amber-d); }
.es26 .es-monogram[data-tone="4"]{ background:var(--es-pink-l);   color:var(--es-pink-d); }
.es26 .es-monogram[data-tone="5"]{ background:var(--es-gray-l);   color:var(--es-gray-d); }
body.dark .es26 .es-monogram             { background:#2C2752; color:var(--es-violet-200); }
body.dark .es26 .es-monogram[data-tone="1"]{ background:rgba(29,158,117,.16);  color:#6FD3B0; }
body.dark .es26 .es-monogram[data-tone="2"]{ background:rgba(55,138,221,.16);  color:#7FBAF0; }
body.dark .es26 .es-monogram[data-tone="3"]{ background:rgba(239,159,39,.16);  color:#F0BD6B; }
body.dark .es26 .es-monogram[data-tone="4"]{ background:rgba(212,83,126,.16);  color:#E88AAB; }
body.dark .es26 .es-monogram[data-tone="5"]{ background:rgba(180,178,169,.16); color:#C9C7C0; }

/* ---- Shared primitive: relative time -------------------------------------
   <time> wrapper; JS fills relative text, keeps absolute in title. Presentation
   only. Renders the server timestamp verbatim until/unless JS enhances it. */
.es26 .es-reltime{ color:var(--es-text-3); font-size:12px; white-space:nowrap; }

/* ---- Shared primitive: attachments ---------------------------------------
   One component, two states: output chips (message files) + input drop zone
   (wrapper around the panel's .tickets-uploader — styled around, never inside).*/
.es26 .es-attach{ display:flex; flex-wrap:wrap; gap:7px; }
.es26 .es-attach__chip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 11px; border-radius:var(--es-radius-ctrl); background:var(--es-inset); border:1px solid var(--es-border); color:var(--es-text-2); font-size:12px; text-decoration:none; line-height:1.3; transition:border-color .15s, color .15s; }
.es26 .es-attach__chip:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 .es-attach__chip i{ font-size:14px; color:var(--es-text-3); flex-shrink:0; }
.es26 .es-attach__chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es26 .es-attach--drop{ display:block; border:1px dashed var(--es-border-2); border-radius:var(--es-radius-ctrl); padding:14px 16px; background:var(--es-inset); transition:border-color .15s, background .15s; }
.es26 .es-attach--drop.is-drag{ border-color:var(--es-violet-400); background:var(--es-violet-50); }
body.dark .es26 .es-attach--drop.is-drag{ background:var(--es-violet-900); }

/* ---- Shared primitive: empty state (routing) ------------------------------
   Not decorative filler — routes the user forward. Reusable panel-wide. */
.es26 .es-empty{ border:1px dashed var(--es-border-2); border-radius:var(--es-radius-ctrl); padding:26px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; }
.es26 .es-empty__icon{ width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:22px; background:var(--es-violet-50); color:var(--es-violet-600); }
body.dark .es26 .es-empty__icon{ background:#2C2752; color:var(--es-violet-200); }
.es26 .es-empty__title{ font-size:14px; font-weight:600; color:var(--es-text); }
.es26 .es-empty__text{ font-size:12.5px; color:var(--es-text-2); line-height:1.5; max-width:320px; }

/* ---- Shared primitive: skeleton ------------------------------------------
   Reuses the EXISTING es-fx-shimmer keyframe. Used only for real async gaps
   (the panel's category->fields injection). Never fakes server-rendered load. */
.es26 .es-skel{ position:relative; overflow:hidden; background:var(--es-inset); border-radius:var(--es-radius-ctrl); }
.es26 .es-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; }
.es26 .es-skel--line{ height:14px; margin:8px 0; }
.es26 .es-skel--ctrl{ height:44px; margin:8px 0; }

/* ---- Shared primitive: extension slot ------------------------------------
   Named host for future Support modules (FAQ, AI, Service Status, Refund Guide,
   Announcements). Collapses fully when empty. Zero cost when unused. */
.es26 .es-sup-slot{ display:block; }
.es26 .es-sup-slot:empty{ display:none; }
.es26 .es-sup-slot--prehelp{ margin-bottom:16px; }
.es26 .es-sup-slot--foot{ margin-top:16px; }
.es26 .es-sup-slot--aside:empty{ display:none; }

/* ============================================================================
   SUPPORT-SCOPED LAYOUT COMPONENTS
   Class contracts only — consumed by the two Support page templates in M1/M2.
   No markup ships in M0; these style the structures those pages will render.
   ========================================================================== */

/* ---- Support page header (shared spine: Tickets + ViewTicket) ------------- */
.es26 .es-sup-header{ margin-bottom:18px; }
.es26 .es-sup-header__title{ font-size:22px; font-weight:600; color:var(--es-text); line-height:1.2; margin:0; }
.es26 .es-sup-header__sub{ font-size:13px; color:var(--es-text-2); margin-top:5px; line-height:1.5; }
.es26 .es-sup-header--ticket{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.es26 .es-sup-header__back{ 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; transition:border-color .15s, color .15s; }
.es26 .es-sup-header__back:hover{ border-color:var(--es-border-2); color:var(--es-text); }
.es26 .es-sup-header__id{ font-size:14px; font-weight:600; color:var(--es-text); }

/* ---- Mobile intent tiles (decision-first) --------------------------------- */
.es26 .es-sup-intent{ display:none; gap:12px; margin-bottom:16px; }
.es26 .es-sup-intent__card{ flex:1; display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--es-radius-card); border:1px solid var(--es-border); background:var(--es-surface); color:var(--es-text); text-decoration:none; cursor:pointer; transition:border-color .15s, transform .12s; }
.es26 .es-sup-intent__card:hover{ border-color:var(--es-violet-200); }
.es26 .es-sup-intent__card:active{ transform:scale(.98); }
.es26 .es-sup-intent__ic{ width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; background:var(--es-violet-50); color:var(--es-violet-600); }
body.dark .es26 .es-sup-intent__ic{ background:#2C2752; color:var(--es-violet-200); }
.es26 .es-sup-intent__t{ font-size:14px; font-weight:600; }
.es26 .es-sup-intent__d{ font-size:12px; color:var(--es-text-2); }

/* ---- Dynamic category grid (from additionalFields) ------------------------ */
.es26 .es-sup-catgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.es26 .es-sup-catcard{ display:flex; align-items:center; gap:11px; padding:13px 14px; border-radius:var(--es-radius-ctrl); border:1px solid var(--es-border); background:var(--es-surface); color:var(--es-text); cursor:pointer; text-align:left; width:100%; transition:border-color .15s, transform .12s, background .15s; }
.es26 .es-sup-catcard:hover{ border-color:var(--es-violet-200); }
.es26 .es-sup-catcard:active{ transform:scale(.98); }
.es26 .es-sup-catcard.is-active{ border-color:var(--es-violet-600); background:var(--es-violet-50); }
body.dark .es26 .es-sup-catcard.is-active{ background:var(--es-violet-900); }
.es26 .es-sup-catcard:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-sup-catcard__name{ font-size:13px; font-weight:500; line-height:1.3; }

/* ---- Field host (wraps panel-owned #ticket-fields) ------------------------ */
.es26 .es-sup-fieldhost{ position:relative; }
.es26 .es-sup-fieldhost.is-loading{ min-height:60px; }

/* ---- Ticket history list-card --------------------------------------------- */
.es26 .es-sup-ticket{ position:relative; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--es-radius-ctrl); border:1px solid var(--es-border); background:var(--es-surface); text-decoration:none; color:var(--es-text); transition:border-color .15s, transform .12s; overflow:hidden; }
.es26 .es-sup-ticket + .es-sup-ticket{ margin-top:8px; }
.es26 .es-sup-ticket:hover{ border-color:var(--es-border-2); }
.es26 .es-sup-ticket:active{ transform:scale(.995); }
.es26 .es-sup-ticket:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-sup-ticket__main{ flex:1; min-width:0; }
.es26 .es-sup-ticket__top{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.es26 .es-sup-ticket__id{ font-size:11px; color:var(--es-text-3); font-weight:500; }
.es26 .es-sup-ticket__subject{ font-size:14px; font-weight:500; color:var(--es-text); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es26 .es-sup-ticket__meta{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.es26 .es-sup-ticket.is-unread{ border-inline-start:3px solid var(--es-violet-600); }
.es26 .es-sup-ticket.is-unread .es-sup-ticket__subject{ font-weight:600; }
.es26 .es-sup-ticket__dot{ width:7px; height:7px; border-radius:50%; background:var(--es-violet-600); flex-shrink:0; }
.es26 .es-sup-ticket.is-unread.es-anim-pulse .es-sup-ticket__dot{ animation:es-sup-pulse .18s ease-out 1; }
@keyframes es-sup-pulse{ 0%{ transform:scale(.4); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }

/* ---- Conversation thread (calm timeline, not chat bubbles) ---------------- */
.es26 .es-sup-thread{ display:flex; flex-direction:column; gap:20px; }
.es26 .es-sup-msg{ display:flex; gap:11px; }
.es26 .es-sup-msg__body{ flex:1; min-width:0; }
.es26 .es-sup-msg__head{ display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.es26 .es-sup-msg__role{ font-size:13px; font-weight:600; color:var(--es-text); }
.es26 .es-sup-msg__bubble{ padding:12px 15px; border-radius:var(--es-radius-ctrl); font-size:14px; line-height:1.55; color:var(--es-text); background:var(--es-inset); white-space:pre-wrap; word-wrap:break-word; }
.es26 .es-sup-msg--staff .es-sup-msg__bubble{ background:var(--es-violet-50); }
body.dark .es26 .es-sup-msg--staff .es-sup-msg__bubble{ background:var(--es-violet-900); }
.es26 .es-sup-msg--staff .es-sup-msg__role{ color:var(--es-violet-600); }
body.dark .es26 .es-sup-msg--staff .es-sup-msg__role{ color:var(--es-violet-200); }
.es26 .es-sup-msg__files{ margin-top:9px; }
.es26 .es-sup-msg.es-anim-enter{ animation:es-sup-enter .18s ease-out 1; }
@keyframes es-sup-enter{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ---- Composer (reply / create message) ------------------------------------ */
.es26 .es-sup-composer{ display:flex; flex-direction:column; gap:12px; }
.es26 .es-sup-composer__field{ width:100%; min-height:110px; border-radius:var(--es-radius-ctrl); background:var(--es-inset); border:1px solid var(--es-border); color:var(--es-text); font-size:14px; line-height:1.55; padding:13px 15px; resize:vertical; font-family:inherit; transition:border-color .15s; }
.es26 .es-sup-composer__field:focus{ outline:none; border-color:var(--es-violet-400); }
.es26 .es-sup-composer__field::placeholder{ color:var(--es-text-3); }

/* ---- Responsive (existing breakpoints only: 991 / 768 / 414 / 360) -------- */
@media (max-width:991px){
  .es26 .es-sup-catgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .es26 .es-sup-intent{ display:flex; }
  .es26 .es-sup-header__title{ font-size:20px; }
  .es26 .es-sup-thread{ gap:14px; }
  .es26 .es-sup-msg__bubble{ padding:11px 13px; }
}
@media (max-width:414px){
  .es26 .es-sup-catgrid{ gap:8px; }
  .es26 .es-sup-catcard{ padding:12px; }
}
@media (max-width:360px){
  .es26 .es-sup-ticket{ padding:12px; }
  .es26 .es-sup-header__title{ font-size:19px; }
}

/* ---- Reduced motion (matches file convention) ----------------------------- */
@media (prefers-reduced-motion:reduce){
  .es26 .es-attach__chip,
  .es26 .es-sup-intent__card,
  .es26 .es-sup-catcard,
  .es26 .es-sup-ticket,
  .es26 .es-sup-header__back,
  .es26 .es-sup-composer__field,
  .es26 .es-attach--drop{ transition:none; }
  .es26 .es-skel::after,
  .es26 .es-sup-ticket.is-unread.es-anim-pulse .es-sup-ticket__dot,
  .es26 .es-sup-msg.es-anim-enter{ animation:none; }
}
/* ===== END SUPPORT FOUNDATION (M0) ======================================== */


/* ============================================================================
   EliteSMM v2026 — SUPPORT MODULE: THEME INHERITANCE RESET (v1.0)
   ROOT CAUSE (not a cosmetic bug): style.css line ~22 declares
       a { color:#ffffff !important; }
   and .btn declares color:#fff. In DARK these are invisible-proof; in LIGHT
   they render white-on-white, which is why the Back button, "New ticket",
   attachment filenames and other anchors disappeared.
   Per-element patches cannot win against a global !important, so this single
   SCOPED reset makes anchors/buttons inside the Support module inherit the
   V2026 token colors instead of the legacy global. Scoped to .es-sup / .es-vt
   only — nothing else in the panel is affected.
   ========================================================================== */
.es26.es-sup a:not(.es-btn):not(.es-sup-intent__card),
.es26.es-vt  a:not(.es-btn):not(.es-sup-intent__card){ color:var(--es-text-2) !important; }

/* elements that must read as body text */
.es26.es-sup a.es-sup-ticket,
.es26.es-vt  a.es-vt-back,
.es26.es-vt  a.es-attach__chip,
.es26.es-sup a.es-attach__chip{ color:var(--es-text) !important; }
.es26.es-sup a.es-sup-ticket .es-sup-ticket__id,
.es26.es-sup a.es-sup-ticket .es-sup-ticket__time{ color:var(--es-text-3) !important; }
.es26.es-sup a.es-sup-ticket .es-sup-ticket__subject{ color:var(--es-text) !important; }

/* pagination: numbers AND chevrons inherit the token, active stays white */
.es26.es-sup .es-sup-pager a.es-pg,
.es26.es-sup .es-sup-pager span.es-pg{ color:var(--es-text) !important; }
.es26.es-sup .es-sup-pager .es-pg i{ color:currentColor !important; }
.es26.es-sup .es-sup-pager .es-pg.is-active,
.es26.es-sup .es-sup-pager .es-pg.is-active i{ color:#fff !important; }
.es26.es-sup .es-sup-pager .es-pg.is-disabled{ color:var(--es-text-3) !important; }
.es26.es-sup .es-sup-pager .es-pg:hover{ color:var(--es-violet-600) !important; }

/* primary buttons keep white text on violet; secondary use tokens */
.es26.es-sup a.es-btn--primary, .es26.es-sup button.es-btn--primary,
.es26.es-vt  a.es-btn--primary, .es26.es-vt  button.es-btn--primary{ color:#fff !important; }
.es26.es-vt a.es-vt-closed__btn{ color:var(--es-text) !important; }
.es26.es-vt a.es-vt-closed__btn:hover{ color:var(--es-violet-600) !important; }

/* WhatsApp card text must not inherit the global white in light mode */
.es26.es-sup a.es-sup-wa .es-sup-wa__t{ color:var(--es-text) !important; }
.es26.es-sup a.es-sup-wa .es-sup-wa__d,
.es26.es-sup a.es-sup-wa .es-sup-wa__go{ color:var(--es-text-3) !important; }
.es26.es-sup a.es-sup-wa .es-sup-wa__ic,
.es26.es-sup a.es-sup-wa .es-sup-wa__ic i{ color:#fff !important; }

/* placeholders: beat .form-group .form-control::placeholder */
.es26.es-sup .es-input::placeholder,
.es26.es-sup .es-sup-search__input::placeholder,
.es26.es-sup textarea.es-sup-composer__field::placeholder,
.es26.es-vt  textarea.es-sup-composer__field::placeholder{ color:var(--es-text-3) !important; opacity:1 !important; }

/* labels: .form-group label forces #e9e9eb (invisible on light cards) */
.es26.es-sup .es-sup-field .es-label,
.es26.es-vt  .es-vt-composer .es-label{ color:var(--es-text-3) !important; font-size:10.5px !important; font-weight:700 !important; margin-bottom:7px !important; }

/* support role icon inside the monogram (was inheriting white) */
.es26.es-vt .es-monogram i{ color:currentColor !important; }

/* attachment chip icons follow the chip colour */
.es26.es-vt a.es-attach__chip i,
.es26.es-sup a.es-attach__chip i{ color:var(--es-text-3) !important; }
.es26.es-vt a.es-attach__chip:hover,
.es26.es-vt a.es-attach__chip:hover i{ color:var(--es-violet-600) !important; }

/* ---- PART 4: status badge language (Open=green, Answered=blue,
   Pending=amber, Closed=neutral grey) using existing tokens only ---- */
.es26 .es-pill--open{ background:var(--es-teal-l); color:var(--es-teal-d); }
body.dark .es26 .es-pill--open{ background:rgba(29,158,117,.16); color:#6FD3B0; }
.es26 .es-pill--answered{ background:var(--es-blue-l); color:var(--es-blue-d); }
body.dark .es26 .es-pill--answered{ background:rgba(55,138,221,.16); color:#7FBAF0; }
.es26 .es-pill--closed{ background:var(--es-gray-l); color:var(--es-gray-d); }
body.dark .es26 .es-pill--closed{ background:rgba(180,178,169,.16); color:#C9C7C0; }
.es26 .es-pill i{ color:currentColor; }
/* ===== END SUPPORT THEME RESET (v1.0) ==================================== */

/* ===========================================================================
   ELITE SMM v2026 — MODULE 1 RECORD SYSTEM (M1 FOUNDATION)
   ---------------------------------------------------------------------------
   ONE responsive record browser shared by Refunds, Refill, Subscriptions,
   Drip-feed and Updates. Appended, never edits an existing rule.

   NAMESPACE: `.es-rec-*` / `.es-rec__*`
   Deliberately NOT `.es-ord-*`. `.es-ord-*` is owned by orders.twig (declared
   in that template's own <style>); reusing it would couple two pages together
   and re-create the exact `.serv-re` two-owner problem that orders.twig's M2A
   block documents solving. New namespace = zero coupling, zero regression risk
   for Orders.

   REUSED AS-IS (defined above, NOT redefined here):
     --es-* tokens            style.css:6509-6529
     .es-chip / .es-chiprow   style.css:6573-6580
     .es-chiprow--scroll      style.css:6725, 6814
     .es-fx-empty*            style.css:7481-7485
     .es-pill*                style.css:8329 + 8340-8346
     .es-card / .es-inset     style.css:6538-6539
   Everything below is ONLY what those components do not already provide.

   MOTION BUDGET: every transition is 150ms, under the 180ms ceiling.
   No box-shadow beyond a single 1px border. No blur. No filter.
   Transitions are restricted to `color`, `background-color`, `border-color`
   and `opacity` — all compositor/paint-only, so nothing here can trigger
   layout thrashing.
   =========================================================================== */

/* ---- 1. PAGE HEAD --------------------------------------------------------
   Mirrors .es-ord-head (orders.twig) so Module 1 reads as the same app.
   Replaces the legacy hero (py-60 + .my_120 = ~270px of mobile fold to render
   one word). h1 (not h2) — these five pages currently ship NO h1 at all. */
.es26 .es-rec-head{ margin-bottom:16px; }
.es26 .es-rec-head__title{ font-size:20px; font-weight:500; margin:0; color:var(--es-text); }
.es26 .es-rec-head__sub{ font-size:13px; margin-top:2px; }

/* ---- 2. TOOLBAR ----------------------------------------------------------
   Chips + search on one line; stacks under 768px. */
.es26 .es-rec-bar{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; min-width:0;
}
.es26 .es-rec-chips{ margin:0; padding:0; list-style:none; min-width:0; flex:1 1 auto; }
.es26 .es-rec-chips li{ list-style:none; flex:0 0 auto; }
/* Chips are <a>; the global .es-chip sets colour for buttons. Re-assert for
   links so visited/anchor colour cannot leak in. Same fix orders.twig applies. */
.es26 .es-rec-chips .es-chip{ color:var(--es-text-2); text-decoration:none; }
.es26 .es-rec-chips .es-chip:hover{ color:var(--es-text); }
.es26 .es-rec-chips .es-chip.is-active{ color:#fff; }

/* ---- 3. SEARCH -----------------------------------------------------------
   NOTE: the input must NEVER take id="serv-inp" — script.js:2 binds a GLOBAL
   jQuery keyup to that id which filters #serv-table and would fire here. */
.es26 .es-rec-search{
  position:relative; display:flex; align-items:center;
  flex:0 1 320px; min-width:0; margin:0;
}
.es26 .es-rec-search > i{
  position:absolute; left:12px; font-size:14px;
  color:var(--es-text-3); pointer-events:none;
}
.es26 .es-rec-search input{
  width:100%; height:38px; padding:0 42px 0 34px;
  background:var(--es-surface); color:var(--es-text);
  border:1px solid var(--es-border); border-radius:var(--es-radius-ctrl);
  font-size:13px; outline:none;
  transition:border-color .15s;
}
.es26 .es-rec-search input::placeholder{ color:var(--es-text-3); }
.es26 .es-rec-search input:focus{ border-color:var(--es-violet-400); }
.es26 .es-rec-search input:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:1px; }
.es26 .es-rec-search__go{
  position:absolute; right:5px;
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--es-violet-600); color:#fff;
  border:none; border-radius:8px; cursor:pointer; font-size:12px;
  transition:opacity .15s;
}
.es26 .es-rec-search__go:hover{ opacity:.88; }
.es26 .es-rec-search__go:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }

/* ---- 4. ALERT (Refunds `orders.refunds.alert`) --------------------------- */
.es26 .es-rec-alert{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--es-blue-l); color:var(--es-blue-d);
  border:1px solid var(--es-blue); border-radius:var(--es-radius-ctrl);
  padding:11px 13px; font-size:12.5px; line-height:1.55; margin-bottom:12px;
}
body.dark .es26 .es-rec-alert{ background:rgba(55,138,221,.14); color:#85B7EB; }
.es26 .es-rec-alert i{ font-size:14px; margin-top:1px; flex-shrink:0; }
.es26 .es-rec-alert__x{
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:currentColor; opacity:.6; font-size:15px; line-height:1; padding:0 2px;
  transition:opacity .15s;
}
.es26 .es-rec-alert__x:hover{ opacity:1; }

/* ---- 5. THE RECORD -------------------------------------------------------
   ONE DOM for all breakpoints. No duplicate mobile markup, no JS, no
   `dosomethingformobile-table`. The record is responsive, so every page that
   renders one inherits the behaviour for free.

   Desktop  >=1024px : CSS Grid columns, labels hidden  -> reads as a table
   Tablet   768-1023 : 2-up grid, labels shown
   Mobile    <768px  : single column card, labels inline

   Column template is supplied PER PAGE via the --es-rec-cols custom property,
   so the five pages share this entire block and differ by one declaration. */
.es26 .es-rec-list{ display:flex; flex-direction:column; gap:8px; }

.es26 .es-rec{
  background:var(--es-surface);
  border:1px solid var(--es-border);
  border-radius:var(--es-radius-card);
  padding:13px 15px;
  /* M2.1: background shifts on hover too — Orders parity, no shadow bloom. */
  transition:border-color .15s ease, background-color .15s ease;
}
.es26 .es-rec:hover{ border-color:var(--es-border-2); }

/* Field: label + value. Label is the single source of truth at every
   breakpoint — it is hidden on desktop by the header row, not deleted. */
.es26 .es-rec__f{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.es26 .es-rec__k{
  font-size:10.5px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--es-text-3);
}
.es26 .es-rec__v{
  font-size:13px; color:var(--es-text); font-weight:500;
  min-width:0; overflow-wrap:anywhere;
  /* M2: inline flex so a trailing .es-rec__cp copy button sits on the value
     line and never gets pushed off by a long URL. */
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.es26 .es-rec__v--muted{ color:var(--es-text-2); font-weight:400; }
/* Dates/amounts: tabular figures so columns align optically. */
.es26 .es-rec__v--num{ font-variant-numeric:tabular-nums; }

/* Links inside a record */
.es26 .es-rec__link{ color:var(--es-violet-600); text-decoration:none; }
.es26 .es-rec__link:hover{ color:var(--es-violet-800); text-decoration:underline; }
body.dark .es26 .es-rec__link{ color:var(--es-violet-200); }

/* Long URLs must never widen the grid. */
.es26 .es-rec__url{ overflow-wrap:anywhere; word-break:break-word; }

/* ---- 6. SECONDARY / METADATA ROW ----------------------------------------
   This is how a backend field that does not deserve a primary column stays
   fully visible instead of being deleted (e.g. Subscriptions "Old posts").
   Never a tooltip: no tooltip() is initialised anywhere in this theme, and
   tooltips are invisible on touch. */
.es26 .es-rec__meta{
  display:flex; flex-wrap:wrap; align-items:center;
  /* M2.1: pairs internally tight, externally generous (was 6px 14px). */
  gap:8px 18px;
  margin-top:11px; padding-top:11px;
  border-top:1px solid var(--es-border);
  font-size:12px; color:var(--es-text-2);
}
.es26 .es-rec__m{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
/* M2.1: fixed-size box so every metadata row aligns on one optical grid. */
.es26 .es-rec__m i{ width:13px; height:13px; font-size:12px; line-height:13px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--es-text-3); flex-shrink:0; }
.es26 .es-rec__mv{ color:var(--es-text); font-weight:500; font-variant-numeric:tabular-nums; }

/* ---- 7. ACTIONS ---------------------------------------------------------- */
.es26 .es-rec__act{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.es26 .es-rec__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 12px; min-height:32px;
  font-size:12px; font-weight:500; line-height:1;
  color:var(--es-text-2); background:var(--es-surface);
  border:1px solid var(--es-border); border-radius:9px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  /* M2.1: +transform for the Orders press feedback. */
  transition:color .15s, border-color .15s, background-color .15s, transform .12s;
}
.es26 .es-rec__btn:hover{ color:var(--es-text); border-color:var(--es-border-2); }
.es26 .es-rec__btn:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-rec__btn i{ font-size:12px; }
.es26 .es-rec__btn--primary{
  background:var(--es-violet-600); border-color:var(--es-violet-600); color:#fff;
}
.es26 .es-rec__btn--primary:hover{
  background:var(--es-violet-800); border-color:var(--es-violet-800); color:#fff;
}
.es26 .es-rec__btn.is-disabled{ opacity:.55; pointer-events:none; }

/* Copy control — pairs with the delegated handler in script.js */
.es26 .es-rec__cp{
  background:none; border:none; padding:2px 4px; cursor:pointer;
  color:var(--es-text-3); font-size:12px; line-height:1;
  /* M2.1: position:relative anchors the "Copied" bubble (::after). */
  position:relative;
  transition:color .15s, transform .12s;
}
.es26 .es-rec__cp:hover{ color:var(--es-violet-600); }
.es26 .es-rec__cp:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-rec__cp.is-copied{ color:var(--es-teal); }

/* ---- 8. STATUS PILLS -----------------------------------------------------
   Extends the existing .es-pill (style.css:8329). Modifiers are driven by the
   INTEGER status where the backend provides one (refund['order_status'],
   subscription order['status']) so colour never depends on a translated
   display string. Pages without an integer normalise the string in Twig, the
   same technique orders.twig documents. `--unknown` is the safe fallback:
   degraded, never broken. */
.es26 .es-pill--rec-active,
.es26 .es-pill--rec-completed{ background:var(--es-teal-l); color:var(--es-teal-d); }
body.dark .es26 .es-pill--rec-active,
body.dark .es26 .es-pill--rec-completed{ background:rgba(29,158,117,.16); color:#6FD3B0; }

.es26 .es-pill--rec-pending,
.es26 .es-pill--rec-partial{ background:var(--es-amber-l); color:var(--es-amber-d); }
body.dark .es26 .es-pill--rec-pending,
body.dark .es26 .es-pill--rec-partial{ background:rgba(239,159,39,.16); color:#FAC775; }

.es26 .es-pill--rec-inprogress{ background:var(--es-blue-l); color:var(--es-blue-d); }
body.dark .es26 .es-pill--rec-inprogress{ background:rgba(55,138,221,.16); color:#85B7EB; }

.es26 .es-pill--rec-canceled,
.es26 .es-pill--rec-rejected,
.es26 .es-pill--rec-error{ background:var(--es-pink-l); color:var(--es-pink-d); }
body.dark .es26 .es-pill--rec-canceled,
body.dark .es26 .es-pill--rec-rejected,
body.dark .es26 .es-pill--rec-error{ background:rgba(212,83,126,.16); color:#ED93B1; }

.es26 .es-pill--rec-paused,
.es26 .es-pill--rec-expired,
.es26 .es-pill--rec-unknown{ background:var(--es-gray-l); color:var(--es-gray-d); }
body.dark .es26 .es-pill--rec-paused,
body.dark .es26 .es-pill--rec-expired,
body.dark .es26 .es-pill--rec-unknown{ background:rgba(180,178,169,.16); color:#C9C7C0; }

/* ---- 9. PAGINATION -------------------------------------------------------
   Replaces FIVE near-identical copies of the same ~55-line block, each
   hardcoding #007bff — a colour that exists nowhere in the v2026 palette and
   ignored the theme entirely. Tokenised, so it themes automatically. */
.es26 .es-rec-pager{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px; list-style:none; padding:14px 0 0; margin:14px 0 0;
  /* M2.1: separator rule — matches .es-sup-pager (tickets.twig:425). */
  border-top:1px solid var(--es-border);
}
.es26 .es-rec-pager li{ display:inline-block; }
.es26 .es-rec-pager a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  font-size:13px; font-weight:500; text-decoration:none;
  color:var(--es-text-2); background:var(--es-surface);
  border:1px solid var(--es-border); border-radius:9px;
  font-variant-numeric:tabular-nums;
  transition:color .15s, border-color .15s, background-color .15s;
}
.es26 .es-rec-pager a:hover{ color:var(--es-text); border-color:var(--es-border-2); }
.es26 .es-rec-pager a:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-rec-pager .active a{
  background:var(--es-violet-600); border-color:var(--es-violet-600);
  color:#fff; pointer-events:none;
}
/* "Showing 101-200 of 1,340" — built only from documented pagination[*] */
.es26 .es-rec-pager__info{
  width:100%; text-align:center; margin-top:9px;
  font-size:11.5px; color:var(--es-text-3); font-variant-numeric:tabular-nums;
}
/* RTL: .rtl-pagination already ships globally; mirror it for the new class. */
.es26 .es-rec-pager.rtl-pagination{ direction:rtl; }

/* ---- 10. EMPTY STATE SPACING --------------------------------------------
   .es-fx-empty is global (style.css:7481). Only spacing is added. */
.es26 .es-rec-empty{ margin-bottom:8px; }
.es26 .es-rec-empty .es-rec__btn{ margin-top:4px; }

/* ---- 11. RESPONSIVE ------------------------------------------------------
   Mobile-first: the base rules above ARE the mobile card. Larger screens
   progressively enhance into the grid. This ordering means the phone parses
   the fewest rules and never has to undo desktop layout. */

/* >=768px — 2-up metadata grid, labels still visible */
@media (min-width:768px){
  .es26 .es-rec__grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:11px 16px;
    align-items:start;
  }
}

/* >=1024px — true table reading. Columns come from --es-rec-cols, set per
   page on .es-rec-list. Labels are hidden because the sticky header row
   carries them; they remain in the DOM for screen readers. */
@media (min-width:1024px){
  .es26 .es-rec__grid{
    grid-template-columns:var(--es-rec-cols, repeat(4, minmax(0,1fr)));
    gap:14px;
    align-items:center;
  }
  .es26 .es-rec{ padding:12px 15px; }
  .es26 .es-rec__f{ gap:0; }
  /* Visually hidden, still announced. */
  .es26 .es-rec--table .es-rec__k{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  /* Header row: the labels the records just hid. */
  .es26 .es-rec-thead{
    display:grid;
    grid-template-columns:var(--es-rec-cols, repeat(4, minmax(0,1fr)));
    gap:14px; align-items:center;
    padding:0 15px 8px;
    font-size:10.5px; font-weight:500; letter-spacing:.04em;
    text-transform:uppercase; color:var(--es-text-3);
  }
}

/* Header row is desktop-only: below 1024px each field carries its own label. */
@media (max-width:1023.98px){
  .es26 .es-rec-thead{ display:none; }
}

/* <768px — toolbar stacks; chips scroll horizontally via .es-chiprow--scroll */
@media (max-width:767.98px){
  .es26 .es-rec-bar{ flex-direction:column; align-items:stretch; gap:9px; }
  .es26 .es-rec-search{ flex:1 1 auto; }
  .es26 .es-rec{ padding:13px 14px; }
  .es26 .es-rec__act{ margin-top:10px; }
  .es26 .es-rec__act .es-rec__btn{ flex:1 1 auto; }
}

/* Respect reduced-motion: kill every transition declared above. */
@media (prefers-reduced-motion:reduce){
  .es26 .es-rec,
  .es26 .es-rec__btn,
  .es26 .es-rec__cp,
  .es26 .es-rec-pager a,
  .es26 .es-rec-search input,
  .es26 .es-rec-search__go,
  .es26 .es-rec-alert__x{ transition:none; }
}
/* ===== END MODULE 1 RECORD SYSTEM ======================================== */

/* ===========================================================================
   ELITE SMM v2026 — MODULE 1 / M2 SUPPLEMENT
   ---------------------------------------------------------------------------
   Refill, Subscriptions and Drip-feed run ENTIRELY on the M1 `.es-rec-*`
   system. Verified: of the 40 classes those three templates use, 39 were
   already defined by M1 and are reused untouched.

   This block adds ONLY the handful of rules M1 did not yet need, because M1
   shipped no page that rendered an inline copy button or an actions cell.
   Nothing above is edited or overridden.
   =========================================================================== */

/* The copy glyph must never be pushed off by a long URL. (The inline-flex
   behaviour it depends on is declared once, on .es-rec__v above.) */
.es26 .es-rec__v .es-rec__cp{ flex:0 0 auto; }

/* Actions live in a grid cell like any other field. On desktop the cell is
   right-aligned so the button column reads as a trailing edge. */
@media (min-width:1024px){
  .es26 .es-rec--table .es-rec__f--act .es-rec__v,
  .es26 .es-rec--table .es-rec__act{ justify-content:flex-end; }
}

/* Metadata links inherit the row's 12px scale rather than the 13px value
   scale, so the reorder chip does not out-weigh real data. */
.es26 .es-rec__m .es-rec__link{ font-weight:500; }
.es26 .es-rec__m i.fa-redo{ font-size:11px; }

/* Empty-state hint uses the shared muted colour; M1 left it at --es-text-3
   which is correct, this only widens the measure for the longer Data Module
   copy. */
.es26 .es-rec-empty .es-fx-empty__hint{ max-width:44ch; }
/* Defensive: if a panel ever emits a status that produces no modifier, the
   bare .es-pill (style.css:8329) still renders a correctly themed neutral
   chip. Nothing can appear unstyled. */
.es26 .es-rec .es-pill{ font-variant-numeric:normal; }
/* ===== END M2 SUPPLEMENT ================================================= */

/* ===========================================================================
   ELITE SMM v2026 — MODULE 1 / M2.1 POLISH + PARITY
   ---------------------------------------------------------------------------
   Polish pass over the M1/M2 record system. No new architecture, no new
   components, no duplicated rules — every selector below either refines an
   existing `.es-rec-*` rule or reuses a component that already shipped.

   SCOPE CLASS: `.es-recpage` is added alongside `.es26` on the three Data
   Module pages, mirroring EXACTLY the pattern the Support module already uses
   (`.es26.es-sup`, `.es26.es-vt`, style.css:8532). It exists for one reason:
   to win against the global `a{color:#ffffff!important}` at style.css:22
   WITHOUT touching that legacy rule, which countless other pages still rely on.
   =========================================================================== */

/* ---- 1. LIGHT-THEME ANCHOR RESET (root cause fix) ------------------------
   style.css:22 declares `a { color:#ffffff !important; }` globally. In dark
   that is invisible-proof; in LIGHT every anchor renders white-on-white.
   That is why, in the light screenshots, the status chips appeared as blank
   pills and the clickable metadata values (New posts "300 / 300", Old posts,
   Runs "1 / 10") vanished while their labels stayed visible — the values are
   <a> elements, the labels are not.

   Per-element patches cannot beat a global !important, so this is ONE scoped
   reset — identical in shape to the Support module's proven fix. It applies
   only inside .es-recpage; nothing else in the panel is affected. */
.es26.es-recpage a:not(.es-chip):not(.es-rec__btn):not(.es-pg){ color:var(--es-text-2) !important; }
.es26.es-recpage .es-rec__link{ color:var(--es-violet-600) !important; }
.es26.es-recpage .es-rec__link:hover{ color:var(--es-violet-800) !important; }
body.dark .es26.es-recpage .es-rec__link{ color:var(--es-violet-200) !important; }
body.dark .es26.es-recpage .es-rec__link:hover{ color:#fff !important; }

/* Chips: label must read as text, active chip stays white on violet. */
.es26.es-recpage .es-rec-chips .es-chip{ color:var(--es-text-2) !important; }
.es26.es-recpage .es-rec-chips .es-chip:hover{ color:var(--es-text) !important; }
.es26.es-recpage .es-rec-chips .es-chip.is-active,
.es26.es-recpage .es-rec-chips .es-chip.is-active i{ color:#fff !important; }
.es26.es-recpage .es-rec-chips .es-chip i{ color:currentColor !important; }

/* Buttons keep their own colour language. */
.es26.es-recpage a.es-rec__btn{ color:var(--es-text-2) !important; }
.es26.es-recpage a.es-rec__btn:hover{ color:var(--es-text) !important; }
.es26.es-recpage a.es-rec__btn--primary,
.es26.es-recpage a.es-rec__btn--primary:hover{ color:#fff !important; }

/* Empty-state CTA is an <a class="es-rec__btn"> — same treatment. */
.es26.es-recpage .es-fx-empty a{ color:var(--es-text-2) !important; }

/* ---- 2. DISCOVERABLE CLICKABLE VALUES -----------------------------------
   Backend values that are genuinely links (New posts, Old posts, Runs) must
   LOOK interactive without looking like raw HTML hyperlinks. Treatment: the
   value sits in a subtle tinted chip with an inline "open" glyph that only
   animates on hover — premium SaaS, not a blue underline. */
.es26 .es-rec__mv a.es-rec__link{
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; margin:-1px -1px -1px 0;
  border-radius:7px; text-decoration:none;
  background:var(--es-violet-50);
  border:1px solid transparent;
  transition:background-color .15s, border-color .15s, color .15s;
}
body.dark .es26 .es-rec__mv a.es-rec__link{ background:rgba(127,119,221,.16); }
.es26 .es-rec__mv a.es-rec__link:hover{
  background:var(--es-violet-100);
  border-color:var(--es-violet-400);
  text-decoration:none;
}
body.dark .es26 .es-rec__mv a.es-rec__link:hover{ background:rgba(127,119,221,.3); }
.es26 .es-rec__mv a.es-rec__link:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:1px; }
/* The affordance glyph. Hidden from AT (the link text carries the meaning). */
.es26 .es-rec__mv a.es-rec__link::after{
  content:"\f35d";                       /* fa external-link-alt */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  font-size:8.5px; opacity:.55;
  transition:opacity .15s, transform .15s;
}
.es26 .es-rec__mv a.es-rec__link:hover::after{ opacity:1; transform:translate(1px,-1px); }

/* ---- 3. SERVICE ID — attached to the service, not orphaned --------------
   Previously the reorder control was a lone icon + number at the tail of the
   metadata row, disconnected from the thing it reorders. It now sits directly
   under the service name as a labelled chip. Same route, same behaviour. */
.es26 .es-rec__svcwrap{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.es26 .es-rec__svcid{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  padding:2px 9px; border-radius:var(--es-radius-pill);
  font-size:11px; font-weight:500; line-height:1.5;
  background:var(--es-violet-50); color:var(--es-violet-600) !important;
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
  transition:background-color .15s, border-color .15s;
}
body.dark .es26 .es-rec__svcid{ background:rgba(127,119,221,.16); color:var(--es-violet-200) !important; }
.es26 .es-rec__svcid:hover{ background:var(--es-violet-100); border-color:var(--es-violet-400); text-decoration:none; }
body.dark .es26 .es-rec__svcid:hover{ background:rgba(127,119,221,.3); }
.es26 .es-rec__svcid:focus-visible{ outline:2px solid var(--es-violet-400); outline-offset:2px; }
.es26 .es-rec__svcid i{ font-size:10px; color:currentColor !important; }

/* ---- 4. CARD + BUTTON INTERACTION (Orders parity) -----------------------
   Orders uses a border-colour shift, never a shadow bloom. Matching it.
   `transform` is on a promoted property only; no layout is triggered. */
.es26 .es-rec:hover{ border-color:var(--es-border-2); background:var(--es-inset); }
.es26 .es-rec__btn:hover{ border-color:var(--es-violet-400); }
.es26 .es-rec__btn:active{ transform:translateY(1px); }
.es26 .es-rec__btn--primary:hover{ background:var(--es-violet-800); border-color:var(--es-violet-800); }

/* ---- 5. METADATA ROW — spacing + icon alignment -------------------------
   The reported cramping: label and value were separated by the same gap as
   two unrelated pairs, so "Delay No delay" read as one token. Each pair is now
   internally tight and externally generous, and every icon is a fixed-width
   box so all rows align on a common optical grid. */
.es26 .es-rec__mk{ color:var(--es-text-3); white-space:nowrap; }
body.light .es26 .es-rec__mv{ color:var(--es-text); }
body.light .es26 .es-rec__mk,
body.light .es26 .es-rec__m i,
body.light .es26 .es-rec__k{ color:var(--es-text-3); }

/* ---- 6. PAGINATION — reuse the Orders/Tickets `.es-pg` language ----------
   Same metrics, same states, same tokens as .es-sup-pager (tickets.twig:426).
   Kept on `.es-rec-pager` so no second component is introduced; the visual
   result is identical to the shipped premium pager. */
.es26 .es-rec-pager a{
  min-width:38px; height:38px; padding:0 12px;
  border-color:var(--es-border-2); color:var(--es-text-2);
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.es26 .es-rec-pager a:hover{
  border-color:var(--es-violet-400); color:var(--es-text); background:var(--es-inset);
}
.es26 .es-rec-pager .active a{
  background:var(--es-violet-600); border-color:var(--es-violet-600); color:#fff !important;
}
body.light .es26 .es-rec-pager a{ color:var(--es-text); }
body.light .es26 .es-rec-pager a:hover{ border-color:var(--es-violet-600); color:var(--es-violet-600); }

/* ---- 7. COPY FEEDBACK — "Copied" bubble ---------------------------------
   The M1 handler already swaps the glyph to a check. This adds the label the
   brief asked for, with ZERO new JavaScript: the bubble is a ::after on the
   `.is-copied` class the existing handler already toggles. */
.es26 .es-rec__cp:active{ transform:scale(.9); }
.es26 .es-rec__cp::after{
  content:"Copied";
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(3px);
  padding:3px 8px; border-radius:6px;
  background:var(--es-violet-900); color:#fff;
  font-size:10px; font-weight:500; line-height:1.4;
  white-space:nowrap; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:5;
}
.es26 .es-rec__cp.is-copied::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
body.light .es26 .es-rec__cp::after{ background:var(--es-violet-800); }

/* ---- 8. MOBILE — intentional card design, not squeezed desktop ----------
   Same DOM. The phone layout groups the record into three readable bands:
   identity, body, then a boxed metadata block. */
@media (max-width:767.98px){
  .es26 .es-rec{ padding:14px; border-radius:var(--es-radius-card); }

  /* Field labels become small caps sitting tight above their value, so each
     pair reads as one unit instead of a loose two-line stack. */
  .es26 .es-rec__grid{ display:flex; flex-direction:column; gap:10px; }
  .es26 .es-rec__f{ gap:3px; }
  .es26 .es-rec__k{ font-size:9.5px; letter-spacing:.06em; }
  .es26 .es-rec__v{ font-size:14px; line-height:1.45; }

  /* Metadata becomes a distinct panel — the single biggest scanability win.
     Two columns so label/value pairs align down the card. */
  .es26 .es-rec__meta{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:9px 12px;
    margin-top:12px; padding:11px 12px;
    background:var(--es-inset); border-top:none;
    border-radius:var(--es-radius-ctrl);
    font-size:11.5px;
  }
  .es26 .es-rec__m{ flex-wrap:wrap; gap:4px; }
  /* Label on its own line, value beneath — no mid-word wrapping. */
  .es26 .es-rec__mk{ flex:1 0 100%; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; }
  .es26 .es-rec__mv{ font-size:12.5px; }
  .es26 .es-rec__m i{ display:none; }   /* icons are noise at this density */

  /* Long single values (service name, link) span the full width. */
  .es26 .es-rec__meta .es-rec__m--wide{ grid-column:1 / -1; }

  /* Touch targets: 44px minimum, full-width primary actions. */
  .es26 .es-rec__act{ margin-top:12px; gap:8px; }
  .es26 .es-rec__act .es-rec__btn{ flex:1 1 auto; min-height:44px; font-size:13px; }
  .es26 .es-rec__cp{ min-width:32px; min-height:32px; }

  /* Chips: comfortable thumb targets while still scrolling horizontally. */
  .es26 .es-rec-chips .es-chip{ padding:9px 15px; font-size:13px; }

  /* Search: full-width, 44px tall. */
  .es26 .es-rec-search input{ height:44px; font-size:14px; }
  .es26 .es-rec-search__go{ width:34px; height:34px; }

  /* Pagination stays reachable and thumb-sized. */
  .es26 .es-rec-pager a{ min-width:40px; height:40px; }
}

/* Very small phones: metadata collapses to a single column. */
@media (max-width:400px){
  .es26 .es-rec__meta{ grid-template-columns:1fr; }
}

/* ---- 9. REDUCED MOTION -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .es26 .es-rec,
  .es26 .es-rec__btn,
  .es26 .es-rec__cp,
  .es26 .es-rec__cp::after,
  .es26 .es-rec__svcid,
  .es26 .es-rec-pager a,
  .es26 .es-rec__mv a.es-rec__link,
  .es26 .es-rec__mv a.es-rec__link::after{ transition:none; }
  .es26 .es-rec__btn:active,
  .es26 .es-rec__cp:active{ transform:none; }
}
/* ===== END M2.1 POLISH =================================================== */

/* ===========================================================================
   ELITE SMM v2026 — MODULE 1 / M3 + M4 (REFUNDS + UPDATES)
   ---------------------------------------------------------------------------
   Both pages run on the shared `.es-rec-*` system. Verified: of the 41 classes
   the two templates use, 37 were already defined by M1/M2/M2.1 and are reused
   untouched. This block adds ONLY the four the shared system did not yet have,
   because no earlier page rendered a change-log row.

   No new pagination, no new chips, no new empty state, no new pills, no new
   search — all inherited. Nothing above is edited or overridden.
   =========================================================================== */

/* ---- REFUNDS: amount as the headline value ------------------------------
   The refunded amount is the reason this page exists, so it carries slightly
   more weight than a neutral cell. Colour comes from the token set, never a
   hardcoded green — the backend string already includes its own +/- sign. */
.es26 .es-rec__amt{ font-weight:600; color:var(--es-teal-d); }
body.dark .es26 .es-rec__amt{ color:#6FD3B0; }

/* ---- UPDATES: the change line ------------------------------------------
   Badge + sentence stack tightly so they read as one statement. */
.es26 .es-rec__chg{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.es26 .es-rec__chgtext{ color:var(--es-text); overflow-wrap:anywhere; }

/* ---- UPDATES: semantic type badge --------------------------------------
   Driven by the documented `update['type']` field, which NEITHER the default
   theme nor the previous Elite version rendered. Reuses the pill metrics
   already established by .es-pill so the two read as one family. Every colour
   is a token; `--neutral` is the safe fallback for unmapped/translated types. */
.es26 .es-upd-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:var(--es-radius-pill);
  font-size:10.5px; font-weight:500; line-height:1.5;
  white-space:nowrap; flex-shrink:0;
}
.es26 .es-upd-badge i{ font-size:9px; }

/* rate increased — costs the user more, so it reads as a caution, not a win */
.es26 .es-upd-badge--up{ background:var(--es-amber-l); color:var(--es-amber-d); }
body.dark .es26 .es-upd-badge--up{ background:rgba(239,159,39,.16); color:#FAC775; }

/* rate decreased — cheaper for the user */
.es26 .es-upd-badge--down{ background:var(--es-teal-l); color:var(--es-teal-d); }
body.dark .es26 .es-upd-badge--down{ background:rgba(29,158,117,.16); color:#6FD3B0; }

/* service enabled */
.es26 .es-upd-badge--on{ background:var(--es-teal-l); color:var(--es-teal-d); }
body.dark .es26 .es-upd-badge--on{ background:rgba(29,158,117,.16); color:#6FD3B0; }

/* service disabled */
.es26 .es-upd-badge--off{ background:var(--es-pink-l); color:var(--es-pink-d); }
body.dark .es26 .es-upd-badge--off{ background:rgba(212,83,126,.16); color:#ED93B1; }

/* new service */
.es26 .es-upd-badge--new{ background:var(--es-violet-50); color:var(--es-violet-600); }
body.dark .es26 .es-upd-badge--new{ background:rgba(127,119,221,.16); color:var(--es-violet-200); }

/* unmapped / translated type — degraded, never broken */
.es26 .es-upd-badge--neutral{ background:var(--es-gray-l); color:var(--es-gray-d); }
body.dark .es26 .es-upd-badge--neutral{ background:rgba(180,178,169,.16); color:#C9C7C0; }

/* ---- Mobile ------------------------------------------------------------
   Same DOM. On phones the badge sits inline before the sentence so the change
   line stays compact instead of consuming two full rows per record. */
@media (max-width:767.98px){
  .es26 .es-rec__chg{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
  .es26 .es-rec__chgtext{ flex:1 1 100%; font-size:13px; line-height:1.5; }
  .es26 .es-rec__amt{ font-size:15px; }
}
/* ===== END M3 + M4 ======================================================= */