/**
 * SMM NextGen SaaS Theme (Light/Dark Mode)
 * Based on authentic SMM World Panel styling & assets
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400&display=swap');

/* Base Reset & Variables */
:root {
  --smm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --smm-brand-gradient: linear-gradient(260deg, #194FAF 0%, #C658FF 100%);
  --smm-brand-purple: #C658FF;
  --smm-brand-blue: #225aea;
  --smm-brand-cyan: #0284c7;

  /* Surface Tokens (SMMWorld Light Mode Defaults) */
  --smm-surface-base: #f2f3f8;
  --smm-surface-sidebar: #ffffff;
  --smm-surface-header: #ffffff;
  --smm-surface-card: #ffffff;
  --smm-surface-card-raised: #ffffff;
  --smm-surface-input: #ffffff;
  --smm-surface-hover: #f5f7fc;

  /* Border Tokens */
  --smm-border-subtle: #e5e9f2;
  --smm-border-card: #e2e6f3;
  --smm-border-input: #c8d0e5;
  --smm-border-focus: #225aea;

  /* Typography Colors */
  --smm-text-primary: #151e3a;
  --smm-text-secondary: #525f7f;
  --smm-text-tertiary: #8898aa;
  --smm-text-inverse: #ffffff;

  /* Gradients */
  --smm-gradient-primary: linear-gradient(260deg, #194FAF 0%, #C658FF 100%);
  --smm-gradient-cyan: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

  /* Radii & Shadows */
  --smm-radius-sm: 8px;
  --smm-radius-md: 12px;
  --smm-radius-lg: 16px;
  --smm-radius-pill: 50px;
  --smm-shadow-card: 0 2px 12px rgba(21, 30, 58, 0.04);
  --smm-shadow-glow: 0 4px 15px rgba(34, 90, 234, 0.25);
}

/* Dark Mode Tokens */
body.nightmode, html[data-theme="dark"] body {
  --smm-surface-base: #0E0B1D;
  --smm-surface-sidebar: #15102C;
  --smm-surface-header: #1C153A;
  --smm-surface-card: #1C153A;
  --smm-surface-card-raised: #211947;
  --smm-surface-input: #211947;
  --smm-surface-hover: rgba(255, 255, 255, 0.06);

  --smm-border-subtle: rgba(98, 68, 244, 0.18);
  --smm-border-card: rgba(98, 68, 244, 0.29);
  --smm-border-input: rgba(98, 68, 244, 0.35);
  --smm-border-focus: #C658FF;

  --smm-text-primary: #FFFFFF;
  --smm-text-secondary: #A6A4C5;
  --smm-text-tertiary: #7D7A9E;
  --smm-text-inverse: #0E0B1D;

  --smm-shadow-card: 0 4px 25px rgba(0, 0, 0, 0.4);
  --smm-shadow-glow: 0 4px 20px rgba(198, 88, 255, 0.4);
}

/* Body & Canvas */
body.daymode, html[data-theme="light"] body {
  --smm-text-primary: #151e3a;
  --smm-text-secondary: #525f7f;
  --smm-text-tertiary: #8898aa;
  --smm-text-inverse: #FFFFFF;
  background-color: #f2f3f8 !important;
  color: #151e3a !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body.nightmode, html[data-theme="dark"] body {
  background-color: #0E0B1D !important;
  color: #FFFFFF !important;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   SIDEBAR & LAYOUT TOGGLE ARCHITECTURE
   ========================================================================== */

.app-main {
  min-height: 100vh;
  position: relative;
  display: block;
}

/* Desktop & Tablet Sidebar (>= 992px, including 1024px screens) */
@media (min-width: 992px) {
  .app-sidebar-wrap {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 1000 !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: width 0.25s ease, left 0.25s ease;
  }
  .app-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    flex: 0 0 270px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid #EAEAF7 !important;
    background-color: #ffffff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    transition: width 0.25s ease, min-width 0.25s ease, flex 0.25s ease, background-color 0.2s ease, border-color 0.2s ease !important;
  }
  .nightmode .app-sidebar {
    background-color: #15102C !important;
    border-color: rgba(98, 68, 244, 0.29) !important;
  }
  .app-main-outer {
    padding: 20px 20px 0 calc(20px + 270px) !important;
    transition: padding 0.25s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* When Sidebar is Collapsed to 70px icon mode on Desktop */
  .app-main.active .app-sidebar {
    width: 70px !important;
    min-width: 70px !important;
    flex: 0 0 70px !important;
    overflow: visible !important;
  }
  .app-main.active .app-main-outer {
    padding: 20px 20px 0 calc(20px + 70px) !important;
  }
  .app-main.active .app-brand,
  .app-main.active .app-profile-info,
  .app-main.active .menu-text,
  .app-main.active .app-sidebar-footer,
  .app-main.active .vertical-nav-menu .has-children > a::after,
  .app-main.active .vertical-nav-menu .has-children .submenu:before {
    display: none !important;
  }
  .app-main.active .app-brand-wrap {
    padding: 20px 17px !important;
    justify-content: center !important;
  }
  .app-main.active .app-profile-wrap {
    padding: 24px 6px !important;
  }
  .app-main.active .app-profile-viewer {
    padding: 10px !important;
    justify-content: center !important;
  }
  .app-main.active .app-sidebar-menu-wrap {
    padding: 0 12px 24px !important;
  }
  .app-main.active .vertical-nav-menu a > .navbar-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .app-main.active .vertical-nav-menu > li > a {
    justify-content: center !important;
    padding: 10px 0 !important;
  }
}

/* Mobile Sidebar (< 992px) */
@media (max-width: 991.98px) {
  .app-sidebar-wrap {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 285px !important;
    height: 100vh !important;
    z-index: 1060 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .app-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
    border: 1px solid #EAEAF7 !important;
    background-color: #EAEAF7 !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
  }
  .nightmode .app-sidebar {
    background-color: #15102C !important;
    border-color: rgba(98, 68, 244, 0.29) !important;
  }
  .app-main-outer {
    padding: 15px 15px 0 15px !important;
    width: 100% !important;
  }

  body.sidebar-open .app-sidebar-wrap,
  .app-main.active .app-sidebar-wrap {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Mobile Backdrop */
#sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(14, 11, 29, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  display: none;
}
@media (max-width: 991.98px) {
  body.sidebar-open #sidebar-backdrop,
  .app-main.active #sidebar-backdrop {
    display: block !important;
  }
}

/* Hamburger Buttons (Desktop & Mobile) */
.app-hamburger, .mobile-hamburger {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
}
.app-hamburger span, .mobile-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--smm-text-primary, #f8fafc);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.nightmode .app-hamburger span, .nightmode .mobile-hamburger span {
  background-color: #FFFFFF !important;
}

@import url('../images/smmworld/satoshi.bin');
body {
  font-family: 'Satoshi', sans-serif;
  padding: 0;
  margin: 0;
  transition: .3s ease all;
}
/*Homepage Style*/
#main-top {
  padding-top: 140px;
  background: #CF85F5;
  background: linear-gradient(177deg, rgba(207, 133, 245, 1) 0%, rgba(53, 121, 228, 1) 100%);
}
.logOut .navbar.navbar-default {
  background-color: transparent;
  border: none;
}
.logOut.signin .navbar.navbar-default {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
}
.masthead {
  background-color: #FFF;
  border-radius:0 0 20px 20px;
  padding: 12px;
  filter: drop-shadow(0 4px 23.2px rgba(0, 0, 0, 0.42));
}
._site_name {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  max-width: 255px;
  border-radius: 30px;
  text-align: center;
  height: 48px;
  line-height: 2.4;
  position: relative;
}
._site_name:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 30px;
  background: linear-gradient(to top, RGBA(255, 255, 255, 0), RGB(255, 255, 255));
  -webkit-mask: linear-gradient(to top, RGBA(255, 255, 255, 0), RGB(255, 255, 255));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: add, add;
  mask-composite: add, add;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
#main-top h1 {
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 20px;
}
.heading-icon {
  margin-left: 15px;
  margin-top: -8px;
}
._main_text {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 30px;
}
.grow-btn {
  font-size: 16px;
  display: flex;
  color: #fff;
  font-weight: 700;
  align-items: center;
  margin-top: 10px;
}
.grow-btn svg {
  margin-left: 10px;
  width: 14px;
}
._count_orders {
  font-weight: 700;
}
.form-group._custom_fields {
  position: relative;
}
._custom_fields .form-control {
  background-color: #fff;
  border-color: #E5E5E5;
  border-radius: 20px;
  height: 58px;
  padding-left: 60px;
  box-shadow: none;
}
._custom_fields ._input_icon {
  width: 46px;
  height: 46px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #C658FF;
  background: linear-gradient(177deg, rgba(198, 88, 255, 1) 0%, rgba(25, 79, 175, 1) 100%);
  border-radius: 15px;
  text-align: center;
  line-height: 38px;
}
#main-top form .row .col-sm-6:first-child {
  padding-right: 5px;
}
#main-top form .row .col-sm-6:last-child {
  padding-left: 5px;
}
form .checkbox {
  margin-top: 0;
}
form .checkbox label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  padding-left: 24px;
}
form .checkbox label:before {
  content: '';
  background-color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 2px;
}
.checkbox input:checked ~ label:after {
  content: '\f57d';
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  position: absolute;
  left: 2px;
  top: 1px;
  background: -webkit-linear-gradient(#194FAF, #C658FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
}
form .checkbox input {
  display: none;
}
.logOut .navbar-nav li a {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  padding: 0;
  display: block;
  background-color: transparent;
  border: none;
}
.nav.navbar-nav.navbar-right._custom_nav_elem {
  margin-left: 190px;
  margin-right: 0;
}
.logOut .nav.navbar-nav.navbar-right {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logOut .nav.navbar-nav.navbar-right li {
  margin: 0 20px;
}
.logOut .navbar-nav li.active a, .logOut .navbar-nav li.active a:hover, .logOut .navbar-nav li a:hover {
  background: -webkit-linear-gradient(#194FAF, #C658FF);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logOut .nav.navbar-nav.navbar-right._custom_nav_elem li {
  margin: 0;
}
.nav.navbar-nav.navbar-right._custom_nav_elem li a {
  border-radius: 20px;
  background-color: #010101;
  color: #fff;
  padding: 19px;
}
.nav.navbar-nav.navbar-right._custom_nav_elem li a:hover {
  background: #010101;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#main-top .container > .row {
  display: flex;
  align-items: center;
}
._main_hero {
  width: 150%;
  background: url(../images/smmworld/jmurweefu4m6guxc.svg);
  margin-left: -170px;
  position: relative;
  z-index: 0;
}
._main_hero img {
  width: 85%;
  display: block;
  margin-left: auto;
  margin-right: -30px;
}
._bottom_shape{
  --c: 190px;
  height: 190px;
  aspect-ratio: 3/2;
  mask: radial-gradient(60% var(--c) at top,#0000 calc(100% - 5px),#000);
  background: #FFFFFF;
  width: 100%;
  margin-top: -110px;
}
#main-top form {
  position: relative;
  z-index: 1;
}
._form_btn {
  background: linear-gradient(90deg, #FF7A00 0%, #FFA600 100%);
  border: none;
  border-radius: 20px;
  height: 48px;
  min-width: 120px;
  font-size: 14px;
  font-weight: 500;
}
._forgot_password {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  float: right;
}
._forgot_password:hover {
  color: #fff;
  text-decoration: none;
}
._regester_text {
  font-size: 15px;
  text-align: left;
  color: #ffffff;
  font-weight: 500;
}
._regester_text a {
  color: #ffffff;
}
._regester_text a:hover {
  color: #ffffff;
  text-decoration: none;
}
._why_main_head {
  max-width: 263px;
  font-size: 18px;
  font-weight: 500;
  color: #010101;
  background-color: #fff;
  margin: -30px auto 70px;
  border-radius: 30px;
  position: relative;
  display: flex;
  justify-content: center;
  height: 58px;
  align-items: center;
}
._why_main_head span {
  display: inline-flex;
  background-color: #fff;
  min-width: 252px;
  height: 48px;
  align-items: center;
  border-radius: inherit;
  justify-content: center;
  filter: drop-shadow(0 10px 23.6px RGBA(107, 108, 137, 0.26));
}
._why_main_head svg {
  width: 18px;
  margin-right: 5px;
}
._sub_heading {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  color: #010101;
  margin-bottom: 30px;
}
._main_content {
  font-size: 16px;
  font-weight: 500;
  color: #6B6C89;
}
._wcbox {
  padding: 30px 25px;
  border-radius: 26px;
}
._affordable._wcbox {
  background-color: RGBA(25, 33, 175, 0.17);
}
._secure._wcbox {
  background: #C658FF;
  background: linear-gradient(0deg, #c658ff 0%, #194faf 100%);
}
._privacy._wcbox {
  background: linear-gradient(0deg, #FF7A00 0%, #FFA600 72%);
}
._hassle._wcbox {
  background-color: #000000;
}
._wcbox_icon_container {
  width: 58px;
  height: 57px;
  display: flex;
  background-image: url(../images/smmworld/ucixrlhggez4iha0.svg);
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  margin-bottom: 20px;
}
._wcbox_icon_container img {
  display: block;
  width: 34px;
  object-fit: fill;
}
._wcbox_heading {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}
._wcbox_content {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
._affordable ._wcbox_heading {
  color: #010101;
}
._affordable ._wcbox_content {
  color: #6B6C89;
}
.more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  display: block !important;
}

.more-content.open {
  max-height: 200px;
  opacity: 1;
}
.read-more {
  background-color: #FFF;
  color: #171719;
  font-size: 12px;
  font-weight: 500;
  width: 94px;
  height: 31px;
  display: block;
  text-align: center;
  line-height: 31px;
  border-radius: 10px;
  cursor: pointer;
}
#increase-social {
  padding-top: 135px;
}
.increase-social-image {
  width: 100%;
  display: block;
}
.btn.btn-main {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  width: 200px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 44px;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
}
._targeted_wrap > div {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
  pointer-events: none;
}

._targeted_wrap > div.active {
  max-height: 500px; /* adjust based on content */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0s;
}
._targeted_item.active {
  color: #000;
}
._targeted_list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  gap: 15px 0;
}
._targeted_list li {
  max-width: 49%;
  flex: 0 0 49%;
}
._targeted_item {
  background-color: #EAEAF7;
  border: 1px solid RGBA(98, 68, 244, 0.29);
  border-radius: 16px;
  color: #010101;
  font-weight: 500;
  line-height: 22px;
  height: 58px;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
._targeted_wrap {
  background-color: RGBA(216, 217, 241, 0.54);
  padding: 45px 35px;
  border-radius: 30px;
  height: 466px;
}
._tgbox_heading {
  font-size: 32px;
  color: #010101;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
}
._targeted_wrap .btn.btn-main {
  position: absolute;
  bottom: 35px;
}
#targeted-panel {
  padding-top: 120px;
}
#how-it-work {
  padding-top: 150px;
}
.how-wrap {
  background-color: RGBA(216, 217, 241, 0.54);
  border-radius: 43px;
  padding: 50px;
}
.how-left-box {
  background: url(../images/smmworld/0sjk7w8fck0hbl18.webp),linear-gradient(180deg, #194FAF 0%, #C658FF 100%);
  border: 4px solid #fff;
  border-radius: 37px;
  box-shadow: 0 44px 50px -40px #C658FF;
  padding: 40px 32px 166px;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-size: contain;
  min-height: 586px;
}
._how_badge {
  width: 172px;
  background-color: #FFFFFF;
  height: 49px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 500;
  color: #010101;
  margin-bottom: 20px;
}
._how_badge span {
  width: 37px;
  height: 37px;
  display: inline-flex;
  background-color: #FF772E;
  border-radius: 32px;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.how-left-box ._sub_heading {
  font-size: 27px;
  color: #fff;
  margin-bottom: 18px;
}
.how-left-box ._how_content {
  color: #Fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.text-right .btn-white {
  margin-left: auto;
}
.btn.btn-main.btn-white {
  background: #FFF;
  color: #010101;
  border: 1px solid RGBA(98, 68, 244, 0.29);
}
._how_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
._how_list li {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
._how_circle {
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  border: 12px solid #ffffff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  min-width: 100px;
  margin-right: 50px;
  position: relative;
  filter: drop-shadow(0 16px 10px RGBA(41, 47, 64, 0.44));
}
._how_circle._orange {
  background-color: #FF772E;
}
._how_circle._purple {
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
}
._hiw_heading {
  font-size: 22px;
  font-weight: 700;
  color: #010101;
  margin-bottom: 10px;
}
._how_text ._main_content {
  font-size: 14px;
}
._how_circle._orange:after,
._how_circle._purple::after {
  background-image: url(../images/smmworld/2z2f3cbd84n5tim3.webp);
}
._how_circle._orange:after {
  top: 60px;
  right: -40px;
}
._how_circle._purple::after {
  top: 70px;
  left: -38px;
  transform: rotateY(180deg);
}
._how_circle:after {
  content: '';
  width: 23px;
  height: 77px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
}
li:last-child ._how_circle::after {
  display: none;
}
._our_list_content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
  pointer-events: none;
}

._our_list_content.active {
  max-height: 1000px; /* adjust based on content height */
  opacity: 1;
  visibility: visible;
  transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

#our-top {
  padding-top: 150px;
}
._our_list {
  padding: 0;
  list-style: none;
  margin: 30px 0 40px;
  display: flex;
}
._our_list ._our_list_item,
._ot_heading:before {
  width: 82px;
  height: 82px;
  background-image: url(../images/smmworld/az9ldfd6h9hfyo8j.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
._ot_heading:before {
  content: '';
  display: block;
  margin-bottom: 15px;
}
._our_list ._our_list_item {
  width: 82px;
  height: 82px;
  background-color: transparent;
  border: none;
}
._our_list ._our_list_item._our_instagram,
._our_instagram ._ot_heading::before{
  background-position: 0 0;
}
._our_list ._our_list_item._our_facebook,
._our_facebook ._ot_heading::before{
  background-position: -181px 0;
}
._our_list ._our_list_item._our_youtube,
._our_youtube ._ot_heading::before {
  background-position: -91px 0;
}
._our_list ._our_list_item._our_twitter,
._our_twitter ._ot_heading::before {
  background-position: -363px 0;
}
._our_list ._our_list_item._our_tiktok,
._our_tiktok ._ot_heading::before{
  background-position: -272px 0;
}
._our_list ._our_list_item._our_linkedin,
._our_linkedin ._ot_heading::before {
  background-position: -454px 0;
}
._our_list li {
  margin-right: 10px;
}
._our_top_wrap {
  position: relative;
  padding: 50px 40px;
  box-shadow: 0 100px 50px -80px rgba(0, 0, 0, 0.35);
  border-radius: 31px;
  min-height: 564px;
  max-width: 564px;
  height: 564px;
  overflow: hidden;
}
._our_top_wrap:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 31px;
  padding: 3px;
  background: linear-gradient(0deg,RGBA(25, 79, 175, 0),#194FAF);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
._ot_heading {
  font-size: 32px;
  font-weight: 700;
  color: #010101;
  margin-top: 0;
  position: relative;
  margin-bottom: 15px;
}
._our_list_content ._main_content {
  font-size: 14px;
  margin-bottom: 18px;
}
._ot_list_head {
  font-size: 16px;
  font-weight: 700;
  color: #010101;
  margin-bottom: 20px;
}
._ot_bullets {
  padding: 0;
  margin: 0;
  list-style: none;
}
._ot_bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #6B6C89;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
._ot_bullets li:before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50px;
  border: 4px solid transparent;
  background: linear-gradient(0deg,#C658FF,#194FAF) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#orders-completed {
  padding-top: 120px;
}
._order_completed_wrap {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border-radius: 43px;
  padding: 20px;
}
._order_completed_box {
  background-color: #fff;
  border-radius: 30px;
  filter: drop-shadow( 0 4px 4px rgba(0, 0, 0, 0.47));
  display: flex;
  align-items: center;
  padding: 30px 25px;
}
._order_completed_left {
  margin-right: 15px;
}
._order_completed_heading {
  font-size: 32px;
  font-weight: 700;
  color: #010101;
}
._order_completed_content {
  font-size: 16px;
  font-weight: 500;
  color: #6B6C89;
}
._order_completed_wrap .col-sm-4:nth-child(2) {
  padding-left: 5px;
  padding-right: 5px;
}
._primary_feat_list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 0;
  margin: 50px 0 0;
}
._primary_feat_list > li {
  max-width: 31.580%;
  flex: 0 0 31.580%;
}
._primary_feat_box {
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(1, 1, 1, 0.18);
  border-radius: 37px;
  padding: 62px 25px 40px;
  min-height: 348px;
  text-align: center;
  filter: drop-shadow(36px 27px 47px RGBA(87, 102, 143, 0.17));
}
._primary_feat_icon {
  margin-bottom: 15px;
}
._pf_heading {
  font-size: 24px;
  font-weight: 700;
  color: #010101;
  margin-bottom: 20px;
}
._primary_feat_box ._main_content {
  font-size: 14px;
}
#primary-feat {
  padding-top: 90px;
}
#secure-payment {
  padding-top: 120px;
}
._secure_payment_wrap {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border-radius: 43px;
  padding: 60px 60px 105px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
._secure_payment_wrap ._sub_heading,._secure_payment_wrap ._main_content {
  color: #fff;
}
._secure_payment_wrap ._sub_heading {
  margin-bottom: 15px;
  font-size: 48px;
}
._secure_payment_wrap ._main_content {
  font-size: 14px;
}
._secure_payment_list {
  padding: 0;
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 0 6px;
  margin: 20px auto 0;
}
._secure_payment_list ._secure_payment_item {
  display: block;
  width: 96px;
  height: 51px;
  background-color: #fff;
  border-radius: 7px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  background-image: url(../images/smmworld/wzn1d4hg2gei19n3.webp);
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: auto 28px;
}
._secure_payment_item._payment_one {
  background-position: 15px center;
}
._secure_payment_item._payment_two {
  background-position: -97px center;
}
._secure_payment_item._payment_three {
  background-position: -207px center;
}
._secure_payment_item._payment_four {
  background-position: -316px center;
}
._secure_payment_item._payment_five {
  background-position: -426px center;
}
._secure_payment_wrap:before {
  width: 88%;
  height: 1010px;
}
._secure_payment_wrap::after {
  width: 74%;
  height: 818px;
}
._secure_payment_wrap ._sub_heading::after {
  height: 630px;
  width: 58%;
}
._secure_payment_wrap::before, ._secure_payment_wrap::after, ._secure_payment_wrap ._sub_heading::after {
  content: '';
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  transform: translateY(-50%);
  z-index: 0;
}

._cheapest_list_box {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
}

._cheapest_list_box.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}

._cheapest_list_box.fade-out {
  opacity: 0;
  transform: scale(1.05);
}
#cheapest-smm {
  padding-top: 320px;
  background-color: RGBA(216, 217, 241, 0.54);
  padding-bottom: 150px;
  margin-top: -190px;
}
._cheapest_list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
._cheapest_list_item {
  display: block;
  position: relative;
  background-color: #fff;
  border-radius: 14px;
  border: none;
  width: 100%;
  text-align: left;
  padding: 21px;
  font-size: 20px;
  font-weight: 500;
  color: #010101;
}
._cheapest_list_item.active:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #194FAF,#C658FF);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: add, add;
  mask-composite: exclude;
}
._cheapest_wrap {
  background-color: #fff;
  border-radius: 21px;
  padding: 42px;
  /*min-height: 915px;*/
}
#cheapest-smm ._cheapest_wrap ._sub_heading {
  font-size: 28px;
  margin-bottom: 10px;
}
._cheapest_wrap .btn.btn-main {
  /*position: absolute;
  bottom: 35px;*/
}
.brand-higher-image {
  width: 100%;
}
#brand-higher {
  padding-top: 140px;
}
#brand-higher .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.swiper._testimonial_slider {
  max-width: 100%;
  overflow: visible;
  margin-top: 50px;
}
._testimonial_item {
  transition: padding .3s;
  width: 100%;
  max-width: 412px;
  background-color: RGBA(216, 217, 241, 0.34);
  position: relative;
  border-radius: 34px;
  padding: 30px 30px 40px;
}
._testimonial_item:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(0deg,RGBA(25, 79, 175, 0),#194FAF);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: add, add;
  mask-composite: exclude;
}
.swiper-slide-active ._testimonial_item::before {
  padding: 2px;
}
._testimonial_slider .swiper-slide {
  width: auto;
}
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  flex-shrink: 0;
  width: auto;
}

#customer-testimonial {
  padding-top: 80px;
  overflow: hidden;
}
#customer-testimonial svg {
  margin-bottom: 15px;
}

