/* Oasis Queen Arad - shared improvements */
:root{
  --bg:#0b0f14;
  --text:#e9eef6;
  --muted:rgba(233,238,246,.75);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
  --gold:#d7b46a;
  --shadow:0 18px 60px rgba(0,0,0,.35);
}

/* Compatibility */
.glass, .card, .nav, .pill, .sectionCard{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Ensure hero / suite sign images fill properly */
.heroImg, .suiteHero img, .suiteCard img, .coverImg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Gallery preview on home: 2x2 */
.galleryPreviewGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.galleryPreviewGrid img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border:1px solid var(--border);
}

/* Full gallery grid */
#galleryGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
#galleryGrid a{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--card2);
}
#galleryGrid img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
}

/* WhatsApp + Chatbot */
.floating-wrap{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.floating-wrap > *{ pointer-events:auto; }
.floating-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:999px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.55);
}
.floating-btn.whatsapp{
  background: rgba(18,140,126,.95);
  border-color: rgba(255,255,255,.18);
}
.floating-btn.chatbot{
  background: rgba(255,255,255,.10);
}
.chatbot-panel{
  position:fixed;
  left:16px;
  bottom:88px;
  width:min(340px, calc(100vw - 32px));
  max-height: 60vh;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(10,14,20,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:none;
  z-index:9998;
}
.chatbot-panel.open{ display:block; }
.chatbot-header{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
  color: var(--text);
}
.chatbot-body{
  padding:12px 14px;
  color: var(--text);
  font-size:14px;
  overflow:auto;
  max-height: calc(60vh - 50px);
}
.chatbot-msg{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  margin:10px 0;
}
.chatbot-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.chatbot-quick button{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}

/* Mobile improvements */
@media (max-width: 820px){
  #galleryGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .galleryPreviewGrid{ gap:10px; }
  #galleryGrid{ gap:10px; }
  .floating-wrap{ left:12px; bottom:12px; }
  .floating-btn{ width:54px; height:54px; }
}


/* --- Fix: suite door hero full cover --- */
#suiteHero{
  background-size: cover !important;
  background-position: center !important;
}

/* Home gallery preview: 2x2 grid */
.galleryPreviewGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.galleryPreviewGrid a, .galleryPreviewGrid img{
  display:block;
  width:100%;
  height: 180px;
}
.galleryPreviewGrid img{
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

/* Amenities list two columns on mobile */
@media (max-width: 720px){
  #amenitiesList{
    columns: 2;
    column-gap: 18px;
    padding-inline-start: 16px !important;
  }
  #amenitiesList li{
    break-inside: avoid;
    margin-bottom: 8px;
  }
}

/* Reviews: 3 cols desktop, 2 cols mobile + subtle fade */
#reviewsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
#reviewsGrid.fade{ opacity:.35; transition: opacity .18s ease; }
.reviewCard .revTop{ display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }
.reviewCard .revStars{ letter-spacing:2px; color: rgba(215,180,106,.95); font-weight: 1000;}
.reviewCard .revText{ margin: 0; color: var(--text); font-weight: 850; }
.reviewCard .revSrc{ margin-top: 10px; color: var(--muted); font-weight: 900; font-size: .92rem; }

@media (max-width: 720px){
  #reviewsGrid{ grid-template-columns: repeat(2, 1fr); }
}

/* Media grid: 3x3 desktop, 2 cols mobile */
.mediaGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px){
  .mediaGrid{ grid-template-columns: repeat(2, 1fr); }
}

/* Floating WhatsApp + Chatbot */
.float{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: env(safe-area-inset-bottom);
}
.waFloatBtn{
  display:flex !important;
  gap: 10px;
  align-items:center;
}
.waFloatBtn .waText{ font-weight: 1000; }

.chatbotTeaser{
  position: fixed;
  left: 16px;
  bottom: 84px;
  z-index: 9999;
  display:flex;
  align-items:center;
  gap: 10px;
  background: rgba(17,24,39,.9);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chatbotTeaser.hide{ display:none; }
.chatTeaserMsg{ color: var(--text); font-weight: 1000; }
.chatTeaserClose{
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 1000;
  cursor:pointer;
}

.chatbotPanel{
  position: fixed;
  left: 16px;
  bottom: 140px;
  width: min(320px, calc(100vw - 32px));
  z-index: 10000;
  background: rgba(17,24,39,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow:hidden;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chatbotPanel.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.chatHead{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}
.chatClose{ border:none; background:transparent; color: var(--muted); font-weight:1000; cursor:pointer; }
.chatBody{ padding: 12px; display:grid; gap: 10px; }
.chatQuick{
  width:100%;
  text-align:right;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
}
.chatFoot{ padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }

/* Mobile accordions */
.mobAcc .accBody{ display:none; }
.mobAcc.open .accBody{ display:block; }
.mobAcc .accHead, .whyAccHead{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border:none;
  background: transparent;
  color: var(--text);
  font-weight: 1000;
  padding: 10px 0;
  cursor:pointer;
}
.mobAcc .accArrow{ color: var(--muted); }
.mobAcc.open .accArrow{ transform: rotate(180deg); }


/* Fixes: floating WhatsApp + hint overlap */
.floatWrap{ z-index: 9999; }
.floatHint{ z-index: 10001; pointer-events: none; }
.floatHint .hint{ pointer-events: auto; position: relative; }
.floatHint .hintClose{
  position:absolute; inset-inline-end:10px; top:8px;
  width:26px; height:26px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:grid; place-items:center;
}
.floatHint.is-hidden{ display:none !important; }
.whatsFloat{ z-index: 10000; }

/* Ensure suite tabs are clickable */
.suiteTabs, .suiteTabs *{ pointer-events: auto; }
.suiteTabs{ position: relative; z-index: 5; }

/* Full-bleed cover images */
.coverImg{ width:100%; height:100%; object-fit:cover; display:block; }




/* WhatsApp floating UI */
#btnWhatsappFloat{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
#btnWhatsappFloat::before{
  content:"🟢";
  font-size:18px;
  line-height:1;
}

/* Teaser bubble above WhatsApp button */
.wa-teaser{
  position:fixed;
  left:20px;
  bottom:92px;
  z-index:120;
  max-width:260px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,18,26,.92);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  gap:10px;
  align-items:flex-start;
  pointer-events:auto;
}
.wa-teaser .wa-teaser-close{
  margin-inline-start:auto;
  cursor:pointer;
  width:22px;height:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.wa-teaser .wa-teaser-close:hover{background:rgba(255,255,255,.12);}