/* ============================================================
Hotel Booking Page — assets/css/hotel-booking.css
============================================================ */
.hotel-search-bar .tsb-form{
    border: none;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
}

.tour-card-inner{
	background:#f9f9f9;
	border-radius:16px;
	padding:15px;
	height:100%;
	display:flex;
	flex-direction:column;
}

.tour-desc{
	color:#505050;
	flex-grow:1;
	font-family: inherit;
}

.tour-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    margin-bottom: 20px;
    padding: 0px 20px;
}

.tour-cart-btn{
	padding: 12px 24px;
    border-radius: 70px;
    background-color: #20C210;
    color: #fff;
    font-size: 16px !important;
    border: 1px solid #20C210;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    text-decoration: none;
}

.tour-image{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
	height: 240px !important;
}

.tour-image img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	border-radius: 12px !important;
 	transition: transform 0.5s ease;
}

.tour-product-card:hover .tour-image img{
    transform: scale(1.1);
}

.tour-product-card:hover .tour-amount{
    color: #0F71DD;
    transition: color 0.3s ease;
}

.tour-product-card:hover .tour-cart-btn {
	background-color: transparent;
    color: #20C210;	
}

.from-class{
    color:#878787;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-right: 6px;
}

.tour-filter-field-wrapper{
	margin-bottom:40px;
}

.tour-product-wrapper{
	width:100%;
}

/* PRUNED: .tour-content removed — no element with this class exists
   anywhere in the provided PHP. */

.input-group {
    position: relative;
}

.input-group input {
    width: 100%;
    padding-right: 45px;
}

.input-group .back-btn {
    position: absolute;
    right: 10px;
    top: 40%;
    transform: translateY(-50%);
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: none;
    background: transparent !important; /* 👈 like tour form */
    color: #000;
    font-size: 16px;
    cursor: pointer;
}
/* REMOVE NUMBER INPUT ARROWS (Chrome, Safari, Edge) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* REMOVE ARROWS (Firefox) */
input[type="number"] {
    -moz-appearance: textfield;
}
/* FILTER SECTION */

.tour-filter-buttons{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:12px;
	margin-bottom:30px;
	flex-wrap:wrap;
}

.tour-filter-buttons .tour-filter-btn{
	font-size:16px;
	padding:8px 18px;
	background:#ffffff;
	color:#666666;
	border:1px solid #e5e5e5;
	cursor:pointer;
	font-family:inherit;
	border-radius:30px;
	transition:all 0.2s ease;
	white-space:nowrap;
}

/* HOVER + ACTIVE BUTTON (identical declarations, merged) */

.tour-filter-buttons .tour-filter-btn:hover,
.tour-filter-buttons .tour-filter-btn.active{
	background:#20C210;
	color:#ffffff;
	border-color:#20C210;
}
/* GRID */

.tour-product-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
	position:relative;
}


/* CARD */

.tour-product-card{
	background: #F5F5F5 !important;
	display: flex;
	flex-direction: column;
	border-radius:12px;
	overflow:hidden;
	background:#fff;
	/* 	box-shadow:0 5px 15px rgba(0,0,0,0.08); */
	transition:0.3s;
	font-family:inherit !important;
}

/* ===== HOTEL BOOKING DATE FIELD (SCOPED) ===== */
/* PRUNED: .tbf-date-wrap / .tbf-input / .tbf-date-icon(+img) removed
   from these merged selectors — no ".tbf-*" class exists anywhere in
   the provided PHP, so only the .hb-* side is real. Folded back into
   single rules since there's nothing left to share. */

.hb-date-wrap {
    position: relative;
    cursor: pointer;
}

.hb-input {
    width: 100%;
    height: 52px;
    padding: 14px;
    padding-right: 40px; /* space for icon */
    background-color: #F6F6F6;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

.hb-date-icon {
	display: flex;
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
	pointer-events:none;
}

.hb-date-icon img {
    width: 18px;
    height: 18px;
}

.hb-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;   /* 👈 ONLY ICON AREA */
    height: 100%;
    cursor: pointer;
    z-index: 2;
}
/* IMAGE */