._testimonial_avatar {
  width: 80px;
  height: 80px;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
._avatar_color_1 {
  background-color: #BFF0C8;
}
._avatar_color_2 {
  background-color: #F4CE9B;
}
._avatar_color_3 {
  background-color: #C4EAFC;
}
._avatar_color_4 {
  background-color: #CCC1F0;
}
._avatar_color_4 {
  background-color: #F3ABA7;
}
._avatar_color_5 {
  background-color: #EDA7F3;
}
._testimonial_avatar:after {
  content: '';
  width: 80px;
  height: 80px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../images/smmworld/k6pky3eoye2o4bt4.webp);
  background-size: cover;
}
._avatar_icon_1:After {
  background-position: 0 0;
}
._avatar_icon_2::after {
  background-position: -77px 0px;
}
._avatar_icon_3:after {
  background-position: -151px 0;
}
._avatar_icon_4:after {
  background-position: -226px 0;
}
._avatar_icon_5::after {
  background-position: -302px 0;
}
._testimonial_heading {
  font-size: 22px;
  font-weight: 500;
  color: #010101;
  margin-bottom: 15px;
}
._testimonial_review {
  font-size: 14px;
  font-weight: 400;
  color: #6B6C89;
  line-height: 1.6;
  height: 170px;
  padding-bottom: 45px;
  border-bottom: 1px solid RGBA(87, 102, 143, 0.29);
}
._testimonial_rating_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
._testimonial_rating_start {
  background-image: url(../images/smmworld/ey928pbi3lr69nu6.webp);
  width: 135px;
  height: 27px;
  display: block;
}
._testimonial_quotation_icon {
  width: 46px;
  height: 46px;
  border-radius: 50px;
  background: url(../images/smmworld/0k3zgynbbb1fzb4d.webp),linear-gradient(180deg, #194FAF 0%, #C658FF 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 14px,auto;
}
._testimonial_slider .swiper-button-next,._testimonial_slider .swiper-button-prev {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 44px;
  height: 44px;
  display: inline-block;
  margin-top: auto;
}
.swiper-navigation {
  display: flex;
  justify-content: center;
  gap: 0 5px;
  margin-top: 30px;
}
._testimonial_slider .swiper-button-next::after,._testimonial_slider .swiper-button-prev::after {
  content: '';
  background-image: url(../images/smmworld/bbwpg90bx8m7n6lw.webp);
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 50px;
}
._testimonial_slider .swiper-button-next:after {
  background-position: -49px 0;
}
._testimonial_slider .swiper-button-prev::after {
  background-position: -1px 0;
}
._faq_wrap {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border-radius: 43px;
  padding: 60px 185px 105px;
  overflow: hidden;
  height: 1060px;
  position: relative;
}
#frequently-questions {
  padding-top: 125px;
  padding-bottom: 110px;
}
._faq_wrap ._sub_heading,._faq_wrap ._main_content {
  color: #fff;
}
._faq_wrap ._main_content {
  font-size: 14px;
  margin-bottom: 20px;
}
._faq_wrap ._sub_heading {
  margin-bottom: 15px;
}
._faq_wrap .panel-default>.panel-heading {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
._faq_wrap .panel-default>.panel-heading+.panel-collapse>.panel-body {
  border: none;
  background-color: #fff;
  border-radius: 16px;
  padding: 20px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #6B6C89;
  margin-top: 12px;
}
._faq_wrap .panel {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
}
._faq_wrap .panel-title a {
  font-size: 16px;
  font-weight: 500;
  height: 60px;
  display: flex;
  text-decoration: none;
  align-items: center;
  padding: 20px 30px;
  position: relative;
  justify-content: space-between;
}
._faq_wrap .panel-title a {
  background-color: #FF7A00;
  border-radius: 16px;
  color: #ffffff;
}
._faq_wrap .panel-group .panel + .panel {
  margin-top: 12px;
}
._faq_wrap .panel-title a.collapsed {
  background-color: #ffffff;
  color: #010101;
}
._faq_wrap .panel-title a:after {
  content: "\f056";
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-size: 19px;
  background: linear-gradient(180deg, #FFF 0%, #FFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
._faq_wrap .panel-title a.collapsed::after {
  background: linear-gradient(180deg, #194FAF 0%, #C658FF 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content: "\f055";
}
._faq_wrap:before,
._faq_wrap:after,
._faq_wrap ._sub_heading::after{
  content: '';
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: block;
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  transform: translateY(-50%);
  z-index: 0;
}
._faq_wrap::before {
  width: 88%;
  height: 1010px;
}
._faq_wrap::after {
  width: 74%;
  height: 818px;
}
._faq_wrap ._sub_heading::after {
  height: 630px;
  width: 58%;
}
._faq_wrap .panel-group {
  z-index: 2;
  position: relative;
}
._footer_main {
  background-color: #D8D9F1;
  border-top: 1px solid RGBA(98, 68, 244, 0.29);
}
.footer-top {
  padding-top: 60px;
  padding-bottom: 50px;
}
.btn-footer-wrap .btn-main {
  margin-left: auto;
}
.footer-mid .container {
  padding-top: 30px;
  border-top: 2px solid RGBA(112, 79, 229, 0.25);
}
.footer-mid p {
  font-size: 16px;
  font-weight: 500;
  color: #6B6C89;
}
._footer_widget_heading {
  font-size: 24px;
  color: #010101;
  font-weight: 700;
  margin-bottom: 20px;
}
._footer_widget_quick_links {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: space-between;
}
._footer_widget_quick_links li a {
  font-size: 16px;
  font-weight: 500;
  color: #6B6C89;
  text-decoration: none;
  display: block;
}
._footer_copyright_wrap {
  background-color: #010101;
  height: 54px;
}
._footer_copyright_wrap p {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
._footer_copyright_wrap .row {
  display: flex;
  align-items: center;
}
.dmca-badge {
  display: block;
  margin-top: -50px;
}
.footer-mid {
  padding-bottom: 70px;
}
.footer-top ._sub_heading {
  margin: 0;
}
@media(max-width: 550px){
  .navbar-default .navbar-brand img {
    max-height: 36px;
  }
  .navbar-default .navbar-brand {
    height: auto;
    line-height: 1;
  }
  #main-top .container > .row {
    display: block;
  }
  ._site_name {
    margin: auto;
    font-size: 14px;
    max-width: 156px;
    height: 34px;
    line-height: 2.2;
  }
  #main-top h1 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 15px;
  }
  .heading-icon {
    margin-left: 5px;
    margin-top: -4px;
    width: 20%;
  }
  ._main_text {
    text-align: center;
    font-size: 14px;
    margin-bottom: 15px;
  }
  #main-top form .row .col-sm-6:first-child {
    padding-right: 15px;
  }
  #main-top form .row .col-sm-6:last-child {
    padding-left: 15px;
  }
  ._custom_fields ._input_icon {
    width: 38px;
    height: 38px;
    line-height: 32px;
    border-radius: 12px;
    left: 5px;
  }
  ._custom_fields ._input_icon img {
    height: 16px;
  }
  ._custom_fields .form-control {
    border-radius: 15px;
    height: 48px;
    padding-left: 52px;
  }
  .btn.btn-primary._form_btn {
    width: 100%;
    border-radius: 15px;
  }
  ._regester_text {
    font-size: 14px;
    text-align: center;
  }
  ._main_hero {
    width: 100%;
    margin: auto;
    display: block;
    background-size: contain;
  }
  ._main_hero img {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }
  ._bottom_shape{
    --c: 100px;
    mask: radial-gradient(70% var(--c) at top,#0000 calc(100% - 3px),#000);
    margin-top: -70px;
  }
  ._why_main_head{
    max-width: 173px;
    font-size: 14px;
    margin: -110px auto 25px;
    height: 40px;
  }
  ._why_main_head span{
    min-width: 165px;
    height: 34px;
  }
  ._sub_heading {
    font-size: 32px;
    margin-bottom: 15px;
  }
  ._main_content {
    font-size: 14px;
    font-weight: 400;
  }
  ._main_content br {
    display: none;
  }
  ._wcbox {
    padding: 20px 20px;
    border-radius: 20px;
    margin-top: 10px;
  }
  ._wcbox_icon_container {
    width: 38px;
    height: 37px;
    margin-bottom: 10px;
    background-size: contain;
  }
  ._wcbox_icon_container img {
    width: 22px;
  }
  ._wcbox_heading {
    font-size: 18px;
    margin-bottom: 5px;
  }
  ._wcbox_content {
    font-weight: 400;
  }
  #increase-social ._sub_heading, #increase-social ._main_content {
    text-align: center;
  }
  .btn.btn-main {
    font-size: 14px;
    width: 154px;
    height: 48px;
    border-radius: 15px;
    line-height: 32px;
  }
  #increase-social .btn.btn-main {
    margin: auto;
  }
  #targeted-panel {
    padding-top: 40px;
  }
  #targeted-panel ._sub_heading {
    text-align: center;
  }
  ._targeted_item{
    border-radius: 15px;
    line-height: 18px;
    height: 46px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    font-weight: 400;
  }
  ._targeted_list {
    margin-bottom: 15px;
    gap: 8px 0;
  }
  ._targeted_wrap{
    padding: 20px 15px;
    border-radius: 20px;
    height: 280px;
  }
  ._targeted_wrap .btn.btn-main {
    bottom: 15px;
  }
  ._tgbox_heading {
    font-size: 22px;
    margin-bottom: 10px;
  }
  #how-it-work {
    padding-top: 40px;
  }
  .how-wrap {
    border-radius: 20px;
    padding: 15px;
    margin-right: 15px;
    margin-left: 15px;
  }
  .how-left-box{
    border: 2px solid #fff;
    border-radius: 25px;
    padding: 20px 15px 106px;
    margin-bottom: 15px;
    min-height: auto;
  }
  ._how_badge {
    width: 138px;
    height: 42px;
    padding: 0 5px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
  }
  .how-left-box ._sub_heading {
    font-size: 22px;
    margin-bottom: 15px;
    text-align: center;
  }
  .how-left-box ._how_content {
    line-height: 18px;
    text-align: center;
  }
  #how-it-work .text-right {
    text-align: center;
  }
  .text-right .btn-white {
    margin-right: auto;
  }
  ._how_list li {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 15px;
  }
  ._how_circle{
    width: 70px;
    height: 70px;
    font-size: 22px;
    border: 6px solid #fff;
    min-width: 70px;
    margin-right: 0;
    margin-bottom: 15px;
  }
  ._hiw_heading {
    font-size: 18px;
    margin-bottom: 0;
  }
  ._how_circle::after{
    display:none;
  }
  ._how_list {
    margin-top: 15px;
  }
  #our-top {
    padding-top: 40px;
  }
  #our-top ._sub_heading,
  #our-top ._main_content{
    text-align: center;
  }
  ._our_list ._our_list_item {
    width: 52px;
    height: 52px;
  }
  ._our_list li {
    margin: auto;
  }
  ._our_list {
    margin: 10px 0 15px;
    justify-content: center;
    align-items: center;
  }
  ._our_list ._our_list_item._our_youtube {
    background-position: -58px 0;
  }
  ._our_list ._our_list_item._our_facebook {
    background-position: -115px 0;
  }
  ._our_list ._our_list_item._our_tiktok {
    background-position: -172px 0;
  }
  ._our_list ._our_list_item._our_twitter {
    background-position: -230px 0;
  }
  ._our_list ._our_list_item._our_linkedin {
    background-position: -288px 0;
  }
  #our-top .btn.btn-main {
    margin: 0 auto 15px;
  }
  ._ot_heading {
    font-size: 22px;
    margin-bottom: 10px;
  }
  ._ot_list_head {
    font-size: 14px;
    margin-bottom: 10px;
  }
  ._ot_bullets li {
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
  }
  ._ot_bullets li::before {
    width: 12px;
    height: 12px;
    border: 3px solid transparent;
  }
  ._our_top_wrap{
    padding: 20px 15px;
    border-radius: 20px;
    height: 504px;
    min-height: 504px;
  }
  ._our_top_wrap::before{
    border-radius: 20px;
    padding: 2px;
  }
  #our-top ._our_list_content ._main_content {
    text-align: left;
  }
  #orders-completed {
    padding-top: 60px;
  }
  ._order_completed_wrap {
    border-radius: 20px;
    padding: 10px;
  }
  ._order_completed_box {
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 10px;
  }
  ._order_completed_icon svg {
    width: 56px;
    height: 56px;
  }
  ._order_completed_wrap .col-sm-4:nth-child(2) {
    padding-left: 15px;
    padding-right: 15px;
  }
  ._order_completed_heading {
    font-size: 22px;
  }
  ._order_completed_content {
    font-size: 14px;
    font-weight: 400;
  }
  #primary-feat {
    padding-top: 40px;
  }
  #primary-feat ._sub_heading br {
    display: none;
  }
  ._primary_feat_box {
    padding: 20px 15px 20px;
    min-height: 303px;
    border-radius: 20px;
  }
  ._primary_feat_icon svg {
    width: 40px;
    height: 40px;
  }
  ._primary_feat_list{
    gap: 10px;
    margin: 20px 0 0;
  }
  ._primary_feat_list > li {
    max-width: 48%;
    flex: 0 0 48%;
  }
  ._pf_heading {
    font-size: 18px;
    margin-bottom: 5px;
  }
  ._primary_feat_box ._main_content {
    margin: 0;
  }
  ._primary_feat_icon {
    margin-bottom: 0;
  }
  #secure-payment {
    padding-top: 40px;
  }
  ._secure_payment_wrap {
    border-radius: 20px;
    padding: 20px 15px 20px;
  }
  ._secure_payment_wrap ._sub_heading {
    font-size: 22px;
  }
  ._secure_payment_list {
    margin: 10px auto 0;
  }
  ._secure_payment_list ._secure_payment_item{
    height: 32px;
    background-size: auto 20px;
  }
  ._secure_payment_item._payment_one {
    background-position: 4px center;
  }
  ._secure_payment_item._payment_two {
    background-position: -75px center;
  }
  ._secure_payment_item._payment_three {
    background-position: -153px center;
  }
  ._secure_payment_item._payment_four {
    background-position: -231px center;
  }
  ._secure_payment_item._payment_five {
    background-position: -309px center;
  }
  ._secure_payment_wrap::before, 
  ._secure_payment_wrap::after, 
  ._secure_payment_wrap ._sub_heading::after {
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  ._secure_payment_wrap ._sub_heading::after {
    height: 340px;
  }
  ._secure_payment_wrap::before {
    height: 380px;
  }
  ._secure_payment_wrap::after {
    height: 368px;
  }
  #cheapest-smm {
    padding-top: 110px;
    padding-bottom: 40px;
    margin-top: -80px;
  }
  #cheapest-smm ._sub_heading, 
  #cheapest-smm ._main_content {
    text-align: center;
  }
  ._cheapest_list_item {
    border-radius: 15px;
    text-align: center;
    padding: 15px;
    font-size: 16px;
  }
  ._cheapest_list {
    gap: 10px 0;
    margin-bottom: 12px;
  }
  #cheapest-smm ._cheapest_wrap ._sub_heading {
    font-size: 22px;
  }
  ._cheapest_wrap {
    border-radius: 15px;
    padding: 20px 15px;
    /*min-height: 352px;*/
  }
  ._cheapest_wrap .btn.btn-main {
    /*left: 0;
    right: 0;*/
    margin: auto;
  }
  ._primary_feat_list > li:last-child {
    max-width: 100%;
    flex: 0 0 100%;
  }
  ._primary_feat_list > li:last-child ._primary_feat_box {
    min-height: auto;
  }
  #brand-higher {
    padding-top: 40px;
  }
  #brand-higher .row {
    display: block;
  }
  .brand-higher-image {
    width: 50%;
    margin: auto;
    display: block;
  }
  #brand-higher ._sub_heading, 
  #brand-higher ._main_content {
    text-align: center;
  }
  #brand-higher .btn.btn-main {
    margin: auto;
  }
  #customer-testimonial {
    padding-top: 40px;
  }
  #customer-testimonial svg {
    margin-bottom: 0;
    width: 50px;
    height: 50px;
  }
  .swiper._testimonial_slider {
    margin-top: 20px;
  }
  ._testimonial_item {
    max-width: 340px;
    border-radius: 20px;
    padding: 20px 15px 20px;
  }
  ._testimonial_avatar {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
  }
  ._testimonial_avatar::after {
    width: 60px;
    height: 60px;
  }
  ._avatar_icon_5::after {
    background-position: -284px 0;
  }
  ._avatar_icon_2::after {
    background-position: -57px 0px;
  }
  ._avatar_icon_3::after {
    background-position: -170px 0;
  }
  ._testimonial_heading {
    font-size: 18px;
    margin-bottom: 5px;
  }
  ._testimonial_review {
    line-height: 1.2;
    height: 145px;
    padding-bottom: 15px;
  }
  ._testimonial_rating_box {
    padding-top: 10px;
  }
  ._testimonial_rating_start {
    width: 85px;
    height: 17px;
    background-size: contain;
  }
  ._testimonial_quotation_icon {
    width: 32px;
    height: 32px;
    background-size: 14px 10px,auto;
  }
  .swiper-navigation {
    gap: 0 2px;
    margin-top: 15px;
  }
  #frequently-questions {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  ._faq_wrap {
    border-radius: 20px;
    padding: 20px 15px 0px;
    overflow: hidden;
    height: auto;
  }
  ._faq_wrap::before {
    height: 520px;
  }
  ._faq_wrap::after {
    height: 488px;
  }
  ._faq_wrap ._sub_heading::after {
    height: 420px;
  }
  ._faq_wrap::before, ._faq_wrap::after, ._faq_wrap ._sub_heading::after {
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  ._faq_wrap ._main_content {
    margin-bottom: 10px;
  }
  ._faq_wrap .panel-title a {
    height: 54px;
    padding: 12px 15px;
    justify-content: space-between;
    border-radius: 12px;
  }
  .footer-top {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer-top ._sub_heading {
    font-size: 22px;
    text-align: center;
    margin-bottom: 12px;
  }
  .btn-footer-wrap a {
    margin: auto;
  }
  .footer-mid .container {
    padding-top: 20px;
    border-top: 1px solid RGBA(112, 79, 229, 0.25);
  }
  .footer-mid p {
    font-size: 14px;
    font-weight: 400;
  }
  ._footer_widget_heading {
    font-size: 18px;
    margin-bottom: 10px;
  }
  ._footer_widget_quick_links li a {
    font-size: 14px;
  }
  .footer-mid {
    padding-bottom: 20px;
  }
  .dmca-badge img {
    width: 45px;
  }
  .dmca-badge {
    margin-top: -30px;
  }
  ._footer_copyright_wrap p {
    font-size: 14px;
    padding-top: 6px;
  }
  #main-top {
    padding-top: 100px;
  }
  .masthead {
    border-radius: 0 0 20px 20px;
    padding: 10px 0;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background: linear-gradient(177deg, rgb(198, 88, 255) 0%, rgb(25, 79, 175) 100%);
    height: 4px;
    border-radius: 20px;
    margin-top: 3px;
  }
  .navbar-default .navbar-toggle {
    margin-top: 3px;
    padding: 2px 3px;
    border: none;
    margin-bottom: 0;
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .nav.navbar-nav.navbar-right._custom_nav_elem {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 0;
  }
  .logOut .nav.navbar-nav.navbar-right {
    display: block;
    height: auto;
    margin-top: 0;
  }
  .nav.navbar-nav.navbar-right._custom_nav_elem li a {
    padding: 10px 15px;
    border-radius: 0;
    background-color: transparent;
    color: #010101;
  }
  .logOut .nav.navbar-nav.navbar-right li {
    margin: 0;
  }
  .logOut .navbar-nav li a {
    padding: 10px 15px;
  }


}
/*Homepage Style end*/
/*User Dashboard Style*/
.app-main {
  /*flex: 1;
  display: flex;
  z-index: 8;*/
  position: relative;
}
.app-sidebar-wrap {
  position: fixed;
  left: 0;
  top: 20px;
  height: calc(100% - 40px);
  z-index: 14;
  -moz-transition: .2s ease;
  -webkit-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}
.app-main-outer {
  flex: 1;
  flex-direction: column;
  display: flex;
  z-index: 12;
  padding: 20px 15px 0 calc((15px) + 0px);
  -moz-transition: .2s ease;
  -webkit-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}
.app-sidebar {
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid #EAEAF7;
  background-color: #EAEAF7;
  overflow: hidden;
  position: relative;
  transition: all .2s;
  z-index: 11;
}
@media (min-width: 1140px) {
  .app-main-outer {
    padding: 20px 20px 0 calc((30px) + 280px);
  }
  .app-sidebar-wrap {
    left: 20px;
  }
  .app-sidebar {
    width: 270px;
    min-width: 270px;
    flex: 0 0 270px;
  }
}
.app-brand-wrap {
  padding: 24px;
  display: flex;
  justify-content: space-between;
}
.app-logo-brand img {
  width: 124px;
}
.app-hamburger,
.mobile-hamburger {
  width: 37px;
  height: 37px;
  background-color: #fff;
  border: none;
  border-radius: 11px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 0 10px;
  gap: 3px 0;
}
.app-hamburger span,
.mobile-hamburger span {
  height: 2px;
  border-radius: 50px;
  background-color: #010101;
  width: 18px;
}
.mobile-hamburger span {
  height: 3px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
}
.app-hamburger span:nth-child(2),
.mobile-hamburger span:nth-child(2) {
  width: 15px;
}
.app-hamburger span:last-child,
.mobile-hamburger span:last-child {
  width: 11px;
}
.app-profile-wrap {
  padding: 24px 24px 14px;
}
.app-profile-viewer {
  background-color: #fff;
  border-radius: 11px;
  padding: 20px;
  display: flex;
}
.app-profile-icon {
  width: 38px;
  height: 38px;
  border-radius: 50px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.app-profile-icon img {
  width: 26px;
}
.app-username-title {
  font-size: 16px;
  font-weight: 500;
  color: #010101;
  text-transform: capitalize;
}
.app-user-balance {
  font-size: 14px;
  font-weight: 400;
  color: #57668F;
}
.app-user-balance span {
  font-weight: 600;
  color: #C658FF;
}
.app-profile-info {
  width: 75%;
  position: relative;
}
.app-profile-info::after, 
.vertical-nav-menu .has-children > a::after, 
.dropdown-toggle.lang-button::after, 
.dropdown-toggle.currency-toggle::after {
  content: '';
  background-image: url(../images/smmworld/qmkxkw4ks2abbo8e.png);
  width: 6px;
  height: 9px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;

}
.app-sidebar-menu-wrap {
  padding: 0 24px 24px;
}
.app-menu-title {
  font-size: 12px;
  font-weight: 500;
  color: #6B6C89;
  margin-bottom: 8px;
}
.vertical-nav-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px 0;
}
.has-children > a {
  display: flex;
  font-size: 16px;
  font-weight: 400;
  color: #010101;
  padding: 6px;
  background-color: #fff;
  border-radius: 11px;
  align-items: center;
  text-decoration: none;
  position: relative;
}
.vertical-nav-menu a > .navbar-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  margin-right: 10px;
  position: relative;
}
.menu-icon,
.vertical-nav-menu a > .navbar-icon:after {
  background-image: url(../images/smmworld/0mn4dmqnn7tje55c.webp);
}
.vertical-nav-menu a > .navbar-icon:after {
  content: '';
  width: 15px;
  height: 15px;
}
.vertical-nav-menu a > .navbar-icon.fe {
  font-family: 'feather' !important;
  font-size: 15px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vertical-nav-menu a > .navbar-icon.fe::after {
  display: none !important;
  content: none !important;
}
#sidebar-close-btn .sidebar-toggle-icon {
  color: var(--smm-text-secondary, #64748b);
  transition: transform 0.25s ease, color 0.2s ease;
}
#sidebar-close-btn:hover .sidebar-toggle-icon {
  color: var(--smm-brand-blue, #225aea);
}
.app-main.active #sidebar-close-btn .sidebar-toggle-icon {
  transform: rotate(180deg);
}
.vertical-nav-menu a > .navbar-icon.icon-cart::after {
  background-position: -66px 0;
}
.vertical-nav-menu a > .navbar-icon.icon-tracking::after {
  background-position: -125px 0;
  width: 12px;
  height: 11px;
}
.vertical-nav-menu a > .navbar-icon.icon-services::after {
  background-position: -152px 0;
  width: 14px;
  height: 13px;
}
.vertical-nav-menu a > .navbar-icon.icon-payments::after {
  background-position: -97px 0;
  height: 12px;
}
.vertical-nav-menu a > .navbar-icon.icon-support::after {
  background-position: -112px 0;
  width: 13px;
}
.vertical-nav-menu a > .navbar-icon.icon-money::after {
  background-position: -137px 0;
}
.vertical-nav-menu a > .navbar-icon.icon-other::after {
  background-position: -82px 0;
  width: 14px;
}
.vertical-nav-menu .submenu {
  height: 0;
  overflow: hidden;
  transition: 0.25s ease;
  position: relative;
  list-style: none;
  padding-left: 37px;
  margin-top: 0;
}
.vertical-nav-menu .submenu::before {
  content: "";
  height: 100%;
  opacity: 1;
  width: 1px;
  background: #6B6C89;
  position: absolute;
  left: 20px;
  top: 0;
}
.vertical-nav-menu .submenu.collapsing {
  transition: 0.25s ease;
}

