/*
* CozyStay — Single Room custom layout
*
* Loaded only on single room pages, by CozyStay_Front_Room_Single_Layout.
* Everything is scoped to .cs-single-room-layout so nothing leaks into the
* room list, the search results page or the Elementor reservation widgets,
* which share the .cs-reservation-form markup.
*
* Contents
*   1. Layout shell
*   2. Hero + identity overlay
*   3. Sticky booking bar (desktop)
*   4. Booking bar — field level restyling
*   5. Content canvas (Elementor)
*   6. Similar rooms
*   7. Responsive / mobile booking sheet
*   8. Dark colour scheme
*/

.cs-single-room-layout {
	--csrh-overlay-from: rgba(0, 0, 0, 0.78);
	--csrh-overlay-to: rgba(0, 0, 0, 0);
	--csrh-text: #fff;
	--csrb-bar-bg: #fff;
	--csrb-bar-color: var(--content-color, #333632);
	--csrb-bar-border: rgba(0, 0, 0, 0.08);
	--csrb-bar-shadow: 0 2px 24px rgba(80, 57, 24, 0.12);
	--csrb-bar-shadow-stuck: 0 4px 28px rgba(80, 57, 24, 0.18);
	--csrb-bar-radius: 10px;
	--csrb-sticky-top: 0px;
	--csrb-gap: 14px;
}

/* ---------------------------------------------------------------------------
* 1. Layout shell
* ------------------------------------------------------------------------- */

.cs-single-room-layout .site-content.cs-room-content-fullwidth .main {
	padding-top: 0;
}

.cs-single-room-layout .cs-room-main {
	display: block;
}

/* The canvas is not a sidebar grid any more — let it span the full width. */
.cs-single-room-layout .cs-room-main > .cs-room-canvas {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
* 2. Hero + identity overlay
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-hero {
	position: relative;
	overflow: hidden;
}

.cs-single-room-layout .cs-room-hero .room-top-section {
	margin-bottom: 0;
}

.cs-single-room-layout .cs-room-hero.no-media {
	min-height: 380px;
	background: var(--primary-color, #b99d75);
}

/*
* The overlay must not swallow clicks: the hero can be a slick carousel with
* its own dots and arrows underneath. Only the identity block takes pointer
* events back, so links and shortcodes inside it still work.
*/
.cs-single-room-layout .cs-room-hero-overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 120px 0 48px;
	background: linear-gradient(to top, var(--csrh-overlay-from) 0%, var(--csrh-overlay-to) 100%);
	pointer-events: none;
}

.cs-single-room-layout .cs-room-hero.no-media .cs-room-hero-overlay {
	position: relative;
	padding-top: 80px;
	background: none;
}

.cs-single-room-layout .cs-room-hero-identity {
	max-width: 820px;
	color: var(--csrh-text);
	pointer-events: auto;
}

/* "View All Photos" belongs to the mosaic hero and would otherwise be buried
* under the scrim. */
.cs-single-room-layout .cs-room-hero .cs-gallery-view-all {
	position: relative;
	z-index: 4;
}

.cs-single-room-layout .cs-room-hero-label {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 14px;
	background: var(--primary-color, #b99d75);
	color: #fff;
	font-family: var(--subheading-font, inherit);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-transform: uppercase;
}

.cs-single-room-layout .cs-room-hero-title {
	margin: 0;
	color: var(--csrh-text);
	font-size: clamp(32px, 4.6vw, 62px);
	line-height: 1.1;
}

.cs-single-room-layout .cs-room-hero-subtitle {
	margin-top: 12px;
	color: var(--csrh-text);
	font-size: 17px;
	line-height: 1.6;
	opacity: 0.85;
}

.cs-single-room-layout .cs-room-hero-subtitle p:last-child {
	margin-bottom: 0;
}

/* Facility icons, laid out as a single inline row under the title. */
.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info {
	margin-top: 24px;
}

.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info ul li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	color: var(--csrh-text);
	font-size: 15px;
	line-height: 1.4;
}

.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info ul li:before {
	display: none;
}

.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info .csrbi-icon {
	display: flex;
	align-items: center;
	color: var(--csrh-text);
	font-size: 22px;
	line-height: 1;
	opacity: 0.9;
}

.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info .csrbi-text {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
* 3. Sticky booking bar (desktop)
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-bookingbar-sentinel {
	height: 1px;
	margin-bottom: -1px;
}

.cs-single-room-layout .cs-room-bookingbar {
	position: -webkit-sticky;
	position: sticky;
	top: var(--csrb-sticky-top);
	z-index: 90;
	/* Pulled up so the bar overlaps the hero instead of sitting in dead space. */
	margin-top: -44px;
	padding: 18px 0;
	transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.cs-single-room-layout .cs-room-bookingbar.is-stuck {
	margin-top: 0;
	padding: 10px 0;
	background: var(--csrb-bar-bg);
	box-shadow: var(--csrb-bar-shadow-stuck);
}

.cs-single-room-layout .cs-room-bookingbar.is-stuck .cs-room-booking-wrap {
	padding: 8px 20px;
	background: transparent;
	box-shadow: none;
}

/* Neutralise the sidebar card styling that ships with the form. */
.cs-single-room-layout .cs-room-bookingbar .cs-room-booking {
	--csrb-bg: var(--csrb-bar-bg);
	--csrb-box-shadow: var(--csrb-bar-shadow);
	--csrb-border-radius: var(--csrb-bar-radius);
}

.cs-single-room-layout .cs-room-bookingbar .cs-room-booking-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--csrb-gap);
	padding: 20px 26px;
	border: 1px solid var(--csrb-bar-border);
	border-radius: var(--csrb-bar-radius);
}

.cs-single-room-layout .cs-room-bookingbar .cs-room-booking.with-inner-border:after {
	display: none;
}

/* "From X / night" — the price readout, pinned to the left of the bar. */
.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 8px 0 0;
	padding-right: 20px;
	border-right: 1px solid var(--csrb-bar-border);
	align-self: stretch;
	justify-content: center;
}

.cs-single-room-layout .cs-room-bookingbar .room-booking-title h4 {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 1.4;
	opacity: 0.6;
	text-transform: uppercase;
}

.cs-single-room-layout .cs-room-bookingbar .room-booking-title h4 + span {
	text-align: left;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.7;
	white-space: nowrap;
}

.cs-single-room-layout .cs-room-bookingbar .room-booking-title .base-price {
	display: inline-block;
	color: var(--primary-color, #b99d75);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

.cs-single-room-layout .cs-room-bookingbar .room-booking-form {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
* 4. Booking bar — field level restyling
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form {
	--field-height: 44px;
	--field-space: 0px;
}

/*
* These carry .cs-reservation-form.style-block in the selector on purpose.
* main.css lays the same markup out vertically for the sidebar build
* (`.cs-reservation-form.style-block .cs-form-wrap { font-size: 0 }` plus
* `.form-field-col-1-2 { display: inline-block; width: 50% }`), and at equal
* specificity the winner depends on load order. Matching their class chain and
* adding ours puts these safely ahead.
*/
.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--csrb-gap);
	margin: 0;
	font-size: inherit;
}

.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-wrap > .cs-form-field,
.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-wrap > .cs-form-field-group {
	display: block;
	flex: 1 1 145px;
	min-width: 0;
	margin: 0;
	padding: 0;
	width: auto;
}

/* Adults / children ship with .form-field-col-1-2, which forces a 50% inline
* block column — meaningless once the row is a flex container. */
.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .form-field-col-1-2,
.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .form-field-col-1-2.cs-adults,
.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .form-field-col-1-2.cs-children {
	display: block;
	width: auto;
	padding-right: 0;
	padding-left: 0;
}

/* Vertical rhythm from the sidebar build — every field but the first got a
* top pad to stack it. */
.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-field:not(:first-child) {
	padding-top: 0;
}

.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .csf-dropdown {
	width: auto;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field.hide {
	display: none;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-label {
	margin-bottom: 3px;
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	opacity: 0.65;
	text-transform: uppercase;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap input[type="text"] {
	width: 100%;
}

/* Merged check-in / check-out group keeps its two halves side by side. */
.cs-single-room-layout .cs-room-bookingbar .cs-form-field-group.date-group {
	flex: 1 1 260px;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-field-group-inner {
	display: flex;
	gap: var(--csrb-gap);
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-field-group-inner > .cs-form-field {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* Total + submit are pushed to the far right and never stretch. */
.cs-single-room-layout .cs-room-bookingbar .cs-form-total-price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	margin: 0 0 0 auto;
	padding: 0 4px 0 20px;
	border-left: 1px solid var(--csrb-bar-border);
	align-self: stretch;
	cursor: pointer;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-total-price .csf-title {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	opacity: 0.6;
	text-transform: uppercase;
	white-space: nowrap;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-total-price .total-price {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-field.cs-submit {
	flex: 0 0 auto;
	margin: 0;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-field.cs-submit .button {
	height: var(--field-height);
	padding-right: 30px;
	padding-left: 30px;
	white-space: nowrap;
}

/*
* Anything that cannot live on one line — extra services, the price
* breakdown, form messages — wraps onto its own full width row underneath.
*/
.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-group,
.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-price-details {
	flex: 0 0 100%;
	order: 10;
	margin: 4px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--csrb-bar-border);
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-price-details.hide {
	display: none;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-error-message:not(:empty),
.cs-single-room-layout .cs-room-bookingbar .cs-form-success-message:not(:empty) {
	flex: 0 0 100%;
	order: 11;
	margin-top: 12px;
}

/*
* Dropdowns open downwards out of the bar. The sidebar build anchored some of
* them to the right edge via .with-sidebar-right, a class this layout no
* longer carries, so they are re-anchored here.
*/
.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field .csf-dropdown {
	right: auto;
	left: 0;
	min-width: 260px;
}

.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field:last-of-type .csf-dropdown {
	right: 0;
	left: auto;
}

/* The absolutely positioned "only N rooms left" notice would overflow the
* bar horizontally — drop it under its field instead. */
.cs-single-room-layout .cs-room-bookingbar .cs-form-notice {
	top: auto;
	right: auto;
	bottom: -6px;
	left: 0;
	margin-top: 0;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
}

/* ---------------------------------------------------------------------------
* 4b. Hero gallery lightbox trigger
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-hero-actions {
	margin-top: 26px;
}

.cs-single-room-layout .cs-room-gallery-open {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--csrh-text);
	font-family: var(--btn-font, inherit);
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.cs-single-room-layout .cs-room-gallery-open:hover,
.cs-single-room-layout .cs-room-gallery-open:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--content-color, #333632);
}

/* Simple 2x2 grid glyph, so no icon font dependency is introduced. */
.cs-single-room-layout .cs-room-gallery-open-icon {
	display: grid;
	flex: 0 0 auto;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	width: 15px;
	height: 15px;
}

.cs-single-room-layout .cs-room-gallery-open-icon:before,
.cs-single-room-layout .cs-room-gallery-open-icon:after {
	content: "";
	display: block;
	height: 100%;
	border: 1px solid currentColor;
}

.cs-single-room-layout .cs-room-gallery-open-icon:before {
	grid-column: 1 / 3;
}

.cs-single-room-layout .cs-room-gallery-open-count {
	padding: 1px 8px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.28);
	font-size: 13px;
	line-height: 1.6;
}

.cs-single-room-layout .cs-room-gallery-open:hover .cs-room-gallery-open-count,
.cs-single-room-layout .cs-room-gallery-open:focus-visible .cs-room-gallery-open-count {
	background: rgba(0, 0, 0, 0.1);
}

/*
* The anchors SimpleLightbox binds to. Kept out of sight but still laid out —
* display:none would leave the plugin without dimensions to animate from.
*/
.cs-single-room-layout .cs-room-gallery-links {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
* 4c. Reservation request form (Contact Form 7)
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-request {
	margin-top: 80px;
	padding: 60px 0;
	background: var(--csrr-bg, rgba(185, 157, 117, 0.07));
}

.cs-single-room-layout .cs-room-request-head {
	margin-bottom: 30px;
}

.cs-single-room-layout .cs-room-request-title {
	margin: 0;
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.2;
}

.cs-single-room-layout .cs-room-request-room {
	margin: 6px 0 0;
	color: var(--primary-color, #b99d75);
	font-family: var(--subheading-font, inherit);
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-transform: uppercase;
}

/*
* The .csr-row layout system now lives in forms-enhanced.css, unscoped: the
* form template is portable, so dropping it on the home page or in a sidebar
* has to produce the same grid it does here. Only the section chrome below
* is specific to the room page.
*/

.cs-single-room-layout .cs-room-request label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	opacity: 0.7;
	text-transform: uppercase;
}

.cs-single-room-layout .cs-room-request .wpcf7-form-control-wrap {
	display: block;
}

.cs-single-room-layout .cs-room-request input[type="text"],
.cs-single-room-layout .cs-room-request input[type="email"],
.cs-single-room-layout .cs-room-request input[type="tel"],
.cs-single-room-layout .cs-room-request input[type="url"],
.cs-single-room-layout .cs-room-request input[type="number"],
.cs-single-room-layout .cs-room-request input[type="date"],
.cs-single-room-layout .cs-room-request select,
.cs-single-room-layout .cs-room-request textarea {
	width: 100%;
	max-width: none;
}

.cs-single-room-layout .cs-room-request textarea {
	min-height: 110px;
	resize: vertical;
}

.cs-single-room-layout .cs-room-request input[type="submit"] {
	min-width: 220px;
}

/* CF7 status messages: stock styling is a full width bordered block that
* breaks the grid rhythm. */
.cs-single-room-layout .cs-room-request .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.6;
}

.cs-single-room-layout .cs-room-request .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.5;
}

.cs-single-room-layout .cs-room-request .wpcf7-spinner {
	vertical-align: middle;
}

/* Hidden fields must not occupy a grid cell. */
.cs-single-room-layout .cs-room-request .wpcf7-form > p:has(> input[type="hidden"]:only-child) {
	display: none;
}

/* Narrow-screen rules for this section live with the rest of the responsive
* work in section 7, so the cascade order stays readable. */

/* ---------------------------------------------------------------------------
* 5. Content canvas (Elementor)
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-canvas .cs-room-article {
	margin: 0;
	padding: 0;
	border: 0;
}

.cs-single-room-layout .cs-room-canvas .entry-content {
	margin: 0;
}

/*
* Rooms built with Elementor render their own sections, which handle their
* own width. Rooms still using the classic editor get the readable measure
* back so plain text does not run edge to edge.
*/
.cs-single-room-layout .cs-room-canvas .entry-content > *:not([class*="elementor"]) {
	max-width: var(--site-width, 1300px);
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
}

.cs-single-room-layout .cs-room-canvas .elementor {
	width: 100%;
}

.cs-single-room-layout .room-availability {
	margin-top: 60px;
}

/* ---------------------------------------------------------------------------
* 6. Similar rooms
* ------------------------------------------------------------------------- */

.cs-single-room-layout .cs-room-similar {
	margin-top: 90px;
	padding-bottom: 20px;
}

/* ---------------------------------------------------------------------------
* 7. Responsive / mobile booking sheet
* ------------------------------------------------------------------------- */

@media only screen and (max-width: 1200px) {
	.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field,
	.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field-group {
		flex: 1 1 130px;
	}

	.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
		flex: 0 0 100%;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		margin: 0 0 4px;
		padding: 0 0 12px;
		border-right: 0;
		border-bottom: 1px solid var(--csrb-bar-border);
	}
}

@media only screen and (max-width: 1024px) {
	.cs-single-room-layout .cs-room-hero-overlay {
		padding: 90px 0 36px;
	}

	.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info ul {
		gap: 8px 20px;
	}

}

@media only screen and (max-width: 900px) {
	/*
	* Below this width a six field row cannot stay legible, so the bar
	* becomes a sheet docked to the bottom of the viewport: a compact
	* summary that expands to the full form on tap. The toggle button is
	* injected by room-single.js.
	*/
	.cs-single-room-layout .cs-room-bookingbar-sentinel {
		display: none;
	}

	.cs-single-room-layout .cs-room-bookingbar {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 200;
		margin: 0;
		padding: 0;
		background: var(--csrb-bar-bg);
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.16);
	}

	.cs-single-room-layout .cs-room-bookingbar > .container {
		padding: 0;
		max-width: none;
	}

	.cs-single-room-layout .cs-room-bookingbar .cs-room-booking-wrap {
		display: block;
		max-height: 78vh;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
	}

	/* Collapsed: only the price line and the toggle stay visible.
	* padding-right keeps the price clear of the absolutely positioned
	* toggle button sitting in the same row. */
	.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 8px;
		margin: 0;
		padding: 14px 140px 14px 20px;
		border: 0;
	}

	/*
	* The sheet is fixed over the end of the document, so the page needs
	* real estate underneath it or it permanently covers the footer. The
	* body class is set by room-single.js only when a bar is present.
	*/
	.cs-single-room-layout.has-room-booking-bar #page {
		padding-bottom: 92px;
	}

	.cs-single-room-layout .cs-room-bookingbar .room-booking-form {
		display: none;
		padding: 0 20px 20px;
	}

	.cs-single-room-layout .cs-room-bookingbar.is-open .room-booking-form {
		display: block;
	}

	.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-wrap {
		display: block;
	}

	.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-wrap > .cs-form-field,
	.cs-single-room-layout .cs-room-bookingbar .cs-reservation-form.style-block .cs-form-wrap > .cs-form-field-group {
		margin-bottom: 14px;
		width: 100%;
	}

	.cs-single-room-layout .cs-room-bookingbar .cs-form-total-price {
		align-items: flex-start;
		margin: 0 0 14px;
		padding: 14px 0 0;
		border-top: 1px solid var(--csrb-bar-border);
		border-left: 0;
	}

	.cs-single-room-layout .cs-room-bookingbar .cs-form-field.cs-submit .button {
		width: 100%;
	}

	/* Toggle, injected by room-single.js */
	.cs-single-room-layout .cs-room-bookingbar-toggle {
		position: absolute;
		top: 10px;
		right: 16px;
		z-index: 2;
		padding: 8px 18px;
		border: 0;
		border-radius: 4px;
		background: var(--primary-color, #b99d75);
		color: #fff;
		font-family: var(--btn-font, inherit);
		font-size: 14px;
		line-height: 1.6;
		cursor: pointer;
	}

}

@media only screen and (min-width: 901px) {
	.cs-single-room-layout .cs-room-bookingbar-toggle {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	/*
	* Phone hero: the overlay stops floating and drops below the image.
	*
	* Overlaying was safe on desktop, where the photo is far taller than the
	* text. On a phone the image is roughly 220-260px tall while the identity
	* block — label, a two line title, subtitle, wrapped facility icons and
	* the gallery button — runs past 340px. Absolutely positioned against
	* bottom:0 inside an overflow:hidden hero, the overflow is cut off from
	* the top: the title and label simply disappear. Going static removes the
	* failure mode instead of trying to squeeze the content into it.
	*
	* overflow:hidden stays on the hero: a static overlay is inside the flow
	* and grows the hero rather than spilling out of it, and slick does its
	* own clipping via .slick-list, so nothing here needs it lifted.
	*/
	.cs-single-room-layout .cs-room-hero-overlay {
		position: static;
		padding: 26px 0 0;
		background: none;
	}

	.cs-single-room-layout .cs-room-hero-identity {
		max-width: none;
		color: inherit;
	}

	.cs-single-room-layout .cs-room-hero-title,
	.cs-single-room-layout .cs-room-hero-subtitle,
	.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info ul li,
	.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info .csrbi-icon {
		color: inherit;
	}

	/* Off the photo, the glass treatment has nothing to sit on. */
	.cs-single-room-layout .cs-room-gallery-open {
		border-color: var(--csrb-bar-border, rgba(0, 0, 0, 0.2));
		background: transparent;
		color: inherit;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.cs-single-room-layout .cs-room-gallery-open:hover,
	.cs-single-room-layout .cs-room-gallery-open:focus-visible {
		border-color: var(--primary-color, #b99d75);
		background: var(--primary-color, #b99d75);
		color: #fff;
	}

	.cs-single-room-layout .cs-room-gallery-open-count {
		background: rgba(0, 0, 0, 0.08);
	}

	.cs-single-room-layout .cs-room-hero-actions {
		margin-top: 20px;
	}

	.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info {
		margin-top: 16px;
	}

	.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info ul li {
		font-size: 14px;
	}

	.cs-single-room-layout .cs-room-hero-identity .cs-room-basic-info .csrbi-icon {
		font-size: 19px;
	}

	/* The bar was pulled up to overlap the hero; with a static overlay there
	* is nothing to overlap any more. */
	.cs-single-room-layout .cs-room-bookingbar {
		margin-top: 0;
	}

	.cs-single-room-layout .cs-room-similar {
		margin-top: 60px;
	}

	/* Reservation request form — moved here from section 4c. */
	.cs-single-room-layout .cs-room-request {
		margin-top: 50px;
		padding: 40px 0;
	}

	.cs-single-room-layout .cs-room-request .wpcf7-form:not(:has(.csr-row)) {
		grid-template-columns: 1fr;
	}

	.cs-single-room-layout .cs-room-request input[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

/* Very narrow phones: the Turkish gallery label is long enough to overflow
* a 320px viewport on one line. */
@media only screen and (max-width: 400px) {
	.cs-single-room-layout .cs-room-gallery-open {
		flex-wrap: wrap;
		padding: 10px 16px;
		font-size: 14px;
	}

	.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
		padding-right: 120px;
	}
}

/* ---------------------------------------------------------------------------
* 8. RTL
*
* The theme ships a separate rtl.css, but this layout is one file loaded in
* both directions, so the mirrored rules live here scoped to the .rtl body
* class WordPress adds when is_rtl().
* ------------------------------------------------------------------------- */

.rtl.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
	margin: 0 0 0 8px;
	padding-right: 0;
	padding-left: 20px;
	border-right: 0;
	border-left: 1px solid var(--csrb-bar-border);
}

.rtl.cs-single-room-layout .cs-room-bookingbar .room-booking-title h4 + span {
	text-align: right;
}

.rtl.cs-single-room-layout .cs-room-bookingbar .cs-form-total-price {
	align-items: flex-start;
	margin: 0 auto 0 0;
	padding: 0 20px 0 4px;
	border-right: 1px solid var(--csrb-bar-border);
	border-left: 0;
}

.rtl.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field .csf-dropdown {
	right: 0;
	left: auto;
}

.rtl.cs-single-room-layout .cs-room-bookingbar .cs-form-wrap > .cs-form-field:last-of-type .csf-dropdown {
	right: auto;
	left: 0;
}

.rtl.cs-single-room-layout .cs-room-bookingbar .cs-form-notice {
	right: 0;
	left: auto;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
}

@media only screen and (max-width: 1200px) {
	.rtl.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
		margin: 0 0 4px;
		padding: 0 0 12px;
		border-left: 0;
		border-bottom: 1px solid var(--csrb-bar-border);
	}
}

@media only screen and (max-width: 900px) {
	.rtl.cs-single-room-layout .cs-room-bookingbar-toggle {
		right: auto;
		left: 16px;
	}

	.rtl.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
		padding: 14px 20px 14px 140px;
	}

	.rtl.cs-single-room-layout .cs-room-bookingbar .cs-form-total-price {
		align-items: flex-start;
		margin: 0 0 14px;
		padding: 14px 0 0;
		border-top: 1px solid var(--csrb-bar-border);
		border-right: 0;
	}
}

@media only screen and (max-width: 400px) {
	.rtl.cs-single-room-layout .cs-room-bookingbar .room-booking-title {
		padding-right: 20px;
		padding-left: 120px;
	}
}

/* ---------------------------------------------------------------------------
* 9. Dark colour scheme
* ------------------------------------------------------------------------- */

.cs-single-room-layout.dark-color,
.cs-single-room-layout .dark-color {
	--csrb-bar-bg: #1c1b18;
	--csrb-bar-color: rgba(255, 255, 255, 0.9);
	--csrb-bar-border: rgba(255, 255, 255, 0.12);
	--csrb-bar-shadow: none;
	--csrb-bar-shadow-stuck: 0 4px 28px rgba(0, 0, 0, 0.5);
	--csrr-bg: rgba(255, 255, 255, 0.04);
}