/*!
 * Baly UI — form kit (fields, choices, file, alert, success, single-field form).
 *
 * Handle: `bch-ui-forms` (depends on `bch-ui`). Registered by the theme, NOT enqueued
 * globally: list it in your stylesheet's deps on pages that render it.
 * The bch_ui_*() helpers also enqueue it as a fallback. See the primitives doc.
 */

/* ── 9. Forms */
.bsy-form { display: flex; flex-direction: column; gap: var(--bsy-space-8); }
/* The kit's display:flex blocks would otherwise beat the [hidden] attribute. */
.bsy-form[hidden], .bsy-form__done[hidden], .bsy-form__alert[hidden] { display: none; }
.bsy-form__note { margin: 0; font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small); color: var(--bsy-muted); }
.bsy-form__grid {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: var(--bsy-space-5);
}
.bsy-form__wide { grid-column: 1 / -1; }
@media (min-width: 641px) {
	.bsy-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bsy-form__sec { display: flex; flex-direction: column; gap: var(--bsy-space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.bsy-form__sec-h {
	box-sizing: border-box;
	inline-size: 100%; /* a <legend> otherwise shrinks to its text and the rule stops short */
	display: flex; align-items: center; gap: var(--bsy-space-3);
	margin: 0 0 var(--bsy-space-5); /* a <legend> ignores the fieldset gap */ padding: 0 0 var(--bsy-space-3);
	border-block-end: 1px solid var(--bsy-line);
	font-size: var(--bsy-text-md); font-weight: var(--bsy-fw-semibold); line-height: var(--bsy-leading-heading);
	color: var(--bsy-ink);
}
.bsy-form__num {
	display: grid; place-items: center; flex: none;
	width: 28px; height: 28px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-grey-100);
	font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-bold); line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bsy-field { display: flex; flex-direction: column; gap: var(--bsy-space-2); min-width: 0; margin: 0; }
.bsy-field__label, .bsy-fieldset__legend {
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium); line-height: 1.4;
	color: var(--bsy-ink);
}
.bsy-field__opt { font-weight: var(--bsy-fw-regular); color: var(--bsy-muted); }
.bsy-field__req { color: var(--bsy-error); }

.bsy-input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--bsy-size-field);
	margin: 0;
	padding: 0 var(--bsy-space-4);
	border: 1px solid var(--bsy-field-line);
	border-radius: var(--bsy-radius-field);
	background: var(--bsy-white);
	color: var(--bsy-ink);
	font-family: var(--bsy-font); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-regular);
	line-height: 1.5;
	appearance: none;
}
.bsy-input::placeholder { color: var(--bsy-muted); opacity: 1; }
.bsy-input[aria-invalid="true"],
.bsy-field--invalid .bsy-input { border: 1.5px solid var(--bsy-error); }
.bsy-input:disabled {
	background: var(--bsy-grey-50);
	color: var(--bsy-muted);
	border-color: var(--bsy-line-strong);
	cursor: not-allowed;
}
textarea.bsy-input, .bsy-input--area {
	min-height: 120px;
	padding: var(--bsy-space-3) var(--bsy-space-4);
	line-height: var(--bsy-leading-relaxed);
	resize: vertical;
}
/* Numbers typed and shown left-to-right; an Arabic placeholder stays RTL. */
.bsy-input--ltr { direction: ltr; unicode-bidi: plaintext; text-align: end; }
.bsy-input--pill { border-radius: var(--bsy-radius-pill); }

.bsy-select { position: relative; display: block; }
.bsy-select > .bsy-input { padding-inline-end: 44px; cursor: pointer; }
.bsy-select__ic {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--bsy-space-4);
	width: var(--bsy-size-icon); height: var(--bsy-size-icon);
	transform: translateY(-50%);
	color: var(--bsy-fg2);
	pointer-events: none;
}
.bsy-select__ic svg { display: block; width: 100%; height: 100%; }

.bsy-field--invalid .bsy-field__help { display: none; } /* the error line repeats the example */
.bsy-field__help { margin: 0; font-size: var(--bsy-text-sm); line-height: 1.5; color: var(--bsy-muted); }
.bsy-field__error {
	display: flex; align-items: flex-start; gap: 6px;
	margin: 0;
	font-size: var(--bsy-text-sm); line-height: 1.5;
	color: var(--bsy-error);
}
.bsy-field__error[hidden] { display: none; }
.bsy-field__error svg { flex: none; width: 16px; height: 16px; margin-block-start: 2px; }
.bsy-field__count {
	align-self: flex-end;
	font-size: var(--bsy-text-sm); line-height: 1.5;
	color: var(--bsy-muted);
	font-variant-numeric: tabular-nums;
}

