/* Halaman detail penginapan.
 *
 * Token warna, font, radius, dan breakpoint sengaja disalin PERSIS dari
 * ticketing/event_detail.css. Dua halaman ini dilihat berurutan oleh pembeli
 * yang sama dalam satu perjalanan (paket event -> penginapan), jadi perbedaan
 * kecil pada latar atau tipografi langsung terasa seperti dua situs berbeda.
 *
 * Tidak di-@import dari file event detail supaya perubahan pada halaman event
 * tidak diam-diam mengubah halaman ini. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* Ruang bawah agar isi terakhir tidak tertutup sticky CTA yang mengambang. */
body.stay-detail-page .stay-detail {
  padding-bottom: 100px;
  margin-top: -100px;
  padding-top: 130px;
}

.stay-detail {
  --stay-bg: #efe1bb;
  --stay-ink: #241d13;
  --stay-muted: #5d5648;
  --stay-line: rgba(47, 40, 28, 0.14);
  --stay-accent: #efbc18;
  --stay-deep: #46544f;
  --stay-deep-2: #2d3835;
  --stay-green: #7c938e;
  --stay-red: #d84c47;
  --stay-surface: linear-gradient(rgba(248, 240, 214, 0.98), rgba(232, 208, 155, 0.98)) padding-box,
    linear-gradient(180deg, rgb(18 18 18 / 13%), rgb(18 18 18 / 0%)) border-box;
  --stay-emboss: inset 4px 4px 8px #6d5e4678, inset -4px -4px 8px #8b7d654d;

  background:
    radial-gradient(circle at top, rgba(255, 248, 228, 0.95), rgba(239, 225, 187, 0.72) 45%, rgba(206, 186, 133, 0.4) 100%),
    linear-gradient(180deg, #f8ebca 0%, #efe1bb 48%, #d5c090 100%);
  color: var(--stay-ink);
  font-family: "DM Sans", sans-serif;
  padding: 28px 0 120px;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.stay-detail::before,
.stay-detail::after {
  content: "";
  position: absolute;
  inset: auto auto 18% -5%;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(250, 196, 46, 0.22) 0%, rgba(250, 196, 46, 0) 68%);
  pointer-events: none;
}

.stay-detail::after {
  inset: 10% -8% auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(124, 147, 142, 0.22) 0%, rgba(124, 147, 142, 0) 72%);
}

.stay-shell {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* WAJIB, dan penyebab halaman ini sempat melebar melewati layar ponsel.
 *
 * Item grid punya min-width: auto, artinya ia MENOLAK menyusut di bawah lebar
 * min-content isinya. Judul panjang, alamat satu baris, dan deretan pil fakta
 * karena itu memaksa kolom lebih lebar dari viewport. Karena .stay-detail
 * memakai overflow-x: clip, kelebihannya terpotong dan tidak bisa digeser --
 * isinya sekadar hilang di kanan.
 *
 * min-width: 0 mengembalikan hak grid untuk menyusutkan kolom. Aturan yang sama
 * ada di event_detail.css untuk alasan yang persis sama. */
.stay-hero > *,
.stay-unit-card > *,
.stay-booking-grid > *,
.stay-amenities > *,
.stay-note-grid > *,
.stay-gallery > *,
.stay-unit-gallery > * {
  min-width: 0;
}

/* Judul dan alamat boleh dipenggal daripada mendorong lebar halaman. */
.stay-hero h1,
.stay-unit-card h3,
.stay-lead,
.stay-prose {
  overflow-wrap: anywhere;
}

/* ---------- breadcrumb ---------- */

.stay-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--stay-muted);
  font-size: 13px;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.stay-breadcrumb a {
  color: #4b5f5b;
  font-weight: 800;
  text-decoration: none;
  text-wrap: nowrap;
}

.stay-breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- kartu dasar ---------- */

.stay-hero,
.stay-section {
  background: var(--stay-surface);
  border: 2px solid transparent;
  border-radius: 34px;
  box-shadow: var(--stay-emboss);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.stay-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 30px;
  padding: 30px;
  margin-bottom: 24px;
}

.stay-section {
  padding: 28px;
  margin-bottom: 24px;
}