/* CARD BODY */

.tour-card-body{
	display:flex;
	flex-direction:column;
	padding:20px;
}


/* TITLE */

.tour-title{
	font-size:20px !important;
	font-weight:600 !important;
	margin-bottom:10px;
	color: #1e1e1e;
}

/* PRUNED: .tour-rating removed — no element with this class exists
   in the provided PHP. */

/* PRUNED: .tour-duration removed (base rule + its 480px media rule) —
   no element with this class exists in the provided PHP. */


/* PRICE BAR */

.tour-price{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	font-weight: 600;
}

/* PRUNED: .tour-from removed (base rule + its 768px media rule) —
   the tour-price markup only outputs .from-class + .tour-amount,
   never .tour-from. */

.tour-amount{
	font-size:20px;
	color: #141414;
}

/* ── Facilities section ── */

.hotel-facilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 30px;
    list-style: none;
}

.hotel-facility-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
}
.hotel-facility-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.hotel-facilities-see-all {
    padding: 0 !important;
    margin-top: 10px;
    color: #20C210 !important;
    background-color: transparent !important;
    font-size: 16px !important;
    text-decoration: none;
    outline: none !important;
    transition: color 0.15s ease;
}

.hotel-facilities-see-all:hover,
.hotel-facilities-see-all:focus {
    color: #0F71DD !important;
    text-decoration: underline;
}

.hotel-facilities-see-all:focus-visible {
    outline: 2px solid #0F71DD !important;
    outline-offset: 2px;
}

/* ── Modal overlay ── */
.hotel-facilities-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(3px);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.hotel-facilities-modal {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
	scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
}

/* Chrome, Edge, Safari */
.hotel-facilities-modal::-webkit-scrollbar {
    width: 6px;
}

.hotel-facilities-modal::-webkit-scrollbar-track {
    background: transparent;
}

.hotel-facilities-modal::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 100px;
}

.hotel-facilities-modal::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

.hotel-facilities-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.hotel-facilities-modal-head h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.hotel-facilities-close {
    border: 1px solid #20C210 !important; 
    line-height: 0 !important;
    border-radius: 50% !important;
    padding: 8px !important;
}
.hotel-facilities-close:hover {
    border: 1px solid #20C210 !important; 
    background-color: transparent;
    line-height: 0 !important;
}
.hotel-facilities-close:hover svg path{
    stroke:#20C210 !important;
}

.hotel-facilities-grid--all {
    gap: 12px 32px;
}

/* WRAPPER */

.hotel-pricing-wrapper {
	/*	padding-top:20px;
	padding-bottom:40px;
	border-bottom:1px solid #ddd; /* bottom line like screenshot */
	font-family: inherit;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #ddd;
}

/* PRUNED: .hotel-pricing-title (+::after) removed — hotel_room_pricing_shortcode()
   renders the table with no heading element carrying this class. */


/* TABLE */

.hotel-pricing-table{
    width:100%;
    border-collapse:collapse;
}

/* TABLE HEAD */

.hotel-pricing-table th{
    background:#E8F8E6;
    font-weight:400;
    padding:20px;
    text-align:center;
    font-size:16px;
    color: #141414;
}

/* TABLE BODY */

.hotel-pricing-table td{
    font-weight:400;
    padding:22px;
    vertical-align:middle;
    text-align:center;
}

.room-category {
    font-size: 16px;
    color: #505050;
}

/* PRICE */

.room-price{
	font-size:18px;
	color: #141414;
}

/* INNER BORDERS */

.hotel-pricing-table th,
.hotel-pricing-table td{
    border:1px solid #ddd;
}

/* REMOVE OUTER DUPLICATE BORDERS */

.hotel-pricing-table tr:first-child th{
    border-top:none;
}

.hotel-pricing-table tr:last-child td{
    border-bottom:none;
}

.hotel-pricing-table tr td:first-child,
.hotel-pricing-table tr th:first-child{
    border-left:none;
}

