/* =====================================================================
   RSAB MOBILE V1 (18-09-2026) — css/rsab-mobile.css
   Lapisan responsif untuk HP/tablet di atas Bootstrap 3 + style inline index.html.
   Dimuat PALING AKHIR di <head> supaya menang atas aturan sebelumnya.
   TIDAK mengubah warna brand, teks, maupun tampilan desktop (>= 992px),
   kecuali menutup celah yang memang rusak (menu navbar tidak bisa collapse).

   Breakpoint:
     HP        : <= 480px  (dan aturan umum <= 767px)
     Tablet    : 481px – 767px / 768px – 991px (Bootstrap sm/md)
     Desktop   : >= 992px  (tidak disentuh)
   ===================================================================== */

/* ---------- 0. Anti horizontal scroll ---------- */
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; }
/* gambar dengan atribut width/height mengikuti lebar kolom, kecuali gambar hero (absolute, object-fit) dan logo */
img[width][height]:not(.owl-carousel img):not(.navbar-brand img) { height: auto; }

/* ---------- 1. NAVBAR: hamburger benar-benar berfungsi ----------
   Masalah lama: .navbar-collapse punya inline "display:flex!important" sehingga
   di HP menu 7 item tetap terbentang mendatar (halaman jadi 2x lebar) dan tombol
   hamburger tidak berpengaruh. Inline itu dihapus di index.html; desktop dipulihkan
   di sini, HP memakai collapse bawaan Bootstrap. */
@media (min-width: 768px) {
  .navbar-default .navbar-collapse { display: flex !important; }
}
/* Tablet 768–991px: 7 item menu + logo harus muat dalam satu baris tanpa terpotong */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-default .navbar-nav > li > a { padding: 10px 9px !important; font-size: 14px !important; }
  .navbar-default .navbar-nav li.appointment-btn a { padding: 10px 14px !important; }
  .navbar-brand img { height: auto !important; max-height: 65px; }
}
@media (max-width: 767px) {
  /* Navbar (inline z-index:100) harus di atas panel ikon layanan hero (z-index 9999) agar menu terbuka tidak tertutup ikon */
  .navbar-default, .is-sticky .navbar-default { z-index: 10000 !important; }
  .navbar-default .container {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 80px;
    position: relative;
  }
  .navbar-default .navbar-toggle {
    display: block;
    float: none !important;
    margin: 0 !important;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 8px;
  }
  .navbar-default .navbar-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none !important;
    width: 100%;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    padding: 6px 14px 18px;
    z-index: 1000;
  }
  .navbar-default .navbar-collapse.collapsing,
  .navbar-default .navbar-collapse.in { display: block; }
  .navbar-default .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    float: none;
    width: 100%;
    margin: 0;
  }
  .navbar-default .navbar-nav > li { float: none; width: 100%; border-bottom: 1px solid #f1f1f1; }
  .navbar-default .navbar-nav > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 6px !important;
    font-size: 16px !important;
  }
  .navbar-nav > li > a::after { display: none; }              /* garis hover desktop tidak relevan di sentuh */
  .navbar-default .navbar-nav li.appointment-btn { margin: 14px 0 0 !important; border-bottom: 0; }
  .navbar-default .navbar-nav li.appointment-btn a { justify-content: center; border-radius: 8px; min-height: 48px; }
  /* Dropdown About Us / Fasilitas / Informasi menjadi akordeon (dibuka lewat ketuk, JS sudah ada) */
  .rsab-facilities-menu, .rsab-facilities-submenu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 6px 14px !important;
  }
  .rsab-facilities-menu li > a, .rsab-facilities-submenu li > a {
    min-height: 44px;
    padding: 10px 6px !important;
    font-size: 14px !important;
  }
  .rsab-submenu-long { max-height: 50vh; }
}

/* ---------- 2. HEADER INFORMASI (telepon / jam / email) ---------- */
@media (max-width: 767px) {
  header span { display: block; padding: 4px 0; font-size: 13px !important; line-height: 1.5; }
  header a { font-size: 13px !important; display: inline-block; padding: 4px 0; min-height: 28px; }
}

/* ---------- 3. HERO + IKON LAYANAN ---------- */
@media (max-width: 767px) {
  .owl-carousel .item { min-height: 300px; }
  .owl-carousel .item picture, .owl-carousel .item img { object-position: center; }
}
@media (max-width: 576px) {
  /* 7 ikon -> 4 + 3 per baris; tiap ikon >= 64px, jarak >= 10px, label 11px terbaca */
  .slider-menu-wrapper .menu-container { gap: 10px 8px !important; padding: 10px 6px !important; }
  .menu-item { width: 78px !important; min-height: 64px; }
  .menu-item .icon-wrapper { padding: 10px !important; }
  .menu-item .icon-wrapper img { width: 40px !important; height: 40px !important; }
  .menu-item span { font-size: 11px !important; line-height: 1.2; }
}
@media (max-width: 360px) {
  .menu-item { width: 72px !important; }
  .menu-item .icon-wrapper img { width: 36px !important; height: 36px !important; }
}

/* ---------- 3B. HERO: titik slider tidak boleh menimpa label ikon baris kedua ---------- */
@media (max-width: 576px) {
  .slider-menu-wrapper .menu-container { bottom: 34px !important; }
  #home .owl-theme .owl-dots { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0 !important; }
  #home .owl-theme .owl-dots .owl-dot span { margin: 4px 5px; }
}

