/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Sans+Pro:wght@400;700&display=swap");

/* Bonus Notification Styles */
.bonus-notification-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 18rem;
}

@media (min-width: 768px) {
  .bonus-notification-container {
    top: 1.5rem;
    right: 1.5rem;
    gap: 0.75rem;
    max-width: 20rem;
  }
}

@media (min-width: 1024px) {
  .bonus-notification-container {
    max-width: 24rem;
  }
}

.bonus-notification {
  background: #131635;
  color: white;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #4C4C70;
  max-width: 100%;
}

.bonus-notification:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.bonus-notification-content {
  padding: 0.5rem 0.75rem;
}

@media (min-width: 640px) {
  .bonus-notification-content {
    padding: 0.75rem 1rem;
  }
}

.bonus-notification-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.bonus-notification-main {
  flex: 1 1;
  min-width: 0;
}

.bonus-notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}

.bonus-notification-emoji {
  font-size: 1rem;
  margin-right: 0.375rem;
}

@media (min-width: 640px) {
  .bonus-notification-emoji {
    font-size: 1.125rem;
  }
}

.bonus-notification-title {
  font-weight: 600;
  font-size: 0.75rem;
  color: #34FF4C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .bonus-notification-title {
    font-size: 0.875rem;
  }
}

.bonus-notification-description {
  font-size: 0.6875rem;
  opacity: 0.8;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .bonus-notification-description {
    font-size: 0.75rem;
  }
}

.bonus-notification-reward {
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: rgba(52, 255, 76, 0.1);
  color: #34FF4C;
  border: 1px solid rgba(52, 255, 76, 0.3);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  display: inline-block;
}

@media (min-width: 640px) {
  .bonus-notification-reward {
    font-size: 0.875rem;
    padding: 0.1875rem 0.5rem;
  }
}

.bonus-notification-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.bonus-notification-dismiss {
  color: white;
  opacity: 0.6;
  font-size: 1rem;
  touch-action: manipulation;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.125rem;
  line-height: 1;
}

.bonus-notification-dismiss:hover {
  opacity: 0.9;
}

@media (min-width: 640px) {
  .bonus-notification-dismiss {
    font-size: 1.125rem;
  }
}

.bonus-notification-hint {
  font-size: 0.625rem;
  opacity: 0.6;
  text-align: right;
}

.bonus-notification-hint-mobile {
  display: block;
}

@media (min-width: 640px) {
  .bonus-notification-hint-mobile {
    display: none;
  }
}

.bonus-notification-hint-desktop {
  display: none;
}

@media (min-width: 640px) {
  .bonus-notification-hint-desktop {
    display: inline;
  }
}

