@charset "utf-8";
/* ============================================================
   responsive-fix.css  —  Bella Hotel Surabaya
   Dibuat: 2026-10-22
   Tujuan : mengubah layout "stepped fixed-width" (Bootstrap 2.1.1)
            menjadi benar-benar fluid / adaptif di semua ukuran device,
            serta memenuhi syarat Mobile Usability & Core Web Vitals Google.
   Catatan: file ini WAJIB dimuat PALING AKHIR (sesudah style.css)
            agar override-nya berlaku.
   Untuk mengembalikan tampilan lama: cukup hapus <link> file ini.
   ============================================================ */

/* ---------- 1. Dasar: box-sizing & media fluid ---------- */
*, *::before, *::after { box-sizing: border-box; }

img, video, embed, object {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* cegah teks/URL panjang mendorong layout melebar */
body { overflow-wrap: break-word; }

/* ---------- 2. Kontainer utama jadi fluid ----------
   style.css mengunci #main / #inner ke lebar px tetap
   (650/626, 500/480, 340/320). Nilai itu dibuat untuk HP 2012.
   HP sekarang 360-430px, sehingga 15-26% layar terbuang.      */
@media (max-width: 1199px) {
  #main,
  #inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 3. Navbar sticky ----------
   .sticky memakai width px keras (1212/765/626/480/320).
   Diganti full-width agar tidak pernah meleset di lebar apa pun. */
.sticky {
  width: 100% !important;
  max-width: 1210px;      /* samakan dengan lebar #inner di desktop */
  left: 50% !important;
  transform: translateX(-50%);
}

/* tinggi bar menu mengikuti isinya (tombol MENU kini 44px agar mudah ditekan) */
@media (max-width: 979px) {
  #nav_section { height: auto !important; min-height: 50px; }
  .navbar_, .navbar-inner_ { min-height: 50px; }
}

@media (max-width: 979px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 4. Grid Bootstrap 2: jaga kolom tidak overflow ---------- */
@media (max-width: 767px) {
  [class*="span"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }
  .row { margin-left: 0; }
}

/* ---------- 5. Tipografi mobile ----------
   Sebelumnya body 12px -> di bawah ambang "text too small to read". */
@media (max-width: 767px) {
  body,
  section p,
  .txt1,
  .infoFooter,
  td, li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  h1 { font-size: 28px !important; line-height: 1.25 !important; }
  h2 { font-size: 23px !important; line-height: 1.3 !important; }
  h3 { font-size: 19px !important; line-height: 1.35 !important; }
  .infoFooter { font-size: 15px !important; }
}

/* ---------- 6. Tap target & form (min 44x44 px, font 16px
   supaya iOS tidak auto-zoom saat field difokuskan) ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  max-width: 100%;
}

@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select {
    min-height: 44px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 16px !important;   /* hanya di HP: mencegah iOS auto-zoom */
  }
  textarea { width: 100% !important; padding: 10px 12px !important; font-size: 16px !important; }

  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 16px !important;
  }
  .buttonsubmit { width: 100% !important; }

  /* tabel pembungkus form reservasi dibuat ikut lebar layar */
  form table { width: 100% !important; }
  form table td { display: block; width: 100% !important; padding: 4px 0 !important; }

  /* jarak antar item menu & link agar mudah ditekan */
  .nav-collapse_ .nav > li > a { padding: 0 14px !important; }
  .dd_menu li { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---------- 7. Tabel data (search room / order detail)
   digeser horizontal di dalam wadahnya, bukan merusak halaman ---------- */
@media (max-width: 767px) {
  .table-scroll,
  section table.table,
  #content table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 8. Galeri (jssor) ----------
   Jssor menghitung sendiri lebar & tinggi slider lalu menuliskannya
   sebagai style inline (fungsi ScaleSlider di gallery.php).
   Karena itu JANGAN memaksa width/height/max-width di sini:
   "height:auto" membuat tinggi slider jadi 0 sehingga foto hilang.
   Yang diperlukan hanya melindunginya dari aturan gambar global. */
#jssor_1 img,
#jssor_1 svg,
.sliderkit img {
  max-width: none;
}

/* ---------- 9. Tombol WhatsApp melayang ---------- */
@media (max-width: 480px) {
  .whatsapp-button {
    bottom: 14px;
    right: 14px;
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
  }
}

/* ---------- 10. Peta & elemen lebar penuh ---------- */
iframe[src*="google.com/maps"] {
  width: 100% !important;
  border: 0;
}

@media (max-width: 767px) {
  iframe[src*="google.com/maps"] { height: 300px !important; }
}

/* ---------- 11. Stabilitas visual (menekan CLS) ---------- */
#headermainpage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 950 / 300;
  object-fit: cover;
}

/* ---------- 12. Aksesibilitas: fokus terlihat ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #E0AB1D;
  outline-offset: 2px;
}

/* ---------- 13. Hormati preferensi gerak pengguna ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 14. Versi cetak sederhana ---------- */
@media print {
  #nav_section, .whatsapp-button, .btn-navbar { display: none !important; }
  #main, #inner { width: 100% !important; max-width: 100% !important; background: none !important; }
}


/* ============================================================
   15. Pemilih bahasa (bendera), sebaris dengan nama hotel
   Diletakkan di dalam baris judul agar tinggi header tidak
   bertambah dan judul tidak pecah ke baris baru.
   ============================================================ */
.bh-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  vertical-align: middle;
}

.bh-lang-link {
  /* ukuran kotak ditetapkan eksplisit supaya bendera benar-benar
     berada di tengah, tidak terpengaruh tinggi baris di sekitarnya */
  position: relative;
  display: inline-block;
  width: 34px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  line-height: 0;
  font-size: 0;
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.bh-lang-link:hover,
.bh-lang-link:focus { opacity: 1; border-color: #E0AB1D; }

.bh-lang-link.is-active {
  opacity: 1;
  border-color: #E0AB1D;
  box-shadow: 0 0 0 1px #E0AB1D;
  cursor: default;
}

/* Bendera diposisikan tepat di titik tengah kotak. Cara absolut ini
   dipilih karena perataan flex masih terpengaruh tinggi baris teks
   di sekitarnya (p.phone line-height 30px). */
.bh-flag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 26px;
  height: 17px;
  /* style.css memberi "p.phone span { margin-top:5px; padding-top:5px }"
     dan bendera berada di dalam p.phone, itulah yang membuatnya turun */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 2px;
  overflow: hidden;
}

.bh-flag svg { display: block; width: 100%; height: 100%; }

/* style.css lama memberi gaya "p.phone span" (18px, warna tagline).
   Nama hotel sekarang berada di dalam span, jadi gayanya dikembalikan. */
p.phone .bh-title-text {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* teks bahasa tetap ada untuk pembaca layar, tapi tidak memakan ruang */
.bh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* judul hotel disembunyikan di layar kecil oleh style.css lama;
   baris itu tetap ditampilkan agar bendera tidak ikut hilang */
@media (max-width: 767px) {
  .phone.bh-title-line {
    display: block !important;
    text-align: left !important;
    padding: 12px 0 6px !important;
  }
  /* style.css memberi "p.phone span { display:block }" di <=481px,
     jadi butuh selektor yang lebih kuat untuk menyembunyikan judul */
  p.phone .bh-title-text { display: none !important; }
  /* Ukuran bendera di layar kecil disamakan dengan layar besar
     (kotak 34x25, bendera 26x17). Agar tetap mudah ditekan, area
     sentuhnya diperluas lewat lapisan tak terlihat di bawah ini,
     jadi yang membesar hanya jangkauan jari, bukan tampilannya. */
  .bh-lang { margin-right: 0; gap: 14px; }

  .bh-lang-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 44px;
  }
}

/* ============================================================
   16. Menu mengambang di layar kecil
   Sebelumnya memakai collapse bawaan Bootstrap 2 yang menambah
   tinggi elemen sehingga seluruh isi halaman terdorong ke bawah.
   Sekarang panel menu keluar dari alur dokumen (position:absolute)
   sehingga melayang di atas konten tanpa menggeser apa pun.
   Pemilih ".nav-collapse.nav-collapse_.collapse" sengaja memakai tiga
   kelas agar mengalahkan aturan lama di style.css.
   ============================================================ */
@media (max-width: 979px) {
  #nav_section .navbar-inner_ > .container { position: relative; }

  .nav-collapse.nav-collapse_.collapse {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 1050;
    background: #360d0d !important;
    border-top: 2px solid #E0AB1D;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  }

  /* keadaan terbuka */
  /* Keadaan terbuka. Class "bh-open" dipasang oleh skrip kecil di
     page-global/nav.php, bukan oleh plugin collapse Bootstrap yang
     sering tersangkut pada panel mengambang. ".in" tetap didukung
     agar tidak ada yang rusak bila skrip gagal dimuat. */
  .nav-collapse.nav-collapse_.collapse.bh-open,
  .nav-collapse.nav-collapse_.collapse.in {
    height: auto !important;
    max-height: calc(100vh - 70px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* daftar menu disusun menurun selebar panel */
  .nav-collapse_ .nav {
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
  }

  .nav-collapse_ .nav > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px;
    line-height: 50px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-collapse_ .nav > li:last-child { border-bottom: 0; }

  .nav-collapse_ .nav > li > a {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    line-height: 50px !important;
    padding: 0 20px !important;
    text-align: left;
    background: none !important;
  }

  .nav-collapse_ .nav > li.active > a {
    background: rgba(224, 171, 29, 0.14) !important;
    box-shadow: inset 4px 0 0 #E0AB1D;
  }

  /* tombol MENU tetap berada di atas panel */
  .btn-navbar { position: relative; z-index: 1060; }
}

/* ---------- 17. Tombol MENU rata kiri di layar kecil ---------- */
@media (max-width: 979px) {
  #nav_section .navbar .btn-navbar {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 20px !important;
    width: 100% !important;
  }

  /* ikon tiga garis, digambar dengan CSS (tanpa file gambar) */
  #nav_section .navbar .btn-navbar::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 16px;
    margin-right: 12px;
    vertical-align: -2px;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 22px 3px;
    background-position: left top, left center, left bottom;
    background-repeat: no-repeat;
    transition: opacity 0.15s ease;
  }

  /* saat menu terbuka, garis tengah disembunyikan sebagai penanda */
  #nav_section .navbar .btn-navbar.is-open::before {
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 22px 3px, 22px 3px;
    background-position: left top, left bottom;
  }
}

/* ============================================================
   18. Panah bulan pada kalender pemilihan tanggal (jQuery UI)

   Berkas sprite css/images/ui-icons_222222_256x240.png ternyata
   bukan ikon jQuery UI yang asli, melainkan gambar PUTIH KOSONG
   berukuran 253x240 (aslinya 256x240). Karena itu tombol maju dan
   mundur bulan tetap bisa diklik tetapi tidak terlihat sama sekali.

   Panahnya digambar ulang dengan CSS: tidak lagi bergantung pada
   berkas gambar apa pun, tetap tajam di layar beresolusi tinggi,
   dan berlaku untuk semua kalender di seluruh halaman.
   ============================================================ */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  width: 30px;
  height: 30px;
  top: 2px;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev { left: 2px; }
.ui-datepicker .ui-datepicker-next { right: 2px; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background-image: none !important;   /* sprite kosong diabaikan */
  text-indent: -9999px;
  overflow: hidden;
}

.ui-datepicker .ui-datepicker-prev span::after,
.ui-datepicker .ui-datepicker-next span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #3a1206;
  border-left: 2px solid #3a1206;
}

.ui-datepicker .ui-datepicker-prev span::after {
  transform: translate(-30%, -50%) rotate(-45deg);
}

.ui-datepicker .ui-datepicker-next span::after {
  transform: translate(-70%, -50%) rotate(135deg);
}

/* target sentuh lebih besar di layar kecil */
@media (max-width: 767px) {
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    width: 40px;
    height: 40px;
  }
  .ui-datepicker .ui-datepicker-prev span::after,
  .ui-datepicker .ui-datepicker-next span::after {
    width: 11px;
    height: 11px;
  }
}