/* ---------- 3C. LAYANAN UNGGULAN (Yustisial & PTPA): ikon lebih jelas di HP ---------- */
@media (max-width: 767px) {
  #team .rsab-featured-icon { width: 38px !important; height: 38px !important; }
  #team .rsab-featured-card h3 { font-size: 16px !important; gap: 8px 10px; }
}

/* ---------- 4. TEKS KECIL (<= 12px) DINAIKKAN DI HP ---------- */
/* [CSS-17] di index.html memaksa deskripsi berita 8px / tanggal 10px / judul 12px dengan !important.
   Itu tidak terbaca di HP, jadi ditimpa KHUSUS layar kecil (desktop tetap seperti semula). */
@media (max-width: 767px) {
  #news .news-info h3, #news .news-info h3 a { font-size: 17px !important; line-height: 1.35 !important; }
  #news .news-info span { font-size: 12.5px !important; line-height: 1.4 !important; }
  #news .news-info p { font-size: 14px !important; line-height: 1.6 !important; }
  #news .section-title h2, #appointment .section-title h2 { font-size: 22px !important; line-height: 1.25 !important; }
}
@media (max-width: 767px) {
  #about p, #about .about-info p { font-size: 14px !important; line-height: 1.6; }
  .news-info p, .news-info span { font-size: 13px !important; }
  .step p { font-size: 13px !important; }
  .lab-item p { font-size: 11px !important; }
}

/* ---------- 5. FORM "HUBUNGI KAMI" ---------- */
@media (max-width: 767px) {
  #appointment label { font-size: 14px !important; }
  /* 16px mencegah Safari iOS memperbesar (zoom) halaman saat input difokus */
  #appointment input.form-control,
  #appointment select.form-control,
  #appointment textarea.form-control { font-size: 16px !important; min-height: 48px; }
  #appointment .rsab-otp-help, #appointment small { font-size: 12px !important; line-height: 1.45; }
  #appointment .rsab-otp-status { font-size: 12.5px !important; }
  #appointment .rsab-email-otp-actions { display: block; }
  #appointment .rsab-email-otp-button { width: 100%; min-height: 48px; height: auto; font-size: 15px; }
  #appointment #cf-submit { width: 100% !important; min-height: 52px; font-size: 16px !important; }
  /* Radio Pelayanan / Penunjang / Pengaduan: bertumpuk vertikal, area ketuk >= 44px */
  #appointment .rsab-layanan-choice-row { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  #appointment .rsab-layanan-choice-title { flex-basis: auto !important; margin-bottom: 4px !important; }
  #appointment .rsab-layanan-radio-label {
    display: flex !important;
    min-height: 44px;
    padding: 8px 4px !important;
    gap: 12px !important;
    font-size: 15px !important;
    white-space: normal !important;
    border-bottom: 1px solid #eef1ea;
  }
  #appointment input.rsab-layanan-radio[type="radio"] {
    width: 22px !important; height: 22px !important;
    min-width: 22px !important; min-height: 22px !important;
    max-width: 22px !important; max-height: 22px !important;
  }
}

/* ---------- 6. FOOTER ---------- */
@media (max-width: 767px) {
  #footer, #footer p, #footer li, #footer address { font-size: 14px !important; line-height: 1.6; }
  /* Tautan teks di footer/header (telepon, email, RS Adhyaksa lain) dibuat >= 44px tinggi agar mudah diketuk */
  #footer p > a, #footer li > a:not([aria-label]), header span > a {
    display: inline-block; padding: 10px 0; min-height: 44px; line-height: 24px; font-size: 14px !important;
  }
  /* Judul kolom footer memakai inline "1.0rem" = 10px di Bootstrap 3 -> dibuat terbaca */
  #footer h3, #footer h4 { font-size: 17px !important; margin: 18px 0 10px !important; }
  /* Ikon sosial memakai kelas "col-6" (Bootstrap 4) yang tidak dikenal Bootstrap 3, sehingga di HP
     tiap ikon selebar layar dan bertumpuk vertikal. Dijadikan satu baris mendatar. */
  #footer .row .row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 8px; }
  #footer .row .row > div { float: none; width: auto !important; padding: 0 !important; margin: 0 !important; }
  #footer .row .row > div > a { min-width: 48px !important; min-height: 48px !important; }
}

/* ---------- 7. BANNER COOKIE ---------- */
@media (max-width: 767px) {
  #cookie-banner { padding: 12px 12px 14px; }
  #cookie-banner .container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  #cookie-banner p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
  #cookie-banner .btn-group { flex-wrap: wrap; gap: 8px; }
  #cookie-banner .btn-group button { min-height: 44px; flex: 1 1 30%; }
}

/* ---------- 8. SENTUH vs HOVER ---------- */
/* Perangkat tanpa hover: efek :hover tidak "nyangkut"; beri umpan balik :active */
@media (hover: none) {
  .menu-item:active .icon-wrapper { transform: scale(0.94); }
  .navbar-default .navbar-nav > li > a:active { background: #f3f8ef; }
}
/* Semua target sentuh utama minimal 44px tinggi di HP */
@media (max-width: 767px) {
  .btn, button, input[type="submit"], .step, .menu-item { min-height: 44px; }
}

/* ---------- 9. Kompatibilitas Safari lama / Android WebView ---------- */
/* Fallback bila browser tidak mendukung gap pada flex (Safari < 14.1): margin ringan antar item ikon */
@supports not (gap: 1px) {
  .menu-container .menu-item { margin: 6px 5px; }
}