/* Shared native WordPress and WooCommerce form presentation. */

/* Keep form controls predictable across the parent theme and native commerce markup. */
:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(
	input:not([type]),
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="month"],
	input[type="week"],
	input.input-text,
	textarea,
	select
) {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 3rem;
	padding-block: var(--space-3);
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-button);
	background-color: var(--color-white);
	color: var(--color-ink);
	font-size: var(--font-size-body);
	line-height: var(--line-height-ui);
	transition:
		border-color var(--motion-fast) var(--motion-ease),
		background-color var(--motion-fast) var(--motion-ease),
		color var(--motion-fast) var(--motion-ease);
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(textarea) {
	min-block-size: 8rem;
	resize: vertical;
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(select) {
	cursor: pointer;
}

/* Native selects remain semantic controls, but share one lightweight Sola
 * arrow so the browser's platform marker cannot be rendered twice. */
:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(select),
body.woocommerce-cart select,
body.woocommerce-checkout select,
body.woocommerce-page .sola-product-card select,
select.sola-select-with-chevron {
	appearance: none;
	-webkit-appearance: none;
	background-image: var(--sola-icon-nav-arrow-down);
	background-position: left var(--space-3) center;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	padding-inline-end: 2.75rem;
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select):hover:not(:disabled):not([readonly]) {
	border-color: var(--color-ink-soft);
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select):focus {
	border-color: var(--focus-color);
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select):focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select)::placeholder {
	color: var(--color-ink-soft);
	opacity: 1;
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select):disabled {
	border-color: var(--color-border);
	background-color: var(--color-surface);
	color: var(--color-ink-soft);
	cursor: not-allowed;
	opacity: 0.65;
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select)[readonly] {
	background-color: var(--color-surface);
	cursor: default;
}

:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select):-webkit-autofill,
:is(
	.sola-form,
	.woocommerce form,
	.woocommerce-page form,
	.comment-form,
	.search-form,
	.wp-block-search,
	.wc-block-components-quantity-selector
) :is(input, textarea, select):autofill {
	border-color: var(--color-border-strong);
	background-color: var(--color-white);
	-webkit-text-fill-color: var(--color-ink);
	caret-color: var(--color-ink);
	box-shadow: 0 0 0 1000px var(--color-white) inset;
}

/* Labels, required indicators, field groups, and helper copy. */
:is(.sola-form, .woocommerce form, .woocommerce-page form, .comment-form) :is(
	.sola-form__field,
	.sola-field,
	.form-row,
	.woocommerce-form-row,
	.comment-form-author,
	.comment-form-email,
	.comment-form-url,
	.comment-form-comment
) {
	margin-block: 0 var(--space-4);
}

:is(.sola-form, .woocommerce form, .woocommerce-page form, .comment-form) :is(
	label:not(.screen-reader-text),
	.sola-form__label,
	.sola-label
) {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--color-ink);
	font-size: var(--font-size-ui);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
}

.sola-required,
.sola-form .required,
.woocommerce form .required,
.woocommerce-page form .required,
.comment-form .required,
.woocommerce form abbr.required,
.woocommerce-page form abbr.required {
	color: var(--color-error);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.sola-form__help,
.sola-help,
.woocommerce form .form-row .description,
.woocommerce-page form .form-row .description {
	display: block;
	margin-block: var(--space-2) 0;
	color: var(--color-ink-soft);
	font-size: var(--font-size-ui);
	line-height: var(--line-height-ui);
}

.woocommerce form .form-row,
.woocommerce-page form .form-row {
	padding: 0;
}

.woocommerce form .woocommerce-input-wrapper,
.woocommerce-page form .woocommerce-input-wrapper {
	display: block;
	inline-size: 100%;
}

.sola-form fieldset,
.woocommerce form fieldset,
.woocommerce-page form fieldset {
	min-inline-size: 0;
	margin: 0 0 var(--space-4);
	padding: 0;
	border: 0;
}

.sola-form legend,
.woocommerce form legend,
.woocommerce-page form legend {
	margin-block-end: var(--space-2);
	color: var(--color-ink);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
}

/* Native checkbox and radio semantics stay intact; the label is the touch target. */
:is(.sola-form, .woocommerce form, .woocommerce-page form) :is(
	input[type="checkbox"],
	input[type="radio"]
) {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	min-block-size: 1.25rem;
	margin: 0;
	padding: 0;
	accent-color: var(--color-accent);
	cursor: pointer;
	flex: 0 0 auto;
}

:is(.sola-form, .woocommerce form, .woocommerce-page form) :is(
	label:has(input[type="checkbox"]),
	label:has(input[type="radio"]),
	.sola-form__choice,
	.sola-choice,
	.woocommerce-form__label-for-checkbox,
	.woocommerce-form__label-for-radio,
	.wc_payment_method label,
	.woocommerce-shipping-methods label,
	.woocommerce-SavedPaymentMethods-saveNew label
) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-block-size: 2.75rem;
	margin-block-end: 0;
	padding-block: var(--space-2);
	color: var(--color-ink);
	font-weight: var(--font-weight-regular);
	cursor: pointer;
}