.stay-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(124, 147, 142, 0.22) 0%, rgba(124, 147, 142, 0) 72%);
  pointer-events: none;
}

/* ---------- tipografi ---------- */

.stay-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5f5b;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.stay-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.stay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 249, 233, 0.55);
  border: 1px solid rgba(34, 28, 20, 0.18);
  color: #4b5f5b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: "Plus Jakarta Sans", sans-serif;
  box-shadow: 4px 4px 8px #6d5e4678, inset -4px -4px 8px #8b7d654d;
}

.stay-hero h1,
.stay-section-head h2,
.stay-unit-card h3,
.stay-offer h4 {
  font-family: "Cormorant Garamond", serif;
}

.stay-hero h1 {
  font-size: clamp(36px, 6vw, 49px);
  line-height: 0.88;
  margin: 14px 0;
  letter-spacing: -0.05em;
  font-weight: 700;
  background-color: #475350;
  color: transparent;
  text-shadow: 0 3px 3px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  background-clip: text;
}

.stay-lead {
  color: var(--stay-muted);
  font-size: 16px;
  line-height: 1.9;
  max-width: 64ch;
  margin-bottom: 18px;
}

.stay-section-head {
  margin-bottom: 22px;
}

.stay-section-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  margin: 10px 0 6px;
  letter-spacing: -0.02em;
  color: #2b2419;
}

.stay-section-head p {
  color: var(--stay-muted);
  margin: 0;
  max-width: 70ch;
  line-height: 1.8;
}

/* ---------- hero media ---------- */

/* Tinggi hero dikunci. Tanpa max-height, foto potret memanjangkan kolom kiri
   dan mendorong seluruh isi kanan (harga, tombol peta) keluar layar pertama. */
.stay-hero-media img,
.stay-hero-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 520px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.stay-hero-placeholder {
  background: linear-gradient(135deg, #c8d6c2, #f2dfaa);
}

/* ---------- pil fakta cepat ---------- */

.stay-fact-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.stay-fact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255, 249, 233, 0.6);
  border: 1px solid var(--stay-line);
  font-size: 13.5px;
  font-weight: 700;
  color: #3b4038;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.stay-fact i {
  color: var(--stay-deep);
}

/* ---------- galeri ---------- */

.stay-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.stay-gallery figure {
  margin: 0;
}

.stay-gallery img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--stay-line);
}

.stay-gallery figcaption {
  margin-top: 8px;
  color: var(--stay-muted);
  font-size: 13.5px;
}

/* ---------- kartu unit ---------- */

.stay-unit-list {
  display: grid;
  gap: 24px;
}

.stay-unit-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  background: rgba(255, 250, 236, 0.72);
  border: 1px solid var(--stay-line);
  border-radius: 26px;
  overflow: hidden;
}

/* Kolom visual: cover + galeri, menempel saat kolom teks digulir.
 *
 * Sebelumnya cover berdiri sendiri dengan tinggi dibatasi sementara kolom
 * kanan memanjang mengikuti isi, menyisakan ruang kosong besar di bawah foto.
 * Menyatukan seluruh visual di satu kolom mengisi ruang itu, dan sticky
 * menjaga foto tetap terlihat saat tamu membaca fasilitas dan harga. */