.vertical-nav-menu .submenu.mm-show {
  height: auto;
  margin-top: 10px;
}
.vertical-nav-menu .submenu >li>a {
  font-size: 14px;
  font-weight: 500;
  color: #6B6C89;
  text-decoration: none;
  padding: 8px 16px;
  display: block;
  border-radius: 11px;
}
.vertical-nav-menu .submenu > li.active > a {
  background-color: #DCDCEC;
  color: #010101;
}
.vertical-nav-menu .has-children > a::after {
  right: 19px;
  cursor: pointer;
  top: auto;
  transform: none;
  transition: all .3s ease;
  animation: chevronToRight .6s ease forwards;
}
.vertical-nav-menu .has-children.active > a::after {
  animation: chevronToUp .6s ease forwards;
}
@keyframes chevronToUp {
  0% {
    transform:rotate(0deg)
  }
  50% {
    border-bottom-right-radius:50%;
  }
  100% {
    transform:rotate(630deg)
  }
}
@keyframes chevronToRight {
  0% {
    transform:rotate(630deg)
  }
  50% {
    border-bottom-right-radius:50%;
  }
  100% {
    transform:rotate(0deg)
  }
}
.app-sidebar-footer {
  margin-top: auto;
  padding: 25px;
}
.app-sidebar-footer-heading {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  border-bottom: 2px solid RGBA(112, 79, 229, 0.25);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.app-sidebar-footer-social-list {
  display: flex;
  list-style: none;
  background-color: #fff;
  border-radius: 15px;
  padding: 12px;
  justify-content: center;
  gap: 0 12px;
  margin: 0;
}
.app-sidebar-footer-social-list li > a.social-item {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #24A1DE;
  font-size: 18px;
  text-decoration:none;
}
.app-sidebar-footer-social-list li > a.social-item:hover,
.app-sidebar-footer-social-list li > a.social-item:focus,
.app-sidebar-footer-social-list li > a.social-item:active {
  text-decoration:none;
}
.app-sidebar-footer-social-list li > a.social-item.social-skype {
  background-color: RGBA(36, 161, 222, 0.13);
}
.app-sidebar-footer-social-list li > a.social-item.social-telegram {
  background-color: RGBA(36, 161, 222, 0.16);
}
.app-sidebar-footer-social-list li > a.social-item.social-whatsapp {
  background-color: RGBA(37, 211, 102, 0.16);
  color: #25D366;
}
.app-header {
  background-color: #EAEAF7;
  border-radius: 14px;
  padding: 10px 12px 10px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #EAEAF7;
}
.app-current-location {
  font-size: 16px;
  font-weight: 400;
  color: #6B6C89;
}
.app-current-location span {
  font-weight: 500;
  color: #010101;
}
.app-header-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0 5px;
}
.menu-user-logout {
  background-color: #010101;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 15px;
}
.app-header-menu a {
  text-decoration: none;
}
.menu-icon.icon-logout {
  height: 14px;
  width: 12px;
  background-position: -181px 0;
  margin-left: 8px;
}
.menu-user-logout:hover,.menu-user-logout:active {
  color: #ffff;
}
.setting-button, 
.mode-button, 
.menu-user-account {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.balance-box {
  width: 70px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.setting-button, 
.mode-button {
  background-color: #fff;
}
.menu-user-account {
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
}
.menu-icon.icon-account {
  width: 14px;
  height: 21px;
  background-position: -166px 0;
}
.menu-icon.icon-setting {
  background-position: -32px 0;
  width: 18px;
  height: 18px;
}
.menu-icon.mode-icon-1 {
  width: 18px;
  height: 18px;
  background-position: -14px 0;
  border-radius: 100px;
}
.dropdown-toggle.lang-button,.dropdown-toggle.currency-toggle {
  width: 87px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: #010101;
  text-decoration: none;
  text-transform: capitalize;
}
.menu-icon.icon-lang {
  width: 15px;
  height: 16px;
  background-position: 0px 0;
  border-radius: 50px;
  margin-right: 4px;
}
.menu-icon.icon-currency {
  width: 16px;
  height: 16px;
  background-position: -50px 0;
  margin-right: 4px;
}
.dropdown-toggle.lang-button::after, 
.dropdown-toggle.currency-toggle::after {
  right: 10px;
  transform: translateY(-50%) rotate(90deg);
}
.app-inner-layout-page {
  padding-top: 15px;
}
.announce-kit {
  background-color: #EAEAF7;
  border-radius: 17px;
  padding: 6px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  border: 1px solid #EAEAF7;
}
.anounce-left {
  background: linear-gradient(90deg, #FF7A00 0%, #FFA600 100%);
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  width: 150px;
  line-height: 52px;
  border-radius: 15px;
  text-align: center;
  margin-right: 12px;
}
.announce-right {
  font-size: 18px;
  color: #010101;
  display: inline-flex;
  align-items: center;
}
.announce-right img {
  margin-right: 5px;
}
.announce-right >a {
  color: #C658FF;
  text-decoration: none;
}
.welcome-box {
  background: url(../images/smmworld/jmurweefu4m6guxc.svg),url(../images/smmworld/jmurweefu4m6guxc.svg),linear-gradient(180deg, #194FAF 0%, #C658FF 100%);
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-position: -170px center,1170px center,0 0;
  background-size: 32%,32%,auto;
}
.welcome-small-box {
  background-color: #Fff;
  max-width: 314px;
  border-radius: 30px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  padding: 6px;
  font-size: 18px;
  font-weight: 500;
  color: #010101;
}
.welcome-icon {
  width: 37px;
  height: 37px;
  background-color: #FF772E;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  margin-right: 7px;
}
.welcome-heading {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.welcome-box p {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
}
.filter-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.filter-list >li {
  max-width: 19%;
  flex: 0 0 19%;
}
.brand-category {
  width: 100%;
  background-color: #EBEAF8;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #010101;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 12px;
}
.filter-icon {
  background-image: url(../images/smmworld/duffh561f67gkjwx.webp);
  width: 43px;
  height: 43px;
  margin-right: 5px;
  background-size: cover;
  border-radius: 12px;
}
.filter-icon.fb-icon {
  background-position: -172px 0;
}
.filter-icon.ig-icon {
  background-position: -43px 0;
}
.filter-icon.tt-icon {
  background-position: -258px 0;
}
.filter-icon.yt-icon {
  background-position: -129px 0;
}
.filter-icon.x-icon {
  background-position: -86px 0;
}
.filter-icon.sp-icon {
  background-position: -215px 0;
}
.filter-icon.li-icon {
  background-position: -301px 0;
}
.filter-icon.sc-icon {
  background-position: -344px 0;
}
.filter-icon.tg-icon {
  background-position: -387px 0;
}
.filter-wrap h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.filter-wrap {
  margin-bottom: 35px;
}
.well {
  background-color: #EBEAF8;
  border: #EBEAF8;
  border-radius: 24px;
  box-shadow: none;
  padding: 25px 15px;
}
.well-heading {
  font-size: 20px;
  font-weight: 500;
  color: #010101;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.well-heading-icon {
  width: 47px;
  height: 47px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(180deg, #194FAF 0%, #C658FF 100%);
}
.well .nav.nav-tabs {
  border: none;
  margin-bottom: 10px;
}
.well .nav.nav-tabs>li {
  margin-bottom: 0;
}
.well .nav.nav-tabs > li >a {
  font-size: 14px;
  font-weight: 500;
  color: #010101;
  background-color: #fff;
  border-radius: 10px;
  height: 32px;
  padding: 4px 18px;
  border: 1px solid #fff;
  margin-right: 5px;
  cursor: pointer;
}
.well .nav.nav-tabs > li.active > a,.well .nav.nav-tabs > li.active > a:hover,.well .nav.nav-tabs > li.active > a:focus {
  color: #Ffff;
  background: linear-gradient(260deg, #194FAF 0%, #C658FF 100%);
}
.loggedIn .form-group .form-control {
  height: 52px;
  background-color: #FFFFFF;
  border-color: RGBA(98, 68, 244, 0.29);
  border-radius: 13px;
}
.loggedIn .form-group textarea.form-control {
  height: auto;
}
.loggedIn .form-group .form-control.select2-selection.select2-selection--single.form-control {
  display: flex;
  align-items: center;
}
.loggedIn .form-group .search-dropdown .form-control.select2-selection.select2-selection--single.form-control {
  height: 32px;
  border-radius: 10px;
}
.loggedIn .control-label {
  font-size: 14px;
  font-weight: 500;
  color: #6B6C89;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-group .panel-body.border-solid.border-rounded {
  background-color: #FFFFFF;
  border-color: RGBA(98, 68, 244, 0.29);
  border-radius: 13px;
}
.help-block.min-max {
  color: #6244F4;
  font-size: 10px;
}
.alert {
  border-radius: 12px;
}
.alert.alert-success {
  background-color: RGBA(37, 211, 102, 0.16);
  border-color: RGBA(37, 211, 102, 0.16);
  color: #158A41;
}
.input-group.form-input-group {
  background-color: #fff;
  border-radius: 15px;
  padding: 9px;
  display: flex;
  align-items: center;
}
.pay-icon {
  width: 42px;
  height: 42px;
  background-color: RGBA(98, 68, 244, 0.29);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.pay-text {
  font-size: 14px;
  font-weight: 500;
  color: #010101;
}
.input-group.form-input-group .input-group-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
}
.input-group.form-input-group .form-control {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding-left: 8px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  font-size: 14px;
  font-weight: 500;
  color: #010101;
}
.btn.btn-main.btn-form {
  border-radius: 15px;
  width: 100%;
  height: 60px;
}
.save-deal {
  border-radius: 15px;
  background-color: #fff;
  margin-top: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 42px;
  color: #010101;
}
.select2-container .badge.badge-secondary.badge-pill.rounded-pill {
  color: #fff;
  background: linear-gradient(260deg, #194FAF 0%, #C658FF 100%);
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding-left: 15px;
  padding-right: 15px;
  min-width: 68px;
}
.nav-pills.app-pills >li>a {
  font-size: 14px;
  font-weight: 500;
  color: #010101;
  border: 1px solid #EBEAF8;
  background-color: #EBEAF8;
  border-radius: 12px;
  height: 50px;
  display: flex;
  align-items: center;
}
.nav-pills.app-pills > li > a img {
  margin-right: 4px;
}
.nav-pills.app-pills > li.active > a img {
  filter: brightness(0) invert(1);
}
.nav-pills.app-pills > li.active > a,
.nav-pills.app-pills > li.active > a:hover,
.nav-pills.app-pills > li.active > a:focus {
  border-color: transparent;
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
}
.app-pills.nav-pills > li + li {
  margin-left: 8px;
}
.search .input-group .form-control {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.search .input-group .btn.btn-default {
  border: none;
  background-color: transparent;
  padding: 0;
  color: #010101;
  font-size: 18px;
}
.search .input-group {
  background-color: #EBEAF8;
  border: 1px solid #EBEAF8;
  border-radius: 12px;
  padding: 8px 12px;
}
.app-pills.nav-pills li.search {
  margin-left: 0;
  width: 362px;
}
.order-wrap {
  display: flex;
  flex-direction: column;
  background-color: #EBEAF8;
  border-radius: 15px;
  padding: 14px 20px;
  margin-bottom: 20px;
  border: 1px solid #DFDEF5;
}
.order-top,.order-bottom {
  display: flex;
}
.order-top-left {
  display: flex;
  align-items: center;
}
.order-bottom-left {
  display: flex;
  gap: 0 6px;
}
.order-id,
.service-id {
  background: linear-gradient(260deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 15px;
  min-width: 83px;
  margin-right: 12px;
  position: relative;
  cursor: pointer;
}
.copy-id i {
  font-size: 10px;
  margin-left: 4px;
}
.order-service {
  font-size: 14px;
  font-weight: 500;
  color: #010101;
}
.order-top {
  padding-bottom: 10px;
  border-bottom: 1px solid #BFBED3;
  justify-content: space-between;
}
.order-bottom {
  padding-top: 10px;
  justify-content: space-between;
}
.order-link,.order-date,.order-quantity,.order-charge,.order-start-count,.order-remains {
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px;
  border-radius: 7px;
}
.order-link {
  min-width: 252px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.link-copy {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 18px;
  position: relative;
  cursor: pointer;
  margin-left: 10px;
}
.order-heading {
  color: #C658FF;
}
.date {
  border-right: 1px solid #BFBED3;
  padding-right: 6px;
}
.status-badge {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
}
.status-badge.status-canceled {
  background-color: #FF3737;
}
.status-badge:before {
  content: '';
  background-image: url(../images/smmworld/016ikh8g4i08rs3e.webp);
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 2px;
}
.status-badge.status-completed {
  background-color: #22AB00;
}
.status-badge.status-inprogress,
.status-badge.status-paused {
  background-color: #FF7A00;
}
.status-badge.status-partial {
  background-color: #3B82FF;
}
.status-badge.status-processing,
.status-badge.status-active {
  background-color: #24A1DE;
}
.status-badge.status-pending,
.status-badge.status-expired {
  background-color: #194FAF;
}
.status-badge.status-pending:before,
.status-badge.status-expired:before {
  background-position: -86px 0;
}
.status-badge.status-processing:before,
.status-badge.status-active:before {
  background-position: -65px 0;
  width: 21px;
}
.status-badge.status-partial:before {
  background-position: -32px 0;
}
.status-badge.status-inprogress:before,
.status-badge.status-paused:before {
  background-position: -48px 0;
}
.status-badge.status-completed:before {
  background-position: 0px 0;
}
.status-badge.status-canceled:before {
  background-position: -16px 0;
}
.status-badge.status-rate-decreased {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.status-badge.status-rate-decreased:before {
  display: none !important;
}
.status-badge.status-rate-increased {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.12) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
}
.status-badge.status-rate-increased:before {
  display: none !important;
}
.order-actions-btn .btn.btn-xs.btn-primary {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
}
.nav.nav-pills.service-filter {
  display: flex;
  gap: 0 8px;
  margin-bottom: 25px;
}
.nav.nav-pills.service-filter li:last-child {
  flex: 1;
  gap: 0;
}
.service-filter .btn.btn-primary.dropdown-toggle {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 50px;
  min-width: 167px;
}
.nav.nav-pills.service-filter::before, 
.nav.nav-pills.service-filter::after {
  display: none;
}
.service-cate-heading {
  font-size: 26px;
  font-weight: 700;
  color: #010101;
  margin-bottom: 20px;
}
.table-main {
  border-collapse: separate;
  border-spacing: 0 10px;
}
.table.table-main > thead > tr > th, 
.table.table-main > thead:first-child > tr:first-child > th {
  background-color: #000000;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 34px;
}
.table-main thead > tr th:first-child {
  border-left: 1px solid #000000;
  border-radius: 12px 0 0 12px;
  text-align: center;
  min-width: 9%;
}
.table-main thead > tr th:last-child {
  border-right: 1px solid #000000;
  border-radius: 0 12px 12px 0;
  text-align: center;
}
.table-main tbody > tr > td {
  border-top: 1px solid #EBEAF8;
  border-bottom: 1px solid #EBEAF8;
  background-color: #EBEAF8;
  font-size: 14px;
  font-weight: 400;
  color: #010101;
  border-top: 1px solid #DFDEF5;
  border-bottom: 1px solid #DFDEF5;
  vertical-align: middle;
}
.table-main tbody tr > td:first-child {
  border-left: 1px solid #DFDEF5;
  border-radius: 12px 0 0 12px;
}
.table-main tbody > tr > td:last-child {
  border-radius: 0 12px 12px 0;
  border-right: 1px solid #DFDEF5;
}
.fav-btn, 
.buy-service-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.fav-btn span,
.buy-service-btn i{
  background: linear-gradient(180deg, #194FAF 0%, #C658FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.service-id {
  min-width: auto;
  white-space: pre;
}
.service-id-wrap {
  display: flex;
  gap: 0 6px;
  margin: auto;
  justify-content: center;
}
.service-badge {
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 7px;
}
.view-description-btn {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding: 6px 15px;
  border-radius: 7px;
  margin-right: 7px;
}
.service-description-wrap {
  display: flex;
  margin: auto;
  justify-content: center;
}
.btn.btn-main.btn-block {
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 13px;
}


.active .app-brand-wrap {
  padding: 20px 17px;
}
.active .app-profile-wrap {
  padding: 24px 6px;
}
.active .app-profile-viewer {
  padding: 10px;
}
.active .app-sidebar-menu-wrap {
  padding: 0 20px 24px;
}
.active .has-children > a {
  padding: 0;
  background-color: transparent;
}
.active .vertical-nav-menu a > .navbar-icon {
  margin-right: 0;
  margin-left: 0;
}
.active.app-main .app-brand,
.active.app-main .app-profile-info,
.active.app-main .menu-text,
.active.app-main .app-sidebar-footer,
.active.app-main .vertical-nav-menu .has-children > a::after,
.active.app-main .vertical-nav-menu .has-children .submenu:before {
  display: none;
}
.active .vertical-nav-menu .submenu.mm-show {
  height: 0;
  margin-top: 0;
}
.active .has-children {
  position: relative;
}
.active .vertical-nav-menu .has-children .submenu{
  position: absolute;
  left: 44px;
  top: 0;
  background: #FFF;
  z-index: 100;
  border-radius: 12px;
  width: 0;
  padding: 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.active .vertical-nav-menu .has-children:hover .submenu {
  height: auto;  
  width: 209px;
  padding: 15px 12px;
  overflow: visible;
}
.active .vertical-nav-menu .has-children:hover .submenu::before {
  content: '';
  height: 19px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(100% 0,0 50%,100% 100%);
  background: #fff;
  position: absolute;
  left: -10px;
  top: 10px;
  width: 10px;
  display: block;
}
.active .app-profile-icon{
  margin-right: 0;
}
.app-header-left .app-logo-brand {
  display: none;
}
.mobile-item,
.hide-filter-btn {
  display: none;
}
.app-footer-nav {
  display: none;
}
.app-main-footer {
  color: #fff;
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border-radius: 11px;
  padding: 14px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
}


@media(max-width: 550px) {
  .app-current-location, 
  .desktop-item,
  .menu-logout-text,
  .welcome-box,
  .filter-text {
    display: none;
  }
  .app-header-left .app-logo-brand,
  .mobile-item,
  .hide-filter-btn {
    display: block;
  }
  .app-logo-brand img {
    width: 87px;
  }
  .menu-icon.icon-logout {
    margin: 0;
  }
  .menu-user-logout {
    padding: 0 14px;
    border-radius: 10px;
  }
  .mobile-hamburger{
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .app-header{
    border-radius: 11px;
    padding: 8px 8px 8px 13px;
  }
  .app-main-outer,
  
  .announce-kit {
    overflow: hidden;
    border-radius: 12px;
  }
  .anounce-left {
    font-size: 12px;
    min-width: 100px;
    line-height: 38px;
    border-radius: 10px;
    margin-right: 8px;
  }
  .announce-right img {
    width: 28px;
  }
  .announce-right {
    font-size: 12px;
    white-space: nowrap;
  }
  .filter-list {
    justify-content: center;
    gap: 10px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }
  .filter-list.open {
    max-height: 500px;
    margin-top: 10px;
  }
  .filter-wrap {
    background-color: #EBEAF8;
    border-radius: 16px;
    padding: 10px;
  }
  .filter-heading-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border: 1px solid RGBA(98, 68, 244, 0.29);
    padding: 8px;
    border-radius: 17px;
  }
  .filter-wrap h2 {
    font-size: 16px;
    font-weight: 500;
    color: #010101;
    margin-bottom: 0;
  }
  .hide-filter-btn {
    background-color: #010101;
    border-color: #010101;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    height: 38px;
    min-width: 80px;
  }
  .filter-icon {
    margin: 0;
    width: 48px;
    height: 48px;
  }
  .brand-category {
    padding: 0;
    width: auto;
    margin: auto;
  }
  .filter-list > li {
    max-width: 17.1%;
    flex: 0 0 17.1%;
  }
  .filter-icon.fb-icon {
    background-position: -192px 0;
  }
  .filter-icon.ig-icon {
    background-position: -48px 0;
  }
  .filter-icon.tt-icon {
    background-position: -288px 0;
  }
  .filter-icon.yt-icon {
    background-position: -144px 0;
  }
  .filter-icon.x-icon {
    background-position: -96px 0;
  }
  .filter-icon.sp-icon {
    background-position: -240px 0;
  }
  .filter-icon.li-icon {
    background-position: -336px 0;
  }
  .filter-icon.sc-icon {
    background-position: -384px 0;
  }
  .filter-icon.tg-icon {
    background-position: -432px 0;
  }
  
  .app-brand-wrap {
    display: none;
  }
  .active.app-main .app-brand, 
  .active.app-main .app-profile-info, 
  .active.app-main .menu-text, 
  .active.app-main .app-sidebar-footer, 
  .active.app-main .vertical-nav-menu .has-children > a::after, 
  .active.app-main .vertical-nav-menu .has-children .submenu::before {
    display: block;
  }
  .active .app-profile-icon {
    margin-right: 5px;
  }
  .active .has-children > a {
    padding: 6px;
    background-color: #fff;
  }
  .active .vertical-nav-menu .has-children .submenu {
    position: relative;
    left: auto;
    top: auto;
    background: transparent;
    border-radius: 0;
    width: auto;
    padding-left: 37px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    box-shadow: none;
  }
  .active .vertical-nav-menu .has-children .submenu.mm-show,
  .active .vertical-nav-menu .has-children .submenu.collapsing,
  .active .vertical-nav-menu .has-children:hover .submenu.mm-show,
  .active .vertical-nav-menu .has-children:hover .submenu.collapsing{
    height: auto;
    margin-top: 10px;
    width: auto;
    padding-left: 35px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
  .active .vertical-nav-menu .has-children:hover .submenu::before {
    height: 100%;
    opacity: 1;
    width: 1px;
    background: #6B6C89;
    position: absolute;
    left: 20px;
    top: 0;
    aspect-ratio: auto;
    clip-path: none;
  }
  .active .vertical-nav-menu .has-children:hover .submenu {
    height: 0;
    width: auto;
    padding: 0;
    overflow: hidden;
  }
  .active .vertical-nav-menu a > .navbar-icon {
    margin-right: 10px;
  }
  .loggedIn .well {
    border-radius: 18px;
    padding: 24px 10px;
  }
  .well-heading-icon {
    width: 28px;
    height: 28px;
    margin-right: 5px;
  }
  .well-heading {
    font-size: 16px;
  }
  .well-heading-icon img {
    width: 12px;
  }
  .well .nav.nav-tabs > li > a {
    font-size: 13px;
    height: 34px;
    padding: 8px 10px;
    margin-right: 0;
  }
  .well .nav.nav-tabs > li {
    margin-bottom: 3px;
    margin-right: 3px;
  }
  .input-group.form-input-group {
    margin-bottom: 10px;
  }
  .app-main-footer {
    text-align: center;
    font-size: 14px;
  }
  .app-footer-nav {
    display: flex;
    background-color: #fff;
    border-radius: 13px;
    filter: drop-shadow(0 9px 47px RGBA(87, 102, 143, 0.17));
    position: fixed;
    bottom: 10px;
    z-index: 1;
    width: 93%;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  .footer-navbar {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .footer-nav-text {
    font-size: 10px;
    font-weight: 500;
    color: #6B6C89;
  }
  .footer-navbar li > a {
    display: block;
    padding: 15px;
    text-decoration: none;
  }
  .footer-navbar li > a:hover,
  .footer-navbar li > a:focus,
  .footer-navbar li > a:visited {
    text-decoration: none;
  }
  .footer-nav-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-image: url(../images/smmworld/hyapixl9601b5aq7.webp);
  }
  .footer-nav-icon.footer-first-nav-icon {
    background-position: -14px 0;
    height: 14px;
    width: 15px;
  }
  .footer-nav-icon.footer-second-nav-icon {
    background-position: -29px 0;
    width: 14px;
    height: 14px;
  }
  .footer-nav-icon.footer-fourth-nav-icon {
    background-position: -43px 0;
  }
  .footer-nav-icon.footer-fifth-nav-icon {
    background-position: -58px 0;
  }
  .footer-active-nav {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    box-shadow: 0 7px 5.8px RGBA(98, 68, 244, 0.19);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -26px;
    z-index: 99999;
    position: relative;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-main-nav .footer-nav-text {
    font-size: 12px;
    color: #010101;
  }
  .nav-pills.app-pills > li > a {
    font-size: 12px;
    border-radius: 10px;
    height: 38px;
    padding: 10px;
  }
  .app-pills.nav-pills > li + li {
    margin-left: 0;
  }
  .nav.nav-pills.app-pills::before, 
  .nav.nav-pills.app-pills::after {
    display: none;
  }
  .nav.nav-pills.app-pills {
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
  }
  .order-bottom {
    flex-direction: column;
  }
  .order-bottom-left {
    flex-wrap: wrap;
    gap: 5px 6px;
    margin-bottom: 5px;
  }
  .order-quantity, .order-charge, .order-start-count, .order-remains {
    flex: 0 0 23.5%;
    max-width: 23.5%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 5px;
  }
  .order-link,.order-date {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-wrap {
    border-radius: 12px;
    padding: 10px 10px;
    margin-bottom: 15px;
  }
  .order-date {
    padding: 5px;
    font-size: 12px;
  }
  .order-service {
    font-size: 12px;
  }
  .order-id {
    font-size: 12px;
    padding: 6px 6px;
    min-width: 60px;
    margin-right: 5px;
  }
  .status-badge {
    border-radius: 8px;
    padding: 6px;
    font-size: 12px;
  }

}
/* Mode Swap */
body.daymode {
  background-color: #FFFFFF;
}
body.nightmode {
  background-color: #0E0B1D;
}
.nightmode .app-sidebar,
.nightmode .app-header,
.nightmode .announce-kit,
.nightmode .well {
  background-color: #15102C;
  border-color: #2A2446;
}
.nightmode .well {
  border: 1px solid #2A2446;
}
.nightmode .app-current-location {
  color: #6B6C89;
}
.nightmode .nav-pills.app-pills > li > a,
.nightmode .app-current-location span,
.nightmode .announce-right,
.nightmode .app-sidebar-footer-heading,
.nightmode .has-children > a,
.nightmode .vertical-nav-menu .submenu > li.active > a,
.nightmode .filter-wrap h2,
.nightmode .brand-category,
.nightmode .well-heading,
.nightmode .pay-text,
.nightmode .save-deal,
.loggedIn.nightmode .form-control,
.nightmode .well .nav.nav-tabs > li > a,
.nightmode .search .input-group .btn.btn-default,
.nightmode .order-service,
.nightmode .order-link, 
.nightmode .order-date, 
.nightmode .order-quantity, 
.nightmode .order-charge, 
.nightmode .order-start-count, 
.nightmode .order-remains,
.nightmode .service-cate-heading,
.nightmode .table-main tbody > tr > td,
.nightmode .modal-header h2,
.nightmode .modal-body,
.nightmode .offer-left,
.nightmode .form-group .panel-body.border-solid.border-rounded {
  color: #FFFFFF;
}
.nightmode .input-group.form-input-group,
.nightmode .nav-pills.app-pills > li > a,
.nightmode .search .input-group,
.nightmode .save-deal,
.loggedIn.nightmode .form-control,
.nightmode .well .nav.nav-tabs > li > a,
.nightmode .has-children > a,
.nightmode .app-sidebar-footer-social-list,
.nightmode .brand-category,
.nightmode .setting-button, 
.nightmode .mode-button,
.nightmode .menu-user-logout,
.nightmode .order-wrap,
.nightmode .table-main tbody > tr > td,
.nightmode .modal,
.nightmode .offer-box,
.nightmode .payment-request,
.nightmode .form-group .panel-body.border-solid.border-rounded {
  background-color: #211947;
}
.nightmode .well .nav.nav-tabs > li > a,
.nightmode .nav-pills.app-pills > li > a,
.nightmode .search .input-group,
.nightmode .order-wrap,
.nightmode .table-main tbody > tr > td {
  border-color: RGBA(98, 68, 244, 0.29);
}
.nightmode .setting-button .menu-icon, .nightmode .mode-button .menu-icon {
  filter: invert(1);
}
.nightmode .app-hamburger, 
.nightmode .mobile-hamburger {
  background-color: #271F4D;
}
.nightmode .app-hamburger span {
  background-color: #FFFFFF;
}
.nightmode .vertical-nav-menu .has-children > a::after {
  filter: invert(1);
}
.nightmode .vertical-nav-menu .submenu > li.active > a {
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
}
.nightmode .order-link, 
.nightmode .order-date, 
.nightmode .order-quantity, 
.nightmode .order-charge, 
.nightmode .order-start-count, 
.nightmode .order-remains,
.nightmode .fav-btn, 
.nightmode .buy-service-btn,
.nightmode .service-badge {
  background-color: #3B306E;
}
.nightmode .order-top {
  border-bottom-color: RGBA(255, 255, 255, 0.1);
}
.nightmode .table.table-main > thead > tr > th, 
.nightmode .table.table-main > thead:first-child > tr:first-child > th {
  background-color: #15102C;
  border-color: RGBA(98, 68, 244, 0.29);
}
.nightmode .fav-btn span, 
.nightmode .buy-service-btn i {
  -webkit-text-fill-color: #fff;
}
.nightmode .modal-header {
  background-color: #15102C;
  border-color: RGBA(98, 68, 244, 0.29);
}
.nightmode .order-link a {
  color: #fff;
}

/* ==========================================================================
   MODULE STYLING & HIGH CONTRAST THEME RULES
   ========================================================================== */

/* Welcome Hero Box */
.welcome-hero-wrap {
  background: linear-gradient(135deg, #194FAF 0%, #C658FF 100%);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(25, 79, 175, 0.25);
  position: relative;
  overflow: hidden;
}
.welcome-hero-wrap::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.welcome-hero-wrap .welcome-small-box {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.welcome-hero-wrap .welcome-heading {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 6px 0;
  color: #FFFFFF;
}
.welcome-hero-wrap .welcome-subtext {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
  max-width: 650px;
  line-height: 1.5;
}

/* Category Filter Platform Bar */
.filter-wrap {
  background-color: #EBEAF8;
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 24px;
  border: 1px solid #DFDEF5;
}
.nightmode .filter-wrap {
  background-color: #15102C;
  border-color: rgba(98, 68, 244, 0.29);
}
.filter-heading-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.filter-heading-wrap h2 {
  font-size: 18px;
  font-weight: 700;
  color: #010101;
  margin: 0;
}
.nightmode .filter-heading-wrap h2 {
  color: #FFFFFF;
}
.hide-filter-btn {
  background-color: #010101;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nightmode .hide-filter-btn {
  background-color: #C658FF;
}
.filter-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}
.filter-list > li {
  flex: 1 1 calc(20% - 10px);
  min-width: 140px;
}
.brand-category {
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #DFDEF5;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #010101;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nightmode .brand-category {
  background-color: #211947;
  border-color: rgba(98, 68, 244, 0.29);
  color: #FFFFFF;
}
.brand-category:hover, .brand-category.active {
  background: linear-gradient(260deg, #194FAF 0%, #C658FF 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(198, 88, 255, 0.35);
}
.brand-category:hover .filter-text, .brand-category.active .filter-text {
  color: #FFFFFF !important;
}

/* Card & Table Contrast Overrides for Daymode & Nightmode */
.card, .well {
  border-radius: 18px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.daymode .card, .daymode .well {
  background-color: #FFFFFF !important;
  border: 1px solid #DFDEF5 !important;
  color: #010101 !important;
}
.nightmode .card, .nightmode .well {
  background-color: #1C153A !important;
  border: 1px solid rgba(98, 68, 244, 0.29) !important;
  color: #FFFFFF !important;
}

/* Tables */
.daymode .table th {
  color: #6B6C89 !important;
  border-bottom: 2px solid #DFDEF5 !important;
  background-color: #F8F9FD !important;
  font-weight: 700;
}
.nightmode .table th {
  color: #A6A4C5 !important;
  border-bottom: 2px solid rgba(98, 68, 244, 0.29) !important;
  background-color: #171135 !important;
  font-weight: 700;
}
.daymode .table td {
  color: #010101 !important;
  border-top: 1px solid #F0F0FA !important;
}
.nightmode .table td {
  color: #FFFFFF !important;
  border-top: 1px solid rgba(98, 68, 244, 0.15) !important;
}
.daymode .table-hover tbody tr:hover {
  background-color: #F5F5FA !important;
}
.nightmode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Form Controls */
.loggedIn .form-group .form-control {
  height: 50px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.daymode .form-control {
  background-color: #FFFFFF !important;
  color: #010101 !important;
  border: 1px solid #DFDEF5 !important;
}
.daymode .form-control:focus {
  border-color: #194FAF !important;
  box-shadow: 0 0 0 3px rgba(25, 79, 175, 0.15) !important;
}
.nightmode .form-control {
  background-color: #211947 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(98, 68, 244, 0.35) !important;
}
.nightmode .form-control:focus {
  border-color: #C658FF !important;
  box-shadow: 0 0 0 3px rgba(198, 88, 255, 0.2) !important;
}

/* Form Labels */
.daymode label, .daymode .form-label, .daymode .order-field-label {
  color: #010101 !important;
  font-weight: 600;
}
.nightmode label, .nightmode .form-label, .nightmode .order-field-label {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Price Pill & Submit Button */
.input-group.form-input-group {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid #DFDEF5;
  border-radius: 13px;
  height: 50px;
  padding: 0 14px;
}
.nightmode .input-group.form-input-group {
  background-color: #211947;
  border-color: rgba(98, 68, 244, 0.35);
}
.btn.btn-main.btn-form {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border-radius: 13px;
  width: 100%;
  height: 50px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(198, 88, 255, 0.35);
  transition: all 0.2s ease;
}
.btn.btn-main.btn-form:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(198, 88, 255, 0.45);
}

/* Gap Utility Classes (Backport for Bootstrap 4 flex containers) */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* ==========================================================================
   AUTHENTIC SMMWORLD LIGHT THEME RULES (body.daymode)
   ========================================================================== */

/* 1. Sidebar in Light Mode */
body.daymode .app-sidebar {
  background-color: #ffffff !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid #e2e6f3 !important;
  border-radius: 0 !important;
  box-shadow: 2px 0 12px rgba(21, 30, 58, 0.03) !important;
}

body.daymode .app-brand-wrap {
  border-bottom: 1px solid #f0f2f8 !important;
}

body.daymode .app-profile-viewer {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease;
}
body.daymode .app-profile-viewer:hover {
  border-color: #c8d0e5 !important;
}

body.daymode .app-username-title {
  color: #151e3a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

body.daymode .app-user-balance {
  color: #707ba0 !important;
  font-size: 12px !important;
}

body.daymode .app-user-balance span {
  color: #225aea !important;
  font-weight: 700 !important;
}

body.daymode .app-menu-title,
body:not(.nightmode) .app-menu-title,
html[data-theme="light"] .app-menu-title {
  color: #8f9bb3 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 10px 0 8px 6px !important;
}

body.daymode .vertical-nav-menu,
body:not(.nightmode) .vertical-nav-menu,
html[data-theme="light"] .vertical-nav-menu {
  gap: 8px 0 !important;
}

body.daymode .vertical-nav-menu > li > a,
body:not(.nightmode) .vertical-nav-menu > li > a,
html[data-theme="light"] .vertical-nav-menu > li > a {
  color: #525f7f !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  border-radius: 10px !important;
  padding: 4px 10px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

body.daymode .vertical-nav-menu > li > a:hover,
body:not(.nightmode) .vertical-nav-menu > li > a:hover,
html[data-theme="light"] .vertical-nav-menu > li > a:hover {
  background-color: #f8faff !important;
  color: #151e3a !important;
}

body.daymode .vertical-nav-menu > li.active > a,
body:not(.nightmode) .vertical-nav-menu > li.active > a,
html[data-theme="light"] .vertical-nav-menu > li.active > a {
  background-color: #f2f6ff !important;
  color: #225aea !important;
  font-weight: 700 !important;
  border-left: 3px solid #225aea !important;
}

body.daymode .vertical-nav-menu a > .navbar-icon,
body:not(.nightmode) .vertical-nav-menu a > .navbar-icon,
html[data-theme="light"] .vertical-nav-menu a > .navbar-icon {
  background-color: #f0f3fa !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.daymode .vertical-nav-menu > li.active > a > .navbar-icon {
  background-color: #225aea !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(34, 90, 234, 0.35) !important;
}

/* 2. Top Header in Light Mode */
body.daymode .app-header {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(21, 30, 58, 0.02) !important;
  padding: 10px 18px !important;
}

body.daymode .app-current-location {
  color: #707ba0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body.daymode .app-current-location span {
  color: #151e3a !important;
  font-weight: 700 !important;
}

body.daymode .balance-box {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #225aea !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

body.daymode .balance-box:hover {
  background-color: #f2f6ff !important;
  border-color: #225aea !important;
  color: #225aea !important;
}

body.daymode .mode-button {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

body.daymode .mode-button:hover {
  background-color: #f0f3fa !important;
  color: #225aea !important;
  border-color: #c8d0e5 !important;
}

body.daymode .menu-user-logout {
  background-color: #151e3a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  transition: all 0.2s ease !important;
}

body.daymode .menu-user-logout:hover {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
}

/* 3. Cards & Panels in Light Mode */
body.daymode .card,
body.daymode .smm-card,
body.daymode .tickets-card,
body.daymode .tickets-header-card,
body.daymode .add-funds-card,
body.daymode .add-funds-header-card,
body.daymode .services-header-card,
body.daymode .category-card-wrapper .card,
body.daymode .manual-payment-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(21, 30, 58, 0.04), 0 1px 3px rgba(21, 30, 58, 0.02) !important;
  color: #151e3a !important;
}

body.daymode .card-header,
body.daymode .smm-card-header,
body.daymode .tickets-card .card-header {
  background-color: transparent !important;
  border-bottom: 1px solid #f0f2f8 !important;
  padding: 18px 22px !important;
  color: #151e3a !important;
}

body.daymode .card-title,
body.daymode .smm-card-title {
  color: #151e3a !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
}

body.daymode .card-body,
body.daymode .smm-card-body {
  color: #151e3a !important;
  padding: 22px !important;
}

/* 4. Form Controls & Inputs in Light Mode */
body.daymode .form-control,
body.daymode input.form-control,
body.daymode select.form-control,
body.daymode textarea.form-control,
body.daymode .smm-input,
body.daymode .ticket-search-input,
body.daymode .category-select-control {
  background-color: #ffffff !important;
  border: 1px solid #c8d0e5 !important;
  border-radius: 10px !important;
  color: #151e3a !important;
  font-size: 13.5px !important;
  padding: 10px 16px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

body.daymode .form-control:focus,
body.daymode input.form-control:focus,
body.daymode select.form-control:focus,
body.daymode textarea.form-control:focus,
body.daymode .ticket-search-input:focus,
body.daymode .category-select-control:focus {
  background-color: #ffffff !important;
  border-color: #225aea !important;
  box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.15) !important;
  color: #151e3a !important;
}

body.daymode .form-control::placeholder {
  color: #8f9bb3 !important;
}

body.daymode label,
body.daymode .form-label {
  color: #525f7f !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 7px !important;
}

body.daymode .input-group-text {
  background-color: #f8f9fd !important;
  border: 1px solid #c8d0e5 !important;
  color: #525f7f !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 600 !important;
}

/* 5. Buttons in Light Mode */
body.daymode .btn-primary,
body.daymode .smm-btn-primary,
body.daymode button[type="submit"]:not(.ticket-search-btn):not(.btn-search) {
  background-color: #225aea !important;
  background-image: none !important;
  border: 1px solid #225aea !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 11px 22px !important;
  box-shadow: 0 4px 14px rgba(34, 90, 234, 0.25) !important;
  transition: all 0.2s ease !important;
}

body.daymode .btn-primary:hover,
body.daymode .smm-btn-primary:hover,
body.daymode button[type="submit"]:not(.ticket-search-btn):not(.btn-search):hover {
  background-color: #1a4bd6 !important;
  border-color: #1a4bd6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(34, 90, 234, 0.35) !important;
  color: #ffffff !important;
}

body.daymode .btn-secondary,
body.daymode .btn-outline-secondary {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  color: #525f7f !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

body.daymode .btn-secondary:hover {
  background-color: #f8faff !important;
  color: #151e3a !important;
  border-color: #225aea !important;
}

body.daymode .btn-search,
body.daymode .ticket-search-btn {
  background-color: #225aea !important;
  border-color: #225aea !important;
  color: #ffffff !important;
}

/* 6. Tables in Light Mode */
body.daymode .table {
  color: #151e3a !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.daymode .table th {
  background-color: #f8f9fd !important;
  color: #525f7f !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid #e2e6f3 !important;
  border-top: none !important;
  padding: 12px 16px !important;
}

body.daymode .category-card-wrapper .table th,
body.daymode .smm-cat-card table th,
body.daymode .smm-services-table thead th {
  background-color: #f8f9fd !important;
  color: #707ba0 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #e2e6f3 !important;
  border-top: none !important;
}

body.daymode .table td {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f0f2f8 !important;
  border-top: none !important;
  padding: 13px 16px !important;
  color: #151e3a !important;
  vertical-align: middle !important;
}

body.daymode .table tbody tr:hover td {
  background-color: #f8faff !important;
}

/* 7. Payment Tabs & Chips in Add Funds (Light Mode) */
body.daymode .payment-tab-item .nav-link {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 12px !important;
  color: #525f7f !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  transition: all 0.2s ease !important;
}

body.daymode .payment-tab-item .nav-link:hover {
  background-color: #f8faff !important;
  border-color: #225aea !important;
  color: #225aea !important;
}

body.daymode .payment-tab-item .nav-link.active {
  background-color: #f2f6ff !important;
  border: 1.5px solid #225aea !important;
  color: #225aea !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(34, 90, 234, 0.15) !important;
}

body.daymode .quick-amount-chip {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  transition: all 0.15s ease !important;
}

body.daymode .quick-amount-chip:hover {
  background-color: #f2f6ff !important;
  border-color: #225aea !important;
  color: #225aea !important;
  transform: translateY(-1px);
}

body.daymode .add-funds-form-content .p-3.rounded,
body.daymode .creditCardForm .p-3.rounded {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #525f7f !important;
}

body.daymode .add-funds-form-content .p-3.rounded label,
body.daymode .creditCardForm .p-3.rounded label,
body.daymode .add-funds-form-content .p-3.rounded strong,
body.daymode .creditCardForm .p-3.rounded strong {
  color: #151e3a !important;
}

/* 8. Modals & Dropdowns in Light Mode */
body.daymode .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(21, 30, 58, 0.08) !important;
  padding: 8px !important;
}

body.daymode .dropdown-item {
  color: #525f7f !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

body.daymode .dropdown-item:hover {
  background-color: #f2f6ff !important;
  color: #225aea !important;
}

body.daymode .modal-content {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(21, 30, 58, 0.15) !important;
  color: #151e3a !important;
}

body.daymode .modal-header {
  border-bottom: 1px solid #f0f2f8 !important;
}

body.daymode .modal-title {
  color: #151e3a !important;
  font-weight: 700 !important;
}

body.daymode .modal-footer {
  border-top: 1px solid #f0f2f8 !important;
}

body.daymode .close {
  color: #707ba0 !important;
}

/* 9. Hero Gradient Banners (Authentic SMMWorld Style) */
.smmworld-hero-banner {
  background: linear-gradient(135deg, #194FAF 0%, #a855f7 50%, #8b5cf6 100%) !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  box-shadow: 0 6px 24px rgba(25, 79, 175, 0.25) !important;
  text-align: center;
}
.smmworld-hero-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.smmworld-hero-banner h2,
.smmworld-hero-banner h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  font-size: 1.5rem !important;
  position: relative;
  z-index: 1;
}
.smmworld-hero-banner p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13.5px !important;
  margin: 0 auto !important;
  max-width: 650px;
  position: relative;
  z-index: 1;
}

/* 10. New Order Screen Dual-Mode Overrides */
.order-input-control {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  outline: none;
}
body.daymode .order-input-control {
  background-color: #ffffff !important;
  color: #151e3a !important;
  border: 1px solid #c8d0e5 !important;
}
body.daymode .order-input-control:focus {
  border-color: #225aea !important;
  box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.15) !important;
}
body.nightmode .order-input-control {
  background-color: #211947 !important;
  color: #ffffff !important;
  border: 1px solid rgba(98, 68, 244, 0.35) !important;
}
body.nightmode .order-input-control:focus {
  border-color: #C658FF !important;
  box-shadow: 0 0 0 3px rgba(198, 88, 255, 0.2) !important;
}

/* Wells in Dual Mode */
body.daymode .well {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(21, 30, 58, 0.04) !important;
}
body.daymode .well-heading {
  color: #151e3a !important;
  font-weight: 700 !important;
}
body.nightmode .well {
  background-color: #1C153A !important;
  border: 1px solid rgba(98, 68, 244, 0.29) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
body.nightmode .well-heading {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Quick Select Pills in New Order */
.qty-quick-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.daymode .qty-quick-btn {
  background-color: #ffffff;
  border: 1px solid #c8d0e5;
  color: #225aea;
}
body.daymode .qty-quick-btn:hover {
  background-color: #f2f6ff;
  border-color: #225aea;
}
body.nightmode .qty-quick-btn {
  background-color: #211947;
  border: 1px solid rgba(98, 68, 244, 0.35);
  color: #38bdf8;
}
body.nightmode .qty-quick-btn:hover {
  background-color: #2c225e;
  border-color: #C658FF;
}

/* Quick Search Box in New Order */
.order-search-box {
  position: relative;
  margin-bottom: 16px;
}
.order-search-box input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  padding: 8px 16px 8px 38px;
  font-size: 13.5px;
  transition: all 0.2s ease;
  outline: none;
}
.order-search-box .order-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8f9bb3;
  font-size: 15px;
  pointer-events: none;
}
body.daymode .order-search-box input {
  background-color: #ffffff;
  border: 1px solid #c8d0e5;
  color: #151e3a;
}
body.daymode .order-search-box input:focus {
  border-color: #225aea;
  box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.15);
}
body.nightmode .order-search-box input {
  background-color: #211947;
  border: 1px solid rgba(98, 68, 244, 0.35);
  color: #ffffff;
}
body.nightmode .order-search-box input:focus {
  border-color: #C658FF;
  box-shadow: 0 0 0 3px rgba(198, 88, 255, 0.2);
}

/* Updates / Top Rated List */
body.daymode .update-wrapper {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
  color: #151e3a !important;
}
body.daymode .update-service-name {
  color: #151e3a !important;
  font-weight: 600 !important;
}
body.daymode .update-service-id {
  color: #707ba0 !important;
  font-size: 12px !important;
}
body.nightmode .update-wrapper {
  background-color: #211947 !important;
  border: 1px solid rgba(98, 68, 244, 0.25) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
  color: #ffffff !important;
}
body.nightmode .update-service-name {
  color: #ffffff !important;
  font-weight: 600 !important;
}
body.nightmode .update-service-id {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

/* 11. High-Contrast Text Adaptations for Light Mode */
body.daymode .card .text-white:not(.btn):not(.badge):not(.smmworld-hero-banner *):not(.bg-primary *):not(.affiliate-hero *):not(.welcome-box *):not(.smm-promo-banner *):not(.smm-funds-hero *),
body.daymode .table .text-white:not(.btn):not(.badge),
body.daymode .card-header .text-white:not(.affiliate-hero *):not(.welcome-box *),
body.daymode .card-title.text-white:not(.affiliate-hero *):not(.welcome-box *),
body.daymode .title.text-white:not(.affiliate-hero *):not(.welcome-box *),
body.daymode .dash-hero-card .text-white,
body.daymode .transactions-header-card .text-white,
body.daymode .refill-header-card .text-white,
body.daymode .dripfeed-header-card .text-white,
body.daymode .subscriptions-header-card .text-white,
body.daymode .profile-header-card .text-white,
body.daymode .faq-header-card .text-white,
body.daymode h1.text-white:not(.smmworld-hero-banner *):not(.affiliate-hero *):not(.welcome-box *),
body.daymode h2.text-white:not(.smmworld-hero-banner *):not(.affiliate-hero *):not(.welcome-box *),
body.daymode h3.text-white:not(.smmworld-hero-banner *):not(.affiliate-hero *):not(.welcome-box *),
body.daymode h4.text-white:not(.smmworld-hero-banner *):not(.affiliate-hero *):not(.welcome-box *),
body.daymode h5.text-white:not(.smmworld-hero-banner *):not(.affiliate-hero *):not(.welcome-box *) {
  color: #151e3a !important;
}

/* Status Badges in Light Mode */
body.daymode .status-rate-decreased {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}
body.daymode .status-rate-increased {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #ddd6fe !important;
}

/* ==========================================================================
   SMMDAZE NEW ORDER STYLES
   ========================================================================== */
body.daymode {
    --smm-daze-card-bg: #ffffff;
    --smm-daze-panel-border: #e2dbf9;
    --smm-daze-text-dark: #241a3d;
    --smm-daze-muted: #7a7391;
}

body.nightmode, html[data-theme="dark"] body {
    --smm-daze-card-bg: var(--smm-surface-card);
    --smm-daze-panel-border: var(--smm-border-subtle);
    --smm-daze-text-dark: #ffffff;
    --smm-daze-muted: #A6A4C5;
}

:root {
    --purple-1: #6a4bff;
    --purple-2: #9b3bd6;
    --purple-grad: linear-gradient(90deg, var(--purple-1), var(--purple-2));
    --text-orange: #c9601c;
    --text-green: #1c9d4b;
}

.smm-order-card {
    width: 100%;
    max-width: 100%;
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 24px;
}
.smm-order-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.smm-order-header .icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--purple-grad);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 16px;
}
.smm-order-header h1 {
    font-size: 17px;
    margin: 0;
    color: var(--smm-daze-text-dark);
    font-weight: 700;
}
.smm-order-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    border-bottom: none;
}
.smm-order-tabs .nav-item {
    margin-bottom: 0;
}
.smm-order-tabs .nav-item .nav-link {
    border: 1px solid var(--smm-daze-panel-border) !important;
    background: transparent;
    padding: 8px 16px;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--smm-daze-text-dark) !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    text-decoration: none !important;
}
.smm-order-tabs .nav-item .nav-link.active {
    background: var(--purple-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.smm-order-search-wrap {
    position: relative;
    margin-bottom: 18px;
}
.smm-order-search-wrap input {
    width: 100%;
    padding: 11px 14px 11px 36px;
    border-radius: 10px;
    border: 1px solid var(--smm-daze-panel-border);
    font-size: 13px;
    background: var(--smm-daze-card-bg);
    color: var(--smm-daze-text-dark);
}
.smm-order-search-wrap input:focus {
    outline: none;
    border-color: var(--purple-1);
}
.smm-order-search-wrap .icn {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--smm-daze-muted);
    font-size: 14px;
}
.smm-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--smm-daze-text-dark);
    margin-bottom: 6px;
}
.smm-order-input-control {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--smm-daze-panel-border);
    font-size: 13px;
    background: var(--smm-daze-card-bg);
    appearance: none;
    color: var(--smm-daze-text-dark);
    height: auto !important;
}
.smm-order-input-control:focus {
    outline: none;
    border-color: var(--purple-1);
}
.smm-description-box {
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    border-radius: 12px;
    padding: 16px;
    font-size: 12.5px;
    color: var(--smm-daze-text-dark);
    line-height: 1.6;
}
.smm-description-box .lead { color: var(--text-orange); margin-bottom: 10px; }
.smm-description-box .check-line { color: var(--text-green); font-weight: 600; margin: 4px 0; }
.smm-description-box .check-line::before { content: "✅ "; }
.smm-description-box hr.rule {
    border: none;
    border-top: 1px solid var(--smm-daze-panel-border);
    margin: 14px 0;
}
.smm-description-box .section-title {
    color: var(--text-orange);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .3px;
    margin-bottom: 8px;
}
.smm-description-box ol.req-list { margin: 0 0 10px 18px; padding: 0; }
.smm-description-box ol.req-list li { margin-bottom: 3px; }
.smm-description-box .warn-line { color: var(--text-orange); margin: 10px 0 4px; }
.smm-description-box .form-link { color: var(--purple-1); font-weight: 600; text-decoration: underline; cursor: pointer; }
.smm-description-box .note { margin: 6px 0 0; }
.smm-bottom-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.smm-pay-box {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--smm-daze-text-dark);
    margin: 0 !important;
}
.smm-pay-box .coin {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #efe7ff;
    color: var(--purple-1);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.smm-place-btn {
    flex: 1.4 1 260px;
    background: var(--purple-grad);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 20px;
    transition: transform 0.2s;
    height: 100%;
}
.smm-place-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   SMMDAZE SERVICES CATALOG STYLES
   ========================================================================== */
.smm-services-header {
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    border-radius: 20px;
    padding: 22px 26px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.smm-services-header .smm-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--purple-grad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.smm-services-search-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border-radius: 10px;
    border: 1px solid var(--smm-daze-panel-border);
    font-size: 13px;
    background: var(--smm-daze-card-bg);
    color: var(--smm-daze-text-dark);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.smm-services-search-input:focus {
    outline: none;
    border-color: var(--purple-1);
    box-shadow: 0 0 0 3px rgba(106, 75, 255, 0.15);
}

.smm-fav-filter-btn {
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    color: var(--smm-daze-text-dark);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}

.smm-fav-filter-btn:hover {
    border-color: var(--purple-1);
    color: var(--purple-1);
}

.smm-fav-filter-btn.active-fav-filter {
    background: var(--purple-grad) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(106, 75, 255, 0.35) !important;
}

.smm-category-select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--smm-daze-panel-border);
    font-size: 13px;
    font-weight: 600;
    background: var(--smm-daze-card-bg);
    color: var(--smm-daze-text-dark);
    outline: none;
    transition: border-color 0.15s ease;
    height: auto !important;
}

.smm-category-select:focus {
    border-color: var(--purple-1);
    box-shadow: 0 0 0 3px rgba(106, 75, 255, 0.15);
}

.smm-legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    color: var(--smm-daze-muted);
    margin-right: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.smm-legend-pill:hover {
    color: var(--purple-1);
    border-color: var(--purple-1);
}

/* Category Card */
.smm-cat-card {
    background: var(--smm-daze-card-bg) !important;
    border: 1px solid var(--smm-daze-panel-border) !important;
    border-radius: 18px !important;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

.smm-cat-header {
    background: transparent !important;
    border-bottom: 1px solid var(--smm-daze-panel-border) !important;
    padding: 16px 22px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smm-cat-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--smm-daze-text-dark) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.smm-cat-badge {
    background: rgba(106, 75, 255, 0.1);
    color: var(--purple-1);
    border-radius: 8px;
    font-weight: 700;
    font-size: 11.5px;
    padding: 4px 10px;
    display: inline-block;
}

/* Service Table */
.smm-services-table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
}

.smm-services-table thead th {
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    color: var(--smm-daze-muted) !important;
    border-bottom: 1px solid var(--smm-daze-panel-border) !important;
    border-top: none !important;
    padding: 14px 18px !important;
    white-space: nowrap;
}

.smm-services-table tbody tr {
    border-bottom: 1px solid var(--smm-daze-panel-border);
    transition: background 0.15s ease;
}

.smm-services-table tbody tr:hover {
    background: rgba(106, 75, 255, 0.03);
}

.smm-services-table tbody tr:last-child {
    border-bottom: none;
}

.smm-services-table tbody td {
    padding: 14px 18px !important;
    vertical-align: middle !important;
    color: var(--smm-daze-text-dark);
}

/* Service ID Badge */
.service-badge {
    background: var(--purple-grad);
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.2px;
}

/* Service Star Button */
.btn-service-star {
    background: transparent;
    border: none;
    color: var(--smm-daze-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.btn-service-star:hover {
    transform: scale(1.2);
    color: #f59e0b;
}

.btn-service-star.active {
    color: #f59e0b !important;
}

/* Service Price Pill */
.smm-rate-pill {
    background: rgba(28, 157, 75, 0.1);
    color: #10b981;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 8px;
    display: inline-block;
    white-space: nowrap;
}

/* Service Order Button */
.smm-order-btn {
    background: var(--purple-grad);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.smm-order-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 75, 255, 0.35);
    color: #fff !important;
    text-decoration: none !important;
}

/* Service View Details Button */
.smm-services-table .btn.btn-primary.btn-sm,
.smm-services-table .btn.btn-outline-primary.btn-sm {
    border: 1px solid var(--smm-daze-panel-border) !important;
    background: var(--smm-daze-card-bg) !important;
    color: var(--smm-daze-text-dark) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    transition: all 0.15s ease !important;
}

.smm-services-table .btn.btn-primary.btn-sm:hover,
.smm-services-table .btn.btn-outline-primary.btn-sm:hover {
    border-color: var(--purple-1) !important;
    color: var(--purple-1) !important;
}

/* Modal styling for details */
.modal-content {
    background: var(--smm-daze-card-bg) !important;
    border: 1px solid var(--smm-daze-panel-border) !important;
    border-radius: 16px !important;
    color: var(--smm-daze-text-dark) !important;
}
.modal-header {
    border-bottom: 1px solid var(--smm-daze-panel-border) !important;
}
.modal-header .modal-title {
    color: var(--smm-daze-text-dark) !important;
    font-weight: 700 !important;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--smm-daze-card-bg);
    border: 1px solid var(--smm-daze-panel-border);
    color: var(--smm-daze-muted);
    margin-right: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.smm-legend-pill:hover {
    color: var(--purple-1);
    border-color: var(--purple-1);
}

/* Category Card */
.smm-cat-card {
    background: var(--smm-daze-card-bg) !important;
    border: 1px solid var(--smm-daze-panel-border) !important;
    border-radius: 18px !important;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

.smm-cat-header {
    background: transparent !important;
    border-bottom: 1px solid var(--smm-daze-panel-border) !important;
    padding: 16px 22px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smm-cat-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--smm-daze-text-dark) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.smm-cat-badge {
    background: rgba(106, 75, 255, 0.1);
    color: var(--purple-1);
    border-radius: 8px;
    font-weight: 700;
    font-size: 11.5px;
    padding: 4px 10px;
    display: inline-block;
}

/* Service Table */
.smm-services-table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
}

.smm-services-table thead th {
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    color: var(--smm-daze-muted) !important;
    border-bottom: 1px solid var(--smm-daze-panel-border) !important;
    border-top: none !important;
    padding: 14px 18px !important;
    white-space: nowrap;
}

.smm-services-table tbody tr {
    border-bottom: 1px solid var(--smm-daze-panel-border);
    transition: background 0.15s ease;
}

.smm-services-table tbody tr:hover {
    background: rgba(106, 75, 255, 0.03);
}

.smm-services-table tbody tr:last-child {
    border-bottom: none;
}

.smm-services-table tbody td {
    padding: 14px 18px !important;
    vertical-align: middle !important;
    color: var(--smm-daze-text-dark);
}

/* Service ID Badge */
.service-badge {
    background: var(--purple-grad);
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.2px;
}

/* Service Star Button */
.btn-service-star {
    background: transparent;
    border: none;
    color: var(--smm-daze-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.btn-service-star:hover {
    transform: scale(1.2);
    color: #f59e0b;
}

.btn-service-star.active {
    color: #f59e0b !important;
}

/* Service Price Pill */
.smm-rate-pill {
    background: transparent;
    color: var(--smm-text-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 5px 12px;
    display: inline-block;
    white-space: nowrap;
}

/* Service Order Button */
.smm-order-btn {
    background: var(--purple-grad);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.smm-order-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 75, 255, 0.35);
    color: #fff !important;
    text-decoration: none !important;
}

/* Service View Details Button */
.smm-services-table .btn.btn-primary.btn-sm,
.smm-services-table .btn.btn-outline-primary.btn-sm {
    border: 1px solid var(--smm-daze-panel-border) !important;
    background: var(--smm-daze-card-bg) !important;
    color: var(--smm-daze-text-dark) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    transition: all 0.15s ease !important;
}

.smm-services-table .btn.btn-primary.btn-sm:hover,
.smm-services-table .btn.btn-outline-primary.btn-sm:hover {
    border-color: var(--purple-1) !important;
    color: var(--purple-1) !important;
}

/* Modal styling for details */
.modal-content {
    background: var(--smm-daze-card-bg) !important;
    border: 1px solid var(--smm-daze-panel-border) !important;
    border-radius: 16px !important;
    color: var(--smm-daze-text-dark) !important;
}
.modal-header {
    border-bottom: 1px solid var(--smm-daze-panel-border) !important;
}
.modal-header .modal-title {
    color: var(--smm-daze-text-dark) !important;
    font-weight: 700 !important;
}
.modal-body {
    color: var(--smm-daze-text-dark) !important;
}

/* =======================================================/* ========================================================
   Authentic SMMDaze Order History Styles (from 0hyo2tl3d96rd6lx.css)
   ======================================================== */
.nav.nav-pills.service-filter {
  display: flex;
  gap: 0 8px;
  margin-bottom: 25px;
}
.nav.nav-pills.service-filter li:last-child {
  flex: 1;
  gap: 0;
}
.service-filter .btn.btn-primary.dropdown-toggle {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 50px;
  min-width: 167px;
}
.nav.nav-pills.service-filter::before, 
.nav.nav-pills.service-filter::after {
  display: none;
}

.table-main {
  border-collapse: separate;
  border-spacing: 0 10px;
}
.table.table-main > thead > tr > th, 
.table.table-main > thead:first-child > tr:first-child > th {
  background-color: #000000;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 34px;
}
.table-main thead > tr th:first-child {
  border-left: 1px solid #000000;
  border-radius: 12px 0 0 12px;
  text-align: center;
  min-width: 9%;
}
.table-main thead > tr th:last-child {
  border-right: 1px solid #000000;
  border-radius: 0 12px 12px 0;
  text-align: center;
}
.table-main tbody > tr > td {
  background-color: #EBEAF8;
  border-top: 1px solid #DFDEF5;
  border-bottom: 1px solid #DFDEF5;
  font-size: 14px;
  font-weight: 400;
  color: #010101;
  vertical-align: middle;
}
.table-main tbody tr > td:first-child {
  border-left: 1px solid #DFDEF5;
  border-radius: 12px 0 0 12px;
}
.table-main tbody > tr > td:last-child {
  border-radius: 0 12px 12px 0;
  border-right: 1px solid #DFDEF5;
}

.status-badge {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.status-badge.status-canceled {
  background-color: #FF3737;
}
.status-badge:before {
  content: '';
  background-image: url(../images/smmworld/016ikh8g4i08rs3e.webp);
  width: 16px;
  height: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 2px;
}
.status-badge.status-completed {
  background-color: #22AB00;
}
.status-badge.status-inprogress,
.status-badge.status-paused {
  background-color: #FF7A00;
}
.status-badge.status-partial {
  background-color: #3B82FF;
}
.status-badge.status-processing,
.status-badge.status-active {
  background-color: #24A1DE;
}
.status-badge.status-pending,
.status-badge.status-expired {
  background-color: #194FAF;
}
.status-badge.status-pending:before,
.status-badge.status-expired:before {
  background-position: -86px 0;
}
.status-badge.status-processing:before,
.status-badge.status-active:before {
  background-position: -65px 0;
  width: 21px;
}
.status-badge.status-partial:before {
  background-position: -32px 0;
}
.status-badge.status-inprogress:before,
.status-badge.status-paused:before {
  background-position: -48px 0;
}
.status-badge.status-completed:before {
  background-position: 0px 0;
}
.status-badge.status-canceled:before {
  background-position: -16px 0;
}

.order-actions-btn .btn.btn-xs.btn-primary {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  color: #fff;
}

/* Authentic Dark Mode Overrides */
html[data-theme="dark"] body.nightmode .table.table-main > thead > tr > th, 
html[data-theme="dark"] body.nightmode .table.table-main > thead:first-child > tr:first-child > th {
  background-color: #15102C;
  border-top: 1px solid #15102C;
  border-bottom: 1px solid #15102C;
}
html[data-theme="dark"] body.nightmode .table-main thead > tr th:first-child {
  border-left: 1px solid #15102C;
}
html[data-theme="dark"] body.nightmode .table-main thead > tr th:last-child {
  border-right: 1px solid #15102C;
}
html[data-theme="dark"] body.nightmode .table-main tbody > tr > td {
  background-color: #1A1333;
  color: #fff;
  border-top: 1px solid rgba(98, 68, 244, 0.29);
  border-bottom: 1px solid rgba(98, 68, 244, 0.29);
}
html[data-theme="dark"] body.nightmode .table-main tbody tr > td:first-child {
  border-left: 1px solid rgba(98, 68, 244, 0.29);
}
html[data-theme="dark"] body.nightmode .table-main tbody > tr > td:last-child {
  border-right: 1px solid rgba(98, 68, 244, 0.29);
}
/* SMMDaze Authentic Order History Styles */
.order-link {
  min-width: 252px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.link-copy {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 18px;
  position: relative;
  cursor: pointer;
  margin-left: 10px;
}
.order-heading {
  color: #C658FF;
}
.date {
  border-right: 1px solid #BFBED3;
  padding-right: 6px;
}
.status-badge {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
}
.status-badge.status-canceled {
  background-color: #FF3737;
}
.status-badge:before {
  content: '';
  background-image: url(../images/smmworld/016ikh8g4i08rs3e.webp);
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 4px;
}
.status-badge.status-completed {
  background-color: #22AB00;
}
.status-badge.status-inprogress,
.status-badge.status-paused {
  background-color: #FF7A00;
}
.status-badge.status-partial {
  background-color: #3B82FF;
}
.status-badge.status-processing,
.status-badge.status-active {
  background-color: #24A1DE;
}
.status-badge.status-pending,
.status-badge.status-expired {
  background-color: #194FAF;
}
.status-badge.status-pending:before,
.status-badge.status-expired:before {
  background-position: -86px 0;
}
.status-badge.status-processing:before,
.status-badge.status-active:before {
  background-position: -65px 0;
  width: 21px;
}
.status-badge.status-partial:before {
  background-position: -32px 0;
}
.status-badge.status-inprogress:before,
.status-badge.status-paused:before {
  background-position: -48px 0;
}
.status-badge.status-completed:before {
  background-position: 0px 0;
}
.status-badge.status-canceled:before {
  background-position: -16px 0;
}
.order-actions-btn .btn.btn-xs.btn-primary {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
}
/* SMMDaze Authentic Order History Styles */
.order-link {
  min-width: 252px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.link-copy {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 18px;
  position: relative;
  cursor: pointer;
  margin-left: 10px;
}
.order-heading {
  color: #C658FF;
}
.date {
  border-right: 1px solid #BFBED3;
  padding-right: 6px;
}
.status-badge {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
}
.status-badge.status-canceled {
  background-color: #FF3737;
}
.status-badge:before {
  content: '';
  background-image: url(../images/smmworld/016ikh8g4i08rs3e.webp);
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 4px;
}
.status-badge.status-completed {
  background-color: #22AB00;
}
.status-badge.status-inprogress,
.status-badge.status-paused {
  background-color: #FF7A00;
}
.status-badge.status-partial {
  background-color: #3B82FF;
}
.status-badge.status-processing,
.status-badge.status-active {
  background-color: #24A1DE;
}
.status-badge.status-pending,
.status-badge.status-expired {
  background-color: #194FAF;
}
.status-badge.status-pending:before,
.status-badge.status-expired:before {
  background-position: -86px 0;
}
.status-badge.status-processing:before,
.status-badge.status-active:before {
  background-position: -65px 0;
  width: 21px;
}
.status-badge.status-partial:before {
  background-position: -32px 0;
}
.status-badge.status-inprogress:before,
.status-badge.status-paused:before {
  background-position: -48px 0;
}
.status-badge.status-completed:before {
  background-position: 0px 0;
}
.status-badge.status-canceled:before {
  background-position: -16px 0;
}
.order-actions-btn .btn.btn-xs.btn-primary {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
}
.nav.nav-pills.service-filter {
  display: flex;
  gap: 0 8px;
  margin-bottom: 25px;
}
.nav.nav-pills.service-filter li:last-child {
  flex: 1;
}
/* SMMDaze Authentic Order History Styles */
.order-link {
  min-width: 252px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.link-copy {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 18px;
  position: relative;
  cursor: pointer;
  margin-left: 10px;
}
.order-heading {
  color: #C658FF;
}
.date {
  border-right: 1px solid #BFBED3;
  padding-right: 6px;
}
.status-badge {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
}
.status-badge.status-canceled {
  background-color: #FF3737;
}
.status-badge:before {
  content: '';
  background-image: url(../images/smmworld/016ikh8g4i08rs3e.webp);
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 4px;
}
.status-badge.status-completed {
  background-color: #22AB00;
}
.status-badge.status-inprogress,
.status-badge.status-paused {
  background-color: #FF7A00;
}
.status-badge.status-partial {
  background-color: #3B82FF;
}
.status-badge.status-processing,
.status-badge.status-active {
  background-color: #24A1DE;
}
.status-badge.status-pending,
.status-badge.status-expired {
  background-color: #194FAF;
}
.status-badge.status-pending:before,
.status-badge.status-expired:before {
  background-position: -86px 0;
}
.status-badge.status-processing:before,
.status-badge.status-active:before {
  background-position: -65px 0;
  width: 21px;
}
.status-badge.status-partial:before {
  background-position: -32px 0;
}
.status-badge.status-inprogress:before,
.status-badge.status-paused:before {
  background-position: -48px 0;
}
.status-badge.status-completed:before {
  background-position: 0px 0;
}
.status-badge.status-canceled:before {
  background-position: -16px 0;
}
.order-actions-btn .btn.btn-xs.btn-primary {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
}
.nav.nav-pills.service-filter {
  display: flex;
  gap: 0 8px;
  margin-bottom: 25px;
}
.nav.nav-pills.service-filter li:last-child {
  flex: 1;
  gap: 0;
}
.service-filter .btn.btn-primary.dropdown-toggle {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  border: none;
}
/* ========================================================
   Authentic SMMDaze Order History Styles (from 0hyo2tl3d96rd6lx.css)
   ======================================================== */
.welcome-box {
  margin-bottom: 24px;
}
.welcome-heading {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 6px;
}
.welcome-box p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 0;
}

/* App Pills Filter Tabs */
.nav-pills.app-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 0;
  list-style: none;
}
.nav-pills.app-pills > li > a {
  font-size: 14px;
  font-weight: 500;
  color: #010101;
  border: 1px solid #EBEAF8;
  background-color: #EBEAF8;
  border-radius: 12px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.nav-pills.app-pills > li > a img {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.nav-pills.app-pills > li.active > a img {
  filter: brightness(0) invert(1);
}
.nav-pills.app-pills > li.active > a,
.nav-pills.app-pills > li.active > a:hover,
.nav-pills.app-pills > li.active > a:focus {
  border-color: transparent;
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
}
.nav-pills.app-pills > li:not(.active) > a:hover {
  background-color: #DFDEF5;
  color: #010101;
}
.app-pills.nav-pills li.search {
  margin-left: auto;
  width: 320px;
}
.search .input-group {
  background-color: #EBEAF8;
  border: 1px solid #EBEAF8;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
}
.search .input-group .form-control {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-size: 14px;
  height: 36px;
  padding-left: 8px;
  color: #010101;
}
.search .input-group .form-control:focus {
  outline: none;
  box-shadow: none;
}
.search .input-group .btn.btn-default {
  border: none;
  background-color: transparent;
  padding: 0 6px;
  color: #010101;
  font-size: 16px;
  cursor: pointer;
}

/* Order Wrap Cards */
.order-wrap {
  display: flex;
  flex-direction: column;
  background-color: #EBEAF8;
  border-radius: 15px;
  padding: 14px 20px;
  margin-bottom: 16px;
  border: 1px solid #DFDEF5;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.order-wrap:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.order-top, .order-bottom {
  display: flex;
}
.order-top {
  padding-bottom: 10px;
  border-bottom: 1px solid #BFBED3;
  justify-content: space-between;
  align-items: center;
}
.order-bottom {
  padding-top: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
}
.order-top-left {
  display: flex;
  align-items: center;
  flex: 1;
}
.order-top-right {
  display: flex;
  align-items: center;
}
.order-bottom-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  align-items: center;
  flex: 1;
}
.order-bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-id,
.service-id {
  background: linear-gradient(260deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 14px;
  min-width: 83px;
  margin-right: 12px;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.copy-id {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.copy-id i {
  font-size: 11px;
  margin-left: 6px;
}
.order-service {
  font-size: 14px;
  font-weight: 600;
  color: #010101;
  word-break: break-word;
}
.order-link, .order-date, .order-quantity, .order-charge, .order-start-count, .order-remains {
  background-color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  color: #333;
}
.order-link {
  min-width: 200px;
  max-width: 340px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
.order-link a {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #194FAF;
  text-decoration: none;
}
.order-link a:hover {
  text-decoration: underline;
}
.link-copy {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50px;
  background: linear-gradient(0deg, #194FAF 0%, #C658FF 100%);
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 22px;
  position: relative;
  cursor: pointer;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-heading {
  color: #C658FF;
  margin-right: 4px;
  font-weight: 600;
}
.date {
  border-right: 1px solid #BFBED3;
  padding-right: 6px;
  margin-right: 6px;
}

/* Status Badges */
.status-badge {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 4px 10px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-transform: capitalize !important;
}
.status-badge:before {
  content: '';
  background-image: url(../images/smmworld/016ikh8g4i08rs3e.webp);
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}
.status-badge.status-completed {
  background-color: #22AB00 !important;
}
.status-badge.status-completed:before {
  background-position: 0px 0;
}
.status-badge.status-inprogress,
.status-badge.status-in_progress,
.status-badge.status-paused {
  background-color: #FF7A00 !important;
}
.status-badge.status-inprogress:before,
.status-badge.status-in_progress:before,
.status-badge.status-paused:before {
  background-position: -48px 0;
}
.status-badge.status-pending,
.status-badge.status-expired {
  background-color: #194FAF !important;
}
.status-badge.status-pending:before,
.status-badge.status-expired:before {
  background-position: -86px 0;
}
.status-badge.status-processing,
.status-badge.status-active {
  background-color: #24A1DE !important;
}
.status-badge.status-processing:before,
.status-badge.status-active:before {
  background-position: -65px 0;
  width: 21px;
}
.status-badge.status-partial {
  background-color: #3B82FF !important;
}
.status-badge.status-partial:before {
  background-position: -32px 0;
}
.status-badge.status-canceled,
.status-badge.status-cancelled {
  background-color: #FF3737 !important;
}
.status-badge.status-canceled:before,
.status-badge.status-cancelled:before {
  background-position: -16px 0;
}

/* Order Action Button */
.order-actions-btn .btn.btn-xs.btn-primary {
  background: linear-gradient(90deg, #194FAF 0%, #C658FF 100%) !important;
  border: none !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(25, 79, 175, 0.2);
  text-decoration: none;
}
.order-actions-btn .btn.btn-xs.btn-primary:hover {
  opacity: 0.92;
}

/* Copy Tooltips */
.copy-id .tooltip,
.link-copy .tooltip {
  visibility: hidden;
  opacity: 0;
  background: #111;
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 100;
}
.copy-id.show-tooltip .tooltip,
.link-copy.show-tooltip .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Nightmode Dark Theme Overrides */
html[data-theme="dark"] body.nightmode .welcome-heading,
body.nightmode .welcome-heading {
  color: #fff;
}
html[data-theme="dark"] body.nightmode .welcome-box p,
body.nightmode .welcome-box p {
  color: #94a3b8;
}
html[data-theme="dark"] body.nightmode .nav-pills.app-pills > li > a,
body.nightmode .nav-pills.app-pills > li > a {
  background-color: #171825;
  border-color: #2A2A3D;
  color: #fff;
}
html[data-theme="dark"] body.nightmode .nav-pills.app-pills > li:not(.active) > a:hover,
body.nightmode .nav-pills.app-pills > li:not(.active) > a:hover {
  background-color: #222438;
}
html[data-theme="dark"] body.nightmode .search .input-group,
body.nightmode .search .input-group {
  background-color: #171825;
  border-color: #2A2A3D;
}
html[data-theme="dark"] body.nightmode .search .input-group .form-control,
body.nightmode .search .input-group .form-control {
  color: #fff;
}
html[data-theme="dark"] body.nightmode .search .input-group .btn.btn-default,
body.nightmode .search .input-group .btn.btn-default {
  color: #fff;
}
html[data-theme="dark"] body.nightmode .order-wrap,
body.nightmode .order-wrap {
  background-color: #171825;
  border-color: #2A2A3D;
}
html[data-theme="dark"] body.nightmode .order-service,
body.nightmode .order-service {
  color: #fff;
}
html[data-theme="dark"] body.nightmode .order-top,
body.nightmode .order-top {
  border-bottom-color: #2A2A3D;
}
html[data-theme="dark"] body.nightmode .order-link,
html[data-theme="dark"] body.nightmode .order-date,
html[data-theme="dark"] body.nightmode .order-quantity,
html[data-theme="dark"] body.nightmode .order-charge,
html[data-theme="dark"] body.nightmode .order-start-count,
html[data-theme="dark"] body.nightmode .order-remains,
body.nightmode .order-link,
body.nightmode .order-date,
body.nightmode .order-quantity,
body.nightmode .order-charge,
body.nightmode .order-start-count,
body.nightmode .order-remains {
  background-color: #232537;
  color: #fff;
}
html[data-theme="dark"] body.nightmode .order-link a,
body.nightmode .order-link a {
  color: #a5b4fc;
}
html[data-theme="dark"] body.nightmode .date,
body.nightmode .date {
  border-right-color: #3b3d56;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .app-pills.nav-pills li.search {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
  .order-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .order-bottom-right {
    margin-top: 10px;
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   SMMDAZE ADD FUNDS / DEPOSIT HUB STYLES (Phase 28.4)
   ========================================================================== */
.smm-funds-hero {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.smm-funds-hero-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--purple-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(106, 75, 255, 0.28);
}
.smm-funds-hero-balance-box {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 14px;
  padding: 10px 20px;
  text-align: right;
  min-width: 170px;
}
.smm-funds-hero-balance-val {
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--purple-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  letter-spacing: -0.02em;
}

/* Card Container */
.smm-funds-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  margin-bottom: 24px;
}
.smm-funds-card-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--smm-daze-panel-border);
  background: transparent;
}
.smm-funds-card-body {
  padding: 32px 28px;
}
.smm-funds-form-wrap {
  max-width: 600px;
  margin: 0 auto;
}

/* Method Tabs */
.smm-funds-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: none !important;
}
.smm-funds-tab-item {
  margin-bottom: 0;
}
.smm-funds-tab-link {
  border: 1px solid var(--smm-daze-panel-border) !important;
  background: var(--smm-daze-card-bg) !important;
  padding: 11px 20px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--smm-daze-text-dark) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.smm-funds-tab-link:hover {
  border-color: var(--purple-1) !important;
  color: var(--purple-1) !important;
  transform: translateY(-2px);
}
.smm-funds-tab-link.active {
  background: var(--purple-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(106, 75, 255, 0.35) !important;
  transform: translateY(-2px);
}
.smm-funds-tab-link.active i,
.smm-funds-tab-link.active span {
  color: #fff !important;
}

/* Gateway Form Elements */
.smm-funds-icon-pill {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 26px;
  position: relative;
}
.smm-funds-icon-pill.stripe-pill {
  background: rgba(106, 75, 255, 0.12);
  border: 1px solid rgba(106, 75, 255, 0.25);
  color: var(--purple-1);
}
.smm-funds-icon-pill.crypto-pill {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
}
.smm-funds-icon-pill.paypal-pill {
  background: rgba(0, 112, 186, 0.12);
  border: 1px solid rgba(0, 112, 186, 0.25);
}

.smm-funds-bonus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #10b981;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.smm-funds-crypto-badge {
  display: inline-flex;
  align-items: center;
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  color: var(--smm-daze-text-dark);
  font-weight: 600;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 8px;
}

/* Input Row */
.smm-funds-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--smm-daze-panel-border);
  background: var(--smm-daze-card-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.smm-funds-input-group:focus-within {
  border-color: var(--purple-1);
  box-shadow: 0 0 0 3px rgba(106, 75, 255, 0.15);
}
.smm-funds-input-group .smm-funds-prepend {
  background: rgba(106, 75, 255, 0.08);
  color: var(--purple-1);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--smm-daze-panel-border);
}
.smm-funds-input-group input.form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--smm-daze-text-dark);
  height: auto !important;
}

/* Quick Select Chips */
.smm-funds-chip {
  cursor: pointer;
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--smm-daze-text-dark);
  background: var(--smm-daze-card-bg);
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all 0.15s ease;
  user-select: none;
}
.smm-funds-chip:hover {
  border-color: var(--purple-1);
  color: var(--purple-1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(106, 75, 255, 0.15);
}

/* Card Details / Stripe Box */
.smm-funds-stripe-box {
  padding: 16px;
  border-radius: 12px;
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  transition: border-color 0.2s;
}
.smm-funds-stripe-box:focus-within {
  border-color: var(--purple-1);
  box-shadow: 0 0 0 3px rgba(106, 75, 255, 0.15);
}

/* Note Box */
.smm-funds-note-box {
  border: 1px solid var(--smm-daze-panel-border);
  background: var(--smm-daze-card-bg);
  border-radius: 14px;
  padding: 16px 18px;
}

/* Submit Button */
.smm-funds-submit-btn {
  background: var(--purple-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  padding: 14px 24px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
  box-shadow: 0 4px 15px rgba(106, 75, 255, 0.35) !important;
  text-decoration: none !important;
}
.smm-funds-submit-btn:hover {
  transform: translateY(-2px);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(106, 75, 255, 0.45) !important;
}

/* Manual Payment Card */
.smm-funds-manual-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 24px 28px;
  margin-top: 24px;
}
.smm-funds-manual-box {
  background: rgba(18, 25, 39, 0.5);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 14px;
  padding: 20px;
  line-height: 1.7;
  color: var(--smm-daze-text-dark);
}

/* Nightmode Dark Overrides for SMM Funds */
body.nightmode .smm-funds-hero,
html[data-theme="dark"] body.nightmode .smm-funds-hero,
body.nightmode .smm-funds-card,
html[data-theme="dark"] body.nightmode .smm-funds-card,
body.nightmode .smm-funds-manual-card,
html[data-theme="dark"] body.nightmode .smm-funds-manual-card {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-funds-card-header,
html[data-theme="dark"] body.nightmode .smm-funds-card-header {
  border-bottom-color: #2A2A3D !important;
}
body.nightmode .smm-funds-tab-link,
html[data-theme="dark"] body.nightmode .smm-funds-tab-link {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
  color: #fff !important;
}
body.nightmode .smm-funds-tab-link:hover,
html[data-theme="dark"] body.nightmode .smm-funds-tab-link:hover {
  border-color: var(--purple-1) !important;
  color: #fff !important;
  background-color: #222438 !important;
}
body.nightmode .smm-funds-hero-balance-box,
html[data-theme="dark"] body.nightmode .smm-funds-hero-balance-box {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-funds-input-group,
html[data-theme="dark"] body.nightmode .smm-funds-input-group {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-funds-input-group .smm-funds-prepend,
html[data-theme="dark"] body.nightmode .smm-funds-input-group .smm-funds-prepend {
  background-color: #1c1d2e !important;
  border-right-color: #2A2A3D !important;
  color: #a5b4fc !important;
}
body.nightmode .smm-funds-input-group input.form-control,
html[data-theme="dark"] body.nightmode .smm-funds-input-group input.form-control {
  color: #fff !important;
}
body.nightmode .smm-funds-chip,
html[data-theme="dark"] body.nightmode .smm-funds-chip {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
  color: #fff !important;
}
body.nightmode .smm-funds-chip:hover,
html[data-theme="dark"] body.nightmode .smm-funds-chip:hover {
  background-color: #2a2c42 !important;
  border-color: var(--purple-1) !important;
  color: #fff !important;
}
body.nightmode .smm-funds-stripe-box,
html[data-theme="dark"] body.nightmode .smm-funds-stripe-box {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-funds-note-box,
html[data-theme="dark"] body.nightmode .smm-funds-note-box {
  background-color: #1c1d2e !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-funds-crypto-badge,
html[data-theme="dark"] body.nightmode .smm-funds-crypto-badge {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
  color: #e2e8f0 !important;
}
body.nightmode .smm-funds-manual-box,
html[data-theme="dark"] body.nightmode .smm-funds-manual-box {
  background-color: #1c1d2e !important;
  border-color: #2A2A3D !important;
  color: #e2e8f0 !important;
}

/* ==========================================================================
   SMMDAZE SUPPORT TICKETS STYLES (/tickets)
   ========================================================================== */
.smm-tickets-header {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  padding: 22px 26px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .smm-tickets-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.smm-tickets-header .header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.smm-tickets-header .header-brand .icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--purple-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.28);
}
.smm-tickets-header .header-brand h1,
.smm-tickets-header .header-brand h2,
.smm-tickets-header .header-brand h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--smm-daze-text-dark);
}
.smm-tickets-header .header-brand p {
  margin: 3px 0 0 0;
  font-size: 13px;
  color: var(--smm-daze-muted);
}
.smm-tickets-search-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
}
.smm-tickets-search-wrap input {
  width: 100%;
  padding: 10px 46px 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--smm-daze-panel-border);
  background: var(--smm-daze-card-bg);
  color: var(--smm-daze-text-dark);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.smm-tickets-search-wrap input:focus {
  border-color: var(--purple-1);
}
.smm-tickets-search-wrap .btn-search-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--purple-grad);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(106, 75, 255, 0.25);
  transition: transform 0.15s ease;
}
.smm-tickets-search-wrap .btn-search-icon:hover {
  transform: translateY(-50%) scale(1.04);
}

/* SMMDaze Tickets Card */
.smm-ticket-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}
.smm-ticket-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--smm-daze-panel-border);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.smm-ticket-card .card-header .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--smm-daze-text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.smm-ticket-card .card-body {
  padding: 24px;
}

/* SMM Form controls inside ticket form */
.smm-ticket-card .form-control,
.smm-ticket-card select,
.smm-ticket-card textarea {
  border: 1px solid var(--smm-daze-panel-border) !important;
  background: var(--smm-daze-card-bg) !important;
  color: var(--smm-daze-text-dark) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  transition: border-color 0.15s ease;
}
.smm-ticket-card .form-control:focus,
.smm-ticket-card select:focus,
.smm-ticket-card textarea:focus {
  border-color: var(--purple-1) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(106, 75, 255, 0.15) !important;
}
.smm-ticket-card label,
.smm-ticket-card .control-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--smm-daze-text-dark);
  margin-bottom: 6px;
  display: block;
}
.smm-ticket-submit-btn {
  background: var(--purple-grad) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}
.smm-ticket-submit-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(106, 75, 255, 0.4) !important;
}

/* Count Badge */
.smm-ticket-count-badge {
  background: rgba(106, 75, 255, 0.1);
  border: 1px solid rgba(106, 75, 255, 0.25);
  color: var(--purple-1);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}
body.nightmode .smm-ticket-count-badge,
html[data-theme="dark"] body .smm-ticket-count-badge {
  background: rgba(106, 75, 255, 0.2);
  color: #c4b5fd;
  border-color: rgba(106, 75, 255, 0.4);
}

/* Ticket List Item in Child Index */
.smm-ticket-item {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
  position: relative;
}
.smm-ticket-item:hover {
  border-color: var(--purple-1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.08);
}
.smm-ticket-id {
  background: var(--purple-grad);
  color: #fff;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.3px;
}
.smm-ticket-subject {
  font-weight: 600;
  font-size: 14px;
  color: var(--smm-daze-text-dark);
}
.smm-ticket-date {
  font-size: 12px;
  color: var(--smm-daze-muted);
}
.smm-ticket-cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* SMMDaze Status Badges for Tickets */
.smm-badge-answered {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.smm-badge-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.smm-badge-closed {
  background: rgba(100, 116, 139, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.smm-badge-newreply {
  background: var(--purple-grad);
  color: #fff;
  border-radius: 8px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* SMMDaze Ticket View / Discussion Stream */
.smm-ticket-detail-header {
  margin-bottom: 20px;
}
.smm-ticket-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--smm-daze-panel-border);
  background: var(--smm-daze-card-bg);
  color: var(--smm-daze-text-dark);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.smm-ticket-btn-back:hover {
  border-color: var(--purple-1);
  color: var(--purple-1);
}
.smm-ticket-meta-item {
  margin-bottom: 16px;
}
.smm-ticket-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--smm-daze-muted);
  margin-bottom: 4px;
}
.smm-ticket-meta-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--smm-daze-text-dark);
}
.smm-ticket-reply-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}
.smm-ticket-reply-card textarea {
  width: 100%;
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 10px;
  background: var(--smm-daze-card-bg);
  color: var(--smm-daze-text-dark);
  padding: 12px 14px;
  font-size: 13px;
  outline: none;
}
.smm-ticket-reply-card textarea:focus {
  border-color: var(--purple-1);
}
.smm-ticket-msg-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.smm-ticket-msg-list li {
  padding: 16px 20px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid var(--smm-daze-panel-border);
  background: var(--smm-daze-card-bg);
}
.smm-ticket-msg-list li.replies {
  background: rgba(106, 75, 255, 0.05);
  border-color: rgba(106, 75, 255, 0.25);
}
.smm-ticket-msg-list li .msg-content {
  color: var(--smm-daze-text-dark);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Nightmode Dark Overrides for Tickets */
body.nightmode .smm-tickets-header,
html[data-theme="dark"] body.nightmode .smm-tickets-header,
body.nightmode .smm-ticket-card,
html[data-theme="dark"] body.nightmode .smm-ticket-card,
body.nightmode .smm-ticket-item,
html[data-theme="dark"] body.nightmode .smm-ticket-item,
body.nightmode .smm-ticket-reply-card,
html[data-theme="dark"] body.nightmode .smm-ticket-reply-card,
body.nightmode .smm-ticket-msg-list li,
html[data-theme="dark"] body.nightmode .smm-ticket-msg-list li {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-ticket-card .card-header,
html[data-theme="dark"] body.nightmode .smm-ticket-card .card-header {
  border-bottom-color: #2A2A3D !important;
}
body.nightmode .smm-tickets-search-wrap input,
html[data-theme="dark"] body.nightmode .smm-tickets-search-wrap input,
body.nightmode .smm-ticket-card .form-control,
html[data-theme="dark"] body.nightmode .smm-ticket-card .form-control,
body.nightmode .smm-ticket-card select,
html[data-theme="dark"] body.nightmode .smm-ticket-card select,
body.nightmode .smm-ticket-card textarea,
html[data-theme="dark"] body.nightmode .smm-ticket-card textarea,
body.nightmode .smm-ticket-reply-card textarea,
html[data-theme="dark"] body.nightmode .smm-ticket-reply-card textarea {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
  color: #fff !important;
}
body.nightmode .smm-ticket-btn-back,
html[data-theme="dark"] body.nightmode .smm-ticket-btn-back {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
  color: #fff !important;
}
body.nightmode .smm-ticket-msg-list li.replies,
html[data-theme="dark"] body.nightmode .smm-ticket-msg-list li.replies {
  background-color: #1e1b38 !important;
  border-color: rgba(106, 75, 255, 0.4) !important;
}

/* ==========================================================================
   SMMDAZE TRANSACTION LOGS STYLES (/transactions)
   ========================================================================== */
.smm-tx-header {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  padding: 22px 26px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .smm-tx-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.smm-tx-header .header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.smm-tx-header .header-brand .icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--purple-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.28);
}
.smm-tx-header .header-brand h1,
.smm-tx-header .header-brand h2,
.smm-tx-header .header-brand h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--smm-daze-text-dark);
}
.smm-tx-header .header-brand p {
  margin: 3px 0 0 0;
  font-size: 13px;
  color: var(--smm-daze-muted);
}
.smm-tx-btn-add {
  background: var(--purple-grad) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.3) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.smm-tx-btn-add:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(106, 75, 255, 0.4) !important;
}
.smm-tx-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}
.smm-tx-table {
  margin-bottom: 0;
  width: 100%;
}
.smm-tx-table thead th {
  background: rgba(106, 75, 255, 0.04);
  border-bottom: 1px solid var(--smm-daze-panel-border);
  border-top: none;
  color: var(--smm-daze-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 18px;
}
.smm-tx-table tbody td {
  border-top: 1px solid var(--smm-daze-panel-border);
  padding: 16px 18px;
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--smm-daze-text-dark);
}
.smm-tx-table tbody tr:hover {
  background-color: rgba(106, 75, 255, 0.03);
}
.smm-tx-id {
  background: var(--purple-grad);
  color: #fff;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.3px;
}
.smm-tx-amount {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
  display: inline-block;
}

/* Nightmode Dark Overrides for Transactions */
body.nightmode .smm-tx-header,
html[data-theme="dark"] body.nightmode .smm-tx-header,
body.nightmode .smm-tx-card,
html[data-theme="dark"] body.nightmode .smm-tx-card {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-tx-table thead th,
html[data-theme="dark"] body.nightmode .smm-tx-table thead th {
  background-color: #1c1d2e !important;
  border-bottom-color: #2A2A3D !important;
}
body.nightmode .smm-tx-table tbody td,
html[data-theme="dark"] body.nightmode .smm-tx-table tbody td {
  border-top-color: #2A2A3D !important;
}
body.nightmode .smm-tx-table tbody tr:hover,
html[data-theme="dark"] body.nightmode .smm-tx-table tbody tr:hover {
  background-color: #222438 !important;
}

/* ==========================================================================
   SMMDAZE DRIPFEED & SUBSCRIPTIONS STYLES (/dripfeed, /subscriptions)
   ========================================================================== */
.smm-log-header {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  padding: 22px 26px;
  margin-bottom: 24px;
}
.smm-log-header .header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.smm-log-header .header-brand .icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--purple-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.28);
}
.smm-log-header .header-brand h1,
.smm-log-header .header-brand h2,
.smm-log-header .header-brand h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--smm-daze-text-dark);
}
.smm-log-header .header-brand p {
  margin: 3px 0 0 0;
  font-size: 13px;
  color: var(--smm-daze-muted);
}
.smm-log-btn-add {
  background: var(--purple-grad) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.3) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.smm-log-btn-add:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(106, 75, 255, 0.4) !important;
}
.smm-filter-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-daze-text-dark) !important;
  background: transparent;
  border: 1px solid var(--smm-daze-panel-border);
  transition: all 0.2s ease;
  margin-right: 6px;
  margin-bottom: 8px;
  text-decoration: none !important;
}
.smm-filter-pill:hover {
  border-color: var(--purple-1);
  color: var(--purple-1) !important;
}
.smm-filter-pill.active {
  color: #ffffff !important;
  background: var(--purple-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(106, 75, 255, 0.3);
}

.smm-log-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}
.smm-log-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--smm-daze-panel-border);
  padding: 18px 24px;
}
.smm-log-card .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--smm-daze-text-dark);
  margin: 0;
}
.smm-log-table {
  margin-bottom: 0;
  width: 100%;
}
.smm-log-table thead th {
  background: rgba(106, 75, 255, 0.04);
  border-bottom: 1px solid var(--smm-daze-panel-border);
  border-top: none;
  color: var(--smm-daze-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 18px;
}
.smm-log-table tbody td {
  border-top: 1px solid var(--smm-daze-panel-border);
  padding: 16px 18px;
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--smm-daze-text-dark);
}
.smm-log-table tbody tr:hover {
  background-color: rgba(106, 75, 255, 0.03);
}

/* Nightmode Dark Overrides for Dripfeed & Subscriptions */
body.nightmode .smm-log-header,
html[data-theme="dark"] body.nightmode .smm-log-header,
body.nightmode .smm-log-card,
html[data-theme="dark"] body.nightmode .smm-log-card {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-filter-pill,
html[data-theme="dark"] body.nightmode .smm-filter-pill {
  color: #e2e8f0 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-filter-pill.active,
html[data-theme="dark"] body.nightmode .smm-filter-pill.active {
  color: #fff !important;
  border-color: transparent !important;
}
body.nightmode .smm-log-table thead th,
html[data-theme="dark"] body.nightmode .smm-log-table thead th {
  background-color: #1c1d2e !important;
  border-bottom-color: #2A2A3D !important;
}
body.nightmode .smm-log-table tbody td,
html[data-theme="dark"] body.nightmode .smm-log-table tbody td {
  border-top-color: #2A2A3D !important;
}
body.nightmode .smm-log-table tbody tr:hover,
html[data-theme="dark"] body.nightmode .smm-log-table tbody tr:hover {
  background-color: #222438 !important;
}

/* ==========================================================================
   SMMDAZE PROFILE STYLES (/profile)
   ========================================================================== */
.smm-profile-hero {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.smm-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--purple-grad);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.35);
  flex-shrink: 0;
}
.smm-profile-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--smm-daze-text-dark);
  margin: 0;
  letter-spacing: -0.01em;
}
.smm-profile-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.smm-profile-card {
  background: var(--smm-daze-card-bg);
  border: 1px solid var(--smm-daze-panel-border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}
.smm-profile-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--smm-daze-panel-border);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.smm-profile-card .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--smm-daze-text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.smm-profile-card .card-body {
  padding: 24px;
}
.smm-profile-card label,
.smm-profile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--smm-daze-text-dark);
  margin-bottom: 6px;
  display: block;
}
.smm-profile-input {
  border: 1px solid var(--smm-daze-panel-border) !important;
  border-radius: 10px !important;
  background: var(--smm-daze-card-bg) !important;
  color: var(--smm-daze-text-dark) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  transition: border-color 0.15s ease;
}
.smm-profile-input:focus {
  border-color: var(--purple-1) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(106, 75, 255, 0.15) !important;
}
.smm-profile-submit-btn {
  background: var(--purple-grad) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}
