/* ==========================================================================
   Tranquil Escape — Direct booking page (/book)
   Page-owned styles only. Every rule is scoped under body.booking-page or the
   page-owned .te-booking root, and every new class is prefixed with `te-book`.
   No global/shared Webflow selectors are targeted. Mobile-first.
   ========================================================================== */

.booking-page .te-booking {
  --te-gold: #aa8453;
  --te-gold-deep: #7c6038;
  --te-cream: #f8f5f0;
  --te-cream-light: #fff9ee;
  --te-heading: #222222;
  --te-text: #555555;
  --te-text-soft: #666666;
  --te-border: #e6e6e6;
  --te-white: #ffffff;
  --te-ink: #1c1712;
  --te-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --te-serif: "Gildadisplay Woff", "Gilda Display", Georgia, "Times New Roman", serif;

  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  /* visible so HotelRunner's absolute .datepicker is not clipped */
  overflow-x: visible;
  margin: 0;
  padding: 44px 20px 72px;
  background: var(--te-cream);
  font-family: var(--te-serif);
  color: var(--te-text);
  -webkit-font-smoothing: antialiased;
}

.booking-page .te-booking *,
.booking-page .te-booking *::before,
.booking-page .te-booking *::after {
  box-sizing: border-box;
}

.booking-page .te-booking__inner {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  min-width: 0;
}

.booking-page .te-booking__intro,
.booking-page .te-booking__shell,
.booking-page .te-booking__assist {
  min-width: 0;
  max-width: 100%;
}

/* ---- Introduction ----------------------------------------------------- */

.booking-page .te-booking__intro {
  margin-bottom: 30px;
  text-align: center;
}

.booking-page .te-booking__eyebrow {
  display: block;
  margin: 0 0 12px;
  font-family: var(--te-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--te-gold-deep);
}

.booking-page .te-booking__lead {
  margin: 0 auto;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--te-text);
}

/* ---- Booking shell (card that holds heading + trust + widget + notice) - */

.booking-page .te-booking__shell {
  padding: 26px 20px 28px;
  border: 1px solid var(--te-border);
  border-top: 3px solid var(--te-gold);
  background: var(--te-white);
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.05);
  overflow: visible;
}

.booking-page .te-booking__shell-title {
  margin: 0 0 18px;
  font-family: var(--te-serif);
  font-size: clamp(1.5rem, 4.2vw, 1.875rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  color: var(--te-heading);
}

/* ---- Trust strip ------------------------------------------------------ */

.booking-page .te-booking__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--te-border);
  list-style: none;
}

.booking-page .te-booking__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--te-heading);
  white-space: nowrap;
}

.booking-page .te-booking__trust-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--te-gold-deep);
}

/* ---- HotelRunner widget (dominant functional element) ----------------- */

.booking-page .te-booking__widget-wrap {
  position: relative;
  z-index: 2;
  min-height: 132px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.booking-page #hr_search_widget {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Do not constrain tables — HotelRunner month grids are floated tables. */
.booking-page .te-booking__widget-wrap iframe,
.booking-page .te-booking__widget-wrap form,
.booking-page .te-booking__widget-wrap input,
.booking-page .te-booking__widget-wrap select,
.booking-page .te-booking__widget-wrap button {
  max-width: 100%;
}

/* Calendar popup: sit above card/notice; do not shrink month tables. */
.booking-page .datepicker {
  z-index: 40;
  max-width: 555px;
}

.booking-page .datepicker__month {
  max-width: none;
}

/*
  Desktop only: HotelRunner sets .datepicker { width: 100% } of the date
  column. On the horizontal search bar that column is too narrow for two
  240px months, so month2 wraps underneath. Lock the popup width and use
  flex so both months sit on one row. Mobile/iPad left to vendor CSS.
*/
@media screen and (min-width: 992px) {
  .booking-page .datepicker {
    width: 555px !important;
    min-width: 555px;
  }

  .booking-page .datepicker__months {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
  }

  .booking-page .datepicker__month,
  .booking-page .datepicker__month--month1,
  .booking-page .datepicker__month--month2 {
    float: none;
    width: 240px;
    flex: 0 0 240px;
    display: table;
  }
}

/* ---- Payment notice (reassurance, not an error) ----------------------- */

.booking-page .te-booking__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid #efe4d2;
  border-left: 3px solid var(--te-gold);
  background: var(--te-cream-light);
}

.booking-page .te-booking__notice-icon {
  flex: none;
  display: inline-flex;
  margin-top: 1px;
  color: var(--te-gold-deep);
}

.booking-page .te-booking__notice-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--te-text);
}

/* ---- Booking assistance ----------------------------------------------- */

.booking-page .te-booking__assist {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--te-border);
  text-align: center;
}