.stay-unit-visual {
  align-self: start;
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.stay-unit-media {
  border-radius: 18px;
  overflow: hidden;
}

.stay-unit-media img,
.stay-unit-media-placeholder {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.stay-unit-media-placeholder {
  background: #d8e1cf;
}

.stay-unit-body {
  padding: 28px;
  min-width: 0;
}

.stay-unit-card h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.stay-unit-desc {
  color: var(--stay-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ---------- fasilitas ---------- */

.stay-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 22px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.stay-amenity {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: #3b4038;
  font-weight: 600;
}

.stay-amenity-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  background: rgba(124, 147, 142, 0.18);
  color: var(--stay-deep);
  font-size: 14px;
}

/* ---------- paket & harga ---------- */

.stay-offer {
  border-top: 1px solid var(--stay-line);
  padding-top: 18px;
  margin-top: 18px;
}

.stay-offer h4 {
  font-size: 22px;
  margin: 0 0 4px;
}

.stay-offer-dates {
  color: var(--stay-muted);
  font-size: 14px;
  margin: 0 0 10px;
}

.stay-price-was {
  color: #879080;
  font-size: 15px;
}

.stay-price-now {
  font-size: 28px;
  font-weight: 800;
  color: var(--stay-deep-2);
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.02em;
}

.stay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--stay-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  transition: filter 0.15s ease;
}

.stay-btn:hover {
  filter: brightness(1.12);
  color: #fff;
}

.stay-btn-accent {
  background: var(--stay-accent);
  color: #2b2419;
}

.stay-btn-accent:hover {
  color: #2b2419;
}

/* ---------- form pemesanan ---------- */

.stay-booking {
  border-top: 1px solid var(--stay-line);
  padding-top: 20px;
  margin-top: 22px;
}

.stay-booking-title {
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 4px;
}

.stay-booking-rate {
  color: var(--stay-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.stay-booking-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5f5b;
  background: rgba(239, 188, 24, 0.16);
  border: 1px solid rgba(160, 102, 54, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-weight: 600;
}

/* Struktur field mengikuti checkout event: label kecil di atas, input tinggi
   penuh, jarak seragam. */
.stay-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.stay-field {
  min-width: 0;
}

.stay-field label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b5f5b;
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 6px;
}

.stay-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--stay-line);
  background: rgba(255, 252, 244, 0.95);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--stay-ink);
  min-height: 48px;
}

.stay-field input:focus {
  outline: none;
  border-color: var(--stay-deep);
  box-shadow: 0 0 0 3px rgba(70, 84, 79, 0.16);
}

.stay-field input[readonly] {
  cursor: pointer;
}

.stay-field-hint {
  font-size: 12px;
  color: var(--stay-muted);
  margin: 6px 0 0;
}

.stay-btn-block {
  width: 100%;
  margin-top: 14px;
}

/* ---------- estimasi harga ---------- */

.stay-estimate {
  margin-top: 16px;
  border: 1px dashed rgba(160, 102, 54, 0.4);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 252, 244, 0.7);
}

.stay-estimate[hidden] {
  display: none;
}

.stay-estimate-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--stay-muted);
  padding: 3px 0;
}

.stay-estimate-row.is-total {
  border-top: 1px solid var(--stay-line);
  margin-top: 8px;
  padding-top: 10px;
  color: var(--stay-ink);
  font-weight: 800;
  font-size: 16px;
}

.stay-estimate-note {
  font-size: 12px;
  color: var(--stay-muted);
  margin: 10px 0 0;
}

/* ---------- tema daterangepicker ---------- */

/* Kalender bawaan <input type="date"> adalah chrome browser dan TIDAK bisa
   diberi gaya lewat CSS sama sekali. Karena itu dipakai daterangepicker yang
   sudah ada di proyek, lalu ditimpa agar senada dengan halaman. */
.daterangepicker.stay-calendar {
  font-family: "DM Sans", sans-serif;
  background: linear-gradient(rgba(250, 243, 222, 0.99), rgba(241, 228, 194, 0.99));
  border: 1px solid rgba(160, 102, 54, 0.28);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(36, 27, 20, 0.28);
  padding: 10px;
}

.daterangepicker.stay-calendar::before,
.daterangepicker.stay-calendar::after {
  display: none;
}

.daterangepicker.stay-calendar .calendar-table {
  background: transparent;
  border: 0;
}

.daterangepicker.stay-calendar th,
.daterangepicker.stay-calendar td {
  border-radius: 10px;
  color: var(--stay-ink);
  font-size: 13.5px;
}

.daterangepicker.stay-calendar th.month {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 700;
  color: #2b2419;
}

.daterangepicker.stay-calendar th.next span,
.daterangepicker.stay-calendar th.prev span {
  border-color: var(--stay-deep);
}

.daterangepicker.stay-calendar td.available:hover,
.daterangepicker.stay-calendar th.available:hover {
  background: rgba(124, 147, 142, 0.22);
}

