/*
 * Booking Request Form - front-end.
 * Everything is scoped under .brf-wrap. All colours / sizes below are only
 * DEFAULTS: each one can be changed from the Elementor widget's Style tab.
 */

.brf-wrap {
	--brf-accent: #0f766e;
	--brf-accent-text: #ffffff;
	--brf-range: #d5efec;
	--brf-hover-bg: var(--brf-range);
	--brf-unavail: #b4b0ab;
	--brf-unavail-bg: #f3f1ee;
	--brf-past: #cfcac4;
	--brf-day-color: #1c1917;
	--brf-day-radius: 8px;
	--brf-today: var(--brf-accent);
	--brf-cal-bg: #fdfcfb;
	--brf-text: #1c1917;
	--brf-muted: #6b6560;
	--brf-border: #dcd8d3;
	--brf-bg: #ffffff;
	--brf-field-bg: #ffffff;
	--brf-readonly-bg: #faf9f7;
	--brf-error: #b42318;
	--brf-radius: 12px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 28px;
	background: var(--brf-bg);
	color: var(--brf-text);
	border: 1px solid var(--brf-border);
	border-radius: 16px;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.brf-wrap *,
.brf-wrap *::before,
.brf-wrap *::after {
	box-sizing: border-box;
}

.brf-wrap .brf-title {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	color: var(--brf-text);
}

.brf-wrap .brf-subtitle {
	margin: 0 0 22px;
	color: var(--brf-muted);
}

.brf-wrap .brf-section-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brf-muted);
}

/* ---------- layout ---------- */
.brf-wrap .brf-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 900px) {
	.brf-wrap.brf-layout-side .brf-grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 36px;
	}
}

.brf-wrap .brf-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.brf-wrap .brf-field {
	margin: 0 0 14px;
	min-width: 0;
}

/* ---------- fields ---------- */
.brf-wrap .brf-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--brf-text);
}

.brf-wrap .brf-req {
	color: var(--brf-error);
}

.brf-wrap .brf-input {
	display: block;
	width: 100%;
	height: auto;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	font: inherit;
	font-size: 16px;
	color: var(--brf-text);
	background: var(--brf-field-bg);
	border: 1px solid var(--brf-border);
	border-radius: 10px;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.brf-wrap .brf-input::placeholder {
	color: #9a948e;
	opacity: 1;
}

.brf-wrap select.brf-input {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6560' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.brf-wrap textarea.brf-input {
	resize: vertical;
	min-height: 96px;
}

.brf-wrap .brf-input:focus {
	border-color: var(--brf-accent);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .22);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brf-accent) 22%, transparent);
}

.brf-wrap .brf-in-display,
.brf-wrap .brf-out-display {
	cursor: default;
	background-color: var(--brf-readonly-bg);
	padding-left: 12px;
	padding-right: 12px;
	text-overflow: ellipsis;
}

/* error state always wins over custom border styling */
.brf-wrap .brf-has-error .brf-input {
	border-color: var(--brf-error) !important;
}

.brf-wrap .brf-field-error {
	display: block;
	min-height: 0;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--brf-error);
}

.brf-wrap .brf-field-error:empty {
	display: none;
}

.brf-wrap .brf-dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 14px;
}

.brf-wrap .brf-nights-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 24px;
	margin: -4px 0 4px;
}

.brf-wrap .brf-nights {
	font-weight: 600;
	color: var(--brf-accent);
}

.brf-wrap .brf-clear {
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 13px;
	color: var(--brf-muted);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
	box-shadow: none;
}

.brf-wrap .brf-clear[hidden] {
	display: none;
}

/* ---------- calendar ---------- */
.brf-wrap .brf-cal {
	min-height: 120px;
	padding: 14px;
	border: 1px solid var(--brf-border);
	border-radius: var(--brf-radius);
	background: var(--brf-cal-bg);
}

.brf-wrap .brf-loading,
.brf-wrap .brf-load-error {
	padding: 36px 8px;
	text-align: center;
	color: var(--brf-muted);
}

.brf-wrap .brf-retry {
	padding: 8px 16px;
	font: inherit;
	color: var(--brf-accent-text);
	background: var(--brf-accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.brf-wrap .brf-months {
	display: grid;
	gap: 26px;
}

.brf-wrap .brf-months-2 {
	grid-template-columns: 1fr 1fr;
}

.brf-wrap .brf-month-head {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	margin-bottom: 10px;
}

.brf-wrap .brf-month-title {
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--brf-text);
}

.brf-wrap .brf-nav {
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--brf-text);
	background: transparent;
	border: 1px solid var(--brf-border);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: none;
}

.brf-wrap .brf-nav:hover:not(:disabled) {
	background: var(--brf-range);
	border-color: var(--brf-accent);
}

.brf-wrap .brf-nav:disabled {
	opacity: .3;
	cursor: not-allowed;
}

.brf-wrap .brf-weekdays,
.brf-wrap .brf-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.brf-wrap .brf-weekdays span {
	padding: 6px 0;
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--brf-muted);
}

.brf-wrap .brf-day {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--brf-day-color);
	text-align: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	box-shadow: none;
	outline-offset: -2px;
}

.brf-wrap .brf-day:hover:not(:disabled):not(.brf-start):not(.brf-end) {
	background: var(--brf-hover-bg);
	border-radius: var(--brf-day-radius);
}

.brf-wrap .brf-day:focus-visible {
	outline: 2px solid var(--brf-accent);
}

.brf-wrap .brf-day:disabled {
	cursor: not-allowed;
}

.brf-wrap .brf-day.brf-past {
	color: var(--brf-past);
	background: transparent;
}

