/* ------------------------------------------------------------------
   Popup halaman beranda (playstore).
   Di-port dari index_old.html: kerangka .modal/.modal-card milik
   playstore.css (toggle .is-open), bukan modal Bootstrap.
   Dimuat setelah playstore.css + site-shell.css.
------------------------------------------------------------------ */
/* tombol aksi popup = tombol "Main Sekarang" (.play-now) di beranda */
.modal-card .play-now {
  width: 100%;
  max-width: calc(253 * var(--u));
  margin-bottom: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
}

.modal-card .play-now + .play-now { margin-top: calc(12 * var(--u)) }

.modal-card > img {
  display: block;
  width: 100%;
  max-width: calc(176 * var(--u));
  height: auto;
  margin: 0 auto calc(14 * var(--u));
}

.modal-card h2 + p { margin-bottom: calc(18 * var(--u)) }
.modal-card .play-now + p { margin-top: calc(12 * var(--u)) }

/* ---------- popup check-in ---------- */
.modal-card.checkin {
  max-width: calc(var(--dev-w) - 40 * var(--u));
  max-height: 88vh;
  overflow-y: auto;
  padding: calc(20 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  background: #fff9db;
}

.modal-card.checkin > p { margin-bottom: calc(14 * var(--u)) }

.check-in-gift {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(7 * var(--u));
}

.check-in-item {
  position: relative;
  padding: calc(6 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #ffd500;
  overflow: hidden;
}

.check-in-item h6 {
  margin: 0 0 calc(4 * var(--u));
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: 1.2;
}

.check-in-check {
  position: absolute;
  inset: 0;
  background: #ffd500b3;
}

.check-in-check img {
  width: 45%;
  height: 45%;
  transform: translate(0, 94%);
}

.circ-red-wrap {
  width: 100%;
  max-width: calc(52 * var(--u));
  margin: 0 auto;
}

.circ-red {
  position: relative;
  padding-bottom: 100%;
  border-radius: 50%;
  background: #ec1c23;
}

.circ-red-sm {
  position: absolute;
  top: -14%;
  right: -17%;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: #ec1c23;
}

.circ-red-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: calc(15 * var(--u));
  line-height: 1;
}

.circ-red-txt span { font-size: calc(10 * var(--u)) }

/* ---------- pilihan hadiah day 7 ---------- */
.check-in-gift-opt {
  position: relative;
  margin: calc(7 * var(--u)) 0 calc(18 * var(--u));
  padding: calc(34 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #ffd500;
  overflow: hidden;
}

.check-in-gift-opt.lock { pointer-events: none }

.gift-left {
  position: absolute;
  top: 0;
  left: 0;
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-bottom-right-radius: calc(18 * var(--u));
  background: #000;
  color: #fff;
  font-family: ooredoo-heavy, ooredoo, sans-serif;
  font-weight: 900;
  font-size: calc(12 * var(--u));
}

.gift-right {
  position: absolute;
  top: calc(6 * var(--u));
  right: calc(20 * var(--u));
  font-weight: 400;
  font-size: calc(15 * var(--u));
}

.gift-opt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(7 * var(--u));
}

.gift-opt-item {
  position: relative;
  padding: calc(10 * var(--u)) 0 calc(6 * var(--u));
}

.gift-opt-item input[type=radio] {
  position: absolute;
  visibility: hidden;
}

.gift-opt-item-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(18 * var(--u));
}

.gift-opt-item label {
  position: relative;
  z-index: 1;
  display: block;
  cursor: pointer;
  transition: color 150ms linear;
}

.gift-opt-item .check {
  position: absolute;
  right: calc(5 * var(--u));
  bottom: calc(5 * var(--u));
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  border: calc(3 * var(--u)) solid #fff;
  border-radius: 50%;
  transition: border 150ms linear;
}

.gift-opt-item .check::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 150ms linear;
}

.gift-opt-item input[type=radio]:checked ~ .check { border-color: #fff }
.gift-opt-item input[type=radio]:checked ~ .check::before { background: #0ab811 }
.gift-opt-item input[type=radio]:checked ~ label { color: #0ab811 }
.gift-opt-item input[type=radio]:checked ~ .gift-opt-item-bg { background: #fff9db }
.gift-opt-item .circ-red-wrap { max-width: 72% }

.gift-hex-text {
  color: #ec1c23;
  font-size: calc(12 * var(--u));
  line-height: .7;
}

.gift-hex-dtl {
  position: relative;
  padding-bottom: 68%;
  background: url('https://s.tykcdn.com/assets/gabut_ioh/icon/diamond.svg') no-repeat center center;
  background-size: 90%;
  color: #fff;
}

.gift-hex-dtl-inner {
  position: absolute;
  top: calc(10 * var(--u));
  left: 50%;
  transform: translateX(-50%);
}

.gift-hex-dtl-inner div:nth-child(1) {
  font-size: calc(17 * var(--u));
  line-height: .8;
}

.gift-hex-dtl-inner div:nth-child(2) {
  font-weight: 400;
  font-size: calc(8 * var(--u));
}

/* ---------- popup voucher ---------- */
.modal-card.voucher > img { max-width: calc(152 * var(--u)) }

.form-voucher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(56 * var(--u));
  margin: 0 0 calc(14 * var(--u));
  padding: 0 calc(6 * var(--u)) 0 0;
  border: 1px solid #000;
  border-radius: calc(40 * var(--u));
}

.form-voucher input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-family: ooredoo, sans-serif;
  font-weight: 700;
  font-size: calc(20 * var(--u));
  text-align: center;
}

.form-voucher .copy {
  width: calc(64 * var(--u));
  height: calc(32 * var(--u));
  flex: none;
  border: 0;
  background: url('https://s.tykcdn.com/assets/gabut_ioh/icon/copy.svg') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

.form-voucher .copy.copied {
  background-image: url('https://s.tykcdn.com/assets/gabut_ioh/icon/copied.svg');
}

/* ---------- popup CS ---------- */
.modal-card.cs {
  padding: 0;
  background: none;
  box-shadow: none;
}

.modal-card.cs > img {
  max-width: 100%;
  margin: 0;
}

.modal-card.cs .modal-close {
  top: calc(-6 * var(--u));
  right: calc(-6 * var(--u));
}

/* ---------- panel uji coba popup (DUMMY) ----------
   Hanya untuk memicu tiap popup saat pengembangan.
   Hapus blok CSS ini beserta <section class="demo-modal"> di body
   sebelum rilis ke produksi. */
.demo-modal {
  margin: calc(20 * var(--u)) calc(25 * var(--u)) 0;
  padding: calc(14 * var(--u));
  border: calc(2 * var(--u)) dashed #c8130a;
  border-radius: calc(15 * var(--u));
  background: #fffaea;
}

.demo-modal h3 {
  margin: 0 0 calc(4 * var(--u));
  font-family: ooredoo-heavy, ooredoo, sans-serif;
  font-weight: 900;
  font-size: calc(14 * var(--u));
  text-align: center;
}

.demo-modal p {
  margin: 0 0 calc(12 * var(--u));
  font-weight: 400;
  font-size: calc(11 * var(--u));
  line-height: 1.4;
  text-align: center;
  color: #8a6f2c;
}

.demo-modal-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}

.demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(42 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border: calc(3 * var(--u)) solid #ffedbc;
  border-radius: calc(23 * var(--u));
  background: #fff;
  color: #153c34;
  font-family: ooredoo, sans-serif;
  font-weight: 700;
  font-size: calc(12.5 * var(--u));
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
}

.demo-btn.wide { grid-column: 1 / -1 }