.smm-profile-submit-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(106, 75, 255, 0.4) !important;
}
.smm-profile-copy-btn {
  background: var(--purple-grad) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
}

/* Nightmode Dark Overrides for Profile */
body.nightmode .smm-profile-hero,
html[data-theme="dark"] body.nightmode .smm-profile-hero,
body.nightmode .smm-profile-card,
html[data-theme="dark"] body.nightmode .smm-profile-card {
  background-color: #171825 !important;
  border-color: #2A2A3D !important;
}
body.nightmode .smm-profile-card .card-header,
html[data-theme="dark"] body.nightmode .smm-profile-card .card-header {
  border-bottom-color: #2A2A3D !important;
}
body.nightmode .smm-profile-input,
html[data-theme="dark"] body.nightmode .smm-profile-input {
  background-color: #232537 !important;
  border-color: #2A2A3D !important;
  color: #fff !important;
}

/* ==========================================================================
   Phase 30: Notification Bell Dropdown & SMMDaze News Modal
   ========================================================================== */
.notif-bell-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.notif-bell-btn::after {
  display: none !important;
}
.notif-bell-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
  transition: fill 0.2s ease, color 0.2s ease;
}

/* Light mode (Daymode) notification bell contrast */
body.daymode .notif-bell-btn,
body:not(.nightmode) .notif-bell-btn,
html[data-theme="light"] .notif-bell-btn {
  color: #151e3a !important;
}
body.daymode .notif-bell-btn .notif-bell-icon,
body:not(.nightmode) .notif-bell-btn .notif-bell-icon,
html[data-theme="light"] .notif-bell-btn .notif-bell-icon,
body.daymode .notif-bell-btn .notif-bell-icon path,
body:not(.nightmode) .notif-bell-btn .notif-bell-icon path,
html[data-theme="light"] .notif-bell-btn .notif-bell-icon path {
  fill: #151e3a !important;
  color: #151e3a !important;
}
body.daymode .notif-bell-btn:hover .notif-bell-icon,
body:not(.nightmode) .notif-bell-btn:hover .notif-bell-icon,
html[data-theme="light"] .notif-bell-btn:hover .notif-bell-icon {
  fill: #225aea !important;
  color: #225aea !important;
}
body.daymode .notif-bell-btn img,
body:not(.nightmode) .notif-bell-btn img,
html[data-theme="light"] .notif-bell-btn img {
  filter: brightness(0) saturate(100%) invert(9%) sepia(21%) saturate(2321%) hue-rotate(188deg) brightness(96%) contrast(96%) !important;
}

