@font-face {
  font-family: Bricolage Grotesque;
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/booking-engine/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/booking-engine/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/booking-engine/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/booking-engine/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.site-shell[data-hotel="naiwok-hills"] {
  --shell-blue: #0047a5;
  --shell-hover: #003983;
  --shell-ink: #182d39;
  --shell-muted: #5c686e;
  --shell-line: #dae1e4;
  --shell-pale: #f2f6f8;
  --shell-footer: #102b3a;
}

.site-shell, .site-shell *, .site-shell :before, .site-shell :after {
  box-sizing: border-box;
}

.site-shell {
  color: var(--shell-ink);
  text-align: left;
  letter-spacing: normal;
  font: 400 16px / 1.85 Poppins, sans-serif;
}

.site-shell a {
  color: inherit;
  text-underline-offset: 5px;
  text-decoration: none;
}

.site-shell button {
  font: inherit;
  cursor: pointer;
}

.site-shell a:focus-visible, .site-shell button:focus-visible {
  outline-offset: 5px;
  outline: 3px solid #e0a526;
}

.site-shell .shell-wrap {
  width: calc(100% - 96px);
  max-width: 1240px;
  margin: auto;
}

.site-shell .brand {
  white-space: nowrap;
  letter-spacing: .03em;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  display: inline-block;
}

.site-shell .brand small {
  letter-spacing: .43em;
  text-align: center;
  margin-top: 8px;
  font-family: Poppins, sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.1;
  display: block;
}

.site-shell.site-header {
  z-index: 10;
  border-bottom: 1px solid var(--shell-line);
  background: #fff;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.site-shell.site-header.overlay {
  color: #fff;
  background: none;
  border-color: #ffffff2c;
  position: absolute;
  inset: 0 0 auto;
}

.site-shell .header-inner {
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  height: 108px;
  display: flex;
}

.site-shell .site-nav {
  align-items: center;
  gap: 30px;
  margin: 0;
  display: flex;
}

.site-shell .site-nav a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
}

.site-shell .site-nav a:not(.shell-button) {
  padding: 8px 0;
}

.site-shell .site-nav a[aria-current="page"] {
  border-bottom: 1px solid;
}

.site-shell .site-nav a:hover {
  opacity: .8;
}

.site-shell .shell-button {
  background: var(--shell-blue);
  color: #fff;
  border: 1px solid var(--shell-blue);
  border-radius: 0;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 12px 23px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, transform .2s;
  display: inline-flex;
}

.site-shell .shell-button:hover {
  background: var(--shell-hover);
  transform: translateY(-2px);
}

.site-shell .menu-toggle {
  box-shadow: none;
  color: inherit;
  text-transform: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 8px;
  font-size: 14px;
  line-height: 1.85;
  display: none;
}

.shell-skip {
  z-index: 5000;
  color: #182d39;
  background: #fff;
  padding: 12px 20px;
  font: 400 16px / 1.85 Poppins, sans-serif;
  position: fixed;
  top: -100px;
  left: 20px;
}

.shell-skip:focus {
  top: 10px;
}

.site-shell.site-footer {
  background: var(--shell-footer);
  color: #fff;
  width: 100%;
  margin: 0;
  padding: 65px 0 25px;
}

.site-shell.site-footer .brand {
  margin-bottom: 25px;
}

.site-shell.site-footer p {
  color: #c0ced4;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.85;
}

.site-shell .shell-text-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline 1px;
}

.site-shell .footer-top {
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 52px;
  display: grid;
}

.site-shell.site-footer .footer-title {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #b6c7d0;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 400;
}

.site-shell .footer-links {
  flex-direction: column;
  align-items: start;
  gap: 8px;
  font-size: 14px;
  display: flex;
}

.site-shell .footer-links a:hover {
  text-decoration: underline;
}

.site-shell .footer-bottom {
  color: #b6c7d0;
  border-top: 1px solid #ffffff25;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-size: 12px;
  display: flex;
}

.site-shell .legal-links {
  flex-wrap: wrap;
  gap: 22px;
  display: flex;
}

@media (width <= 1050px) {
  .site-shell .shell-wrap {
    width: calc(100% - 56px);
  }

  .site-shell .site-nav {
    gap: 18px;
  }

  .site-shell .site-nav a {
    font-size: 12px;
  }

  .site-shell .brand {
    font-size: 22px;
  }
}

@media (width <= 760px) {
  .site-shell .shell-wrap {
    width: calc(100% - 40px);
  }

  .site-shell .header-inner {
    height: 86px;
  }

  .site-shell .brand {
    font-size: 22px;
  }

  .site-shell .menu-toggle {
    display: block;
  }

  .site-shell .site-nav {
    color: var(--shell-ink);
    background: #fff;
    align-items: stretch;
    padding: 20px;
    display: none;
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    box-shadow: 0 12px 22px #102b3a18;
  }

  .site-shell .site-nav.open {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }

  .site-shell .site-nav a {
    padding: 12px;
    font-size: 15px;
  }

  .site-shell .site-nav a[aria-current="page"] {
    color: var(--shell-blue);
    border: 0;
  }

  .site-shell .site-nav .shell-button[aria-current="page"] {
    color: #fff;
  }

  .site-shell .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .site-shell .footer-top > div:first-child {
    grid-column: 1 / -1;
  }

  .site-shell .footer-bottom {
    display: block;
  }

  .site-shell .legal-links {
    gap: 12px 20px;
    margin-top: 15px;
  }
}

@media (width <= 420px) {
  .site-shell .footer-top {
    grid-template-columns: 1fr;
  }

  .site-shell .footer-top > div:first-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-shell .shell-button {
    transition: none;
  }
}