.hotel-pricing-table tr td:last-child,
.hotel-pricing-table tr th:last-child{
    border-right:none;
}

/* BOOKING FORM WRAPPER */

.hotel-booking-form{
	padding: 14px;
	background-color: #FEFEFE;
	box-shadow: 0 5px 15px rgba(0,0,0,0.07);
	border-radius: 10px;
	font-family: inherit;
	max-height: 90vh; 
    overflow-y: auto;
}
.hotel-booking-form::-webkit-scrollbar {
    display: none;
}

/* TOP PRICE BAR */

.hotel-price-top {
	font-size: 16px;
    color: #8E8E93;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

/* FORM */

#hotel-booking{
	display:flex;
	flex-direction:column;
}


/* LABEL */
#hotel-booking .hb-field {
    margin-bottom: 16px;
}

#hotel-booking .hb-field label {
	display: block;
	color: #878787;
	font-size: 14px;
	margin-bottom: 10px;
}

#hotel-booking label:after{
	content:"*";
}


/* INPUT + SELECT */

#hotel-booking input,
#hotel-booking select {
	width: 100%;
	height: 52px;
	padding: 14px;
	background-color: #F6F6F6;
	border-radius: 8px;
	border: none;
	font-size: 15px;
	color: #141414;
	outline: none;
	box-sizing: border-box;
}

/* PRUNED: .adult-child-row (+ select width rule) removed — the current
   booking form markup uses .hb-row-2col / #adult-select-wrap /
   #adult-input-wrap instead; .adult-child-row is never output. */

#adult-count {
	margin-right: 4%;
}


/* DATE INPUT ICON SPACE */

/* #hotel-booking input[type="date"]{
padding-right:30px;
} */


/* SELECT DROPDOWN */

#hotel-booking select{
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding-right: 45px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 14px;
}


/* BUTTON */

.hb-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#calculate-price,
#book-hotel {
	width: 100%;
	padding: 12px 24px;
	background-color: #00B531;
	color: #fff;
	border: none;
	border-radius: 70px;
	cursor: pointer;
	font-weight: 400;
}

#calculate-price {
	font-size: 14px;
}

#calculate-price:hover {
	background-color: #009e2a;
}


#calculate-price .btn-title{
	font-size:15px;
	font-weight: 500;
}


#calculate-price .btn-title .btn-price{
	font-size:20px;
	font-weight:500;
}

/* TOTAL PRICE */

.total-price{
	margin-top:10px;
	font-size:16px;
	font-weight:600;
	text-align:center;
}
.field-error{
	color:red;
	font-size:12px;
	display:block;
}

/* .input-error{
border-bottom:2px solid red !important;
} */

.hotel-itinerary-wrapper{
	display:flex;
	flex-direction:column;
	gap:14px;
}
.itinerary-heading{
	padding-top:20px;
}
.download-itinerary-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	border:1px solid #169b9b;
	color:#169b9b;
	padding:12px 24px; 
	border-radius:70px;
	text-decoration:none;
	font-weight:600;
	position:relative;
	transition:0.3s;
}

.download-itinerary-btn:hover{
	background:#00B531;
	color:#fff;
}


/* TOOLTIP */

.download-itinerary-btn::after{
	content:attr(data-tooltip);
	position:absolute;
	top:-40px;
	left:50%;
	transform:translateX(-50%);
	background:#222;
	color:#fff;
	padding:8px 12px;
	font-size:13px;
	border-radius:4px;
	opacity:0;
	visibility:hidden;
	white-space:nowrap;
	transition:0.3s;
}


.download-itinerary-btn::before{
	content:'';
	position:absolute;
	top:-12px;
	left:50%;
	transform:translateX(-50%);
	border:6px solid transparent;
	opacity:0;
	visibility:hidden;
}

.download-itinerary-btn:hover::after,
.download-itinerary-btn:hover::before{
	opacity:1;
	visibility:visible;
}

#book-hotel {
	font-size: 16px;
}

/* =========================
HOTEL PAGINATION DESIGN
========================= */

