/* =============================================================================
   portal-mobile.css — Portal Pasien Digital RSUD Palembang BARI
   Lapisan penyempurnaan mobile untuk route /portal.

   Semua selector diawali .portal-* atau dibatasi .portal-wrap-section, jadi
   berkas ini TIDAK bisa mempengaruhi halaman lain di situs.
   Muat SESUDAH blok <style> milik halaman portal.
   ============================================================================= */

/* --- 1. Cegah geser mendatar -------------------------------------------------
   Tema lama (revolution slider, menuzord) sesekali melebihi lebar layar.
   Di layar sempit itu membuat SELURUH halaman bisa digeser ke samping dan
   terlihat "mengecil" — gejala yang paling sering dilaporkan pasien. */
.portal-wrap-section { overflow-x: hidden; }
.portal-wrap, .portal-card { max-width: 100%; box-sizing: border-box; }

/* --- 2. Area aman ponsel berponi/berbilah -----------------------------------
   iPhone X ke atas dan Android bergesture menutupi tepi layar. */
.portal-wrap {
  padding-left:  calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* --- 3. Ukuran huruf isian ---------------------------------------------------
   iOS meng-ZOOM paksa halaman saat memfokus input ber-font < 16px, dan zoom itu
   tidak pernah kembali. Sebelumnya 16px hanya dipasang di <= 576px, sehingga
   tablet kecil & ponsel lebar (414-430px dalam mode desktop) tetap ter-zoom. */
.portal-form .form-control,
.portal-form input[type="text"],
.portal-form input[type="date"] { font-size: 16px; }

/* --- 4. Sasaran sentuh --------------------------------------------------------
   Minimum 44x44px (pedoman Apple HIG / WCAG 2.5.5). */
.portal-form .form-control { min-height: 46px; }
.portal-btn { min-height: 48px; padding: 13px 16px; }

/* --- 5. Widget Cloudflare Turnstile -------------------------------------------
   Widget Turnstile berlebar TETAP 300px. Di layar 320-360px, setelah dikurangi
   padding .portal-wrap dan .portal-card, ruang tersisa < 300px sehingga widget
   menyembul keluar kartu dan memicu geser mendatar. Diperkecil proporsional,
   bukan dipotong, supaya tetap bisa diklik. */
#portalCaptchaWrap { display: flex; flex-direction: column; align-items: center; }
#portalCaptchaBox { max-width: 100%; }
@media (max-width: 360px) {
  #portalCaptchaBox { transform: scale(0.85); transform-origin: top center; }
  #portalCaptchaWrap { margin-bottom: 8px !important; }
}

/* --- 6. Ponsel sempit (Android 320-360px) ------------------------------------ */
@media (max-width: 360px) {
  .portal-wrap { padding-left: calc(12px + env(safe-area-inset-left));
                 padding-right: calc(12px + env(safe-area-inset-right)); }
  .portal-card { padding: 18px 14px; }
  .portal-hero { margin-bottom: 22px; }
  .portal-hero h3 { font-size: 17px; }
  .portal-hero p  { font-size: 13px; }
  .portal-info    { font-size: 11.5px; padding: 10px 12px; }
  .portal-features { gap: 6px; margin-top: 20px; }
}

/* --- 7. Ponsel didirikan mendatar (viewport pendek) --------------------------
   Di landscape, hero setinggi 72px + judul mendorong tombol Verifikasi keluar
   layar sehingga pasien mengira formulirnya belum selesai. */
@media (max-height: 480px) and (orientation: landscape) {
  .portal-wrap { padding-top: 12px; padding-bottom: 20px; }
  .portal-hero { margin-bottom: 16px; }
  .portal-hero-icon { width: 48px; height: 48px; margin-bottom: 10px; }
  .portal-hero-icon i { font-size: 22px; }
  .portal-hero p { display: none; }
  .portal-features { display: none; }
}

/* --- 8. Isian tanggal di Android ---------------------------------------------
   Sebagian WebView Android merender input[type=date] setinggi baris teks saja
   dan teksnya terpotong. line-height 44px dari halaman induk memperparahnya. */
@media (max-width: 767.98px) {
  input[type="date"].form-control {
    line-height: normal;
    min-height: 46px;
    padding: 11px 12px;
    display: block;
    width: 100%;
  }
}

/* --- 9. Tombol mengambang Messenger ------------------------------------------
   Di layar pendek tombol ini menutupi tombol Verifikasi. */
@media (max-width: 767.98px) {
  .portal-wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* --- 10. Aksesibilitas -------------------------------------------------------- */
.portal-btn:focus-visible,
.portal-form .form-control:focus-visible {
  outline: 2px solid #1d6b4b;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .portal-btn, .portal-form .form-control { transition: none; }
  .portal-btn-primary:hover { transform: none; }
  .portal-spin { animation-duration: 2s; }
}

/* --- 11. Ponsel tidak punya hover ---------------------------------------------
   Efek :hover "nyangkut" sesudah disentuh di layar sentuh. */
@media (hover: none) {
  .portal-btn-primary:hover { transform: none; box-shadow: 0 4px 14px rgba(50,188,129,0.3); }
  .portal-btn-primary:active { transform: translateY(1px); opacity: 0.92; }
}