.banner-grid-kuba {
  align-self: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.banner-kuba {
  margin: 7px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.5s;
  animation: shadow 2s infinite alternate;
}

.kuba-transparent {
  background-color: transparent;
  color: black;
  padding-top: 15px;
}

.kuba-main {
  /* Set the background image */
  background-image: url("https://kubatoto-images.pages.dev/background.jpg");
  background-position: top;
  /* Center the image */
  color: white;
  /* Change text color for better contrast */
  background-size: 100%;
}

.daftar {
  padding: 20px;
}

.kuba-main::before {
  content: "";
  /* Required to create the pseudo-element */
  position: absolute;
  /* Absolutely position it within the parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, #96050587 10%, transparent 100%); */
  z-index: 1;
  /* Ensure the overlay is above the image but below the text */
}

.content {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  z-index: 999;
}

.login-wrapper {
  padding: 20px;
}

.kuba-panel-blue {
  margin: 16px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid #f4d03f;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.bank-cashier {
  background-color: white;
  border-radius: 5px;
}

@keyframes kuba-button-shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.kuba-button-login {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 30px;
  text-align: center;
  border: 1px solid #ad0000 !important;
  border-radius: 20px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px #c0392b,
    inset 0 2px 0 0 #c0392b,
    inset 0 4px 4px 2px #ad0000,
    3px 3px 3px 1px rgba(0, 0, 0, 0.2);
}
.kuba-button-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  border-radius: inherit;
  pointer-events: none;
  animation: kuba-button-shine 2.5s ease-in-out infinite;
}

.login-wrapper .home-button-wrapper .btn.btn-1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 50px;
  text-align: center;
  border: 1px solid #ad0000 !important;
  border-radius: 20px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px #c0392b,
    inset 0 2px 0 0 #c0392b,
    inset 0 4px 4px 2px #ad0000,
    3px 3px 3px 1px rgba(0, 0, 0, 0.2);
}
.login-wrapper .home-button-wrapper .btn.btn-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  border-radius: inherit;
  pointer-events: none;
  animation: kuba-button-shine 2.5s ease-in-out infinite;
}

.kuba-button-daftar {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 30px;
  text-align: center;
  border: 1px solid #2471a3 !important;
  border-radius: 6px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #3498db 0%, #2980b9 50%, #1a5276 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px #3498db,
    inset 0 2px 0 0 #2980b9,
    inset 0 4px 4px 2px #1a5276,
    3px 3px 3px 1px rgba(0, 0, 0, 0.2);
}
.kuba-button-daftar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  border-radius: inherit;
  pointer-events: none;
  animation: kuba-button-shine 2.5s ease-in-out infinite;
}

/* Refresh Balance Button - Green realistic styling */
.btn-refresh-balance {
  position: absolute;
  right: 0;
  background: linear-gradient(to bottom, #00f600 0%, #056d00 100%) !important;
  border-radius: 5px;
  padding: 5px;
  color: #fff;
  box-shadow:
    inset 0 0 5px 3px #00cf19,
    inset 0 2px 0 0 #fff;
}

.jackpot-counter {
  font-size: 22px;
  font-weight: bold;
  padding: 28px;
  border-radius: 5px;
  text-align: center;
  color: gold;
  background: url(https://cloud-cdn-images.pages.dev/button/progressif-jackpot.gif)
    center;
  background-size: 100%;
  width: 100%;
  margin: 10px auto;
  height: 70px;
  z-index: 2;
}

.jackpot-container {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 0px;
  justify-content: center;
  border-radius: 0px;
}

.kuba-header-logo2 {
  width: 210px !important;
  height: 63px !important;
}

.smartb2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-white {
  color: white;
}

h3 .dib {
  color: white;
}

.kuba-featured-games {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.kuba-featured-games__item {
  flex: 1;
  max-width: 33.33%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: kuba-pulse 2s ease-in-out infinite;
}

.kuba-featured-games__item:nth-child(1) {
  animation-delay: 0s;
}
.kuba-featured-games__item:nth-child(2) {
  animation-delay: 0.33s;
}
.kuba-featured-games__item:nth-child(3) {
  animation-delay: 0.66s;
}

.kuba-featured-games__item img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes kuba-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.95;
  }
}

#slider-hasil .kuba-slider {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  justify-items: stretch;
  justify-content: center;
}

.kuba-results {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  margin: 5px;
  padding: 0px !important;
  border: solid 1px #f7dc6f !important;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(20, 18, 0, 0.95),
    rgba(28, 26, 0, 0.9)
  );
  color: #faf0c8;
  box-shadow: 0 0 12px rgba(247, 220, 111, 0.2);
}

