/* 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}
/* .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}
/* "Show Room Information" sits flush left under the amenities, like the rest
   of the room cell, instead of the button's default centred text. */
[data-room-info-toggle]{
  width:100%;padding:0;background:none;border:0;
  text-align:left;line-height:1.4;white-space:normal;overflow-wrap:anywhere;
}
/* 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}
/* Hover previews the stars up to the one under the pointer; off a star, the
   chosen stars stay lit. */
.review-stars:has(.review-star:hover) .review-star{color:#dcdfe7}
.review-stars .review-star:hover,.review-stars .review-star:has(~ .review-star:hover){color:#f6c700}
.accordion__button{width:100%;text-align:left}
/* Listing page laid out on the template's hotel-single-1: title row, then a
   five-photo gallery, then content beside a booking sidebar. The template's
   -type-1 grid sizes rows by each photo's own height, so owner photos of mixed
   sizes gave a ragged grid; fixed row heights keep the collage even. */
.bh-single-gallery{grid-template-rows:254px 254px}
.bh-single-gallery .galleryGrid__item{min-height:0;overflow:hidden;border-radius:4px;background:#f5f5f5}
.bh-single-gallery .galleryGrid__item img{height:100%}
@media(max-width:991px){.bh-single-gallery{grid-template-rows:none;grid-auto-rows:200px}}
@media(max-width:575px){.bh-single-gallery>.galleryGrid__item:nth-child(n+2):nth-child(-n+4){display:none}}
/* Sidebar "Check availability" card: its popups open inside the field that
   triggered them and have only the sidebar's width to work with. */
.bh-side-booking__field{position:relative}
.bh-side-booking .bh-search-popup{top:100%;left:0;right:auto;margin-top:8px;width:100%;min-width:280px}
.bh-side-booking .bh-date-popup{padding:16px}
.bh-side-booking .bh-calendar-months{grid-template-columns:1fr}
.bh-side-booking .bh-calendar:nth-child(2){display:none}
.bh-side-booking .bh-guest-popup{padding:8px 16px}
/* Available Rooms as the template's roomGrid table, ruled and spaced like
   Booking.com's availability table: no gaps between columns, thin light-blue
   lines around every cell, compact cell padding, and the table spanning the
   full container width. Each rate keeps its own Reserve (each rate row is its
   own checkout form), so the Reserve cell sits at the end of the rate row. */
.bh-rooms-table{--bh-rt-line:#5bbaff}
.bh-rooms-table .roomGrid__header,
.bh-room-grid .roomGrid__grid,
.bh-room-grid .roomGrid__content{gap:0}
.bh-room-grid .roomGrid__content:nth-child(1n + 2){border-top:1px solid var(--bh-rt-line)}
.bh-room-grid .bh-rate-row__reserve{padding:10px;background:rgba(53,84,209,.05)}
.bh-room-grid .bh-rate-row__reserve.is-empty{padding:0;background:transparent}
[data-rate-summary][hidden]{display:none}
/* Guests cell: icons wrap inside the narrow column instead of spilling into
   the price column; big capacities show one icon + "×N". */
.bh-rate-guests{min-width:0;overflow-wrap:anywhere}
.bh-rate-guests__icons{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
.bh-rate-guests__more{margin-left:4px;font-size:15px;font-weight:500;color:var(--color-dark-1,#051036)}
.bh-room-grid .roomGrid__content>div{min-width:0}
@media(min-width:1200px){
  /* Booking.com's layout: the table's ruled columns on the left, and one
     unruled reserve column on the right - blue under the header, then plain
     white with the "I'll reserve" panel riding down the page beside the
     rooms (sticky) as the guest scrolls. It books every rate picked in the
     table at once, so the per-rate reserve cells stay for tablet/phone. */
  /* Column widths shared by the header and every rate row so they line up.
     The 1200-1399px container is only 1110px wide, so the full widths there
     left "Available rates" ~80px and its text spilled over the select. */
  .bh-rooms-table{--bh-rt-room:280px;--bh-rt-guests:100px;--bh-rt-price:170px;--bh-rt-select:180px;--bh-rt-reserve:300px}
  .bh-rooms-table{display:grid;grid-template-columns:minmax(0,1fr) var(--bh-rt-reserve);align-items:stretch}
  /* One header row for the whole table (rooms + reserve column). It sticks
     under the fixed section bar while the table scrolls past, and picks up a
     soft shadow once it is riding over the rows, as on Booking.com. */
  .bh-rooms-table__head{
    grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) var(--bh-rt-reserve);
    position:sticky;top:var(--bh-sticky-top,0px);z-index:6;
    transition:box-shadow .2s ease;
  }
  .bh-rooms-table__head.is-stuck{box-shadow:0 6px 12px -4px rgba(5,16,54,.28)}
  .bh-rooms-reserve{display:flex;flex-direction:column;min-width:0}
  .bh-rooms-reserve__head{background:var(--color-dark-3)}
  .bh-rooms-reserve__panel{position:sticky;top:calc(var(--bh-sticky-top,0px) + 60px);padding:12px 16px;min-width:0;overflow-wrap:anywhere}
  .bh-room-grid{border:1px solid var(--bh-rt-line)}
  .bh-rooms-table .roomGrid__header{grid-template-columns:var(--bh-rt-room) var(--bh-rt-guests) var(--bh-rt-price) minmax(0,1fr) var(--bh-rt-select);height:60px;padding:0;font-size:14px;line-height:1.35;border:1px solid var(--bh-rt-line);border-top:0;border-bottom:0}
  .bh-rooms-table .roomGrid__header>*,
  .bh-rooms-table .roomGrid__header>*:first-child{padding:10px 8px}
  .bh-rooms-table .roomGrid__header>*+*{border-left:1px solid rgba(255,255,255,.35)}
  .bh-room-grid .roomGrid__grid{grid-template-columns:var(--bh-rt-room) minmax(0,1fr)}
  .bh-room-grid .roomGrid__grid>*{padding:0}
  .bh-room-grid .roomGrid__grid>div:first-child{padding:10px 8px}
  .bh-room-grid .roomGrid__grid>div:nth-child(2){
    display:flex;flex-direction:column;margin:0;padding:0;background:transparent;
    border-left:1px solid var(--bh-rt-line);
  }
  .bh-room-grid .roomGrid__content{flex:1;padding:0;grid-template-columns:var(--bh-rt-guests) var(--bh-rt-price) minmax(0,1fr) var(--bh-rt-select)}
  .bh-room-grid .roomGrid__content>div{padding:10px 8px}
  .bh-room-grid .roomGrid__content>div+div{border-left:1px solid var(--bh-rt-line)}
  .bh-room-grid .roomGrid__content>.bh-rate-row__reserve{display:none}
  .bh-room-grid .room-select{min-width:0;height:38px!important;padding:0 28px 0 12px!important;background-position:right 10px center}
  .bh-room-grid .roomGrid__content>div:nth-last-child(2){padding:16px 20px}
  .bh-rooms-reserve{transition:background-color .25s ease}
  .bh-rooms-reserve.is-active{background:#ebf3ff}
  /* Rooms stack flush into one continuous table under the one header. */
  .bh-rooms-table .bh-room-block+.bh-room-block{margin-top:0}
  .bh-rooms-table .bh-room-block+.bh-room-block .bh-room-grid{border-top:0}
}
@media(min-width:1200px) and (max-width:1399px){
  .bh-rooms-table{--bh-rt-room:210px;--bh-rt-guests:84px;--bh-rt-price:140px;--bh-rt-select:104px;--bh-rt-reserve:240px}
  .bh-room-grid .roomGrid__content>div:nth-last-child(2){padding:16px 10px}
  .bh-rooms-table .roomGrid__header{font-size:13px}
}
@media(max-width:1199px){
  .bh-room-grid{border:1px solid var(--bh-rt-line);padding:12px}
  .bh-room-grid .roomGrid__grid{grid-template-columns:140px 1fr;gap:12px}
  .bh-room-grid .roomGrid__grid>*:nth-child(2){background:transparent;padding:0}
  .bh-room-grid .roomGrid__content{grid-template-columns:90px 150px minmax(0,1fr) 110px;gap:12px;padding:12px 0}
  .bh-room-grid .room-select{min-width:0}
  .bh-room-grid .bh-rate-row__reserve{grid-column:1/-1}
  .bh-rooms-table .bh-room-block+.bh-room-block{margin-top:12px}
}
@media(max-width:991px){.bh-room-grid .roomGrid__grid{grid-template-columns:1fr}}
@media(max-width:767px){.bh-room-grid .roomGrid__content{grid-template-columns:1fr}}
.review-category-row{gap:15px}

/* Guest-review category bar fills (ListingPage.reviewsFor barClass). */
.review-bar-0{width:0%}.review-bar-1{width:1%}.review-bar-2{width:2%}.review-bar-3{width:3%}.review-bar-4{width:4%}.review-bar-5{width:5%}.review-bar-6{width:6%}.review-bar-7{width:7%}.review-bar-8{width:8%}.review-bar-9{width:9%}.review-bar-10{width:10%}.review-bar-11{width:11%}.review-bar-12{width:12%}.review-bar-13{width:13%}.review-bar-14{width:14%}.review-bar-15{width:15%}.review-bar-16{width:16%}.review-bar-17{width:17%}.review-bar-18{width:18%}.review-bar-19{width:19%}.review-bar-20{width:20%}.review-bar-21{width:21%}.review-bar-22{width:22%}.review-bar-23{width:23%}.review-bar-24{width:24%}.review-bar-25{width:25%}.review-bar-26{width:26%}.review-bar-27{width:27%}.review-bar-28{width:28%}.review-bar-29{width:29%}.review-bar-30{width:30%}.review-bar-31{width:31%}.review-bar-32{width:32%}.review-bar-33{width:33%}.review-bar-34{width:34%}.review-bar-35{width:35%}.review-bar-36{width:36%}.review-bar-37{width:37%}.review-bar-38{width:38%}.review-bar-39{width:39%}.review-bar-40{width:40%}.review-bar-41{width:41%}.review-bar-42{width:42%}.review-bar-43{width:43%}.review-bar-44{width:44%}.review-bar-45{width:45%}.review-bar-46{width:46%}.review-bar-47{width:47%}.review-bar-48{width:48%}.review-bar-49{width:49%}.review-bar-50{width:50%}.review-bar-51{width:51%}.review-bar-52{width:52%}.review-bar-53{width:53%}.review-bar-54{width:54%}.review-bar-55{width:55%}.review-bar-56{width:56%}.review-bar-57{width:57%}.review-bar-58{width:58%}.review-bar-59{width:59%}.review-bar-60{width:60%}.review-bar-61{width:61%}.review-bar-62{width:62%}.review-bar-63{width:63%}.review-bar-64{width:64%}.review-bar-65{width:65%}.review-bar-66{width:66%}.review-bar-67{width:67%}.review-bar-68{width:68%}.review-bar-69{width:69%}.review-bar-70{width:70%}.review-bar-71{width:71%}.review-bar-72{width:72%}.review-bar-73{width:73%}.review-bar-74{width:74%}.review-bar-75{width:75%}.review-bar-76{width:76%}.review-bar-77{width:77%}.review-bar-78{width:78%}.review-bar-79{width:79%}.review-bar-80{width:80%}.review-bar-81{width:81%}.review-bar-82{width:82%}.review-bar-83{width:83%}.review-bar-84{width:84%}.review-bar-85{width:85%}.review-bar-86{width:86%}.review-bar-87{width:87%}.review-bar-88{width:88%}.review-bar-89{width:89%}.review-bar-90{width:90%}.review-bar-91{width:91%}.review-bar-92{width:92%}.review-bar-93{width:93%}.review-bar-94{width:94%}.review-bar-95{width:95%}.review-bar-96{width:96%}.review-bar-97{width:97%}.review-bar-98{width:98%}.review-bar-99{width:99%}.review-bar-100{width:100%}

/* "Available rates" column, worded and spaced like Booking.com's: a bold
   lead with plain trailing text, small check icon, red low-stock line last. */
.bh-rate-terms{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.bh-rate-terms__line>div{min-width:0}
.bh-rate-terms__line{display:flex;align-items:flex-start;gap:8px}
.bh-rate-terms__icon{flex:0 0 14px;font-size:12px;margin-top:4px}
.bh-rate-terms__left{color:#a30000}
.bh-rate-terms__dot{flex:0 0 14px;display:flex;justify-content:center;margin-top:8px}
.bh-rate-terms__dot::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}

/* Room popup - opened from a room's name or photo in Available Rooms.
   Booking.com's layout: gallery (large photo + arrows + thumbnail grid) on the
   left, name / highlight chips / facts / description / facility lists on the
   right; stacks into one column on a phone. */
.bh-room-name{padding:0;border:0;background:none;color:#0071c2;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bh-room-name:hover{color:#00487a}
.bh-room-photo{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.bh-room-photo:focus-visible,.bh-room-name:focus-visible{outline:2px solid #0071c2;outline-offset:3px}
html.bh-room-popup-open,html.bh-room-popup-open body{overflow:hidden}
.bh-room-popup{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px}
.bh-room-popup[hidden]{display:none}
.bh-room-popup__backdrop{position:absolute;inset:0;background:rgb(0 0 0 / 55%)}
.bh-room-popup__panel{position:relative;width:min(1040px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:56px 16px 24px;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgb(0 0 0 / 30%);color:#1a1a1a}
.bh-room-popup__panel:focus{outline:none}
.bh-room-popup__close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#1a1a1a;font-size:16px;cursor:pointer}
.bh-room-popup__close:hover{background:#f0f0f0}
.bh-room-popup__body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:start}
.bh-room-popup__stage{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:8px;background:#f2f2f2}
.bh-room-popup__main{display:block;width:100%;height:100%;object-fit:cover}
.bh-room-popup__nav{position:absolute;top:50%;width:36px;height:36px;display:grid;place-items:center;margin-top:-18px;border:0;border-radius:50%;background:#fff;color:#1a1a1a;font-size:12px;box-shadow:0 2px 8px rgb(0 0 0 / 25%);cursor:pointer}
.bh-room-popup__nav:hover{background:#f0f0f0}
.bh-room-popup__nav.is-prev{left:14px}
.bh-room-popup__nav.is-next{right:14px}
.bh-room-popup__count{position:absolute;right:12px;bottom:12px;padding:3px 9px;border-radius:12px;background:rgb(0 0 0 / 60%);color:#fff;font-size:12px;line-height:1.5}
.bh-room-popup__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin-top:8px}
.bh-room-popup__thumb{aspect-ratio:1;padding:0;overflow:hidden;border:2px solid transparent;border-radius:4px;background:#f2f2f2;cursor:pointer}
.bh-room-popup__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.bh-room-popup__thumb:hover{opacity:.85}
.bh-room-popup__thumb.is-active{border-color:#0071c2}
.bh-room-popup__title{margin:0 0 12px;font-size:20px;font-weight:700;line-height:1.3}
.bh-room-popup__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.bh-room-popup__chips li{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border:1px solid #1a1a1a;border-radius:4px;font-size:13px;line-height:1.5}
.bh-room-popup__chips span[class^="icon-"]{font-size:13px}
.bh-room-popup__facts{margin-bottom:14px;font-size:15px;line-height:1.6}
.bh-room-popup__facts p,.bh-room-popup__desc,.bh-room-popup__cols li{color:#1a1a1a}
.bh-room-popup__facts p{margin:0}
.bh-room-popup__facts strong,.bh-room-popup__title,.bh-room-popup__section h3{color:#1a1a1a}
.bh-room-popup__desc{margin:0 0 16px;font-size:15px;line-height:1.55;white-space:pre-line}
.bh-room-popup__section{margin-top:16px}
.bh-room-popup__section h3{margin:0 0 10px;font-size:15px;font-weight:700}
.bh-room-popup__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.bh-room-popup__cols ul{margin:0;padding:0;list-style:none}
.bh-room-popup__cols li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.45;padding:2px 0}
.bh-room-popup__cols li span[class^="icon-"]{flex:none;font-size:11px}
@media(max-width:767px){
  .bh-room-popup{padding:0}
  .bh-room-popup__panel{width:100%;max-height:100vh;height:100%;border-radius:0;padding:56px 16px 24px}
  .bh-room-popup__body{grid-template-columns:1fr}
  .bh-room-popup__thumbs{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
}
@media(max-width:420px){.bh-room-popup__cols{grid-template-columns:1fr}}

/* Reserve summary (shown once a quantity is picked). Desktop: one stacked
   column. Tablet (reserve spans the full row): price + button on the left,
   package list on the right. Phone: stacked again, full-width button. */
.bh-reserve-summary__package{margin-top:15px}
.bh-reserve-summary__total{white-space:nowrap}
.bh-reserve-package{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45}
.bh-reserve-package__line{display:flex;align-items:flex-start;gap:8px}
.bh-reserve-package__icon{flex:0 0 12px;font-size:11px;margin-top:5px}
@media(min-width:768px) and (max-width:1199px){
  .bh-reserve-summary:not([hidden]){display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:12px 32px;align-items:start}
  .bh-reserve-summary__package{margin-top:0;padding-left:32px;border-left:1px solid rgba(53,84,209,.18)}
}
@media(max-width:767px){
  .bh-room-grid .bh-rate-row__reserve{padding:16px}
  .bh-reserve-summary__package{padding-top:15px;border-top:1px solid rgba(53,84,209,.18)}
}
/* A hotel / boarding house opened without dates: Booking.com's "Availability"
   view. A red prompt over the search strip, the strip itself outlined, and a
   three-column table (Room Type | Number of guests | Show prices) in place of
   the priced one, which stays in the page hidden because the room-name
   popups live in it. */
.bh-avail-alert{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--color-red-1);font-size:15px}
.bh-avail-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font-size:12px;font-weight:700;line-height:1}
.bh-side-booking.is-awaiting-dates .bh-side-booking__field{border-color:var(--color-yellow-3)!important;border-width:2px!important}
.bh-rooms-table.is-awaiting-dates{display:none!important}
.bh-avail-table{border:1px solid #d5d8de;border-radius:4px;overflow:hidden;background:#fff}
.bh-avail-table__head,.bh-avail-table__row{display:grid;grid-template-columns:minmax(0,1fr) 190px 150px}
.bh-avail-table__head{background:var(--color-dark-3);color:#fff;font-size:15px;font-weight:500}
.bh-avail-table__head>div{padding:10px 14px}
.bh-avail-table__head>div+div{border-left:1px solid rgba(255,255,255,.35)}
.bh-avail-table__row+.bh-avail-table__row{border-top:1px solid #d5d8de}
.bh-avail-table__row>div{padding:12px 14px}
.bh-avail-table__row>div+div{border-left:1px solid #8a93a6}
.bh-avail-table__caret{display:block;width:0;height:0;margin:2px 0 6px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #e0610c}
.bh-avail-table__name{display:inline;padding:0;border:0;background:none;color:var(--color-blue-1);font-size:15px;font-weight:600;text-align:left;text-decoration:underline;cursor:pointer}
span.bh-avail-table__name{cursor:default}
.bh-avail-table__bed{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:var(--color-dark-1)}
.bh-avail-table__bed .icon-bed{font-size:18px}
.bh-avail-table__guests{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:20px;color:var(--color-dark-1)}
.bh-avail-table__more{margin-left:4px;font-size:14px}
.bh-avail-table__button{padding:9px 14px;border:0;border-radius:4px;background:var(--color-blue-1);color:#fff;font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;white-space:nowrap}
.bh-avail-table__button:hover{background:var(--color-dark-4)}
@media(max-width:767px){
  .bh-avail-table__head,.bh-avail-table__row{grid-template-columns:minmax(0,1fr) 110px}
  .bh-avail-table__head>div:last-child{display:none}
  .bh-avail-table__action{grid-column:1/-1;border-left:0!important;border-top:1px solid #eef0f4;padding-top:0!important}
  .bh-avail-table__button{width:100%}
}

/* "Hotel chain/brand" card - above Property highlights when a brand is set */
.bh-brand-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  background: #fff;
  border: 1px solid var(--color-border, #DDDDDD);
  border-radius: 4px;
  margin-bottom: 20px;
  color: var(--color-dark-1, #051036);
}
.bh-brand-card__info {
  padding: 14px 16px;
  border-right: 1px solid var(--color-border, #DDDDDD);
  min-width: 0;
}
.bh-brand-card__label {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #595959;
}
.bh-brand-card__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bh-brand-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #1f3f7a;
  overflow-wrap: anywhere;
}

/* "Property highlights" box - right column of a hotel / boarding house page */
.bh-highlights-box {
  background: #fff;
  border: 1px solid var(--color-border, #DDDDDD);
  border-radius: 4px;
  padding: 30px;
  color: var(--color-dark-1, #051036);
}
.bh-highlights-box__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border, #DDDDDD);
}
.bh-highlights-box__section + .bh-highlights-box__section {
  margin-top: 20px;
}
.bh-highlights-box__heading {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 10px;
}
.bh-highlights-box__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 10px;
}
.bh-highlights-box__heading + .bh-highlights-box__row {
  margin-top: 0;
}
.bh-highlights-box__icon {
  flex: 0 0 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--color-blue-1, #3554D1);
}
.bh-highlights-box__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-light-1, #697488);
  margin: 0 0 5px;
}

/* ------------------------------------------------------------------
 * Hotel / boarding house single page: Area info, facilities header,
 * House rules and The fine print (stayInfoFor in PublicBrowseController).
 * ------------------------------------------------------------------ */
.bh-stay-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.bh-stay-section__cta {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
}
.bh-area-info__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.bh-area-info__tag {
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-blue-1-05, #EBF0FF);
  color: var(--color-dark-1, #051036);
}
.bh-area-info__map {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.bh-area-info__group + .bh-area-info__group {
  margin-top: 30px;
}
.bh-area-info__list {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
}
.bh-area-info__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  line-height: 1.4;
  padding: 7px 0;
}
.bh-area-info__name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-dark-1, #051036);
}
.bh-area-info__kind {
  color: var(--color-light-1, #697488);
}
.bh-area-info__kind::after {
  content: " · ";
}
.bh-area-info__distance {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--color-dark-1, #051036);
}
.bh-popular-facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 14px;
  padding-bottom: 10px;
}
.bh-popular-facilities__item {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}
/* Booking.com-style chips: a bordered box per facility, icon then label. */
.bh-popular-facilities--chips {
  gap: 12px;
  margin-top: 16px;
}
.bh-popular-facilities--chips .bh-popular-facilities__item {
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid var(--color-border, #E7E7E7);
  border-radius: 8px;
  background: #fff;
  color: var(--color-dark-1, #051036);
  font-size: 14px;
  line-height: 1.3;
}
.bh-popular-facilities__icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  color: var(--color-dark-1, #051036);
}
@media (max-width: 575px) {
  .bh-popular-facilities--chips .bh-popular-facilities__item {
    min-height: 48px;
    padding: 10px 14px;
  }
  .bh-popular-facilities__icon { font-size: 20px; }
}
.bh-house-rules,
.bh-fine-print {
  border: 1px solid var(--color-border, #DDDDDD);
  border-radius: 8px;
  padding: 8px 20px;
}
.bh-house-rules__row {
  display: grid;
  grid-template-columns: minmax(180px, 270px) 1fr;
  gap: 20px;
  padding: 20px 0;
}
.bh-house-rules__row + .bh-house-rules__row {
  border-top: 1px solid var(--color-border, #DDDDDD);
}
.bh-house-rules__label {
  display: flex;
  align-items: center;
  align-self: start;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark-1, #051036);
}
.bh-house-rules__value p + p,
.bh-fine-print p + p {
  margin-top: 12px;
}
.bh-fine-print {
  padding: 20px;
}
@media (max-width: 767px) {
  .bh-house-rules__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.bh-house-rules__value p,
.bh-fine-print p {
  color: var(--color-dark-1, #051036);
}

/* One reserve panel for the whole rooms table (desktop). */
.bh-rooms-reserve{display:none}
@media(min-width:1200px){.bh-rooms-reserve{display:flex}}
.bh-rooms-reserve__summary{margin-bottom:12px;color:var(--color-dark-1,#051036)}
.bh-rooms-reserve__summary[hidden]{display:none}
.bh-rooms-reserve__summary:not([hidden]){animation:bh-reserve-in .25s ease-out}
.bh-rooms-reserve__total{font-size:22px;font-weight:600;line-height:1.3;margin-top:2px;white-space:nowrap}
.bh-rooms-reserve__total.is-bump{animation:bh-reserve-bump .3s ease-out}
.bh-rooms-reserve__button{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:8px 14px;
  border:0;border-radius:4px;background:var(--color-blue-1,#3554d1);color:#fff;
  font-size:15px;font-weight:500;cursor:pointer;
  transition:background-color .15s ease,box-shadow .15s ease,transform .1s ease;
}
.bh-rooms-reserve__button:hover{background:var(--color-dark-4,#13357b);box-shadow:0 2px 8px rgba(5,16,54,.2)}
.bh-rooms-reserve__button:active{transform:scale(.98)}
.bh-rooms-reserve__button:focus-visible{outline:2px solid #0071c2;outline-offset:2px}
.bh-rooms-reserve__button .bh-btn-spinner{
  display:none;width:14px;height:14px;margin-right:10px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:bh-btn-spin .6s linear infinite;
}
.bh-rooms-reserve__button.is-loading{cursor:wait;pointer-events:none}
.bh-rooms-reserve__button.is-loading .bh-btn-spinner{display:inline-block}
.bh-rooms-reserve__error{margin:10px 0 0;padding:8px 10px;border-radius:4px;background:#fff0f0;color:#a30000;font-size:13px;line-height:1.4}
.bh-rooms-reserve__error[hidden]{display:none}
.bh-rooms-reserve__error.is-shake{animation:bh-reserve-shake .4s ease-in-out}
.bh-rooms-reserve__notes{margin:12px 0 0;padding-left:18px;list-style:disc;font-size:14px;line-height:1.5;color:var(--color-dark-1,#051036)}
/* The picked rate's row gets a soft highlight, like Booking's selected row. */
.bh-room-grid .bh-rate-row{transition:background-color .2s ease}
.bh-room-grid .bh-rate-row.is-picked{background:rgba(0,113,194,.06)}
@keyframes bh-reserve-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes bh-reserve-bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes bh-reserve-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){
  .bh-rooms-reserve__summary:not([hidden]),.bh-rooms-reserve__total.is-bump,.bh-rooms-reserve__error.is-shake{animation:none}
  .bh-rooms-reserve__panel{transition:none}
}

/* Room cell, Booking.com style: name, bed line, description, then the
   room's facilities as small outlined chips under a shorter photo. */
.bh-room-bed{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;color:var(--color-dark-1,#051036)}
.bh-room-bed .icon-bed{font-size:20px}
.bh-room-desc{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--color-light-1,#697488)}
.bh-room-chips{display:flex;flex-wrap:wrap;gap:6px 4px;margin-top:14px}
.bh-room-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 5px;border:1px solid #6b6b6b;border-radius:3px;font-size:13px;line-height:1.5;color:var(--color-dark-1,#051036);white-space:nowrap}
.bh-room-chip span[class^="icon-"]{font-size:13px}

/* Reserve panel once something is picked. */
.bh-rooms-reserve__next{margin-top:10px;font-size:14px;color:var(--color-dark-1,#051036)}
.bh-rooms-reserve__next[hidden],.bh-rooms-reserve__package[hidden]{display:none}
.bh-rooms-reserve__next:not([hidden]),.bh-rooms-reserve__package:not([hidden]){animation:bh-reserve-in .25s ease-out}
.bh-rooms-reserve__notes{margin-top:6px}
.bh-rooms-reserve__package{margin-top:16px}
.bh-rooms-reserve__package-title{margin-bottom:10px;font-size:14px;font-weight:600;color:var(--color-dark-1,#051036)}
.bh-rooms-reserve__package-group+.bh-rooms-reserve__package-group{margin-top:14px;padding-top:14px;border-top:1px solid rgba(53,84,209,.18)}
.bh-rooms-reserve__package-room{margin-bottom:8px;font-size:14px;font-weight:600}
.bh-rooms-reserve__package .bh-reserve-package{gap:10px;font-size:13px}
.bh-rooms-reserve__package .bh-reserve-package__line>div{min-width:0}

/* The template clips <main> with overflow:hidden, which turns it into a
   scroll container and silently stops every position:sticky inside it - the
   table header and reserve panel included. clip trims overflow the same way
   without becoming a scroll container. */
main.single-main{overflow:clip}
@media(max-width:1199px){.bh-rooms-table__head{display:none}}

/* The listing's YouTube video: a play button beside "See All Photos" on the
   gallery's last tile (data-video-open) and the popup it opens (listing-video.js). */
.bh-gallery-actions{gap:10px;flex-wrap:wrap}
.bh-video-play{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border:0;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s}
.bh-video-play:hover,.bh-video-play:focus-visible{background:#ff0000}
.bh-video-play__icon{width:36px;height:36px;border-radius:50%;background:#fff;position:relative;flex:none}
.bh-video-play__icon::after{content:"";position:absolute;left:14px;top:10px;border-left:12px solid #ff0000;border-top:8px solid transparent;border-bottom:8px solid transparent}
.bh-video-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.bh-video-modal[hidden]{display:none}
.bh-video-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.bh-video-modal__box{position:relative;width:min(960px,100%)}
.bh-video-modal__frame{position:relative;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden}
.bh-video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bh-video-modal__close{position:absolute;right:0;top:-44px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#000;font-size:22px;line-height:1;cursor:pointer}

/* An attribute's optional price beside its facility line ("· LKR 2,500"). */
.bh-attr-price{margin-left:8px;padding:1px 8px;border-radius:999px;background:#ebf3ff;color:#1f5fbf;font-size:13px;font-weight:500;white-space:nowrap}
/* "We Price Match" beside the Available Rooms heading, and the Compare tick
   under each room / unit card (hotels, boarding houses, rent apartments). */
.bh-price-match{display:inline-flex;align-items:center;gap:8px;padding:8px 4px;background:none;border:0;color:#006ce4;font-size:15px;font-weight:600;cursor:pointer}
.bh-price-match-col{margin-left:auto}
.bh-price-match:hover{text-decoration:underline}
.bh-price-match__icon{width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 12V3h9l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 12V3h9l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.bh-room-compare{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:6px 12px;border:1px solid #e7e7e7;border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(26,26,26,.12);font-size:15px;color:#1a1a1a;cursor:pointer;user-select:none}
.bh-room-compare__input{width:20px;height:20px;margin:0;accent-color:#006ce4;cursor:pointer}
.bh-room-compare:has(.bh-room-compare__input:disabled){opacity:.5;cursor:not-allowed}

.bh-compare-bar{position:fixed;left:50%;bottom:16px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:min(640px,calc(100% - 32px));padding:12px 16px;border-radius:8px;background:#003b95;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.bh-compare-bar[hidden]{display:none}
.bh-compare-bar__text{flex:1;font-size:14px;line-height:1.4}
.bh-compare-bar__actions{display:flex;gap:8px;flex:none}
.bh-compare-bar__clear,.bh-compare-bar__go{height:38px;padding:0 14px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer}
.bh-compare-bar__clear{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.bh-compare-bar__go{background:#fff;border:1px solid #fff;color:#003b95}
.bh-compare-bar__go:disabled{opacity:.55;cursor:not-allowed}

.bh-price-match-modal,.bh-compare-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.bh-price-match-modal[hidden],.bh-compare-modal[hidden]{display:none}
.bh-price-match-modal__backdrop,.bh-compare-modal__backdrop{position:absolute;inset:0;background:rgba(5,16,54,.55)}
.bh-price-match-modal__panel,.bh-compare-modal__panel{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 24px 24px;border-radius:8px;background:#fff;color:#1a1a1a}
.bh-compare-modal__panel{width:min(960px,100%)}
.bh-price-match-modal__close,.bh-compare-modal__close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:none;font-size:14px;cursor:pointer}
.bh-price-match-modal__close:hover,.bh-compare-modal__close:hover{background:#f2f2f2}
.bh-price-match-modal__steps{margin:16px 0 0;padding-left:20px;list-style:decimal;font-size:15px;line-height:1.6}
.bh-price-match-modal__steps li{display:list-item;list-style:decimal}

.bh-compare-modal__scroll{margin-top:16px;overflow-x:auto}
.bh-compare-table{width:100%;min-width:480px;border-collapse:collapse;font-size:14px}
.bh-compare-table th,.bh-compare-table td{padding:10px 12px;border-bottom:1px solid #e7e7e7;text-align:left;vertical-align:top}
.bh-compare-table tbody th{width:170px;font-weight:500;color:#595959}
.bh-compare-table thead th{vertical-align:bottom}
.bh-compare-table thead img{display:block;width:100%;max-width:200px;aspect-ratio:3/2;object-fit:cover;border-radius:4px;margin-bottom:8px}
.bh-compare-table__name{font-size:15px;font-weight:600;color:#006ce4}
.bh-compare-table__go{height:36px;padding:0 14px;border:0;border-radius:4px;background:#006ce4;color:#fff;font-weight:600;cursor:pointer}
@media(max-width:575px){
  .bh-compare-bar{flex-wrap:wrap;gap:10px}
  .bh-compare-bar__actions{width:100%}
  .bh-compare-bar__actions button{flex:1}
}
.bh-price-match-modal__actions{display:flex;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid #e7e7e7}
.bh-price-match-modal__actions .button{display:inline-flex;align-items:center;justify-content:center;min-width:140px;border-radius:4px;font-size:15px;font-weight:500}
.bh-price-match-modal__dismiss{background:#fff;border:1px solid #006ce4;color:#006ce4;cursor:pointer;transition:background-color .15s ease}
.bh-price-match-modal__dismiss:hover,.bh-price-match-modal__dismiss:focus-visible{background:#f0f6fd}
@media (max-width:480px){.bh-price-match-modal__actions{margin-top:20px;padding-top:16px}.bh-price-match-modal__actions .button{width:100%}}