/* Dark mode (Nightmode) notification bell contrast */
body.nightmode .notif-bell-btn,
html[data-theme="dark"] .notif-bell-btn {
  color: #f8fafc !important;
}
body.nightmode .notif-bell-btn .notif-bell-icon,
html[data-theme="dark"] .notif-bell-btn .notif-bell-icon,
body.nightmode .notif-bell-btn .notif-bell-icon path,
html[data-theme="dark"] .notif-bell-btn .notif-bell-icon path {
  fill: #f8fafc !important;
  color: #f8fafc !important;
}
body.nightmode .notif-bell-btn:hover .notif-bell-icon,
html[data-theme="dark"] .notif-bell-btn:hover .notif-bell-icon {
  fill: #60a5fa !important;
  color: #60a5fa !important;
}
body.nightmode .notif-bell-btn img,
html[data-theme="dark"] .notif-bell-btn img {
  filter: none !important;
}

/* ==========================================================================
   Sidebar & Header Logo Contrast (Light and Dark Themes)
   ========================================================================== */
.app-brand-logo-icon,
.app-header-logo-icon {
  display: block;
  transition: color 0.2s ease, fill 0.2s ease;
}
body.daymode .app-brand-logo-icon,
body:not(.nightmode) .app-brand-logo-icon,
html[data-theme="light"] .app-brand-logo-icon,
body.daymode .app-header-logo-icon,
body:not(.nightmode) .app-header-logo-icon,
html[data-theme="light"] .app-header-logo-icon {
  color: #151e3a !important;
  fill: #151e3a !important;
}
body.daymode .app-brand-logo-icon path,
body:not(.nightmode) .app-brand-logo-icon path,
html[data-theme="light"] .app-brand-logo-icon path,
body.daymode .app-header-logo-icon path,
body:not(.nightmode) .app-header-logo-icon path,
html[data-theme="light"] .app-header-logo-icon path {
  fill: #151e3a !important;
}
body.nightmode .app-brand-logo-icon,
html[data-theme="dark"] .app-brand-logo-icon,
body.nightmode .app-header-logo-icon,
html[data-theme="dark"] .app-header-logo-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}
body.nightmode .app-brand-logo-icon path,
html[data-theme="dark"] .app-brand-logo-icon path,
body.nightmode .app-header-logo-icon path,
html[data-theme="dark"] .app-header-logo-icon path {
  fill: #ffffff !important;
}