.kuba-pool-date {
  font-size: 10px;
  color: #faf0a0;
  min-height: 12px;
}

.slick-dots {
  display: none;
}

.slick-slide img {
  width: 100%;
}

.kuba-pool-name {
  color: #2c2a00 !important;
  font-weight: bolder !important;
  text-transform: uppercase;
  font-size: 7px !important;
  width: 100% !important;
  text-align: center !important;
  background: linear-gradient(
    101deg,
    rgb(255 173 0) 4%,
    rgb(255 209 0) 15%,
    rgb(255 213 0) 30%,
    rgb(255 220 0) 69%,
    rgb(255 209 0) 87%,
    rgb(255 178 0) 92%
  );
  background-size: 300% 300%;
  animation: background-gold 8s infinite;
  padding: 3px 2px;
  border: 2px solid #f7dc6f;
}

.kuba-pool-result {
  font-size: 18px !important;
  color: #f9e79f !important;
  text-shadow: 0 0 10px rgba(249, 231, 159, 0.5);
}

.kuba-rules-bg {
  background-image: url("https://i.pinimg.com/736x/7c/6f/7a/7c6f7ad184223e6d4fc58d8f12a599b9.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white;
  height: 100vh;
}

.kuba-rules-bg::before {
  content: "";
  /* Required to create the pseudo-element */
  position: absolute;
  /* Absolutely position it within the parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, #96050587 10%, transparent 100%); */
  z-index: 1;
  /* Ensure the overlay is behind the content */
}

br {
  height: 20px;
}

.main-content {
  background-image: url("https://i.pinimg.com/736x/7c/6f/7a/7c6f7ad184223e6d4fc58d8f12a599b9.jpg") !important;
  color: white;
  background-size: cover;
  background-size: 100%;
}

.main-content::before {
  content: "";
  /* Required to create the pseudo-element */
  position: absolute;
  /* Absolutely position it within the parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, #96050587 10%, transparent 100%); */
  z-index: 1;
  /* Ensure the overlay is above the image but below the text */
}

@keyframes kuba-game-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kuba-lobby-top-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.game-togel a.game-lobby-content,
#game-live a.game-lobby-content,
div#lobtoto > a {
  border: 1px solid #f7dc6f !important;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(20, 18, 0, 0.95),
    rgba(28, 26, 0, 0.9)
  ) !important;
  height: 150px;
  box-shadow: 0 0 12px rgba(247, 220, 111, 0.2);
  opacity: 0;
  animation: kuba-game-card-in 0.5s ease-out forwards;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.game-togel a.game-lobby-content:nth-child(1),
#game-live a.game-lobby-content:nth-child(1),
div#lobtoto > a:nth-child(1) {
  animation-delay: 0.08s;
}
.game-togel a.game-lobby-content:nth-child(2),
#game-live a.game-lobby-content:nth-child(2),
div#lobtoto > a:nth-child(2) {
  animation-delay: 0.16s;
}
.game-togel a.game-lobby-content:nth-child(3),
#game-live a.game-lobby-content:nth-child(3),
div#lobtoto > a:nth-child(3) {
  animation-delay: 0.24s;
}
.game-togel a.game-lobby-content:nth-child(4),
#game-live a.game-lobby-content:nth-child(4),
div#lobtoto > a:nth-child(4) {
  animation-delay: 0.32s;
}
.game-togel a.game-lobby-content:nth-child(5),
#game-live a.game-lobby-content:nth-child(5),
div#lobtoto > a:nth-child(5) {
  animation-delay: 0.4s;
}
.game-togel a.game-lobby-content:nth-child(6),
#game-live a.game-lobby-content:nth-child(6),
div#lobtoto > a:nth-child(6) {
  animation-delay: 0.48s;
}
.game-togel a.game-lobby-content:nth-child(7),
#game-live a.game-lobby-content:nth-child(7),
div#lobtoto > a:nth-child(7) {
  animation-delay: 0.56s;
}
.game-togel a.game-lobby-content:nth-child(8),
#game-live a.game-lobby-content:nth-child(8),
div#lobtoto > a:nth-child(8) {
  animation-delay: 0.64s;
}
.game-togel a.game-lobby-content:nth-child(9),
#game-live a.game-lobby-content:nth-child(9),
div#lobtoto > a:nth-child(9) {
  animation-delay: 0.72s;
}
.game-togel a.game-lobby-content:nth-child(10),
#game-live a.game-lobby-content:nth-child(10),
div#lobtoto > a:nth-child(10) {
  animation-delay: 0.8s;
}
.game-togel a.game-lobby-content:nth-child(n + 11),
#game-live a.game-lobby-content:nth-child(n + 11),
div#lobtoto > a:nth-child(n + 11) {
  animation-delay: 0.88s;
}