:root {
  --booking-blue: #0047a5;
  --booking-hover: #003983;
  --booking-ink: #182d39;
  --booking-muted: #5c686e;
  --booking-line: #dae1e4;
  --booking-pale: #f2f6f8;
  --booking-footer: #102b3a;
}
/* Shared Beds24 availability and guest-details presentation. Fonts and shell are assembled separately by build.mjs. */
:root { --booking-focus: #e0a526; }

/* Booking, voucher, Back and calendar buttons. Load after Beds24 native styles. */
/* Primary booking buttons use explicit typography to avoid page-specific inheritance. */
.button:is(.at_bookingbut, .book_confirmbookingbut),
.b24-optionalvouchercode input[name="vouchercheck"] {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--booking-blue);
  color: #fff;
  border: 1px solid var(--booking-blue);
  border-radius: 0;
  box-shadow: none;
  height: auto;
  width: auto;
  min-height: 52px;
  max-width: 100%;
  padding: 14px 28px;
  font: 500 14px/1.85 "Poppins", sans-serif;
  /* Override the mobile 16px input rule for buttons only; editable fields retain anti-zoom sizing. */
  font-size: 14px !important;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

/* Widen the native 25% action column so mobile booking labels fit. */
@media (max-width: 767px) {
  .b24fullcontainer-rooms .b24-offer-select { width: 100%; }
  .b24fullcontainer-rooms .b24-roombuttondiv { width: 100%; }
  .button.at_bookingbut { margin-right: 0; }
}

.button:is(.at_bookingbut, .book_confirmbookingbut):hover:not(:disabled),
.b24-optionalvouchercode input[name="vouchercheck"]:hover:not(:disabled) {
  background: var(--booking-hover);
  transform: translateY(-2px);
}

.button:is(.at_bookingbut, .book_confirmbookingbut):disabled,
.b24-optionalvouchercode input[name="vouchercheck"]:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* Use the keyboard focus ring without Bootstrap mouse-focus styling. */
.button:is(.at_bookingbut, .book_confirmbookingbut):focus:not(:focus-visible),
.b24-optionalvouchercode input[name="vouchercheck"]:focus:not(:focus-visible) {
  outline: none;
}

/* Compact Apply button beside the voucher field. */
.b24-optionalvouchercode input[name="vouchercheck"] {
  min-height: 44px;
  padding: 8px 20px;
}

/* The Back anchor receives focus; its inner span carries the button class. */
.book_bookingback a,
.book_bookingback .fakebutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--booking-ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 500 14px/1.85 "Poppins", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.book_bookingback a:hover .fakebutton {
  background: transparent;
  color: var(--booking-blue);
}

/* Shared appearance for Calendar View and Close buttons. */
.b24-room-cal .fakelink {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  height: auto;
  padding: 8px 16px;
  background: var(--booking-pale);
  color: var(--booking-ink);
  border: 1px solid var(--booking-line);
  border-radius: 0;
  box-shadow: none;
  font: 500 14px/1.85 "Poppins", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}

.b24-room-cal .fakelink:hover { background: #eaf1f8; }

.button:is(.at_bookingbut, .book_confirmbookingbut):focus-visible,
.b24-optionalvouchercode input[name="vouchercheck"]:focus-visible,
.book_bookingback a:focus-visible,
.b24-room-cal .fakelink:focus-visible {
  outline: 3px solid var(--booking-focus);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .button:is(.at_bookingbut, .book_confirmbookingbut),
  .b24-optionalvouchercode input[name="vouchercheck"],
  .b24-room-cal .fakelink { transition: none; }
  .button:is(.at_bookingbut, .book_confirmbookingbut):hover:not(:disabled),
  .b24-optionalvouchercode input[name="vouchercheck"]:hover:not(:disabled) {
    transform: none;
  }
}

/* Hotel-owned room descriptions inside the native .b24-room-desc wrapper.
 * Pixel sizes avoid Bootstrap's 10px rem base. */
.room-description {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 12px;
  color: var(--booking-ink);
  text-align: left;
}

.room-description .room-description__title {
  margin: 0 0 24px;
  color: var(--booking-ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 25.6px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

.room-description .room-description__text {
  margin: 0 0 22px;
  color: var(--booking-muted);
  font: 400 16px/1.85 "Poppins", sans-serif;
  letter-spacing: normal;
  overflow-wrap: break-word;
}

.room-description__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: auto;
}

.room-description .room-description__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  color: var(--booking-ink);
  background: var(--booking-pale);
  border: 1px solid var(--booking-line);
  border-radius: 0;
  font: 500 13px/1.6 "Poppins", sans-serif;
  letter-spacing: normal;
  text-decoration: none;
}

.room-description .room-description__link:hover { color: var(--booking-blue); background: #eaf1f8; }
.room-description .room-description__link:focus:not(:focus-visible) { outline: none; }
.room-description .room-description__link:focus-visible {
  outline: 3px solid var(--booking-focus);
  outline-offset: 5px;
}

/* Room descriptions remain visible at every width.
 * The surrounding grid and shared action row are defined in desktop-layout.css. */
@media (min-width: 768px) {
  .b24fullcontainer-rooms .room-description { display: contents; }
  .b24fullcontainer-rooms .room-description__title {
    grid-column: 2 / 4; grid-row: 1;
    font-size: clamp(24px, 2.1875vw, 28px); font-weight: 600; line-height: 1.2;
    letter-spacing: -.025em; margin: clamp(8px, .9375vw, 12px) 0 4px;
  }
  .b24fullcontainer-rooms .room-description__text {
    grid-column: 2 / 4; grid-row: 2;
    font-size: 16px; line-height: 1.65; margin-bottom: 8px; max-width: 72ch;
    align-self: start;
  }
  .b24fullcontainer-rooms .room-description__actions {
    grid-column: 2; grid-row: 3; align-self: end; margin: 0;
  }
}

/* Guest-detail labels, inputs, country selector, terms checkbox and voucher field. */
/* Remove the native guest-panel heading divider. */
.b24-guestdetails .panel-heading { border-bottom: 0; }
.b24-guestdetails .questionrow { margin-bottom: 20px; }
.b24-guestdetails .questionrow > :is(.col-sm-4, .col-sm-8) {
  float: none; width: 100%; min-width: 0;
}
.b24-guestdetails .questionrow > .col-sm-4 {
  display: block; margin: 0 0 8px; color: var(--booking-muted);
  font: 500 12px/1.5 "Poppins", sans-serif;
}
.b24-guestdetails .questionrow > .col-sm-8 { margin: 0; }
.b24-guestdetails .form-control,
.b24-optionalvouchercode .inputdiscountphrase {
  box-sizing: border-box; display: block; width: 100%; max-width: 100%;
  height: 52px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--booking-line); border-radius: 0;
  background-color: #fff; color: var(--booking-ink);
  font: 400 16px/1.5 "Poppins", sans-serif;
  box-shadow: none; transition: border-color .15s ease;
}
.b24-guestdetails .form-control:hover,
.b24-optionalvouchercode .inputdiscountphrase:hover { border-color: var(--booking-blue); }
.b24-guestdetails .form-control:focus,
.b24-optionalvouchercode .inputdiscountphrase:focus {
  border-color: var(--booking-blue); box-shadow: none;
}
.b24-guestdetails .form-control:focus-visible,
.b24-optionalvouchercode .inputdiscountphrase:focus-visible {
  outline: 3px solid var(--booking-focus); outline-offset: 4px;
}
.b24-guestdetails .form-control::placeholder,
.b24-optionalvouchercode .inputdiscountphrase::placeholder { color: var(--booking-muted); opacity: 1; }
/* Country placeholder color follows the selected native option. */
.b24-guestdetails #guestcountry2:has(option[value="0"]:checked),
.b24-guestdetails #guestcountry2 option[value="0"] { color: var(--booking-muted); }
.b24-guestdetails #guestcountry2 option { color: var(--booking-ink); }
/* Hide native required-field markers. */
.b24-guestdetails .requiredfield { display: none; }
.b24-guestdetails .questionrow-guestcustq8 {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  align-items: start; column-gap: 10px; margin: 24px 0 0;
}
.b24-guestdetails .questionrow-guestcustq8 > .col-sm-4 {
  grid-area: 1 / 2; width: auto; margin: 0; padding: 0; white-space: normal;
  font: 400 14px/1.6 "Poppins", sans-serif; color: var(--booking-ink);
}
.b24-guestdetails .questionrow-guestcustq8 > .col-sm-8 {
  grid-area: 1 / 1; width: 18px; margin: 2px 0 0; padding: 0;
}
.b24-guestdetails .questionrow-guestcustq8 .booktextdiv { display: flex; }
.b24-guestdetails #guestcustq8 {
  appearance: auto; flex: 0 0 18px; width: 18px; height: 18px;
  margin: 0; padding: 0; accent-color: var(--booking-blue); box-shadow: none;
}
.b24-guestdetails .questionrow-guestcustq8 a {
  color: var(--booking-blue); text-decoration: underline; text-underline-offset: 3px;
}
.b24-guestdetails :is(#guestcustq8, .questionrow-guestcustq8 a):focus-visible {
  outline: 3px solid var(--booking-focus); outline-offset: 4px;
}
/* Compact voucher field aligned with the 44px Apply button. */
.b24-optionalvouchercode .inputdiscountphrase { height: 44px; padding: 8px 12px; }
/* Voucher hint uses smaller text; entered values stay at 16px. */
.b24-optionalvouchercode .inputdiscountphrase::placeholder { font-size: 13px; }
.b24-optionalvouchercode .panel-heading,
.b24-optionalvouchercode .form-group > .col-xs-12 { display: none; }
.b24-optionalvouchercode .form-group {
  display: grid; grid-template-columns: minmax(0, 240px) max-content;
  align-items: center; gap: 12px; margin: 0;
}
.b24-optionalvouchercode .form-group > .col-xs-6 {
  float: none; width: auto; min-width: 0; padding: 0;
}

/* Availability date strip: check-in, checkout and stay length.
 * Date-picker popup styles are defined separately. */
#b24scroller {
  box-sizing: border-box;
  /* Native owner-row padding supplies the currency gap; room-card margins
 * match the gap below the strip to the spacing between rooms. */
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  box-shadow: none;
}
.setborderstyle1 #b24scroller { box-shadow: none; }
#b24scroller > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  max-width: 1170px;
}
#b24scroller > .row::before,
#b24scroller > .row::after,
#b24scroller > .row > .col-md-1 { display: none; }
#b24scroller :is(.b24-selector-checkin, .b24-selector-checkout, .b24-selector-numnight) {
  flex: 1 1 240px;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* Hide guest-count controls in the availability strip. */
