/* =========================================================
   SELECTRA — Mobile Compatibility Fixes (Public Pages)
   =========================================================
   File TAMBAHAN, tidak mengubah style.css yang sudah ada.
   Isinya khusus memperbaiki perilaku di HP Android & iPhone:

   1. Cegah auto-zoom Safari iOS saat tap ke input/select
      (iOS otomatis zoom kalau font-size input < 16px)
   2. Hilangkan kilatan abu-abu saat tap link/tombol di Android
   3. Dukungan "safe area" untuk iPhone bertakik (notch) / Dynamic Island
   4. Scroll lebih halus (momentum scroll) untuk tabel yang bisa digeser
   5. Cegah efek "pull to refresh" bawaan browser mengganggu UX
   ========================================================= */

/* ---- 2 & 5: berlaku di semua ukuran layar, aman di desktop ---- */
a, button, .btn, .navbar__toggle, .pill-option label, .guide-tab {
  -webkit-tap-highlight-color: transparent;
}

body {
  overscroll-behavior-y: contain;
}

/* ---- 4: scroll halus untuk tabel Compare yang bisa digeser ke samping ---- */
.compare-table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ---- 3: safe-area untuk navbar & footer, 0px di device tanpa notch ---- */
.navbar {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}

/* ---- Penguat: pastikan tombol "Cek Sekarang" di navbar TIDAK tampil
   di layar HP (≤900px). Aturan aslinya sudah ada di style.css, tapi
   ditambahkan lagi di sini dengan !important sebagai jaring pengaman
   kalau ada versi lama style.css yang masih ke-cache di hosting/browser. */
@media (max-width: 900px) {
  .navbar__cta {
    display: none !important;
  }
}

/* ---- Perbaikan: 2 foto hero (hero-kiri.png / hero-kanan.png) di Home ----
   Sebelumnya dibungkus <div class="hero__phone"> yang membatasi lebar
   jadi 150px khusus di HP (lihat style.css baris ~397). Setelah diganti
   ke foto asli, pembungkus itu terlepas, jadi inline style="width:100%"
   pada <img>-nya melebar penuh selebar layar. Aturan di bawah ini
   mengembalikan ukuran & urutan tampil yang sama seperti desain semula,
   TANPA mengubah style.css atau HTML aslinya. */
@media (max-width: 980px) {
  .hero > img {
    width: 150px !important;
    height: auto;
    align-self: center;
  }
  .hero > img:first-of-type {
    order: 2;
  }
  .hero > img:last-of-type {
    order: 3;
  }
}

@media (max-width: 640px) {
  .styled-select,
  .form-control,
  input[type="text"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}