.game-togel a.game-lobby-content:hover,
#game-live a.game-lobby-content:hover,
div#lobtoto > a:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(247, 220, 111, 0.4) !important;
}

.casino-provider-wrapper > *,
.slot-content > *,
.arcade-content > *,
.grid.grid-cols-3.mt-3.gap-1 > * {
  opacity: 0;
  animation: kuba-game-card-in 0.5s ease-out forwards;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.casino-provider-wrapper > *:nth-child(1),
.slot-content > *:nth-child(1),
.arcade-content > *:nth-child(1),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(1) {
  animation-delay: 0.08s;
}
.casino-provider-wrapper > *:nth-child(2),
.slot-content > *:nth-child(2),
.arcade-content > *:nth-child(2),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(2) {
  animation-delay: 0.16s;
}
.casino-provider-wrapper > *:nth-child(3),
.slot-content > *:nth-child(3),
.arcade-content > *:nth-child(3),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(3) {
  animation-delay: 0.24s;
}
.casino-provider-wrapper > *:nth-child(4),
.slot-content > *:nth-child(4),
.arcade-content > *:nth-child(4),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(4) {
  animation-delay: 0.32s;
}
.casino-provider-wrapper > *:nth-child(5),
.slot-content > *:nth-child(5),
.arcade-content > *:nth-child(5),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(5) {
  animation-delay: 0.4s;
}
.casino-provider-wrapper > *:nth-child(6),
.slot-content > *:nth-child(6),
.arcade-content > *:nth-child(6),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(6) {
  animation-delay: 0.48s;
}
.casino-provider-wrapper > *:nth-child(7),
.slot-content > *:nth-child(7),
.arcade-content > *:nth-child(7),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(7) {
  animation-delay: 0.56s;
}
.casino-provider-wrapper > *:nth-child(8),
.slot-content > *:nth-child(8),
.arcade-content > *:nth-child(8),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(8) {
  animation-delay: 0.64s;
}
.casino-provider-wrapper > *:nth-child(9),
.slot-content > *:nth-child(9),
.arcade-content > *:nth-child(9),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(9) {
  animation-delay: 0.72s;
}
.casino-provider-wrapper > *:nth-child(10),
.slot-content > *:nth-child(10),
.arcade-content > *:nth-child(10),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(10) {
  animation-delay: 0.8s;
}
.casino-provider-wrapper > *:nth-child(n + 11),
.slot-content > *:nth-child(n + 11),
.arcade-content > *:nth-child(n + 11),
.grid.grid-cols-3.mt-3.gap-1 > *:nth-child(n + 11) {
  animation-delay: 0.88s;
}

.casino-provider-wrapper > *:hover,
.slot-content > *:hover,
.arcade-content > *:hover,
.grid.grid-cols-3.mt-3.gap-1 > *:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(247, 220, 111, 0.4);
}

/* 
.game-togel .effect7,
#game-live .effect7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  color: #faf0c8;
}

.game-title {
  background: linear-gradient(
    101deg,
    rgb(255 173 0) 4%,
    rgb(255 209 0) 15%,
    rgb(255 213 0) 30%,
    rgb(255 220 0) 69%,
    rgb(255 209 0) 87%,
    rgb(255 178 0) 92%
  );
  background-size: 300% 300%;
  animation: background-gold 8s infinite;
  padding: 12px 8px;
  border-radius: 6px 6px 0 0;
  border: 1px solid #f7dc6f;
  color: #2c2a00 !important;
  font-weight: bold !important;
  text-transform: uppercase;
  font-size: 16px !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

.game-togel .game-angka,
#game-live .game-angka {
  padding: 8px 0;
  color: #faf0a0;
}

.game-togel .game-angka .lobby-game-angka-keluar,
#game-live .game-angka .lobby-game-angka-keluar {
  color: #f9e79f !important;
  font-size: 2.5rem !important;
  text-shadow: 0 0 10px rgba(249, 231, 159, 0.5);
}

.game-togel .game-lobby-bottom .timer-game,
#game-live .game-lobby-bottom .timer-game {
  color: #faf0a0 !important;
  font-size: 11px;
} */

.live-header,
.slot-header,
.title-type {
  display: none !important;
}

.slot-content {
  background: none !important;
}

