/* triponly mobile pass: hotels (phones only, wrap everything in @media screen and (max-width: 767px)) */
/* Adapted from babumrah's mobile-sheets.css (sections 5, 9, 10, 11, 20 and the floating bars),
   2026-11-04. Desktop is untouched: the only rules outside a phone media block hide the
   phone-only elements (.nav-after-gallery, .sel-rooms, .hb-float). Buttons have no radius. */

/* phone-only elements: never drawn on a desktop */
.nav-detail.nav-after-gallery,
.bed-Reserves .selectedPrice .sel-rooms { display: none; }
.hb-float { display: none !important; }

/* ==========================================================================
   1. Listing + detail: the search panel is a bottom sheet behind a summary bar
      (driven by assets/js/mobile-hotels.js; panel = .sidebar .side-col[data-ms-title])
   ========================================================================== */
@media screen and (max-width: 767px) {
	html body .ms-bar { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 9px 11px; border: 1px solid #e1e3e8; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(20, 22, 30, .09); text-align: left; }
	html body .ms-bar > i { flex: 0 0 auto; font-size: 15px; color: #b9880a; }
	html body .ms-text { flex: 1 1 auto; min-width: 0; }
	html body .ms-text b, html body .ms-text small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	html body .ms-text b { font-size: 14.5px; font-weight: 800; line-height: 1.25; color: #2a2c31; }
	html body .ms-text small { font-size: 12.5px; line-height: 1.35; color: #7a7d85; }
	html body .ms-edit { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; background: #FAC917; font-size: 12px; font-weight: 800; color: #2b2d33; }

	html body.ms-ready .sidebar .side-col[data-ms-title] { display: none; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] { display: block; position: fixed; right: 0; bottom: 0; left: 0; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0; border-radius: 16px 16px 0 0; padding: 6px 14px calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10050; box-shadow: 0 -6px 22px rgba(0, 0, 0, .3); }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title]::before { content: ""; position: sticky; top: 0; z-index: 1; display: block; width: 38px; height: 4px; margin: 2px auto 8px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
	html body .ms-close { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; padding: 0; border: 0; background: none; font-size: 26px; line-height: 1; color: #fff; opacity: .85; }
	html body.ms-ready .sidebar .side-col[data-ms-title] .ms-close { display: none; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .ms-close { display: block; }
	html body .ms-backdrop { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10040; background: rgba(0, 0, 0, .45); }
	html body.ms-open .ms-backdrop { display: block; }
	html body.ms-open { overflow: hidden; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] h2 { margin: 0 40px 12px 0; font-size: 18px; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .form-group { margin-bottom: 12px; }
	/* the three search fields (and the guests picker) share one 44px height */
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .input-S, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .inputForm.prsnF, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons { height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; position: relative; border-radius: 4px; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .input-S input, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons h3, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons .quanBtn { height: 44px !important; line-height: 44px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons .quanBtn { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons strong.numberQ, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons strong.numberQ * { white-space: nowrap; line-height: 44px !important; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons strong.numberQ { display: block; position: static !important; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; padding: 0 12px 0 30px; width: 100% !important; max-width: none !important; box-sizing: border-box; }
	html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .input-S > i, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .input-S > span.fa, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .input-S > img, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .input-S::before, html body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .numberPersons span.fa-user { top: 50% !important; transform: translateY(-50%); margin-top: 0 !important; }

}

/* ==========================================================================
   2. Hotel results (/hotels): sort chips + compact cards (ul.listWrap only)
   ========================================================================== */
@media screen and (max-width: 767px) {
	/* sort bar: one swipeable row of square chips (same look as the tours listing) */
	html body nav.listing-nav.property-navbar-render-html { position: static !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
	html body nav.listing-nav.property-navbar-render-html .nav-tabs { display: block !important; width: 100%; border: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
	html body nav.listing-nav.property-navbar-render-html .property-ul { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; height: auto !important; padding: 2px 0 6px !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
	html body nav.listing-nav.property-navbar-render-html .property-ul::-webkit-scrollbar { display: none; }
	html body nav.listing-nav.property-navbar-render-html .property-ul > li { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; border: 1px solid #ddd !important; background: #fff; }
	html body nav.listing-nav.property-navbar-render-html .property-ul > li a { display: block; height: auto !important; padding: 7px 12px !important; font-size: 13px !important; line-height: 1.3 !important; white-space: nowrap; border: 0 !important; border-radius: 0 !important; }
	html body nav.listing-nav.property-navbar-render-html .property-ul > li:has(.nav-link.active) { background: #FAC917 !important; border-color: #FAC917 !important; }
	html body nav.listing-nav.property-navbar-render-html .property-ul > li .nav-link.active { background: #FAC917 !important; color: #313131 !important; }

	/* the card: one bordered block, photo on top */
	html body ul.listWrap > li { margin-bottom: 12px !important; }
	html body ul.listWrap > li .lst-D { flex-direction: column; overflow: hidden; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(20, 22, 30, .07); }
	html body ul.listWrap > li .lst-Dleft { width: 100%; max-width: none; flex: none; }
	html body ul.listWrap > li .lftig, html body ul.listWrap > li .lftig img, html body ul.listWrap > li .lst-Dleft { height: 150px !important; min-height: 0 !important; }
	html body ul.listWrap > li .lftig img { width: 100%; object-fit: cover; display: block; }
	html body ul.listWrap > li .lst-Dright { width: 100%; min-width: 0; margin: 0; padding: 10px 12px 12px !important; box-shadow: none; }
	html body ul.listWrap > li .title-ls-hotel { margin: 0 0 2px !important; line-height: 1.25; }
	html body ul.listWrap > li .title-ls-hotel a { font-size: 16px; }
	html body ul.listWrap > li .lst-Dright h4 { margin-bottom: 0; line-height: 1.35; }

	/* rating: one left-aligned line */
	html body ul.listWrap .lst-D .lst-Dright .top_areah .delx-right.foods { justify-content: flex-start; margin: 6px 0 0; text-align: left; }
	html body ul.listWrap > li .top_areah { margin-bottom: 4px !important; }
	html body ul.listWrap > li .delx-rate { flex-direction: row-reverse; align-items: center; gap: 8px; width: auto; }
	html body ul.listWrap > li .delx-rate strong { margin: 0; font-size: 12.5px; line-height: 1.25; text-align: left; white-space: nowrap; }
	html body ul.listWrap > li .rateCircle { flex: 0 0 30px; width: 30px !important; height: 30px !important; margin: 0; font-size: 13px !important; line-height: 30px !important; }

	/* room row */
	html body ul.listWrap > li .recomnd { margin: 8px 0 4px; font-size: 13px; }
	html body ul.listWrap > li .center_areah { margin: 4px 0 0 !important; min-height: 0 !important; }
	html body ul.listWrap > li .delux-lst { flex-direction: row; align-items: flex-start; margin-bottom: 0 !important; }
	html body ul.listWrap > li .delx-icon { margin-right: 9px; }

	/* promotions: the absolute .promo_info sat on the "Free cancellation" line above it;
	   give .insDv its own band and drop the redundant "Promotions" label */
	html body ul.listWrap > li .price_n_promo { margin: 6px 0 0 !important; }
	html body ul.listWrap > li .price_n_promo .insDv { position: relative; margin: 6px 0 0 !important; padding-top: 20px; }
	html body ul.listWrap > li .price_n_promo .insDv > strong { display: none; }
	html body ul.listWrap > li .price_n_promo .insDv .promo_info { top: 0; line-height: 1.3; }
	html body ul.listWrap > li .price_n_promo .package_inc_bar { justify-content: flex-start; flex-wrap: nowrap; }
	html body ul.listWrap > li .price_n_promo .inc_box { max-width: 36px !important; width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }
	html body ul.listWrap > li .price_n_promo .inc_box img { height: 18px; width: 24px !important; }

	/* price left, "See availability" right, one row */
	html body ul.listWrap > li .buttom_areah { display: flex !important; flex-direction: column; }
	html body ul.listWrap > li .buttom_areah .delx-right { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 0 !important; padding: 8px 0 0 !important; border: 0 !important; border-top: 1px solid #eef0f3 !important; text-align: left; }
	html body ul.listWrap > li .buttom_areah .delux-price { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left; line-height: 1.3; }
	html body ul.listWrap > li .delux-price > em, html body ul.listWrap > li .delux-price > b { display: block; font-size: 11.5px; font-weight: 500; }
	html body ul.listWrap > li .delux-price h5 { margin: 0 !important; font-size: 20px; white-space: nowrap; }
	html body ul.listWrap > li .delux-price h5 small { display: inline; margin-right: 3px; }
	html body ul.listWrap > li .buttom_areah .sls-right { flex: 0 0 auto; width: auto !important; margin: 0 !important; height: auto !important; }
	html body ul.listWrap > li .sls-right a { height: auto !important; }
	html body ul.listWrap > li .sbtn-room { display: block; height: auto !important; min-height: 0 !important; padding: 11px 14px !important; font-size: 14px !important; line-height: 1.3 !important; text-align: center; white-space: nowrap; border-radius: 0 !important; }
	html body ul.listWrap > li .sbtn-room .fa { display: none; }
}
@media screen and (max-width: 360px) {
	html body ul.listWrap > li .lftig, html body ul.listWrap > li .lftig img, html body ul.listWrap > li .lst-Dleft { height: 130px !important; }
	html body ul.listWrap > li .title-ls-hotel a { font-size: 15px; }
	html body ul.listWrap > li .delux-price h5 { font-size: 18px; }
	html body ul.listWrap > li .sbtn-room { padding: 10px 10px !important; font-size: 13px !important; }
}

/* ==========================================================================
   3. Hotel detail: content first, sidebar after it, tabs under the photos,
      and the selection + "I'll Reserve" as a floating bar above the bottom nav
   ========================================================================== */
@media screen and (max-width: 767px) {
	html body .hd-row { flex-direction: column-reverse; }
	html body .hd-row > .outher-class-1 { margin-top: 22px; }

	/* section tabs: moved under the photos, one swipeable row of square chips (as the listing sort bar) */
	html body .nav-detail:not(.nav-after-gallery) { display: none; }
	html body .nav-detail.nav-after-gallery { display: block; margin: 10px 0; }
	html body .nav-after-gallery .scroll-detail { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0; padding: 2px 0 4px; background: none; border: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	html body .nav-after-gallery .scroll-detail::-webkit-scrollbar { display: none; }
	html body .nav-after-gallery .scroll-detail li { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 0; border: 1px solid #ddd; border-radius: 0; background: #fff; }
	html body .nav-after-gallery .scroll-detail li a { display: block; padding: 7px 14px; font-size: 13px; line-height: 1.2; white-space: nowrap; }

	/* compact sections */
	html body .outher-class-2 .pa-title { font-size: 17px; line-height: 1.25; margin: 0 0 8px; padding: 0 0 8px; }
	html body .outher-class-2 .pop-Facility, html body .outher-class-2 .hours-rul, html body .outher-class-2 .fin-div { margin-top: 14px; padding-top: 0; }

	/* room amenities and facilities: two columns instead of one long list */
	html body .single_room .ot-div > ul, html body .pop-Facility .ot-div > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding-left: 0; list-style: none; }
	html body .single_room .ot-div > ul > li, html body .pop-Facility .ot-div > ul > li { min-width: 0; }
	html body .single_room .ot-div .tit-li, html body .pop-Facility .tit-li { display: block; margin: 8px 0 2px; }
	html body .single_room .ot-div ul li { font-size: 13px; line-height: 1.35; margin-bottom: 1px; }
	html body .pop-Facility .f-major { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding-left: 0; list-style: none; margin: 8px 0 12px; }
	html body .pop-Facility .f-major > li { min-width: 0; margin: 0; padding: 0; width: auto; }
	html body .pop-Facility .f-topTitle h3 { font-size: 16px; margin: 12px 0 6px; }

	/* house rules: the time label under each bar used to land on the next heading */
	html body .hours-rul .rul--left h4 { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
	html body .hours-rul .rul--left h4 i { display: inline-block; margin: 0; }
	html body .rul-right .rul-wraps { margin-bottom: 36px; }

	/* repeated "See availability" buttons: slimmer, square */
	html body .pop-Facility .see--btn, html body .hours-rul .rul-btn, html body .fin-div .see--btn { padding: 8px 14px; font-size: 14px; margin: 4px 0 8px; border-radius: 0 !important; }

	/* "I'll Reserve" block in the room table (no rooms chosen yet): full width */
	html body .bedWraper .bed-Reserves { position: static; width: 100%; height: auto; padding: 12px 0 0; }
	html body .bed-Reserves .wr-wrap.w-4 { text-align: left; }
	html body .bed-Reserves .wr-wrap.w-4 .d-flex { justify-content: stretch !important; }
	html body .bedWraper .bed-Reserves .i-rserve { width: 100%; height: auto; padding: 13px 16px; font-size: 16px; font-weight: 800; background: #FAC917; color: #313131; border-radius: 0 !important; box-shadow: none; }

	/* rooms chosen: the selection, total and "I'll Reserve" float above the bottom nav */
	html body .bedWraper .bed-Reserves:has(.selectedPrice) { position: fixed !important; top: auto !important; height: auto !important; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 1000; width: 100% !important; box-sizing: border-box; padding: 8px 12px !important; margin: 0 !important; background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 -4px 12px rgba(0, 0, 0, .1); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sel btn" "err err"; column-gap: 12px; align-items: center; }
	html body .bedWraper .bed-Reserves:has(.selectedPrice[style*="display: none"]) { display: none !important; }
	html body .bed-Reserves .selectedPrice { grid-area: sel; min-width: 0; margin: 0 !important; padding: 0 !important; text-align: left; }
	html body .bed-Reserves .selectedPrice strong { display: none; }
	html body .bed-Reserves .selectedPrice h3 { margin: 0 !important; font-size: 19px; line-height: 1.15; }
	html body .bed-Reserves .selectedPrice h3 del { font-size: 12px; margin-right: 6px; color: #999; }
	html body .bed-Reserves .selectedPrice .spr { font-size: 11px; color: #777; line-height: 1.2; }
	html body .bed-Reserves .selectedPrice .sel-rooms { display: block; font-size: 12px; line-height: 1.25; color: #313131; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	html body .bed-Reserves .wr-wrap.w-4 { display: contents; }
	html body .bed-Reserves .wr-wrap.w-4 > .d-flex { grid-area: btn; margin: 0 !important; }
	html body .bed-Reserves .wr-wrap.w-4 .nonAvail { grid-area: btn; }
	html body .bedWraper .bed-Reserves:has(.selectedPrice) .i-rserve { width: auto; padding: 12px 18px; font-size: 16px; white-space: nowrap; }
	html body .bed-Reserves .reservation_error { grid-area: err; margin: 4px 0 0; font-size: 12px; color: #c0392b; }
	html body .bed-Reserves .reservation_error:empty { display: none; }
	html body .bed-Reserves .small-lst { display: none; }
	/* room for the floating bar at the end of the page */
	html body .hd-row { padding-bottom: 70px; }
}

/* ==========================================================================
   4. Hotel booking (/hotel_booking): "Your booking details" first, one 15px edge,
      form fields in their real order, total + Next / Request Booking floating.
      Scoped with :has(.hotelBookingStep1): .hts-Section is shared with the car,
      shuttle, tour and flight booking pages.
   ========================================================================== */
@media screen and (max-width: 767px) {
	/* stepper row stuck out past the screen */
	html body .signup-step-container:has(~ section.hts-Section .hotelBookingStep1) .row { margin-left: 0; margin-right: 0; }
	html body .signup-step-container:has(~ section.hts-Section .hotelBookingStep1) .col-md-12 { padding-left: 0; padding-right: 0; }

	/* one edge: container 15px, no stacked column gutters */
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container { width: auto; padding-left: 15px !important; padding-right: 15px !important; }
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container > .row { display: flex !important; flex-direction: column !important; margin: 0 !important; }
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container > .row > .col-sm-3 { display: contents !important; }
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container > .row > .col-sm-9 { order: 0; width: 100%; max-width: 100%; flex: none; padding: 0 !important; }
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container > .row > .col-sm-3 > * { order: 1; width: 100% !important; max-width: 100% !important; box-sizing: border-box; position: static !important; top: auto !important; margin: 0 0 12px !important; }
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container > .row > .col-sm-3 > .card:first-child { order: -1 !important; }

	/* custom.css turns every .hts-Section .row into column-reverse on phones:
	   in the form that printed Confirm email above Email above Full name */
	html body section.hts-Section:has(.hotelBookingStep1) > .t-container > .row .row { flex-direction: row !important; flex-wrap: wrap; margin-left: 0; margin-right: 0; }
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep1 [class*="col-sm-"],
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep2 [class*="col-sm-"] { padding-left: 0; padding-right: 0; }
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep1 .card-body,
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep2 .card-body { padding: 12px; }
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep1 .gratDv,
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep1 .bedCh { padding: 8px; }

	/* hotel summary card: shorter photo */
	html body section.hts-Section:has(.hotelBookingStep1) .mgh { height: auto; }
	html body section.hts-Section:has(.hotelBookingStep1) .mgh img { height: 170px; width: 100%; object-fit: cover; }
	html body section.hts-Section:has(.hotelBookingStep1) .mhContent h3 { font-size: 18px; margin: 10px 0 6px; }

	/* headings */
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep1 h3,
	html body section.hts-Section:has(.hotelBookingStep1) .hotelBookingStep2 h3,
	html body section.hts-Section:has(.hotelBookingStep1) .entrstyle { font-size: 19px; margin-bottom: 10px; }
	html body section.hts-Section:has(.hotelBookingStep1) .askTiel { font-size: 17px; margin: 14px 0 8px; }

	/* the step buttons live in the floating bar below; keep the in-page copies hidden */
	html body section.hts-Section:has(.hotelBookingStep1) .nex-Dv,
	html body section.hts-Section:has(.hotelBookingStep1) .enter-info .hotelBookingStep2 .text-right:has(> .timbtn) { display: none !important; }
	html body section.hts-Section:has(.hotelBookingStep1) { padding-bottom: 80px; }

	/* the floating bar: total on the left, the current step's button on the right */
	html body .hb-float { display: flex !important; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 1000; box-sizing: border-box; padding: 8px 12px; background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 -4px 12px rgba(0, 0, 0, .1); }
	html body .hb-float[style*="display: none"] { display: none !important; }
	html body .hb-float .hb-float-total { flex: none; line-height: 1.15; }
	html body .hb-float .hb-float-total small { display: block; font-size: 11px; color: #777; }
	html body .hb-float .hb-float-total b { font-size: 18px; white-space: nowrap; }
	html body .hb-float .hb-float-btn { flex: 1; min-width: 0; width: auto; margin: 0; padding: 12px 10px; font-size: 15px; border-radius: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}