#b24scroller :is(.b24-selector-numadult, .b24-selector-numchild) { display: none; }
#b24scroller .form-group { margin: 0; padding: 0; border: 0; box-shadow: none; }
#b24scroller .control-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  text-align: left;
  text-transform: none;
  color: var(--booking-muted);
  font: 500 12px/1.5 "Poppins", sans-serif;
}
#b24scroller :is(#checkin, #checkout) { display: block; width: 100%; background: none; }
/* Hide the icon addon; the whole date field opens the picker. */
#b24scroller .input-group-addon { display: none; }
#b24scroller .form-control {
  box-sizing: border-box;
  display: block;
  float: none;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  background: #fff;
  color: var(--booking-ink);
  font: 400 16px/1.5 "Poppins", sans-serif;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
#b24scroller .form-control:hover,
#b24scroller .form-control:focus { border-color: var(--booking-blue); box-shadow: none; }
#b24scroller .form-control:focus-visible { outline: 3px solid var(--booking-focus); outline-offset: 4px; }
#b24scroller .date .form-control { border-radius: 0; }
/* Keep date controls at full size when the strip becomes sticky. */
#b24scroller.scrollerfixedtop {
  position: fixed;
  left: 0;
  z-index: 1000;
  width: 100% !important;
  margin: 0;
}
#b24scroller.scrollerfixedtop > .row { margin-inline: auto; }
@media (max-width: 600px) {
  #b24scroller { margin: 0 8px; padding: 16px; }
  #b24scroller :is(.b24-selector-checkin, .b24-selector-checkout) { flex-basis: 100%; }
}

/* Availability date-picker popup. Beds24 controls positioning, selection,
 * disabled dates and keyboard handling; inline room calendars are separate. */
