/*
 * Client Proposal Builder forms: a light base layout. Everything is
 * wrapped in :where() so it has no specificity, and a theme's own form
 * styles (.field, .choices, .row-2…) win.
 */
:where(.cprop-form) {
	--cprop-line: color-mix(in srgb, currentcolor 22%, transparent);
	--cprop-accent: #ffc107;
	--cprop-error: #c62828;
	position: relative;
}

:where(.cprop-form) :where(.field) {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
}

:where(.cprop-form) :where(.field label, legend.q) {
	font-weight: 600;
}

:where(.cprop-form) :where(.opt) {
	font-weight: 400;
	opacity: 0.7;
}

:where(.cprop-form) :where(.field input, .field select, .field textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--cprop-line);
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: transparent;
}

:where(.cprop-form) :where(.field textarea) {
	min-height: 120px;
}

:where(.cprop-form) :where(.hint) {
	font-size: 0.9em;
	opacity: 0.75;
}

:where(.cprop-form) :where(.err-msg) {
	display: none;
	margin: 0;
	color: var(--cprop-error);
	font-size: 0.9em;
}

:where(.cprop-form) :where(.invalid > .err-msg) {
	display: block;
}

:where(.cprop-form) :where(.invalid input, .invalid select, .invalid textarea) {
	border-color: var(--cprop-error);
}

:where(.cprop-form) :where(.row-2, .row-3) {
	display: grid;
	gap: 0 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.cprop-form) :where(.row-3) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 560px) {

	:where(.cprop-form) :where(.row-2, .row-3) {
		grid-template-columns: 1fr;
	}
}

:where(.cprop-form) :where(.fieldset) {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	min-width: 0;
}

:where(.cprop-form) :where(.choices) {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

:where(.cprop-form) :where(.choices.chips) {
	display: flex;
	flex-wrap: wrap;
}

:where(.cprop-form) :where(.choice) {
	position: relative;
	cursor: pointer;
}

:where(.cprop-form) :where(.choice input) {
	position: absolute;
	opacity: 0;
}

:where(.cprop-form) :where(.choice .face) {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--cprop-line);
	border-radius: 8px;
}

:where(.cprop-form) :where(.choice input:checked + .face) {
	border-color: var(--cprop-accent);
	box-shadow: inset 0 0 0 1px var(--cprop-accent);
}

:where(.cprop-form) :where(.choice input:focus-visible + .face) {
	outline: 2px solid var(--cprop-accent);
	outline-offset: 2px;
}

:where(.cprop-form) :where(.choices.cprop-list .face) {
	border: 0;
	padding: 4px 0 4px 28px;
}

:where(.cprop-form) :where(.choices.cprop-list .choice input) {
	position: absolute;
	left: 4px;
	top: 8px;
	opacity: 1;
}

:where(.cprop-form) :where(.cprop-check) {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
}

:where(.cprop-form) :where(.cprop-check input) {
	width: auto;
	margin-top: 4px;
}

:where(.cprop-form) :where(.cprop-heading) {
	margin: 8px 0 16px;
}

:where(.cprop-form) :where(.cprop-heading p) {
	margin: 6px 0 0;
	opacity: 0.8;
}

:where(.cprop-form) :where(.cprop-form-foot) {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	align-items: center;
	margin-top: 8px;
}

:where(.cprop-form) :where(.form-error) {
	display: none;
	margin: 8px 0;
	color: var(--cprop-error);
}

:where(.cprop-form) :where(.form-error.on) {
	display: block;
}

:where(.cprop-form) :where(.cprop-form-step) {
	font-size: 0.85em;
	opacity: 0.7;
}

/* Date & time slots: month calendar, then the day's open times. */
:where(.cprop-form) :where(.cprop-cal) {
	max-width: 360px;
	margin-top: 4px;
}

:where(.cprop-form) :where(.cprop-cal-head) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