.button-lobby-container .button-lobby-wrapper > .button-filter-lobby {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: auto;
  padding: 6px 12px;
  text-align: center;
  border: 1px solid rgb(255 173 0) !important;
  border-radius: 12px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.button-lobby-container .button-lobby-wrapper > .button-filter-lobby::before {
  display: none !important;
}

.button-lobby-container .button-lobby-wrapper > .button-filter-lobby:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    1px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.button-filter-lobby.btn-category {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: auto;
  padding: 6px 12px;
  text-align: center;
  border: 1px solid rgb(255 173 0) !important;
  border-radius: 12px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.button-filter-lobby.btn-category::before {
  display: none !important;
}

.button-filter-lobby.btn-category:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    1px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.button-filter-lobby.btn-category.active {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  height: auto;
  padding: 6px 12px;
  text-align: center;
  border: 1px solid rgb(255 173 0) !important;
  border-radius: 12px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    2px 2px 2px 1px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(255, 173, 0, 0.4);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.button-filter-lobby.btn-category.active:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    1px 1px 1px 0px rgba(0, 0, 0, 0.3),
    0 0 4px rgba(255, 173, 0, 0.3);
}

/* Hide .note only on lobby - not on banking/deposit/withdraw where notes may be important */
body:not([data-cashier="true"]):not([data-withdraw="true"]) .note {
  display: none !important;
}

.input-cari-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.input-cari-wrapper #cari-game,
.input-cari-wrapper input[type="text"] {
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1a1a1a !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.input-cari-wrapper #cari-game::placeholder,
.input-cari-wrapper input[type="text"]::placeholder {
  color: #888 !important;
}

.input-cari-wrapper #cari-game:focus,
.input-cari-wrapper input[type="text"]:focus {
  border-color: #f7dc6f !important;
  box-shadow: 0 0 0 2px rgba(247, 220, 111, 0.25) !important;
}

.kubatoto-links-container {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 20px;
  background: linear-gradient(
    145deg,
    #4a0000 0%,
    #5a0000 25%,
    #6b0000 50%,
    #5a0000 75%,
    #3a0000 100%
  );
  border: 1px solid rgb(255 173 0);
  border-radius: 12px;
  text-align: center;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 173, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  z-index: 2 !important;
}

.kubatoto-links-container > div:first-child {
  color: #ffae00;
  font-weight: 700;
  margin-bottom: 16px;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.kubatoto-links-container a {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  text-decoration: none;
  padding: 14px 20px;
  margin-bottom: 12px;
  border: 1px solid #ff0 !important;
  border-radius: 12px;
  display: block;
  font-weight: 600;
  font-size: 14px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.06) 40%,
      transparent 70%
    ),
    linear-gradient(45deg,#520000,#c40000);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(196, 0, 0, 0.5),
    2px 2px 2px 1px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.kubatoto-links-container a:last-child {
  margin-bottom: 0;
}

.kubatoto-links-container a:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgba(196, 0, 0, 0.6),
    3px 3px 3px 1px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(255, 255, 0, 0.3);
}

.kubatoto-links-container a:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(196, 0, 0, 0.4),
    1px 1px 1px 0px rgba(0, 0, 0, 0.3),
    0 0 4px rgba(255, 255, 0, 0.2);
}

.dropdown-togel {
  display: none !important;
}

/* Sidebar Styles */
#sidebar.mb-sidenav {
  background: rgba(0, 0, 0, 0.95) !important;
  box-shadow:
    2px 0 15px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 173, 0, 0.1) !important;
}

.sidenav-header {
  background: linear-gradient(
    101deg,
    rgb(255 173 0) 4%,
    rgb(255 209 0) 15%,
    rgb(255 213 0) 30%,
    rgb(255 220 0) 69%,
    rgb(255 209 0) 87%,
    rgb(255 173 0) 92%
  ) !important;
  background-size: 300% 300% !important;
  animation: background-gold 8s infinite !important;
  border-bottom: 2px solid rgb(255 173 0) !important;
  position: relative !important;
}