.brf-wrap .brf-day.brf-unavail {
	color: var(--brf-unavail);
	text-decoration: line-through;
	background: var(--brf-unavail-bg);
}

.brf-wrap .brf-day.brf-blocked {
	color: var(--brf-past);
	background: transparent;
}

.brf-wrap .brf-day.brf-today::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--brf-today);
}

.brf-wrap .brf-day.brf-inrange,
.brf-wrap .brf-day.brf-hover {
	background: var(--brf-range);
	border-radius: 0;
}

.brf-wrap .brf-day.brf-start,
.brf-wrap .brf-day.brf-end,
.brf-wrap .brf-day.brf-hover-end {
	background: var(--brf-accent);
	color: var(--brf-accent-text);
	font-weight: 700;
	border-radius: var(--brf-day-radius);
}

.brf-wrap .brf-day.brf-start.brf-has-end {
	border-radius: var(--brf-day-radius) 0 0 var(--brf-day-radius);
}

.brf-wrap .brf-day.brf-end {
	border-radius: 0 var(--brf-day-radius) var(--brf-day-radius) 0;
}

.brf-wrap .brf-day.brf-hover-end {
	border-radius: 0 var(--brf-day-radius) var(--brf-day-radius) 0;
	opacity: .85;
}

.brf-wrap .brf-day.brf-start.brf-today::after,
.brf-wrap .brf-day.brf-end.brf-today::after {
	background: var(--brf-accent-text);
}

.brf-wrap .brf-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 2px 0;
	font-size: 12.5px;
	color: var(--brf-muted);
}

.brf-wrap .brf-lg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.brf-wrap .brf-lg::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--brf-border);
	background: var(--brf-cal-bg);
}

.brf-wrap .brf-lg-unavail::before {
	background: var(--brf-unavail-bg);
}

.brf-wrap .brf-lg-sel::before {
	background: var(--brf-accent);
	border-color: var(--brf-accent);
}

.brf-wrap .brf-cal-msg {
	min-height: 22px;
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--brf-muted);
}

.brf-wrap .brf-cal-msg-err {
	color: var(--brf-error);
	font-weight: 600;
}

/* ---------- privacy consent ---------- */
.brf-wrap .brf-consents {
	display: flex;
	flex-direction: column;
	gap: var(--brf-consent-gap, 10px);
	margin: 6px 0 14px;
}

.brf-wrap .brf-consent {
	margin: 0;
}

.brf-wrap .brf-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--brf-consent-color, var(--brf-text));
	cursor: pointer;
}

.brf-wrap .brf-checkbox {
	flex: 0 0 auto;
	-webkit-appearance: checkbox;
	appearance: auto;
	width: var(--brf-check-size, 20px);
	height: var(--brf-check-size, 20px);
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	accent-color: var(--brf-check-accent, var(--brf-accent));
	cursor: pointer;
}

.brf-wrap .brf-check a {
	color: var(--brf-consent-link, var(--brf-accent));
	text-decoration: underline;
}

.brf-wrap .brf-consent.brf-has-error .brf-checkbox {
	outline: 2px solid var(--brf-error);
	outline-offset: 2px;
}

.brf-wrap .brf-consent .brf-field-error {
	margin-left: calc(var(--brf-check-size, 20px) + 10px);
}

/* ---------- reCAPTCHA ---------- */
.brf-wrap .brf-captcha-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 4px 0 14px;
}

.brf-wrap .brf-recaptcha-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--brf-muted);
}

.brf-wrap .brf-recaptcha-note a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- submit / notices ---------- */
.brf-wrap .brf-notice {
	margin: 4px 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
}

.brf-wrap .brf-notice[hidden] {
	display: none;
}

.brf-wrap .brf-notice-error {
	color: #7a1a12;
	background: #fdecea;
	border: 1px solid #f5c2bd;
}

.brf-wrap .brf-submit-wrap {
	margin-top: 6px;
	text-align: left;
}

.brf-wrap .brf-submit {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 15px 24px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--brf-accent-text);
	text-align: center;
	background: var(--brf-accent);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: none;
	transition: filter .15s, transform .05s, background-color .15s, color .15s;
}

.brf-wrap .brf-submit:hover {
	filter: brightness(1.08);
}

.brf-wrap .brf-submit:active {
	transform: translateY(1px);
}

.brf-wrap .brf-submit:disabled {
	opacity: .65;
	cursor: wait;
}

/* honeypot: hidden from people, visible to bots */
.brf-wrap .brf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- success ---------- */
.brf-wrap .brf-success {
	padding: 36px 12px;
	text-align: center;
}

.brf-wrap .brf-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	font-size: 32px;
	color: var(--brf-accent-text);
	background: var(--brf-accent);
	border-radius: 50%;
}

.brf-wrap .brf-success-text {
	max-width: 520px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.6;
}

/* ---------- small screens ---------- */
@media (max-width: 600px) {
	.brf-wrap {
		padding: 18px;
		border-radius: 12px;
	}
	.brf-wrap .brf-title {
		font-size: 22px;
	}
	.brf-wrap .brf-cal {
		padding: 10px;
	}
	.brf-wrap .brf-day {
		height: 44px;
	}
	/* 16px stops iPhones zooming the page when a field is tapped */
	.brf-wrap .brf-input {
		font-size: 16px;
	}
	/* comfortable thumb-sized tap targets */
	.brf-wrap .brf-month-head {
		grid-template-columns: 44px 1fr 44px;
	}
	.brf-wrap .brf-nav {
		width: 44px;
		height: 44px;
	}
	.brf-wrap .brf-submit {
		min-height: 50px;
	}
}