/* ==========================================================================
   VIC Theme — Form controls
   Inputs, selects, textareas, checkboxes, radios, labels, validation.
   Values come from tokens.css (--input-*, --label-*, --gap-field, --focus-*).

   Base rules use :where() (zero specificity) so plugins/forms with their own
   styling are not overridden accidentally. The Elementor Pro Form widget is
   bridged explicitly at the end (per-widget Style-tab settings still win).

   Errors and success are never colour-only: messages carry text and an icon.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Text-like fields
   -------------------------------------------------------------------------- */
/* The WordPress admin bar is excluded (inside :where(), so specificity stays 0). */
:where(
	input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"], #wpadminbar *),
	select:not(#wpadminbar *),
	textarea:not(#wpadminbar *)
) {
	width: 100%;
	min-height: var(--input-height);
	padding: 0 var(--input-pad-x);
	border: var(--input-border);
	border-radius: var(--input-radius);
	background-color: var(--color-background);
	color: var(--color-heading);
	font-family: var(--font-sans);
	font-size: var(--text-body-size);    /* 16px — also prevents iOS zoom on focus */
	font-weight: var(--weight-regular);
	line-height: var(--text-body-line);
	transition: var(--transition-colors), box-shadow var(--duration-base) var(--ease-standard);
}

:where(textarea) {
	min-height: var(--textarea-min-height);
	padding-block: var(--space-3);
	resize: vertical;
}

:where(select) {
	padding-inline-end: var(--space-10);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2334465B' stroke-width='1.75' 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 var(--space-3) center;
	background-size: var(--icon-md);
}

::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

/* Focus: the global 2px VIC-blue outline + blue border + soft halo. */
:where(input, select, textarea):focus-visible {
	border-color: var(--vic-blue);
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: 1px;
	box-shadow: var(--focus-ring);
}

:where(input, select, textarea):disabled {
	background-color: var(--color-surface-soft);
	color: var(--color-muted);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Checkbox / radio
   -------------------------------------------------------------------------- */
:where(input[type="checkbox"], input[type="radio"]) {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--vic-blue);
	vertical-align: middle;
}

/* A label wrapping a checkbox/radio keeps a 44px tap target. */
.vic-check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--touch-target);
	color: var(--color-body);
	font-size: var(--text-body-size);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Labels, hints, field groups
   -------------------------------------------------------------------------- */
:where(label:not(#wpadminbar *)),
.vic-label {
	color: var(--color-heading);
	font-size: var(--label-size);
	font-weight: var(--label-weight);
	line-height: var(--text-body-sm-line);
}

.vic-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.vic-form {
	display: flex;
	flex-direction: column;
	gap: var(--gap-field);
}

.vic-field__hint {
	color: var(--color-muted);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}

.vic-required {
	color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Validation — border + message text + icon (never colour alone)
   -------------------------------------------------------------------------- */
:where(input, select, textarea)[aria-invalid="true"],
.vic-field--error :where(input, select, textarea) {
	border-color: var(--color-error);
}

.vic-field__error,
.vic-field__success,
.vic-form-message {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-body-sm-size);
	font-weight: var(--weight-medium);
	line-height: var(--text-body-sm-line);
}

.vic-field__error,
.vic-form-message--error {
	color: var(--color-error);
}

.vic-field__success,
.vic-form-message--success {
	color: var(--color-success);
}

/* Icon from the same Lucide outline family (alert-circle / check-circle). */
:is(.vic-field__error, .vic-form-message--error, .vic-field__success, .vic-form-message--success)::before {
	content: "";
	flex: none;
	width: var(--icon-sm);
	height: var(--icon-sm);
	margin-block-start: 3px;
	background-color: currentColor;
	-webkit-mask: var(--vic-form-icon) center / contain no-repeat;
	mask: var(--vic-form-icon) center / contain no-repeat;
}

:is(.vic-field__error, .vic-form-message--error) {
	--vic-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}

:is(.vic-field__success, .vic-form-message--success) {
	--vic-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Elementor Pro Form widget bridge
   -------------------------------------------------------------------------- */
.elementor-form .elementor-field-group :is(.elementor-field-textual, select.elementor-field) {
	min-height: var(--input-height);
	padding-inline: var(--input-pad-x);
	border: var(--input-border);
	border-radius: var(--input-radius);
	background-color: var(--color-background);
	color: var(--color-heading);
	font-family: var(--font-sans);
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

.elementor-form .elementor-field-group textarea.elementor-field-textual {
	min-height: var(--textarea-min-height);
	padding-block: var(--space-3);
}

.elementor-form .elementor-field-group :is(.elementor-field-textual, select.elementor-field):focus-visible {
	border-color: var(--vic-blue);
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: 1px;
	box-shadow: var(--focus-ring);
}

.elementor-form .elementor-field-group .elementor-field-label {
	color: var(--color-heading);
	font-size: var(--label-size);
	font-weight: var(--label-weight);
}

.elementor-form .elementor-message.elementor-message-danger {
	color: var(--color-error);
}

.elementor-form .elementor-message.elementor-message-success {
	color: var(--color-success);
}