#b24scroller .bootstrap-datetimepicker-widget {
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  padding: 8px;
  margin-top: 8px;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  background: #fff;
  color: var(--booking-ink);
  box-shadow: 0 8px 24px rgb(24 45 57 / 12%);
  font: 400 14px/1.5 "Poppins", sans-serif;
}
#b24scroller .bootstrap-datetimepicker-widget.top { margin-top: 0; margin-bottom: 8px; }
#b24scroller .bootstrap-datetimepicker-widget.bottom::before { border-bottom-color: var(--booking-line); }
#b24scroller .bootstrap-datetimepicker-widget.top::before { border-top-color: var(--booking-line); }
#b24scroller .bootstrap-datetimepicker-widget table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
#b24scroller .bootstrap-datetimepicker-widget :is(td, th) {
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
  text-shadow: none;
}
#b24scroller .bootstrap-datetimepicker-widget th {
  height: 44px;
  line-height: 1.5;
  font-weight: 500;
}
#b24scroller .bootstrap-datetimepicker-widget th.picker-switch {
  width: auto;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
}
#b24scroller .bootstrap-datetimepicker-widget th:is(.prev, .next) { width: 14.2857%; font-size: 14px; }
#b24scroller .bootstrap-datetimepicker-widget th.dow { height: 32px; color: var(--booking-muted); font-size: 12px; }
#b24scroller .bootstrap-datetimepicker-widget td.day { width: 14.2857%; height: 40px; line-height: 40px; }
#b24scroller .bootstrap-datetimepicker-widget td span {
  box-sizing: border-box;
  width: 25%;
  height: 48px;
  line-height: 48px;
  margin: 0;
  border-radius: 0;
}
#b24scroller .bootstrap-datetimepicker-widget :is(td.old, td.new, td span.old) { color: var(--booking-muted); }
#b24scroller .bootstrap-datetimepicker-widget :is(td.day, th[data-action], td span[data-action]):hover {
  background: #eaf1f8;
  color: var(--booking-blue);
}
#b24scroller .bootstrap-datetimepicker-widget :is(td.active, td span.active),
#b24scroller .bootstrap-datetimepicker-widget :is(td.active, td span.active):hover {
  background: var(--booking-blue);
  color: #fff;
  font-weight: 500;
  text-shadow: none;
}
/* Keep unavailable dates distinct, including on hover. */
#b24scroller .bootstrap-datetimepicker-widget :is(td.disabled, th.disabled, td span.disabled),
#b24scroller .bootstrap-datetimepicker-widget :is(td.disabled, th.disabled, td span.disabled):hover {
  background: transparent;
  color: #929da3;
  cursor: not-allowed;
}
#b24scroller .bootstrap-datetimepicker-widget td.today::before { border-bottom-color: var(--booking-blue); }
#b24scroller .bootstrap-datetimepicker-widget td.active.today::before { border-bottom-color: #fff; }
#b24scroller .bootstrap-datetimepicker-widget [data-action]:focus-visible { outline: 3px solid var(--booking-focus); outline-offset: -3px; }

/* Offer titles and descriptions. Availability-page offer descriptions are hidden
 * below 768px by the native .b24-offer-summary.hidden-xs wrapper; guest-summary
 * offer descriptions remain visible. Room descriptions are styled separately. */
.offer {
  border-top: 1px solid var(--booking-line);
  border-bottom: 0;
}

/* Hide availability-page offer titles; show them in the guest summary.
 * Listing layout rules remove the hidden titles' reserved space. */
