/* ===== User dashboard: professional stat cards + notice ticker + widgets ===== */

.info-wrapper{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 16px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.info-wrapper .info-card{
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 200px !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(165deg, var(--ar-card-2), var(--ar-card)) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,.3) !important;
}
.info-wrapper .info-card::before,
.info-wrapper .info-card::after{
  display: none !important;
  content: none !important;
}
.info-card__icon{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink)) !important;
  flex-shrink: 0;
}
.info-card__icon i{ color: #fff !important; font-size: 14px; }
.info-card__content{ min-width: 0; }
.info-card__desc{
  font-family: 'Inter', sans-serif !important;
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ar-ink-2) !important;
  margin-bottom: 2px !important;
}
.info-card__title{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ar-ink-0) !important;
  margin: 0 !important;
  white-space: nowrap;
}
.info-wrapper .info-card:first-child{
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(139,92,246,.06)) !important;
  border-color: rgba(251,191,36,.35) !important;
}
.info-wrapper .info-card:first-child .info-card__icon{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  background: linear-gradient(135deg, var(--ar-gold), #f97316) !important;
}
.info-wrapper .info-card:first-child .info-card__title{
  font-size: 18px !important;
  color: var(--ar-gold) !important;
}

@media (max-width: 767px){
  .info-wrapper{ flex-direction: column !important; gap: 12px !important; }
  .info-wrapper .info-card{ padding: 14px 16px !important; flex: 0 1 auto !important; flex-basis: auto !important; flex-direction: row !important; text-align: left !important; gap: 12px !important; }
  .info-wrapper .info-card:first-child .info-card__title{ font-size: 18px !important; }
  .info-card__icon{ width: 36px !important; height: 36px !important; min-width: 36px !important; }
  .info-card__icon i{ font-size: 14px !important; }
  .info-wrapper .info-card:first-child .info-card__icon{ width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .info-card__desc{ font-size: 10px !important; }
  .info-card__title{ font-size: 15px !important; }
}

.live-ticker{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(236,72,153,.08)) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 999px !important;
  padding: 8px 20px 8px 8px !important;
  margin: 20px 0 !important;
  overflow: hidden;
}
.live-ticker__badge{
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink));
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.live-ticker marquee.readonly{
  flex: 1 1 auto !important;
  min-width: 0;
  display: block !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.live-ticker marquee.readonly p{
  color: var(--ar-ink-1) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  margin: 0 !important;
  white-space: nowrap;
}
@media (max-width: 575px){
  .live-ticker__badge{ font-size: 8px !important; padding: 4px 7px !important; letter-spacing: .02em !important; }
  .live-ticker{ padding: 6px 14px 6px 6px !important; gap: 8px !important; }
  .live-ticker marquee.readonly p{ font-size: 13px !important; font-weight: 700 !important; }
}

.popular-games-head{
  display: flex !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  order: -1;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.popular-games-head__title{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ar-ink-0) !important;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.popular-games-head__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ar-purple) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.popular-games-head__link:hover{ color: var(--ar-pink) !important; }
.popular-games-head__link i{ font-size: 11px; }

.dash-widgets__row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.dash-widget-card{
  flex: 1 1 320px;
  background: linear-gradient(165deg, var(--ar-card-2), var(--ar-card));
  border: 1px solid var(--ar-line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.dash-widget-card__head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ar-line);
}
.dash-widget-card__head i{
  color: var(--ar-gold);
  font-size: 15px;
}
.dash-widget-card__head h5{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ar-ink-0) !important;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dash-widget-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-widget-row:last-child{ border-bottom: none; padding-bottom: 0; }
.dash-widget-row__avatar{
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-cyan));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 12px; color: #fff;
}
.dash-widget-row__text{ flex: 1; min-width: 0; }
.dash-widget-row__text b{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ar-ink-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-widget-row__text span{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ar-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-widget-row__amt{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ar-good);
  white-space: nowrap;
}
.dash-widget-row__time{
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--ar-ink-2);
  white-space: nowrap;
}
.dash-widget-empty{
  color: var(--ar-ink-2);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.dash-widget-card--top{
  background: linear-gradient(165deg, rgba(251,191,36,.14), var(--ar-card)) !important;
  border-color: rgba(251,191,36,.35) !important;
}
.dash-widget-card__body--center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 6px;
}
.dash-top-avatar{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ar-gold), #f97316);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 20px; color: #1a1206;
  margin-bottom: 12px;
  box-shadow: 0 0 0 3px rgba(251,191,36,.25);
}
.dash-widget-card__body--center h4{
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ar-ink-0) !important;
  margin: 0 0 4px !important;
}
.dash-top-amt{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--ar-gold);
  margin-bottom: 4px;
}
.dash-widget-card__body--center span{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ar-ink-2);
}

@media (max-width: 991px){
  .dash-widget-card{ flex: 1 1 100%; }
}


/* ===== Sidebar dashboard shell (all user-panel pages) ===== */
.dash-shell__container{ max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.dash-shell__row{ display: flex; gap: 24px; align-items: flex-start; }
.dash-sidebar{
  flex: 0 0 240px;
  position: sticky;
  top: 90px;
  background: linear-gradient(165deg, var(--ar-card-2), var(--ar-card));
  border: 1px solid var(--ar-line);
  border-radius: 18px;
  padding: 18px;
}
.dash-sidebar__nav{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-sidebar__nav li a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,.18);
  color: var(--ar-ink-1);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dash-sidebar__nav li a i{ width: 18px; text-align: center; color: var(--ar-ink-2); font-size: 14px; }
.dash-sidebar__nav li a:hover{ background: rgba(139,92,246,.12); color: var(--ar-ink-0); }
.dash-sidebar__nav li.active a{
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink));
  color: #fff;
}
.dash-sidebar__nav li.active a i{ color: #fff; }

.dash-refer-card{
  margin-top: 20px;
  background: linear-gradient(165deg, rgba(139,92,246,.18), rgba(236,72,153,.1));
  border: 1px solid var(--ar-line);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}
.dash-refer-card__icon{
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ar-gold), #f97316);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #1a1206;
}
.dash-refer-card h5{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ar-ink-0) !important;
  margin: 0 0 6px !important;
}
.dash-refer-card p{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ar-ink-2);
  margin: 0 0 14px;
  line-height: 1.5;
}
.dash-refer-card__btn{
  display: inline-block;
  width: 100%;
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink));
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none !important;
}

.dash-shell__content{ flex: 1; min-width: 0; }

.dash-mobile-nav{
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: linear-gradient(165deg, var(--ar-card-2), var(--ar-card));
  border-top: 1px solid var(--ar-line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.dash-mobile-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ar-ink-2) !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  flex: 1;
}
.dash-mobile-nav__item i{ font-size: 17px; }

