/*
* CozyStay — Site-wide form refinement
*
* A presentation layer over the theme's base form styles, aimed at the forms
* a visitor actually fills in: Contact Form 7, the comment form, search,
* WooCommerce checkout / account, and MailChimp signups.
*
* Deliberately scoped to those contexts rather than to bare input/select
* selectors. The room booking bar, the room search widgets and the Elementor
* reservation filters share the same elements but carry their own tightly
* tuned layout — a global element-level restyle would break them.
*
* Contents
*   1. Shared tokens
*   2. Field primitives (within enhanced contexts)
*   3. Labels, help text, required marks
*   4. Checkboxes, radios, acceptance
*   5. Buttons
*   6. Contact Form 7
*   7. Comment form
*   8. Search form
*   9. WooCommerce forms
*  10. MailChimp for WP
*  11. Dark colour scheme
*/

/* ---------------------------------------------------------------------------
* 1. Shared tokens
* ------------------------------------------------------------------------- */

:root {
	--csf-field-bg: #fff;
	--csf-field-bg-focus: #fff;
	--csf-field-bd: rgba(0, 0, 0, 0.14);
	--csf-field-bd-hover: rgba(0, 0, 0, 0.26);
	--csf-field-bd-focus: var(--primary-color, #b99d75);
	--csf-field-ring: rgba(185, 157, 117, 0.18);
	--csf-field-radius: 6px;
	--csf-field-height: 52px;
	--csf-field-pad-x: 16px;
	--csf-label-color: var(--content-color, #333632);
	--csf-muted: rgba(0, 0, 0, 0.55);
	--csf-error: #c0392b;
	--csf-error-bg: rgba(192, 57, 43, 0.07);
	--csf-success: #2e7d5b;
	--csf-success-bg: rgba(46, 125, 91, 0.08);
	--csf-gap: 22px;
}

/*
* One list, reused throughout. Every selector below is prefixed with one of
* these contexts so the rules cannot reach the booking or search forms.
*/

/* ---------------------------------------------------------------------------
* 2. Field primitives
* ------------------------------------------------------------------------- */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="password"],
.wpcf7-form select,
.wpcf7-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.mc4wp-form input[type="text"],
.mc4wp-form input[type="email"] {
	width: 100%;
	height: var(--csf-field-height);
	padding: 5px var(--csf-field-pad-x);
	background: var(--csf-field-bg);
	border: 1px solid var(--csf-field-bd);
	border-radius: var(--csf-field-radius);
	color: var(--csf-label-color);
	font-family: var(--body-font, inherit);
	font-size: 15px;
	line-height: 1.6;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form textarea,
.comment-form textarea,
.woocommerce form .form-row textarea {
	height: auto;
	min-height: 130px;
	padding-top: 13px;
	padding-bottom: 13px;
	line-height: 1.7;
	resize: vertical;
}

.wpcf7-form input:hover,
.wpcf7-form select:hover,
.wpcf7-form textarea:hover,
.comment-form input:hover,
.comment-form textarea:hover,
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover {
	border-color: var(--csf-field-bd-hover);
}

/*
* A visible ring rather than a colour-only change: a 1px border shift is easy
* to miss, and keyboard users need to be able to tell where they are.
*/
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.mc4wp-form input:focus {
	outline: 0;
	background: var(--csf-field-bg-focus);
	border-color: var(--csf-field-bd-focus);
	box-shadow: 0 0 0 3px var(--csf-field-ring);
}

/* Native select arrow is inconsistent across platforms; appearance:none above
* removes it, so one is drawn back on. */
.wpcf7-form select,
.woocommerce form .form-row select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

.wpcf7-form ::-webkit-input-placeholder,
.comment-form ::-webkit-input-placeholder { color: var(--csf-muted); }
.wpcf7-form ::placeholder,
.comment-form ::placeholder { color: var(--csf-muted); opacity: 1; }

/* ---------------------------------------------------------------------------
* 3. Labels, help text, required marks
* ------------------------------------------------------------------------- */

.wpcf7-form label,
.comment-form label,
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 7px;
	color: var(--csf-label-color);
	font-family: var(--body-font, inherit);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

.wpcf7-form .csf-help,
.woocommerce form .form-row .description {
	display: block;
	margin-top: 6px;
	color: var(--csf-muted);
	font-size: 13px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce form .form-row .required,
.wpcf7-form label .required {
	color: var(--csf-error);
	text-decoration: none;
	border: 0;
}

/* ---------------------------------------------------------------------------
* 4. Checkboxes, radios, acceptance
* ------------------------------------------------------------------------- */

.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-radio label,
.comment-form .comment-form-cookies-consent label,
.woocommerce form .form-row.woocommerce-validated label.checkbox,
.woocommerce form label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--csf-label-color);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
	cursor: pointer;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"],
.comment-form input[type="checkbox"],
.woocommerce form input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	border: 1px solid var(--csf-field-bd-hover);
	border-radius: 4px;
	background: var(--csf-field-bg);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form input[type="radio"] {
	border-radius: 50%;
}

.wpcf7-form input[type="checkbox"]:checked,
.wpcf7-form input[type="radio"]:checked,
.comment-form input[type="checkbox"]:checked,
.woocommerce form input[type="checkbox"]:checked {
	border-color: var(--csf-field-bd-focus);
	background-color: var(--csf-field-bd-focus);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M1 5L4.5 8.5L11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 9px;
}

.wpcf7-form input[type="checkbox"]:focus-visible,
.wpcf7-form input[type="radio"]:focus-visible,
.comment-form input[type="checkbox"]:focus-visible,
.woocommerce form input[type="checkbox"]:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--csf-field-ring);
}

