/*!
 * Camp Reservation - room cards + booking popup
 * ---------------------------------------------------------------
 * Everything is driven by CSS custom properties so the plugin settings,
 * the shortcode attributes and the Breakdance design controls can all theme
 * the same markup. Icon colour uses currentColor on purpose: change
 * --cr-icon-color (or the Breakdance "Icon colour" control) and every
 * facility icon follows.
 */

.cr-rooms {
	/* Colour + sizing tokens (fallbacks keep the markup safe outside the grid) */
	--cr-primary: #1e6b54;
	--cr-accent: #c77b3c;
	--cr-ink: #16241f;
	--cr-muted: #5c6b65;
	--cr-card-bg: #fff;
	--cr-card-border: #e7e2d6;
	--cr-btn-bg: #1e6b54;
	--cr-btn-text: #fff;
	--cr-btn-bg-hover: color-mix(in srgb, #1e6b54 85%, #000);
	--cr-btn-text-hover: #fff;
	--cr-icon-color: #1e6b54;
	--cr-icon-size: 20px;
	--cr-radius: 16px;
	--cr-gap: 24px;
	--cr-cols: 4;
	--cr-cols-md: 2;
	--cr-cols-sm: 1;
	--cr-image-min: 200px;
	--cr-ratio: 4/3;
	--cr-title-size: 20px;
	--cr-title-weight: 700;
	--cr-title-lh: 1.3;
	--cr-title-transform: none;
	--cr-title-color: #16241f;

	color: var(--cr-ink);
	font-size: 1rem;
	line-height: 1.55;
	box-sizing: border-box;
}

.cr-rooms *, .cr-rooms *::before, .cr-rooms *::after{
	box-sizing: inherit;
}

/* ------------------------------------------------------------------ grid */

.cr-rooms .cr-grid{
	display: grid;
	/* Four per row = 25% each (100% / --cr-cols). Narrow screens step down to
	   the tablet, then the phone column count instead of squeezing. */
	grid-template-columns: repeat(var(--cr-cols), minmax(0, 1fr));
	gap: var(--cr-gap);
	align-items: stretch;
}

/* Fixed card width: every card is exactly --cr-card-w wide and the row fits as
   many as it can, wrapping the rest. This rule is more specific than the tablet
   and phone steps below, on purpose - a fixed width stays fixed on every screen
   - and min(100%, ...) keeps a narrow phone from overflowing. */

.cr-rooms.cr-width--pixels .cr-grid{
	grid-template-columns: repeat(auto-fill, minmax(0, min(100%, var(--cr-card-w, 320px))));
}

@media (max-width: 1200px) {
	.cr-rooms .cr-grid{
		grid-template-columns: repeat(var(--cr-cols-md), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.cr-rooms .cr-grid{
		grid-template-columns: repeat(var(--cr-cols-sm), minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ card */

.cr-rooms .cr-card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--cr-card-bg);
	border: 1px solid var(--cr-card-border);
	border-radius: var(--cr-radius);
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.cr-rooms .cr-card-style--elevated .cr-card{
	box-shadow: 0 1px 2px rgba(16, 36, 30, 0.04), 0 16px 34px -22px rgba(16, 36, 30, 0.42);
}

.cr-rooms .cr-card-style--bordered .cr-card{
	box-shadow: none;
}

.cr-rooms .cr-card-style--flat .cr-card{
	border-color: transparent;
	background: var(--cr-card-bg);
	box-shadow: none;
}

.cr-rooms .cr-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(16, 36, 30, 0.05), 0 26px 50px -24px rgba(16, 36, 30, 0.5);
}

.cr-rooms .cr-card--sold-out{
	opacity: 0.86;
}

.cr-rooms .cr-card--sold-out:hover{
	transform: none;
}

/* ------------------------------------------------------------------ media */

.cr-rooms .cr-media{
	position: relative;
	aspect-ratio: var(--cr-ratio);
	/* The ratio sets the shape, this keeps a floor under it: a card photo is
	   never a sliver, whatever the theme or the image does. */
	min-height: var(--cr-image-min, 200px);
	background: #eef1ee;
	overflow: hidden;
}

.cr-rooms .cr-media__img{
	width: 100%;
	height: 100%;
	min-height: var(--cr-image-min, 200px);
	display: block;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.cr-rooms .cr-card:hover .cr-media__img{
	transform: scale(1.05);
}

@supports not (aspect-ratio: 1 / 1){
	.cr-rooms .cr-media{
		aspect-ratio: auto;
	}

	.cr-rooms .cr-media__img{
		height: auto;
	}
}

/* ------------------------------------------------- image bottom styles */

/* The bottom edge of the card photo - and of the popup photo - can be cut
   into one of four shapes. The mask sits on the <img> itself, never on the
   box around it, so the price chip, the "sold out" flag and the popup's
   title/price bar are never clipped; the box behind the photo is made
   transparent so the cut shows the card instead of a grey patch.

   `fallback` (the default) prints no rule at all: a plain edge, which is also
   what a browser without CSS masks shows for the four shapes below.
   `straight` is explicit, so it can also undo a shape a theme had set. */

.cr-rooms.cr-shape--straight .cr-media__img, .cr-rooms.cr-shape--straight .cr-modal__img{
	clip-path: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.cr-rooms.cr-shape--concave .cr-media, .cr-rooms.cr-shape--concave .cr-modal__media{
	background: transparent;
}

.cr-rooms.cr-shape--concave .cr-media__img, .cr-rooms.cr-shape--concave .cr-modal__img{
	clip-path: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V100 Q50 64 0 100 Z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V100 Q50 64 0 100 Z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.cr-rooms.cr-shape--convex .cr-media, .cr-rooms.cr-shape--convex .cr-modal__media{
	background: transparent;
}

.cr-rooms.cr-shape--convex .cr-media__img, .cr-rooms.cr-shape--convex .cr-modal__img{
	clip-path: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V84 Q50 114 0 84 Z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V84 Q50 114 0 84 Z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.cr-rooms.cr-shape--wavy .cr-media, .cr-rooms.cr-shape--wavy .cr-modal__media{
	background: transparent;
}

.cr-rooms.cr-shape--wavy .cr-media__img, .cr-rooms.cr-shape--wavy .cr-modal__img{
	clip-path: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V84 C75 106 75 62 50 84 C25 106 25 62 0 84 Z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V84 C75 106 75 62 50 84 C25 106 25 62 0 84 Z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.cr-rooms .cr-media__placeholder{
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--cr-muted);
	opacity: 0.55;
}

.cr-rooms .cr-media__placeholder .cr-ic{
	width: 56px;
	height: 56px;
}

.cr-rooms .cr-badge{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--cr-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cr-rooms .cr-price{
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	color: var(--cr-ink);
	box-shadow: 0 6px 18px -10px rgba(16, 36, 30, 0.6);
}

.cr-rooms .cr-price__amount{
	font-size: var(--cr-price-size);
	font-weight: 700;
	color: var(--cr-price-color);
}

/* The currency code ("USD") next to the nightly rate. */
.cr-rooms .cr-price__cur{
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-price-color);
	opacity: 0.85;
}

.cr-rooms .cr-price__suffix{
	font-size: 0.72rem;
	color: var(--cr-muted);
}

.cr-rooms .cr-flag{
	position: absolute;
	inset: auto 12px 12px auto;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #2f2f2f;
	color: #fff;
}

/* ------------------------------------------------------------------- body */

.cr-rooms .cr-body{
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: 18px 18px 20px;
}

/* The room title is styled by the plugin, never by the theme. */
.cr-rooms .cr-title{
	margin: 0;
	font-family: var(--cr-title-font, inherit);
	font-size: var(--cr-title-size);
	line-height: var(--cr-title-lh);
	font-weight: var(--cr-title-weight);
	text-transform: var(--cr-title-transform);
	color: var(--cr-title-color);
	letter-spacing: -0.01em;
}

/* Optional grid heading above the cards (Settings -> Typography). */
.cr-rooms .cr-heading{
	margin: 0 0 18px;
	font-family: var(--cr-title-font, inherit);
	font-size: calc(var(--cr-title-size) * 1.35);
	line-height: 1.25;
	font-weight: var(--cr-title-weight);
	color: var(--cr-title-color);
}

.cr-rooms .cr-title__link{
	color: inherit;
	text-decoration: none;
}

.cr-rooms .cr-title__link:hover, .cr-rooms .cr-title__link:focus-visible{
	color: var(--cr-primary);
}

.cr-rooms .cr-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: var(--cr-muted);
}

.cr-rooms .cr-meta__item{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cr-rooms .cr-meta__item .cr-ic--meta{
	width: 15px;
	height: 15px;
	color: var(--cr-icon-color);
	opacity: 0.9;
}

.cr-rooms .cr-excerpt{
	margin: 0;
	font-size: 0.92rem;
	color: var(--cr-muted);
}

/* ------------------------------------------------------------ facilities */

.cr-rooms .cr-facilities-wrap{
	margin-top: 2px;
}

.cr-rooms .cr-facilities__heading{
	margin: 0 0 8px;
	font-family: var(--cr-title-font, inherit);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cr-muted);
}

.cr-rooms .cr-facilities{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-rooms .cr-facility{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8rem;
	color: var(--cr-ink);
	min-width: 0;
}

.cr-rooms .cr-facility__icon{
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

/* The icon itself: colour is fully editable, size follows --cr-icon-size. */
.cr-rooms .cr-ic {
	width: var(--cr-icon-size);
	height: var(--cr-icon-size);
	color: var(--cr-icon-color);
	display: block;
	flex: 0 0 auto;
}

/* icon style variants */
.cr-rooms .cr-icon-style--tinted .cr-facility__icon{
	width: calc(var(--cr-icon-size) + 14px);
	height: calc(var(--cr-icon-size) + 14px);
	border-radius: 8px;
	background: color-mix(in srgb, var(--cr-icon-color) 12%, transparent);
}

.cr-rooms .cr-icon-style--circle .cr-facility__icon{
	width: calc(var(--cr-icon-size) + 14px);
	height: calc(var(--cr-icon-size) + 14px);
	border-radius: 999px;
	background: color-mix(in srgb, var(--cr-icon-color) 12%, transparent);
}

/* facility list variants */
.cr-rooms .cr-fac-style--chips .cr-facilities{
	gap: 8px;
}

.cr-rooms .cr-fac-style--chips .cr-facility{
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cr-icon-color) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--cr-icon-color) 22%, transparent);
	font-size: 0.76rem;
}

.cr-rooms .cr-fac-style--list .cr-facilities{
	flex-direction: column;
	gap: 7px;
}

.cr-rooms .cr-fac-style--list .cr-facility__label{
	font-weight: 500;
}

.cr-rooms .cr-fac-style--list .cr-facility::after{
	content: "";
	margin-left: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--cr-icon-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
	background-size: 11px 11px;
	background-position: center;
	background-repeat: no-repeat;
	flex: 0 0 auto;
}

.cr-rooms .cr-fac-style--list .cr-facility{
	width: 100%;
}

/* ---------------------------------------------------------------- actions */

.cr-rooms .cr-actions{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--cr-ink) 10%, transparent);
}

.cr-rooms .cr-more{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cr-primary);
	text-decoration: none;
	white-space: nowrap;
}

.cr-rooms .cr-more .cr-ic--arrow{
	width: 14px;
	height: 14px;
	color: var(--cr-primary);
	transition: transform 0.25s ease;
}

.cr-rooms .cr-more:hover .cr-ic--arrow, .cr-rooms .cr-more:focus-visible .cr-ic--arrow{
	transform: translateX(3px);
}

.cr-rooms .cr-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--cr-btn-bg);
	color: var(--cr-btn-text);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--cr-btn-bg) 90%, transparent);
}