.booking-page .te-booking__assist-title {
  margin: 0 0 8px;
  font-family: var(--te-serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--te-heading);
}

.booking-page .te-booking__assist-text {
  margin: 0 auto 22px;
  max-width: 32em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--te-text);
}

.booking-page .te-booking__assist-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  max-width: 420px;
  padding: 0;
  list-style: none;
}

.booking-page .te-booking__assist-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 14px 18px;
  border: 1px solid var(--te-border);
  background: var(--te-white);
  text-align: left;
  text-decoration: none;
  color: var(--te-heading);
  transition: border-color 0.2s var(--te-ease), background-color 0.2s var(--te-ease),
    box-shadow 0.2s var(--te-ease), transform 0.2s var(--te-ease);
}

.booking-page .te-booking__assist-link:hover {
  border-color: var(--te-gold);
  background: var(--te-cream-light);
  box-shadow: 0 2px 10px rgba(124, 96, 56, 0.12);
}

.booking-page .te-booking__assist-link:active {
  transform: translateY(1px);
}

.booking-page .te-booking__assist-link:focus-visible {
  outline: 2px solid var(--te-gold-deep);
  outline-offset: 2px;
}

.booking-page .te-booking__assist-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--te-cream-light);
  color: var(--te-gold-deep);
  transition: background-color 0.2s var(--te-ease), color 0.2s var(--te-ease);
}

.booking-page .te-booking__assist-link:hover .te-booking__assist-icon {
  background: var(--te-gold);
  color: var(--te-white);
}

.booking-page .te-booking__assist-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.booking-page .te-booking__assist-action {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--te-heading);
}

.booking-page .te-booking__assist-value {
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--te-gold-deep);
}

/* ==========================================================================
   Hero banner — page-scoped refinement
   The shared .main-banner keeps its photo; we add a refined gradient scrim
   (not a hard block) and make the title clearly readable in white.
   ========================================================================== */

.booking-page .main-banner.book-page-banner {
  position: relative;
  background-position: 50% 45%;
}

.booking-page .main-banner.book-page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 16, 12, 0.74) 0%, rgba(20, 16, 12, 0.5) 34%, rgba(20, 16, 12, 0.16) 66%, rgba(20, 16, 12, 0) 100%),
    linear-gradient(0deg, rgba(20, 16, 12, 0.42) 0%, rgba(20, 16, 12, 0) 42%);
}

/* Keep the existing text masks above the scrim (they already carry z-index:1). */
.booking-page .main-banner.book-page-banner .breadcrumb-block {
  position: relative;
  z-index: 2;
}

.booking-page .main-banner.book-page-banner .page-title {
  max-width: 15ch;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

.booking-page .main-banner.book-page-banner .breadcrumb {
  color: rgba(255, 255, 255, 0.86);
}

.booking-page .main-banner.book-page-banner .breadcrumb.brdcrumb-icon {
  color: var(--te-gold);
}

/* ---- Keyboard focus (page-level) -------------------------------------- */

.booking-page .te-booking a:focus-visible,
.booking-page .te-booking button:focus-visible,
.booking-page .main-banner.book-page-banner a:focus-visible {
  outline: 2px solid var(--te-gold-deep);
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Mobile: comfortable gutters + WhatsApp float clearance. */
@media screen and (max-width: 767px) {
  .booking-page .te-booking {
    padding: 32px 16px 128px;
  }

  .booking-page .te-booking__shell {
    padding: 22px 16px 24px;
  }

  .booking-page .te-booking__trust {
    gap: 10px 18px;
  }

  .booking-page .te-booking__trust-item {
    white-space: nowrap;
  }
}

@media screen and (max-width: 400px) {
  .booking-page .te-booking {
    padding-left: 16px;
    padding-right: 16px;
  }

  .booking-page .te-booking__shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .booking-page .te-booking__trust {
    flex-direction: column;
    gap: 10px;
  }

  .booking-page .te-booking__trust-item {
    white-space: normal;
  }
}

/* Tablet and up: more presence without an oversized card. */
@media screen and (min-width: 768px) {
  .booking-page .te-booking {
    padding: 60px 24px 88px;
  }

  .booking-page .te-booking__inner {
    max-width: 840px;
  }

  .booking-page .te-booking__shell {
    padding: 36px 40px 40px;
  }

  .booking-page .te-booking__assist-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }

  .booking-page .te-booking__assist-link {
    flex: 1 1 300px;
    max-width: 360px;
  }
}

@media screen and (min-width: 1200px) {
  .booking-page .te-booking__inner {
    max-width: 900px;
  }

  .booking-page .te-booking__shell {
    padding: 44px 56px 48px;
  }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .booking-page .te-booking__assist-link {
    transition: none;
  }

  .booking-page .te-booking__assist-link:active {
    transform: none;
  }
}