/* ============================================================
   Trekocity Hotels — small additions for the dynamic website
   (keeps style.css from the design untouched)
============================================================ */

/* spam trap field in forms: hidden from people, bots fill it */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* floating WhatsApp button (shown when a number is set in Admin > Settings > Contact) */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 990;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff; font-size: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.whatsapp-float:hover { color: #fff; transform: translateY(-2px); }

/* contact page map */
.contact-map { margin-top: 50px; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(13,67,89,.08); }
.contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* extra pages (privacy policy, terms ...) */
.cms-content { max-width: 900px; margin: 0 auto; color: var(--text); font-size: 17px; line-height: 1.8; }
.cms-content h2, .cms-content h3, .cms-content h4 { font-family: var(--heading-font); color: var(--dark); margin: 34px 0 14px; }
.cms-content h2 { font-size: 32px; }
.cms-content h3 { font-size: 26px; }
.cms-content ul, .cms-content ol { padding-left: 22px; margin-bottom: 18px; }
.cms-content li { margin-bottom: 6px; }
.cms-content a { color: var(--primary); text-decoration: underline; }
.cms-content img { max-width: 100%; height: auto; border-radius: 6px; }
.cms-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.cms-content td, .cms-content th { border: 1px solid var(--border); padding: 10px 12px; }

/* breadcrumb inside page banners */
.page-crumbs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 18px 0 0; font-size: 14px; }
.page-crumbs li { color: rgba(255,255,255,.75); }
.page-crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.45); }
.page-crumbs a { color: #fff; }

/* thank-you page (after the booking / contact form) */
.thankyou-box { text-align: center; max-width: 680px; margin: 0 auto; padding: 50px 30px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(13,67,89,.08); }
.thankyou-box .ty-icon { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--light-bg); color: var(--primary); font-size: 36px; }
.thankyou-box h2 { font-family: var(--heading-font); color: var(--dark); font-size: 34px; margin-bottom: 14px; }
.thankyou-box p { color: var(--text); font-size: 17px; line-height: 1.7; }
.thankyou-box .ty-call a { color: var(--primary); font-weight: 600; white-space: nowrap; }
.thankyou-box .nf-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
@media (max-width: 575px) { .thankyou-box { padding: 36px 18px; } .thankyou-box h2 { font-size: 27px; } }

/* 404 page */
.not-found-box { text-align: center; max-width: 640px; margin: 0 auto; }
.not-found-box .nf-code { font-family: var(--heading-font); font-size: 120px; line-height: 1; color: var(--primary); }
.not-found-box .nf-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* empty states */
.empty-note { text-align: center; color: var(--text); padding: 30px 0; }

/* ============================================================
   Hotel page banner: photo slider / video (Admin > Hotels > Page banner)
   The media layer sits under the text and the booking bar.
============================================================ */
.hotel-hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; background: var(--darker, #0e2438);
}
.hotel-hero-media .hero-slide.active { opacity: 1; }
.hotel-hero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hotel-hero-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 45%));
}

/* video buttons: always a column on the right edge (never on top of the booking bar) */
.hotel-hero .hero-video-controls {
  top: 50%; bottom: auto; right: 3vw; left: auto;
  transform: translateY(-50%);
  flex-direction: column;
}
.hotel-hero .hero-video-controls .hero-ctrl::after {
  right: calc(100% + 14px); left: auto;
  top: 50%; bottom: auto;
  transform: translateY(-50%);
}
@media (max-width: 991.98px) {
  /* leave room on the right for the buttons */
  .hotel-hero-video .page-hero-inner { padding-right: 80px; }
}
@media (max-width: 767.98px) {
  .hotel-hero .hero-video-controls { right: 14px; gap: 10px; }
  .hotel-hero-video .page-hero-inner { padding-right: 64px; }
}

/* ============================================================
   Home page video banner on tablets & phones (Admin > Home Banner > Video)
   style.css keeps the video's booking bar INSIDE the banner
   (.hero-video-hero .hero-enquiry). Below 992px the bar becomes
   tall (fields stacked) and covered the video and its buttons, so
   use the photo slider's layout instead: a spacer the height of the
   banner, then the booking bar pulled up by the same -110 / -90 /
   -45px as the slider's bar.
============================================================ */
@media (max-width: 991.98px) {
  .hero-video-hero { display: block; }
  .hero-video-hero::before { content: ""; display: block; height: 100%; min-height: inherit; }
  .hero-video-hero .hero-enquiry { position: relative; margin: -110px auto 34px; }
}
@media (max-width: 991.98px) and (orientation: landscape) {
  .hero-video-hero .hero-video-controls { top: 42%; }   /* short screens: keep the buttons clear of the bar */
}
@media (max-width: 767.98px) {
  .hero-video-hero .hero-enquiry { margin-top: -90px; }
}
@media (max-width: 575.98px) {
  .hero-video-hero .hero-enquiry { margin: -45px auto -285px; }
}

/* ============================================================
   Video shorts uploaded as .mp4 (Admin > Video Shorts):
   the <video> fills the 9:16 frame exactly like the YouTube embed
============================================================ */
.short-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dark);
  display: block;
}

/* ============================================================
   Room pages (/hotels/{hotel}/{room}) — photo grid from the design
   (2 columns, 280px tiles), stepping down like the hotel gallery
============================================================ */
.hotel-gallery .room-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hotel-gallery .room-gallery-grid .gallery-item { height: 280px; }
@media (max-width: 767.98px) {
  .hotel-gallery .room-gallery-grid .gallery-item { height: 200px; }
}
@media (max-width: 575.98px) {
  .hotel-gallery .room-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .hotel-gallery .room-gallery-grid .gallery-item { height: 240px; }
}

/* top bar: space between the two emails (Site Settings > Contact > Second Email) */
.topbar-right { display: flex; align-items: center; gap: 22px; }