/* ABOUTME: Form field styles for the booking wizard — inputs, radios, selects, datepicker. */
/* ABOUTME: Also covers form content area and the summary toggle. */

/* Form content area */
.form-content {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
}

.room-manager .form-content {
	padding: 0px;
}


.form-field .required-mark {
	color: #d8232a;
	margin-left: 0.25rem;
	font-weight: 700;
}

#form-field-unknown_total_person_count {
	height: fit-content;
	align-self: flex-end;
}

/* Select styling */
select,
::picker(select) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select {
	font-size: 1.1rem;
	background: white;
	border: 1px solid currentColor;
	border-radius: 3px;
	padding: 4px 6px;
}

select:has(option[value=""]:checked):required {
	border: 2px solid red;
}

select.required:has(option[value=""]:checked) {
	border: 2px solid red;
}

option,
optgroup {
	font-size: 1.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

/* Datepicker (wizard-only extensions) */
.wc-datepicker__date--disabled {
	font-weight: 200;
}

.wc-datepicker__year-select {
	min-width: 8ch;
}

/* Radio toggle group */
.form-field-radio {
	margin: 0 0 1.5rem;
	box-sizing: border-box;
	font-size: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0px;
}

.form-field-radio input {
	width: 0;
	height: 0;
	position: absolute;
	left: -9999px;
}

/* Mobile base: touch-friendly radio labels */
.form-field-radio input + label {
	margin: 0;
	padding: 0.75rem 0.5rem;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 50%;
	min-height: 44px;
	border: solid 1px #ddd;
	background-color: #fff;
	font-size: 1rem;
	line-height: 140%;
	text-align: center;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	transition:
		border-color 0.15s ease-out,
		color 0.25s ease-out,
		background-color 0.15s ease-out,
		box-shadow 0.15s ease-out;
}

.form-field-radio input + label:first-of-type {
	border-radius: 6px 0 0 6px;
	border-right: none;
}

.form-field-radio input + label:last-of-type {
	border-radius: 0 6px 6px 0;
	border-left: none;
}

.form-field-radio input:hover + label {
	border-color: #213140;
}

.form-field-radio input:checked + label {
	background-color: #4fd6e0;
	color: #152632;
	border-color: #138b93;
	z-index: 1;
}

.form-field-radio input:focus + label {
	outline: dotted 1px #ccc;
}

/* Checkbox tap target — 44px on mobile */
.form-field-checkbox {
	padding: 0.6rem 0.75rem;
	min-height: 44px;
}

.membership-step-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* --- Desktop (>=1024px) --- */

@media screen and (min-width: 1024px) {
	/* Compact radio labels on desktop */
	.form-field-radio input + label {
		padding: 0.05rem 0.5rem;
		display: inline-block;
		flex: 0 1 auto;
		min-height: auto;
	}

	/* Default checkbox padding on desktop */
	.form-field-checkbox {
		padding: revert;
		min-height: auto;
	}
}

/* --- Narrow mobile (<=400px) --- */

@media screen and (max-width: 400px) {
	/* Stack radio buttons vertically */
	.form-field-radio {
		flex-direction: column;
	}

	.form-field-radio input + label {
		flex: 1 1 100%;
		border-radius: 0;
	}

	.form-field-radio input + label:first-of-type {
		border-radius: 6px 6px 0 0;
		border-right: solid 1px #ddd;
		border-bottom: none;
	}

	.form-field-radio input + label:last-of-type {
		border-radius: 0 0 6px 6px;
		border-left: solid 1px #ddd;
		border-top: none;
	}
}