.at_offername { visibility: hidden; }
.b24-bookingdetails .at_offername {
  visibility: visible;
  color: var(--booking-ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.at_offersummary {
  min-width: 0;
  padding: 0;
  color: var(--booking-muted);
  font: 400 15px/1.75 "Poppins", sans-serif;
  letter-spacing: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

.at_offersummary ul {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc outside;
}
.at_offersummary li {
  margin: 0;
  padding: 0 0 0 2px;
  line-height: inherit;
}
.at_offersummary li + li { margin-top: 8px; }
.at_offersummary li::marker { color: var(--booking-blue); }
.at_offersummary :is(b, strong) {
  color: var(--booking-ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}
/* Override inline span line-height so offer descriptions use consistent spacing. */
.at_offersummary li > span { line-height: inherit !important; }

.b24-bookingdetails .at_offersummary { margin: 12px 0 24px; }
@media (min-width: 768px) {
  .offer { padding-bottom: 15px; }
}

/* Shared booking colors, typography and page spacing. */
.colorbody { color: var(--booking-ink); font: 400 15px/1.7 "Poppins", sans-serif; }
.colorbody :is(b, strong) { font-weight: 600; }
.innertube { margin: 24px 0 88px; }
/* Hide native search, security badge, duplicate navigation and footer controls. */
.newsearch, .book_securelogo, .book_bookingbackright, .ssi_makeabooking,
.b24fullcontainer-footer, .b24fullcontainer .b24fullcontainer-selector { display: none !important; }
@media (max-width: 767px) { .atcolor { width: 100% !important; } }

/* Availability-page offer prices and booking-action columns. */
.b24fullcontainer-rooms .b24-offer-select {
  margin: 0;
  padding-top: 8px;
  padding-bottom: 20px;
  min-width: 0;
}
.b24fullcontainer-rooms .at_roomofferprice {
  margin: 0 0 12px;
  color: var(--booking-ink);
  font: 500 28px/1.3 "Bricolage Grotesque", sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.b24fullcontainer-rooms .at_roomofferprice .bookingpagecurrency,
.b24fullcontainer-rooms .at_roomofferprice .bookingpagecents {
  font: 400 16px/1.3 "Poppins", sans-serif;
  vertical-align: baseline;
}
.b24fullcontainer-rooms .at_roomofferprice .bookingpagedollars { font: inherit; }
.b24fullcontainer-rooms .b24-roombuttondiv { width: 100%; text-align: right; }
.b24fullcontainer-rooms .b24-roombuttondiv .at_bookingbut { float: none !important; margin: 0; }
@media (max-width: 767px) {
  /* Set explicit spacing between the offer separator and price. */
  .b24fullcontainer-rooms .offer .at_offername { display: none; }
  /* Keep booking actions clear of the floating contact launcher. */
  .b24fullcontainer-rooms .b24-offer-select { width: 100%; padding: 32px 64px 8px 15px; }
  .b24fullcontainer-rooms .at_roomofferprice { font-size: 26px; }
}

/* Room and offer availability warnings. */
.b24fullcontainer-rooms .at_offerwarndiv.alert,
.b24fullcontainer-rooms .b24-roomwarn {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #e4c8c5;
  border-left: 3px solid #a94442;
  border-radius: 0;
  background: #fbf2f1;
  color: #863b36;
  font: 400 14px/1.6 "Poppins", sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
/* Hide room enquiry controls, including after availability refreshes. */
.b24roomenquire { display: none; }

/* Guest-page panels in native reading order: summary, voucher, details and actions. */
#bookingpage { color: var(--booking-ink); font: 400 15px/1.7 "Poppins", sans-serif; }
#bookingpage .b24-guest-details-left,
#bookingpage .b24-guest-details-right { min-width: 0; padding: 0 15px; }
#bookingpage .b24panel-room {
  margin: 0 !important;
  border: 1px solid var(--booking-line) !important;
  border-radius: 0 !important;
  box-shadow: none;
  background: #fff;
}
#bookingpage .panel-body.b24panel { padding: 24px; border-radius: 0 !important; }
#bookingpage .b24-guestdetails .panel-heading {
  padding: 24px 24px 0;
  background: #fff;
  border: 0;
  border-radius: 0;
}
#bookingpage .b24-guestdetails .panel-heading .at_roomnametext {
  margin: 0;
  color: var(--booking-ink);
  font: 500 28px/1.2 "Bricolage Grotesque", sans-serif;
  font-size: 28px !important;
  letter-spacing: -.025em;
}
#bookingpage .panel-title { margin: 0 0 16px; }
#bookingpage .b24-optionalvouchercode { margin: 0 0 20px; }
#bookingpage .b24-guestdetails { margin-bottom: 24px; }
@media (min-width: 992px) {
  #bookingpage .b24-guest-details-right { width: 42%; }
  #bookingpage .b24-guest-details-left { width: 58%; }
}
@media (max-width: 991px) {
  #bookingpage .b24-guest-details-right,
  #bookingpage .b24-guest-details-left { float: none; width: 100%; }
  #bookingpage .b24-bookingdetails { margin-bottom: 24px; }
}
@media (max-width: 767px) {
  #bookingpage .b24-bookingdetails { margin-bottom: 24px; }
  #bookingpage .panel-body.b24panel { padding: 20px; }
  #bookingpage .b24-guestdetails .panel-heading { padding: 20px 20px 0; }
  #bookingpage .b24-guestdetails .panel-heading .at_roomnametext { font-size: 26px !important; }
}

/* Booked-room content in the guest summary.
 * Offer title and description styles are defined in offers.css. */
#bookingpage .b24-bookingdetails .panel-heading.b24-roompanel-heading { display: none !important; }
#bookingpage .b24-bookingdetails .panel-body { min-height: 0; margin: 0; }
#bookingpage .b24-bookingdetails .panel-body > .at_roomnametext {
  display: block;
  border-left: 3px solid var(--booking-blue);
  margin: 0 0 20px;
  padding: 0 0 0 12px;
  color: var(--booking-ink);
  font: 500 26px/1.25 "Bricolage Grotesque", sans-serif;
  font-size: 26px !important;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
#bookingpage .b24-bookingdetails img.img-responsive {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

/* Stay details, totals, deposit row and price-summary dividers.
 * JavaScript formats dates and calculates the deposit. */
#bookingpage .b24-bookingdetails .panel-body > .row:has(> .col-xs-5) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 12px;
  align-items: baseline;
}
#bookingpage .b24-bookingdetails .panel-body > .row:has(> .col-xs-5)::before,
#bookingpage .b24-bookingdetails .panel-body > .row:has(> .col-xs-5)::after { display: none; }
#bookingpage .b24-bookingdetails .panel-body > .row > :is(.col-xs-5, .col-xs-7) {
  float: none;
  width: auto;
  padding: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
#bookingpage .b24-bookingdetails .panel-body > .row > .col-xs-5 { flex: 1 1 115px; }
#bookingpage .b24-bookingdetails .panel-body > .row > .col-xs-7 { flex: 1 1 135px; text-align: right; }
#bookingpage .b24-bookingdetails .bookingpageamount { font-variant-numeric: tabular-nums; font-weight: 500; }
#bookingpage .b24-bookingdetails .bookingpagecurrency { font-size: 13px; }
#bookingpage .b24-bookingdetails :is(.booking-price-summary-divider, .booking-deposit-divider) {
  display: block;
  clear: both;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--booking-line) !important;
}
#bookingpage .b24-bookingdetails .col-xs-7 > .b24inline-block.pull-right { margin-left: 8px; }
#bookingpage .b24-bookingdetails .totalpricerow { font-size: 16px; }
#bookingpage .b24-bookingdetails .booking-deposit-row { margin: 0; color: var(--booking-blue); font-size: 17px; font-weight: 500; }
#bookingpage .b24-repeatgrandtotal { display: none !important; }

/* Guest-page Back and Confirm Booking row, including the waiting message.
 * Button appearance is defined in buttons.css. */
.b24-guestdetails + .b24-guest-details-left .col-sm-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.b24-guestdetails + .b24-guest-details-left :is(.book_bookingback, .book_confirmbooking) { float: none; margin: 0 !important; padding-bottom: 0 !important; }
.book_bookingback a { margin-top: 0 !important; }
.b24-guestdetails + .b24-guest-details-left .book_confirmbooking { max-width: 100%; margin-left: auto !important; }
.b24-guestdetails + .b24-guest-details-left .book_pleasewait { color: var(--booking-muted); font: 400 14px/1.6 "Poppins", sans-serif; text-align: right; }
@media (max-width: 991px) {
  .b24-guestdetails + .b24-guest-details-left .col-sm-12 { padding-right: 64px; }
}