.daterangepicker.stay-calendar td.off,
.daterangepicker.stay-calendar td.off.in-range,
.daterangepicker.stay-calendar td.off.start-date,
.daterangepicker.stay-calendar td.off.end-date {
  background: transparent;
  color: rgba(93, 86, 72, 0.35);
}

.daterangepicker.stay-calendar td.in-range {
  background: rgba(239, 188, 24, 0.26);
  color: var(--stay-ink);
}

.daterangepicker.stay-calendar td.active,
.daterangepicker.stay-calendar td.active:hover {
  background: var(--stay-deep);
  color: #fff;
}

/* Malam bertarif weekend ditandai di kalender. Ini yang selama ini hilang:
   aturan weekend tidak pernah terlihat sampai tamu sudah sampai checkout. */
.daterangepicker.stay-calendar td.stay-weekend-night:not(.active):not(.off) {
  box-shadow: inset 0 -3px 0 var(--stay-accent);
  font-weight: 700;
}

.daterangepicker.stay-calendar td.disabled,
.daterangepicker.stay-calendar option.disabled {
  color: rgba(93, 86, 72, 0.3);
  text-decoration: line-through;
}

.daterangepicker.stay-calendar .drp-buttons {
  border-top: 1px solid var(--stay-line);
}

.daterangepicker.stay-calendar .drp-selected {
  font-size: 12.5px;
  color: var(--stay-muted);
}

.daterangepicker.stay-calendar .drp-buttons .btn {
  border-radius: 999px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  padding: 7px 16px;
}

.daterangepicker.stay-calendar .drp-buttons .applyBtn {
  background: var(--stay-deep);
  border-color: var(--stay-deep);
  color: #fff;
}

.daterangepicker.stay-calendar .drp-buttons .cancelBtn {
  background: transparent;
  border-color: var(--stay-line);
  color: var(--stay-muted);
}

/* ---------- catatan ---------- */

.stay-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.stay-note {
  background: rgba(255, 249, 233, 0.6);
  border: 1px solid var(--stay-line);
  border-radius: 20px;
  padding: 20px 22px;
}

.stay-note h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5f5b;
  margin: 0 0 10px;
}

.stay-note p,
.stay-note div {
  color: var(--stay-muted);
  line-height: 1.8;
  margin: 0;
}

.stay-prose {
  color: var(--stay-muted);
  font-size: 16px;
  line-height: 1.9;
  max-width: 72ch;
}

/* ---------- read more ---------- */

/* Tinggi dibatasi lewat max-height, bukan line-clamp, karena isinya beberapa
   <p> hasil linebreaks -- line-clamp hanya memotong satu blok teks. */
.stay-collapse {
  position: relative;
  overflow: hidden;
  max-height: 260px;
  transition: max-height 0.28s ease;
}

/* Pudarnya memakai mask, BUKAN gradien berwarna yang ditumpuk.
 *
 * Latar section ini gradien, jadi satu warna solid untuk ujung gradien tidak
 * pernah cocok di semua posisi -- versi sebelumnya terlihat seperti kotak abu
 * menempel di atas krem. Mask memudarkan teksnya sendiri menjadi transparan,
 * sehingga cocok di latar apa pun. */