.bsy-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bsy-fieldset__legend { padding: 0; margin: 0 0 var(--bsy-space-2); }
.bsy-choices { display: flex; flex-wrap: wrap; gap: var(--bsy-space-2); margin: 0; padding: 0; list-style: none; }
.bsy-choices--stack { flex-direction: column; align-items: stretch; }

/* Radio pill: 44 tall, 18px dot. */
.bsy-radio {
	display: inline-flex; align-items: center; gap: 10px;
	box-sizing: border-box;
	min-height: var(--bsy-size-tap);
	padding: 0 var(--bsy-space-4);
	border: 1px solid var(--bsy-line-strong);
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-white);
	color: var(--bsy-ink);
	font-family: var(--bsy-font); font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium);
	line-height: 1.4;
	cursor: pointer;
}
.bsy-radio__in, .bsy-check__box {
	flex: none;
	margin: 0;
	appearance: none;
	background: var(--bsy-white);
	cursor: pointer;
}
.bsy-radio__in {
	width: 18px; height: 18px;
	border: 1.5px solid var(--bsy-field-line);
	border-radius: var(--bsy-radius-pill);
}
.bsy-radio__in:checked {
	border-color: var(--bsy-brand);
	background: var(--bsy-brand);
	box-shadow: inset 0 0 0 3.5px var(--bsy-white);
}
.bsy-radio:has(.bsy-radio__in:checked) { border-color: var(--bsy-brand); background: var(--bsy-brand-lighter); }
/* Invalid group (fieldset/field with aria-invalid or .bsy-field--invalid): red pill borders. */
:is(.bsy-field--invalid, [aria-invalid="true"]) .bsy-radio { border-color: var(--bsy-error); }
.bsy-radio__in:focus-visible, .bsy-check__box:focus-visible { outline-offset: 2px; }

/* Checkbox: 20px box, radius 4. The tick is a white stroke drawn in an SVG mask. */
.bsy-check {
	display: flex; align-items: flex-start; gap: 10px;
	font-family: var(--bsy-font); font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small);
	color: var(--bsy-fg2);
	cursor: pointer;
}
.bsy-check__box {
	position: relative;
	width: 20px; height: 20px;
	margin-block-start: 2px;
	border: 1.5px solid var(--bsy-field-line);
	border-radius: var(--bsy-radius-xs);
}
.bsy-check__box:checked { background: var(--bsy-brand); border-color: var(--bsy-brand); }
.bsy-check__box:checked::after {
	content: "";
	position: absolute; inset: 1px;
	background: var(--bsy-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bsy-check[aria-invalid="true"] .bsy-check__box,
.bsy-check__box[aria-invalid="true"] { border-color: var(--bsy-error); }
.bsy-check a { color: var(--bsy-brand); }

/* File: a real <input type="file"> inside its label. */
.bsy-file {
	position: relative;
	display: flex; align-items: center; gap: var(--bsy-space-3);
	box-sizing: border-box;
	padding: var(--bsy-space-4);
	border: 1px dashed var(--bsy-line-strong);
	border-radius: var(--bsy-radius-field);
	background: var(--bsy-white);
	cursor: pointer;
}
.bsy-file > input[type="file"] {
	position: absolute; opacity: 0;
	width: 1px; height: 1px;
	pointer-events: none;
}
.bsy-file:has(> input:focus-visible) {
	outline: var(--bsy-focus-ring-width) solid var(--bsy-focus-ring-color);
	outline-offset: var(--bsy-focus-ring-offset);
}
.bsy-file__ic {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 40px; height: 40px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-grey-50);
	color: var(--bsy-fg2);
}
.bsy-file__ic svg { width: var(--bsy-size-icon); height: var(--bsy-size-icon); }
.bsy-file__t {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
	font-size: var(--bsy-text-sm); line-height: 1.5; color: var(--bsy-ink);
	overflow-wrap: anywhere;
}
.bsy-file__t > :first-child { font-weight: var(--bsy-fw-medium); } /* title 14/500 */
.bsy-file__s { font-size: var(--bsy-text-sm); color: var(--bsy-muted); } /* hint 14 muted */
.bsy-file__bar {
	display: block; width: 100%; height: 4px;
	border: 0; border-radius: var(--bsy-radius-pill);
	background: var(--bsy-grey-100);
	appearance: none; overflow: hidden;
}
.bsy-file__bar::-webkit-progress-bar { background: var(--bsy-grey-100); }
.bsy-file__bar::-webkit-progress-value { background: var(--bsy-brand); }
.bsy-file__bar::-moz-progress-bar { background: var(--bsy-brand); }
.bsy-file--busy, .bsy-file--done, .bsy-file--error { border-style: solid; }
.bsy-file--done .bsy-file__ic { background: var(--bsy-ok-bg); color: var(--bsy-ok); }
.bsy-file--error { border-color: var(--bsy-error); }
.bsy-file--error .bsy-file__ic { background: var(--bsy-error-light); color: var(--bsy-error); }
.bsy-file--error .bsy-file__s { color: var(--bsy-error); }

/* Error summary after a failed submit (role="alert", focus moves to it or the first field). */
.bsy-form__alert {
	margin: 0;
	padding: var(--bsy-space-3) var(--bsy-space-4);
	border-radius: var(--bsy-radius-field);
	background: var(--bsy-error-light);
	color: var(--bsy-ink);
	font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small);
}
.bsy-form__alert ul { margin: var(--bsy-space-1) 0 0; padding-inline-start: var(--bsy-space-5); }
.bsy-form__alert a { color: var(--bsy-error); font-weight: var(--bsy-fw-semibold); }

