/* xl - DESKTOP STYLES */ 
/* Container for all rooms */
.hotel-rooms-grid {
    display: flex;
	flex-wrap: wrap;
	min-height: 400px;
	flex-direction: row;
	margin: 24px;
	gap: 12px;
}

/* Individual room card */
.hotel-room-card {
	display: flex;
	flex-direction: column;
	padding: 6px;
    background: #ffffff; /* white card */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
	transform-origin: 50% 0%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
	justify-content: space-between;
	max-width: 260px;
}

/* Hover effect */
.hotel-room-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

@media (max-width: 767px) {
	.hotel-room-card {
		transform-origin: 50% 50%;
	}
}

/* Thumbnail image */
.hotel-room-card .room-thumb {
	max-width: 250px;
    max-height: 300px;
    overflow: hidden;
}

.hotel-room-card a {
	display: block;
	width: fit-content;
	text-decoration: none;
}

.hotel-room-card .room-content {
	flex-grow: 1;
	justify-content: space-between;
	align-items: end;
	display: flex;
	flex-direction: column;
	min-height: 160px;
	max-height: 200px;
	overflow: ellipsis;
}

.hotel-room-card .room-thumb img {
	width: 100%;
    object-fit: cover;
    display: block;
}

/* Room title */
.hotel-room-card .room-title {
	font-size: 1em;
    font-weight: 600;
	text-decoration: none;
    margin: 0;
}

/* Room excerpt / description */
.hotel-room-card .room-excerpt {
    color: #555;
    font-size: 1em;
    padding: .5em .5em .5em .5em;
}

/* No rooms message */
.no-rooms {
    font-style: italic;
    color: #777;
    margin-top: 1rem;
}

.loading-indicator {
	display: none;
}


.hotel-room-card .taxonomy-amenity a:nth-child(n+3) {
	display: none;
}

/* Responsive tweaks for small screens */
@media (max-width: 767px) {
    .hotel-rooms-grid {
		flex-direction: column;
    }
	.hotel-room-card {
		max-width: 100%;
	}
    .hotel-room-card .room-thumb {
		max-width: 100%;
    }
	.hotel-room-card .taxonomy-amenity a:nth-child(n+3) {
		display: flex;
	}
	.hotel-room-card .room-thumb img {
		max-width: 100%;
		width: 100vw;
	}
}

.hotel-room-card .room-content a {
	margin: 12px;
}

.hotel-room-card .amount-money {
	padding: 0;
	font-size: 1em;
	text-align: right;
}

.hotel-room-card .room-title-box {
	display: flex;
	font-size: 1.25em;
	flex-direction: row;
	padding: .5em 0 0 0;
	align-items: flex-start;
	justify-content: space-between;
}

.hotel-rooms-filter p, 
.hotel-rooms-filter br {
	display: none
}

.hotel-rooms-filter p.f, 
.hotel-rooms-filter br.f {
	display: block;
	padding: 0;
	margin: 0;
}

.hotel-room-card .taxonomy-amenity {
	margin: 0;
	gap: 6px;
	padding: 0 0 .5em 0;
	align-self: flex-start;
}

.hotel-room-card .taxonomy-amenity a {
	font-size: .8em;
	margin: 0;
}

.hotel-rooms-filters .price-filters {
	padding: .5em;
	display: flex;
	background-color: var(--global-palette9);
	flex-direction:row;
	flex-wrap: wrap;
	gap: 1em;
}

.hotel-rooms-filters {
	position: sticky;
	z-index: 2;
	top: 0;
	left: 0;
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	gap: .5em;
	justify-content: space-evenly;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	background-color: var(--global-palette7);
}

.hotel-rooms-filters > * {
	padding: .5em;
	border-radius: .5em;
	max-width: calc(100vw - 3em);
	background-color: var(--global-palette9);
}

.hotel-rooms-filters .amenity-filter {
	grid-row: 2;
	grid-column: span 2;
	align-items: start;
}

.hotel-rooms-filters .amenity-filter .taxonomy-amenity {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	box-sizing: border-box;
}

.taxonomy-amenity::-webkit-scrollbar {
	display: none;
}

.hotel-rooms-filters .amenity-filter .taxonomy-amenity > * {
	flex: 0 0 auto;
	white-space: nowrap;
}

.hotel-rooms-filters .search-filter {
	grid-column: 1;
	grid-row: 1;
}
.hotel-rooms-filters .price-filter {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 767px) {
	.hotel-rooms-filters {
		grid-template-columns: 1fr;
	}
	.hotel-rooms-filters > * {
		width: 100%;
		grid-column: 1;
	}
	.hotel-rooms-filters .search-filter {
		grid-row: 1;
	}
	.hotel-rooms-filters .price-filter {
		grid-row: 2;
	}
	.hotel-rooms-filters .amenity-filter {
		grid-row: 3;
		grid-column: 1;
		display: flex;
		flex-direction: row;
		align-items: start;
	}
}

.hotel-rooms-filters 
.amenity-filter 
.amenity-filter-item label {
	display: flex;
	align-content: center;
	width: fit-content;
	flex-direction:row;
	flex-wrap: wrap;
	gap: 1em;
}

.hotel-rooms-filters 
.amenity-filter 
.amenity-filter-item input[type="checkbox"] {
	height: 2em;
	width: 2em;
}

.hotel-rooms-filters 
.price-filters {
	align-items: center;
	justify-content: space-between;
}

.hotel-rooms-filters 
.price-filters input[type="number"] {
	width: 25%;
}

.hotel-rooms-filters
.search-filter {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 4em;
	overflow: hidden;
}

.hotel-rooms-filters
.search-filter input[type="search"] {
	width: 100%;
	height: 3em;
	padding-left: 2.5em;
}

.hotel-rooms-filters
.search-filter i {
	font-size: x-large;
	position: relative;
	top: -1.5em;
	left: .25em;
}