/* Welcome Bonus Popup Styles */
.welcome-bonus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.welcome-bonus-popup {
  background: linear-gradient(135deg, #131635 0%, #1C1845 100%);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  width: 326px;
  height:353px;
  position: relative;
  overflow: hidden;
}

.welcome-bonus-content {
  padding: 2rem 1.5rem;
  text-align: center;
  color: white;
}

.welcome-bonus-emoji {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.welcome-bonus-amount {
  font-size: 36px;
  font-weight: 100;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(52, 255, 76, 0.3);
}

.welcome-bonus-title {
  font-size: 36px;
  font-weight: 100;
  color: #ffffff;
}

.welcome-bonus-subtitle {
  font-size: 1rem;
  opacity: 0.7;
  color: #e2e8f0;
}

.welcome-bonus-button {
  background: linear-gradient(135deg, #34FF4C 0%, #22c55e 100%);
  color: #1a1a2e;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px 0 rgba(52, 255, 76, 0.4);
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.welcome-bonus-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(52, 255, 76, 0.6);
}

.welcome-bonus-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

button.l-gradient-bg img {
    margin-bottom: -8px;
    margin-right: 12px;
}

.welcome-bonus-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 1rem;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Success Notification Styles */
.success-notification-overlay {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
  animation: slide-in-right 0.5s ease-out;
}

.success-notification {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 1rem;
  border: 2px solid #34FF4C;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  min-width: 300px;
  max-width: 400px;
  overflow: hidden;
}

.success-notification-content {
  padding: 1.5rem;
  text-align: center;
  color: white;
}

.success-notification-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.success-notification-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #34FF4C;
  margin-bottom: 1rem;
}

.success-notification-message {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.success-notification-amount {
  font-weight: bold;
  color: #34FF4C;
  font-size: 1.1rem;
}

.success-notification-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}

.success-notification-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #34FF4C, #22c55e);
  width: 0%;
  transition: width 0.05s linear;
}

.animate-slide-in-right {
  animation: slide-in-right 0.5s ease-out;
}

/* Shared CSS variables moved from component module to avoid CSS module purity errors */
:root {
  --bg-dark: #071028;
  --card-bg: #0e1430;
  --accent: linear-gradient(90deg, #f98b51, #f96420);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif !important;
  background-color: #0e1524;
  color: #fff;
}

/* Prevent body scroll when modals are open */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

button.close-button.dev-logout {
  float: right;
  position: absolute;
  width: 40px;
  right: 17%;
  font-weight: bold;
}

.fullscreen-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: #0e1524;
  /* Adjust to match brand */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fullscreen-loader img.loader-logo {
  width: 120px;
  height: auto;
  animation: pulse 1.5s infinite ease-in-out;
}

.fullscreen-loader.hide {
  opacity: 0;
  visibility: hidden;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a.top-nav.login-icon {
  background-image: url(/img/icons/login.png);
  background-repeat: no-repeat;
  background-position: 10px 4px;
  width: 72px;
  display: inline-block;
  text-align: right;
  margin-right: 30px;
}

.layout {
  display: flex;
  flex: 1 1;
}

.main-content {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding-top: 80px;
}

.main-content.vip-page {
  max-width: 1240px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1c1945;
  position: fixed;
  width: 100%;
  z-index: 20;
  height: 72px;
}

.headerLogo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.modalLogo {
  width: 182px;
  height: 40px;
  margin-bottom: -8px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.logo span {
  color: #ffd700;
}

.top-nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 1rem;
}

.btn-register {
  background-color: #ff4b2b;
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.3s;
}

.btn-register:hover {
  background-color: #ff6543;
}

/* --- Sidebar --- */
.sidebar {
  width: 64px;
  background-color: #19153d;
  padding: 10px;
  padding-top: 90px;
  transition: width 0.3s;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar.sidebar-open {
  width: 260px;
  min-width: 240px;
  max-width: 280px;
  background: #211e36;
  color: #fff;
  height: 100vh;
  padding-top: 32px;
  position: fixed;
  z-index: 10;
  overflow-x: hidden;
  margin-top: 0;
  left: 0;
  top: 0;
  box-shadow: 2px 0 12px #00000022;
}

ul.submenu {
  display: block;
  height: 470px;
  position: relative;
}

/* Initial collapsed state */
.sidebar-collapsed {
  width: 64px;
}

li.searchField {
  width: 90%;
  margin: 0 auto 18px auto;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0;
  background: none;
}

input#searchField {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #2a2552;
  background: #18153d;
  padding-left: 12px;
  color: #fff;
  font-size: 15px;
  margin-top: 0;
}

/* Expanded sidebar */
.sidebar-expanded {
  width: 260px;
}

.sidebar.sidebar-open {
  width: 250px;
  min-width: 240px;
  max-width: 280px;
  background: #161335;
  color: #fff;
  height: 100vh;
  padding-top: 32px;
  position: fixed;
  z-index: 10;
  margin-top: 50px;
  left: 0;
  top: 0;
  box-shadow: 2px 0 12px #00000022;
  max-height: 100vh;
  overflow: auto;
}

.sidebar.sidebar-open {
  overflow-y: auto;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

.sidebar.sidebar-open::-webkit-scrollbar {
  width: 1px;
  background: transparent;
}

.sidebar.sidebar-open::-webkit-scrollbar-thumb {
  background: transparent;
}

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

.sidebar li {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 6px;
  border-radius: 5px;
  min-height: 48px;
  transition: background 0.2s;
}

.sidebar li.searchField {
  width: 100%;
  margin: 0 auto 12px auto;
  border-bottom: 1px solid #1c1945;
  padding-bottom: 12px;
  margin-top: 6px;
  background: none;
}

input#searchField {
  width: 100%;
  height: 38px;
  border-radius: 5px;
  border: 1px solid #2a2552;
  background: #100f29;
  padding-left: 12px;
  color: #c7e2fb;
  font-size: 13px;
  margin-top: 0;
  font-family: "Source Sans Pro";
}

input#searchField:focus,
input.search-input:focus {
  outline: none;
  /* Removes browser default outline */
  box-shadow: none;
  /* Prevents any focus shadow */
  border: 1px solid #2a2552;
  /* Maintains your original border */
  background: #100f29;
  /* Keeps your custom background */
  color: #c7e2fb;
  /* Keeps text color consistent */
}

li.buyCoins {
  width: 100%;
  margin: -4px 0 0px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  min-height: 56px;
  background-repeat: no-repeat !important;
}

a.buyCoinsLink {
  width: 226px;
  height: 48px;
  background: url(/img/backgrounds/buy-coins.png);
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

.sidebar li[class^="menu"] {
  background: #29255a;
  margin: 0 0 10px 0;
  padding: 0 0 0 16px;
  min-height: 48px;
  transition: background 0.2s;
  cursor: pointer;
  position: relative;
}

.sidebar li.menuSocialLiveCasino {
  background-image: url(/img/icons/social-live-casino.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuSearch {
  background: url(/img/icons/search.png);
  background-repeat: no-repeat !important;
}

.sidebar li.menuCasino {
  background-image: url(/img/icons/spade.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuLobby {
  background-image: url(/img/icons/lobby.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuHotGames {
  background-image: url(/img/icons/hot.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuNewReleases {
  background-image: url(/img/icons/spaceship.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuLiveRTP {
  background-image: url(/img/icons/bullseye.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuRewards {
  background-image: url(/img/icons/vault-sm.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuUK {
  background-image: url(/img/icons/ukflag.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuFeatured {
  background-image: url(/img/icons/featured.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuMegaways {
  background-image: url(/img/icons/megaways.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuCasinoSlots {
  background-image: url(/img/icons/casino-slots.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuTopGames {
  background-image: url(/img/icons/top-games.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuVegaJackpot {
  background-image: url(/img/icons/crown.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuJackpotGames {
  background-image: url(/img/icons/jackpot-games.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuAllGames {
  background-image: url(/img/icons/all-games.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuBonusBuy {
  background-image: url(/img/icons/bonus-buy.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuSociallivecasino {
  background-image: url(/img/icons/social-live-casino.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuVIPClub {
  background-image: url(/img/icons/vip.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuRewards {
  background-image: url(/img/icons/vault-sm.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuReferEarn {
  background-image: url(/img/icons/refer-earn.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuPromotions {
  background-image: url(/img/icons/horn.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li.menuRedeem {
  background-image: url(/img/icons/redeem.png) !important;
  background-repeat: no-repeat !important;
}

.sidebar li {
  background-position: 14px 13px !important;
}

.menu-label {
  margin-left: 38px;
  font-weight: 600;
  font-size: 16px;
  vertical-align: middle;
  white-space: nowrap;
  font-family: "Source Sans Pro";
  letter-spacing: 0.05em;
}

.register-modal-header h2 img {
  width: 129px;
  height: 30px;
  margin-bottom: -5px;
}

.submenu-caret {
  margin-left: auto;
  margin-right: 18px;
  font-size: 18px;
}

ul.submenu {
  display: block;
  background: #29255a;
  border-radius: 5px;
  margin: 6px 0 10px 0;
  padding: 12px 0 12px 0;
  box-shadow: none;
  position: static;
  width: 100%;
}

li.submenu-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 2px;
  padding: 0 0px 0px 43px;
  background: none;
}

li.submenu-item:last-child {
  margin-bottom: 0;
}

li.submenu-item:hover {
  background: transparent;
}

.submenu-label {
  margin-left: 12px;
  font-size: 15px;
  font-family: "Source Sans Pro";
  font-weight: 600;
  color: #fff;
}

.sidebar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 0;
}

.sidebar a:hover {
  color: #ffd700;
}

span.tab-button.active {
  background: linear-gradient(to bottom, #f9652000, #f98c515d);
  border-bottom: 2px solid #f98b51;
  color: #fff;
  /* optional, adjust text color if needed */
  padding-bottom: 5px;
}

.sidebar li.menuLobby.active,
.sidebar li.menuLobby.has-submenu.active {
  background: #332e6b;
}

.sidebar li.menuLobby .submenu-caret {
  color: #ffd700;
}

.sidebar li.menuLobby.active .submenu-caret {
  color: #ffd700;
}

/* Hide default icon images if using background icons */
.sidebar li[class^="menu"] img,
li.submenu-item img {
  display: block !important;
}

/* Hero */
.hero {
  border-radius: 8px;
  margin-bottom: 18px;
  position: relative;
  background: url(/img/backgrounds/hero-bg.png) !important;
  background-repeat: no-repeat !important;
  min-height: 262px;
  background-color: #1c1945;
  margin-top: 60px;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-left h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #ffd700;
}

.hero-left p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.hero-right {
  padding: 30px;
  max-width: 400px;
  min-width: 400px;
  text-align: center !important;
  padding-bottom: 21px;
  background-color: #1c1945;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.welcome-text {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: Source Sans Pro;
}

.hero-subtext {
  max-width: 400px;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.signup-buttons {
  display: inline-block;
  width: 100%;
}

.btn-social.facebook {
  background-color: #3f69f2;
  background-image: url("/img/icons/facebook.png");
  background-repeat: no-repeat;
  color: #fff;
  font-size: 16px;
  width: 159px;
  height: 43px;
  float: left;
  border-radius: 5px;
  border: none;
  background-position: 20px 10px;
  background-size: 20px 20px;
  cursor: pointer;
}

.btn-social.google {
  background-color: #fff;
  background-image: url(/img/icons/google.png);
  background-repeat: no-repeat;
  color: #333;
  font-family: "Source Sans Pro";
  font-size: 16px;
  width: 159px;
  height: 43px;
  float: right;
  border-radius: 5px;
  border: none;
  background-position: 30px 12px;
  background-size: 20px 20px;
  cursor: pointer;
}

.hero-right img {
  max-width: 100%;
  border-radius: 8px;
}

.new-player-bonus {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  background-color: #ffd700;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 700;
}

/* Games Section */
.games-section {
  margin-bottom: 2rem;
}

.games-section h2,
.top-games-section h2 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #fff;
  background-repeat: no-repeat;
  padding-left: 36px;
  background-position: left center;
  font-family: "Source Sans Pro";
}

.games-grid {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.games-grid::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.game-card {
  min-width: 140px;
  flex: 0 0 auto;
}

/* Grouped scroll arrows container for games section */
.scroll-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  background: #181c34;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0002;
  padding: 0.25rem 0.75rem;
  align-items: center;
}

.scroll-button {
  background: none;
  border: none;
  color: #7ec4ff;
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: background 0.2s;
}

.scroll-button:hover {
  background: #23284a;
}

.top-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  padding: 1rem;
}

.top-games-grid div {
  display: block;
  float: right;
}

.game-card {
  background-color: #2a2e44;
  border-radius: 6px;
  text-align: center;
  padding: 1rem;
  transition: transform 0.3s;
  min-height: 212px;
  width: 157px;
  background-size: cover;
  background-repeat: no-repeat;
}

.game-card {
  min-width: 157px;
  flex: 0 0 auto;
}

.game-rating {
  background-repeat: no-repeat;
  background-position: 5px 93px;
}

div#game-rating-1 {
  background-image: url(/img/backgrounds/1.png);
}

div#game-rating-2 {
  background-image: url(/img/backgrounds/2.png);
}

div#game-rating-3 {
  background-image: url(/img/backgrounds/3.png);
}

div#game-rating-4 {
  background-image: url(/img/backgrounds/4.png);
}

div#game-rating-5 {
  background-image: url(/img/backgrounds/5.png);
}

.game-card:hover {
  transform: translateY(-2px);
  cursor: pointer;
}

.game-card img {
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.game-card p {
  font-weight: 600;
  font-size: 0.95rem;
}

.sub-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  max-width: 1200px;
}

.card.bg-cover {
  max-height: 172px;
  max-width: 575px;
  margin-bottom: 0px;
  text-align: right;
  display: flex;
  min-height: 172px;
  min-width: 565px;
  background-size: contain;
  background-repeat: no-repeat;
}

.card img.inline-image {
  position: absolute;
  margin-top: -30px;
  margin-left: 193px;
}

.card h2 {
  position: absolute;
  margin-left: 40px;
  margin-top: 85px;
  font-size: 28px;
}

.card p {
  position: absolute;
  margin-left: 40px;
  margin-top: 120px;
  font-weight: 700;
}

.l-gradient-bg {
  background: linear-gradient(180deg, #f96420 0%, #f98b51 100%);
}

button.l-gradient-bg {
  width: 100%;
  border: none;
  border-radius: 5px;
  height: 49px;
  box-shadow: 0 1px 1px #c56130;
  color: #fff;
  font-family: source Sans Pro;
  font-size: 16px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 5px;
  cursor: pointer;
}

#seperator {
  width: 100%;
  display: block;
  padding: 20px 0 0;
  font-family: source Sans Pro;
  font-size: 16px;
  font-weight: 700;
}

span.blue-gradient-line-int {
  background: url(/img/backgrounds/blue-line-start.png);
  min-height: 2px;
  max-width: 150px;
  display: block;
  background-repeat: no-repeat;
}

span.blue-gradient-line-ext {
  background: url("/img/backgrounds/blue-line-end.png");
  min-height: 2px;
  max-width: 150px;
  display: block;
  background-repeat: no-repeat;
  float: right;
  height: 2px;
  width: 150px;
  margin-top: -2px;
}

span.or {
  display: ruby-text;
  width: 20px;
  margin-top: -13px;
}

.get-set-for-section {
  text-align: center;
  margin: 4rem 0;
  color: white;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background: none;
  border: 1px solid #4b3b9a;
  padding: 2rem;
  border-radius: 12px;
  transition: transform 0.3s, box-shadow 0.3s;
  padding-bottom: 15px;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(249, 100, 32, 0.5);
}

.feature-icon {
  height: auto;
  width: auto;
  margin-top: -90px;
  margin-bottom: 0;
}

section.get-set-for-section h2 {
  font-family: "Inter";
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 70px;
}

.feature-card h3 {
  font-size: 14px;
}

.feature-card p {
  font-size: 14px;
  margin-top: 0.25rem;
}

h3.Massive {
  margin-top: -12px;
}

.page-content {
  display: block;
  width: 100%;
  margin: 0;
  max-width: 100%;
  background-image: url("/img/backgrounds/features.png");
  margin-top: 4em;
  min-height: 220px;
  padding: 60px 30px;
  min-height: 43vh;
}

section.get-set-for-section {
  max-width: 1240px;
  margin: 0 auto;
}

img.steps {
  width: 453px;
  min-height: 95px !important;
}

.register-promotion {
  background: url(/img/backgrounds/register-promotion.png);
  min-height: 330px;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 30px;
  margin: 30px 0px;
  padding-top: 64px;
  padding-left: 120px;
}

.max-w-md {
  width: 46%;
}

.max-w-md h2 {
  margin: 20px 0;
}

button.l-gradient-bg.btn-register {
  width: 114px;
  font-weight: 100;
  padding: 0px !important;
  height: 40px;
  border-radius: 5px;
}

.bottomLogos img {
  width: 59px;
  height: 59px;
  margin-top: 45px;
}

.displayNone {
  display: none !important;
}

.desktop-hidden {
  display: none !important;
}

h1.DynaTitle {
  text-transform: capitalize;
  margin-bottom: 30px;
}

a.rules-link {
  color: #fff;
  font-weight: 400;
}

footer .footer-module__d_pQKq__linkColumn li a {
  text-transform: none !important;
  text-decoration: none;
  color: #ffffff9e;
}

.cms-static p {
  line-height: 40px;
}

main.page-container.cms-404 {
  text-align: center;
  min-height: 100vh;
}

main.page.container.cms-404 footer {
  display: none;
}

.cms-404 .main-content.mobile-fullwidth {
  text-align: -webkit-center;
  min-height: 31vh;
  display: block;
}

.cms-404 .main-content.mobile-fullwidth img {
  max-width: 70% !important;
}

.games-list-container {
  margin: 2rem;
}

.games-list-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-row {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e2e221;
  border-radius: 8px;
  background: #0e1524;
}

.column {
  padding: 0 16px;
  flex: 1 1;
}

.column.game {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.register-modal-container.verify-user {
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}

.verification-message {
  margin-bottom: 30px;
}

.modal-actions {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 50%;
  gap: 50%;
}

.modal-actions button {
  min-width: 100px;
  font-size: 15px;
}

.register-modal-container.verify-user .register-modal-header h2 {
  text-align: center !important;
  width: 100%;
  font-size: 32px;
}

.header-unauth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 19.9%;
  background-color: #1c1945;
  color: #fff;
  padding-left: 18%;
}

header.header.header-unauth {
  padding: 1rem 19%;
}

.wallet-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wallet-balance {
  font-weight: bold;
  padding: 10px 60px;
  border-radius: 6px;
  background: #161335;
  font-size: 18px;
  font-family: "Source Sans Pro";
}

.wallet-balance.silver {
  border: none;
  background: #161335;
}

.wallet-balance {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 6px;
  gap: 6px;
}

.wallet-balance img {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.wallet-divider {
  font-size: 1.5rem;
  line-height: 1;
}

.username {
  font-size: 12px;
  margin: 0;
}

/* USER BADGE + DROPDOWN */
.user-badge-container {
  position: relative;
}

/* The box that shows name + level bar + caret */
.user-badge {
  display: grid;
  align-items: center;
  grid-gap: 0.75rem;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  background: #161335;
  padding: 0 7px;
  border-radius: 4px;
  width: 214px;
  height: 48px;
  text-align: center;
  font-family: "Source Sans Pro";
}

.user-badge:hover {
  cursor: pointer;
}

/* Username + icon */
.username {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
}

.level-bar {
  background: #25234e;
  width: 80px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-left: 8px;
}

.level-fill {
  background: #4caf50;
  height: 100%;
  width: 0%;
  /* Set inline via style prop */
  transition: width 0.3s;
}

.dropdown-caret {
  right: 5px;
  font-size: 1.7rem;
  color: #ccc;
  position: absolute;
  z-index: 96;
}

.user-dropdown {
  font-family: "Source Sans Pro";
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #161335;
  border: none;
  border-radius: 6px;
  min-width: 160px;
  margin-top: 6px;
  z-index: 100;
  padding: 10px;
}

.user-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-dropdown li {
  border-bottom: none;
  color: #5f658b;
}

.user-dropdown li a {
  color: #5f658b;
}

.user-dropdown li:last-child {
  border-bottom: none;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #5f658b;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.dropdown-link:hover {
  background-color: #2a2552;
  color: #fff;
}

.menu-icon {
  width: 20px;
  height: 20px;
  background-color: #777;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain !important;
}

.menu-icon.transactions {
  background: url(/img/icons/transactions.png);
}

.menu-icon.history {
  background: url(/img/icons/history.png);
}

.menu-icon.redeem {
  background: url(/img/icons/redeem-menu.png);
}

.menu-icon.profile {
  background: url(/img/icons/profile.png);
}

.menu-icon.logout {
  background: url(/img/icons/logout.png);
}

.logout-button {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.username img {
  float: left;
  height: 36px;
  width: 36px;
  margin-bottom: -20px;
  margin-left: -4px;
}

.username span {
  display: block;
  margin: 0 0 0 -34px;
  width: 100%;
}

.level-bar {
  width: 70%;
  height: 10px;
  background: #25234e;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: -20px;
  margin-left: 33px;
}

.blue-card {
  max-width: 484px;
  min-height: 224px;
  background: #121533;
  border: 1px solid #1c214e;
  margin-top: 40px;
  border-radius: 6px;
  padding: 15px;
}

.preferences {
  width: 484px;
  height: 224px;
  background: #121533;
  border: 1px solid #1c214e;
  padding: 10px;
  padding-top: 5px;
  margin-bottom: 40px;
  border-radius: 6px;
}

.change-password {
  width: 484px;
  height: 287px;
  background: #121533;
  padding: 5px;
}

.level-fill {
  height: 100%;
  background: linear-gradient(to right, #f98b51, #f96420);
  transition: width 0.4s ease;
  border-radius: 4px;
}

.promo-carousel {
  margin: 0rem 0;
  padding: 0 0rem;
}

section.promo-carousel {
  margin-top: 40px;
  margin-bottom: 20px;
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-controls button {
  background: #111;
  color: #fff;
  border: none;
  padding: 0.25rem 0.75rem;
  margin-left: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1rem;
  margin-top: 1rem;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: space-between;
}

.carousel-slide img {
  width: 379px;
  height: 186px;
}

.gradient-line {
  width: 100%;
  height: 2px;
  background: radial-gradient(circle, #453c9b, #19153d63);
  margin-top: 20px;
  margin-bottom: 40px;
}

section.auth-hero h2 {
  font-family: "Source Sans Pro";
}

.progress-details {
  background: url(/img/backgrounds/user-level-bg.png);
  min-height: 177px;
  background-size: contain;
  padding: 2em 2rem;
}

.wallet-panel {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  padding: 1rem 2rem;
}

.wallet-box {
  background: #1e223c;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 180px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.wallet-box.gold {
  border-left: 4px solid gold;
}

.wallet-box.sc {
  border-left: 4px solid silver;
}

.wallet-box div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.wallet-box strong {
  font-size: 1.2rem;
  color: #fff;
}

.wallet-box span {
  font-size: 0.85rem;
  color: #ccc;
}

.search-container {
  margin-top: 1rem;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: #131635;
  transition: border-color 0.2s;
  color: #fff !important;
  margin-top: 15px;
}

.profile-wrapper {
  display: grid;
  grid-auto-flow: column;
}

.transactions-wrapper,
.game-history-wrapper {
  display: grid;
  grid-auto-flow: row;
}

.transactions-table-wrapper tr th,
.transactions-table-wrapper tr td {
  width: 198px;
  font-size: 14px;
  color: #f1f1f1;
  text-align: center;
}

.transactions-table-wrapper tr th {
  font-weight: 600;
  color: #ffffff;
}

.transactions-table-wrapper thead tr {
  border-radius: 8px;
  margin-bottom: 15px;
}

/* globals.css or games-section.module.css */

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #0070f3;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  margin-top: 1rem;
  color: #e00;
  font-weight: bold;
}

.pref-content,
.pref-support {
  display: grid;
  grid-auto-flow: column;
  font-family: "Source Sans Pro";
  font-size: 12px;
}

.pref-support .text {
  width: 90%;
  margin-top: 28px;
  font-weight: bold;
}

.text {
  width: 50%;
}

.pref-support button {
  font-size: 12px;
  padding: 0 15px;
  height: 36px;
}

.preferences.blue-card h2 {
  font-size: 18px;
  font-family: "Source Sans Pro";
}

.pref-options {
  display: grid;
}

.pref-support {
  margin-top: 60px;
}

.change-password.blue-card h2 {
  font-size: 28px;
  font-family: "Source Sans Pro";
  margin-bottom: 20px;
}

button.l-gradient-bg.password {
  width: auto;
  padding: 10px 20px;
  height: auto;
  margin: 0px auto;
  display: block;
  font-size: 14px;
}

button.l-gradient-bg.support {
  padding: 0 20px;
  font-size: 14px;
}

.change-password.blue-card input {
  height: 36px;
  margin-bottom: 15px;
  width: 75%;
}

.fixed.inset-0.bg-black.bg-opacity-90.z-50.flex.flex-col {
  width: 63%;
  position: fixed;
  top: 75px;
  margin: 0 auto;
  height: 85%;
  z-index: 5;
}

input.reverse-blue {
  background: #121533;
}

.user-details.blue-card {
  border: none;
  background: transparent;
}

input.reverse-blue {
  background: #121533;
  height: 30px;
  font-family: "Source Sans Pro";
  width: 100%;
  font-size: 14px;
  color: #ccc;
  border: none;
}

.user-details.blue-card label {
  font-family: "Source Sans Pro";
  font-weight: bold;
  margin-top: 15px;
  display: block;
}

input.reverse-blue {
  background: #121533;
  height: 30px;
  font-family: "Source Sans Pro";
  width: 100%;
  font-size: 14px;
  color: #ccc;
  border: 1px solid #1c214e;
  padding: 5px;
}

.change-password.blue-card .input-field input {
  background: #0e1524;
  border: none;
  border-radius: 6px;
  padding: 5px;
  height: 30px;
}

.user-details.blue-card h2 {
  color: #f98b51;
  font-family: "Source Sans Pro";
}

.pref-options {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  font-size: 14px;
  font-family: "Source Sans Pro";
  gap: 0px;
}

.pref-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0px;
  border-radius: 6px;
  gap: 10px;
}

.pref-label {
  color: #eee;
  font-size: 1rem;
  width: 100%;
}

.preferences input[type="checkbox"] {
  opacity: 0;
}

iframe.flex-grow.w-full.h-full.border-none {
  width: 100%;
  height: 100%;
  border: none;
  margin-top: 5px;
}

.preferences .toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 15px;
}

.preferences .toggle-switch-slider::before {
  content: "";
  position: absolute;
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

footer ul li a {
  color: #fff;
  text-decoration: none;
}

.user-details.blue-card input {
  height: 38px;
  padding: 16px;
  color: #ccc;
  border-radius: 6px;
  margin-top: 5px;
}

.shop-container {
  padding: 2rem;
}

.shop-section-title {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1rem;
}

.shop-grid {
  display: grid;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.shop-card {
  background: #131635;
  border-radius: 12px;
  padding: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.coin-icon {
  width: 194px;
  height: 222px;
  background: url("/img/icons/coins.png") no-repeat center center;
  background-size: contain;
  margin-bottom: 1rem;
}

.shop-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 20px;
  font-family: "Source Sans Pro";
}

.shop-description {
  font-size: 0.875rem;
  opacity: 0.8;
  font-size: 16x;
  font-family: "Source Sans Pro";
  display: grid;
  justify-content: center;
}

.shop-price {
  margin-top: 1rem;
  background: #ff944d;
  border: none;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  font-family: "Source Sans Pro";
}

.shop-card-body {
  width: 100%;
}

.shop-card-body button {
  height: 40px;
}

section.shop-section {
  margin: 20px 0;
}

.shop-section-title {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1rem;
  font-size: 26px;
  font-family: "Source Sans Pro";
}
.shop-section-title {
  color: white;
  margin-bottom: 1rem;
  font-size: 26px;
  font-family: "Source Sans Pro";
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 30px;
  margin-top: 40px;
}

.shop-container hr {
  border: 1px solid #1d1239;
  color: transparent;
  width: 221px;
  margin-bottom: 30px;
  display: block;
  margin-top: -25px;
}

a.buyCoinsLink {
  width: 226px;
  height: 48px;
  background: url(/img/backgrounds/buy-coins.png);
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

section.games-section h2 {
  margin-top: 30px;
}

.payment-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.payment-modal {
  background: #131635;
  border-radius: 12px;
  padding: 24px;
  width: 551px;
  max-width: 551px;
  position: relative;
  color: white;
  height: 710px;
  zoom: 0.9;
}

/* Close button */
.payment-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}

/* Steps */
.payment-steps {
  margin-bottom: 50px !important;
  margin-top: 50px !important;
  text-align: center;
}

.payment-steps img {
  width: 100% !important;
}

.payment-step {
  flex: 1 1;
  text-align: center;
  padding-bottom: 8px;
  position: relative;
}

.payment-step.active {
  color: #ff944d;
}

.payment-step.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background: #ff944d;
}

/* Summary */
.payment-summary {
  text-align: center;
  margin-bottom: 24px;
}

.payment-coins {
  margin-bottom: 16px;
}

.payment-coin-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-family: "Source Sans Pro";
  margin-bottom: 15px;
}

.payment-coin-icon {
  width: 20px;
  height: 24px;
  display: inline-block;
  background-size: contain;
}

.payment-coin-icon.gc {
  background-image: url("/img/icons/gold.png");
}

.payment-coin-icon.sc {
  background-image: url("/img/icons/silver.png");
}

.payment-coin-bag {
  width: 264px;
  margin-bottom: 0px;
  margin-top: -40px;
}

.payment-total {
  font-size: 28px;
  font-weight: bold;
  font-family: "Source Sans Pro";
}

/* Form */
.payment-info-form label {
  display: block;
  margin-bottom: 26px;
  font-size: 0.9rem;
}

.payment-info-form input {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid #191d45;
  background: #0d0c23 !important;
  color: white;
}

.payment-info-form .row {
  display: flex;
  gap: 16px;
}

.payment-info-form .row label {
  flex: 1 1;
}

/* Button */
.payment-btn-continue {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff944d, #fb8c00);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: filter 0.2s;
}

.payment-btn-continue:hover {
  filter: brightness(1.1);
}

.payment-complete {
  padding-top: 0px !important;
}

.wallet-balance.selected {
  outline: 1px solid #f9642073;
  border-radius: 8px;
  background: #28224a;
}

.game-iframe-wrapper {
  position: relative;
  width: 97%;
  padding-top: 60%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.game-iframe-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  width: 97% !important;
  margin: 15px 15px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, #4e5cff 0%, #211e36 100%);
  box-shadow: 0 4px 24px 0 #00000022;
  color: #fff;
  text-align: center;
  position: relative;
}

.game-iframe-wrapper p {
  font-size: 1.5rem;
  font-weight: 600;
  margin: -63% 0 10px 0;
  letter-spacing: 0.03em;
  color: #e0e6ff;
  text-shadow: 0 2px 8px #0002;
}

.game-iframe-wrapper span {
  font-size: 2.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 4px 24px #0004, 0 1px 0 #4e5cff;
  margin: 0;
  line-height: 1.1;
}

.currency-toggle img {
  margin-bottom: -6px;
  margin-left: 6px;
  margin-right: 6px;
}

.gradient-border {
  border-radius: 10px;
  background: linear-gradient(to right, #ff7f5f65, #feb47b86);
}

main.main-content.refer-page {
  font-family: "Source Sans Pro";
}

img.eclipse-one {
  position: absolute;
  zoom: 0.75;
  right: -175px;
  top: 75px;
}

img.eclipse {
  position: absolute;
  zoom: 0.75;
  margin-left: 94px;
}

input:focus {
  outline: none;
  /* Removes browser default outline */
  box-shadow: none;
  /* Prevents any focus shadow */
  border: 1px solid #2a2552;
  /* Maintains your original border */
  background: #100f29;
  /* Keeps your custom background */
  color: #c7e2fb;
  /* Keeps text color consistent */
}

img.level-float {
  position: absolute;
  margin-top: -115px;
  margin-left: -40px;
}

img.float-line {
  position: absolute;
  margin-top: -80px;
  margin-left: 50px;
}

main.main-content.profile-page {
  max-width: 100%;
  margin-left: 250px;
  padding-top: 8.5%;
  overflow-x: hidden;
}

.reward-grid {
  background: #131635;
  padding: 21px;
  border-radius: 8px;
  margin-right: 0%;
  overflow: hidden;
}

.play-game-page main {
  width: 100%;
  min-width: 86.2vw !important;
  margin-left: 250px !important;
  padding-top: 73px !important;
}

.rewards-page {
  font-family: "Source Sans Pro";
}

.games-grid {
  border-radius: 8px !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* or minmax(60px, 100px) 1fr */
  grid-gap: 20px;
  gap: 20px;
  background: none;
}

.footer-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  border-bottom: 2px solid #fff;
}

.progress-details {
  background: url(/img/backgrounds/user-level-bg.png);
  min-height: 177px;
  background-size: contain;
  padding: 2em 2rem;
  max-height: 177px;
  background-repeat: no-repeat;
}

img.feature-icon.more-than-950 {
  margin-left: -130px;
  margin-top: -130px;
  position: absolute;
}

img.feature-icon.exciting-gifts {
  margin-left: -70px;
  margin-top: -112px;
  position: absolute;
}

img.feature-icon.two47 {
  margin-left: -70px;
  margin-top: -112px;
  position: absolute;
}

img.feature-icon.massive {
  margin-left: -130px;
  margin-top: -130px;
  position: absolute;
}

#prov-scroll-right.ProviderCarousel_arrowBtn__5jqZr {
  border-radius: 5px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#prov-scroll-left.ProviderCarousel_arrowBtn__5jqZr {
  border-radius: 5px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.scroll-buttons {
  display: flex;
  gap: 0px;
  position: absolute;
  right: 0;
  margin-top: -50px;
}

button.scroll-button.left {
  border-radius: 5px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

button.scroll-button {
  background: #131635 !important;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

a.view-all-button {
  position: absolute;
  right: 69px;
  color: #fff;
  text-decoration: none;
  background: #131635;
  padding: 7px;
  margin-top: -50px;
  border-radius: 4px;
  font-size: 14px;
  font-family: "Source Sans Pro";
  font-weight: 500;
}

aside#sidebar li:hover {
  transition: background 0.3s ease-in-out;
  text-shadow: 1px 1px 2px #000000 !important;
  color: yellow !important;
}

li.submenu-item a span:hover {
  margin: 0 0px;
  text-shadow: 1px 1px 2px #000000 !important;
  color: yellow !important;
  margin-left: 12px;
}

#sidebar ul li.active {
  transition: background 0.3s ease-in-out;
  text-shadow: 1px 1px 2px #000000 !important;
  color: white !important;
}

#sidebar ul li.active a span {
  transition: background 0.3s ease-in-out;
  text-shadow: 1px 1px 2px #000000 !important;
  color: white !important;
}

aside#sidebar li.searchField:hover {
  background: transparent;
}

.vault-row {
  border-bottom: 2px solid #7265af;
  padding: 0 15px;
  height: 78px;
}

button.header-vault-buttons {
  background: linear-gradient(90deg, #f98b51 0%, #f96420 100%);
  width: 86px;
  height: 34px;
}

button.header-vault-buttons.claimed {
  background: #a6491e;
  color: #1f1009 !important;
}

html,
body {
  /* Hide scrollbars for all browsers */
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE and Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  /* Chrome, Safari, Opera */
}

.page-body {
  font-family: "Source Sans Pro";
}

.promo-buttons {
  background: linear-gradient(90deg, #f98b51 0%, #f96420 100%) !important;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 6px 0;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  margin-top: auto;
  display: block;
}

button.fullscreen-button {
  background: transparent;
  border: none;
}

span.game-meta span {
  margin-left: 20px;
  font-size: 16px;
  color: #c7e2fb;
}

.vw-blur-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  /* semi-transparent dark overlay */
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  /* actual blur effect */
  z-index: 110;
  /* ensure it’s above content */
}

.search-show-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(157px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  max-height: 450px;
  overflow: auto;
  border-radius: 12px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.search-show-grid::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

body.no-scroll,
html.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  position: relative;
}

.search-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 180px;
  width: 100%;
}

.search-spinner {
  border: 5px solid rgba(75, 59, 154, 0.15);
  border-top: 5px solid #4b3b9a;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.home-page .footer-content {
  margin-left: -11% !important;
}

.actual-progress {
  flex-direction: unset;
  display: flex;
  border-radius: 8px;
  overflow: hidden;

  margin-top: 8px;
}

.actual-progress {
  flex-direction: unset;
  display: flex;
  gap: 35%;
}

aside#sidebar {
  height: 100%;
  min-height: 100%;
  padding: 10px;
  padding-bottom: 60px;
  padding-top: 27px;
}

.header-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

img.vip-header {
  width: 100%;
}

span.coins.payment-coin-icon.gc,
span.coins.payment-coin-icon.sc {
  width: 100%;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 30px;
  font-weight: 600;
}

form.payment-info-form input {
  color: #838383;
}

span.payment-coin-icon.gc {
  width: -moz-fit-content;
  width: fit-content;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  height: 36px;
  background-position: 0px 4px;
  padding-left: 36px;
  text-align: center;
}

span.coins.payment-coin-icon.gc.shop-item {
  width: auto;
  padding-left: 36px;
  font-size: 18px;
  height: 30px;
  padding-top: 4px;
  background-size: 24px;
}

.actual-progress p {
  text-transform: uppercase;
}

.paymentiq-deposit-form iframe {
  width: 100%;
  border: none;
  height: 360px !important;
  background: transparent;
  margin-top: 15px;
}

.input-container {
  text-align: left !important;
}

.input-container input {
  border-style: none;
  background: #0d0c23 !important;
  margin-top: 8px;
  border: 1px solid #191d45;
}

input#cardholder {
  cursor: no-drop;
}

.paymentiq-deposit-form .price {
  margin-top: 50px;
}

.shop-description span.coins.payment-coin-icon.sc.shop-item {
  width: auto !important;
  margin: 10px;
  font-size: 18px;
  margin-left: 0px;
  text-align: left;
}

.shop-bonuses {
  display: grid !important;
}

.shop-bonuses .payment-coin-icon.gc,
.shop-bonuses .payment-coin-icon.sc {
  width: 100%;
  background-repeat: no-repeat;
  font-size: 18px !important;
  height: 30px;
  padding-left: 40px;
  font-weight: 600;
  text-align: left;
}

.shop-amount {
  font-size: 28px !important;
  margin-top: 30px;
}

.special-offers-grid {
  display: flex;
}

body
  > main
  > div
  > main
  > div.special-offers-grid
  > div
  > div
  > div.ShopItemList_specialOfferMeta__LP0ld
  > div.ShopItemList_specialOfferTitle__1yBhe
  > span {
  font-size: 20px !important;
}

body
  > main
  > div
  > main
  > div.special-offers-grid
  > div
  > div
  > div.ShopItemList_specialOfferMeta__LP0ld
  > div.ShopItemList_specialOfferSub__fGV7D
  > span {
  font-size: 16px !important;
  font-weight: 600;
}

/* Global modal body scroll prevention */
body.modal-open {
  overflow: hidden !important;
}

.gpay-card-info-container {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 4px;
  border: 0px;
  border: none !important;
}

.fail-btn {
  background-color: #f98d5340;
  border-radius: 10px;
  margin-top: 20px;
  color: #f98b51;
  width: 160px !important;
  height: 47px;
  font-size: 20px;
  font-family: "Source Sans Pro";
  border: none;
}

.failed-header {
  font-weight: 600;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 28px;
  font-family: "Source Sans Pro";
  color: white;
}

.failed-text {
  font-weight: 400;
  margin-bottom: 0px;
  font-size: 20px;
  font-family: "Source Sans Pro";
  color: white;
}

.primary-font
{
  font-family: "Source Sans Pro";
}


.games-container {
    padding-top: 144px;
}

.in-game {
    padding-top: 72px;
}
/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/responsive.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* Laptop L */
@media (max-width: 1440px) {
    body {
        zoom: 1;
    }

    .header-content {
        margin-left: 275px !important;
        max-width: 71.1%;
    }

    .main-content {
        max-width: 1200px;
        margin-left: 250px !important;
        padding: 25px;
        padding-top: 80px;
    }

    nav.top-nav {
        margin-right: -65px;
    }

    .footer-content {
        margin-left: 275px !important;
        zoom: 0.96;
    }

}

@media (min-width: 1280px) {
    body {
        zoom: 1 !important;
    }

    .main-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        padding-top: 80px;
    }

    .hero-right.mobile-hidden {
        height: 265px;
    }

}



/* Laptop: 1024–1279px */
@media (max-width: 1279px) {
    body {
        zoom: 0.80 !important;
    }

    .header-content {
        margin-left: 1.3% !important;
        max-width: 96.7%;
    }


    .main-content {
        zoom: 0.84 !important;
        padding-right: 0;

        padding: 20px;
        padding-top: 80px;
        margin-left: 310px !important;
        max-width: 1200px;
    }

    .layout.play {
        display: block;
        flex: none;
        height: 100vh;
    }

    .main-content.game {
        max-width: calc(100% - 299px);
        margin: 0 auto;
        padding: 20px;
        padding-top: 88px !important;
        margin-left: 299px !important;

    }

    .in-game {
        height: 100vh !important;
    }

    iframe.game-iframe {
        height: 100vh !important;
    }

    div.toggle-wrap {
        bottom: -80px !important;
        background: #1c1945;
        padding: 16px !important;
        height: 80px !important;
    }

    nav.top-nav {
        margin-right: -15%;
    }

    .footer-content {
        zoom: 0.85 !important;
        margin-left: 310px !important;
    }

}

/* Tablet: 768–1023px */
@media (max-width: 1023px) {
    body {
        zoom: 0.64 !important;
        width: 1200px;
    }

    

    header.header.header-unauth {
        padding: 10px;
        padding-right: 172px;
    }

    .main-content {
        margin-left: 336px !important;
        zoom: 0.77 !important;
    }

    body.play-mode {
        width: calc(100% - 15.5%) !important;
    }


    .layout.play {
        display: block;
        flex: none;
        height: 100vh;
    }

    .main-content.game {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
        padding-top: 88px !important;
        margin-left: 327px !important;
    }

    .in-game {
        height: 100vh !important;
    }

    iframe.game-iframe {
        height: 100vh !important;
    }

    div.toggle-wrap {
        bottom: -80px !important;
        background: #1c1945;
        padding: 16px !important;
        height: 80px !important;
    }

    img.feature-icon.more-than-950 {
        margin-left: -67px;
        margin-top: -74px;
    }

    img.feature-icon.exciting-gifts {
        margin-left: -38px;
        margin-top: -70px;
    }

    img.feature-icon.two47 {
        margin-left: -31px;
        margin-top: -67px;
    }

    img.feature-icon.massive {
        margin-left: -63px;
        margin-top: -76px;
    }

    .footer_footer__KDdEv {
        color: #bcbcbc;
        padding: 40px 0px;
        font-family: 'Source Sans Pro';
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 22px;
        overflow: auto;
        margin: 0 auto;
        margin-bottom: 30px;
        zoom: 0.8 !important;
    }

    .footer-content {
        zoom: 0.98 !important;
        margin-left: 335px !important;
    }

}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/mobile.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
  .mobile-footer-wrapper {
      display: block;
  }

  .mobile-sidebar-overlay {
      position: fixed;
      top: 60px;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(10, 10, 30, 0.85);
      z-index: 2000;
      display: flex;
      justify-content: flex-end;
      transition: background 0.2s;
  }

  .mobile-sidebar-sheet {
      width: 100%;
      max-width: 100%;
      height: 100vh;
      background: #1c1945;
      display: flex;
      flex-direction: column;
      padding: 0 0 56px 0;
      position: relative;
      z-index: 2001;
      animation: slideInSidebar 0.22s cubic-bezier(.4, 1.3, .6, 1) 1;
  }

  .sidebar ul {
    padding-bottom: 70px!important;
}

  @keyframes slideInSidebar {
      from {
          transform: translateX(100%);
      }

      to {
          transform: translateX(0);
      }
  }

  /* Mobile Footer */
  @media (max-width: 767px) {
      .mobile-footer {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100vw;
          height: 65px;
          background: #18153d;
          display: flex;
          align-items: center;
          z-index: 1000;
          box-shadow: 0 -2px 12px #0002;
          padding-top: 10px;
          padding-bottom: 10px;
      }

      .mobile-footer-inner {
          width: 100vw;
          display: flex;
          align-items: center;
          justify-content: end;
          padding: 0 10px;
          height: 100%;
      }

      .mobile-footer-hamburger {
          background: none;
          border: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          cursor: pointer;
          margin-left: 20px !important;
      }

      .hamburger-bar {
          width: 26px;
          height: 3px;
          background: #fff;
          border-radius: 2px;
          margin: 3px 0;
          transition: all 0.2s;
      }

      .mobile-footer-actions {
          display: flex;
          gap: 50px;
          align-items: center;
      }

      .mobile-footer-btn {
          font-family: 'Source Sans Pro', sans-serif;
          font-weight: 600;
          font-size: 15px;
          border: none;
          border-radius: 6px;
          padding: 8px 18px;
          text-decoration: none;
          color: #fff;
          background: #23204a;
          transition: background 0.2s;
          margin-left: 0.2rem;
      }

      .mobile-footer-btn.login {
          background: linear-gradient(90deg, #6ec1e4, #1a237e);
      }

      .mobile-footer-btn.register {
          background: linear-gradient(90deg, #f96420, #f98b51);
      }
  }

  .mobile-show {
      display: none;
  }

  /* Mobile: <= 767px */
  @media (max-width: 767px) {

      body {
          zoom: 0 !important;
          width: 100vw;
      }

      .layout {
          display: block;
          flex: none;
          width: 100vw;
      }

      header.header.header-unauth {
          padding-right: 15px !important;
          padding: 10px;
      }

      .logo img {
          width: 127px;
          height: 27px;
      }

      nav.top-nav {
          margin-right: 0 !important;
          width: 174px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 33px !important;
          padding: 0 !important;
          margin-top: 7px;
      }

      .top-nav button {
          width: 90px !important;
          height: 30px !important;
          margin: 0 !important;
      }

      .top-nav a {
          width: 90px !important;
          height: 30px !important;
          background: linear-gradient(180deg, #f96420 0%, #f98b51 100%) !important;
          font-weight: 100;
          font-family: 'Source Sans Pro';
          font-size: 16px;
          border-radius: 5px;
          margin-right: 15px !important;
          text-align: center !important;
          padding-top: 5px;
      }

      .mobile-sidebar-overlay aside#sidebar {
          min-width: 100%;
      }

      .main-content {
          margin: 0 !important;
          min-width: 320px;
          max-width: 100%;
          display: block;
          zoom: 0.92 !important;
      }

      .mobile-show {
          display: block !important;
      }

      .mobile-hidden {
          display: none !important;
      }

      .pt-40 {
          padding-top: 40px;
      }

      .games-grid {
          gap: .6rem !important;
      }

      .game-card {
          min-width: 98px !important;
          max-width: 98px !important;
          width: 98px !important;
          min-height: 132px !important;
          background-size: contain;
      }

      .top-games-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
          grid-gap: 20px;
          gap: 20px;
          padding: 0rem;
      }

      img.feature-icon.two47 {
          width: 77px;
      }

      img.feature-icon.massive {
          width: 131px;
      }

      button.mobile-sidebar-close.mobile-show {
          margin-top: -2px;
      }

      .top-games-grid .game-card {
          min-width: 82px !important;
          max-width: 82px !important;
          width: 82px !important;
          min-height: 110px !important;
          background-size: contain;
      }

      .game-rating {
          background-repeat: no-repeat;
          background-position: 0 10px;
          background-size: 80px;
      }

      .top-games-grid .game-card {
          margin-right: 0px;
      }

      footer.footer_footer__KDdEv {
          width: 96%;
          padding: 0 !important;
          margin-left: 0;
          margin-right: 0 !important;
      }

      .footer-content {
          zoom: 0 !important;
          margin-left: 0 !important;
      }

      .footer_bottomNotice__X0btM {
          padding: 30px !important;
          font-size: 16px !important;
      }

      footer .footer_socialIcons__Mddyo {
          width: 100px !important;
      }

      .footer_linksSection__RbXNQ {
          gap: 60px;
          margin: 0 auto;
          margin-left: 7%;
      }

      .footer_bottomLogos__KALdY {
          position: absolute;
          left: 257px;
          margin-top: -53px !important;
      }


      body.play-mode {
          width: 100% !important;
      }


      .layout.play {
          display: block;
          flex: none;
          height: 100vh;
      }

      .main-content.game {
          max-width: 100%;
          margin: 0 auto;
          padding: 20px;
          padding-top: 88px !important;
          margin-left: 0px !important;
      }

      .in-game {
          height: 100vh !important;
      }

      iframe.game-iframe {
          height: 100vh !important;
      }

      div.toggle-wrap {
          bottom: -80px !important;
          background: #1c1945;
          padding: 16px !important;
          height: 80px !important;
      }

      section.level-progress-container {
          display: grid !important;
          width: 100% !important;
      }

      .card.bg-cover {
          max-height: 172px;
          max-width: 100%;
          display: flex;
          min-height: 125px;
          min-width: 320px;
      }

      section.promo-carousel {
          width: 100vw;
      }

      .intercom-lightweight-app-launcher.intercom-launcher {
          bottom: 70px;
          background: #1d173a !important;
          right: 27px;
      }

      .progress-details {
          padding: 0;
          width: 100vw;
      }

      .card h2 {
          position: absolute;
          margin-left: 15px;
          margin-top: 10px;
          font-size: 24px;
          text-shadow: 4px 1px 5px black;
      }

      .card p {
          position: absolute;
          margin-left: 17px;
          margin-top: 40px;
          font-weight: 700;
          text-shadow: 4px 1px 4px black;
      }

      .actual-progress {
          flex-direction: unset;
          display: flex;
          gap: 10%;
          font-size: 12px;
          margin: 15px;
          margin-bottom: 0;
      }

      .progress-info {
          margin-bottom: 0.5rem !important;
          display: flex !important;
          align-items: center !important;
          width: 150px !important;
      }

      .progress-details .progress-bar {
          margin-left: 7%;
          margin-right: 7%;
      }

      .actual-progress img {
          width: 32px;
          height: 28px;
          margin-left: 8px;
      }

      section.auth-hero {
          margin-bottom: 15px;
          margin-top: 30px;
      }

      .search-container {
          margin-top: -40px;
      }

      img.feature-icon.more-than-950 {
          margin-left: -67px;
          margin-top: -74px;
          width: 136px;
      }

      img.feature-icon.exciting-gifts {
          margin-left: -38px;
          margin-top: -70px;
          width: 89px;
      }

      .sidebar.mobile-open {
          display: block !important;
          width: 100%;
          min-width: 0;
          max-width: 100vw;
          background: #18153d;
          height: 100vh;
          position: static;
          box-shadow: none;
          z-index: 1;
      }

      .mobile-sidebar-overlay aside#sidebar {
          min-width: 100%;
          margin-top: 65px;
      }

      .sidebar-footer {
          width: 100%;
          display: flex;
          position: fixed;
          bottom: 0;
          height: 36px;
          background: #1c1945;
          padding: 10px;
          left: 0;
          height: 65px;
          padding-top: 10px;
      }

      .sidebar-balances {
          display: grid;
          width: 30%;
          font-size: 12px;
          grid-gap: 10px;
          gap: 10px;
      }

      span.sidebar-balance {
          font-family: 'Source Sans Pro';
          font-weight: 600;
          font-size: 12px;
          width: 100px;
      }

      a.sidebar-buy-coins-btn {
          display: grid;
          width: 140px;
          text-align: center;
          border-radius: 5px;
          margin-left: 10%;
          padding: 10px;
          color: #fff;
          text-decoration: none;
          font-family: 'Source Sans Pro';
      }

      a.l-gradient-bg.sidebar-buy-coins-btn.footer-btn {
          position: relative;
          margin-right: 40px;
          min-height: 48px;
          font-weight: bold;
          padding-top: 13px;
          margin-left: 4px;
      }

      .mobile-footer-actions {
          display: flex;
          gap: 7px;
          align-items: center;
          width: 100%;
      }

      button.mobile-footer-hamburger.logged-out {
          margin-left: 42% !important;
      }

      .wallet-balance {
          background: #ffa60021 !important;
          min-width: 165px !important;
          border: 2px solid orange;
          font-size: 14px !important;
      }

      a.top-nav.login-icon {
          min-height: 20px !important;
          padding-bottom: 6px !important;
          margin-top: 1px !important;
      }

      img.steps {
          width: 100%;
          height: auto;
      }

      .mobile-footer-actions button.btn-register.l-gradient-bg {
          position: absolute;
      }

      .sidebar-coin-selector.header-style {
          display: flex;
          margin: 25px 0;
          zoom: 0.985;
      }

      .wallet-divider {
          margin: 0 !important;
          margin-left: -10px !important;
      }

  }