.stay-collapse {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.stay-collapse.is-open {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.stay-collapse-toggle {
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--stay-deep);
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stay-collapse-toggle:hover {
  text-decoration: underline;
}

.stay-collapse-toggle i {
  transition: transform 0.2s ease;
}

.stay-collapse-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* ---------- galeri unit: pratinjau + modal ---------- */

.stay-unit-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stay-unit-gallery .stay-shot {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.stay-unit-gallery .stay-shot img {
  display: block;
  width: 100%;
  height: 74px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.stay-unit-gallery .stay-shot:hover img {
  transform: scale(1.05);
}

.stay-shot-more {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(36, 29, 19, 0.62);
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
}

.stay-shot-more strong {
  font-size: 19px;
  line-height: 1.1;
}

.stay-shot-more span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.stay-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.stay-gallery-modal[hidden] {
  display: none;
}

.stay-gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 19, 12, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.stay-gallery-modal-dialog {
  position: relative;
  width: min(1080px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(rgba(248, 240, 214, 0.99), rgba(238, 222, 183, 0.99));
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.stay-gallery-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.stay-gallery-modal-head h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  margin: 4px 0 0;
}

.stay-gallery-modal-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  border: 1px solid var(--stay-line);
  background: rgba(255, 252, 244, 0.9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--stay-ink);
}

.stay-gallery-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.stay-gallery-modal-grid figure {
  margin: 0;
}

.stay-gallery-modal-grid img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.stay-gallery-modal-grid figcaption {
  margin-top: 7px;
  font-size: 13px;
  color: var(--stay-muted);
}

body.stay-modal-open {
  overflow: hidden;
}

/* ---------- header: mengikuti halaman detail event ---------- */

/* Secara default .main-header memakai position:absolute sehingga MELAYANG di
 * atas konten. Halaman ini mengawali isinya dengan breadcrumb, jadi logo
 * menimpa breadcrumb -- itulah header yang terlihat "tidak responsif".
 * Halaman event menyelesaikannya dengan sticky agar header ikut menempati
 * ruang di aliran dokumen. */
body.stay-detail-page .main-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  padding: 14px 18px 0;
  background: transparent;
  box-shadow: none;
}

body.stay-detail-page .main-header .container {
  max-width: 1280px;
}

body.stay-detail-page .header-nav {
  border: 1px solid rgba(120, 96, 52, 0.22);
  background: rgba(255, 250, 235, 0.55);
  border-radius: 32px !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0 14px;
  box-shadow: inset 4px 4px 8px #6d5e4678, inset -4px -4px 8px #8b7d654d;
}

body.stay-detail-page .header-nav .main-menu-wrapper {
  min-height: 82px;
  padding: 0 24px;
}

/* Berbeda dari halaman event yang memakai #f6f0e4: latar di sini krem terang,
 * dan teks krem di atasnya praktis tidak terbaca. Warna tinta halaman dipakai
 * supaya bentuknya sama tetapi tetap terbaca. */
body.stay-detail-page .header-nav .main-menu-wrapper .main-nav > li > a,
body.stay-detail-page .header-btn a,
body.stay-detail-page .header__hamburger .sidebar-menu,
body.stay-detail-page .theme-toggle {
  color: #2b2419;
  font-family: "DM Sans", sans-serif;
}

body.stay-detail-page .header-nav .main-menu-wrapper .main-nav > li.active > a,
body.stay-detail-page .header-nav .main-menu-wrapper .main-nav > li:hover > a {
  color: var(--stay-accent-dark, #a06636);
}

body.stay-detail-page .btn.btn-white {
  border-radius: 999px;
  background: linear-gradient(180deg, #e8d093 0%, #f4e6be 100%);
  color: #2b2419;
  border: 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
}

/* Tombol mengambang menabrak sticky CTA. Halaman event menyembunyikan keduanya
 * dengan alasan yang sama. */
body.stay-detail-page #live-chat-fab,
body.stay-detail-page .wrapper-bottom-nav-mobile {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- sticky CTA ---------- */

.stay-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px 12px 22px;
  z-index: 30;
  border: 1px solid rgba(255, 247, 228, 0.14);
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(70, 84, 79, 0.92) 0%, rgba(45, 56, 53, 0.92) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 18px 40px rgba(36, 27, 20, 0.32);
}

.stay-sticky-cta > div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.stay-sticky-cta span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 250, 235, 0.75);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
}

.stay-sticky-cta strong {
  font-size: 19px;
  color: #fff8e8;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.stay-sticky-cta .stay-btn {
  padding: 11px 22px;
  flex: 0 0 auto;
}

/* Ruang agar isi terakhir tidak tertutup CTA yang mengambang. */
body.stay-detail-page #wa-floating-btn {
  bottom: 92px;
}

.stay-empty {
  color: var(--stay-muted);
  text-align: center;
  padding: 30px;
}

.stay-hero-sub {
  color: var(--stay-muted);
  font-size: 15px;
  margin: -6px 0 14px;
  font-weight: 600;
}

/* ---------- FAQ ---------- */

.stay-faq {
  display: grid;
  gap: 10px;
}

.stay-faq-item {
  border: 1px solid var(--stay-line);
  border-radius: 16px;
  background: rgba(255, 250, 236, 0.6);
  padding: 14px 18px;
}

.stay-faq-item summary {
  cursor: pointer;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  color: #2b2419;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.stay-faq-item summary::-webkit-details-marker {
  display: none;
}

.stay-faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--stay-deep);
  line-height: 1;
  flex: 0 0 auto;
}