/* Currency selector and native dropdown menu. */
/* Match the owner row's 10px spacing below the currency control. */
.b24fullcontainer-top:has(.b24currencydropdown) { padding-top: 10px; }
.b24currencydropdown { font: 400 14px/1.6 "Poppins", sans-serif; }
.b24currencydropdown #dropdownMenu2 {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  background: #fff;
  color: var(--booking-ink);
  font: inherit;
  text-decoration: none;
  box-shadow: none;
}
.b24currencydropdown #dropdownMenu2:hover,
.b24currencydropdown.open #dropdownMenu2 { background: var(--booking-pale); }
.b24currencydropdown .caret { margin-left: 8px; }
.b24currencydropdown .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 160px;
  max-width: calc(100vw - 32px);
  max-height: min(360px, 60vh);
  overflow: auto;
  padding: 8px 0;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  box-shadow: 0 8px 24px #102b3a1a;
  z-index: 1020;
}
.b24currencydropdown .dropdown-menu > li > a { min-height: 44px; padding: 11px 18px; color: var(--booking-ink); font: inherit; }
.b24currencydropdown .dropdown-menu > li > a:is(:hover, :focus),
.b24currencydropdown .dropdown-menu > .active > a { background: #eaf1f8; color: var(--booking-blue); }
.b24currencydropdown :is(button, a):focus-visible { outline: 3px solid var(--booking-focus); outline-offset: -3px; }
.b24currencydropdown .dropdown-menu .divider { background: var(--booking-line); margin: 8px 0; }
/* Keep the approximate converted amount secondary to the THB charge. */
.b24fullcontainer-rooms .at_roomofferprice .altcurrency { margin-top: 4px; color: var(--booking-muted); font: 400 14px/1.5 "Poppins",sans-serif; }
.b24fullcontainer-rooms .at_roomofferprice .altcurrency :is(.bookingpagedollars,.bookingpagecents,.bookingpagecurrency2) { font: inherit; }

/* Floating contact launcher generated by the separate float-launcher script. */
.flx-wrap { z-index: 900 !important; right: 18px !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; }
.flx-fab { width: 56px !important; height: 56px !important; background: var(--booking-blue) !important; box-shadow: 0 6px 20px #102b3a33; }
.flx-mini { width: 48px !important; height: 48px !important; }
.flx-stack { bottom: 68px !important; gap: 12px !important; }
.flx-wrap :is(button, a):focus-visible { outline: 3px solid var(--booking-focus); outline-offset: 4px; }
/* Remove closed launcher links from keyboard navigation. */
.flx-wrap:not(.flx-open) .flx-stack { visibility: hidden; }
.flx-wrap.flx-open .flx-stack { visibility: visible; }
@media (max-width: 767px) {
  .flx-wrap { right: 12px !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .flx-fab { width: 48px !important; height: 48px !important; }
  .flx-mini { width: 44px !important; height: 44px !important; }
  .flx-stack { bottom: 60px !important; gap: 10px !important; }
}
@media (prefers-reduced-motion: reduce) { .flx-mini { transition: none !important; } }

/* Inline room availability calendars. Native classes encode availability,
 * requests, split dates and stays; retain split-date gradients and disable interaction. */
.b24fullcontainer-rooms .b24-room-cal { grid-column: 1 / -1; width: 100%; margin: 12px 0 20px; padding: 0 12px; font-weight: 400; }
.b24fullcontainer-rooms .b24-room-cal .fakelink { position: static; inset: auto; }
.b24-room-cal .fakelink .glyphicon { width: 16px; height: 16px; }
.b24-room-cal .ajaxroomcalendar {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px;
  margin: 16px 0 0;
}
.b24-room-cal .ajaxroomcalendar::before,
.b24-room-cal .ajaxroomcalendar::after { display: none; }
.b24-room-cal .roomoffercalendarmonth { float: none; width: auto; min-width: 0; padding: 0; pointer-events: none; }
.b24-room-cal .monthcalendar { width: 100%; table-layout: fixed; border-collapse: collapse; padding: 0; font: 400 13px/1.4 "Poppins",sans-serif; }
.b24-room-cal .monthcalendar td { height: 36px; padding: 4px 2px !important; border-color: var(--booking-line); font-size: 13px !important; }
.b24-room-cal .monthcalendar td.monthcalendarhead { height: 44px; color: var(--booking-ink); text-transform: none; font: 500 18px/1.3 "Bricolage Grotesque",sans-serif; font-size: 18px !important; }
.b24-room-cal .monthcalendarhead span { font-size: inherit; }
.b24-room-cal .monthcalendarday { color: var(--booking-muted); font-weight: 500; }
.b24-room-cal :is(.dateavail,.daterequest) { cursor: default; }
.b24-room-cal :is(.datestay,.prevdatestay) { box-shadow: inset 0 0 0 2px var(--booking-blue); font-weight: 600; }
.b24-room-cal .datepast { color: #a1a9ae !important; background: var(--booking-pale) !important; }
@media(max-width:767px) {
  .b24-room-cal .ajaxroomcalendar { grid-template-columns: minmax(0,1fr); }
  .b24-room-cal :is(.calendarmonth2,.calendarmonth3) { display: none !important; }
}

/* Availability-page room-card borders, spacing and structure. */
/* Add space between the room results and footer. */
.b24fullcontainer-rooms { padding-bottom: 32px; }
.b24fullcontainer-rooms .b24panel-room {
  margin: 24px 0 !important; border: 1px solid var(--booking-line) !important;
  border-radius: 0 !important; box-shadow: none; background: #fff; line-height: 1.7;
}
.b24fullcontainer-rooms .b24room .panel-body { padding: 12px; border-radius: 0 !important; }
.b24fullcontainer-rooms .b24-roompanel-heading,
.b24fullcontainer-rooms div[id^="roomnametext"] { display: none !important; }
.b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: 16px;
  align-items: start; margin: 0;
}
.b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row::before,
.b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row::after { display: none; }
.b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row > :is(.b24-room-slider,.b24-room-desc) {
  width: auto; min-width: 0; max-width: none; float: none; margin: 0; padding: 0;
}
.b24fullcontainer-rooms .b24-room-slider { padding: 12px !important; }
.b24fullcontainer-rooms .offer { margin-inline: 12px; }
.b24fullcontainer-rooms hr.bb { border-bottom: 0; }
@media(max-width:767px) {
  .b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row { grid-template-columns: minmax(0,1fr); gap: 0; }
}

/* Room photo carousel. Bootstrap controls slide visibility and transitions;
 * CSS aspect ratio overrides the inline frame height written by native resize code. */
.b24fullcontainer-rooms .carousel { width: 100%; max-width: none; margin: 0; height: auto !important; aspect-ratio: 4/3; background: var(--booking-pale); }
.b24fullcontainer-rooms .carousel-inner { height: 100% !important; border-radius: 0; }
.b24fullcontainer-rooms .carousel-inner .item { height: 100% !important; }
.b24fullcontainer-rooms .carousel-inner .item img { width: 100%; height: 100% !important; object-fit: cover; }
.b24fullcontainer-rooms .carousel-control {
  top: calc(50% - 22px); bottom: auto; width: 44px; height: 44px;
  background: #102b3acc; color: #fff; opacity: 1; text-shadow: none;
}
.b24fullcontainer-rooms .carousel-control.left { left: 8px; }
.b24fullcontainer-rooms .carousel-control.right { right: 8px; }
.b24fullcontainer-rooms .carousel-control:hover { background: var(--booking-blue); }
.b24fullcontainer-rooms .carousel-control :is(.glyphicon-chevron-left,.glyphicon-chevron-right) { font-size: 20px; width: 24px; height: 24px; margin-top: -12px; }
.b24fullcontainer-rooms .carousel-control .glyphicon-chevron-left { margin-left: -12px; }
.b24fullcontainer-rooms .carousel-control .glyphicon-chevron-right { margin-right: -12px; }
.b24fullcontainer-rooms .carousel-indicators {
  bottom: 8px; left: 12px; right: 12px; width: auto; margin: 0;
  padding: 4px; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px;
}
.b24fullcontainer-rooms .carousel-indicators li { width: 10px; height: 10px; margin: 2px; border: 1px solid #fff; background: #102b3a80; }
.b24fullcontainer-rooms .carousel-indicators li.active { background: #fff; }
.b24fullcontainer-rooms :is(.carousel-control,.room-lightbox-trigger):focus-visible { outline: 3px solid var(--booking-focus); outline-offset: -4px; }
@media(prefers-reduced-motion:reduce) { .b24fullcontainer-rooms .carousel-inner > .item { transition: none; } }

/* Room-image lightbox created by booking-engine.js, which also manages focus. */
.room-lightbox[hidden], .room-lightbox__button[hidden] { display: none !important; }
.room-lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: #102b3af2; padding: 72px; }
.room-lightbox-open { overflow: hidden; }
.room-lightbox__image { display: block; max-width: 100%; max-height: calc(100dvh - 144px); object-fit: contain; }
.room-lightbox__button { position: absolute; z-index: 1; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff80; border-radius: 0; color: #fff; background: #102b3a; font: 400 28px/1 sans-serif; cursor: pointer; }
.room-lightbox__button--previous { left: 16px; top: calc(50% - 24px); }
.room-lightbox__button--next { right: 16px; top: calc(50% - 24px); }
.room-lightbox__button--close { top: max(16px,env(safe-area-inset-top)); right: 16px; font-size: 36px; }
.room-lightbox__button:hover { background: var(--booking-blue); }
.room-lightbox__button:focus-visible { outline: 3px solid var(--booking-focus); outline-offset: 4px; }
.room-lightbox-trigger { cursor: zoom-in; }
@media(max-width:600px) {
  .room-lightbox { padding: 76px 12px 84px; }
  .room-lightbox__image { max-height: calc(100dvh - 160px); }
  .room-lightbox__button--previous,.room-lightbox__button--next { top: auto; bottom: max(16px,env(safe-area-inset-bottom)); }
}

.booking-phone-warning { margin: 8px 0 0; color: #8a5a10; font-size: 13px; line-height: 1.5; }
.booking-phone-warning[hidden] { display: none !important; }

/* Guest phone field enhanced by intl-tel-input.
 * Preserve inline padding calculated for the selected dial code. */
.b24-guestdetails .iti { display: block; width: 100%; font: 400 16px/1.5 "Poppins",sans-serif; }
.b24-guestdetails .iti__flag-container { z-index: 3; }
.b24-guestdetails .iti__selected-flag { background: transparent; border-right: 1px solid var(--booking-line); }
.b24-guestdetails .iti__selected-flag:hover { background: var(--booking-pale); }
.b24-guestdetails .iti__selected-flag:focus-visible { outline: 3px solid var(--booking-focus); outline-offset: -3px; }
.b24-guestdetails .iti__selected-dial-code { color: var(--booking-ink); font-size: 16px; line-height: 1.5; }
.iti .iti__country-list,
.iti--container .iti__country-list {
  max-width: min(440px,calc(100vw - 48px)); max-height: min(320px,50vh);
  white-space: normal; border: 1px solid var(--booking-line); border-radius: 0;
  padding: 4px 0; box-shadow: 0 8px 24px #102b3a26; color: var(--booking-ink);
  font: 400 14px/1.6 "Poppins",sans-serif;
}
.iti .iti__country-list { width: max-content; }
.iti__country-list .iti__country { min-height: 44px; padding: 10px 12px; }
.iti__country-list .iti__country.iti__highlight { background: #eaf1f8; color: var(--booking-blue); }
.iti__country-list .iti__country.iti__active { font-weight: 500; }
.iti__country-list .iti__dial-code { color: var(--booking-muted); }
.iti__country-list .iti__divider { border-color: var(--booking-line); margin: 4px 0; }
.iti--container { z-index: 1055; }
.iti-mobile .iti--container { inset: 16px; }
.iti-mobile .iti__country-list { max-width: 100%; max-height: 100%; }

/* Guest-field borders after native browser validation rejects an entered value. */
.b24-guestdetails .form-control:user-invalid { border-color: #a94442; }

/* Responsive room-card grid with fluid container widths through desktop and tablet. */
@media (min-width: 768px) {
  .b24fullcontainer-rooms > .container,
  #b24scroller-container { width: 100%; max-width: 1170px; }
  #b24scroller { margin: 0 auto; padding: 16px 20px; }
  #b24scroller > .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #b24scroller .control-label { margin-bottom: 6px; font-size: 13px; }
  #b24scroller .form-control { height: 46px; padding: 10px 12px; font-size: 15px; }

  .b24fullcontainer-rooms .b24panel-room { margin: 20px 0 !important; }
  .b24fullcontainer-rooms .b24room .panel-body {
    display: grid; grid-template-columns: minmax(0, 30%) max-content minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(12px, 1.5625vw, 20px); row-gap: 8px;
    padding: clamp(12px, 1.5625vw, 20px);
  }
  .b24fullcontainer-rooms .b24room .panel-body::before,
  .b24fullcontainer-rooms .b24room .panel-body::after,
  .b24fullcontainer-rooms .b24room .panel-body > .clearfix { display: none; }
  .b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row {
    display: contents;
  }
  .b24fullcontainer-rooms .b24-room-slider {
    grid-column: 1; grid-row: 1 / 4; align-self: stretch; padding: 0 !important;
    position: relative;
  }
  .b24fullcontainer-rooms .b24-room-slider::before {
    /* Use a 3:2 minimum image frame without widening its column. */
    content: ""; display: block; padding-top: 66.666667%;
  }
  /* Align image and action bottoms as descriptions grow.
 * Below 768px, restore the carousel aspect ratio and stacked layout. */
  .b24fullcontainer-rooms .b24-room-slider > .carousel {
    position: absolute; inset: 0; height: 100% !important; aspect-ratio: auto;
  }
  /* Share a grid across native wrappers to align both room actions. */
  .b24fullcontainer-rooms .b24-room-desc,
  .b24fullcontainer-rooms .b24-room-cal { display: contents; }
  /* Room-description typography is defined in room-descriptions.css. */
  .b24fullcontainer-rooms .b24-room-cal > .fakelink {
    box-sizing: border-box; min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--booking-line); background: var(--booking-pale);
    font: 500 13px/1.6 "Poppins", sans-serif; text-decoration: none;
    grid-column: 3; grid-row: 3; align-self: end; justify-self: start;
  }
  .b24fullcontainer-rooms .b24-room-cal > [id^="collapsecal"] {
    grid-column: 1 / -1; grid-row: 4; margin: 8px 0;
  }

  /* Remove reserved space from hidden offer titles. */
  .b24fullcontainer-rooms .offer .at_offername { display: none; }
  .b24fullcontainer-rooms .offer { grid-column: 1 / -1; margin: 8px 0 0; padding: 16px 0 0; }
  .b24fullcontainer-rooms .offer > hr.bb { display: none; }
  .b24fullcontainer-rooms .offer > div > .row {
    display: flex; align-items: center; gap: 24px; margin: 0;
  }
  .b24fullcontainer-rooms .offer > div > .row::before,
  .b24fullcontainer-rooms .offer > div > .row::after { display: none; }
  .b24fullcontainer-rooms .b24-offer-summary {
    flex: 1 1 0; width: auto; min-width: 0; padding: 0;
  }
  .b24fullcontainer-rooms .at_offersummary { font-size: 13px; line-height: 1.6; }
  .b24fullcontainer-rooms .at_offersummary li + li { margin-top: 4px; }
  .b24fullcontainer-rooms .b24-offer-select {
    flex: 0 1 auto; width: auto; max-width: 48%; padding: 0;
    /* Increase contact-launcher clearance as the outer gutter narrows. */
    padding-right: clamp(0px, calc(632px - 50vw), 60px);
  }
  .b24fullcontainer-rooms .multiroomhide > div:has(> .at_roomofferprice):has(> .b24-roombuttondiv) {
    display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  }
  .b24fullcontainer-rooms .at_roomofferprice { margin: 0; font-size: 26px; }
  .b24fullcontainer-rooms .at_roomofferprice :is(.bookingpagecurrency, .bookingpagecents) { font-size: 14px; }
  .b24fullcontainer-rooms .b24-roombuttondiv { width: auto; flex: 0 0 auto; padding: 0; }
  .b24fullcontainer-rooms .button.at_bookingbut {
    min-height: 46px; padding: 10px 22px; line-height: 1.6;
  }
}

/* Stack image, title and text on mobile while keeping both room actions on one row. */
@media (max-width: 767px) {
  .b24fullcontainer-rooms .b24room .panel-body {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 8px;
  }
  .b24fullcontainer-rooms .b24room .panel-body::before,
  .b24fullcontainer-rooms .b24room .panel-body::after,
  .b24fullcontainer-rooms .b24room .panel-body > .clearfix { display: none; }
  .b24fullcontainer-rooms .b24room .panel-body > .clearfix + .row,
  .b24fullcontainer-rooms .b24-room-desc,
  .b24fullcontainer-rooms .room-description,
  .b24fullcontainer-rooms .b24-room-cal { display: contents; }
  .b24fullcontainer-rooms .b24-room-slider { grid-column: 1 / -1; grid-row: 1; }
  .b24fullcontainer-rooms .room-description__title {
    grid-column: 1 / -1; grid-row: 2; margin: 12px 12px 24px;
  }
  .b24fullcontainer-rooms .room-description__text {
    grid-column: 1 / -1; grid-row: 3; margin: 0 12px 22px;
  }
  .b24fullcontainer-rooms .room-description__actions {
    grid-column: 1; grid-row: 4; align-self: start; margin: 0 0 20px 12px;
  }
  .b24fullcontainer-rooms .room-description__link,
  .b24fullcontainer-rooms .b24-room-cal > .fakelink {
    min-height: 36px; padding: 6px 10px;
    font: 500 13px/1.6 "Poppins", sans-serif;
  }
  .b24fullcontainer-rooms .b24-room-cal > .fakelink {
    grid-column: 2; grid-row: 4; align-self: start; justify-self: start;
    margin: 0 12px 20px 0;
  }
  .b24fullcontainer-rooms .b24-room-cal > [id^="collapsecal"] {
    grid-column: 1 / -1; grid-row: 5; margin: 0 12px 20px;
  }
  .b24fullcontainer-rooms .offer { grid-column: 1 / -1; }
}

/* Desktop guest-page proportions and spacing. */
@media (min-width: 992px) {
  .innertube { margin-top: 16px; }
  .button.book_confirmbookingbut { min-height: 46px; padding: 10px 22px; line-height: 1.6; }
  #bookingpage { font-size: 14px; line-height: 1.6; }
  #bookingpage .panel-body.b24panel { padding: 20px; }
  #bookingpage .b24-guestdetails .panel-heading { padding: 20px 20px 0; }
  #bookingpage .b24-guestdetails .panel-heading .at_roomnametext { font-size: 24px !important; }
  #bookingpage .b24-guestdetails .questionrow { margin-bottom: 16px; }
  #bookingpage .b24-guestdetails .questionrow > .col-sm-4 { margin-bottom: 6px; font-size: 13px; }
  #bookingpage .b24-guestdetails .form-control { height: 46px; padding-top: 10px; padding-bottom: 10px; }
  #bookingpage .b24-guestdetails .questionrow-guestcustq8 { margin: 20px 0 0; }
  #bookingpage .b24-guestdetails .questionrow-guestcustq8 > .col-sm-4 { margin: 0; font-size: 14px; }
  #bookingpage .b24-optionalvouchercode { margin-bottom: 16px; }
  #bookingpage .b24-bookingdetails .panel-body > .at_roomnametext {
    font-size: 23px !important; line-height: 1.25; margin-bottom: 16px;
  }
  #bookingpage .b24-bookingdetails img.img-responsive {
    aspect-ratio: 2 / 1; margin-bottom: 16px !important;
  }
  #bookingpage .b24-bookingdetails .at_offername { font-size: 18px !important; }
  #bookingpage .b24-bookingdetails .at_offersummary { font-size: 13px; line-height: 1.6; margin: 8px 0 20px; }
  #bookingpage .b24-bookingdetails .at_offersummary li + li { margin-top: 4px; }
  #bookingpage .b24-bookingdetails .panel-body > .row:has(> .col-xs-5) { margin-bottom: 8px; }
  #bookingpage .b24-bookingdetails :is(.booking-price-summary-divider, .booking-deposit-divider) { margin: 16px 0; }
}