.cr-rooms .cr-btn:hover, .cr-rooms .cr-btn:focus-visible{
	background: var(--cr-btn-bg-hover);
	color: var(--cr-btn-text-hover);
	transform: translateY(-1px);
}

.cr-rooms .cr-btn:focus-visible, .cr-rooms .cr-more:focus-visible, .cr-rooms .cr-title__link:focus-visible{
	outline: 2px solid var(--cr-primary);
	outline-offset: 3px;
}

.cr-rooms .cr-btn--disabled{
	background: color-mix(in srgb, var(--cr-ink) 22%, #fff);
	color: color-mix(in srgb, var(--cr-ink) 55%, #fff);
	box-shadow: none;
	cursor: not-allowed;
}

.cr-rooms .cr-empty{
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--cr-card-border);
	border-radius: var(--cr-radius);
	color: var(--cr-muted);
	text-align: center;
}

/* ------------------------------------------------------------------ modal */

/* The popup is its own scroll container. The element that scrolls is the same
   element that is pinned to the viewport, so a popup taller than the screen
   always scrolls - there is no max-height arithmetic to get wrong, and no
   nested scroller to fight. Centring is done with `margin: auto` on the box
   (the safe pattern: when the box is taller than the screen it starts at the
   top instead of hiding content above the fold). */
.cr-rooms .cr-modal{
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 24px;
}

.cr-rooms .cr-modal.is-open{
	display: grid;
}

/* Fixed, not absolute: an absolutely positioned child of a scroll container
   scrolls away with the content, which would leave the page showing through. */
.cr-rooms .cr-modal__overlay{
	position: fixed;
	inset: 0;
	background: rgba(10, 24, 19, 0.62);
	backdrop-filter: blur(3px);
	animation: cr-fade 0.22s ease both;
}

.cr-rooms .cr-modal__dialog{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	width: min(980px, 100%);
	margin: auto;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 40px 90px -30px rgba(6, 20, 15, 0.6);
	animation: cr-pop 0.28s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes cr-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cr-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

.cr-rooms .cr-modal__close{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--cr-ink);
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(10, 24, 19, 0.7);
	transition: background 0.2s ease, transform 0.2s ease;
}

.cr-rooms .cr-modal__close:hover{
	background: #fff;
	transform: rotate(90deg);
}

.cr-rooms .cr-modal__close svg{
	width: 18px;
	height: 18px;
}

/* left column - the room image */
.cr-rooms .cr-modal__media{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--cr-image-min, 200px);
	min-height: max(100%, var(--cr-image-min, 200px));
	background: #eef1ee;
	overflow: hidden;
}