:is(.sola-form, .woocommerce form, .woocommerce-page form) :is(
	input[type="checkbox"],
	input[type="radio"]
):disabled {
	cursor: not-allowed;
}

/* Error and success states always combine color with a boundary and text. */
:is(.sola-form__field--error, .sola-field--error, .woocommerce-invalid) > label,
:is(.sola-form__field--error, .sola-field--error, .woocommerce-invalid) > legend {
	color: var(--color-error);
}

:is(.sola-form, .woocommerce form, .woocommerce-page form) :is(
	.sola-form__field--error,
	.sola-field--error,
	.woocommerce-invalid
) :is(
	input:not([type="checkbox"]):not([type="radio"]),
	textarea,
	select
),
:is(.sola-form, .woocommerce form, .woocommerce-page form) :is(
	input[aria-invalid="true"],
	textarea[aria-invalid="true"],
	select[aria-invalid="true"]
) {
	border-color: var(--color-error);
}

:is(.sola-form__field--success, .sola-field--success, .woocommerce-validated) > label,
:is(.sola-form__field--success, .sola-field--success, .woocommerce-validated) > legend {
	color: var(--color-success);
}

:is(.sola-form, .woocommerce form, .woocommerce-page form) :is(
	.sola-form__field--success,
	.sola-field--success,
	.woocommerce-validated
) :is(
	input:not([type="checkbox"]):not([type="radio"]),
	textarea,
	select
) {
	border-color: var(--color-success);
}

/* Reusable and native notice surfaces. */
:is(
	.sola-message,
	.sola-form__message,
	.sola-form__error,
	.sola-error,
	.sola-form__success,
	.sola-success,
	.woocommerce .woocommerce-message,
	.woocommerce-page .woocommerce-message,
	.woocommerce .woocommerce-error,
	.woocommerce-page .woocommerce-error,
	.woocommerce .woocommerce-info,
	.woocommerce-page .woocommerce-info
) {
	display: block;
	margin-block: var(--space-4);
	padding-block: var(--space-3);
	padding-inline: var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-inline-start-width: 0.25rem;
	border-radius: var(--radius-button);
	background-color: var(--color-surface);
	color: var(--color-ink);
	line-height: var(--line-height-ui);
}

:is(
	.sola-message--success,
	.sola-form__success,
	.sola-success,
	.woocommerce .woocommerce-message
) {
	border-color: var(--color-success);
	border-inline-start-color: var(--color-success);
	color: var(--color-success);
}

:is(
	.sola-message--error,
	.sola-form__error,
	.sola-error,
	.woocommerce .woocommerce-error,
	.woocommerce-page .woocommerce-error
) {
	border-color: var(--color-error);
	border-inline-start-color: var(--color-error);
	color: var(--color-error);
}

:is(
	.sola-message--info,
	.woocommerce .woocommerce-info,
	.woocommerce-page .woocommerce-info
) {
	border-color: var(--color-link);
	border-inline-start-color: var(--color-link);
	color: var(--color-link);
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
	list-style: none;
}

