/* hotel-detail.css (v2) */
body.page-dark { background: #0b1020; }

.hotel-detail-hero { padding: 52px 0 24px; }
.hotel-detail-hero h1{
  font-size: clamp(34px,4.8vw,60px);
  margin:0 0 10px;
  font-weight: 900;
  color: var(--hotel-title, #55c8ff);
}
.hotel-detail-hero .meta{
  color: rgba(255,255,255,0.75);
  font-weight:700;
}

.section-box{
  border: 1px solid rgba(77,163,255,0.45);
  border-radius: 22px;
  padding: 22px;
  background: rgba(255,255,255,0.04);
}
.section-box h2{
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 22px;
}
.section-box p, .section-box li{
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}

.hotel-detail-body{ padding: 18px 0 100px; }

/* Gallery: wide, auto-scrolling strip */
.gallery-wrap{ overflow:hidden; border-radius:18px; }
.gallery-track{
  display:flex; gap:14px; width:max-content;
  animation: gallery-scroll 42s linear infinite;
}
@media (hover:hover) and (pointer:fine){
  .gallery-track:hover{ animation-play-state: paused; }
}
.gallery-track img{
  height: 520px; width:auto; border-radius:16px; object-fit:cover;
}
@media (max-width: 900px){ .gallery-track img{
  height: 520px; } }
@keyframes gallery-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* Icon rows */
.icon-row{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px; margin-top:10px;
}
@media (max-width: 800px){ .icon-row{ grid-template-columns: 1fr; } }
.icon-pill{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.icon-pill svg{ width:22px; height:22px; flex:0 0 22px; color: inherit; }
.icon-rooms{ color:#ff5ccf; }      /* pink icons */
.icon-amenities{ color:#55c8ff; }  /* blue icons */
.icon-pill strong{ color:#fff; font-size:14px; }

.detail-cta{ margin-top: 24px; text-align:center; }
.detail-cta a{
  display:inline-flex; padding: 16px 36px; border-radius:999px;
  background: linear-gradient(90deg, #4da3ff, #9b6cff, #ff5ccf);
  color:#0b1020; font-weight:900; text-decoration:none;
}

/* Per-hotel title colors */
body[data-hotel="crowne-plaza-yas-island"]{ --hotel-title: #55c8ff; }
body[data-hotel="doubletree-by-hilton-abu-dhabi-yas-island-residences"]{ --hotel-title: #ff5ccf; }
body[data-hotel="hilton-abu-dhabi-yas-island"]{ --hotel-title: #ffd54a; }
body[data-hotel="jumeirah-at-saadiyat-island-resort"]{ --hotel-title: #7cff6b; }
body[data-hotel="park-hyatt-abu-dhabi-and-villas"]{ --hotel-title: #ff7a18; }
body[data-hotel="park-inn-by-radisson-yas-island"]{ --hotel-title: #b28cff; }
body[data-hotel="radisson-blu-abu-dhabi-yas-island"]{ --hotel-title: #00e5ff; }
body[data-hotel="rixos-premium-saadiyat-island"]{ --hotel-title: #ff4d6d; }
body[data-hotel="saadiyat-rotana-resort-villas"]{ --hotel-title: #a6ff00; }
body[data-hotel="the-st-regis-saadiyat-island-resort-abu-dhabi"]{ --hotel-title: #ffb703; }
body[data-hotel="the-wb-abu-dhabi"]{ --hotel-title: #5ef2c2; }
body[data-hotel="w-abu-dhabi-yas-island"]{ --hotel-title: #8ecaff; }
body[data-hotel="yas-plaza-circuit-by-ihg"]{ --hotel-title: #ff7bd5; }
body[data-hotel="yas-plaza-marina-by-ihg"]{ --hotel-title: #f9ff6a; }

/* width match home page */
.page-content .container { max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 520px){ .page-content .container { padding-left: 16px; padding-right: 16px; } }

.icon-rooms svg{ color:#ff5ccf; }
.icon-amenities svg{ color:#55c8ff; }

/* info cards for Rooms/Restaurants */
.cards-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width: 900px){ .cards-grid{ grid-template-columns: 1fr; } }
.info-card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 14px 16px;
}
.info-card h3{ margin:0 0 6px; color:#fff; font-size:16px; }
.info-card .meta{ color: rgba(255,255,255,0.70); font-weight:700; font-size:13px; margin-bottom:8px; }
.info-card p{ margin:0; color: rgba(255,255,255,0.78); }
.info-list ul{ margin:0 0 0 18px; }
.icon-rooms svg{ color:#ff5ccf; }      /* pink icons only */
.icon-amenities svg{ color:#55c8ff; }  /* blue icons only */

.section-gap{ height:22px; }

/* Rooms layout like reference */
.rooms-stack{ display:flex; flex-direction:column; gap:18px; }
.room-block{
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.room-block:first-child{ border-top: 0; padding-top: 0; }
.room-title{
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  margin-bottom: 6px;
}
.room-meta{ color: rgba(255,255,255,0.70); font-weight: 800; margin-bottom: 6px; }
.room-desc{ color: rgba(255,255,255,0.72); line-height: 1.55; margin-bottom: 10px; }
.room-stats{ display:flex; gap:24px; flex-wrap:wrap; }
.room-stats .stat{ display:flex; align-items:center; gap:8px; color: rgba(255,255,255,0.80); font-weight: 800; }
.room-stats svg{ width:18px; height:18px; }
/* pink icons only in Rooms */
.icon-rooms svg{ color:#ff5ccf; }

/* Amenities list like reference */
.amenities-list{ display:flex; flex-direction:column; gap:16px; }
.amenity-item{ display:flex; gap:14px; align-items:flex-start; }
.amenity-icon svg{ width:34px; height:34px; }
.amenity-name{
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  margin-bottom: 4px;
}
.amenity-desc{ color: rgba(255,255,255,0.70); line-height: 1.55; }
/* blue icons only in Amenities */
.icon-amenities svg{ color:#55c8ff; }

/* Restaurants */
.restaurants-stack{ display:flex; flex-direction:column; gap:16px; }
.rest-block{
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.rest-block:first-child{ border-top:0; padding-top:0; }
.rest-title{ font-weight: 900; color: rgba(255,255,255,0.92); margin-bottom:6px; }
.rest-desc{ color: rgba(255,255,255,0.70); line-height: 1.55; }



/* =========================
   PATCH (LOCKED SCOPE): Hotel gallery (MOBILE)
   - Slide-by-slide auto-advance (JS) + scroll-snap layout
========================= */
@media (max-width: 900px){
  .gallery-wrap{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .gallery-track{
    animation: none !important; /* disable marquee on mobile */
    width: max-content;
    padding-bottom: 2px;
  }
  .gallery-track img{
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 86vw;
    max-width: 520px;
    height: 320px;
    object-fit: cover;
  }
}

/* March 13 fixes */
.section-box{border:1px solid rgba(77,163,255,.45)!important;}
.contact-cta .btn, .hotel-contact-cta .btn, .cta-button, .btn-primary{box-shadow:none!important;outline:none!important;}


/* March 13 v3 fixes */
[dir="rtl"] .gallery-wrap,
[dir="rtl"] .gallery-track{direction:ltr!important; unicode-bidi:isolate!important;}
[dir="rtl"] .gallery-track{flex-direction:row!important;}
.room-block, .rest-block{border-top:0!important;}
.section-box hr, .section-box .divider, .section-box .line, .section-box .separator{display:none!important;}


/* March 13 v4 targeted fixes */
.section-box.cta-box.no-outline{border:0!important;background:transparent!important;box-shadow:none!important;}
.section-box.cta-box.no-outline::before,.section-box.cta-box.no-outline::after{display:none!important;}