.cr-rooms .cr-modal__img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-rooms .cr-modal__media-info{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	margin-top: auto;
	color: #fff;
	background: linear-gradient(to top, rgba(8, 22, 17, 0.86) 6%, rgba(8, 22, 17, 0.45) 52%, rgba(8, 22, 17, 0) 100%);
}

.cr-rooms .cr-modal__chips{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-rooms .cr-chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.76rem;
}

.cr-rooms .cr-chip .cr-ic--chip{
	width: 14px;
	height: 14px;
	color: #fff;
}

.cr-rooms .cr-modal__price{
	margin: 0;
	font-size: 0.85rem;
}

.cr-rooms .cr-modal__price-amount{
	font-size: calc(var(--cr-price-size) * 1.25);
	font-weight: 700;
	color: var(--cr-price-color);
}

.cr-rooms .cr-modal__price-cur{
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-price-color);
	opacity: 0.9;
}

.cr-rooms .cr-modal__price-suffix{
	opacity: 0.85;
}

/* Long description written with the WordPress visual editor. */
.cr-rooms .cr-modal__media-info{
	max-height: 100%;
	overflow-y: auto;
}

.cr-rooms .cr-modal__desc{
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.cr-rooms .cr-modal__desc-title{
	margin: 0 0 6px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.cr-rooms .cr-modal__desc p{
	margin: 0 0 8px;
}

.cr-rooms .cr-modal__desc ul, .cr-rooms .cr-modal__desc ol{
	margin: 0 0 8px;
	padding-left: 18px;
}

.cr-rooms .cr-modal__desc :last-child{
	margin-bottom: 0;
}

.cr-rooms .cr-modal__facilities .cr-facilities{
	gap: 6px 12px;
	max-height: 96px;
	overflow: hidden;
}

.cr-rooms .cr-modal__media .cr-facility, .cr-rooms .cr-modal__media .cr-facilities__heading{
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.75rem;
}

.cr-rooms .cr-modal__media .cr-facility .cr-ic{
	color: #fff;
	width: 15px;
	height: 15px;
}

/* right column - the booking form */
.cr-rooms .cr-modal__formcol{
	overflow-y: auto;
	padding: 28px 30px 30px;
}

.cr-rooms .cr-modal__title{
	margin: 0 0 4px;
	font-family: var(--cr-title-font, inherit);
	font-size: calc(var(--cr-title-size) * 1.12);
	line-height: 1.25;
	font-weight: var(--cr-title-weight);
	text-transform: var(--cr-title-transform);
	color: var(--cr-ink);
}

.cr-rooms .cr-modal__subtitle{
	margin: 0 0 18px;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-muted);
}

/* ------------------------------------------------------------------- form */

.cr-rooms .cr-form__grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Cost per night, spelled out above the booking fields. */
.cr-rooms .cr-form__rate{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--cr-price-color) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--cr-price-color) 22%, transparent);
	font-size: 0.84rem;
	color: var(--cr-ink);
}

