/* ==================================================
   KHUSUS TOMBOL PILIHAN DI /PASANG-TOGEL
   Tidak memengaruhi halaman Cara Bermain Togel
================================================== */

body .hexa-pasang-choice {
  position: relative !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: calc(100% - 8px) !important;
  min-height: 40px !important;
  margin: 4px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;

  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  opacity: 1 !important;

  background:
    radial-gradient(
      circle at top,
      rgba(193, 70, 240, 0.28),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(91, 14, 125, 0.96),
      rgba(36, 2, 51, 0.98)
    ) !important;

  border: 1px solid rgba(255, 215, 64, 0.72) !important;
  border-radius: 7px !important;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 0 5px rgba(190, 63, 238, 0.35) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -5px 10px rgba(0, 0, 0, 0.24),
    0 3px 8px rgba(0, 0, 0, 0.42) !important;

  cursor: pointer !important;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

/* Paksa teks di dalam tombol tetap terlihat */
body .hexa-pasang-choice *,
body .hexa-pasang-choice span,
body .hexa-pasang-choice small {
  color: inherit !important;
  font-weight: inherit !important;
  opacity: 1 !important;
  text-shadow: inherit !important;
}

/* Garis emas kecil seperti tombol Cara Bermain */
body .hexa-pasang-choice::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 3px;
  left: 18%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #ffe878,
    transparent
  );

  opacity: 0.75;
}

/* Hover desktop */
body .hexa-pasang-choice:hover {
  color: #fff2a1 !important;

  background:
    radial-gradient(
      circle at top,
      rgba(218, 84, 255, 0.42),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #7c19a6,
      #3c0651
    ) !important;

  border-color: #ffd740 !important;

  box-shadow:
    0 6px 13px rgba(0, 0, 0, 0.52),
    0 0 11px rgba(255, 215, 64, 0.3) !important;

  transform: translateY(-1px) !important;
}

/* Tombol yang sedang dipilih */
body .hexa-pasang-choice.active,
body .active > .hexa-pasang-choice,
body .selected > .hexa-pasang-choice,
body .hexa-pasang-choice.selected,
body .hexa-pasang-choice.btn-primary,
body .hexa-pasang-choice.bg-primary,
body .hexa-pasang-choice[aria-selected="true"],
body .hexa-pasang-choice:has(input:checked) {
  color: #21002d !important;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 255, 255, 0.76),
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #fff3a3,
      #ffd740 38%,
      #c68d00 72%,
      #ffe878
    ) !important;

  border-color: #fff1a0 !important;
  text-shadow: none !important;

  box-shadow:
    0 0 0 1px rgba(75, 0, 100, 0.75),
    0 0 13px rgba(255, 215, 64, 0.58),
    0 5px 10px rgba(0, 0, 0, 0.45) !important;
}

/* Teks tombol aktif */
body .hexa-pasang-choice.active *,
body .active > .hexa-pasang-choice *,
body .selected > .hexa-pasang-choice *,
body .hexa-pasang-choice.selected *,
body .hexa-pasang-choice.btn-primary *,
body .hexa-pasang-choice.bg-primary *,
body .hexa-pasang-choice[aria-selected="true"] * {
  color: #21002d !important;
  text-shadow: none !important;
}

/* Tampilan HP */
@media (max-width: 575px) {
  body .hexa-pasang-choice {
    min-height: 38px !important;
    margin: 3px !important;
    width: calc(100% - 6px) !important;
    padding: 7px 5px !important;
    font-size: 10px !important;
  }
}


/* ==================================================
   FIX POPUP KONFIRMASI PASANG TOGEL
================================================== */

/* Hilangkan stacking context yang mengurung modal */
body.modal-open #maincontent {
  z-index: auto !important;
  overflow: visible !important;
}

/* Wrapper tidak boleh mengunci posisi modal */
body.modal-open > .wrapper {
  z-index: auto !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  isolation: auto !important;
}

/* Backdrop tetap gelap, tetapi berada di belakang popup */
body.modal-open > .modal-backdrop {
  z-index: 19990 !important;
  pointer-events: auto !important;
}

body.modal-open > .modal-backdrop.show {
  opacity: 0.62 !important;
}

/* Popup selalu berada di atas backdrop */
body.modal-open > .modal {
  z-index: 20000 !important;
}

body.modal-open > .modal.show {
  display: block !important;
  pointer-events: auto !important;
}

/* Semua isi popup dapat diklik */
body.modal-open > .modal .modal-dialog {
  position: relative !important;
  z-index: 20001 !important;
  pointer-events: auto !important;
}

body.modal-open > .modal .modal-content,
body.modal-open > .modal .modal-header,
body.modal-open > .modal .modal-body,
body.modal-open > .modal .modal-footer,
body.modal-open > .modal button,
body.modal-open > .modal a,
body.modal-open > .modal input {
  pointer-events: auto !important;
}