.tour-pagination {
    display: none;
}

.tour-pagination:has(a, span.current) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

/* PAGE NUMBER */

.tour-pagination a,
.tour-pagination span{
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 10px 16px;
	border-radius:20px;
	border:1px solid #D9D9D9;
	text-decoration:none;
	color:#121212;
	font-size:14px !important;
	background-color:transparent;
	transition:all 0.25s ease;
	line-height:130% !important;
}

/* HOVER + CURRENT PAGE (identical declarations, merged) */

.tour-pagination a:hover,
.tour-pagination .current{
	background-color:#20C210;
	color:#fff;
	border-color:#20C210;
}

/* DOTS (...) */

.tour-pagination .dots{
	border:none;
	background:transparent;
}

.hotel-share{
	margin-top: 20px;	
}

.hotel-share-icons{
	margin-top: 10px;	
}
#book-hotel{
	display:none;
}

/* NOTE: kept — .rating-badge / .elementor-icon-box-title look like an
   Elementor Icon Box widget class, which lives in page-builder content
   rather than this shortcode PHP, so its absence here doesn't mean
   it's unused. */
.rating-badge {
    padding: 5px 10px !important;
    background: #FFF4E5;
    color: #8A5200;
    border: 1px solid #FBE2B8;
    border-radius: 20px;
    margin-right: 6px;
}

.rating-badge .elementor-icon-box-title {
    font-size: 14px !important;
}

/* ============================================================
   HOTEL LISTING PAGE — hotel-listing.css
   Matches Tour Filter page design exactly
   v1
   ============================================================ */

/* ── Sidebar search ── */
.filter-section--search {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #CDCDCD;
}

.hotel-search-wrap {
    position: relative;
    margin-top: 12px;
}

.hotel-search-input {
    width: 100%;
    height: 44px;
    padding: 10px 40px 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    color: #1e1e1e;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.hotel-search-input:focus {
    border-color: #22c55e;
}

.hotel-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
    display: flex;
    align-items: center;
}

.hotel-search-icon svg {
    width: 16px;
    height: 16px;
}

/* ── Filter count badge ── */
.hotel-filter-count {
    margin-left: auto;
    font-size: 14px;
    color: rgba(30, 30, 30, 0.6);
    font-family: "Helvetica regular", Sans-serif;
}

/* NOTE: kept — _hotel_render_stars() (which outputs .hotel-stars-wrap)
   is defined in the PHP but isn't called anywhere in the code shown.
   Since the function itself is real, this may be invoked from a
   template not included here — left in place rather than deleted. */
.hotel-stars-wrap {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-right: 4px;
    line-height: 1;
}

/* PRUNED: .hotel-results-bar removed — its markup
   (<div class="hotel-results-bar" id="hotelResultsBar">) is HTML-commented
   out inside hotel_listing_filter_shortcode(), so it never renders. */

/* ══════════════════════════════════════════════════════════════
   HOTEL CARD
   PRUNED: _hotel_render_card() builds cards with .tour-card /
   .tour-card__img-wrap / .tour-card__body / .tour-card__top-row /
   .tour-card__review-count / .tour-card__price-row / etc. — NOT with
   .hotel-card / .hotel-card__*. The rules below that only exist under
   those never-emitted class names have been removed:
   .hotel-card, .hotel-card__img-wrap(+img), .hotel-card__top-row,
   .hotel-card__review-count, .hotel-card__rating-pill,
   .hotel-card__info-row(+768px gap rule), .hotel-card-v2-divider,
   .hotel-card__price-block, .hotel-card__body, .hotel-card__rooms,
   .hotel-card__room-tag, .hotel-card__amenities, .hotel-amenity-item(+svg),
   .hotel-amenity-label, .hotel-card__price-row(+merged price-label/per rule),
   .hotel-card__price-amount, .tour-card__price-amount-wrap,
   .hotel-card__actions, .hotel-rating-badge (this last one also has no
   matching class anywhere in the PHP — the star badge markup actually
   uses "tour-rating-badge").
   Everything below IS still emitted by _hotel_render_card() and kept.
══════════════════════════════════════════════════════════════ */