/* Fallback img filter for any cached or external logo img tags */
body.daymode .app-brand .app-logo-brand img,
body:not(.nightmode) .app-brand .app-logo-brand img,
html[data-theme="light"] .app-brand .app-logo-brand img,
body.daymode .app-header-left .app-logo-brand img,
body:not(.nightmode) .app-header-left .app-logo-brand img,
html[data-theme="light"] .app-header-left .app-logo-brand img {
  filter: brightness(0) saturate(100%) invert(11%) sepia(26%) saturate(2058%) hue-rotate(188deg) brightness(96%) contrast(96%) !important;
}
body.nightmode .app-brand .app-logo-brand img,
html[data-theme="dark"] .app-brand .app-logo-brand img,
body.nightmode .app-header-left .app-logo-brand img,
html[data-theme="dark"] .app-header-left .app-logo-brand img {
  filter: none !important;
}

/* ==========================================================================
   Sidebar Nav Normalization (Identical Item Heights in Light & Dark Mode)
   ========================================================================== */
body.nightmode .vertical-nav-menu,
html[data-theme="dark"] .vertical-nav-menu {
  gap: 8px 0 !important;
}
body.nightmode .vertical-nav-menu > li > a,
html[data-theme="dark"] .vertical-nav-menu > li > a {
  padding: 4px 10px !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
}
body.nightmode .vertical-nav-menu a > .navbar-icon,
html[data-theme="dark"] .vertical-nav-menu a > .navbar-icon {
  width: 30px !important;
  height: 30px !important;
  margin-right: 10px !important;
}
body.nightmode .app-menu-title,
html[data-theme="dark"] .app-menu-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 10px 0 8px 6px !important;
}
.notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  pointer-events: none;
  z-index: 2;
  animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
.notif-dropdown {
  width: 360px !important;
  max-width: 90vw !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden;
  margin-top: 10px !important;
  border: 1px solid #e2e6f3 !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
}
.notif-dropdown-header {
  padding: 12px 18px;
  border-bottom: 1px solid #edf0f7;
  background: #fafbfe;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.notif-dropdown-body {
  max-height: 350px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.notif-item {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid #8b5cf6;
  transition: background 0.2s ease;
  cursor: default;
}
.notif-item:hover {
  background: #f8faff;
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-type-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 6px;
}
.notif-item-text {
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
  margin-top: 4px;
}
.notif-dropdown-footer {
  padding: 10px 18px;
  border-top: 1px solid #edf0f7;
  background: #fafbfe;
}
.notif-view-all-link {
  font-size: 12px;
  font-weight: 600;
  color: #6a4bff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.notif-view-all-link:hover {
  color: #4929db !important;
}

/* Nightmode Dark Overrides for Notification Dropdown */
body.nightmode .notif-dropdown,
html[data-theme="dark"] body.nightmode .notif-dropdown {
  background: #171825 !important;
  border-color: #2a2a3d !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}
body.nightmode .notif-dropdown-header,
html[data-theme="dark"] body.nightmode .notif-dropdown-header {
  background: #1c1d2e !important;
  border-bottom-color: #2a2a3d !important;
  color: #f8fafc !important;
}
body.nightmode .notif-dropdown-footer,
html[data-theme="dark"] body.nightmode .notif-dropdown-footer {
  background: #1c1d2e !important;
  border-top-color: #2a2a3d !important;
}
body.nightmode .notif-item,
html[data-theme="dark"] body.nightmode .notif-item {
  border-bottom-color: #232537 !important;
}
body.nightmode .notif-item:hover,
html[data-theme="dark"] body.nightmode .notif-item:hover {
  background: #1f2133 !important;
}
body.nightmode .notif-item-text,
html[data-theme="dark"] body.nightmode .notif-item-text {
  color: #cbd5e1 !important;
}
body.nightmode .notif-empty-title,
html[data-theme="dark"] body.nightmode .notif-empty-title {
  color: #f1f5f9 !important;
}
body.nightmode .notif-view-all-link,
html[data-theme="dark"] body.nightmode .notif-view-all-link {
  color: #a78bfa !important;
}
body.nightmode .notif-view-all-link:hover,
html[data-theme="dark"] body.nightmode .notif-view-all-link:hover {
  color: #c4b5fd !important;
}

/* SMMDaze News Modal Styling */
.smm-news-modal {
  background: #ffffff;
  border: none;
}
.smm-news-card {
  background: #f8faff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.smm-news-type-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 6px;
}
body.nightmode .smm-news-modal,
html[data-theme="dark"] body.nightmode .smm-news-modal {
  background: #171825 !important;
  color: #f8fafc !important;
  border: 1px solid #2a2a3d !important;
}
body.nightmode .smm-news-modal-body,
html[data-theme="dark"] body.nightmode .smm-news-modal-body {
  background: #171825 !important;
}
body.nightmode .smm-news-card,
html[data-theme="dark"] body.nightmode .smm-news-card {
  background: #1f2133 !important;
  border-color: #2a2a3d !important;
  color: #e2e8f0 !important;
}
body.nightmode .smm-news-content,
html[data-theme="dark"] body.nightmode .smm-news-content {
  color: #cbd5e1 !important;
}
body.nightmode .smm-news-modal-footer,
html[data-theme="dark"] body.nightmode .smm-news-modal-footer {
  background: #171825 !important;
  border-top-color: #2a2a3d !important;
}

/* ==========================================================================
   Phase 31: Dashboard Promotional Banner
   ========================================================================== */
.smm-promo-banner {
  border-radius: 14px;
  padding: 14px 22px;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  animation: smmPromoSlideIn 0.35s ease-out;
}
@keyframes smmPromoSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.smm-promo-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 70%);
  pointer-events: none;
}
.smm-promo-sale {
  background: linear-gradient(90deg, #6a4bff, #9b3bd6) !important;
}
.smm-promo-info {
  background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
}
.smm-promo-warning {
  background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}
.smm-promo-success {
  background: linear-gradient(90deg, #059669, #10b981) !important;
}
.smm-promo-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}
.smm-promo-cta {
  background: #ffffff !important;
  color: #1e1b4b !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.smm-promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
  color: #1e1b4b !important;
}
.smm-promo-close {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 30px;
  height: 30px;
  color: #ffffff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.smm-promo-close:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.08);
}
@media (max-width: 768px) {
  .smm-promo-banner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .smm-promo-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }
}

/* ==========================================================================
   Phase 32: Light Mode (body.daymode) Visual Polish Sweep
   ========================================================================== */

/* 1. Order History Cards (/order) */
body.daymode .order-wrap,
body:not(.nightmode) .order-wrap {
  background-color: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(21, 30, 58, 0.04) !important;
}
body.daymode .order-wrap:hover,
body:not(.nightmode) .order-wrap:hover {
  border-color: #c8d0e5 !important;
  box-shadow: 0 6px 20px rgba(21, 30, 58, 0.08) !important;
}
body.daymode .order-top,
body:not(.nightmode) .order-top {
  border-bottom: 1px solid #edf0f8 !important;
}
body.daymode .order-service,
body:not(.nightmode) .order-service {
  color: #151e3a !important;
}
body.daymode .order-link,
body.daymode .order-date,
body.daymode .order-quantity,
body.daymode .order-charge,
body.daymode .order-start-count,
body.daymode .order-remains,
body:not(.nightmode) .order-link,
body:not(.nightmode) .order-date,
body:not(.nightmode) .order-quantity,
body:not(.nightmode) .order-charge,
body:not(.nightmode) .order-start-count,
body:not(.nightmode) .order-remains {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
}
body.daymode .order-heading,
body:not(.nightmode) .order-heading {
  color: #6a4bff !important;
}
body.daymode .date,
body:not(.nightmode) .date {
  border-right: 1px solid #e2e6f3 !important;
}
body.daymode .order-link a,
body:not(.nightmode) .order-link a {
  color: #225aea !important;
}
body.daymode .order-filter-pill,
body:not(.nightmode) .order-filter-pill {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #525f7f !important;
}
body.daymode .order-filter-pill:hover,
body:not(.nightmode) .order-filter-pill:hover {
  background: #f2f6ff !important;
  color: #225aea !important;
  border-color: #225aea !important;
}
body.daymode .order-filter-pill.active,
body:not(.nightmode) .order-filter-pill.active {
  background: linear-gradient(90deg, #6a4bff, #9b3bd6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(106, 75, 255, 0.3) !important;
}
body.daymode .order-log-header,
body:not(.nightmode) .order-log-header {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 2px 10px rgba(21, 30, 58, 0.04) !important;
}

/* 2. Services Catalog (/services) */
body.daymode .smm-services-header,
body:not(.nightmode) .smm-services-header {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 2px 12px rgba(21, 30, 58, 0.03) !important;
}
body.daymode .smm-cat-card,
body:not(.nightmode) .smm-cat-card {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 2px 12px rgba(21, 30, 58, 0.03) !important;
}
body.daymode .smm-cat-header,
body:not(.nightmode) .smm-cat-header {
  border-bottom: 1px solid #edf0f8 !important;
  background: transparent !important;
}
body.daymode .smm-cat-header h4,
body:not(.nightmode) .smm-cat-header h4 {
  color: #151e3a !important;
}
body.daymode .smm-services-search-input,
body:not(.nightmode) .smm-services-search-input {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
}
body.daymode .smm-services-search-input:focus,
body:not(.nightmode) .smm-services-search-input:focus {
  background: #ffffff !important;
  border-color: #6a4bff !important;
}
body.daymode .smm-category-select,
body:not(.nightmode) .smm-category-select {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
}
body.daymode .smm-fav-filter-btn,
body:not(.nightmode) .smm-fav-filter-btn {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
}
body.daymode .smm-services-table thead th,
body:not(.nightmode) .smm-services-table thead th {
  border-bottom: 1px solid #e2e6f3 !important;
  color: #707ba0 !important;
}
body.daymode .smm-services-table tbody tr,
body:not(.nightmode) .smm-services-table tbody tr {
  border-bottom: 1px solid #f0f2f8 !important;
}
body.daymode .smm-services-table tbody tr:hover,
body:not(.nightmode) .smm-services-table tbody tr:hover {
  background: #f8faff !important;
}
body.daymode .smm-services-table td,
body:not(.nightmode) .smm-services-table td {
  color: #151e3a !important;
}
body.daymode .smm-legend-pill,
body:not(.nightmode) .smm-legend-pill {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #525f7f !important;
}

/* 3. Support Tickets (/tickets) */
body.daymode .tickets-header-card,
body:not(.nightmode) .tickets-header-card {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 2px 12px rgba(21, 30, 58, 0.04) !important;
}
body.daymode .tickets-card,
body:not(.nightmode) .tickets-card {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
}
body.daymode .ticket-item,
body:not(.nightmode) .ticket-item {
  background: #ffffff !important;
  border-bottom: 1px solid #edf0f8 !important;
}
body.daymode .ticket-item:hover,
body:not(.nightmode) .ticket-item:hover {
  background: #f8faff !important;
}
body.daymode .ticket-search-wrap,
body:not(.nightmode) .ticket-search-wrap {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
}
body.daymode .ticket-search-wrap input,
body:not(.nightmode) .ticket-search-wrap input {
  color: #151e3a !important;
}
body.daymode .ticket-chat-card,
body:not(.nightmode) .ticket-chat-card {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
}
body.daymode .ticket-chat-user,
body:not(.nightmode) .ticket-chat-user {
  background: #f0f4ff !important;
  border: 1px solid #dbeafe !important;
  color: #1e293b !important;
}
body.daymode .ticket-chat-staff,
body:not(.nightmode) .ticket-chat-staff {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #1e293b !important;
}

/* 4. Transactions, Dripfeed & Subscriptions */
body.daymode .tx-header-box,
body.daymode .dripfeed-header-box,
body.daymode .subscriptions-header-box,
body:not(.nightmode) .tx-header-box,
body:not(.nightmode) .dripfeed-header-box,
body:not(.nightmode) .subscriptions-header-box {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 2px 12px rgba(21, 30, 58, 0.04) !important;
}
body.daymode .tx-card-wrap,
body.daymode .dripfeed-card-wrap,
body.daymode .subscriptions-card-wrap,
body:not(.nightmode) .tx-card-wrap,
body:not(.nightmode) .dripfeed-card-wrap,
body:not(.nightmode) .subscriptions-card-wrap {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
}
body.daymode .dripfeed-pill,
body.daymode .subscriptions-pill,
body:not(.nightmode) .dripfeed-pill,
body:not(.nightmode) .subscriptions-pill {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #525f7f !important;
}
body.daymode .dripfeed-pill.active,
body.daymode .subscriptions-pill.active,
body:not(.nightmode) .dripfeed-pill.active,
body:not(.nightmode) .subscriptions-pill.active {
  background: linear-gradient(90deg, #6a4bff, #9b3bd6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
body.daymode .dripfeed-search-wrap,
body.daymode .subscriptions-search-wrap,
body:not(.nightmode) .dripfeed-search-wrap,
body:not(.nightmode) .subscriptions-search-wrap {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
}

/* 5. User Profile (/profile) */
body.daymode .smm-profile-hero,
body:not(.nightmode) .smm-profile-hero {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 2px 12px rgba(21, 30, 58, 0.04) !important;
}
body.daymode .smm-profile-card,
body:not(.nightmode) .smm-profile-card {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
}
body.daymode .smm-profile-input,
body:not(.nightmode) .smm-profile-input {
  background: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
}
body.daymode .smm-profile-input:focus,
body:not(.nightmode) .smm-profile-input:focus {
  background: #ffffff !important;
  border-color: #6a4bff !important;
}

/* 6. Empty States */
body.daymode .empty-state-card,
body:not(.nightmode) .empty-state-card {
  background: #ffffff !important;
  border: 1px solid #e2e6f3 !important;
  box-shadow: 0 4px 20px rgba(21, 30, 58, 0.06) !important;
}
body.daymode .empty-state-card h4,
body:not(.nightmode) .empty-state-card h4 {
  color: #151e3a !important;
}
body.daymode .empty-state-card p,
body:not(.nightmode) .empty-state-card p {
  color: #64748b !important;
}
body.daymode .empty-state-card .btn-outline-secondary,
body:not(.nightmode) .empty-state-card .btn-outline-secondary {
  border-color: #d1d5db !important;
  color: #475569 !important;
}
body.daymode .empty-state-card .btn-outline-secondary:hover,
body:not(.nightmode) .empty-state-card .btn-outline-secondary:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

/* 7. Universal Light Form Controls */
body.daymode .form-control,
body:not(.nightmode) .form-control {
  background-color: #f8f9fd !important;
  border: 1px solid #e2e6f3 !important;
  color: #151e3a !important;
}
body.daymode .form-control:focus,
body:not(.nightmode) .form-control:focus {
  background-color: #ffffff !important;
  border-color: #6a4bff !important;
  box-shadow: 0 0 0 3px rgba(106, 75, 255, 0.15) !important;
}
body.daymode select.form-control,
body:not(.nightmode) select.form-control {
  color: #151e3a !important;
}

/* ========================================================
   Phase 33 & 35: UI Glitch Polish, Mobile Optimization & CSV Export
   ======================================================== */

/* 1. Sidebar Profile Card Obsidian Dark Mode */
body.nightmode .app-profile-viewer,
html[data-theme="dark"] body .app-profile-viewer,
body:not(.daymode) .app-profile-viewer {
  background-color: #121927 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  padding: 20px !important;
  transition: all 0.2s ease;
}
body.nightmode .app-profile-viewer:hover,
html[data-theme="dark"] body .app-profile-viewer:hover,
body:not(.daymode) .app-profile-viewer:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  background-color: #172033 !important;
}
body.nightmode .app-username-title,
html[data-theme="dark"] body .app-username-title,
body:not(.daymode) .app-username-title {
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
body.nightmode .app-user-balance,
html[data-theme="dark"] body .app-user-balance,
body:not(.daymode) .app-user-balance {
  color: #94a3b8 !important;
  font-size: 12px !important;
}
body.nightmode .app-user-balance span,
html[data-theme="dark"] body .app-user-balance span,
body:not(.daymode) .app-user-balance span {
  color: #a855f7 !important;
  font-weight: 700 !important;
}

/* 2. Affiliates Hero & Referral Text in Daymode */
body.daymode .affiliate-hero {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.daymode .affiliate-hero h2,
body.daymode .affiliate-hero p {
  color: #ffffff !important;
}
body.daymode .referral-url-text {
  color: #151e3a !important;
}

/* 3. Search Input Padding Fix across Order / Logs */
.search-input-wrap input.form-control,
body.daymode .search-input-wrap input.form-control,
body.nightmode .search-input-wrap input.form-control {
  padding-left: 42px !important;
  padding-right: 36px !important;
}

/* 4. Reorder Button High-Contrast in Daymode */
body.daymode .btn-reorder {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  color: #4338ca !important;
}
body.daymode .btn-reorder:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}

/* 5. Mobile Quantity Quick Buttons Wrapping */
@media (max-width: 576px) {
  .order-quantity-row {
    flex-wrap: wrap !important;
  }
  .order-quantity-row .qty-quick-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .order-default-quantity .d-flex {
    flex-wrap: wrap !important;
  }
  .order-default-quantity .ajaxQuantity {
    width: 100% !important;
    margin-bottom: 6px;
  }
}

/* 6. CSV / Excel Export Pill Button */
.btn-export-csv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8 !important;
  text-decoration: none !important;
}
.btn-export-csv:hover {
  background: linear-gradient(90deg, #6a4bff, #9b3bd6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(106, 75, 255, 0.35);
}
body.daymode .btn-export-csv {
  background: #f0f4ff !important;
  border: 1px solid #d0dcff !important;
  color: #225aea !important;
}
body.daymode .btn-export-csv:hover {
  background: #225aea !important;
  border-color: #225aea !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(34, 90, 234, 0.25);
}

/* 7. Mobile Top Header Actions Responsive Visibility */
@media (max-width: 991.98px) {
  .app-header .app-header-menu .desktop-item.theme-toggle-item,
  .app-header .app-header-menu .desktop-item.notif-bell-item {
    display: inline-flex !important;
  }
}

/* ==========================================================================
   NEW ORDER USABILITY HEURISTICS REMEDIATION RULES
   ========================================================================== */

/* Issue 6: Top Rated Quick Pick Service Button Sizing */
.btn-quick-pick-service {
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--smm-radius-pill) !important;
    background: var(--purple-grad) !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}
.btn-quick-pick-service:hover {
    transform: translateY(-1px) !important;
    opacity: 0.95 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Issue 7: Confirmation Checkbox Touch Target & Typography */
.smm-order-card .custom-checkbox .custom-control-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--smm-daze-text-dark) !important;
    cursor: pointer;
    padding-left: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
}
.smm-order-card .custom-checkbox .custom-control-label::before,
.smm-order-card .custom-checkbox .custom-control-label::after {
    width: 20px !important;
    height: 20px !important;
    top: 1px !important;
    left: 0 !important;
    border-radius: 6px !important;
}
.smm-order-card .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--purple-1) !important;
    border-color: var(--purple-1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* Issue 9: Read-Only Total Charge Summary Box */
.smm-pay-box {
    flex: 1 1 200px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(99, 102, 241, 0.08) !important;
    border: 1px dashed rgba(99, 102, 241, 0.35) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
}
body.daymode .smm-pay-box {
    background: rgba(34, 90, 234, 0.06) !important;
    border: 1px dashed rgba(34, 90, 234, 0.3) !important;
}
.smm-pay-box .coin {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--purple-grad) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.smm-pay-box .charge_number {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--purple-1) !important;
}
body.daymode .smm-pay-box .charge_number {
    color: #225aea !important;
}
.smm-pay-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--smm-daze-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    line-height: 1.1 !important;
}








/* ============================================================
   SMMWORLD SERVICES UI — 2026
   ============================================================ */
.smmworld-services-page {
  --catalog-text: #151525;
  --catalog-muted: #62627b;
  --catalog-row: #f0effc;
  --catalog-pill: #ffffff;
  --catalog-border: #dfdcf7;
  --catalog-gradient: linear-gradient(110deg, #1558bf 0%, #6850db 52%, #bb48ef 100%);
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--catalog-text);
}
body.nightmode .smmworld-services-page,
html[data-theme="dark"] body .smmworld-services-page {
  --catalog-text: #f3f1ff;
  --catalog-muted: #b8b3d0;
  --catalog-row: #241e3c;
  --catalog-pill: #342b50;
  --catalog-border: #463960;
}
.smmworld-services-page #catalogServiceDetails .modal-dialog {
  width: calc(100% - 24px);
  max-width: 680px;
  margin: 24px auto;
  min-height: calc(100% - 48px);
}
.smmworld-services-page #catalogServiceDetails .modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  border: 1px solid var(--catalog-border) !important;
  border-radius: 16px !important;
  background: var(--catalog-pill) !important;
  color: var(--catalog-text) !important;
  overflow: hidden;
}
.smmworld-services-page #catalogServiceDetails .modal-header,
.smmworld-services-page #catalogServiceDetails .modal-footer {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 20px 24px;
  border: 0 !important;
  background: transparent;
}
.smmworld-services-page #catalogServiceDetails .modal-header {
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
}
.smmworld-services-page #catalogServiceDetails .modal-header::before,
.smmworld-services-page #catalogServiceDetails .modal-header::after,
.smmworld-services-page #catalogServiceDetails .modal-footer::before,
.smmworld-services-page #catalogServiceDetails .modal-footer::after {
  display: none;
}
.smmworld-services-page #catalogServiceDetails .modal-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
}
.smmworld-services-page #catalogServiceDetails .modal-footer > * {
  margin: 0;
}
.smmworld-services-page #catalogServiceDetails .modal-body {
  padding: 8px 24px 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-wrap: anywhere;
  color: var(--catalog-text) !important;
}
.smmworld-services-page #catalogServiceDetails .modal-title,
.smmworld-services-page #catalogServiceDetails .catalog-details-name {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--catalog-text) !important;
  overflow-wrap: anywhere;
}
.smmworld-services-page #catalogServiceDetails .modal-title {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-name {
  margin: 0 0 6px;
  font-size: 18px;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-category,
