/* ============================================================
   SIPKL - PWA: tombol Pasang + panduan iOS
   ------------------------------------------------------------
   File terpisah, bukan disisipkan ke style.css, karena:
     1. style.css sudah 11.700 baris dan block PWA cuma dipakai
        di footer -- menyisipkannya ke sana menambah ukuran
        yang diunduh EVERY halaman tanpa dipakai Cetak/A4;
     2. halaman cetak (A4) tidak boleh memuatnya sama sekali.

   Dimsukukan setelah style.css + tema.css (lihat pwa_head),
   jadi menimpa aturan footer yang ada tanpa menaikkan
   specificity.
   ============================================================ */

/* ---------- Tombol Pasang ---------- */

.pwa-install {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: .5rem .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--t-primary, #10b981), var(--t-primary-2, #059669));
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 16px -10px var(--t-glow, rgba(5, 150, 105, .55));
  /* <button> tidak mewarisi font dari body secara default, jadi
     tanpa baris ini tombolnya tampil dengan font sistem --
     terlihat berbeda dari seluruh teks lain di footer. */
  font-family: inherit;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: .18s;
}

.pwa-install:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.pwa-install:focus-visible {
  outline: 2px solid var(--t-teks, #047857);
  outline-offset: 2px;
}

/* Tombol disembunyikan sampai browser menyatakan aplikasi bisa
   di-install (Chrome) -- atau selamanya di iPhone, yang tidak
   punya dialog otomatis. Aturan `hidden` di bawah wajib ada:
   tanpa itu, [hidden] tetap terlihat karena .pwa-install
   menyetel display:inline-flex yang mengalahkan nilai bawaan
   `display:none` milik atribut hidden. */
.pwa-install[hidden] {
  display: none !important;
}

/* ---------- Panduan langkah demi langkah (iOS) ---------- */
.pwa-panduan {
  text-align: left;
}

.pwa-panduan > p {
  margin: 0 0 14px;
  color: var(--admin-muted, #55647a);
  font-size: .82rem;
  line-height: 1.65;
}

.pwa-panduan ol {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: pwa;
}

.pwa-panduan li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--admin-ink, #0b1220);
  font-size: .82rem;
  line-height: 1.6;
  counter-increment: pwa;
}

.pwa-panduan li::before {
  content: counter(pwa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--t-teks, #047857);
  background: var(--t-soft-2, #d9f9e9);
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
}

.pwa-panduan li b {
  font-weight: 800;
}

/* Catatan kecil di bawah. Penyebab paling sering tombolnya
   tidak muncul di Android adalah aplikasi yang sudah
   ter-install -- dan itu memang tidak perlu diulang. */
.pwa-panduan small {
  display: block;
  padding: 11px 13px;
  color: var(--admin-muted, #55647a);
  background: var(--t-soft, #f0fdf4);
  border: 1px solid var(--t-line, #a7e8c8);
  border-radius: 10px;
  font-size: .73rem;
  line-height: 1.65;
}

/* ---------- Mode gelap ---------- */
html.tema-aktif[data-mode="gelap"] .pwa-panduan li {
  color: var(--d-teks, #e2e8f0);
}

html.tema-aktif[data-mode="gelap"] .pwa-panduan > p {
  color: var(--d-lembut, #9aa8bd);
}