/* ==========================================================================
   BTN Housingpreneur — Popup pengingat penutupan pendaftaran lomba
   Versi 1.0 · 26 Oktober 2026
   --------------------------------------------------------------------------
   - Tanpa dependensi. Tidak memakai framework CSS apa pun.
   - Semua kelas diawali `btnhp-deadline` supaya tidak bentrok dengan CSS situs.
   - Semua properti ditulis eksplisit (margin, padding, line-height, dll) supaya
     tidak terpengaruh reset/normalize bawaan tema.
   - Warna state diatur lewat variabel di blok `.btnhp-deadline`; untuk mengubah
     palet ganti nilainya di sana, bukan selektor satu per satu.
   ========================================================================== */

.btnhp-deadline {
  /* palet (dari token desain BTN Housingpreneur) */
  --btnhp-blue: #125EFA;
  --btnhp-ink: #102042;
  --btnhp-muted: #63728B;
  --btnhp-amber: #FFB800;
  --btnhp-amber-on: #4A2E00;    /* angka di atas kuning — 7,2:1 */
  --btnhp-surface: #FFFFFF;

  /* Merah di sini SATU TINGKAT lebih dalam daripada token desain
     `accent/red` #FE2844. Alasannya kontras: angka putih di atas #FE2844
     hanya 3,8:1 (gagal WCAG AA 4,5:1), sedangkan di atas #E6102F 4,7:1.
     Preseden yang sama sudah ada di file desain — `card/teal` pernah
     digelapkan dari #00AEB7 ke #00737C karena alasan ini juga. */
  --btnhp-red: #E6102F;

  /* diganti per state di bagian STATE di bawah */
  --btnhp-accent: var(--btnhp-blue);         /* warna bilah hitung mundur  */
  --btnhp-on-accent: #FFFFFF;                /* warna angka di atas bilah  */
  --btnhp-divider: rgba(255, 255, 255, .22); /* pemisah antar segmen       */

  /* penempatan — ubah di sini kalau mau pindah sudut */
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9990;
  width: 380px;
  max-width: calc(100vw - 48px);

  box-sizing: border-box;
  margin: 0;
  padding: 15px 16px 16px;
  background: var(--btnhp-surface);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 25, 51, .24), 0 2px 6px rgba(10, 25, 51, .08);

  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--btnhp-ink);
  text-align: left;

  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .38s ease, transform .38s cubic-bezier(.2, .8, .25, 1);
}

.btnhp-deadline * { box-sizing: border-box; }
.btnhp-deadline[hidden] { display: none; }

/* kelas ini yang ditambahkan JS saat popup ditampilkan */
.btnhp-deadline.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --------------------------------------------------------- judul & subjudul */
.btnhp-deadline__title {
  margin: 0;
  padding: 0 26px 0 0;          /* ruang untuk tombol tutup */
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.2px;
  color: var(--btnhp-ink);
}

.btnhp-deadline__text {
  margin: 5px 0 0;
  padding: 0 4px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--btnhp-muted);
}

/* ---------------------------------------------------- bilah hitung mundur */
/* Bilah inilah penanda urgensinya: biru -> kuning (H-7) -> merah (H-3).    */
.btnhp-deadline__count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 11px 0 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--btnhp-accent);
  transition: background .3s ease;
}

.btnhp-deadline__unit {
  padding: 7px 0 6px;
  text-align: center;
  box-shadow: inset 1px 0 0 var(--btnhp-divider);
}

.btnhp-deadline__unit:first-child { box-shadow: none; }

.btnhp-deadline__value {
  display: block;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--btnhp-on-accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Label unit ditulis dengan warna penuh, tanpa opacity. Pada 7,5px, menurunkan
   opacity ke .8 menjatuhkan kontrasnya ke 3,9:1 di bilah biru — gagal AA. */
.btnhp-deadline__label {
  display: block;
  margin: 1px 0 0;
  font-size: 7.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--btnhp-on-accent);
}

/* ------------------------------------------------------------------ tombol */
/* Sengaja TIDAK ikut berubah warna mengikuti state: bilah hitung mundur
   dibiarkan jadi satu-satunya sinyal urgensi.                               */
.btnhp-deadline__cta {
  display: block;
  margin: 10px 0 0;
  padding: 0;
  height: 38px;
  line-height: 38px;
  border-radius: 999px;
  background: var(--btnhp-ink);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease;
}

.btnhp-deadline__cta:hover,
.btnhp-deadline__cta:focus { background: #060F24; color: #FFFFFF; text-decoration: none; }
.btnhp-deadline__cta:focus-visible { outline: 2px solid var(--btnhp-blue); outline-offset: 2px; }

/* ------------------------------------------------------------ tombol tutup */
.btnhp-deadline__close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 32, 66, .06);
  color: var(--btnhp-muted);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
  -webkit-appearance: none;
          appearance: none;
}

.btnhp-deadline__close:hover { background: rgba(16, 32, 66, .12); color: var(--btnhp-ink); }
.btnhp-deadline__close:focus-visible { outline: 2px solid var(--btnhp-blue); outline-offset: 2px; }

/* ----------------------------------------------- teks khusus pembaca layar */
.btnhp-deadline__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================== STATE ================================= */

/* H-7 ke bawah — kuning.
   Angkanya cokelat tua, bukan putih: putih di atas kuning hanya 1,9:1 dan
   tidak terbaca. Kombinasi yang dipakai di sini 7,2:1. */
.btnhp-deadline.is-warn {
  --btnhp-accent: var(--btnhp-amber);
  --btnhp-on-accent: var(--btnhp-amber-on);
  --btnhp-divider: rgba(74, 46, 0, .20);
}

/* H-3 ke bawah — merah */
.btnhp-deadline.is-urgent {
  --btnhp-accent: var(--btnhp-red);
  --btnhp-on-accent: #FFFFFF;
  --btnhp-divider: rgba(255, 255, 255, .22);
}

/* Sudah lewat batas waktu — hitung mundur dan tombol disembunyikan,
   teksnya diganti JS (lihat atribut data-closed-* pada markup) */
.btnhp-deadline.is-closed .btnhp-deadline__count,
.btnhp-deadline.is-closed .btnhp-deadline__cta { display: none; }

/* ================================ RESPONSIF =============================== */

@media (max-width: 480px) {
  .btnhp-deadline {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 14px 15px 15px;
    border-radius: 16px;
  }
  .btnhp-deadline__title { font-size: 14px; }
  .btnhp-deadline__value { font-size: 16px; }
  .btnhp-deadline__cta { height: 36px; line-height: 36px; font-size: 12px; }
}

/* ============================ PREFERENSI PENGGUNA ========================= */

@media (prefers-reduced-motion: reduce) {
  .btnhp-deadline { transition: none; transform: none; }
  .btnhp-deadline__count { transition: none; }
}

@media print {
  .btnhp-deadline { display: none !important; }
}