/* Available Rooms, on the template's own hotel-single-2 markup. The template
   drives its room-count control with a vendor dropdown this page does not load,
   so that control stays a native select dressed to match .dropdown__button. */
/* Safari on macOS paints a <select> using its own native chrome unless
   -webkit-appearance is turned off - with a custom background-color and no
   border-color (it was defaulting to currentcolor) that native chrome came
   out blank: no visible border, no visible option text. Turning appearance
   off and drawing every part of the control by hand fixes it on macOS and
   changes nothing on Windows/Chrome, where select already ignored appearance
   the same way the other native controls fixed earlier in this file do. */
.room-select{
  width:100%;min-width:120px;background:#fff;border-width:1px;border-style:solid;border-color:#d5d8de;
  color:#0a1c3f;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23515b6f' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:10px 7px;
}
/* The room column is a shrink-to-fit flex item holding a full-width image, so
   without a width its own text — the open "Room Information" panel especially —
   decides how wide the photo gets. Pin it to the template's 250px column. */
.room-media{width:100%}
@media(min-width:1200px){.room-media{width:250px}}
/* Four stacked "icon + label" lines read as a tall list for what is really
   four short facts - wrap them into one compact row of small chips instead,
   so the room name/amenities column doesn't dangle far short of the taller
   price column beside it. */
.bh-amenities{gap:4px 14px;margin-top:2px}
.bh-amenity{color:#515b6f}
.bh-amenity .text-13{white-space:nowrap}
/* The room photo column (a 250px square plus name/amenities) is reliably
   taller than the price column beside it. .row's flex default already
   stretches .col-xl to match that height, but everything inside it down to
   the rate form is a plain block, so centering content at any single level
   just splits the same dead space above/below a card that stays its own
   natural height. Carrying flex:1 all the way down to the form itself
   instead grows the white card to fill the stretch, so there is no bare
   blue gap left to center around; the form centers its own fields in the
   taller card it now has. */
[data-room-card] .col-xl{display:flex;flex-direction:column}
[data-room-card] .col-xl>.row{flex:1;display:flex;flex-direction:column}
[data-room-card] .col-xl .col-12{flex:1;display:flex;flex-direction:column}
[data-room-card] .col-xl form{flex:1;display:flex;align-items:center}
[data-room-card]+[data-room-card]{margin-top:20px}
/* The listing page's Available Rooms/Units block is one bordered table now,
   not a separate card per room type - a divider line between rooms reads as
   rows of one table instead of the plain gap [data-room-card]+[data-room-card]
   gives two still-separate cards. */
.bh-rooms-table [data-room-card]+[data-room-card]{margin-top:30px;padding-top:30px;border-top:1px solid #d5d8de}
/* .bg-blue-1 is !important in the template, so the idle state has to answer it. */
[data-rate-reserve]:disabled{
  background:#a7afc2!important;
  border-color:#a7afc2!important;
  color:#fff!important;
  cursor:not-allowed!important;
  opacity:.72;
  pointer-events:none;
}
/* Reserve is a plain GET form submit - the browser can take a moment to
   navigate to checkout, especially on a slow connection. Once clicked, the
   button switches to a spinner instead of the arrow icon so the guest knows
   it registered the click rather than looking stuck. Kept full brand colour
   (not the greyed-out :disabled look above) since this disable means "working",
   not "nothing selected". */
[data-rate-reserve].is-loading{cursor:wait!important}
[data-rate-reserve].is-loading:disabled{
  background:#ffd33f!important;
  border-color:#ffd33f!important;
  color:#07183f!important;
  opacity:1!important;
  pointer-events:none;
}
[data-rate-reserve] .bh-btn-spinner{
  display:none;width:14px;height:14px;margin-right:10px;vertical-align:-2px;
  border:2px solid rgba(7,24,63,.35);border-top-color:#07183f;border-radius:50%;
  animation:bh-btn-spin .6s linear infinite;
}
[data-rate-reserve].is-loading .bh-btn-spinner{display:inline-block}
[data-rate-reserve].is-loading .icon-arrow-top-right{display:none}
@keyframes bh-btn-spin{to{transform:rotate(360deg)}}
[data-room-info][hidden]{display:none}
/* The listing page's own sections. The sticky bar is the template's own fixed
   .singleMenu: hidden until the page scrolls past the gallery, then it carries
   the search bar and the section links together. */
.singleMenu{display:block}
.singleMenu .singleMenu__content{border-top:1px solid #e5e7ee}
.singleMenu__links a{color:#051036}
.singleMenu__links a:hover{color:#003b95}
/* The sticky bar carries both the search form and the section-links/price
   row stacked on top of each other on mobile (each field in the form also
   drops to its own row under 992px), so once scrolled active it grows tall
   enough to cover the hero gallery and page content underneath for the whole
   time it stays pinned. The in-page search band right below the gallery
   already covers the same search fields, so on mobile keep only the section
   links/price row fixed on scroll and drop the search form from the sticky
   copy. */
@media(max-width:767px){
  .singleMenu .listing-search-band{display:none}
}
.review-star{position:relative;display:inline-flex;cursor:pointer;color:#dcdfe7}
.review-star input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.review-star.is-on{color:#f6c700}
.review-stars:hover .review-star{color:#dcdfe7}
.accordion__button{width:100%;text-align:left}