/* Success panel: replaces the form and receives focus (tabindex="-1"). */
.bsy-form__done {
	display: flex; align-items: flex-start; gap: var(--bsy-space-4);
	padding: var(--bsy-space-6);
	border: 1px solid var(--bsy-line);
	border-radius: var(--bsy-radius-card);
}
.bsy-form__done-ic {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 48px; height: 48px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-ok-bg); color: var(--bsy-ok);
}
.bsy-form__done-ic svg { width: var(--bsy-size-icon-lg); height: var(--bsy-size-icon-lg); }
.bsy-form__done-t { margin: 0; font-size: var(--bsy-text-lg); font-weight: var(--bsy-fw-bold); line-height: var(--bsy-leading-heading); color: var(--bsy-ink); }
.bsy-form__done-p { margin: 6px 0 0; font-size: var(--bsy-text-base); line-height: var(--bsy-leading-relaxed); color: var(--bsy-fg2); }

/* Single-field form (phone sign-up, search): pill field + pill button, 48 each.
   Put these classes on INNER wrappers, never on a <form> whose class
   attribute analytics reads (see the doc). */
.bsy-oneline { display: flex; flex-direction: column; gap: var(--bsy-space-2); }
.bsy-oneline__row { display: flex; flex-direction: column; gap: var(--bsy-space-2); }
.bsy-oneline .bsy-input { border-radius: var(--bsy-radius-pill); }
.bsy-oneline .bsy-btn { min-height: var(--bsy-size-btn-lg); padding-inline: var(--bsy-space-8); }
@media (min-width: 641px) {
	.bsy-oneline__row { flex-direction: row; align-items: stretch; }
	.bsy-oneline__row > .bsy-input, .bsy-oneline__row > .bsy-oneline__field { flex: 1 1 auto; min-width: 0; }
	/* On a brand panel: one white pill holding field and button. */
	.bsy-oneline--on-brand .bsy-oneline__row {
		gap: var(--bsy-space-2);
		padding: 4px;
		border-radius: var(--bsy-radius-pill);
		background: var(--bsy-white);
	}
	.bsy-oneline--on-brand .bsy-oneline__row .bsy-input { border-color: transparent; }
	.bsy-oneline--on-brand .bsy-oneline__row:focus-within {
		outline: var(--bsy-focus-ring-width) solid var(--bsy-focus-ring-color-inverse);
		outline-offset: var(--bsy-focus-ring-offset);
	}
}
/* Phones on blue: field and button stack, so the button turns white. */
@media (max-width: 640px) {
	.bsy-oneline--on-brand .bsy-btn--primary { background: var(--bsy-white); color: var(--bsy-brand); }
}
.bsy-oneline--on-brand .bsy-field__label,
.bsy-oneline--on-brand .bsy-field__help { color: var(--bsy-white); }