/**
 * Form block styles.
 */

.wp-block-workbench-form {
	position: relative;
}

/* Ensure no border on form wrapper - doubled selector for higher specificity */
.wp-block-workbench-form.wp-block-workbench-form {
	border: none;
	border-width: 0;
	border-style: none;
	border-color: transparent;
}

.wp-block-workbench-form .wb-form {
	display: flex;
	flex-direction: column;
	gap: var(--wb-form-gap, var(--wp--style--block-gap, 1.5rem));
}

/* Match editor's is-layout-flex margin reset for form children. */
.wp-block-workbench-form .wb-form > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Label color from form-level text color */
.wp-block-workbench-form .wb-form-field__label,
.wp-block-workbench-form .wb-form-textarea__label,
.wp-block-workbench-form .wb-form-checkbox__label,
.wp-block-workbench-form .wb-form-radio-group__legend,
.wp-block-workbench-form .wb-form-checkbox-group__legend {
	color: var(--wb-label-color, inherit);
}

/* Hide form when success */
.wp-block-workbench-form.is-success .wb-form {
	display: none;
}

/* Success message */
.wb-form__success {
	padding: 1rem;
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 4px;
	color: #155724;
}

/* Error message */
.wb-form__error {
	padding: 1rem;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	color: #721c24;
}

/* Ensure hidden attribute works (CSS display overrides it otherwise) */
.wb-form__success[hidden],
.wb-form__error[hidden] {
	display: none;
}

/* Honeypot - visually hidden */
.wb-form__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/*
 * Input styles with high specificity to override theme defaults.
 * Uses form-level CSS custom properties (--wb-input-*) with WordPress theme fallbacks.
 * Doubled parent selector to beat Ollie theme's `input:not():not()` (specificity 0,2,1).
 */
.wp-block-workbench-form.wp-block-workbench-form input.wb-forms-input,
.wp-block-workbench-form.wp-block-workbench-form select.wb-forms-input,
.wp-block-workbench-form.wp-block-workbench-form textarea.wb-forms-input,
.wp-block-workbench-form.wp-block-workbench-form .wb-forms-select__trigger {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.5;
	border: 1px solid
		var(
			--wb-input-border-color,
			var(--wp--preset--color--border-light, #ccc)
		);
	border-radius: var(--wb-input-border-radius, 5px);
	background-color: var(
		--wb-input-background-color,
		var(--wp--preset--color--base, #fff)
	);
	color: var(--wb-input-text-color, var(--wp--preset--color--main, inherit));
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

/*
 * ── Select field ─────────────────────────────────────────────────────────
 *
 * Tier 1 (native <select>, no-JS fallback): reset the browser control and
 * draw our own chevron so the closed box matches the text inputs and the
 * cart-checkout selects. The open option list stays OS-native without JS.
 *
 * Tier 2 (JS enhanced): the native <select> is visually hidden — but kept in
 * the DOM so it still submits and still drives constraint validation — and a
 * custom listbox is shown in its place, giving a fully themed open state.
 */
.wp-block-workbench-form.wp-block-workbench-form select.wb-forms-input,
.wp-block-workbench-form.wp-block-workbench-form .wb-forms-select__trigger {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	cursor: pointer;
}

/* The enhanced trigger is a button; keep its label left-aligned like a value. */
.wb-forms-select__trigger {
	display: flex;
	align-items: center;
	text-align: left;
}

.wb-forms-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Placeholder (empty value) reads as muted, like a real select's placeholder. */
.wb-forms-select__trigger[data-placeholder='true'] .wb-forms-select__value {
	color: var(--wb-input-placeholder-color, #6b7280);
}

/*
 * Progressive-enhancement swap. Default (no JS): native shown, custom hidden.
 * `.is-enhanced` is added by the Interactivity view on hydration.
 */
.wb-forms-select__trigger,
.wb-forms-select__listbox {
	display: none;
}

.wb-forms-select.is-enhanced .wb-forms-select__native {
	/*
	 * Not display:none — a display:none control still submits, but hiding it
	 * this way keeps it reachable to assistive tech fallbacks and avoids any
	 * layout reflow. It is aria-hidden + tabindex -1 from the markup.
	 */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.wb-forms-select.is-enhanced .wb-forms-select__trigger {
	display: flex;
}

.wb-forms-select__field {
	position: relative;
}

.wb-forms-select__listbox {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	max-height: 16rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background-color: var(
		--wb-input-background-color,
		var(--wp--preset--color--base, #fff)
	);
	border: 1px solid
		var(--wb-input-border-color, var(--wp--preset--color--border-light, #ccc));
	border-radius: var(--wb-input-border-radius, 5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.wb-forms-select.is-enhanced .wb-forms-select__listbox:not([hidden]) {
	display: block;
}

.wb-forms-select__option {
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--wb-input-border-radius, 5px) - 2px);
	cursor: pointer;
	color: var(--wb-input-text-color, var(--wp--preset--color--main, inherit));
}

.wb-forms-select__option:hover,
.wb-forms-select__option.is-active {
	background-color: var(
		--wb-select-option-hover,
		var(--wp--preset--color--primary, #0056b3)
	);
	color: var(--wb-select-option-hover-text, #fff);
}

.wb-forms-select__option[aria-selected='true'] {
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-workbench-form.wp-block-workbench-form .wb-forms-select__trigger {
		transition: none;
	}
}

/* Upload progress bar */
.wb-form__progress {
	position: relative;
	width: 100%;
	height: 2rem;
	background-color: var(--wp--preset--color--border-light, #e9ecef);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.wb-form__progress[hidden] {
	display: none;
}

.wb-form__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: var(--wp--preset--color--primary, #0056b3);
	transition: width 0.15s ease-out;
}

.wb-form__progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--main, #333);
	z-index: 1;
	white-space: nowrap;
}