@keyframes background-gold {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.close-button {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.close-button:hover {
  background: rgba(255, 173, 0, 0.2) !important;
  box-shadow: 0 0 10px rgba(255, 173, 0, 0.4) !important;
}

.close-button svg {
  width: 20px !important;
  height: 20px !important;
}

.side-link-container {
  padding: 8px 0 !important;
}

.side-link {
  color: #fff !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.side-link:hover {
  background: rgba(255, 173, 0, 0.15) !important;
  border-color: rgb(255 173 0) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 0 10px rgba(255, 173, 0, 0.2) !important;
}

.side-link-desc {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.icon-menu {
  width: 24px !important;
  height: 24px !important;
  color: rgb(255 173 0) !important;
  border-radius: 4px !important;
  opacity: 0.8 !important;
  transition: all 0.3s ease !important;
}

.side-link:hover .icon-menu {
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(255, 173, 0, 0.5) !important;
}

.side-link-text {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #fff !important;
}

.side-link-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 2px solid rgb(255 173 0) !important;
  transition: all 0.3s ease !important;
}

.side-link-dot.active {
  background: rgb(255 173 0) !important;
  box-shadow: 0 0 8px rgba(255, 173, 0, 0.6) !important;
}

.side-link:hover .side-link-dot {
  border-color: rgb(255 173 0) !important;
  box-shadow: 0 0 6px rgba(255, 173, 0, 0.4) !important;
}

.badge-red {
  background: linear-gradient(
    to bottom,
    #c0392b 0%,
    #ad0000 50%,
    #ff0000 100%
  ) !important;
  color: #fff !important;
  border: 1px solid rgb(255 173 0) !important;
  box-shadow: 0 0 8px rgba(192, 57, 43, 0.5) !important;
}

/* Deposit Button - Golden realistic styling (like refresh button) */
header.header-after-login .header-wrapper .buttn-header-deposit {
  background: linear-gradient(180deg,#fcd600,#ffae00)!important;
  color: #1a1800 !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  border: 1px solid #ffd54f !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 0 8px 3px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.6) !important;
  padding: 0.9rem 2rem !important;
}

.list-menu-mobile {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.list-menu-mobile a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.list-menu-mobile a img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mb-lobby-balance * {
  color: white !important;
}

.mb-lobby-balance {
  margin-top: 0rem !important;
}

.banner-promotion {
  display: none !important;
}

.main-content {
  background-color: black !important;
}

.lobby-content-top {
  /* background-image: url("https://images-968.pages.dev/kubatoto-2.jpg") !important; */
  background-position: 0px 0 !important;
  background-size: cover !important;
  height: 20rem !important;
  padding-top: 70px !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: end !important;
  animation: kuba-lobby-top-in 0.8s ease-out forwards;
}

.lobby-content-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 90%
  );
  z-index: 1;
}

.game-wrapper .game-lobby-content .game-angka .lobby-game-angka-keluar,
.game-lobby-content .game-angka .lobby-game-angka-keluar {
  color: #f9e79f !important;
  font-size: 2.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(249, 231, 159, 0.5);
}

.game-wrapper .game-lobby-content .game-title,
.game-lobby-content .game-title {
  color: #2c2a00 !important;
  font-size: 15px !important;
  height: auto;
  font-weight: bold !important;
  letter-spacing: 0.5px;
  width: 100% !important;
  padding: 12px 14px !important;
  margin-top: 0;
  text-align: center !important;
  line-height: 1.3;
}

.game-lobby-content .effect7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.game-lobby-content .game-angka {
  text-align: center !important;
  width: 100%;
}

.game-angka {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #faf0a0;
}

/* img.gambar-togel {
  position: absolute;
  height: 35px;
  top: 0px;
  left: 0px;
  border-radius: 0px;
  padding: 2px;
  background: #ea3900;
  border-right: 1px solid #ea3900;
} */

.image-container {
  display: flex;
  flex-direction: column;
  /* Stack images vertically */
  align-items: center;
  /* Center images horizontally */
  gap: 10px;
  /* Add space between the images */
  z-index: 2;
}

.image-item {
  width: 100%;
  /* Make the images take up full container width */
  height: auto;
  /* Maintain aspect ratio */
}

@-webkit-keyframes confetti-fall {
  0% {
    top: -10%;
  }

  100% {
    top: 100%;
  }
}

@-webkit-keyframes confetti-shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@-webkit-keyframes confetti-shake-rotate {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  25% {
    transform: translateX(20px) rotate(90deg);
  }

  50% {
    transform: translateX(-20px) rotate(180deg);
  }

  75% {
    transform: translateX(20px) rotate(270deg);
  }

  100% {
    transform: translateX(0) rotate(360deg);
  }
}

@keyframes confetti-fall {
  0% {
    top: -10%;
  }

  100% {
    top: 100%;
  }
}

@keyframes confetti-shake-rotate {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  25% {
    transform: translateX(20px) rotate(90deg);
  }

  50% {
    transform: translateX(-20px) rotate(180deg);
  }

  75% {
    transform: translateX(20px) rotate(270deg);
  }

  100% {
    transform: translateX(0) rotate(360deg);
  }
}

.confetti {
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: confetti-fall, confetti-shake-rotate;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: confetti-fall, confetti-shake-rotate;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

.confetti:nth-of-type(0) {
  left: 1%;
  -webkit-animation-delay: 0s, 0s, 0s;
  animation-delay: 0s, 0s, 0s;
}

.confetti:nth-of-type(1) {
  left: 10%;
  -webkit-animation-delay: 1s, 1s, 1s;
  animation-delay: 1s, 1s, 1s;
}

.confetti:nth-of-type(2) {
  left: 20%;
  -webkit-animation-delay: 6s, 0.5s, 0s;
  animation-delay: 6s, 0.5s, 0s;
}

.confetti:nth-of-type(3) {
  left: 30%;
  -webkit-animation-delay: 4s, 2s, 0s;
  animation-delay: 4s, 2s, 0s;
}

.confetti:nth-of-type(4) {
  left: 40%;
  -webkit-animation-delay: 2s, 2s, 2s;
  animation-delay: 2s, 2s, 2s;
}

.confetti:nth-of-type(5) {
  left: 50%;
  -webkit-animation-delay: 8s, 3s, 3s;
  animation-delay: 8s, 3s, 3s;
}

.confetti:nth-of-type(6) {
  left: 60%;
  -webkit-animation-delay: 6s, 2s, 2s;
  animation-delay: 6s, 2s, 2s;
}

.confetti:nth-of-type(7) {
  left: 70%;
  -webkit-animation-delay: 2.5s, 1s, 3s;
  animation-delay: 2.5s, 1s, 3s;
}

.confetti:nth-of-type(8) {
  left: 80%;
  -webkit-animation-delay: 1s, 0s, 2s;
  animation-delay: 1s, 0s, 2s;
}

.confetti:nth-of-type(9) {
  left: 90%;
  -webkit-animation-delay: 3s, 1.5s, 1s;
  animation-delay: 3s, 1.5s, 1s;
}

.confetti:nth-of-type(10) {
  left: 25%;
  -webkit-animation-delay: 2s, 0s, 0s;
  animation-delay: 2s, 0s, 0s;
}

.confetti:nth-of-type(11) {
  left: 65%;
  -webkit-animation-delay: 4s, 2.5s, 2s;
  animation-delay: 4s, 2.5s, 2s;
}

#bankTabs {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px;
  padding: 8px;
}

/* Bank tab button styling */
#bankTabs .tablinks {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 12px 16px;
  text-align: center;
  border: 1px solid rgb(255 173 0) !important;
  border-radius: 12px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#bankTabs .tablinks:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    3px 3px 3px 1px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(255, 173, 0, 0.3);
}

#bankTabs .tablinks:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    1px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

/* Active state styling */
#bankTabs .tablinks.active {
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    2px 2px 2px 1px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(255, 173, 0, 0.4);
}