/* Rating badge — top left of image */
.hotel-card__rating-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEFEFE;
    border-radius: 80px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    z-index: 2;
    white-space: nowrap;
}

.hotel-card__rating-badge::before {
    content: "";
    width: 12px;
    height: 12px;
    background: url('/wp-content/uploads/2026/07/Star-1.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

.hotel-card__review {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.hotel-card__info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #505050;
}

.hotel-card__amenity-icon {
    width: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Location */
.hotel-card__location {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #505050;
}

.hotel-card__location svg {
    flex-shrink: 0;
}

/* Excerpt */
.hotel-card__excerpt {
    color: #7D7D7D;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	font-size: 14px;
	line-height: 130%;
}

/* No results */
.hotel-no-results {
    padding: 48px 24px;
    text-align: center;
    color: #505050;
    background: #fff;
    border-radius: 14px;
    font-size: 15px;
}
/* HOTEL LISTING PAGINATION */
#hotelPagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

#hotelPagination .tours-pagination-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

#hotelPagination .page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    background: transparent;
    color: #121212;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-family: inherit;
}

#hotelPagination .page-btn:hover,
#hotelPagination .page-btn.active {
    background: #20C210;
    border-color: #20C210;
    color: #fff;
}

#hotelPagination .page-btn:disabled {
    cursor: default;
    opacity: 0.5;
}
.hb-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.hb-row-2col .hb-field {
	margin-bottom: 16px;
}

.elementor-slideshow__title{
	display: none;
}

/* ============================================================
   RESPONSIVE — all media queries consolidated below.
   Every breakpoint now appears exactly ONCE (previously 1366px,
   1024px, 768px, and 480px were each declared twice — once in the
   original "tour/booking" responsive run and again in the later
   "hotel-listing" run). Rules are concatenated in their original
   encounter order within each merged block so cascade order among
   same-breakpoint rules is unchanged.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — show heading on mobile (same as tour page)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    #hotelSidebarHeading {
        display: none !important;
    }
}

/* Laptop (1366px) */
@media screen and (max-width:1366px){
	.tour-product-grid{
		grid-template-columns:repeat(3,1fr);
		gap:24px;
	}
	
	.tour-amount{
		font-size:18px;
	}
	
	.tour-image {
		height:220px !important;
	}
	/* PRUNED: .hotel-card__img-wrap width/height rule removed from
	   this breakpoint — .hotel-card__img-wrap is unused (see note above). */
}

@media screen and (max-width:1199px){
	.tour-cart-btn{
		padding: 10px 16px;
	}
}

/* Tablet — MERGED (was two separate 1024px blocks) */
@media screen and (max-width:1024px){

	.tour-product-grid{
		grid-template-columns:repeat(2,1fr);
		gap:20px;
	}
	
	.tour-title{
		font-size:18px !important;
	}

	.hotel-booking-form{
		max-height: 100%;
	}

	.hotel-pricing-table th,
	.hotel-pricing-table td{
		padding:16px;
		font-size:16px;
	}

	/* PRUNED: .hotel-desc-title removed — no element with this class
	   exists anywhere in the provided PHP. */

	/* ⚠️ NOTE — kept but flagged: everything below targets
	   ".hotel-listing-page ..." as an ancestor selector, but
	   hotel_listing_filter_shortcode() only outputs
	   <div class="tours-page" id="hotelPageWrap"> — it never adds a
	   "hotel-listing-page" class (compare to the car version, which
	   correctly outputs "car-listing-page"). As written, this entire
	   mobile-sidebar block currently can't match anything and looks
	   like a missing class in the PHP rather than intentionally dead
	   CSS. Left untouched since removing real sidebar-toggle logic
	   would be a functional regression if that's the case — worth
	   fixing on the PHP side by adding "hotel-listing-page" to the
	   wrapper div. */
	.hotel-listing-page .tours-sidebar {
		position: fixed;
		top: 0;
		left: -320px;
		width: 300px;
		height: 100vh;
		overflow-y: auto;
		z-index: 1200;
		border-radius: 0;
		transition: left 0.3s ease;
		scrollbar-width: none;
	}

	.hotel-listing-page .tours-sidebar::-webkit-scrollbar {
		display: none;
	}

	.hotel-listing-page .tours-sidebar.is-open {
		left: 0;
	}

	.hotel-listing-page .sidebar-filter-heading {
		display: flex !important;
		margin-bottom: 20px;
		padding-bottom: 16px;
		border-bottom: 1px solid #CDCDCD;
	}

	.hotel-listing-page .sidebar-filter-heading .sidebar-heading-text {
		display: block;
		font-size: 22px;
		font-weight: 700;
		color: #1e1e1e;
	}

	.hotel-listing-page .sidebar-close-btn {
		display: flex;
	}

	.hotel-listing-page .btn-apply-filter {
		display: block;
	}

	.hotel-listing-page .btn-mobile-filter {
		display: flex !important;
	}

	/* PRUNED: .hotel-card / .hotel-card__img-wrap / .hotel-card__body /
	   .hotel-card__actions rules removed from here — .hotel-card is
	   unused regardless of the ancestor-class issue above (the render
	   function never outputs class="hotel-card" at all). */
}