.cr-rooms .cr-form__rate-label{
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-muted);
}

.cr-rooms .cr-form__rate-amount{
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cr-price-color);
}

.cr-rooms .cr-form__rate-cur{
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cr-price-color);
}

.cr-rooms .cr-form__rate-suffix{
	font-size: 0.78rem;
	color: var(--cr-muted);
}

/* Running total: nights x cost per night, filled in by the script. */
.cr-rooms .cr-form__total{
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--cr-primary) 8%, #fff);
	font-size: 0.85rem;
	color: var(--cr-ink);
}

.cr-rooms .cr-form__total[hidden]{
	display: none;
}

.cr-rooms .cr-form__total strong{
	font-size: 1rem;
	color: var(--cr-price-color);
}

.cr-rooms .cr-field{
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.cr-rooms .cr-field--full{
	grid-column: 1 / -1;
}

.cr-rooms .cr-field label{
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--cr-muted);
}

.cr-rooms .cr-req{
	color: #c0392b;
}

.cr-rooms .cr-field input[type="text"], .cr-rooms .cr-field input[type="email"], .cr-rooms .cr-field input[type="tel"], .cr-rooms .cr-field input[type="date"], .cr-rooms .cr-field select, .cr-rooms .cr-field textarea{
	width: 100%;
	padding: 10px 12px;
	border: 1px solid color-mix(in srgb, var(--cr-ink) 16%, #fff);
	border-radius: 10px;
	background: #fff;
	color: var(--cr-ink);
	font: inherit;
	font-size: 0.88rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cr-rooms .cr-field input:focus, .cr-rooms .cr-field select:focus, .cr-rooms .cr-field textarea:focus{
	outline: none;
	border-color: var(--cr-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 18%, transparent);
}

.cr-rooms .cr-field input.cr-invalid, .cr-rooms .cr-field select.cr-invalid, .cr-rooms .cr-field textarea.cr-invalid{
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.cr-rooms .cr-field--check{
	margin-top: 12px;
}

.cr-rooms .cr-field--check label{
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--cr-muted);
}

.cr-rooms .cr-field--check input{
	margin-top: 3px;
	accent-color: var(--cr-primary);
}

.cr-rooms .cr-btn--submit{
	width: 100%;
	margin-top: 16px;
	padding: 13px 20px;
	border-radius: 12px;
	font-size: 0.92rem;
}

.cr-rooms .cr-form__status{
	margin-top: 12px;
	font-size: 0.85rem;
}

.cr-rooms .cr-form__status.cr-success, .cr-rooms .cr-form__status.cr-error{
	padding: 12px 14px;
	border-radius: 12px;
}

.cr-rooms .cr-form__status.cr-success{
	background: color-mix(in srgb, var(--cr-primary) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--cr-primary) 30%, transparent);
	color: color-mix(in srgb, var(--cr-primary) 80%, #000);
}

.cr-rooms .cr-form__status.cr-error{
	background: #fdf0ee;
	border: 1px solid #f1c6c0;
	color: #9c2a1d;
}

.cr-rooms .cr-form.is-sent .cr-form__grid, .cr-rooms .cr-form.is-sent .cr-btn--submit, .cr-rooms .cr-form.is-sent .cr-field--check{
	display: none;
}

.cr-rooms .cr-form__aside{
	margin: 14px 0 0;
	font-size: 0.76rem;
	color: var(--cr-muted);
}

.cr-rooms .cr-form [disabled]{
	opacity: 0.6;
	cursor: progress;
}

/* Honeypot - hidden from humans, still visible to naive bots. */
.cr-rooms .cr-hp{
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cr-rooms .cr-note{
	margin: 0;
	padding: 14px;
	border-radius: 12px;
	background: #f6f4ef;
	font-size: 0.85rem;
	color: var(--cr-muted);
}

.cr-rooms .cr-embed{
	position: relative;
	width: 100%;
	height: 520px;
	border-radius: 14px;
	overflow: hidden;
	background: #f6f4ef;
}

.cr-rooms .cr-embed iframe{
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* The popup scrolls, but the scrollbar itself is never shown: the panes keep
   their overflow so wheel, trackpad, touch and keyboard scrolling all still
   work, while the bar is taken away in every engine
   (scrollbar-width: Firefox, -ms-overflow-style: legacy Edge, ::-webkit-scrollbar
   for Blink and Safari). overscroll-behavior keeps the page behind from moving
   when a pane reaches its end. */
.cr-rooms .cr-modal, .cr-rooms .cr-modal__dialog, .cr-rooms .cr-modal__formcol, .cr-rooms .cr-modal__media-info{
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior: contain;
}

.cr-rooms .cr-modal::-webkit-scrollbar, .cr-rooms .cr-modal__dialog::-webkit-scrollbar, .cr-rooms .cr-modal__formcol::-webkit-scrollbar, .cr-rooms .cr-modal__media-info::-webkit-scrollbar{
	width: 0;
	height: 0;
	display: none;
	background: transparent;
}

/* Body scroll lock while a popup is open. overflow:hidden alone is ignored by
   iOS Safari, so the body is pinned instead and the script puts it back with
   the same offset it had. */
html.cr-modal-open, body.cr-modal-open{
	overflow: hidden !important;
}

body.cr-modal-open {
	position: fixed !important;
	left: 0;
	right: 0;
	width: 100%;
	overscroll-behavior: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.cr-rooms .cr-modal{
		padding: 12px;
	}

	.cr-rooms .cr-modal__dialog{
		grid-template-columns: minmax(0, 1fr);
		/* The popup itself scrolls, so nothing is clamped here. */
	}

	.cr-rooms .cr-modal__media{
		min-height: var(--cr-image-min, 200px);
	}

	.cr-rooms .cr-modal__img{
		position: relative;
		height: var(--cr-image-min, 200px);
	}

	.cr-rooms .cr-modal__media-info{
		position: absolute;
		inset: auto 0 0 0;
	}

	.cr-rooms .cr-modal__formcol{
		padding: 22px 20px 24px;
	}
}

@media (max-width: 520px) {
	.cr-rooms .cr-form__grid{
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-rooms .cr-actions{
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-rooms .cr-card, .cr-rooms .cr-media__img, .cr-rooms .cr-btn, .cr-rooms .cr-more .cr-ic, .cr-rooms .cr-modal__dialog, .cr-rooms .cr-modal__overlay{
		transition: none !important;
		animation: none !important;
	}

	.cr-rooms .cr-card:hover{
		transform: none;
	}

	.cr-rooms .cr-card:hover .cr-media__img{
		transform: none;
	}
}

/* =========================================================================
   Category filter bar + category chip (scoped like everything else)
   ========================================================================= */

.cr-rooms .cr-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.cr-rooms .cr-filter{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--cr-card-border);
	border-radius: 999px;
	background: var(--cr-card-bg);
	color: var(--cr-ink);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cr-rooms .cr-filter:hover{
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--cr-primary) 45%, transparent);
}

.cr-rooms .cr-filter.is-active{
	background: var(--cr-primary);
	border-color: var(--cr-primary);
	color: #fff;
}

.cr-rooms .cr-filter__count{
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cr-ink) 8%, transparent);
	font-size: 0.72rem;
	font-weight: 700;
}

.cr-rooms .cr-filter.is-active .cr-filter__count{
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.cr-rooms .cr-card--filtered{
	display: none !important;
}

.cr-rooms .cr-cat{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	max-width: 70%;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	color: var(--cr-ink);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cr-rooms .cr-cat-list__title{
	margin: 0 0 8px;
	font-size: 1rem;
	color: var(--cr-title-color);
}

.cr-rooms .cr-cat-list--list ul{
	margin: 0;
	padding-left: 18px;
}

.cr-rooms .cr-cat-chip, .cr-rooms .cr-cat-link{
	color: var(--cr-primary);
	text-decoration: none;
}

.cr-rooms .cr-cat-chip{
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid color-mix(in srgb, var(--cr-primary) 30%, transparent);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.cr-rooms .cr-cat-list__sep{
	color: var(--cr-muted);
}

/* =========================================================================
   Forced styling ("Force plugin styling" is ON - the default)

   The heading/title and the buttons belong to the plugin: these rules carry
   !important so a theme's `h3 { }`, `.entry-content h3 { }`, `a { }` or
   `button { }` rules cannot change them. The `html body` prefix adds cascade
   weight against deeper theme selectors while staying scoped to the grid.
   Turn the setting off (Settings -> Typography) to hand control to the theme.
   ========================================================================= */

/* --- headings ------------------------------------------------------------
   A theme's (or a page builder's) heading typography arrives as `h1 { }`,
   `.entry-content h3 { }` or `.site-title h2 { }` - sometimes with !important
   of its own - and it hits every heading in the plugin: the card title, the
   grid heading, the popup title, the facility label and the description
   heading. These rules re-assert the plugin's own values for every property
   such a rule can set, including the font itself.

   `.cr-force.cr-force` repeats a class on purpose: repeating a class raises
   specificity without changing which elements match, which is what makes the
   plugin's values win over a deeper theme selector that also says !important.
   Turn "Force plugin styling" off to hand the headings back to the theme. */

html body .cr-rooms.cr-force.cr-force .cr-title, html body .cr-rooms.cr-force.cr-force .cr-heading, html body .cr-rooms.cr-force.cr-force .cr-modal__title, html body .cr-rooms.cr-force.cr-force .cr-cat-list__title, html body .cr-rooms.cr-force.cr-force .cr-facilities__heading, html body .cr-rooms.cr-force.cr-force .cr-modal__desc-title{
	font-family: var(--cr-title-font, inherit) !important;
	font-style: normal !important;
	font-variant: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

html body .cr-rooms.cr-force.cr-force .cr-title{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: var(--cr-title-size) !important;
	line-height: var(--cr-title-lh) !important;
	font-weight: var(--cr-title-weight) !important;
	text-transform: var(--cr-title-transform) !important;
	letter-spacing: -0.01em !important;
	color: var(--cr-title-color) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-title__link{
	color: var(--cr-title-color) !important;
	text-decoration: none !important;
}

html body .cr-rooms.cr-force.cr-force .cr-title__link:hover, html body .cr-rooms.cr-force.cr-force .cr-title__link:focus-visible{
	color: var(--cr-primary) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-heading{
	margin-top: 0 !important;
	margin-bottom: 18px !important;
	font-size: calc(var(--cr-title-size) * 1.35) !important;
	line-height: 1.25 !important;
	font-weight: var(--cr-title-weight) !important;
	text-transform: var(--cr-title-transform) !important;
	color: var(--cr-title-color) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-modal__title{
	margin-top: 0 !important;
	margin-bottom: 4px !important;
	font-size: calc(var(--cr-title-size) * 1.12) !important;
	line-height: 1.25 !important;
	font-weight: var(--cr-title-weight) !important;
	text-transform: var(--cr-title-transform) !important;
	color: var(--cr-ink) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-cat-list__title{
	margin-top: 0 !important;
	margin-bottom: 8px !important;
	font-size: 1rem !important;
	line-height: 1.3 !important;
	font-weight: var(--cr-title-weight) !important;
	color: var(--cr-title-color) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-facilities__heading{
	margin-top: 0 !important;
	margin-bottom: 8px !important;
	font-size: 0.72rem !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--cr-muted) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-modal__desc-title{
	margin-top: 0 !important;
	margin-bottom: 6px !important;
	font-size: 0.78rem !important;
	line-height: 1.4 !important;
	font-weight: var(--cr-title-weight) !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #fff !important;
}

/* Belt and braces: no heading anywhere inside the grid takes the page's
   heading font, even one a snippet or a custom facility template adds. Only
   the properties no plugin rule relies on are forced here. */
html body .cr-rooms.cr-force.cr-force h1, html body .cr-rooms.cr-force.cr-force h2, html body .cr-rooms.cr-force.cr-force h3, html body .cr-rooms.cr-force.cr-force h4, html body .cr-rooms.cr-force.cr-force h5, html body .cr-rooms.cr-force.cr-force h6{
	font-family: var(--cr-title-font, inherit) !important;
	font-style: normal !important;
	text-shadow: none !important;
}

html body .cr-rooms.cr-force .cr-btn--book, html body .cr-rooms.cr-force .cr-btn--submit{
	background-color: var(--cr-btn-bg) !important;
	color: var(--cr-btn-text) !important;
	border: 0 !important;
	text-decoration: none !important;
	box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--cr-btn-bg) 90%, transparent) !important;
}

html body .cr-rooms.cr-force .cr-btn--book:hover, html body .cr-rooms.cr-force .cr-btn--book:focus-visible, html body .cr-rooms.cr-force .cr-btn--submit:hover, html body .cr-rooms.cr-force .cr-btn--submit:focus-visible{
	background-color: var(--cr-btn-bg-hover) !important;
	color: var(--cr-btn-text-hover) !important;
}

html body .cr-rooms.cr-force .cr-btn--disabled{
	background-color: color-mix(in srgb, var(--cr-ink) 22%, #fff) !important;
	color: color-mix(in srgb, var(--cr-ink) 55%, #fff) !important;
}

/* The cost per night is plugin content too, so the theme cannot recolour it. */
html body .cr-rooms.cr-force .cr-price__amount, html body .cr-rooms.cr-force .cr-price__cur, html body .cr-rooms.cr-force .cr-modal__price-amount, html body .cr-rooms.cr-force .cr-modal__price-cur, html body .cr-rooms.cr-force .cr-form__rate-amount, html body .cr-rooms.cr-force .cr-form__rate-cur, html body .cr-rooms.cr-force .cr-form__total strong{
	color: var(--cr-price-color) !important;
}

html body .cr-rooms.cr-force .cr-price__amount{
	font-size: var(--cr-price-size) !important;
}

/* Corner radius is a plugin design control, so a theme cannot square it off. */
html body .cr-rooms.cr-force .cr-card, html body .cr-rooms.cr-force .cr-media, html body .cr-rooms.cr-force .cr-modal__dialog, html body .cr-rooms.cr-force .cr-modal__overlay{
	border-radius: var(--cr-radius) !important;
}