:where(.cprop-form) :where(.cprop-cal-month) {
	font-weight: 600;
}

:where(.cprop-form) :where(.cprop-cal-nav, .cprop-cal-day) {
	display: grid;
	place-items: center;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-md, 8px);
	cursor: pointer;
}

:where(.cprop-form) :where(.cprop-cal-nav) {
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 1;
	border-color: var(--control, var(--cprop-line));
}

:where(.cprop-form) :where(.cprop-cal-nav:disabled) {
	opacity: 0.35;
	cursor: default;
}

:where(.cprop-form) :where(.cprop-cal-grid) {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

:where(.cprop-form) :where(.cprop-cal-wd) {
	padding: 4px 0;
	font-size: 12px;
	text-align: center;
	color: var(--muted, inherit);
	opacity: 0.8;
}

:where(.cprop-form) :where(.cprop-cal-day) {
	aspect-ratio: 1;
	min-height: 40px;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

:where(.cprop-form) :where(.cprop-cal-day:disabled) {
	opacity: 0.32;
	cursor: default;
}

:where(.cprop-form) :where(.cprop-cal-day.is-open) {
	font-weight: 600;
	background: var(--sunk, color-mix(in srgb, currentColor 6%, transparent));
	border-color: var(--control, var(--cprop-line));
}

:where(.cprop-form) :where(.cprop-cal-day.is-open:hover, .cprop-cal-nav:not(:disabled):hover) {
	border-color: var(--fg, currentColor);
}

:where(.cprop-form) :where(.cprop-cal-day[aria-pressed="true"]) {
	color: var(--bg, #fff);
	background: var(--fg, #20202a);
	border-color: var(--fg, #20202a);
}

:where(.cprop-form) :where(.cprop-cal-day:focus-visible, .cprop-cal-nav:focus-visible) {
	outline: 2px solid var(--amber, var(--cprop-accent));
	outline-offset: 2px;
}

:where(.cprop-form) :where(.cprop-slot-times) {
	margin-top: 14px;
}

:where(.cprop-form) :where(.cprop-slot-day) {
	margin: 0 0 6px;
	font-weight: 600;
}

:where(.cprop-form) :where(.cprop-slot-list) {
	margin-top: 0;
}

:where(.cprop-form) :where(.cprop-slot-zone, .cprop-slot-local, .cprop-slot-pick) {
	display: block;
	margin: 8px 0 0;
}

/*
 * Calendar and times side by side when there's room (calendar on the left,
 * the day's times on the right), stacked on phones. These layout rules use
 * real class specificity so a theme's .choices.chips flex row doesn't win.
 */
.cprop-form .cprop-slot {
	container-type: inline-size;
}

.cprop-form .cprop-slot .cprop-slot-list.choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
}

.cprop-form .cprop-slot .cprop-slot-list .face {
	justify-content: center;
	padding-right: 8px;
	padding-left: 8px;
	text-align: center;
	white-space: nowrap;
}

@container (min-width: 540px) {

	.cprop-form .cprop-slot .cprop-slot-body {
		display: grid;
		grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
		gap: 0 24px;
	}

	.cprop-form .cprop-slot .cprop-slot-times {
		display: flex;
		flex-direction: column;
		height: 0;
		min-height: 100%;
		margin-top: 4px;
		padding-left: 24px;
		border-left: 1px solid var(--line, var(--cprop-line));
	}

	.cprop-form .cprop-slot .cprop-slot-list.choices {
		flex: 1;
		align-content: start;
		min-height: 0;
		overflow-y: auto;
		padding: 2px;
	}

	.cprop-form .cprop-slot .cprop-slot-day {
		min-height: 40px;
		display: flex;
		align-items: center;
	}
}

:where(.cprop-form) :where(.cprop-slot.invalid .cprop-cal-day.is-open) {
	border-color: var(--err, var(--cprop-error));
}

:where(.cprop-form) [hidden] {
	display: none !important;
}