/* ---------------------------------------------------------------------------
* 5. Buttons
* ------------------------------------------------------------------------- */

.wpcf7-form input[type="submit"],
.comment-form input[type="submit"],
.mc4wp-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--csf-field-height);
	padding: 0 38px;
	border: 0;
	border-radius: var(--csf-field-radius);
	background: var(--btn-bg, #b99d75);
	color: var(--btn-color, #fff);
	font-family: var(--btn-font, inherit);
	font-size: var(--btn-font-size, 15px);
	font-weight: var(--btn-font-weight, 400);
	letter-spacing: var(--btn-letter-spacing, 0.04em);
	line-height: 1;
	text-transform: var(--btn-text-transform, none);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.mc4wp-form input[type="submit"]:hover {
	background: var(--btn-bg-hover, #ab916c);
	color: var(--btn-color-hover, #fff);
}

.wpcf7-form input[type="submit"]:active,
.comment-form input[type="submit"]:active {
	transform: translateY(1px);
}

.wpcf7-form input[type="submit"]:focus-visible,
.comment-form input[type="submit"]:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--csf-field-ring);
}

.wpcf7-form input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
* 6. Contact Form 7
* ------------------------------------------------------------------------- */

/*
* Row layout system — global on purpose.
*
* These were originally scoped to the single room page, which meant the same
* form template dropped onto the home page had no grid at all: every .csr-row
* fell back to a plain block and the fields stacked into one very long
* column. The markup is portable, so the layout has to be too.
*
* A form is a stack of .csr-row bands; each band is its own grid and states
* how many columns it carries. Add .csr-compact to the form wrapper for the
* tighter variant used in narrow columns.
*/
.wpcf7-form:has(.csr-row) {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.csr-row {
	display: grid;
	grid-template-columns: repeat(var(--csr-cols, 4), minmax(0, 1fr));
	gap: 18px 20px;
	align-items: end;
}

.csr-row-1 { --csr-cols: 1; }
.csr-row-2 { --csr-cols: 2; }
.csr-row-3 { --csr-cols: 3; }
.csr-row-4 { --csr-cols: 4; }
.csr-row-5 { --csr-cols: 5; }

.csr-field {
	margin: 0;
	min-width: 0;
}

.csr-field.csr-wide {
	grid-column: 1 / -1;
}

.csr-field.csr-hidden {
	display: none;
}

.csr-row.csr-actions {
	grid-template-columns: 1fr auto;
	align-items: center;
}

/*
* Split field — two inputs sharing one label, for values that come in two
* parts such as height in metres and centimetres.
*/
.csr-split {
	display: grid;
	grid-template-columns: repeat(var(--csr-split-cols, 2), minmax(0, 1fr));
	gap: 8px;
}

.csr-split-3 { --csr-split-cols: 3; }

/*
* Unit suffix. The label sits inside the field's own padding rather than
* beside it, so a two-part row stays the same width as a single field.
*/
.csr-unit {
	position: relative;
	display: block;
}

.csr-unit .wpcf7-form-control-wrap {
	display: block;
}

.csr-unit input {
	padding-right: 42px;
}

.csr-unit i,
.csr-unit em {
	position: absolute;
	top: 50%;
	right: 14px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 13px;
	font-style: normal;
	line-height: 1;
	opacity: 0.5;
	pointer-events: none;
}

/* The validation tip is absolutely positioned by CF7 in some themes; keep it
* under the field so it cannot sit on top of the unit label. */
.csr-unit .wpcf7-not-valid-tip {
	position: static;
}

/* Number spinners steal room the unit label needs. */
.csr-unit input[type="number"]::-webkit-outer-spin-button,
.csr-unit input[type="number"]::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.csr-unit input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.rtl .csr-unit input {
	padding-right: var(--csf-field-pad-x, 16px);
	padding-left: 42px;
}

.rtl .csr-unit i,
.rtl .csr-unit em {
	right: auto;
	left: 14px;
}

/* Compact variant: for sidebars, home page columns and anywhere the form
* has to stay short. */
.wpcf7-form.csr-compact,
.csr-compact .wpcf7-form {
	gap: 12px;
}

.csr-compact .csr-row {
	gap: 12px 14px;
}

.csr-compact input[type="text"],
.csr-compact input[type="email"],
.csr-compact input[type="tel"],
.csr-compact input[type="number"],
.csr-compact input[type="date"],
.csr-compact select {
	height: 46px;
	font-size: 14px;
}

.csr-compact textarea {
	min-height: 84px;
}

.csr-compact label {
	margin-bottom: 4px;
	font-size: 11px;
}

.csr-compact input[type="submit"] {
	width: 100%;
	height: 48px;
}

.csr-compact .csr-row.csr-actions {
	grid-template-columns: 1fr;
}

@media only screen and (max-width: 1024px) {
	.csr-row-4,
	.csr-row-5 {
		--csr-cols: 2;
	}
}

@media only screen and (max-width: 767px) {
	.csr-row,
	.csr-row.csr-actions {
		--csr-cols: 1;
		grid-template-columns: 1fr;
	}
}

/*
* Stock CF7 is a stack of <p> elements. Given a plain form template this puts
* it on a two column grid, which is what most contact forms want, while any
* form that brings its own wrappers (the room reservation form, for one) is
* left alone.
*/
.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--csf-gap);
	align-items: start;
}

.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) > p {
	margin: 0;
	min-width: 0;
}