#bankTabs .tablinks.active:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgb(255 173 0),
    inset 0 2px 0 0 rgb(255 173 0),
    inset 0 4px 4px 2px #ad0000,
    3px 3px 3px 1px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 173, 0, 0.5);
}

/* Menu icon styling */
#bankTabs .tablinks .menu-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Category title styling */
#bankTabs .tablinks .category-title {
  font-size: 14px;
  font-weight: inherit;
  color: #fff;
}

/* Bank container styling */
#bank {
  padding: 20px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgb(255 173 0) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(255, 173, 0, 0.15);
  color: #fff;
  position: relative;
}

/* Bank info rows styling */
#bank .relative.flex {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 173, 0, 0.2);
}

#bank .relative.flex:last-child {
  border-bottom: none;
}

/* Bank labels and values */
#bank .w-5\/12,
#bank .w-6\/12 {
  color: #fff;
}

#bank .w-5\/12 {
  font-weight: 600;
  color: rgb(255 173 0);
}

#bank .w-6\/12 {
  color: #fff;
}

/* Dropdown container styling */
#bank .dd-container {
  border: 1px solid rgb(255 173 0);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
}

#bank .dd-select {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgb(255 173 0);
  border-radius: 8px;
  color: #fff;
}

#bank .dd-selected {
  color: #fff;
}

#bank .dd-selected-text {
  color: #fff;
}

/* Deposit input field styling */
#bank #deposit {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgb(255 173 0) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 10px 12px;
}

#bank #deposit:focus {
  outline: none;
  border-color: rgb(255 173 0) !important;
  box-shadow: 0 0 8px rgba(255, 173, 0, 0.4);
}