/* Mobile — MERGED (was two separate 768px blocks) */
@media screen and (max-width:768px){

	.tour-filter-buttons{
		justify-content:center;
	}

	.tour-filter-btn{
		padding:8px 18px;
		font-size:14px;
	}

	.tour-product-grid{
		grid-template-columns:1fr;
		gap:20px;
	}

	.tour-card-body{
		padding:15px;
	}

	.tour-image {
		height:200px !important;
	}

	.hotel-price-top{
		font-size:16px;
	}

	.hotel-price-top strong{
		font-size:22px;
	}

	/* stack buttons nicely */
	#calculate-price,
	#book-hotel{
		padding:14px;
		font-size:15px;
	}

	/* itinerary button */
	.download-itinerary-btn{
		padding:16px;
		font-size:14px;
	}

	/* pricing table responsive */
	.hotel-pricing-table th,
	.hotel-pricing-table td{
		padding:14px;
		font-size:15px;
	}

	.hotel-facilities-overlay{
		padding: 20px;
	}

	.hotel-facilities-modal {
    	padding: 20px;
	}

	.hotel-filter-bar .filter-bar__label {
		display: none;
	}

	/* PRUNED: .hotel-card__img-wrap height and .hotel-card__amenities gap
	   rules removed from here — both classes unused (see note above). */

	.tour-card__price-row {
    	flex-direction: column;
		align-items: flex-start !important;
		gap: 16px !important;
	}
	
	.tour-card__price-row a {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
    .hotel-facilities-grid,
    .hotel-facilities-grid--all {
        grid-template-columns: 1fr;
    }
}

/* Small Mobile — MERGED (was two separate 480px blocks) */
@media screen and (max-width:480px){

	.tour-filter-wrapper{
		margin:20px auto;
	}

	.tour-filter-btn{
		padding:7px 14px;
		font-size:14px;
	}

	.tour-image {
		height:180px !important;
	}

	/* table scroll */
	.hotel-pricing-wrapper{
		overflow-x:auto;
	}

	.hotel-pricing-table{
		max-width:500px;
	}

	/* booking form */
	.hotel-booking-form{
		padding:18px;
	}

	/* labels smaller */
	#hotel-booking label{
		font-size:14px;
	}

	/* inputs smaller */
	#hotel-booking input,
	#hotel-booking select{
		font-size:14px;
	}

	/* itinerary button */
	.download-itinerary-btn{
		padding:14px;
		font-size:14px;
	}

	.hotel-facilities-overlay {
    	padding: 15px;
	}

	/* PRUNED: .hotel-card__rooms gap, .hotel-card__room-tag font-size/padding,
	   and .hotel-card__price-amount font-size rules removed from here —
	   all three classes are unused (see note above). */
}