/* Long-form controls and the submit row span both columns. */
.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) > p:has(textarea),
.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) > p:has(input[type="submit"]),
.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) > p:has(.wpcf7-acceptance),
.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) > p:has(.wpcf7-checkbox),
.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)) > p:has(.wpcf7-radio) {
	grid-column: 1 / -1;
}

.wpcf7 .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

/* Validation. CF7's defaults are a red block and an inline tip with no
* relationship to the field; these tie them together. */
.wpcf7 .wpcf7-not-valid {
	border-color: var(--csf-error);
	background: var(--csf-error-bg);
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--csf-error);
	font-size: 13px;
	line-height: 1.5;
}

.wpcf7 .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: var(--csf-field-radius);
	font-size: 14px;
	line-height: 1.6;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: rgba(192, 57, 43, 0.35);
	background: var(--csf-error-bg);
	color: var(--csf-error);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(46, 125, 91, 0.35);
	background: var(--csf-success-bg);
	color: var(--csf-success);
}

.wpcf7 .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
* 7. Comment form
* ------------------------------------------------------------------------- */

.comment-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--csf-gap);
	align-items: start;
}

.comment-form > p {
	margin: 0;
	min-width: 0;
}

.comment-form .comment-form-comment,
.comment-form .comment-notes,
.comment-form .form-submit,
.comment-form .comment-form-cookies-consent,
.comment-form .logged-in-as {
	grid-column: 1 / -1;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
	margin-bottom: 4px;
	color: var(--csf-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
* 8. Search form
* ------------------------------------------------------------------------- */

.widget .search-form,
.search-results .search-form,
.error404 .search-form {
	position: relative;
	display: flex;
	gap: 10px;
}

.widget .search-form input[type="search"],
.search-results .search-form input[type="search"],
.error404 .search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--csf-field-height);
	padding: 5px var(--csf-field-pad-x);
	background: var(--csf-field-bg);
	border: 1px solid var(--csf-field-bd);
	border-radius: var(--csf-field-radius);
	font-size: 15px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget .search-form input[type="search"]:focus,
.search-results .search-form input[type="search"]:focus,
.error404 .search-form input[type="search"]:focus {
	outline: 0;
	border-color: var(--csf-field-bd-focus);
	box-shadow: 0 0 0 3px var(--csf-field-ring);
}

/* ---------------------------------------------------------------------------
* 9. WooCommerce forms
* ------------------------------------------------------------------------- */

.woocommerce form .form-row {
	margin: 0 0 var(--csf-gap);
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 7px;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--csf-error);
	background: var(--csf-error-bg);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: rgba(46, 125, 91, 0.45);
}