.woocommerce .woocommerce-error li,
.woocommerce-page .woocommerce-error li {
	margin: 0;
}

/* Search fields retain native submit behavior while remaining usable on narrow screens. */
.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-2);
}

.search-form label {
	flex: 1 1 16rem;
	margin: 0;
}

.search-form .search-submit,
.wp-block-search__button {
	min-block-size: 3rem;
}

/* WooCommerce owns the reveal button markup. Keep its native eye glyph and
 * physical placement while sizing the account control's effective target. */
body.woocommerce-account .show-password-input {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem !important;
	block-size: 2.75rem !important;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	margin: 0;
	padding: 0;
	line-height: 1;
}

body.woocommerce-account .show-password-input:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* Classic WooCommerce quantities and block quantities: style existing controls only. */
.woocommerce .quantity,
.woocommerce-page .quantity,
.sola-form .quantity {
	display: inline-flex;
	align-items: stretch;
	max-inline-size: 100%;
	min-block-size: 3rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-button);
	background-color: var(--color-white);
	overflow: hidden;
}

.woocommerce .quantity:focus-within,
.woocommerce-page .quantity:focus-within,
.sola-form .quantity:focus-within,
.wc-block-components-quantity-selector:focus-within {
	border-color: var(--focus-color);
}

.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty,
.sola-form .quantity .qty,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	inline-size: 5rem;
	max-inline-size: 100%;
	min-block-size: 3rem;
	padding-inline: var(--space-2);
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--color-ink);
	text-align: center;
	unicode-bidi: plaintext;
}

.woocommerce .quantity .qty:focus,
.woocommerce-page .quantity .qty:focus,
.sola-form .quantity .qty:focus,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus {
	border-color: transparent;
}

.woocommerce .quantity > button,
.woocommerce-page .quantity > button,
.sola-form .quantity > button,
.woocommerce .quantity :is(.minus, .plus, .quantity-button),
.woocommerce-page .quantity :is(.minus, .plus, .quantity-button),
.sola-form .quantity :is(.minus, .plus, .quantity-button),
.wc-block-components-quantity-selector :is(.wc-block-components-quantity-selector__button) {
	min-inline-size: 3rem;
	min-block-size: 3rem;
	padding: 0;
	border: 0;
	background-color: var(--color-surface);
	color: var(--color-ink);
	cursor: pointer;
}

.woocommerce .quantity > button:hover:not(:disabled),
.woocommerce-page .quantity > button:hover:not(:disabled),
.sola-form .quantity > button:hover:not(:disabled),
.woocommerce .quantity :is(.minus, .plus, .quantity-button):hover:not(:disabled),
.woocommerce-page .quantity :is(.minus, .plus, .quantity-button):hover:not(:disabled),
.sola-form .quantity :is(.minus, .plus, .quantity-button):hover:not(:disabled),
.wc-block-components-quantity-selector :is(.wc-block-components-quantity-selector__button):hover:not(:disabled) {
	background-color: var(--color-surface-strong);
}

.woocommerce .quantity > button:disabled,
.woocommerce-page .quantity > button:disabled,
.sola-form .quantity > button:disabled,
.woocommerce .quantity :is(.minus, .plus, .quantity-button):disabled,
.woocommerce-page .quantity :is(.minus, .plus, .quantity-button):disabled,
.sola-form .quantity :is(.minus, .plus, .quantity-button):disabled,
.wc-block-components-quantity-selector :is(.wc-block-components-quantity-selector__button):disabled {
	background-color: var(--color-surface);
	color: var(--color-ink-soft);
	cursor: not-allowed;
	opacity: 0.65;
}

@media (max-width: 47.99rem) {
	.search-form .search-submit,
	.wp-block-search__button {
		flex: 1 1 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	:is(
		.sola-form,
		.woocommerce form,
		.woocommerce-page form,
		.comment-form,
		.search-form,
		.wp-block-search,
		.wc-block-components-quantity-selector
	) :is(input, textarea, select) {
		transition: none;
	}
}