#bank #deposit::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Reset amount button */
#bank .reset-amount {
  color: rgb(255 173 0);
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  transition: color 0.2s ease;
}

#bank .reset-amount:hover {
  color: #fff;
}

/* Submit button styling */
/* Parent container for submit button - remove padding */
#bank .p-3.relative:has(.submit-depo),
#bank div:has(.submit-depo) {
  scroll-padding-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Remove margin-top from submit button */
#bank .submit-depo.mt-3 {
  margin-top: 0 !important;
}

#bank .submit-depo {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  cursor: pointer;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #ad0000 !important;
  border-radius: 20px !important;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px #c0392b,
    inset 0 2px 0 0 #c0392b,
    inset 0 4px 4px 2px #ad0000,
    3px 3px 3px 1px rgba(0, 0, 0, 0.2);
}

#bank .submit-depo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  border-radius: inherit;
  pointer-events: none;
  animation: kuba-button-shine 2.5s ease-in-out infinite;
}

/* Copy button styling */
#bank .copier {
  color: rgb(255 173 0) !important;
  transition: color 0.2s ease;
}

#bank .copier:hover {
  color: #fff !important;
}

/* Internet banking links */
#bank .link-ibanking {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgb(255 173 0);
  border-radius: 8px;
  padding: 10px;
  margin: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  color: #fff;
  text-decoration: none;
}

#bank .link-ibanking:hover {
  background: rgba(255, 173, 0, 0.2);
  box-shadow: 0 0 8px rgba(255, 173, 0, 0.4);
  transform: translateY(-1px);
}

#bank .link-ibanking img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Bank status items */
#bank .bank-status-item-parent {
  background: #fff;
  border: 1px solid rgba(255, 173, 0, 0.3);
  border-radius: 8px;
  margin: 4px;
}

#bank .bank-cashier {
  border-radius: 8px;
}

#bank .img-bank-cashier {
  filter: brightness(1.1);
}

/* Dot status indicators */
#bank .dot.online {
  background-color: #28a745;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
}

#bank .dot.offline {
  background-color: #dc3545;
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}

#bank .dot.gangguan {
  background-color: #ffc107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}

/* Rules section */
#bank .rules-list {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 173, 0, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

#bank .rules-list li {
  color: #fff;
  margin-bottom: 8px;
  padding-left: 8px;
}

#bank .rules-list li:last-child {
  margin-bottom: 0;
}

/* Notice warning */
#bank .notice-warning-bank {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgb(255 173 0);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
}

/* QRIS barcode container */
#bank #qris-barcode {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgb(255 173 0);
  border-radius: 8px;
  margin: 16px 0;
}

/* HR styling */
#bank hr {
  border-color: rgba(255, 173, 0, 0.3);
  margin: 16px 0;
}

