/* ==========================================================================
   Camp Reservation - front-end stylesheet
   Version 2.0.0

   Everything in this file is scoped under the plugin's own wrapper
   (.cr-rooms for the grid, .cr-modal for the popup, which also carries
   .cr-rooms). No rule targets a bare element, a theme class or an admin
   screen, so the theme can never be restyled by this file and this file can
   never be restyled by the theme.

   The wrapper carries the settings as CSS custom properties:
     --cr-columns       cards per row (desktop)
     --cr-columns-md    cards per row (<= 1024px)
     --cr-columns-sm    cards per row (<= 640px)
     --cr-gap           gap between cards
     --cr-radius        corner radius
     --cr-image-h       height of the room photo in px (0 = follow the ratio)
     --cr-ratio         photo aspect ratio
     --cr-icon-size     facility icon size
     --cr-primary       primary colour (scrollbar, links, focus ring)
     --cr-card-bg       card background
   ========================================================================== */

/* ------------------------------------------------------------------ base */

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

.cr-rooms {
	--cr-font: inherit;

	/* The plugin's own heading font. Room titles are plugin content, so they do
	   not inherit the theme's font unless the setting is set to "inherit" on
	   purpose. The PHP prints this custom property on the wrapper; the value
	   here is the same default, so the headings are still right if that style
	   attribute is ever stripped. */
	--cr-title-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var(--cr-font);
	color: var(--cr-text-color, #5C6B65);
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

/* The grid. Four cards per row by default, each one exactly 1/4 of the row,
   and never wider than its own share. */
.cr-rooms .cr-grid {
	display: grid;
	grid-template-columns: repeat(var(--cr-columns, 4), minmax(0, 1fr));
	gap: var(--cr-gap, 24px);
	align-items: stretch;
	width: 100%;
}

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

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

/* Optional heading above the cards. */
.cr-rooms .cr-heading {
	margin: 0 0 18px;
	font-family: var(--cr-title-font, inherit);
	font-size: 1.5em;
	line-height: 1.25;
	color: var(--cr-title-color, #16241F);
}

.cr-rooms .cr-heading:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------ category shortcode
   [camp_rooms_categories]: the room categories as links, chips or a plain
   list. Same wrapper class as the grid, so the plugin's variables and the
   scoping rule cover it, and nothing here can reach the rest of the page.
   ------------------------------------------------------------------------- */

.cr-rooms--cats{
	padding: 0;
}

.cr-rooms .cr-cat-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-rooms .cr-cat-list__title{
	flex: 0 0 100%;
	margin: 0 0 2px;
	font-family: var(--cr-title-font, inherit);
	font-size: calc(var(--cr-title-size, 20px) * .95);
	font-weight: var(--cr-title-weight, 700);
	line-height: 1.25;
	color: var(--cr-title-color, #16241F);
}

.cr-rooms .cr-cat-list__sep{
	color: var(--cr-text-color, #5C6B65);
	opacity: .6;
}

/* A link: the category name in the plugin primary colour. */
.cr-rooms .cr-cat-link{
	color: var(--cr-primary, #1E6B54);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}

.cr-rooms .cr-cat-link:hover, .cr-rooms .cr-cat-link:focus{
	color: var(--cr-primary, #1E6B54);
	border-bottom-color: currentColor;
	text-decoration: none;
}

/* A chip: a small pill per category. Hover fills it with the button hover
   colour, so the one colour setting covers the whole plugin. */
.cr-rooms .cr-cat-chip{
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 13px;
	border: 1px solid var(--cr-card-border, #E7E2D6);
	border-radius: 999px;
	background: var(--cr-card-bg, #FFFFFF);
	color: var(--cr-title-color, #16241F);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cr-rooms .cr-cat-chip:hover, .cr-rooms .cr-cat-chip:focus{
	background: var(--cr-btn-hover-bg, #17523F);
	border-color: var(--cr-btn-hover-bg, #17523F);
	color: var(--cr-btn-text, #FFFFFF);
	text-decoration: none;
}

/* A plain list: real bullets, in the plugin's text colour. */
.cr-rooms .cr-cat-list--list ul{
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
}

.cr-rooms .cr-cat-list--list ul li{
	margin: 0 0 4px;
}

.cr-rooms .cr-cat-list--list ul li:last-child{
	margin-bottom: 0;
}

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

.cr-rooms .cr-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--cr-card-bg, #FFFFFF);
	border: 1px solid var(--cr-card-border, #E7E2D6);
	border-radius: var(--cr-radius, 16px);
	transition: box-shadow .18s ease, transform .18s ease;
}

.cr-rooms--style-elevated .cr-card {
	box-shadow: 0 1px 2px rgba(16, 32, 28, .06), 0 12px 28px -18px rgba(16, 32, 28, .45);
}

.cr-rooms--style-elevated .cr-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(16, 32, 28, .08), 0 20px 36px -20px rgba(16, 32, 28, .5);
}

.cr-rooms--style-flat .cr-card {
	border-color: transparent;
	box-shadow: none;
}

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

/* --------------------------------------------------------------- the photo */

.cr-rooms .cr-card__media, .cr-modal .cr-modal__media{
	position: relative;
	display: block;
	overflow: hidden;
	background: rgba(30, 107, 84, .08);
	/* The photo box has a height of its own: 200px by default, whatever the
	   width of the card. A theme cannot collapse it, and neither can a photo
	   that is slow to arrive - the box is already the right size. */
	height: var(--cr-image-h, 200px);
	flex: none;
}

/* Image height set to 0: the photo follows the aspect ratio setting instead -
   that is what "let it keep its own shape" means. */
.cr-rooms--img-auto .cr-card__media{
	height: auto;
	aspect-ratio: var(--cr-ratio, 4/3);
}

.cr-rooms .cr-card__img, .cr-modal .cr-modal__img{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

/* On a card the photo is taken out of the flow, so it can never add height to
   the box that already has one. */
.cr-rooms .cr-card__img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.cr-rooms--img-auto .cr-card__img{
	position: static;
	height: auto;
}

.cr-rooms .cr-card__img--empty, .cr-modal .cr-modal__img--empty{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: var(--cr-image-h, 200px);
	color: var(--cr-icon-color, #1E6B54);
	opacity: .45;
}

.cr-rooms .cr-ic--placeholder {
	width: 40px;
	height: 40px;
}

.cr-rooms .cr-card__media {
	border-radius: var(--cr-radius, 16px) var(--cr-radius, 16px) 0 0;
}

/* ------------------------------------------------- image bottom shapes
   Five choices for the bottom edge of the room photo, plus the fallback
   (follow the card corners):
     .cr-shape--fallback  follows the card radius (the default)
     .cr-shape--straight  square corners
     .cr-shape--concave   the edge curves upwards into the photo
     .cr-shape--convex    the edge bulges downwards over the card body
     .cr-shape--wavy      a soft wave
   Everything here also applies inside the popup, which reuses the same
   classes. */

.cr-rooms .cr-shape--straight, .cr-modal .cr-shape--straight{
	border-radius: 0;
}

.cr-rooms .cr-shape--concave, .cr-modal .cr-shape--concave{
	border-radius: 0 0 50% 50% / 0 0 12% 12%;
}

.cr-rooms .cr-shape--convex, .cr-modal .cr-shape--convex{
	border-radius: 0 0 50% 50% / 0 0 0 0;
}

.cr-rooms .cr-shape--convex::after, .cr-modal .cr-shape--convex::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 14%;
	background: inherit;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	pointer-events: none;
}

.cr-rooms .cr-shape--wavy, .cr-modal .cr-shape--wavy{
	-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 0H100V88C83 97 66 97 50 88C34 79 17 79 0 88Z' fill='%23000'/%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 0H100V88C83 97 66 97 50 88C34 79 17 79 0 88Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	border-radius: var(--cr-radius, 16px) var(--cr-radius, 16px) 0 0;
}

/* Sold out flag over the photo. */
.cr-rooms .cr-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(9, 18, 15, .78);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- content */

.cr-rooms .cr-card__body {
	position: relative; /* the price chip is anchored to the top of this box */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;
	padding: 16px 16px 18px;
}

/* A card with a price gives its text the room to clear the hanging chip, so the
   price covers neither the room's name nor its description. In the single layout
   the price is not a chip over the photo, so no extra room is needed. */
.cr-rooms .cr-grid:not(.cr-grid--single) .cr-card__body--priced {
	padding-top: 27px;
}

/* --------------------------------------------- one room on its own: 40 / 60
   [camp_room] prints one card as a two-column block: the photo on the left
   (40% of the block) and everything about the room on the right (60%): title,
   price, facilities and the buttons, in that order. The photo is cropped to
   fill its column, and the bottom-edge shapes do not apply - there is no
   bottom edge any more, the photo ends at a vertical line.
   ------------------------------------------------------------------------- */

/* The block is the full width of its container - the shortcode prints one card,
   not a row of them, so there is no column share to take and nothing to leave
   empty at the sides. */
.cr-rooms.cr-rooms--single{
	width: 100%;
	max-width: 100%;
}

.cr-rooms .cr-grid--single{
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.cr-rooms .cr-card--single{
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
}

.cr-rooms .cr-card--single .cr-card__media{
	height: 100%;
	min-height: var(--cr-image-h, 200px);
	border-radius: var(--cr-radius, 16px) 0 0 var(--cr-radius, 16px);
}

/* The photo only ends at a vertical edge here, so none of the five bottom-edge
   shapes apply: the left column keeps the card's corners. */
.cr-rooms .cr-card--single .cr-shape--straight,
.cr-rooms .cr-card--single .cr-shape--concave,
.cr-rooms .cr-card--single .cr-shape--convex,
.cr-rooms .cr-card--single .cr-shape--wavy,
.cr-rooms .cr-card--single .cr-shape--fallback{
	border-radius: var(--cr-radius, 16px) 0 0 var(--cr-radius, 16px);
}

.cr-rooms .cr-card--single .cr-card__body{
	justify-content: center;
	gap: 12px;
	padding: 24px 26px;
}

/* The price is content in this column, not a chip over the photo: same colours
   and the same 5px corner, but it sits in the flow under the title. */
.cr-rooms .cr-card--single .cr-card__rate{
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 8px 12px;
	border-radius: 5px;
	background: var(--cr-btn-bg, #1E6B54);
	color: var(--cr-btn-text, #FFFFFF);
	align-self: flex-start;
}

.cr-rooms .cr-card--single .cr-card__rate .cr-price__amount{
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--cr-btn-text, #FFFFFF);
}

.cr-rooms .cr-card--single .cr-card__rate .cr-price__code{
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--cr-btn-text, #FFFFFF);
	opacity: .9;
}

.cr-rooms .cr-card--single .cr-card__rate .cr-price__suffix{
	font-size: 12px;
	color: var(--cr-btn-text, #FFFFFF);
	opacity: .85;
}

/* The buttons start at the left edge of the content column, in line with the
   title, the price plate and the facilities above them - not pushed to the
   right corner the way a grid card's footer is. */
.cr-rooms .cr-card--single .cr-card__foot{
	margin-top: 4px;
	justify-content: flex-start;
}

.cr-rooms .cr-card--single .cr-card__actions{
	margin-left: 0;
	margin-right: auto;
}

/* A phone has no room for two columns: the photo goes on top, the content
   below it, still in the same order. */
@media (max-width: 760px){
	.cr-rooms .cr-card--single{
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-rooms .cr-card--single .cr-card__media{
		height: var(--cr-image-h, 200px);
		min-height: 0;
		border-radius: var(--cr-radius, 16px) var(--cr-radius, 16px) 0 0;
	}

	.cr-rooms .cr-card--single .cr-shape--straight,
	.cr-rooms .cr-card--single .cr-shape--concave,
	.cr-rooms .cr-card--single .cr-shape--convex,
	.cr-rooms .cr-card--single .cr-shape--wavy,
	.cr-rooms .cr-card--single .cr-shape--fallback{
		border-radius: var(--cr-radius, 16px) var(--cr-radius, 16px) 0 0;
	}

	.cr-rooms .cr-card--single .cr-card__body{
		padding: 18px 18px 20px;
	}
}

.cr-rooms .cr-card__title {
	position: relative;
	/* Under the price chip on purpose: the chip is z-index 5, so it stays on
	   top of the title rather than being covered by it. */
	z-index: 1;
	margin: 0;
	text-align: left;
	font-family: var(--cr-title-font, inherit);
	font-size: var(--cr-title-size, 20px);
	font-weight: var(--cr-title-weight, 700);
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cr-title-color, #16241F);
}

.cr-rooms .cr-card__title a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.cr-rooms .cr-card__title a:hover, .cr-rooms .cr-card__title a:focus{
	color: var(--cr-primary, #1E6B54);
	text-decoration: none;
}

.cr-rooms .cr-card__cats {
	margin: 0;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cr-primary, #1E6B54);
}

.cr-rooms .cr-card__text {
	margin: 0;
	font-size: 14.5px;
	color: var(--cr-text-color, #5C6B65);
}

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

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

.cr-rooms .cr-fac, .cr-modal .cr-fac{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--cr-text-color, #5C6B65);
}

.cr-rooms .cr-fac__icon, .cr-modal .cr-fac__icon{
	flex: none;
	width: var(--cr-icon-size, 20px);
	height: var(--cr-icon-size, 20px);
	color: var(--cr-icon-color, #1E6B54);
}

.cr-rooms .cr-fac__label, .cr-modal .cr-fac__label{
	min-width: 0;
}

/* pills */
.cr-rooms .cr-facilities--chips .cr-fac, .cr-modal .cr-facilities--chips .cr-fac{
	padding: 3px 10px 3px 8px;
	border: 1px solid var(--cr-card-border, #E7E2D6);
	border-radius: 999px;
	background: rgba(30, 107, 84, .05);
}

/* plain list */
.cr-rooms .cr-facilities--list .cr-fac__icon, .cr-modal .cr-facilities--list .cr-fac__icon{
	display: none;
}

.cr-rooms .cr-facilities--list .cr-fac, .cr-modal .cr-facilities--list .cr-fac{
	font-size: 13.5px;
}

/* a facility that has no icon of its own (typed on the room itself) */
.cr-rooms .cr-fac--extra, .cr-modal .cr-fac--extra{
	font-style: italic;
	opacity: .9;
}

/* -------------------------------------------------------- price on the photo
   The price is a chip over the bottom right corner of the room photo: its top
   half lies on the picture, its bottom half hangs over the card body, so it is
   on top of the photo and on top of the title at the same time.

   It lives in the card body, not in the photo box, and that is the whole point:
   the photo is clipped to its shape (overflow: hidden, so the five bottom-edge
   shapes work), so a chip hanging past the photo's bottom edge from inside it
   would be sliced in half - which is exactly what "it looks hidden" was. From
   here nothing can clip it: the photo's clip does not reach it, and the card's
   own rounded clip is far away.

   It is anchored back up to the photo: the body starts where the photo ends, so
   top: -19px puts half of the chip's own height above that line, over the
   picture. z-index 5 keeps it above the title, which is deliberately z-index 1
   below it - a price must never end up behind the room's name or the photo.
   ------------------------------------------------------------------------- */

.cr-rooms .cr-grid:not(.cr-grid--single) .cr-card__body .cr-card__rate{
	position: absolute;
	right: 12px;
	top: -19px;
	z-index: 5;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	max-width: calc(100% - 24px);
	padding: 8px 12px;
	border-radius: 5px;
	background: var(--cr-btn-bg, #1E6B54);
	color: var(--cr-btn-text, #FFFFFF);
	box-shadow: 0 6px 16px rgba(9, 18, 15, .22);
}

.cr-rooms .cr-grid:not(.cr-grid--single) .cr-card__body .cr-card__rate .cr-price__amount{
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--cr-btn-text, #FFFFFF);
}

.cr-rooms .cr-grid:not(.cr-grid--single) .cr-card__body .cr-card__rate .cr-price__code{
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--cr-btn-text, #FFFFFF);
	opacity: .9;
}

.cr-rooms .cr-grid:not(.cr-grid--single) .cr-card__body .cr-card__rate .cr-price__suffix{
	font-size: 12px;
	color: var(--cr-btn-text, #FFFFFF);
	opacity: .85;
}

/* ------------------------------------------------------------ price + buttons */

.cr-rooms .cr-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--cr-card-border, #E7E2D6);
}

.cr-rooms .cr-card__rate, .cr-modal .cr-modal__rate, .cr-modal .cr-form__rate{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0;
}

.cr-rooms .cr-price, .cr-modal .cr-price{
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.cr-rooms .cr-price__amount, .cr-modal .cr-price__amount{
	font-family: var(--cr-title-font, inherit);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--cr-title-color, #16241F);
}

.cr-rooms .cr-price__code, .cr-modal .cr-price__code{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--cr-primary, #1E6B54);
}

.cr-rooms .cr-price__suffix, .cr-modal .cr-price__suffix{
	font-size: 12.5px;
	color: var(--cr-text-color, #5C6B65);
}

.cr-rooms .cr-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.cr-rooms .cr-btn, .cr-modal .cr-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: calc(var(--cr-radius, 16px) / 2);
	background: var(--cr-btn-bg, #1E6B54);
	color: var(--cr-btn-text, #FFFFFF);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--cr-title-font, inherit);
}

.cr-rooms .cr-btn--primary, .cr-modal .cr-btn--primary{
	background: var(--cr-btn-bg, #1E6B54);
	color: var(--cr-btn-text, #FFFFFF);
}

.cr-rooms .cr-btn--ghost, .cr-modal .cr-btn--ghost{
	background: transparent;
	border-color: var(--cr-card-border, #E7E2D6);
	color: var(--cr-title-color, #16241F);
}

.cr-rooms .cr-btn--wide, .cr-modal .cr-btn--wide{
	width: 100%;
}

.cr-rooms .cr-btn--disabled, .cr-modal .cr-btn--disabled{
	background: var(--cr-card-border, #E7E2D6);
	color: var(--cr-text-color, #5C6B65);
	cursor: not-allowed;
}

/* Hover: the button changes to its own background colour, set under
   Settings -> Colours ("Button background on hover", --cr-btn-hover-bg), rather
   than being dimmed with a filter - a filter also dims the label, which is what
   made the old effect muddy. :focus shares the rule, so a keyboard user gets the
   same feedback, and a disabled button has no hover effect at all. */

.cr-rooms .cr-btn:hover:not(.cr-btn--disabled),
.cr-rooms .cr-btn:focus:not(.cr-btn--disabled),
.cr-modal .cr-btn:hover:not(.cr-btn--disabled),
.cr-modal .cr-btn:focus:not(.cr-btn--disabled){
	filter: none;
	background: var(--cr-btn-hover-bg, #17523F);
	color: var(--cr-btn-text, #FFFFFF);
	text-decoration: none;
}

/* A ghost button is transparent until the pointer arrives, then it fills with
   the same colour - the clearest "different background" on an outlined button.
   The label follows the button text colour so it stays readable on the fill. */
.cr-rooms .cr-btn--ghost:hover,
.cr-rooms .cr-btn--ghost:focus,
.cr-modal .cr-btn--ghost:hover,
.cr-modal .cr-btn--ghost:focus{
	filter: none;
	background: var(--cr-btn-hover-bg, #17523F);
	border-color: var(--cr-btn-hover-bg, #17523F);
	color: var(--cr-btn-text, #FFFFFF);
}

.cr-rooms .cr-btn:focus-visible, .cr-modal .cr-btn:focus-visible{
	outline: 3px solid var(--cr-primary, #1E6B54);
	outline-offset: 2px;
}

/* ==========================================================================
   The booking popup
   Photo on the left, booking form on the right.

   The first four rules below are the one place outside the forced block that
   carries !important, and for one reason: being a fixed overlay is what makes
   the popup a popup. A theme with its own `.modal`-style rules, an early
   enqueue order or a wrapper with a transform could otherwise drop the popup
   into the page flow at the bottom of the document, where it cannot be seen.
   Nothing here changes how it looks - only where it is.
   ========================================================================== */

html body .cr-modal{
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 100000 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

html body .cr-modal .cr-modal__dialog{
	position: relative !important;
	z-index: 1 !important;
}

html body .cr-modal .cr-modal__close,
html body .cr-modal .cr-modal__backdrop{
	position: absolute !important;
}

html body .cr-modal .cr-modal__backdrop{
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 0 !important;
}

/* The popup is never hidden by anything but its own attribute, and the page
   behind it never scrolls while it is open. */
.cr-modal[hidden]{
	display: none !important;
}

body.cr-modal-open{
	overflow: hidden !important;
}

/* ==========================================================================
   The booking popup
   Photo on the left, booking form on the right.

   The popup is printed by the plugin in the footer as a direct child of
   <body>. Nothing on the page can clip it, so it never needs a max-height:
   the popup itself is the scroll container and the dialog is free to grow to
   whatever the room needs.
   ========================================================================== */

.cr-modal{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 3vh 16px;
	font-family: inherit;
	color: var(--cr-text-color, #5C6B65);
	line-height: 1.55;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Room for the scrollbar, so the two columns never shift sideways. */
	scrollbar-gutter: stable;
}

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

.cr-modal__backdrop{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(9, 18, 15, .66);
}

.cr-modal__dialog{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	max-width: 1000px;
	/* Deliberately no max-height: the popup scrolls, the dialog stays whole. */
	margin: 0 auto;
	overflow: hidden;
	background: var(--cr-card-bg, #FFFFFF);
	border-radius: var(--cr-radius, 16px);
	box-shadow: 0 30px 60px -24px rgba(9, 18, 15, .55);
}

.cr-modal__close{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(9, 18, 15, .55);
	color: #FFFFFF;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cr-modal__close:hover, .cr-modal__close:focus{
	background: rgba(9, 18, 15, .8);
}

/* left column - the room photo */
.cr-modal .cr-modal__media{
	display: flex;
	flex-direction: column;
	/* The photo column is as tall as the booking column beside it (the dialog
	   is a grid, so auto height means "stretch"), and never shorter than the
	   image height setting. */
	height: auto;
	min-height: var(--cr-image-h, 200px);
	background: rgba(30, 107, 84, .08);
}

.cr-modal .cr-modal__img{
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: var(--cr-image-h, 200px);
	object-fit: cover;
}

.cr-modal .cr-modal__media .cr-card__img--empty, .cr-modal .cr-modal__img--empty{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	color: var(--cr-icon-color, #1E6B54);
	opacity: .45;
}

.cr-modal .cr-modal__rate{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 16px;
	background: linear-gradient(to top, rgba(9, 18, 15, .72), rgba(9, 18, 15, 0));
	color: #FFFFFF;
}

.cr-modal .cr-modal__rate .cr-price__amount{
	color: #FFFFFF;
}

.cr-modal .cr-modal__rate .cr-price__code, .cr-modal .cr-modal__rate .cr-price__suffix{
	color: rgba(255, 255, 255, .85);
}

/* right column - the booking form */
.cr-modal .cr-modal__panel{
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* The form column: 20px of breathing room on every side. The faint tint is
	   what makes the white fields below read as fields. */
	padding: 20px;
	min-width: 0;
	background: #F7F9F8;
}

.cr-modal .cr-modal__title{
	margin: 0;
	padding-right: 40px;
	font-family: var(--cr-title-font, inherit);
	font-size: 1.6em;
	line-height: 1.2;
	color: var(--cr-title-color, #16241F);
}

.cr-modal .cr-modal__desc{
	max-width: 60ch;
	font-size: 14.5px;
}

.cr-modal .cr-modal__desc p{
	margin: 0 0 10px;
}

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

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

.cr-modal .cr-form{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

/* Every row is a full-width grid inside the form. A two-up row is exactly two
   equal halves: the two fields together reach both edges of the form, never a
   ragged right-hand gap. */
.cr-modal .cr-form__row{
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cr-modal .cr-form__row--2,
.cr-modal .cr-form__row--dates,
.cr-modal .cr-form__row--pax{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A row that holds one field on its own - the request box - is a single
   full-width column. */
.cr-modal .cr-form__row--1{
	grid-template-columns: minmax(0, 1fr);
}

.cr-modal .cr-field{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	min-width: 0;
}

.cr-modal .cr-field label{
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--cr-title-color, #16241F);
}

/* The fields are meant to be obvious: a solid white box, a visible border, a
   dark label above it and a coloured edge on focus. The corner radius of the
   boxes is the "Form field radius" setting (--cr-field-radius). */
.cr-modal .cr-field input, .cr-modal .cr-field select, .cr-modal .cr-field textarea{
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1.5px solid rgba(22, 36, 31, .28);
	border-radius: var(--cr-field-radius, 8px);
	background: #FFFFFF;
	color: var(--cr-title-color, #16241F);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.35;
	box-shadow: inset 0 1px 2px rgba(9, 18, 15, .05);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cr-modal .cr-field input::placeholder, .cr-modal .cr-field textarea::placeholder{
	color: rgba(22, 36, 31, .42);
}

.cr-modal .cr-field select{
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2316241F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 7px;
	-webkit-appearance: none;
	appearance: none;
}

.cr-modal .cr-field input:hover, .cr-modal .cr-field select:hover, .cr-modal .cr-field textarea:hover{
	border-color: rgba(22, 36, 31, .45);
}

.cr-modal .cr-field input:focus, .cr-modal .cr-field select:focus, .cr-modal .cr-field textarea:focus{
	outline: 3px solid rgba(30, 107, 84, .22);
	outline-offset: 1px;
	border-color: var(--cr-primary, #1E6B54);
	box-shadow: inset 0 1px 2px rgba(9, 18, 15, .04);
}

.cr-modal .cr-field textarea{
	min-height: 84px;
	resize: vertical;
}

/* The name is the first thing a guest types, so it gets the most room. */
.cr-modal .cr-field--name{
	margin-bottom: 2px;
}

.cr-modal .cr-field--name input{
	min-height: 54px;
	padding: 14px 15px;
	border-width: 2px;
	border-color: rgba(30, 107, 84, .45);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
}

.cr-modal .cr-field--name label{
	font-size: 13px;
}

.cr-modal .cr-field--name input:focus{
	border-color: var(--cr-primary, #1E6B54);
	outline-width: 4px;
}

/* Cost per night, spelled out above the booking fields. */
.cr-modal .cr-form__rate{
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 14px;
	border: 1px dashed rgba(30, 107, 84, .35);
	border-radius: calc(var(--cr-radius, 16px) / 2);
	background: #FFFFFF;
}

.cr-modal .cr-form__rate-label{
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--cr-text-color, #5C6B65);
}

.cr-modal .cr-form__submit{
	margin: 0;
}

.cr-modal .cr-form__message{
	margin: 0;
	font-size: 13.5px;
	min-height: 0;
}

.cr-modal .cr-form__message:empty{
	display: none;
}

.cr-modal .cr-form__message--ok{
	padding: 10px 12px;
	border-radius: calc(var(--cr-radius, 16px) / 2);
	background: rgba(30, 107, 84, .12);
	color: #14523F;
	font-weight: 600;
}

.cr-modal .cr-form__message--error{
	padding: 10px 12px;
	border-radius: calc(var(--cr-radius, 16px) / 2);
	background: rgba(176, 46, 46, .12);
	color: #8A2020;
	font-weight: 600;
}

.cr-modal .cr-form__hp{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.cr-modal .cr-form.is-sending{
	opacity: .75;
	pointer-events: none;
}

/* ---------------------------------------------------------- the scrollbar
   A visible 10px scrollbar in the plugin's own primary colour, so it is
   obvious that the popup scrolls - and so Safari and Chrome on macOS do not
   hide it until the visitor touches it. */

.cr-modal::-webkit-scrollbar{
	width: 10px;
}

.cr-modal::-webkit-scrollbar-track{
	background: rgba(9, 18, 15, .12);
}

.cr-modal::-webkit-scrollbar-thumb{
	background: var(--cr-primary, #1E6B54);
	border-radius: 10px;
}

.cr-modal::-webkit-scrollbar-thumb:hover{
	background: var(--cr-title-color, #16241F);
}

/* Firefox has no ::-webkit-scrollbar (which is what this test asks) and
   cannot be told a width, only a colour. Keeping the two paths apart matters:
   a scrollbar-color declaration in Chromium switches it to the standard
   scrollbar and the 10px width above is dropped. */
@supports not selector(::-webkit-scrollbar) {
	.cr-modal{
		scrollbar-color: var(--cr-primary, #1E6B54) rgba(9, 18, 15, .12);
		scrollbar-width: auto;
	}
}

/* Screen-reader only text. */
.cr-sr, .cr-modal .cr-sr{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ------------------------------------------------- body lock while open
   overflow:hidden alone is ignored by iOS, so the script also fixes the body
   in place and puts the page back exactly where it was on close. */

body.cr-modal-open {
	overflow: hidden !important;
	touch-action: none;
}

body.cr-modal-open .cr-modal__dialog {
	pointer-events: auto;
}

/* ------------------------------------------------------ small screens */

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

	.cr-modal__dialog{
		grid-template-columns: minmax(0, 1fr);
	}

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

	.cr-modal .cr-modal__panel{
		padding: 20px;
	}

	.cr-modal .cr-form__row,
	.cr-modal .cr-form__row--2,
	.cr-modal .cr-form__row--dates{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.cr-modal .cr-form__row,
	.cr-modal .cr-form__row--2,
	.cr-modal .cr-form__row--dates{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-rooms .cr-card, .cr-rooms .cr-btn, .cr-modal .cr-btn{
		transition: none;
	}
}

/* ==========================================================================
   Forced styling
   "Force plugin styling" is on by default: the room titles and the prices
   belong to the plugin, so the theme cannot restyle them. Turn the setting
   off to hand both back to the theme.

   The extra classes in the selector are deliberate: a theme that styles
   `h3` or `.entry-content h3` is out-specified here without touching
   anything outside .cr-rooms.
   ========================================================================== */

html body .cr-rooms.cr-force.cr-force .cr-card__title, html body .cr-rooms.cr-force.cr-force .cr-card__title a, html body .cr-rooms.cr-force.cr-force .cr-heading, html body .cr-rooms.cr-force.cr-force .cr-price__amount, html body .cr-rooms.cr-force.cr-force .cr-modal__title{
	font-family: var(--cr-title-font, inherit) !important;
	font-size: var(--cr-title-size, 20px) !important;
	font-weight: var(--cr-title-weight, 700) !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cr-title-color, #16241F) !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-shadow: none !important;
	background: none !important;
	border: 0 !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card__title a:hover, html body .cr-rooms.cr-force.cr-force .cr-card__title a:focus{
	color: var(--cr-primary, #1E6B54) !important;
	text-decoration: none !important;
}

html body .cr-rooms.cr-force.cr-force .cr-heading {
	font-size: calc(var(--cr-title-size, 20px) * 1.35) !important;
	margin: 0 0 18px !important;
}

html body .cr-rooms.cr-force.cr-force .cr-price__amount {
	font-size: calc(var(--cr-title-size, 20px) * 1.05) !important;
	font-weight: 800 !important;
	color: var(--cr-title-color, #16241F) !important;
}

/* The chip over the photo is the exception: its four pieces take the chip's own
   text colour, so the price stays readable on whatever background is set. */
html body .cr-rooms.cr-force.cr-force .cr-card__body .cr-card__rate,
html body .cr-rooms.cr-force.cr-force .cr-card__body .cr-card__rate .cr-price__amount,
html body .cr-rooms.cr-force.cr-force .cr-card__body .cr-card__rate .cr-price__code,
html body .cr-rooms.cr-force.cr-force .cr-card__body .cr-card__rate .cr-price__suffix{
	color: var(--cr-btn-text, #FFFFFF) !important;
	text-shadow: none !important;
	border: 0 !important;
}

html body .cr-rooms.cr-force.cr-force .cr-grid:not(.cr-grid--single) .cr-card__body .cr-card__rate{
	background: var(--cr-btn-bg, #1E6B54) !important;
	border-radius: 5px !important;
	/* The chip stays on top of the picture and of the title, and a theme cannot
	   bury it under its own layers or hang it somewhere else. */
	position: absolute !important;
	top: -19px !important;
	right: 12px !important;
	z-index: 5 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* The room title belongs on the left of the card, whatever the theme does with
   headings: a theme that centres h3 is out-specified here, and nothing outside
   .cr-rooms is touched. The section heading is deliberately left alone. */
html body .cr-rooms.cr-force.cr-force .cr-card__title{
	text-align: left !important;
	justify-content: flex-start !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card__title a{
	text-align: left !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card__body .cr-card__rate .cr-price__amount{
	font-size: 17px !important;
}

/* One room on its own: the full width and the two columns are the plugin's
   layout, so a theme cannot narrow the block, stack the columns or stretch the
   photo. */
html body .cr-rooms.cr-force.cr-force.cr-rooms--single{
	width: 100% !important;
	max-width: none !important;
}

html body .cr-rooms.cr-force.cr-force .cr-grid--single{
	width: 100% !important;
	max-width: 100% !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card--single{
	display: grid !important;
	grid-template-columns: 40% 60% !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card--single .cr-card__media{
	height: 100% !important;
	border-radius: var(--cr-radius, 16px) 0 0 var(--cr-radius, 16px) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card--single .cr-card__foot{
	justify-content: flex-start !important;
	text-align: left !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card--single .cr-card__actions{
	margin-left: 0 !important;
	margin-right: auto !important;
	justify-content: flex-start !important;
}

html body .cr-rooms.cr-force.cr-force .cr-card--single .cr-card__rate{
	position: static !important;
	background: var(--cr-btn-bg, #1E6B54) !important;
	border-radius: 5px !important;
	color: var(--cr-btn-text, #FFFFFF) !important;
	align-self: flex-start !important;
}

@media (max-width: 760px){
	html body .cr-rooms.cr-force.cr-force .cr-card--single{
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* One column: the photo goes back on top and takes its own height again -
	   "100%" of an auto-sized row is nothing at all. */
	html body .cr-rooms.cr-force.cr-force .cr-card--single .cr-card__media{
		height: var(--cr-image-h, 200px) !important;
		border-radius: var(--cr-radius, 16px) var(--cr-radius, 16px) 0 0 !important;
	}
}

html body .cr-modal.cr-force.cr-force .cr-modal__title{
	font-size: calc(var(--cr-title-size, 20px) * 1.3) !important;
}

/* The category shortcode is plugin content as well. */
html body .cr-rooms.cr-force.cr-force .cr-cat-list__title{
	font-family: var(--cr-title-font, inherit) !important;
	font-weight: var(--cr-title-weight, 700) !important;
	color: var(--cr-title-color, #16241F) !important;
	text-transform: none !important;
}

html body .cr-rooms.cr-force.cr-force .cr-cat-chip{
	background: var(--cr-card-bg, #FFFFFF) !important;
	border-color: var(--cr-card-border, #E7E2D6) !important;
	color: var(--cr-title-color, #16241F) !important;
	text-decoration: none !important;
}

html body .cr-rooms.cr-force.cr-force .cr-cat-chip:hover,
html body .cr-rooms.cr-force.cr-force .cr-cat-chip:focus{
	background: var(--cr-btn-hover-bg, #17523F) !important;
	border-color: var(--cr-btn-hover-bg, #17523F) !important;
	color: var(--cr-btn-text, #FFFFFF) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-cat-link{
	color: var(--cr-primary, #1E6B54) !important;
}

/* The buttons are plugin content too. */
html body .cr-rooms.cr-force.cr-force .cr-btn, html body .cr-modal.cr-force.cr-force .cr-btn{
	background: var(--cr-btn-bg, #1E6B54) !important;
	color: var(--cr-btn-text, #FFFFFF) !important;
	font-family: var(--cr-title-font, inherit) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	border-radius: calc(var(--cr-radius, 16px) / 2) !important;
	padding: 9px 16px !important;
	box-shadow: none !important;
	border: 1px solid transparent !important;
	/* A theme must not blur, grey or otherwise repaint the button at rest
	   either - the hover colour is the only effect these buttons have. */
	filter: none !important;
	opacity: 1 !important;
}

/* The hover colour has to be stated with the same weight as the base one above,
   or the forced background would win and the hover would do nothing. */
html body .cr-rooms.cr-force.cr-force .cr-btn:hover:not(.cr-btn--disabled),
html body .cr-rooms.cr-force.cr-force .cr-btn:focus:not(.cr-btn--disabled),
html body .cr-modal.cr-force.cr-force .cr-btn:hover:not(.cr-btn--disabled),
html body .cr-modal.cr-force.cr-force .cr-btn:focus:not(.cr-btn--disabled),
html body .cr-rooms.cr-force.cr-force .cr-btn--ghost:hover,
html body .cr-rooms.cr-force.cr-force .cr-btn--ghost:focus,
html body .cr-modal.cr-force.cr-force .cr-btn--ghost:hover,
html body .cr-modal.cr-force.cr-force .cr-btn--ghost:focus{
	background: var(--cr-btn-hover-bg, #17523F) !important;
	border-color: var(--cr-btn-hover-bg, #17523F) !important;
	color: var(--cr-btn-text, #FFFFFF) !important;
	filter: none !important;
}

html body .cr-rooms.cr-force.cr-force .cr-btn--ghost, html body .cr-modal.cr-force.cr-force .cr-btn--ghost{
	background: transparent !important;
	border-color: var(--cr-card-border, #E7E2D6) !important;
	color: var(--cr-title-color, #16241F) !important;
}

html body .cr-rooms.cr-force.cr-force .cr-btn--disabled, html body .cr-modal.cr-force.cr-force .cr-btn--disabled{
	background: var(--cr-card-border, #E7E2D6) !important;
	color: var(--cr-text-color, #5C6B65) !important;
}