.stay-faq-item[open] summary::after {
  content: "\2212";
}

.stay-faq-item p {
  margin: 10px 0 0;
  color: var(--stay-muted);
  line-height: 1.8;
}

/* ---------- responsif: breakpoint sama dengan event detail ---------- */

@media (max-width: 1100px) {
  .stay-hero {
    grid-template-columns: 1fr;
  }

  .stay-hero-media img,
  .stay-hero-placeholder {
    min-height: 320px;
  }
}

@media (max-width: 991px) {
  .stay-unit-card {
    grid-template-columns: 1fr;
  }

  .stay-unit-media img,
  .stay-unit-media-placeholder {
    min-height: 260px;
    max-height: 340px;
  }

  .stay-booking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sticky dimatikan saat kartu menumpuk jadi satu kolom: kolom visual berada
     di ATAS teks, dan elemen sticky di sana akan menutupi isi saat digulir. */
  .stay-unit-visual {
    position: static;
    padding: 0;
  }

  .stay-unit-media img,
  .stay-unit-media-placeholder {
    height: 260px;
    border-radius: 0;
  }

  .stay-unit-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 8px 0;
  }

  .stay-unit-gallery .stay-shot img {
    height: 78px;
  }
}

@media (max-width: 767px) {
  .stay-detail {
    padding: 20px 0 70px;
  }

  body.stay-detail-page .stay-detail {
    padding-bottom: 130px;
  }

  body.stay-detail-page .main-header {
    padding: 10px 10px 0;
  }

  body.stay-detail-page .header-nav .main-menu-wrapper {
    min-height: 60px;
    padding: 0 12px;
  }

  .stay-sticky-cta {
    bottom: 12px;
    padding: 10px 10px 10px 18px;
    width: calc(100% - 20px);
  }

  .stay-sticky-cta strong {
    font-size: 17px;
  }

  .stay-sticky-cta .stay-btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  .stay-unit-media img,
  .stay-unit-media-placeholder {
    height: 210px;
  }

  .stay-unit-gallery .stay-shot img {
    height: 62px;
  }

  .stay-shell {
    padding: 0 14px;
  }

  .stay-breadcrumb {
    font-size: 10px;
    margin-bottom: 10px;
  }

  .stay-hero,
  .stay-section {
    padding: 18px 16px;
    border-radius: 24px;
  }

  .stay-hero h1 {
    font-size: clamp(26px, 12vw, 36px);
  }

  .stay-unit-body {
    padding: 20px 18px;
  }

  /* Pil fakta digeser horizontal, bukan dibungkus jadi beberapa baris --
     pola yang sama dipakai highlight row di halaman event. */
  .stay-fact-row {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .stay-fact-row::-webkit-scrollbar {
    display: none;
  }

  .stay-fact {
    display: inline-flex;
    vertical-align: top;
    margin-right: 10px;
  }

  .stay-booking-grid {
    grid-template-columns: 1fr;
  }

  .stay-amenities,
  .stay-note-grid {
    grid-template-columns: 1fr;
  }

  .stay-gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  .stay-gallery img {
    height: 165px;
    border-radius: 14px;
  }

  .stay-price-now {
    font-size: 24px;
  }

  .stay-gallery-modal {
    padding: 0;
  }

  .stay-gallery-modal-dialog {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    padding: 16px;
  }

  .stay-gallery-modal-grid {
    grid-template-columns: 1fr;
  }

  .stay-gallery-modal-grid img {
    height: 240px;
  }

  /* Satu kolom penuh untuk daterangepicker: mode dua bulan berdampingan tidak
     muat di layar ponsel dan memaksa geser horizontal. */
  .daterangepicker.stay-calendar {
    width: auto;
    max-width: calc(100vw - 24px);
  }

  .daterangepicker.stay-calendar .drp-calendar {
    max-width: none;
  }
}