.smmworld-services-page #catalogServiceDetails dt {
  color: var(--catalog-muted);
  font-size: 13px;
  line-height: 1.5;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-category {
  margin: 0 0 16px;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-copy {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-close,
.smmworld-services-page #catalogServiceDetails .catalog-details-secondary {
  border: 1px solid var(--catalog-border);
  border-radius: 7px;
  background: transparent;
  color: var(--catalog-text);
  cursor: pointer;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: var(--catalog-muted);
  font-size: 22px;
  line-height: 1;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-close:hover,
.smmworld-services-page #catalogServiceDetails .catalog-details-secondary:hover {
  background: var(--catalog-row);
}
.smmworld-services-page #catalogServiceDetails .catalog-details-close:focus,
.smmworld-services-page #catalogServiceDetails .catalog-details-secondary:focus {
  outline: 2px solid #8462e7;
  outline-offset: 2px;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-order {
  min-height: 38px;
  padding: 9px 16px !important;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.smmworld-services-page #catalogServiceDetails .catalog-details-metrics > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--catalog-border);
  border-radius: 12px;
  background: var(--catalog-row);
}
.smmworld-services-page #catalogServiceDetails dt {
  font-weight: 500;
}
.smmworld-services-page #catalogServiceDetails dd {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.smmworld-services-page #catalogServiceDetails h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--catalog-text);
}
.smmworld-services-page #catalogServiceDetails .catalog-details-description {
  padding: 14px 16px;
  border: 1px solid var(--catalog-border);
  border-radius: 12px;
  background: var(--catalog-row);
  white-space: pre-wrap;
  line-height: 1.6;
}
@media (max-width: 480px) {
  .smmworld-services-page #catalogServiceDetails .modal-header,
  .smmworld-services-page #catalogServiceDetails .modal-body,
  .smmworld-services-page #catalogServiceDetails .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .smmworld-services-page #catalogServiceDetails .catalog-details-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.smmworld-services-page .smmworld-services-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 184px;
  border-radius: 24px;
  background: var(--catalog-gradient);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  margin: 20px 0 24px;
  text-align: center;
}
.smmworld-services-page .smmworld-services-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#ffffff26 1px, transparent 1px),
    linear-gradient(90deg, #ffffff26 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 38%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 38%);
}
body .smmworld-services-page .smmworld-services-hero h1 {
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 12px;
}
body .smmworld-services-page .smmworld-services-hero p {
  color: #fff !important;
  font-size: 15px;
  line-height: 22px;
  max-width: 650px;
  margin: 0;
}
.smmworld-services-page .smmworld-services-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smmworld-services-page .smmworld-category-filter {
  position: relative;
  flex: 0 0 190px;
  border-radius: 11px;
  background: var(--catalog-gradient);
}
.smmworld-services-page .smmworld-filter-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}
body .smmworld-services-page .smmworld-category-filter .smm-category-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}
.smmworld-services-page .smmworld-category-filter:focus-within {
  outline: 3px solid #8462e7;
  outline-offset: 3px;
}
.smmworld-services-page .smmworld-service-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.smmworld-services-page .smmworld-service-search > .fe {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 21px;
  color: var(--catalog-text);
  pointer-events: none;
}
body .smmworld-services-page .smm-services-search-input {
  height: 50px !important;
  padding: 12px 48px 12px 48px !important;
  background: var(--catalog-row) !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: var(--catalog-text) !important;
  font: inherit;
}
.smmworld-services-page #serviceSearchClear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--catalog-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.smmworld-services-page #serviceSearchClear[hidden],
.smmworld-services-page #serviceSearchEmpty[hidden] {
  display: none !important;
}
.smmworld-services-page #serviceSearchClear:focus-visible {
  outline: 2px solid #8462e7;
}
.smmworld-services-page #serviceSearchEmpty {
  color: var(--catalog-text);
}
body .smmworld-services-page .smm-services-search-input::placeholder {
  color: var(--catalog-muted);
  opacity: 1;
}
body .smmworld-services-page .smm-services-search-input:focus {
  border-color: #8462e7 !important;
}
.smmworld-services-page .smmworld-favorites-toolbar {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}
body .smmworld-services-page .smm-fav-filter-btn {
  background: var(--catalog-pill) !important;
  border: 1px solid var(--catalog-border) !important;
  color: var(--catalog-text) !important;
  padding: 7px 12px;
  height: 50px;
  border-radius: 11px;
}
body .smmworld-services-page .smm-fav-filter-btn.active-fav-filter {
  background: var(--catalog-gradient) !important;
  color: #fff !important;
}
body .smmworld-services-page .smmworld-category {
  margin: 28px 0 0;
  background: transparent;
}
body .smmworld-services-page .smmworld-category-title {
  margin: 0 0 8px;
  font-size: 25px !important;
  line-height: 1.3;
  font-weight: 800;
  color: var(--catalog-text) !important;
}
.smmworld-services-page .smmworld-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body .smmworld-services-page .smm-services-table {
  display: table;
  width: 100%;
  min-width: 1200px;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}
body .smmworld-services-page .smm-services-table .col-favorite { width: 4%; }
body .smmworld-services-page .smm-services-table .col-id { width: 9%; }
body .smmworld-services-page .smm-services-table .col-service { width: 38%; text-align: left !important; }
body .smmworld-services-page .smm-services-table .col-rate { width: 12%; }
body .smmworld-services-page .smm-services-table .col-min { width: 8%; }
body .smmworld-services-page .smm-services-table .col-max { width: 10%; }
body .smmworld-services-page .smm-services-table .col-description { width: 10%; }
body .smmworld-services-page .smm-services-table .col-order { width: 9%; }
body .smmworld-services-page .smm-services-table thead th,
body.daymode .smmworld-services-page .smm-services-table thead th,
body.nightmode .smmworld-services-page .smm-services-table thead th,
html[data-theme] body .smmworld-services-page .smm-services-table thead th {
  background: #000000 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 48px;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 20px;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  vertical-align: middle;
  text-align: center;
}
html body .smmworld-services-page .smm-services-table thead th:first-child {
  border-radius: 11px 0 0 11px !important;
}
html body .smmworld-services-page .smm-services-table thead th:last-child {
  border-radius: 0 11px 11px 0 !important;
}
body .smmworld-services-page .smm-services-table tbody .service-row,
body .smmworld-services-page .smm-services-table tbody .service-row:hover {
  background: transparent !important;
  border: 0 !important;
}
body .smmworld-services-page .smm-services-table tbody td {
  height: 64px;
  padding: 10px 12px !important;
  background: var(--catalog-row) !important;
  color: var(--catalog-text) !important;
  border: 0 !important;
  vertical-align: middle !important;
  text-align: center;
}
body .smmworld-services-page .smm-services-table tbody td.col-favorite {
  padding: 10px 6px !important;
}
.smmworld-services-page .smm-services-table tbody td:first-child {
  border-radius: 10px 0 0 10px;
}
.smmworld-services-page .smm-services-table tbody td:last-child {
  border-radius: 0 10px 10px 0;
}
.smmworld-services-page .smmworld-service-name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.smmworld-services-page .smmworld-service-details {
  margin-top: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--catalog-muted);
  overflow-wrap: anywhere;
}
body .smmworld-services-page .btn-service-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--catalog-pill) !important;
  color: #8b4ce8;
  vertical-align: middle;
}
body .smmworld-services-page .service-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--catalog-gradient) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}
.smmworld-services-page .service-id-copy-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  vertical-align: middle;
}
.smmworld-services-page .service-id-copy-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--catalog-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.smmworld-services-page .service-id-copy-icon:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(132, 98, 231, 0.4);
}
body .smmworld-services-page .smm-rate-pill,
body .smmworld-services-page .smmworld-limit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--catalog-pill) !important;
  color: var(--catalog-text) !important;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.smmworld-services-page .smmworld-service-actions {
  gap: 6px;
}
body .smmworld-services-page .smmworld-service-view .btn,
body .smmworld-services-page .smmworld-service-view a,
body .smmworld-services-page .smm-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: var(--catalog-gradient) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px;
  box-shadow: none !important;
  text-decoration: none;
}
.smmworld-services-page button:focus-visible,
.smmworld-services-page a:focus-visible {
  outline: 3px solid #8462e7;
  outline-offset: 3px;
}
@media (max-width: 767px) {
/* This shared header class is emitted only on the Services route. */
body .app-header.smmworld-services-utility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-height: 64px;
  height: auto;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body:not(.nightmode) .app-header.smmworld-services-utility {
  background: #eaeaf7 !important;
  border-color: #eaeaf7 !important;
}
body .smmworld-services-utility .app-header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}
body .smmworld-services-utility .app-header-left .app-logo-brand {
  display: none !important;
}
body .smmworld-services-utility .app-current-location {
  display: block;
  font-size: 16px !important;
  line-height: 24px;
  font-weight: 400 !important;
  color: #6b6c89 !important;
}
body .smmworld-services-utility .app-current-location span {
  color: #151e3a !important;
  font-weight: 700 !important;
}
body .smmworld-services-utility .app-header-right {
  margin-left: auto;
}
body .smmworld-services-utility .app-header-menu {
  align-items: center;
  flex-wrap: wrap;
}
body.nightmode .app-header.smmworld-services-utility,
html[data-theme="dark"] body .app-header.smmworld-services-utility {
  background: #15102c !important;
  border-color: #2a2446 !important;
}
body.nightmode .smmworld-services-utility .app-current-location,
html[data-theme="dark"] body .smmworld-services-utility .app-current-location {
  color: #b8b3d0 !important;
}
body.nightmode .smmworld-services-utility .app-current-location span,
html[data-theme="dark"] body .smmworld-services-utility .app-current-location span {
  color: #f3f1ff !important;
}
.smmworld-services-page .smmworld-services-hero {
    min-height: 175px;
    padding: 28px 20px;
    margin-top: 12px;
  }
  .smmworld-services-page .smmworld-services-toolbar {
    flex-wrap: wrap;
  }
  .smmworld-services-page .smmworld-category-filter,
  .smmworld-services-page .smmworld-service-search {
    flex: 1 1 100%;
  }
  body .smmworld-services-page .smmworld-category-title {
    font-size: 22px !important;
  }
  .smmworld-services-page .smmworld-category-heading {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ============================================================
   SMMWORLD APP SHELL — 2026 FINAL
   ============================================================ */
body .smmworld-shell-sidebar,
body .smmworld-shell-header {
  --shell-bg: #eae9f7;
  --shell-card: #ffffff;
  --shell-text: #151e3a;
  --shell-muted: #6b6c89;
  --shell-active: #f3efff;
  --shell-accent: #6844d7;
}
body.nightmode .smmworld-shell-sidebar,
body.nightmode .smmworld-shell-header,
html[data-theme="dark"] body .smmworld-shell-sidebar,
html[data-theme="dark"] body .smmworld-shell-header {
  --shell-bg: #19142e;
  --shell-card: #28213f;
  --shell-text: #f3f1ff;
  --shell-muted: #b8b3d0;
  --shell-active: #392b57;
  --shell-accent: #c5a5ff;
}
html body .app-sidebar.smmworld-shell-sidebar {
  background: var(--shell-bg) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  scrollbar-width: thin;
  scrollbar-color: #bcb5da transparent;
}
body .smmworld-shell-sidebar .app-brand-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px !important;
  border: 0 !important;
}
body .smmworld-shell-sidebar .app-hamburger {
  background: var(--shell-card) !important;
  color: var(--shell-text) !important;
  border-radius: 11px !important;
  flex-shrink: 0;
}
body .smmworld-shell-sidebar .app-profile-wrap {
  padding: 16px 18px 20px !important;
}
html body .smmworld-shell-sidebar .app-profile-viewer {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--shell-card) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 14px 25px 14px 12px !important;
  box-shadow: none !important;
}
body .smmworld-shell-sidebar .app-profile-viewer::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--shell-muted);
  border-right: 2px solid var(--shell-muted);
  transform: translateY(-50%) rotate(45deg);
}
body .smmworld-shell-sidebar .app-profile-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  margin-right: 10px;
}
body .smmworld-shell-sidebar .app-profile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body .smmworld-shell-sidebar .app-profile-info {
  min-width: 0;
}
html body .smmworld-shell-sidebar .app-username-title {
  color: var(--shell-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px;
  overflow-wrap: anywhere;
}
html body .smmworld-shell-sidebar .app-user-role,
html body .smmworld-shell-sidebar .app-user-balance {
  color: var(--shell-muted) !important;
  font-size: 12px !important;
  line-height: 18px;
}
html body .smmworld-shell-sidebar .app-user-balance span {
  color: var(--shell-accent) !important;
  font-weight: 700 !important;
}
body .smmworld-shell-sidebar .app-sidebar-menu-wrap {
  padding: 0 18px 24px !important;
}
html body .smmworld-shell-sidebar .app-menu-title {
  margin: 0 0 10px !important;
  color: var(--shell-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body .smmworld-shell-sidebar .vertical-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 11px !important;
}
html body .smmworld-shell-sidebar .vertical-nav-menu > li > a {
  display: flex !important;
  align-items: center !important;
  min-height: 46px;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: var(--shell-card) !important;
  color: var(--shell-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html body .smmworld-shell-sidebar .vertical-nav-menu > li.active > a,
html body .smmworld-shell-sidebar .vertical-nav-menu > li > a:hover {
  background: var(--shell-active) !important;
  color: var(--shell-accent) !important;
  border-color: #ad96ec !important;
}
html body .smmworld-shell-sidebar .vertical-nav-menu > li.active > a {
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 #8054e4;
}
html body .smmworld-shell-sidebar .vertical-nav-menu a > .navbar-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  margin: 0 10px 0 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #bd50f4, #274fbb) !important;
  color: #fff !important;
  font-size: 18px;
  box-shadow: none !important;
}
html body .app-header.smmworld-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 60px;
  height: auto;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--shell-bg) !important;
  box-shadow: none !important;
}
html body .smmworld-shell-header .app-header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}
html body .smmworld-shell-header .app-header-left .app-logo-brand {
  display: none !important;
}
html body .smmworld-shell-header .app-current-location {
  display: block;
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 400 !important;
  color: var(--shell-muted) !important;
}
html body .smmworld-shell-header .app-current-location span {
  color: var(--shell-text) !important;
  font-weight: 700 !important;
}
body .smmworld-shell-header .app-header-right {
  margin-left: auto;
}
body .smmworld-shell-header .app-header-menu {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
html body .smmworld-shell-header .mode-button,
html body .smmworld-shell-header .balance-box,
html body .smmworld-shell-header .mobile-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px !important;
  min-width: 40px;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background-color: var(--shell-card) !important;
}
body .smmworld-shell-sidebar a:focus-visible,
body .smmworld-shell-sidebar button:focus-visible,
body .smmworld-shell-header a:focus-visible,
body .smmworld-shell-header button:focus-visible {
  outline: 2px solid #8054e4;
  outline-offset: 3px;
}
@media (min-width: 992px) {
  /* Keep the existing 290px content inset: 10px + 260px + 20px gap. */
  html body .app-main:not(.active) .smmworld-shell-sidebar {
    width: 260px !important;
    min-width: 260px !important;
    flex: 0 0 260px !important;
    height: calc(100vh - 40px) !important;
    min-height: 0 !important;
    margin: 20px 0 20px 10px;
  }
  html body .app-main.active .smmworld-shell-sidebar {
    width: 70px !important;
    min-width: 70px !important;
    flex: 0 0 70px !important;
    margin: 0;
  }
  html body .app-main.active .smmworld-shell-sidebar .app-brand-wrap {
    padding: 20px 17px !important;
  }
  html body .app-main.active .smmworld-shell-sidebar .app-profile-wrap {
    padding: 12px 6px !important;
  }
  html body .app-main.active .smmworld-shell-sidebar .app-profile-viewer {
    padding: 8px !important;
  }
  html body .app-main.active .smmworld-shell-sidebar .app-profile-viewer::after,
  html body .app-main.active .smmworld-shell-sidebar .app-menu-title {
    display: none;
  }
  html body .app-main.active .smmworld-shell-sidebar .app-profile-icon {
    margin-right: 0;
  }
  html body .app-main.active .smmworld-shell-sidebar .app-sidebar-menu-wrap {
    padding: 0 8px 24px !important;
  }
  html body .app-main.active .smmworld-shell-sidebar .vertical-nav-menu > li > a {
    padding: 6px 0 !important;
    justify-content: center !important;
  }
  html body .app-main.active .smmworld-shell-sidebar .vertical-nav-menu a > .navbar-icon {
    margin: 0 !important;
  }
}