@media (max-width: 991px){
  .dash-sidebar{ display: none; }
  .dash-shell__container{ padding: 0 14px; }
}


/* ===== Header additions: bell, deposit button, user chip ===== */
.header-bell{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ar-line);
  color: var(--ar-ink-1) !important;
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.header-bell:hover{ background: rgba(139,92,246,.18); color: var(--ar-ink-0) !important; }

.header-deposit-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink)) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
}
.header-deposit-btn i{ font-size: 13px; }

.header-user-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ar-line);
  color: var(--ar-ink-0) !important;
  text-decoration: none !important;
}
.header-user-chip__avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.header-user-chip__name{ font-size: 13px; font-weight: 600; }
.header-user-chip i{ font-size: 10px; color: var(--ar-ink-2); }

.header-coin-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250, 204, 21, .1);
  border: 1px solid rgba(250, 204, 21, .35);
  color: #facc15 !important;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: background .2s ease;
}
.header-coin-chip:hover{ background: rgba(250, 204, 21, .18); }
.header-coin-chip i{ font-size: 13px; color: #facc15; }



/* Sidebar already provides nav — hide the redundant top nav-menu on desktop for dashboard pages */
@media (min-width: 992px){
  body:has(.dash-sidebar) .navbar-nav.nav-menu{ display: none !important; }
}


/* Mobile-only bell icon next to hamburger */
.header-bell--mobile{
  display: none !important;
  margin-left: auto;
  order: 1;
}
.navbar-toggler.header-button{ order: 2; margin-left: 10px; }
.header-bell--mobile + .collapse{ order: 3; }
@media (max-width: 1199px){
  .header-bell--mobile{ display: flex !important; margin-left: auto !important; }
  .navbar-toggler.header-button{ margin-left: 10px !important; }
}


/* Push header-right (bell/deposit/avatar/logout) to the far right when nav-menu is hidden */
@media (min-width: 992px){
  body:has(.dash-sidebar) .header .navbar{ justify-content: space-between !important; }
  body:has(.dash-sidebar) .header-right{ margin-left: auto !important; }
  body:has(.dash-sidebar) .navbar-collapse{ flex: 0 0 auto !important; width: auto !important; }
}


/* ===== Games grid: unified compact professional icon style — Home Page, Dashboard, Games listing ===== */
.games-section-wrapper{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: flex-start !important;
}
.games-section-wrapper .game-item{
  flex: 0 0 calc(16.6667% - 12px) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.games-section-wrapper .game-item__image{
  position: relative !important;
  display: block !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.games-section-wrapper .game-item__image img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 14px !important;
  display: block !important;
}
.games-section-wrapper .game-item__image::after{
  display: none !important;
  content: none !important;
}
.games-section-wrapper .game-item__title{
  display: none !important;
}

/* Tag badges — small, subtle, top-left; only render when admin actually set one */
.ar-game-tag{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  line-height: 1.4;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.ar-game-tag--hot{ background: linear-gradient(135deg, #f97316, #ef4444); }
.ar-game-tag--featured{ background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink)); }
.ar-game-tag--new{ background: linear-gradient(135deg, #22c55e, #16a34a); }
.ar-game-tag--trending{ background: linear-gradient(135deg, #3b82f6, #6366f1); }
.ar-game-tag--live{ background: linear-gradient(135deg, #ef4444, #dc2626); }

@media (max-width: 767px){
  .games-section-wrapper{ gap: 10px !important; }
  .games-section-wrapper .game-item{ flex: 0 0 calc(33.333% - 7px) !important; }
  .games-section-wrapper .game-item__image{ border-radius: 10px !important; }
  .games-section-wrapper .game-item__image img{ border-radius: 10px !important; }
  .ar-game-tag{ font-size: 7.5px !important; padding: 2px 6px !important; top: 5px !important; left: 5px !important; }
}


/* Dashboard: kill theme's oversized games-section padding (100px/50px, doubled by .games-section-inner) that was creating a huge dead gap above/below Popular Games */
.dash-shell__content .games-section{
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}
.dash-shell__content .live-ticker{
  margin: 0 0 16px !important;
}
.dash-shell__content .info-wrapper{
  margin-bottom: 14px !important;
}
.dash-shell{
  padding-top: 90px !important;
  padding-bottom: 20px !important;
}
.dash-widgets{
  padding-bottom: 24px !important;
}
.dash-widgets .dash-widget-card{
  padding: 16px !important;
}
@media (max-width: 767px){
  .dash-shell__content .games-section-inner{
    padding: 18px !important;
  }
}


/* Footer: shrink oversized decorative banner + logo, tighten padding — was ~610px of mostly dead space */
.footer-area{
  margin-top: 30px !important;
}
.footer-area__thumb{
  z-index: 1 !important;
}
.footer-area__thumb{
  max-width: 560px !important;
  margin: 0 auto !important;
}
.footer-bottom{
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.footer-bottom__logo img{
  width: 130px !important;
  height: auto !important;
}
.socket-area{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
@media (max-width: 767px){
  .footer-area__thumb{
    max-width: 320px !important;
    position: static !important;
    top: auto !important;
    margin: 0 auto 16px !important;
  }
  .footer-bottom__logo img{
    width: 100px !important;
  }
}


/* Widget cards (Recent Winners / Daily Top Win / Weekly Top Winners): equal height on mobile */
@media (max-width: 991px){
  .dash-widgets__row{
    display: flex !important;
    flex-direction: column !important;
  }
  .dash-widget-card{
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .dash-widget-card__body--center{
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* Footer newsletter: was 448-670px wide and 70px tall, way oversized */
.newsletter__wrapper{
  max-width: 340px !important;
  margin-left: auto !important;
}
.newsletter__input .form--control{
  height: 42px !important;
  font-size: 13px !important;
  padding: 0 14px !important;
}
.newsletter__btn{
  height: 42px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
}
@media (max-width: 767px){
  .newsletter__wrapper{
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* Mobile: align Recent Winners / Daily Top Win / Weekly Top Winners flush with Popular Games above (was inset by an extra Bootstrap .container padding) + shrink Popular Games heading */
@media (max-width: 767px){
  .dash-widgets .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .dash-shell__content .popular-games-head__title{
    font-size: 14px !important;
  }
}


/* ===== Mobile menu (hamburger dropdown): stop it growing to near-full-screen, keep it stable ===== */
@media (max-width: 1199px){
  #navbarSupportedContent.navbar-collapse{
    max-height: min(70vh, 460px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #navbarSupportedContent .navbar-nav.nav-menu{
    padding: 6px 0 10px !important;
  }
  #navbarSupportedContent .nav-item > .nav-link{
    padding: 10px 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  /* Submenu items (Deposit Now / Deposit History / Profile Setting / Change Password / 2FA Security etc.) */
  #navbarSupportedContent .sub-menu{
    padding: 2px 0 6px 14px !important;
  }
  #navbarSupportedContent .sub-menu li a{
    display: block !important;
    padding: 7px 4px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ar-ink-2) !important;
    position: relative;
  }
  #navbarSupportedContent .sub-menu li a::before{
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ar-purple);
    margin-right: 8px;
    vertical-align: middle;
    opacity: .7;
  }
}


/* ===== Inner-page banners (Deposit/Withdraw/Watch Ads/Profile/etc.): shared partial, was a huge 1920x445 hero image + big title. Shrink to a compact page-title bar everywhere it's used. ===== */
.breadcrumb{
  padding: 80px 0 16px !important;
  min-height: 0 !important;
}
.breadcrumb__overlay img{
  display: none !important;
}
.breadcrumb__overlay{
  background: var(--ar-bg-1, #0a0714) !important;
  border-bottom: 1px solid var(--ar-line, rgba(255,255,255,.08));
}
.breadcrumb__title{
  font-size: 20px !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}
.breadcrumb__list{
  font-size: 12px !important;
}
.breadcrumb__list li{
  font-size: 12px !important;
}
@media (max-width: 767px){
  .breadcrumb{ padding: 70px 0 14px !important; }
  .breadcrumb__title{ font-size: 17px !important; }
  .breadcrumb__list{ font-size: 11px !important; }
}


/* Mobile footer: push further compact per latest request */
@media (max-width: 767px){
  .footer-area{ margin-top: 18px !important; }
  .footer-area__thumb{ max-width: 200px !important; }
  .footer-bottom{ padding-top: 14px !important; padding-bottom: 14px !important; }
  .footer-bottom__logo{ margin-bottom: 8px !important; }
  .footer-bottom__logo img{ width: 64px !important; }
  .newsletter__input .form--control{ height: 36px !important; font-size: 12px !important; }
  .newsletter__btn{ height: 36px !important; font-size: 12px !important; padding: 0 14px !important; }
  .socket-area{ padding-top: 10px !important; padding-bottom: 10px !important; }
  .socket-area, .socket-area *{ font-size: 11px !important; }
}


/* ===== Mobile menu: kill ugly tap-highlight + nicer open-state + sticky logout ===== */
@media (max-width: 1199px){
  #navbarSupportedContent .nav-link,
  #navbarSupportedContent .sub-menu a{
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none !important;
  }
  #navbarSupportedContent .nav-item.menu_has_children.open > .nav-link{
    background: rgba(139,92,246,.14) !important;
    border-radius: 8px !important;
  }
  #navbarSupportedContent .sub-menu{
    transition: opacity .25s ease !important;
  }
  
}


/* ===== Mobile menu: fix header drifting over content while scrolling with menu open ===== */
@media (max-width: 1199px){
  body.scroll-hide-sm{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  body.scroll-hide-sm .header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
  }
  body.scroll-hide-sm #navbarSupportedContent.navbar-collapse{
    max-height: calc(100dvh - 70px) !important;
  }
}


/* ===== Games sections: single-row horizontal scroll carousel (Popular/Trending/Featured/Live/New) ===== */
.games-section-wrapper.games-row-scroll{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth;
  gap: 12px !important;
  padding-bottom: 10px;
}
.games-section-wrapper.games-row-scroll .game-item{
  flex: 0 0 auto !important;
  width: 110px !important;
}
.games-section-wrapper.games-row-scroll::-webkit-scrollbar{
  height: 5px;
}
.games-section-wrapper.games-row-scroll::-webkit-scrollbar-thumb{
  background: rgba(139,92,246,.5);
  border-radius: 10px;
}
@media (max-width: 767px){
  .games-section-wrapper.games-row-scroll .game-item{
    width: 28% !important;
  }
}
.games-section.pb-50{
  padding-top: 0 !important;
}
.games-section.pb-50 .popular-games-head{
  margin-bottom: 10px !important;
}


/* ===== Games flow: remove heavy boxed containers, make one continuous catalogue ===== */
.dash-shell__content .games-section-inner{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.dash-shell__content .games-section{
  padding: 0 !important;
  margin-bottom: 20px !important;
}
.dash-shell__content .popular-games-head{
  margin-bottom: 8px !important;
}
.dash-shell__content .popular-games-head__title{
  font-size: 15px !important;
}
.games-section-wrapper.games-row-scroll{
  gap: 8px !important;
  padding-bottom: 8px;
}
.games-section-wrapper.games-row-scroll .game-item{
  width: 100px !important;
}
@media (max-width: 767px){
  .games-section-wrapper.games-row-scroll{
    gap: 6px !important;
  }
  .games-section-wrapper.games-row-scroll .game-item{
    width: 22% !important;
  }
  .dash-shell__content .games-section{
    margin-bottom: 14px !important;
  }
  .dash-shell__content .popular-games-head__title{
    font-size: 13px !important;
  }
}


/* ===== Deposit page: premium dark gaming/crypto redesign ===== */
.dash-shell__content:has(.deposit-form)::before,
.dash-shell__content:has(.deposit-form)::after{
  content: '';
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.dash-shell__content:has(.deposit-form)::before{
  background: #8b5cf6;
  top: 100px; right: -100px;
}
.dash-shell__content:has(.deposit-form)::after{
  background: #ec4899;
  bottom: 60px; left: -100px;
}
.deposit-form{ position: relative; z-index: 1; }

.deposit-form .card.custom--card{
  background: linear-gradient(180deg, rgba(139,92,246,.09), rgba(15,11,29,.7)) !important;
  border: 1px solid rgba(139,92,246,.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 28px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
}
.deposit-form .payment-system-list:has(.payment-item){
  padding: 16px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}
.deposit-form .payment-item{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  transition: all .2s ease;
  cursor: pointer;
}
.deposit-form .payment-item:hover{
  border-color: rgba(139,92,246,.45) !important;
}
.deposit-form .payment-item:has(.gateway-input:checked){
  border-color: #8b5cf6 !important;
  background: rgba(139,92,246,.12) !important;
  box-shadow: 0 0 18px rgba(139,92,246,.4) !important;
}
.deposit-form .payment-item__thumb-img{
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}
.deposit-form .payment-item__name{
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: .2px;
}
.deposit-form .payment-item__check{
  border-color: #8b5cf6 !important;
}
.deposit-form .form--control{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(139,92,246,.3) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
.deposit-form .form--control:focus{
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.2) !important;
}
.deposit-form .deposit-info{
  border-top: 1px dashed rgba(255,255,255,.08) !important;
}
.deposit-form .deposit-info__title .text{
  font-size: 13px !important;
  color: var(--ar-ink-2, #9a92b5) !important;
}
.deposit-form .deposit-info__input .text{
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
.deposit-form .final-amount,
.deposit-form .in-currency{
  color: #4ade80 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}
.deposit-form .total-amount{
  border-top: 1px solid rgba(255,255,255,.1) !important;
}
.deposit-form .btn.btn--base{
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  padding: 15px !important;
  font-size: 15px !important;
  letter-spacing: .3px;
  box-shadow: 0 10px 28px rgba(139,92,246,.42) !important;
  transition: filter .2s ease, transform .2s ease;
}
.deposit-form .btn.btn--base:hover{
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.deposit-form .info-text .text{
  font-size: 12px !important;
  color: var(--ar-ink-2, #9a92b5) !important;
}
@media (max-width: 767px){
  .deposit-form .card.custom--card{ border-radius: 14px !important; }
  .deposit-form .payment-item{ padding: 13px 14px !important; }
  .dash-shell__content:has(.deposit-form)::before,
  .dash-shell__content:has(.deposit-form)::after{
    width: 200px; height: 200px;
  }
}


/* ===== Deposit page: real layout rebuild (grid mechanism, not just colors) ===== */

/* Kill the big banner on deposit page, keep only a tiny inline title */
.dash-shell__content:has(.deposit-form) ~ .breadcrumb,
body:has(.deposit-form) .breadcrumb{
  min-height: 0 !important;
  padding: 64px 0 10px !important;
}
body:has(.deposit-form) .breadcrumb__overlay{ display: none !important; }
body:has(.deposit-form) .breadcrumb__title{ font-size: 15px !important; margin-bottom: 2px !important; }
body:has(.deposit-form) .breadcrumb__list{ font-size: 10.5px !important; }

/* Remove excess vertical space around the deposit block */
.dash-shell__content:has(.deposit-form){
  padding-top: 14px !important;
}
.deposit-form{
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 100%;
}
.deposit-form .gateway-card{
  background: transparent;
  margin: 0 !important;
  padding: 0 !important;
}

/* Real 2-column layout via CSS grid, not fragile Bootstrap col-lg-6 (this was the cause of
   the mobile text-wrapping bug: col-lg-6 has no width below the lg breakpoint, so both
   cards were squeezing side-by-side and crushing the text). */
.deposit-form .gateway-card .row.justify-content-center{
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 20px !important;
  margin: 0 !important;
  align-items: start;
}
.deposit-form .gateway-card .row.justify-content-center > [class*="col-"]{
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  padding: 0 !important;
}
@media (max-width: 991px){
  .deposit-form .gateway-card .row.justify-content-center{
    grid-template-columns: 1fr !important;
  }
}

.deposit-form .card.custom--card{
  background: linear-gradient(180deg, rgba(139,92,246,.09), rgba(15,11,29,.7)) !important;
  border: 1px solid rgba(139,92,246,.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 28px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
  height: 100%;
}
.deposit-form .payment-system-list:has(.payment-item){
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}
.deposit-form .payment-item{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  transition: all .2s ease;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  white-space: normal !important;
}
.deposit-form .payment-item__info{
  min-width: 0;
  flex: 1 1 auto;
}
.deposit-form .payment-item__name{
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: .2px;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: block;
}
.deposit-form .payment-item:hover{
  border-color: rgba(139,92,246,.45) !important;
}
.deposit-form .payment-item:has(.gateway-input:checked){
  border-color: #8b5cf6 !important;
  background: rgba(139,92,246,.12) !important;
  box-shadow: 0 0 18px rgba(139,92,246,.4) !important;
}
.deposit-form .payment-item__thumb{
  flex: 0 0 auto;
}
.deposit-form .payment-item__thumb-img{
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  width: 62px !important;
  height: 62px !important;
  object-fit: contain;
}
.deposit-form .payment-item__check{
  border-color: #8b5cf6 !important;
}
.deposit-form .form--control{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(139,92,246,.3) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
.deposit-form .form--control:focus{
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.2) !important;
}
.deposit-form .deposit-info{
  border-top: 1px dashed rgba(255,255,255,.08) !important;
}
.deposit-form .deposit-info__title .text{
  font-size: 13px !important;
  color: var(--ar-ink-2, #9a92b5) !important;
}
.deposit-form .deposit-info__input .text{
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
.deposit-form .final-amount,
.deposit-form .in-currency{
  color: #4ade80 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}
.deposit-form .total-amount{
  border-top: 1px solid rgba(255,255,255,.1) !important;
}
.deposit-form .btn.btn--base{
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  padding: 15px !important;
  font-size: 15px !important;
  letter-spacing: .3px;
  box-shadow: 0 10px 28px rgba(139,92,246,.42) !important;
  transition: filter .2s ease, transform .2s ease;
}
.deposit-form .btn.btn--base:hover{
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.deposit-form .info-text .text{
  font-size: 12px !important;
  color: var(--ar-ink-2, #9a92b5) !important;
}

@media (max-width: 767px){
  .deposit-form{ padding: 0 4px; }
  .deposit-form .card.custom--card{ border-radius: 14px !important; }
  .deposit-form .payment-item{ padding: 13px 14px !important; }
  .deposit-form .payment-item__name{ font-size: 13.5px !important; }
  .dash-shell__content:has(.deposit-form)::before,
  .dash-shell__content:has(.deposit-form)::after{
    width: 180px; height: 180px;
  }
}


/* ===== Deposit page: reference-match refinements (2-col grid, badge, decorative glow) ===== */

/* Title + shield icon, matching reference "Deposit Methods [shield]" */
body:has(.deposit-form) .breadcrumb__title::after{
  content: '\1F6E1';
  display: inline-block;
  margin-left: 8px;
  font-size: 15px;
  vertical-align: middle;
  filter: hue-rotate(220deg) saturate(2);
  opacity: .9;
}

/* Payment methods as a real 2-column grid, matching the reference (both desktop + mobile) */
.deposit-form .payment-system-list:has(.payment-item){
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex-direction: unset !important;
  gap: 12px !important;
  align-items: stretch;
}
.deposit-form .payment-item{
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px;
  min-height: 118px;
  position: relative;
}
.deposit-form .payment-item__thumb{
  order: -1;
}
.deposit-form .payment-item__thumb-img{
  width: 46px !important;
  height: 46px !important;
}
.deposit-form .payment-item__check{
  position: absolute;
  top: 12px;
  right: 12px;
}
.deposit-form .payment-item:has(.gateway-input:checked) .payment-item__check{
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

/* Tighten the gap between the two main panels + reduce empty space */
.deposit-form .gateway-card .row.justify-content-center{
  gap: 16px !important;
}
.deposit-form .card-body.p-0{
  padding: 4px !important;
}

/* Richer decorative background glow (approximating the reference's ambient gaming/crypto glow) */
.dash-shell__content:has(.deposit-form)::before,
.dash-shell__content:has(.deposit-form)::after{
  width: 380px !important; height: 380px !important;
  opacity: .2 !important;
}
.deposit-form .card.custom--card:last-child{
  position: relative;
}
.deposit-form .card.custom--card:last-child::after{
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.25), transparent 70%);
  filter: blur(30px);
  right: -90px;
  bottom: -90px;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 767px){
  .deposit-form .payment-system-list:has(.payment-item){
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .deposit-form .payment-item{
    padding: 12px 10px !important;
    min-height: 100px;
  }
  .deposit-form .payment-item__name{
    font-size: 12.5px !important;
  }
  .deposit-form .payment-item__thumb-img{
    width: 36px !important;
    height: 36px !important;
  }
}


/* ===== Payment method cards: final reference-accurate layout (icon-left, stacked text-right) ===== */
.deposit-form .payment-item{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 18px !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box;
}
.deposit-form .payment-item__thumb{
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.deposit-form .payment-item__thumb-img{
  width: 52px !important;
  height: 52px !important;
  padding: 6px;
}
.deposit-form .payment-item__info{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
.deposit-form .payment-item__name{
  order: 1 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.deposit-form .payment-item__desc{
  order: 2 !important;
  display: block !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--ar-ink-2, #9a92b5) !important;
  font-weight: 400 !important;
}
.deposit-form .payment-item__badge{
  order: 3 !important;
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #c4b5fd !important;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.32);
  padding: 3px 11px;
  border-radius: 20px;
  margin-top: 3px;
}
.deposit-form .payment-item__badge::before{
  content: '\26A1';
  font-size: 9px;
  margin-right: 4px;
}
.deposit-form .payment-item__check{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  order: 0;
}
.deposit-form .payment-item{ position: relative !important; }
.deposit-form .payment-item:has(.gateway-input:checked) .payment-item__check{
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}
.deposit-form .payment-item:has(.gateway-input:checked) .payment-item__check::after{
  content: '\2713';
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
}
.deposit-form .payment-system-list:has(.payment-item){
  align-items: stretch !important;
}

@media (max-width: 767px){
  .deposit-form .payment-item{
    padding: 12px !important;
    gap: 10px !important;
  }
  .deposit-form .payment-item__thumb-img{
    width: 38px !important;
    height: 38px !important;
    padding: 4px;
  }
  .deposit-form .payment-item__name{
    font-size: 12.5px !important;
  }
  .deposit-form .payment-item__desc{
    font-size: 10px !important;
  }
  .deposit-form .payment-item__badge{
    font-size: 9.5px !important;
    padding: 2px 8px;
  }
  .deposit-form .payment-item__check{
    width: 18px !important;
    height: 18px !important;
    top: 10px !important;
    right: 10px !important;
  }
}

.deposit-history-page .transection-table tbody tr td:nth-child(5) > span,
.withdraw-history-page .transection-table tbody tr td:nth-child(5) > span{
  font-size: 0 !important;
  line-height: 0 !important;
}
.deposit-history-page .transection-table tbody tr td:nth-child(5) > span > .badge,
.withdraw-history-page .transection-table tbody tr td:nth-child(5) > span > .badge{
  font-size: 10px !important;
  line-height: normal !important;
  padding: 3px 8px !important;
}
.deposit-history-page .transection-table tbody tr td:nth-child(5) br,
.withdraw-history-page .transection-table tbody tr td:nth-child(5) br{
  display: none !important;
}

body:has(.deposit-history-page) .latest-transection,
body:has(.withdraw-history-page) .latest-transection{
  display: block !important;
}

body:has(.watch-zone-page) .py-100{
  padding-top: 10px !important;
  padding-bottom: 20px !important;
}
body:has(.watch-zone-page) .footer-bottom{
  display: none !important;
}
body:has(.watch-zone-page) .container.py-4.watch-zone-page{
  padding-top: 24px !important;
}

.watch-zone-swal{
  background: #150f24 !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.25) !important;
}
.watch-zone-swal .swal2-title{
  color: #fff !important;
}
.watch-zone-swal .swal2-html-container{
  color: rgba(255,255,255,.75) !important;
}
.watch-zone-swal .swal2-confirm{
  background: linear-gradient(90deg, #8b5cf6, #ec4899) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  padding: 10px 28px !important;
}
.watch-zone-swal .swal2-icon.swal2-success{
  border-color: #22c55e !important;
  color: #22c55e !important;
}
.watch-zone-swal .swal2-icon.swal2-success [class^='swal2-success-line']{
  background-color: #22c55e !important;
}
.watch-zone-swal .swal2-icon.swal2-success .swal2-success-ring{
  border-color: rgba(34,197,94,.3) !important;
}
.watch-zone-swal .swal2-icon.swal2-error{
  border-color: #f43f5e !important;
  color: #f43f5e !important;
}

body:has(.watch-zone-page) .breadcrumb{
  background-image: linear-gradient(90deg, rgba(10, 7, 20, 0.15) 0%, rgba(10, 7, 20, 0.2) 50%, rgba(10, 7, 20, 0.45) 100%), url("https://aptheralive.com/assets/images/frontend/breadcrumb/watch%20add%20.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center 40% !important;
  background-size: cover, cover !important;
}
@media (max-width: 991px){
  body:has(.watch-zone-page) .breadcrumb{
    padding-top: 90px !important;
    padding-bottom: 24px !important;
  }
}

/* ===== Mobile drawer — final consolidated rules ===== */
html{
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
body{
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative !important;
}
@media (max-width: 991px){
  .header .navbar-collapse{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 260px !important;
    max-width: 78vw !important;
    background-color: #150f24 !important;
    background-image: radial-gradient(circle at 100% 0%, rgba(139,92,246,.18), transparent 55%), radial-gradient(circle at 0% 100%, rgba(139,92,246,.12), transparent 50%);
    background-repeat: no-repeat;
    transform: translateX(calc(100% + 24px));
    transition: transform .3s ease;
    z-index: 1050;
    overflow-y: auto;
    padding: 68px 18px 30px !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 14px 0 0 14px;
    box-shadow: -10px 0 40px rgba(0,0,0,.5);
    flex: none !important;
  }
  .header .navbar-collapse.show{
    transform: translateX(0);
  }
  .header{
    height: auto !important;
  }
  .mobile-drawer-close{
    display: flex !important;
  }
  body:has(.navbar-collapse.show) .body-overlay{
    display: block !important;
    opacity: 1 !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(5,3,12,.35) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 1040 !important;
  }
}
#navbarSupportedContent.navbar-collapse{
  max-height: none !important;
}
.header:has(.navbar-collapse.show) .navbar-collapse{
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 78vw !important;
  margin-top: 0 !important;
}
body:has(.dash-sidebar) .navbar-collapse.show{
  flex: 0 0 260px !important;
  width: 260px !important;
}
body:has(.dash-sidebar) .navbar-collapse:not(.show){
  flex: 0 0 0px !important;
  width: 0px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.mobile-drawer-close{
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  transition: background-color .15s, border-color .15s;
}
.mobile-drawer-close:hover{
  background: rgba(139,92,246,.28);
  border-color: rgba(139,92,246,.6);
}
.header .navbar-collapse .sub-menu li a{
  border-radius: 8px !important;
  transition: background-color .15s, border-color .15s;
  border: 1px solid transparent;
}
.header .navbar-collapse .sub-menu li a:hover,
.header .navbar-collapse .sub-menu li a:focus,
.header .navbar-collapse .sub-menu li a.active{
  background: rgba(139,92,246,.12) !important;
  border: 1px solid rgba(139,92,246,.55) !important;
  color: #fff !important;
}
.header .navbar-collapse .login-registration-list__item .btn--gradient{
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgb(200,191,231) !important;
}
.header .navbar-collapse .login-registration-list__item .btn--gradient:hover{
  color: #fff !important;
}
.header .navbar-collapse .login-registration-list__item .btn--gradient::after{
  display: none !important;
}
.header .navbar-collapse .login-registration-list__item .btn--gradient::before{
  content: '\f2f5';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* round: transparent cards, remove excess gap above cards, compact mobile spacing, smaller logos,
   crypto tag styling. All scoped to deposit page. */
body:has(.deposit-form) .card.custom--card{
  background: transparent !important;
  border: 1px solid rgba(139,92,246,.22) !important;
}
body:has(.deposit-form) .payment-item__crypto-tag{
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #8b5cf6;
  margin-top: 2px;
}

/* remove the big gap between banner and cards - was the shell's generic 90px top padding */
body:has(.deposit-form) .dash-shell.py-100{
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}

@media (max-width: 767px){
  body:has(.deposit-form) .breadcrumb{
    height: 130px !important;
  }
  body:has(.deposit-form) .breadcrumb__title{
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }
  body:has(.deposit-form) .dash-shell.py-100{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  body:has(.deposit-form) .gateway-card{
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  body:has(.deposit-form) .card-body.p-0{
    padding: 8px !important;
  }
  body:has(.deposit-form) .payment-system-list.p-3{
    padding: 8px !important;
    gap: 8px !important;
  }
  body:has(.deposit-form) .payment-item{
    padding: 10px !important;
    gap: 10px !important;
  }
  body:has(.deposit-form) .payment-item__thumb{
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
  body:has(.deposit-form) .payment-item__name{
    font-size: 13px !important;
  }
  body:has(.deposit-form) .deposit-info{
    margin-bottom: 6px !important;
  }
  body:has(.deposit-form) .btn.btn--base{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* fix: .payment-system-list.is-scrollable had overflow-x:auto and a tiny (6px) content overflow,
   triggering the theme's styled horizontal scrollbar (a fat pink gradient pill) to render below
   the payment methods - we no longer need horizontal scroll since it's single-column now. */
body:has(.deposit-form) .payment-system-list.is-scrollable{
  overflow-x: hidden !important;
}

/* final override: restore single-column stacked payment method list (matches approved design) */
body:has(.deposit-form) .payment-system-list:has(.payment-item){
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}

@media (min-width: 992px){
  .mobile-drawer-logo{
    display: none !important;
  }
}

.dash-sidebar .menu_has_children .sub-menu{
  position: static !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 20px !important;
  margin-top: 0 !important;
  list-style: none;
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease, margin-top .28s ease, opacity .2s ease;
  opacity: 0;
}
.dash-sidebar .menu_has_children.is-open .sub-menu{
  max-height: 200px;
  margin-top: 4px !important;
  opacity: 1;
}

.dash-sidebar .menu_has_children > a{
  display: flex !important;
  align-items: center;
}
.dash-sidebar .menu_has_children > a::after{
  content: '\f107' !important;
  display: inline-block !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  margin-left: auto !important;
  transition: transform .2s;
  color: var(--ar-ink-2, #9a92b5) !important;
}
.dash-sidebar .menu_has_children.is-open > a::after{
  transform: rotate(180deg);
  color: #8b5cf6;
}
.dash-sidebar .menu_has_children.is-open > a{
  border: 1px solid rgba(139,92,246,.35) !important;
  border-radius: 10px !important;
  background: rgba(139,92,246,.08) !important;
}
.dash-sidebar .sub-menu li a{
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ar-ink-2, #9a92b5);
  border-radius: 8px;
}
.dash-sidebar .sub-menu li a:hover{
  color: #fff;
  background: rgba(139,92,246,.14);
}

/* equalize row spacing: rows without a submenu (Dashboard, Watch & Earn, Logout) render shorter
   than rows with a collapsed submenu, making gaps look uneven - pad them to match. */
.dash-sidebar__nav > li:not(.menu_has_children){
  padding-bottom: 23px;
}

.header{
  top: 0 !important;
}
@media (max-width: 575px){
  .header{
    top: 0 !important;
  }
}

@media (max-width: 991px){
  #navbarSupportedContent .mobile-drawer-logo{
    max-width: 44px !important;
    height: 44px !important;
    width: auto !important;
    display: block !important;
    margin: 0 0 20px 0 !important;
  }
}
#navbarSupportedContent.navbar-collapse{
  max-height: none !important;
}
body.scroll-hide-sm #navbarSupportedContent.navbar-collapse{
  max-height: none !important;
}
#navbarSupportedContent .login-registration-list{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#navbarSupportedContent .login-registration-list__item{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#navbarSupportedContent .nav-menu .menu_has_children .sub-menu{
  position: static !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 20px !important;
  margin-top: 0 !important;
  list-style: none;
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease, margin-top .28s ease, opacity .2s ease;
  opacity: 0;
}
#navbarSupportedContent .nav-menu .menu_has_children.open .sub-menu{
  max-height: 300px;
  margin-top: 4px !important;
  opacity: 1;
}
#navbarSupportedContent .nav-menu .menu_has_children .sub-menu li a{
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ar-ink-2, #9a92b5);
  border-radius: 8px;
}
#navbarSupportedContent .nav-menu .menu_has_children .sub-menu li a:hover{
  color: #fff;
  background: rgba(139,92,246,.14);
}
#navbarSupportedContent .nav-menu > li > a.nav-link{
  display: flex !important;
  align-items: center;
  gap: 10px;
}
#navbarSupportedContent .nav-menu > li > a.nav-link i{
  width: 18px;
  text-align: center;
  color: var(--ar-ink-2, #9a92b5);
  font-size: 14px;
}
#navbarSupportedContent .nav-menu .sub-menu li a{
  font-size: 14.5px !important;
}


/* ===== Mobile drawer: dropdown chevron + logo top-left fix ===== */
#navbarSupportedContent .nav-menu > li.menu_has_children > a.nav-link{
  justify-content: space-between !important;
}
#navbarSupportedContent .nav-menu > li.menu_has_children > a.nav-link::after{
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  content: "\f078" !important;
  font-size: 12px !important;
  color: var(--ar-ink-2, #9a92b5) !important;
  display: inline-block !important;
  transition: transform .2s ease;
  margin-left: 8px !important;
}
#navbarSupportedContent .nav-menu > li.menu_has_children.open > a.nav-link::after{
  transform: rotate(180deg);
  color: #8b5cf6 !important;
}
#navbarSupportedContent .mobile-drawer-logo{
  position: absolute !important;
  top: 14px !important;
  left: 18px !important;
  max-width: 32px !important;
  height: 32px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 6 !important;
}


/* ===== Fix: plain nav items must hug icon+text left, not space-between ===== */
#navbarSupportedContent .nav-menu > li > a.nav-link{
  justify-content: flex-start !important;
  text-align: left !important;
}
#navbarSupportedContent .nav-menu > li.menu_has_children > a.nav-link{
  justify-content: space-between !important;
}


/* ===== Fix: chevron must hug the right edge, icon+text hug left, not spread by space-between ===== */
#navbarSupportedContent .nav-menu > li.menu_has_children > a.nav-link{
  justify-content: flex-start !important;
}
#navbarSupportedContent .nav-menu > li.menu_has_children > a.nav-link::after{
  margin-left: auto !important;
}


/* ===== Sidebar background image (very light, text stays readable) ===== */
.dash-sidebar{
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(15,11,29,.94), rgba(15,11,29,.94)),
    url('http://aptheralive.com/assets/images/frontend/sidebarimage.png') !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}
.header .navbar-collapse{
  background-image:
    linear-gradient(180deg, rgba(21,15,36,.94), rgba(21,15,36,.94)),
    url('http://aptheralive.com/assets/images/frontend/sidebarimage.png') !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}


/* ===== Fix: no highlight color on open dropdown, no purple top line on sub-menu ===== */
#navbarSupportedContent .nav-item.menu_has_children.open > .nav-link{
  background: transparent !important;
}
#navbarSupportedContent .nav-menu .menu_has_children .sub-menu{
  border-top: none !important;
}


/* ===== Fix: desktop sidebar sub-menu links must stay transparent, no gradient fill ===== */
.dash-sidebar .menu_has_children .sub-menu li a{
  background: transparent !important;
  color: var(--ar-ink-2, #9a92b5) !important;
}
.dash-sidebar .menu_has_children .sub-menu li a:hover{
  color: #fff !important;
  background: rgba(139,92,246,.14) !important;
}

/* ===== Fix: no purple left-border accent on selected deposit payment method ===== */
.payment-item.gateway-option{
  border-left: 3px solid transparent !important;
}
.payment-item__check{
  border-left: 1px solid transparent !important;
}


/* ===== Fix: no purple top border line on desktop sidebar sub-menu ===== */
.dash-sidebar .menu_has_children .sub-menu{
  border-top: none !important;
}


/* ===== Desktop sidebar: stay fixed in place while scrolling ===== */
@media (min-width: 992px){
  .dash-shell__row{
    align-items: flex-start !important;
  }
  .dash-sidebar{
    position: sticky !important;
    top: 76px !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    align-self: flex-start !important;
  }
}


/* ===== Fix: body's overflow-x:hidden was promoting it to a scroll container, breaking position:sticky on desktop sidebar. Restore normal viewport scrolling at desktop widths. ===== */
@media (min-width: 992px){
  body{
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}


/* ===== 2FA Security page: compact layout, reuse deposit breadcrumb banner ===== */
body:has(form[action*="twofactor"]) .breadcrumb{
  background-image: linear-gradient(rgba(8,6,15,.75), rgba(15,11,29,.85)), url('https://aptheralive.com/assets/images/frontend/breadcrumb/deposite%20banner%20.png') !important;
  padding-top: 40px !important;
  padding-bottom: 16px !important;
  height: auto !important;
}
body:has(form[action*="twofactor"]) .card.custom--card .card-body{
  padding: 16px !important;
}
body:has(form[action*="twofactor"]) .card-body img.mx-auto{
  width: 150px !important;
  height: 150px !important;
}
body:has(form[action*="twofactor"]) .card-header{
  padding: 12px 16px !important;
}
body:has(form[action*="twofactor"]) .card-body h5,
body:has(form[action*="twofactor"]) .card-body p{
  margin-bottom: 8px !important;
}
body:has(form[action*="twofactor"]) .card-body .form-control.amount,
body:has(form[action*="twofactor"]) .card-body input[type="text"]{
  border-radius: 10px !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  background: rgba(255,255,255,.03) !important;
}
body:has(form[action*="twofactor"]) .card-body .btn--gradient,
body:has(form[action*="twofactor"]) .card-body button[type="submit"]{
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}
@media (max-width: 767px){
  body:has(form[action*="twofactor"]) .breadcrumb{
    padding-top: 26px !important;
    padding-bottom: 10px !important;
  }
  body:has(form[action*="twofactor"]) .card-body img.mx-auto{
    width: 130px !important;
    height: 130px !important;
  }
}

/* ===== Footer: remove logo thumb and newsletter/email subscribe section ===== */
/* footer-area__thumb (Joker banner) and newsletter section restored per user correction */


/* ===== Fix: 2FA breadcrumb title was hidden behind fixed header; hide the remaining footer logo too ===== */
body:has(form[action*="twofactor"]) .breadcrumb{
  padding-top: 76px !important;
  padding-bottom: 16px !important;
}
@media (max-width: 767px){
  body:has(form[action*="twofactor"]) .breadcrumb{
    padding-top: 66px !important;
    padding-bottom: 10px !important;
  }
}
.footer-bottom__logo{
  display: none !important;
}


/* ===== 2FA page: reduce oversized top gap, fix heading font, transparent cards ===== */
body:has(form[action*="twofactor"]) .dash-shell.py-100{
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}
body:has(form[action*="twofactor"]) .card-title{
  font-family: 'Inter', sans-serif !important;
}
body:has(form[action*="twofactor"]) .card.custom--card{
  background: transparent !important;
}


/* ===== Remove footer email/newsletter subscribe section (final) ===== */
.newsletter__wrapper{
  display: none !important;
}


/* ===== Change Password page: use withdraw banner, remove gap, transparent card, polish ===== */
body:has(input[name="current_password"]) .breadcrumb{
  background-image: linear-gradient(rgba(8,6,15,.6), rgba(15,11,29,.75)), url('https://aptheralive.com/assets/images/frontend/breadcrumb/withdraw%20banner.png') !important;
  padding-top: 100px !important;
  padding-bottom: 24px !important;
  height: auto !important;
}
body:has(input[name="current_password"]) .dash-shell.py-100{
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}
body:has(input[name="current_password"]) .card.custom--card{
  background: transparent !important;
}
body:has(input[name="current_password"]) .card-body{
  padding: 20px !important;
}
body:has(input[name="current_password"]) .card-body .form-label{
  color: var(--ar-ink-2, #9a92b5) !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}
body:has(input[name="current_password"]) .card-body .form-control{
  border-radius: 10px !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  background: rgba(255,255,255,.03) !important;
}
body:has(input[name="current_password"]) .card-body .form-control:focus{
  border-color: rgba(139,92,246,.7) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}
body:has(input[name="current_password"]) .card-body button[type="submit"]{
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}
@media (max-width: 767px){
  body:has(input[name="current_password"]) .breadcrumb{
    padding-top: 66px !important;
    padding-bottom: 12px !important;
  }
}


/* ===== Profile Setting page: reuse withdraw banner, remove gap, transparent card, compact + polish ===== */
body:has(input[name="firstname"]) .breadcrumb{
  background-image: linear-gradient(rgba(8,6,15,.6), rgba(15,11,29,.75)), url('https://aptheralive.com/assets/images/frontend/breadcrumb/withdraw%20banner.png') !important;
  padding-top: 100px !important;
  padding-bottom: 24px !important;
  height: auto !important;
}
body:has(input[name="firstname"]) .dash-shell.py-100{
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}
body:has(input[name="firstname"]) .card.custom--card{
  background: transparent !important;
}
body:has(input[name="firstname"]) .card-body{
  padding: 16px !important;
}
body:has(input[name="firstname"]) .card-body .form-group{
  margin-bottom: 12px !important;
}
body:has(input[name="firstname"]) .card-body .form-label{
  color: var(--ar-ink-2, #9a92b5) !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  font-size: 13.5px !important;
}
body:has(input[name="firstname"]) .card-body .form--control,
body:has(input[name="firstname"]) .card-body select{
  border-radius: 10px !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  background: rgba(255,255,255,.03) !important;
  padding: 9px 12px !important;
  height: auto !important;
}
body:has(input[name="firstname"]) .card-body .form--control:focus{
  border-color: rgba(139,92,246,.7) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}
body:has(input[name="firstname"]) .card-body button[type="submit"]{
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}
@media (max-width: 767px){
  body:has(input[name="firstname"]) .breadcrumb{
    padding-top: 66px !important;
    padding-bottom: 12px !important;
  }
  body:has(input[name="firstname"]) .card-body{
    padding: 12px !important;
  }
  body:has(input[name="firstname"]) .card-body .form-group{
    margin-bottom: 9px !important;
  }
  body:has(input[name="firstname"]) .card-body .row > div{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ===== Head & Tail game: full professional redesign ===== */
body:has(.headtail-body){
}
body:has(.headtail-body) .row.gy-5{
  row-gap: 20px !important;
}

/* Coin flip panel: turn into a compact card, shrink the oversized shape */
body:has(.headtail-body) .headtail-body{
  transform: scale(.72) !important;
  transform-origin: center top !important;
  margin: 0 auto -110px !important;
}

/* Betting panel: card look matching the coin panel */
body:has(.headtail-body) .headtail-wrapper{
  background: linear-gradient(180deg, rgba(30,20,55,.55), rgba(15,11,29,.75)) !important;
  border: 1px solid rgba(139,92,246,.25) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
  padding: 22px !important;
}
body:has(.headtail-body) .game-contet-title{
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

/* Amount input row: clean rounded prefix + input, Min/Max moved to their own row below as equal pill buttons */
body:has(.headtail-body) .input-group{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
}
body:has(.headtail-body) .input-group > .input-group-text:first-child{
  order: 1;
  flex: 0 0 46px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body:has(.headtail-body) .input-group > input.form-control{
  order: 2;
  flex: 1 1 calc(100% - 54px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  background: rgba(255,255,255,.03) !important;
  color: #fff !important;
}
body:has(.headtail-body) .input-group > input.form-control:focus{
  border-color: rgba(139,92,246,.7) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}
body:has(.headtail-body) .input-group > .minBtn,
body:has(.headtail-body) .input-group > .maxBtn{
  order: 3;
  flex: 1 1 calc(50% - 4px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  background: rgba(139,92,246,.14) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 9px 0 !important;
  text-align: center !important;
  transition: background-color .15s, border-color .15s;
}
body:has(.headtail-body) .input-group > .maxBtn{ order: 4; }
body:has(.headtail-body) .input-group > .minBtn:hover,
body:has(.headtail-body) .input-group > .maxBtn:hover{
  background: rgba(139,92,246,.28) !important;
  border-color: rgba(139,92,246,.6) !important;
}
body:has(.headtail-body) .input-inner-note{
  margin-top: 10px !important;
  display: block !important;
  color: var(--ar-ink-2, #9a92b5) !important;
  font-size: 12.5px !important;
}

/* Head/Tail selection cards */
body:has(.headtail-body) .headtail-slect{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin: 18px 0 !important;
  width: 100% !important;
}
body:has(.headtail-body) .headtail-slect__box{
  flex: 1 1 50% !important;
  border-radius: 14px !important;
  border: 1px solid rgba(139,92,246,.25) !important;
  background: rgba(255,255,255,.03) !important;
  transition: border-color .15s, background-color .15s, transform .15s;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}
body:has(.headtail-body) .headtail-slect__box img{
  width: 76px !important;
  height: 76px !important;
}
body:has(.headtail-body) .headtail-slect__box:hover{
  border-color: rgba(139,92,246,.5) !important;
  transform: translateY(-2px);
}
body:has(.headtail-body) .headtail-slect__box.active{
  border-color: #8b5cf6 !important;
  background: rgba(139,92,246,.14) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.18) !important;
}

/* Play button + instructions link */
body:has(.headtail-body) .game-playbtn button{
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  padding: 12px 0 !important;
}
body:has(.headtail-body) button[data-bs-toggle="modal"]{
  color: var(--ar-ink-2, #9a92b5) !important;
  font-size: 13px !important;
  margin-top: 12px !important;
  text-decoration: underline;
}

@media (max-width: 767px){
  body:has(.headtail-body) .headtail-body{
    transform: scale(.55) !important;
    margin: 0 auto -190px !important;
  }
  body:has(.headtail-body) .headtail-wrapper{
    padding: 14px !important;
    border-radius: 14px !important;
  }
  body:has(.headtail-body) .headtail-slect__box img{
    width: 56px !important;
    height: 56px !important;
  }
  body:has(.headtail-body) .headtail-slect{
    margin: 12px 0 !important;
  }
}