/* Withdraw page styling - only applies on /withdraw page */
body[data-withdraw="true"],
body:has([data-page="withdraw"]) {
  background-image: url("https://i.pinimg.com/736x/7c/6f/7a/7c6f7ad184223e6d4fc58d8f12a599b9.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body[data-withdraw="true"] .main-content,
body:has([data-page="withdraw"]) .main-content,
.main-content[data-withdraw="true"] {
  background: rgba(0, 0, 0, 0.85) !important;
  border: 1px solid rgb(255 173 0) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(255, 173, 0, 0.15);
  padding: 20px;
  color: #fff;
  position: relative;
}

/* Black overlay on main-content */
body[data-withdraw="true"] .main-content::before,
body:has([data-page="withdraw"]) .main-content::before,
.main-content[data-withdraw="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 12px;
  z-index: -1;
}

/* Ensure content is above overlay */
body[data-withdraw="true"] .main-content > *,
body:has([data-page="withdraw"]) .main-content > *,
.main-content[data-withdraw="true"] > * {
  position: relative;
  z-index: 1;
}

/* Withdraw page title */
body:has([data-page="withdraw"]) .title-page,
.main-content[data-withdraw="true"] .title-page {
  color: rgb(255 173 0) !important;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  position: relative;
  z-index: 2;
}

/* Form container styling */
body:has([data-page="withdraw"]) .form-withdraw-container,
.main-content[data-withdraw="true"] .form-withdraw-container {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 173, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Form input containers */
body:has([data-page="withdraw"]) .form-container-input-wd,
.main-content[data-withdraw="true"] .form-container-input-wd {
  margin-bottom: 16px;
}

body:has([data-page="withdraw"]) .form-container-input-wd p,
.main-content[data-withdraw="true"] .form-container-input-wd p {
  color: rgb(255 173 0);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Input fields */
body:has([data-page="withdraw"]) .form-container-input-wd input,
.main-content[data-withdraw="true"] .form-container-input-wd input {
  width: 100%;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgb(255 173 0) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
}

body:has([data-page="withdraw"]) .form-container-input-wd input:focus,
.main-content[data-withdraw="true"] .form-container-input-wd input:focus {
  outline: none;
  border-color: rgb(255 173 0) !important;
  box-shadow: 0 0 8px rgba(255, 173, 0, 0.4);
}

body:has([data-page="withdraw"]) .form-container-input-wd input::placeholder,
.main-content[data-withdraw="true"]
  .form-container-input-wd
  input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Bank info display */
body:has([data-page="withdraw"]) .form-container-input-wd span,
.main-content[data-withdraw="true"] .form-container-input-wd span {
  color: #fff;
}

/* Dana akan dikirim ke text */
body:has([data-page="withdraw"]) .p-dana,
.main-content[data-withdraw="true"] .p-dana {
  color: rgb(255 173 0) !important;
  font-weight: 600;
  text-align: center;
  margin: 20px 0;
  font-size: 18px;
}

/* Button container */
body:has([data-page="withdraw"]) .wd-btn-container,
.main-content[data-withdraw="true"] .wd-btn-container {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Withdraw buttons */
body:has([data-page="withdraw"]) .btn-wd,
.main-content[data-withdraw="true"] .btn-wd {
  flex: 1;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 20px !important;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Kirim button (submit) */
body:has([data-page="withdraw"]) .btn-kirim,
.main-content[data-withdraw="true"] .btn-kirim {
  border: 1px solid #ad0000 !important;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      transparent 70%
    ),
    linear-gradient(to bottom, #c0392b 0%, #ad0000 50%, #ff0000 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px #c0392b,
    inset 0 2px 0 0 #c0392b,
    inset 0 4px 4px 2px #ad0000,
    3px 3px 3px 1px rgba(0, 0, 0, 0.2);
}

body:has([data-page="withdraw"]) .btn-kirim::before,
.main-content[data-withdraw="true"] .btn-kirim::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  border-radius: inherit;
  pointer-events: none;
  animation: kuba-button-shine 2.5s ease-in-out infinite;
}

/* Batal button (cancel) */
body:has([data-page="withdraw"]) .btn-batal,
.main-content[data-withdraw="true"] .btn-batal {
  border: 1px solid rgb(255 173 0) !important;
  background: rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

body:has([data-page="withdraw"]) .btn-batal:hover,
.main-content[data-withdraw="true"] .btn-batal:hover {
  background: rgba(255, 173, 0, 0.2);
  box-shadow: 0 0 8px rgba(255, 173, 0, 0.4);
}

/* Withdraw info section */
body:has([data-page="withdraw"]) .withdrwa-info,
.main-content[data-withdraw="true"] .withdrwa-info {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 173, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
}

body:has([data-page="withdraw"]) .withdrwa-info pre,
.main-content[data-withdraw="true"] .withdrwa-info pre {
  color: #fff;
  font-family: inherit;
  white-space: pre-wrap;
  margin: 0;
}

/* Message styling */
body:has([data-page="withdraw"]) .message-wd,
.main-content[data-withdraw="true"] .message-wd {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgb(255 173 0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

body:has([data-page="withdraw"]) .message-wd-title,
.main-content[data-withdraw="true"] .message-wd-title {
  color: rgb(255 173 0);
  font-weight: 700;
  margin-bottom: 8px;
}

body:has([data-page="withdraw"]) .message-wd-text,
.main-content[data-withdraw="true"] .message-wd-text {
  color: #fff;
}

/* Cashier page title container - black background */
body[data-cashier="true"] .text-center.animated.fadeInDown,
body:has([data-page="cashier"]) .text-center.animated.fadeInDown,
body[data-cashier="true"] div:has(h1.text-center),
body:has([data-page="cashier"]) div:has(h1.text-center),
body[data-cashier="true"] div > div.text-center,
body:has([data-page="cashier"]) div > div.text-center {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Cashier page - only hide the Kasir title div, not all .text-center elements */
body[data-cashier="true"] .text-center.animated.fadeInDown.font-bold.mb-3.py-2.no-border.md\:text-xl.lg\:text-2xl.xl\:text-3xl,
body:has([data-page="cashier"]) .text-center.animated.fadeInDown.font-bold.mb-3.py-2.no-border.md\:text-xl.lg\:text-2xl.xl\:text-3xl {
  display: none !important;
}