/* Order Logs polish: scoped to the existing header and order cards. */
.order-log-header .order-status-filters {
  min-width: 0;
  gap: 6px;
}
.order-log-header .order-filter-pill {
  margin: 0;
}
.order-log-header .order-search-area {
  flex: 0 0 280px;
  min-width: 0;
  width: 100%;
  max-width: 320px;
}
.order-log-header .order-search-area form,
.order-log-header .order-search-area .form-group {
  margin-bottom: 0;
}
/* Rounded order cards share one responsive layout at every viewport. */
.order-logs-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.order-logs-list .order-logs-card {
  --order-log-card: #f0edfc;
  --order-log-pill: #ffffff;
  --order-log-border: #dfdaf2;
  --order-log-accent: #6340ce;
  min-width: 0;
  padding: 16px;
  background: var(--order-log-card);
  color: var(--smm-text-primary);
  border: 1px solid var(--order-log-border);
  border-radius: 16px;
  box-shadow: none;
}
body.nightmode .order-logs-list .order-logs-card,
html[data-theme="dark"] body .order-logs-list .order-logs-card {
  --order-log-card: #241c43;
  --order-log-pill: #1c153a;
  --order-log-border: #43365f;
  --order-log-accent: #c4b5fd;
}
.order-logs-list .order-logs-top {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.order-logs-list .order-id-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(110deg, #6a4bff, #8b3fd1);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.order-logs-list .order-logs-service {
  flex: 1 1 280px;
  min-width: 0;
}
.order-logs-list .order-service-title {
  color: var(--smm-text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body .order-logs-list .order-service-title .service-badge {
  display: inline-block;
  margin: 0 6px 3px 0;
  padding: 3px 8px;
  border: 0;
  border-radius: 7px;
  background: var(--smm-brand-gradient, linear-gradient(90deg, #6a4bff, #9b3bd6)) !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: baseline;
}
.order-logs-list .order-logs-service-details {
  margin-top: 4px;
  color: var(--smm-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.order-logs-list .order-logs-status {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  padding-top: 3px;
  text-align: right;
}
.order-logs-list .order-logs-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--order-log-border);
}
body .order-logs-list .order-logs-card .order-logs-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  background: var(--order-log-pill) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--order-log-border) !important;
  border-radius: 8px;
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.order-logs-list .order-logs-metric-label {
  color: var(--smm-text-secondary);
  font-size: 12px;
  font-weight: 400;
}
.order-logs-list .order-logs-pill strong,
.order-logs-list .order-created {
  min-width: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body .order-logs-list .order-logs-card .order-charge {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: inherit !important;
  font-size: inherit;
  line-height: inherit;
}
body .order-logs-list .order-logs-card .order-logs-link-wrap {
  flex: 0 1 230px;
  flex-wrap: nowrap;
  padding-top: 2px;
  padding-bottom: 2px;
}
.order-logs-list .order-logs-link-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-logs-list .order-link-anchor,
.order-logs-list .order-link-text {
  color: var(--order-log-accent);
  font-size: 13px;
  font-weight: 500;
}
.order-logs-list .order-link-anchor:hover {
  text-decoration: underline;
}
.order-logs-list .link-copy {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.order-logs-list .order-logs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  margin-left: auto;
}
body .order-logs-list .order-logs-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  max-width: 100%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body .order-logs-list .order-logs-actions .btn-reorder {
  background: linear-gradient(110deg, #4f46e5, #7c3aed) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}
body .order-logs-list .order-logs-actions .btn-reorder:hover {
  background: linear-gradient(110deg, #4338ca, #6d28d9) !important;
}
body .order-logs-list .order-logs-actions .btn:not(.btn-reorder) {
  background: var(--order-log-pill) !important;
  border: 1px solid var(--order-log-border) !important;
  color: var(--order-log-accent) !important;
}
.order-logs-list .link-copy:focus-visible,
.order-logs-list .order-logs-actions .btn:focus-visible {
  outline: 2px solid var(--order-log-accent);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .order-logs-list .order-logs-card {
    padding: 12px;
  }
  .order-logs-list .order-logs-service {
    flex-basis: 100%;
    order: 1;
  }
  .order-logs-list .order-logs-status {
    flex: 1 1 120px;
  }
  body .order-logs-list .order-logs-card .order-logs-link-wrap {
    flex-basis: 100%;
  }
  .order-logs-list .order-logs-actions {
    flex: 1 1 100%;
  }
}
@media (max-width: 991.98px) {
  .order-log-header .order-search-area {
    flex: 0 1 auto;
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .order-log-header {
    padding: 18px 16px;
  }
}
/* ADD FUNDS POLISH — scoped presentation, shared by the existing gateway views. */
.smm-add-funds-page {
  --funds-accent: #6340ce;
  --funds-soft: #f6f3ff;
  --funds-gradient: linear-gradient(110deg, #225aea, #7c3aed);
}
body.nightmode .smm-add-funds-page,
html[data-theme="dark"] body .smm-add-funds-page {
  --funds-accent: #c4b5fd;
  --funds-soft: #241c43;
}
html body .smm-add-funds-page :is(.smm-funds-hero, .smm-funds-well) {
  background: var(--smm-surface-card) !important;
  color: var(--smm-text-primary);
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: var(--smm-shadow-card);
}
.smm-add-funds-page .smm-funds-hero {
  gap: 16px;
}
.smm-add-funds-page .smm-funds-hero h3 {
  color: var(--smm-text-primary) !important;
}
.smm-add-funds-page .smm-funds-hero > div:first-child > .mb-2 {
  margin-bottom: 0 !important;
}
.smm-add-funds-page .smm-funds-balance {
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}
.smm-add-funds-page .smm-funds-balance-card {
  min-width: 170px;
  max-width: 100%;
  padding: 10px 18px;
  background: var(--funds-soft);
  border: 1px solid var(--smm-border-card);
  border-radius: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}
.smm-add-funds-page .smm-funds-well-heading {
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: 0 auto 12px;
  color: var(--smm-text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.smm-add-funds-page .smm-funds-well-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.smm-add-funds-page .smmdaze-funds-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 600px;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
}
.smm-add-funds-page .smmdaze-funds-tabs li {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0 !important;
}
.smm-add-funds-page .smmdaze-funds-tabs li > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 46px;
  padding: 10px 14px !important;
  background: var(--funds-soft) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 10px !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.smm-add-funds-page .smmdaze-funds-tabs li > a:hover {
  border-color: var(--funds-accent) !important;
  color: var(--funds-accent) !important;
}
.smm-add-funds-page .smmdaze-funds-tabs :is(li.active > a, li > a.active) {
  background: var(--funds-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, .18);
}
.smm-add-funds-page .smmdaze-funds-tabs :is(li.active > a, li > a.active) i {
  color: #ffffff !important;
}
.smm-add-funds-page .smm-funds-well > .tab-content,
.smm-add-funds-page .smm-funds-well > .tab-content > .tab-pane {
  margin-top: 0 !important;
  padding: 0 !important;
}
.smm-add-funds-page .smm-gateway-wrap {
  width: 100%;
  max-width: 600px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  color: var(--smm-text-primary);
}
.smm-add-funds-page .smm-gateway-wrap .form-group {
  margin-bottom: 14px;
}
.smm-add-funds-page .smm-gateway-wrap > .text-center {
  margin-bottom: 14px !important;
  padding-top: 0 !important;
}
.smm-add-funds-page .smm-gateway-wrap :is(h2, h3, h4, h5) {
  margin-bottom: 4px;
  color: var(--smm-text-primary);
  line-height: 1.35;
}
.smm-add-funds-page :is(.smm-icon-pill, .smm-funds-icon-pill) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 12px;
  font-size: 24px;
}
.smm-add-funds-page .smm-icon-pill.stripe-pill {
  background: rgba(106, 75, 255, .12);
  border: 1px solid rgba(106, 75, 255, .25);
  color: var(--funds-accent);
}
.smm-add-funds-page .smm-icon-pill.crypto-pill {
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .25);
  color: #10b981;
}
.smm-add-funds-page .smm-icon-pill.paypal-pill {
  background: rgba(0, 112, 186, .12);
  border: 1px solid rgba(0, 112, 186, .25);
}
.smm-add-funds-page .smm-gateway-wrap :is(div, header):not(:has(form)):has(> :is(.smm-icon-pill, .smm-funds-icon-pill)):has(> :is(h2, h3, h4, h5)) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  text-align: left !important;
  margin-bottom: 14px !important;
}
.smm-add-funds-page .smm-gateway-wrap :is(div, header):not(:has(form)):has(> :is(.smm-icon-pill, .smm-funds-icon-pill)):has(> :is(h2, h3, h4, h5)) > * {
  grid-column: 2;
}
.smm-add-funds-page .smm-gateway-wrap :is(div, header):not(:has(form)):has(> :is(h2, h3, h4, h5)) > :is(.smm-icon-pill, .smm-funds-icon-pill) {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-bottom: 0;
}
.smm-add-funds-page .smm-gateway-wrap label:not(.custom-control-label):not(.form-check-label) {
  color: var(--smm-text-primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}
.smm-add-funds-page .smm-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.smm-add-funds-page .smm-amount-symbol {
  position: absolute;
  left: 14px;
  z-index: 5;
  color: var(--funds-accent);
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
}
html body .smm-add-funds-page .smm-amount-input {
  width: 100% !important;
  min-width: 0;
  height: 48px !important;
  padding: 10px 14px 10px 38px !important;
  background: var(--smm-surface-input) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-input) !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html body .smm-add-funds-page .smm-amount-input:focus {
  border-color: var(--funds-accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 75, 255, .12) !important;
}
html body .smm-add-funds-page .smm-funds-input-group {
  width: 100%;
  background: var(--smm-surface-input) !important;
  border-color: var(--smm-border-input) !important;
}
.smm-add-funds-page .smm-funds-input-group .smm-funds-prepend {
  padding: 10px 14px;
}
html body .smm-add-funds-page .smm-funds-input-group input.form-control {
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  color: var(--smm-text-primary) !important;
}
.smm-add-funds-page .smm-gateway-wrap div:has(> .quick-amount-chip):not(:has(input)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  margin-top: 8px;
  margin-bottom: 14px !important;
}
html body .smm-add-funds-page .quick-amount-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 34px;
  margin: 0 !important;
  padding: 6px 12px !important;
  background: var(--smm-surface-input) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 20px;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease;
}
html body .smm-add-funds-page .quick-amount-chip:is(:hover, :active, .active, [aria-pressed="true"]) {
  background: var(--funds-soft) !important;
  color: var(--funds-accent) !important;
  border-color: var(--funds-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}
html body .smm-add-funds-page :is(.smm-note-box, .smm-funds-note-box, .smm-funds-manual-content) {
  background: var(--funds-soft) !important;
  color: var(--smm-text-secondary) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.smm-add-funds-page :is(.smm-note-box, .smm-funds-note-box) :is(strong, b, h5, h6) {
  color: var(--smm-text-primary);
  font-weight: 700;
}
.smm-add-funds-page :is(.smm-note-box, .smm-funds-note-box) ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.smm-add-funds-page :is(.smm-note-box, .smm-funds-note-box) li + li {
  margin-top: 4px;
}
.smm-add-funds-page :is(.smm-note-box, .smm-funds-note-box, .smm-funds-manual-content) > :last-child {
  margin-bottom: 0;
}
.smm-add-funds-page .smm-funds-manual-content {
  margin-bottom: 0;
}
.smm-add-funds-page .smm-gateway-wrap :is(.custom-control, .form-check) {
  min-height: 32px;
  padding-left: 28px;
  margin-bottom: 12px;
}
.smm-add-funds-page .smm-gateway-wrap :is(.custom-control-label, .form-check-label) {
  color: var(--smm-text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6;
  cursor: pointer;
}
.smm-add-funds-page .smm-gateway-wrap .custom-control-label::before,
.smm-add-funds-page .smm-gateway-wrap .custom-control-label::after {
  width: 20px;
  height: 20px;
  left: -28px;
  top: 1px;
}
.smm-add-funds-page .smm-gateway-wrap input[type="checkbox"]:not(.custom-control-input) {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  accent-color: #6a4bff;
}
.smm-add-funds-page .smm-gateway-wrap .form-check-input {
  margin-left: -28px;
  margin-top: 1px;
}
.smm-add-funds-page .smm-gateway-wrap label:has(> input[type="checkbox"]):not(.custom-control-label) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
  cursor: pointer;
}
.smm-add-funds-page .smm-gateway-wrap label > input[type="checkbox"] {
  flex-shrink: 0;
}
html body .smm-add-funds-page :is(.smm-submit-btn, .smm-funds-submit-btn) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  min-height: 46px;
  height: auto !important;
  margin-top: 12px !important;
  padding: 11px 18px !important;
  background: var(--funds-gradient) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 24px;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, .18) !important;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
html body .smm-add-funds-page :is(.smm-submit-btn, .smm-funds-submit-btn):hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(79, 70, 229, .24) !important;
}
.smm-add-funds-page :is(.smm-bonus-pill, .smm-funds-bonus-pill) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 12px;
  margin-bottom: 12px;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: 8px;
  color: #10b981;
  font-size: 13px;
  font-weight: 600;
}
html body .smm-add-funds-page :is(.smm-card-element-box, .smm-funds-stripe-box) {
  background: var(--smm-surface-input) !important;
  border-color: var(--smm-border-input) !important;
}
.smm-add-funds-page :is(.quick-amount-chip, .smm-submit-btn, .smm-funds-submit-btn, .smmdaze-funds-tabs a):focus-visible {
  outline: 2px solid var(--funds-accent);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  html body .smm-add-funds-page :is(.smm-funds-hero, .smm-funds-well) {
    padding: 16px !important;
  }
  .smm-add-funds-page .smm-funds-balance,
  .smm-add-funds-page .smm-funds-balance-card {
    width: 100%;
  }
  .smm-add-funds-page .smm-funds-balance-card {
    text-align: left;
  }
  .smm-add-funds-page .smmdaze-funds-tabs li {
    flex-basis: 120px;
  }
  .smm-add-funds-page .smm-gateway-wrap div:has(> .quick-amount-chip):not(:has(input)) {
    gap: 6px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .smm-add-funds-page :is(.smm-submit-btn, .smm-funds-submit-btn):hover {
    transform: none;
  }
}

/* TRANSACTION LOGS POLISH — scoped to the transaction history view. */
.tx-logs-page {
  --tx-row-bg: #f0edfc;
  --tx-row-border: #dfdaf2;
  --tx-accent: #6340ce;
  --tx-positive: #047857;
}
body.nightmode .tx-logs-page,
html[data-theme="dark"] body .tx-logs-page {
  --tx-row-bg: #241c43;
  --tx-row-border: #43365f;
  --tx-accent: #c4b5fd;
  --tx-positive: #6ee7b7;
}
.tx-logs-page .tx-header-box,
.tx-logs-page .tx-empty-state {
  background: var(--smm-surface-card, #ffffff);
  border: 1px solid var(--smm-border-card, #e2e6f3);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--smm-shadow-card);
}
.tx-logs-page .tx-header-box {
  gap: 12px 20px;
  flex-wrap: wrap;
}
.tx-logs-page .tx-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tx-logs-page .tx-icon-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(110deg, #225aea, #7c3aed);
  color: #ffffff;
  font-size: 18px;
}
.tx-logs-page .tx-title {
  margin: 0;
  color: var(--smm-text-primary, #151e3a);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.tx-logs-page .tx-sub {
  margin: 4px 0 0;
  color: var(--smm-text-secondary, #64748b);
  font-size: 13px;
  line-height: 1.5;
}
.tx-logs-page .tx-header-actions {
  gap: 8px;
}
.tx-logs-page .tx-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  background: linear-gradient(110deg, #225aea, #7c3aed);
  color: #ffffff !important;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none !important;
  transition: background .15s ease;
}
.tx-logs-page .tx-btn-add:hover {
  background: linear-gradient(110deg, #194faf, #6d28d9);
}
.tx-logs-page .tx-btn-add:focus-visible {
  outline: 2px solid var(--tx-accent);
  outline-offset: 3px;
}
.tx-logs-page .tx-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.tx-logs-page .tx-row-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  min-width: 0;
  padding: 16px;
  background: var(--tx-row-bg);
  color: var(--smm-text-primary, #151e3a);
  border: 1px solid var(--tx-row-border);
  border-radius: 16px;
  box-shadow: none;
}
.tx-logs-page .tx-row-heading {
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}
.tx-logs-page .tx-id-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px;
  background: linear-gradient(90deg, #6a4bff, #9b3bd6);
  color: #ffffff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tx-logs-page .tx-method {
  min-width: 0;
}
.tx-logs-page .tx-method-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  color: var(--smm-text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tx-logs-page .tx-metrics {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.tx-logs-page .tx-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  background: var(--smm-surface-card, #ffffff);
  border: 1px solid var(--tx-row-border);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
.tx-logs-page .tx-metric-label {
  display: block;
  color: var(--smm-text-secondary, #64748b);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.tx-logs-page .tx-metric-amount {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .25);
}
.tx-logs-page .tx-amount-pill {
  display: block;
  color: var(--tx-positive);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.tx-logs-page .tx-fee-value,
.tx-logs-page .tx-created-value {
  color: var(--smm-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.tx-logs-page .tx-created-value .fe-clock {
  color: var(--tx-accent);
}
.tx-logs-page .tx-empty-state {
  padding: 32px 24px;
}
.tx-logs-page .tx-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--tx-row-bg);
  color: var(--tx-accent);
  font-size: 28px;
}
.tx-logs-page .tx-empty-state h4 {
  color: var(--smm-text-primary);
}
.tx-logs-page .tx-empty-state p {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  color: var(--smm-text-secondary);
  line-height: 1.6;
}
@media (max-width: 767.98px) {
  .tx-logs-page .tx-header-box,
  .tx-logs-page .tx-row-card {
    padding: 16px;
  }
  .tx-logs-page .tx-header-box .tx-brand {
    margin-bottom: 0 !important;
  }
  .tx-logs-page .tx-row-heading,
  .tx-logs-page .tx-metrics {
    flex: 1 1 100%;
  }
  .tx-logs-page .tx-metric {
    flex: 1 1 120px;
  }
  .tx-logs-page .tx-metric-created {
    flex-basis: 200px;
  }
}

/* TICKETS / SUPPORT DESK POLISH — page and add-ticket modal only. */
:is(.tickets-desk-page, .tickets-desk-modal) {
  --ticket-soft: #f3f0fc;
  --ticket-accent: #6340ce;
  --ticket-gradient: linear-gradient(110deg, #225aea, #7c3aed);
}
body.nightmode :is(.tickets-desk-page, .tickets-desk-modal),
html[data-theme="dark"] body :is(.tickets-desk-page, .tickets-desk-modal) {
  --ticket-soft: #241c43;
  --ticket-accent: #c4b5fd;
}
.tickets-desk-page :is(.tickets-header-card, .ticket-panel-card) {
  background: var(--smm-surface-card, #ffffff);
  border: 1px solid var(--smm-border-card, #e2e6f3);
  border-radius: 16px;
  box-shadow: none;
}
.tickets-desk-page .tickets-header-card {
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.tickets-desk-page .tickets-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tickets-desk-page :is(.tickets-icon-pill, .ticket-panel-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ticket-gradient);
  color: #ffffff;
  border-radius: 10px;
}
.tickets-desk-page .tickets-icon-pill {
  width: 42px;
  height: 42px;
  font-size: 18px;
}
.tickets-desk-page .ticket-panel-icon {
  width: 30px;
  height: 30px;
  font-size: 14px;
}
.tickets-desk-page .tickets-header-title {
  margin: 0;
  color: var(--smm-text-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.tickets-desk-page .tickets-header-sub {
  margin: 4px 0 0;
  color: var(--smm-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
html body .tickets-desk-page .ticket-search-wrap {
  display: flex;
  align-items: center;
  flex: 0 1 320px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  background: var(--smm-surface-input) !important;
  border: 1px solid var(--smm-border-input) !important;
  border-radius: 10px;
}
html body .tickets-desk-page .ticket-search-wrap:focus-within {
  border-color: var(--ticket-accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 75, 255, .12);
}
html body .tickets-desk-page .ticket-search-wrap input {
  width: 100%;
  min-width: 0;
  padding: 8px 6px !important;
  background: transparent !important;
  color: var(--smm-text-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-size: 13px;
}
.tickets-desk-page .ticket-search-wrap button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--ticket-gradient) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px;
  cursor: pointer;
}
.tickets-desk-page .ticket-panel-card {
  overflow: hidden;
}
.tickets-desk-page .ticket-panel-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  background: transparent;
  border-bottom: 1px solid var(--smm-border-card);
}
.tickets-desk-page .ticket-panel-card .card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--smm-text-primary);
  font-size: 16px;
  font-weight: 700;
}
.tickets-desk-page .ticket-panel-card .card-body {
  padding: 18px;
}
:is(.tickets-desk-page .ticket-panel-card, .tickets-desk-modal) :is(label, .control-label) {
  display: block;
  margin-bottom: 7px;
  color: var(--smm-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
html body :is(.tickets-desk-page .ticket-panel-card, .tickets-desk-modal) :is(.form-control, select, textarea) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px !important;
  background: var(--smm-surface-input) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-input) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.5;
}
html body :is(.tickets-desk-page .ticket-panel-card, .tickets-desk-modal) :is(.form-control, select, textarea):focus {
  border-color: var(--ticket-accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 75, 255, .12) !important;
  outline: none;
}
html body :is(.tickets-desk-page .ticket-panel-card, .tickets-desk-modal) textarea {
  min-height: 132px;
  height: auto;
  resize: vertical;
  line-height: 1.6;
}
html body :is(.tickets-desk-page, .tickets-desk-modal) :is(.ticket-btn-submit, .smm-ticket-submit-btn) {
  min-height: 44px;
  padding: 10px 18px !important;
  background: var(--ticket-gradient) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 24px;
  box-shadow: none !important;
  transition: filter .15s ease;
}
html body :is(.tickets-desk-page, .tickets-desk-modal) :is(.ticket-btn-submit, .smm-ticket-submit-btn):hover {
  filter: brightness(1.06);
  transform: none;
}
.tickets-desk-page .ticket-count-pill {
  padding: 5px 10px;
  background: var(--ticket-soft);
  color: var(--ticket-accent);
  border: 1px solid var(--smm-border-card);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.tickets-desk-page .ticket-list-item-card {
  min-width: 0;
  margin-bottom: 12px;
  background: var(--ticket-soft);
  border: 1px solid var(--smm-border-card);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .15s ease;
}
.tickets-desk-page .ticket-list-item-card:last-child {
  margin-bottom: 0;
}
.tickets-desk-page .ticket-list-item-card:hover {
  border-color: var(--ticket-accent);
}
.tickets-desk-page .ticket-row-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  border-radius: inherit;
}
.tickets-desk-page .ticket-row-main {
  display: flex;
  align-items: flex-start;
  flex: 1 1 230px;
  gap: 10px;
  min-width: 0;
}
.tickets-desk-page .ticket-row-main > div {
  flex: 1;
  min-width: 0;
}
.tickets-desk-page .ticket-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
}
.tickets-desk-page .ticket-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
}
.tickets-desk-page :is(.ticket-id-badge, .ticket-new-reply) {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(90deg, #6a4bff, #9b3bd6);
  color: #ffffff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.tickets-desk-page .ticket-new-reply {
  font-size: 11px;
  padding: 2px 7px;
}
.tickets-desk-page .ticket-row-subject {
  color: var(--smm-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tickets-desk-page .ticket-row-date {
  color: var(--smm-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tickets-desk-page .ticket-row-date .fe-clock {
  color: var(--ticket-accent);
}
.tickets-desk-page .ticket-row-end {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.tickets-desk-page .ticket-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.tickets-desk-page .ticket-open-chevron {
  color: var(--smm-text-secondary);
  flex-shrink: 0;
}
.tickets-desk-page .ticket-empty-state {
  padding: 28px 12px;
}
.tickets-desk-page .ticket-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  background: var(--ticket-soft);
  color: var(--ticket-accent);
  border-radius: 14px;
}
html body .tickets-desk-modal .modal-content {
  background: var(--smm-surface-card) !important;
  color: var(--smm-text-primary);
  border-radius: 16px;
  overflow: hidden;
}
.tickets-desk-modal .modal-header {
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--ticket-soft);
  border-bottom: 1px solid var(--smm-border-card);
}
.tickets-desk-modal .modal-title {
  color: var(--smm-text-primary);
  font-size: 18px;
  line-height: 1.4;
}
.tickets-desk-modal .ticket-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: var(--smm-surface-card);
  color: var(--smm-text-primary);
  border: 1px solid var(--smm-border-card);
  border-radius: 8px;
  opacity: 1;
  text-shadow: none;
  font-size: 26px;
  line-height: 1;
}
.tickets-desk-modal .modal-body {
  padding: 20px;
}
.tickets-desk-modal .modal-footer {
  gap: 8px;
  padding: 14px 20px;
  background: transparent;
  border-top: 1px solid var(--smm-border-card);
}
.tickets-desk-modal .ticket-btn-cancel {
  min-height: 44px;
  padding: 10px 16px;
  background: var(--ticket-soft);
  color: var(--smm-text-primary);
  border: 1px solid var(--smm-border-card);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
:is(.tickets-desk-page, .tickets-desk-modal) :is(button, .ticket-row-link):focus-visible {
  outline: 2px solid var(--ticket-accent);
  outline-offset: 2px;
}
@media (max-width: 767.98px) {
  .tickets-desk-page .tickets-header-card {
    padding: 16px;
  }
  .tickets-desk-page .tickets-header-brand {
    margin-bottom: 0 !important;
  }
  html body .tickets-desk-page .ticket-search-wrap {
    flex: 0 1 auto;
  }
  .tickets-desk-page .ticket-panel-card :is(.card-header, .card-body),
  .tickets-desk-modal :is(.modal-header, .modal-body, .modal-footer) {
    padding: 16px;
  }
  .tickets-desk-modal .modal-footer {
    flex-wrap: wrap;
  }
}

/* TICKET PREVIEW / CONVERSATION POLISH — isolated from ticket list and modal. */
.ticket-preview-page {
  --preview-soft: #f7f5fc;
  --preview-staff: #eeebff;
  --preview-accent: #6340ce;
  --preview-border: #dfdaf2;
}
body.nightmode .ticket-preview-page,
html[data-theme="dark"] body .ticket-preview-page {
  --preview-soft: #211b35;
  --preview-staff: #2c2349;
  --preview-accent: #c4b5fd;
  --preview-border: #44365f;
}
html body .ticket-preview-page .smm-ticket-card {
  background: var(--smm-surface-card) !important;
  color: var(--smm-text-primary);
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}
html body .ticket-preview-page .smm-ticket-card .card-header {
  padding: 14px 18px !important;
  background: var(--preview-soft) !important;
  border-bottom: 1px solid var(--smm-border-card) !important;
  gap: 10px;
  flex-wrap: wrap;
}
.ticket-preview-page .smm-ticket-card .card-body {
  padding: 18px;
}
.ticket-preview-page .smm-ticket-card .card-title {
  color: var(--smm-text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ticket-preview-page .card-header .d-flex > div:last-child {
  min-width: 0;
}
.ticket-preview-page .ticket-details-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ticket-preview-page .ticket-preview-id {
  display: inline-flex;
  padding: 5px 8px;
  background: linear-gradient(90deg, #6a4bff, #9b3bd6);
  color: #ffffff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
html body .ticket-preview-page .smm-ticket-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  background: var(--smm-surface-card) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: none;
}
html body .ticket-preview-page .smm-ticket-btn-back:hover {
  border-color: var(--preview-accent) !important;
  color: var(--preview-accent) !important;
}
.ticket-preview-page .smm-ticket-meta-item {
  margin-bottom: 14px;
}
.ticket-preview-page .smm-ticket-meta-label {
  margin-bottom: 4px;
  color: var(--smm-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.ticket-preview-page .smm-ticket-meta-value {
  color: var(--smm-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ticket-preview-page .smm-ticket-meta-value .fe {
  color: var(--preview-accent);
}
.ticket-preview-page :is(.smm-badge-closed, .smm-badge-answered, .smm-badge-pending) {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  line-height: 18px;
}
html body .ticket-preview-page .smm-badge-closed,
.ticket-preview-page .ticket-preview-closed {
  background: var(--preview-soft) !important;
  color: var(--smm-text-secondary) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 10px;
}
.ticket-preview-page .ticket-preview-closed {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}
.ticket-preview-page .ticket-preview-resolve {
  padding: 10px 12px;
  border-radius: 10px;
  white-space: normal;
}
.ticket-preview-page .smm-ticket-card .ticket-preview-help {
  padding: 14px 16px;
}
.ticket-preview-page .ticket-preview-help-icon,
.ticket-preview-page .ticket-preview-stream-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 10px;
}
.ticket-preview-page .ticket-preview-help-icon {
  background: var(--preview-soft);
  color: var(--preview-accent);
}
.ticket-preview-page .ticket-preview-stream-icon {
  background: linear-gradient(110deg, #225aea, #7c3aed);
  color: #ffffff;
}
html body .ticket-preview-page .smm-ticket-reply-card {
  padding: 14px;
  margin-bottom: 18px;
  background: var(--preview-soft) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 12px;
}
.ticket-preview-page .smm-ticket-reply-card form {
  margin-bottom: 0 !important;
}
html body .ticket-preview-page .smm-ticket-reply-card textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 112px;
  padding: 10px 12px !important;
  background: var(--smm-surface-input) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-input) !important;
  border-radius: 10px !important;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
html body .ticket-preview-page .smm-ticket-reply-card textarea:focus {
  outline: none;
  border-color: var(--preview-accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 75, 255, .12) !important;
}
html body .ticket-preview-page .smm-ticket-submit-btn {
  min-height: 42px;
  padding: 10px 16px !important;
  background: linear-gradient(110deg, #225aea, #7c3aed) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700;
  box-shadow: none !important;
}
/* Keep the helper-rendered message content, identity and role markup intact. */
.ticket-preview-page #frame,
.ticket-preview-page #frame > .content,
.ticket-preview-page #frame .messages {
  float: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
.ticket-preview-page #frame .smm-ticket-msg-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body .ticket-preview-page #frame .smm-ticket-msg-list > li {
  display: block;
  float: none;
  clear: both;
  flex: 0 0 auto;
  width: fit-content;
  min-width: 0;
  max-width: 72%;
  margin: 0 auto 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  text-align: left;
  overflow-wrap: anywhere;
}
html body .ticket-preview-page #frame .smm-ticket-msg-list > li.replies {
  margin-left: auto !important;
  margin-right: 0 !important;
}
.ticket-preview-page #frame .smm-ticket-msg-list > li > .d-flex {
  align-items: center !important;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px !important;
}
.ticket-preview-page #frame .smm-ticket-msg-list > li.replies > .d-flex {
  justify-content: flex-end !important;
}
.ticket-preview-page #frame .smm-ticket-msg-list > li > img,
.ticket-preview-page #frame .smm-ticket-msg-list > li > .d-flex :is(img, .avatar) {
  float: none;
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 12px;
}
.ticket-preview-page #frame .smm-ticket-msg-list > li > .d-flex .d-flex {
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.ticket-preview-page #frame .smm-ticket-msg-list > li .badge {
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}
.ticket-preview-page #frame .smm-ticket-msg-list > li > :is(small, time),
.ticket-preview-page #frame .smm-ticket-msg-list > li > .d-flex :is(small, time, .text-muted) {
  color: var(--smm-text-secondary) !important;
  font-size: 11px;
  line-height: 1.5;
}
html body .ticket-preview-page #frame .smm-ticket-msg-list > li .msg-content,
html body .ticket-preview-page #frame .smm-ticket-msg-list > li > p {
  display: block;
  float: none;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin: 6px 0 0 !important;
  padding: 10px 14px !important;
  background: var(--preview-soft) !important;
  color: var(--smm-text-primary) !important;
  border: 1px solid var(--smm-border-card) !important;
  border-radius: 12px !important;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
  box-shadow: none !important;
}
html body .ticket-preview-page #frame .smm-ticket-msg-list > li.replies .msg-content,
html body .ticket-preview-page #frame .smm-ticket-msg-list > li.replies > p {
  margin-left: auto !important;
  background: var(--preview-staff) !important;
  border-color: var(--preview-border) !important;
}
html body .ticket-preview-page #frame .smm-ticket-msg-list .msg-content p {
  float: none;
  max-width: 100%;
  padding: 0;
  background: transparent !important;
  color: inherit !important;
  line-height: inherit;
  overflow-wrap: anywhere;
}
.ticket-preview-page #frame .smm-ticket-msg-list .msg-content > :last-child {
  margin-bottom: 0;
}
.ticket-preview-page :is(.smm-ticket-btn-back, .ticket-preview-resolve, .smm-ticket-submit-btn):focus-visible {
  outline: 2px solid var(--preview-accent);
  outline-offset: 3px;
}
@media (max-width: 991.98px) {
  html body .ticket-preview-page #frame .smm-ticket-msg-list > li {
    max-width: 90%;
  }
}
@media (max-width: 575.98px) {
  html body .ticket-preview-page .smm-ticket-card .card-header,
  .ticket-preview-page .smm-ticket-card .card-body {
    padding: 14px !important;
  }
  .ticket-preview-page .smm-ticket-reply-card {
    padding: 12px;
  }
}

/* STATISTICS DASHBOARD POLISH — presentation only; C3 series retain their colors. */
.statistics-dashboard {
  --dash-soft: #f5f2fd;
  --dash-accent: #6340ce;
  --dash-axis: #8791a9;
  --dash-grid: #d8ddea;
  --dash-positive: #047857;
}
body.nightmode .statistics-dashboard,
html[data-theme="dark"] body .statistics-dashboard {
  --dash-soft: #241c43;
  --dash-accent: #c4b5fd;
  --dash-axis: #8d87a6;
  --dash-grid: #44395c;
  --dash-positive: #6ee7b7;
}
.statistics-dashboard .smm-promo-banner {
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px !important;
  border-radius: 12px;
  box-shadow: none;
}
.statistics-dashboard .smm-promo-banner > div {
  min-width: 0;
  max-width: 100%;
}
.statistics-dashboard .smm-promo-banner > div:first-child {
  margin-right: 0 !important;
}
.statistics-dashboard .smm-promo-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px !important;
  border-radius: 8px;
}
.statistics-dashboard .smm-promo-text {
  overflow-wrap: anywhere;
}
.statistics-dashboard .smm-promo-cta {
  padding: 6px 12px !important;
  white-space: normal;
  box-shadow: none !important;
}
.statistics-dashboard .smm-promo-close {
  position: static;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .12) !important;
}
.statistics-dashboard :is(.dash-hero-card, .dash-stat-card, .dash-chart-card, .dash-bestsellers-card, .dash-onboarding) {
  background: var(--smm-surface-card);
  color: var(--smm-text-primary);
  border: 1px solid var(--smm-border-card);
  border-radius: 16px;
  box-shadow: none;
}
.statistics-dashboard .dash-hero-card {
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  background: linear-gradient(120deg, var(--dash-soft), var(--smm-surface-card));
}
.statistics-dashboard .dash-hero-card > div:first-child {
  min-width: 0;
}
.statistics-dashboard .dash-hero-card > div:first-child > .d-flex {
  flex-wrap: wrap;
  gap: 6px;
}
.statistics-dashboard .dash-hero-actions {
  gap: 8px;
  flex-shrink: 0;
}
.statistics-dashboard .dash-hero-actions .btn {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.statistics-dashboard .dash-hero-actions .btn-primary {
  background: linear-gradient(110deg, #225aea, #7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.statistics-dashboard .dash-hero-actions .btn-secondary {
  background: var(--smm-surface-card) !important;
  color: var(--dash-accent) !important;
  border-color: var(--smm-border-card) !important;
}
.statistics-dashboard .dash-kpi-row {
  margin-bottom: 8px !important;
}
.statistics-dashboard .dash-stat-card {
  height: 100%;
  gap: 12px;
  padding: 18px;
  transition: border-color .15s ease;
}
.statistics-dashboard .dash-stat-card:hover {
  border-color: var(--dash-accent);
}
.statistics-dashboard .dash-stat-card > div {
  min-width: 0;
}
.statistics-dashboard .dash-kpi-label {
  margin-bottom: 6px;
  color: var(--smm-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.statistics-dashboard .dash-kpi-value {
  color: var(--smm-text-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.statistics-dashboard .dash-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: var(--dash-soft);
  color: var(--dash-accent);
  border: 1px solid var(--smm-border-card);
  border-radius: 12px;
  font-size: 20px;
}
.statistics-dashboard :is(.dash-chart-card, .dash-bestsellers-card) {
  overflow: hidden;
}
.statistics-dashboard :is(.dash-chart-card, .dash-bestsellers-card) > .card-header {
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px !important;
  background: transparent;
  border-bottom: 1px solid var(--smm-border-card);
}
.statistics-dashboard .dash-chart-card > .card-body {
  padding: 18px !important;
}
html body .statistics-dashboard :is(.dash-chart-card, .dash-summary-card, .dash-bestsellers-card, .dash-onboarding) .text-white:not(.badge):not(.btn) {
  color: var(--smm-text-primary) !important;
}
.statistics-dashboard .dash-chart-inner {
  height: 100%;
  min-width: 0;
  padding: 14px;
  background: var(--dash-soft);
  border: 1px solid var(--smm-border-card);
  border-radius: 12px;
}
.statistics-dashboard .dash-chart-inner > .d-flex {
  flex-wrap: wrap;
  gap: 4px 8px;
}
.statistics-dashboard .c3 text {
  fill: var(--smm-text-secondary) !important;
  font-family: var(--smm-font-family) !important;
  font-size: 12px !important;
}
.statistics-dashboard .c3 .c3-legend-item text {
  fill: var(--smm-text-primary) !important;
  font-size: 12px !important;
}
.statistics-dashboard .c3 .c3-axis path,
.statistics-dashboard .c3 .c3-axis line {
  stroke: var(--dash-axis) !important;
  stroke-width: 1px;
}
.statistics-dashboard .c3 .c3-grid line {
  stroke: var(--dash-grid) !important;
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}
.statistics-dashboard .c3 .c3-line {
  stroke-width: 2.5px;
}
.statistics-dashboard .c3 .c3-chart-arcs text {
  fill: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.statistics-dashboard .c3-tooltip-container {
  color: var(--smm-text-primary);
}
.statistics-dashboard .c3-tooltip {
  background: var(--smm-surface-card);
  border: 1px solid var(--smm-border-card);
  opacity: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}
.statistics-dashboard .c3-tooltip th {
  background: var(--dash-soft) !important;
  color: var(--smm-text-primary) !important;
  padding: 6px 10px;
}
.statistics-dashboard .c3-tooltip td {
  background: var(--smm-surface-card) !important;
  color: var(--smm-text-primary) !important;
  border-color: var(--smm-border-subtle);
  padding: 5px 10px;
}
.statistics-dashboard .dash-summary-title {
  color: var(--smm-text-primary);
  font-size: 17px;
}
.statistics-dashboard .dash-summary-card {
  padding: 12px 14px;
  background: var(--dash-soft);
}
.statistics-dashboard .dash-summary-card .dash-icon-box {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  background: var(--smm-surface-card);
  border-radius: 10px;
  font-size: 17px;
}
.statistics-dashboard .dash-summary-card small {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.statistics-dashboard .dash-summary-card h4 {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.statistics-dashboard .dash-summary-area > .row > div {
  margin-bottom: 12px !important;
}
.statistics-dashboard .dash-onboarding {
  background: var(--dash-soft);
}
.statistics-dashboard .dash-onboarding-step {
  height: 100%;
  background: var(--smm-surface-card);
  border: 1px solid var(--smm-border-card);
  border-radius: 10px;
}
.statistics-dashboard .dash-onboarding .btn-outline-secondary {
  color: var(--smm-text-primary) !important;
  border-color: var(--smm-border-input) !important;
}
.statistics-dashboard .dash-bestsellers-table {
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
}
html body .statistics-dashboard .dash-bestsellers-table thead th {
  padding: 12px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}
.statistics-dashboard .dash-bestsellers-table thead th:first-child {
  border-radius: 10px 0 0 10px;
}
.statistics-dashboard .dash-bestsellers-table thead th:last-child {
  border-radius: 0 10px 10px 0;
}
html body .statistics-dashboard .dash-bestsellers-table tbody td {
  padding: 14px 12px !important;
  background: var(--smm-surface-card) !important;
  color: var(--smm-text-primary) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--smm-border-subtle) !important;
  vertical-align: middle;
}
html body .statistics-dashboard .dash-bestsellers-table tbody tr:nth-child(even) td,
html body .statistics-dashboard .dash-bestsellers-table tbody tr:hover td {
  background: var(--dash-soft) !important;
}
.statistics-dashboard :is(.dash-service-id, .dash-rate-pill, .dash-range-pill) {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.statistics-dashboard .dash-service-id {
  background: linear-gradient(90deg, #6a4bff, #9b3bd6);
  color: #ffffff;
}
.statistics-dashboard .dash-service-name {
  min-width: 200px;
  color: var(--smm-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.statistics-dashboard .dash-rate-pill {
  background: rgba(16, 185, 129, .1);
  color: var(--dash-positive);
}
.statistics-dashboard .dash-range-pill {
  background: var(--dash-soft);
  border: 1px solid var(--smm-border-card);
  color: var(--smm-text-secondary);
}
html body .statistics-dashboard .dash-bestsellers-table td:last-child :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 12px;
  background: linear-gradient(110deg, #225aea, #7c3aed) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .statistics-dashboard .dash-hero-card {
    flex-wrap: wrap;
  }
}
@media (max-width: 575.98px) {
  .statistics-dashboard .dash-hero-card {
    padding: 18px 16px;
  }
  .statistics-dashboard .dash-stat-card {
    padding: 16px;
  }
  .statistics-dashboard .dash-hero-actions {
    flex-shrink: 1;
  }
  .statistics-dashboard .dash-chart-card > .card-body {
    padding: 12px !important;
  }
  .statistics-dashboard .dash-chart-inner {
    padding: 10px;
  }
  .statistics-dashboard .smm-promo-banner > div:last-child {
    flex-shrink: 1 !important;
  }
}