/* Select2, which WooCommerce uses for country / state, ships at a different
* height and radius than everything around it. */
.woocommerce .select2-container--default .select2-selection--single {
	height: var(--csf-field-height);
	border: 1px solid var(--csf-field-bd);
	border-radius: var(--csf-field-radius);
	background: var(--csf-field-bg);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: var(--csf-field-pad-x);
	color: var(--csf-label-color);
	font-size: 15px;
	line-height: calc(var(--csf-field-height) - 2px);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(var(--csf-field-height) - 2px);
	right: 12px;
}

.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--csf-field-bd-focus);
	box-shadow: 0 0 0 3px var(--csf-field-ring);
}

/* Coupon row reads as a pair of controls rather than two stray elements. */
.woocommerce form.checkout_coupon,
.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.woocommerce form.checkout_coupon .form-row {
	margin: 0;
}

/* ---------------------------------------------------------------------------
* 10. MailChimp for WP
* ------------------------------------------------------------------------- */

.mc4wp-form .mc4wp-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.mc4wp-form .mc4wp-form-fields > p {
	flex: 1 1 200px;
	margin: 0;
	min-width: 0;
}

.mc4wp-form .mc4wp-form-fields > p:has(input[type="submit"]) {
	flex: 0 0 auto;
}

.mc4wp-alert {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: var(--csf-field-radius);
	font-size: 14px;
	line-height: 1.6;
}

.mc4wp-alert.mc4wp-success {
	background: var(--csf-success-bg);
	color: var(--csf-success);
}

.mc4wp-alert.mc4wp-error {
	background: var(--csf-error-bg);
	color: var(--csf-error);
}

/* ---------------------------------------------------------------------------
* Responsive
* ------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	.comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--csf-gap: 16px;
		--csf-field-height: 48px;
	}

	.wpcf7 .wpcf7-form:not(:has(.csr-row)):not(:has(.csf-grid)),
	.comment-form {
		grid-template-columns: 1fr;
	}

	.wpcf7-form input[type="submit"],
	.comment-form input[type="submit"] {
		width: 100%;
	}

	.mc4wp-form .mc4wp-form-fields > p,
	.mc4wp-form .mc4wp-form-fields > p:has(input[type="submit"]) {
		flex: 1 1 100%;
	}

	.mc4wp-form input[type="submit"] {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
* 11. Dark colour scheme
* ------------------------------------------------------------------------- */

.dark-color,
body.dark-color {
	--csf-field-bg: rgba(255, 255, 255, 0.05);
	--csf-field-bg-focus: rgba(255, 255, 255, 0.08);
	--csf-field-bd: rgba(255, 255, 255, 0.18);
	--csf-field-bd-hover: rgba(255, 255, 255, 0.32);
	--csf-label-color: rgba(255, 255, 255, 0.92);
	--csf-muted: rgba(255, 255, 255, 0.55);
}

.rtl .wpcf7-form select,
.rtl .woocommerce form .form-row select {
	padding-right: var(--csf-field-pad-x);
	padding-left: 40px;
	background-position: left 16px center;
}

.rtl .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-right: var(--csf-field-pad-x);
	padding-left: 0;
}

.rtl .mc4wp-form input[type="submit"],
.rtl .wpcf7-form .wpcf7-spinner {
	margin: 0 12px 0 0;
}