/**
 * Form controls — inputs, selects, textareas, checkboxes/radios,
 * field groups, validation states, quantity stepper.
 * Visual source: approved-v1 search bar, product booking box, checkout.
 */

.nbf-field {
	display: flex;
	flex-direction: column;
	gap: var(--nbf-space-2);
	margin-block-end: var(--nbf-space-4);
}

.nbf-field__label {
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-bold);
	color: var(--nbf-color-text);
}

.nbf-field__label .nbf-field__required {
	color: var(--nbf-color-error);
}

.nbf-field__hint {
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-3);
}

.nbf-field__error {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-1);
	font-size: var(--nbf-fs-xs);
	font-weight: var(--nbf-fw-medium);
	color: var(--nbf-color-error);
}

/* --- Text-like inputs & selects --- */
.nbf-input,
.nbf-select,
.nbf-textarea {
	inline-size: 100%;
	min-block-size: var(--nbf-control-h);
	padding-block: var(--nbf-space-2);
	padding-inline: var(--nbf-space-4);
	border: 1px solid var(--nbf-color-border-strong);
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-surface);
	color: var(--nbf-color-text);
	font-size: var(--nbf-fs-xs);
	line-height: var(--nbf-lh-tight);
	transition:
		border-color var(--nbf-duration) var(--nbf-ease),
		box-shadow var(--nbf-duration) var(--nbf-ease);
}

.nbf-textarea {
	min-block-size: 6.5rem;
	resize: vertical;
	line-height: var(--nbf-lh-body);
}

.nbf-input::placeholder,
.nbf-textarea::placeholder {
	color: var(--nbf-color-text-3);
}

.nbf-input:hover,
.nbf-select:hover,
.nbf-textarea:hover {
	border-color: var(--nbf-color-primary-300);
}

.nbf-input:focus-visible,
.nbf-select:focus-visible,
.nbf-textarea:focus-visible {
	outline: none;
	border-color: var(--nbf-color-primary-500);
	box-shadow: 0 0 0 3px var(--nbf-color-primary-100);
}

.nbf-input:disabled,
.nbf-select:disabled,
.nbf-textarea:disabled {
	background: var(--nbf-color-surface-sunken);
	color: var(--nbf-color-text-3);
	cursor: not-allowed;
}

/* Validation states (aria-invalid drives styling, not class alone) */
.nbf-input[aria-invalid="true"],
.nbf-select[aria-invalid="true"],
.nbf-textarea[aria-invalid="true"] {
	border-color: var(--nbf-color-error);
}

.nbf-input[aria-invalid="true"]:focus-visible,
.nbf-select[aria-invalid="true"]:focus-visible,
.nbf-textarea[aria-invalid="true"]:focus-visible {
	box-shadow: 0 0 0 3px var(--nbf-color-error-bg);
}

/* Select chevron — logical-property aware (RTL default) */
.nbf-select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234d6075' 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: left var(--nbf-space-3) center;
	padding-inline-end: var(--nbf-space-4);
	padding-inline-start: var(--nbf-space-8);
	font-size: 14px;
}

.nbf-select:dir(ltr) {
	background-position: right var(--nbf-space-3) center;
}

/* Input with leading icon */
.nbf-input-group {
	position: relative;
	display: flex;
	align-items: center;
}

.nbf-input-group > .nbf-input {
	padding-inline-start: var(--nbf-space-10);
}

.nbf-input-group__icon {
	position: absolute;
	inset-inline-start: var(--nbf-space-3);
	display: inline-flex;
	color: var(--nbf-color-text-3);
	pointer-events: none;
}

/* --- Checkbox / radio --- */
.nbf-check {
	display: flex;
	align-items: flex-start;
	gap: var(--nbf-space-2);
	font-size: var(--nbf-fs-sm);
	line-height: var(--nbf-lh-body);
	cursor: pointer;
}

.nbf-check input[type="checkbox"],
.nbf-check input[type="radio"] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	margin-block-start: 0.3em;
	accent-color: var(--nbf-color-primary-600);
	cursor: pointer;
	flex-shrink: 0;
}

.nbf-check input:disabled,
.nbf-check:has(input:disabled) {
	cursor: not-allowed;
	color: var(--nbf-color-text-3);
}

/* --- Quantity stepper (adults / children) --- */
.nbf-stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-2);
	border: 1px solid var(--nbf-color-border-strong);
	border-radius: var(--nbf-radius-md);
	padding: var(--nbf-space-1);
	background: var(--nbf-color-surface);
}

.nbf-stepper__value {
	min-inline-size: 2.5rem;
	text-align: center;
	font-weight: var(--nbf-fw-bold);
	font-variant-numeric: tabular-nums;
}

.nbf-stepper .nbf-icon-btn {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 0;
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
	border-radius: var(--nbf-radius-sm);
}

.nbf-stepper .nbf-icon-btn:hover {
	background: var(--nbf-color-primary-100);
}

.nbf-stepper .nbf-icon-btn:disabled {
	background: var(--nbf-color-surface-sunken);
	color: var(--nbf-color-text-3);
}

/* ------------------------------------------------------------------
 * WooCommerce form fields inside themed scopes (checkout + account)
 *
 * This lives in the GLOBAL bundle because both screens need it and the
 * account pages never load checkout.css — which is exactly why the
 * "Account details" fields rendered as bare browser inputs.
 * ---------------------------------------------------------------- */
/* Woo form rows → design-system inputs.
 *
 * Scoped to checkout AND the account screen so "Account details" uses the
 * exact same styled fields as checkout instead of bare browser inputs. */
:is(.nbf-checkout, .nbf-account) .form-row {
	margin: 0 0 var(--nbf-space-4);
	padding: 0;
	display: block;
}

:is(.nbf-checkout, .nbf-account) .form-row label {
	display: block;
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-bold);
	margin-block-end: var(--nbf-space-2);
}

:is(.nbf-checkout, .nbf-account) .form-row .required {
	color: var(--nbf-color-error);
	text-decoration: none;
}

:is(.nbf-checkout, .nbf-account) .input-text,
:is(.nbf-checkout, .nbf-account) select,
:is(.nbf-checkout, .nbf-account) textarea {
	inline-size: 100%;
	min-block-size: var(--nbf-control-h);
	padding-block: var(--nbf-space-2);
	padding-inline: var(--nbf-space-4);
	border: 1px solid var(--nbf-color-border-strong);
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-surface);
	font-size: var(--nbf-fs-md);
}

:is(.nbf-checkout, .nbf-account) .input-text:focus-visible,
:is(.nbf-checkout, .nbf-account) select:focus-visible,
:is(.nbf-checkout, .nbf-account) textarea:focus-visible {
	outline: none;
	border-color: var(--nbf-color-primary-500);
	box-shadow: 0 0 0 3px var(--nbf-color-primary-100);
}

:is(.nbf-checkout, .nbf-account) .woocommerce-invalid .input-text {
	border-color: var(--nbf-color-error);
}

/* WooCommerce core lays its account and checkout columns out with floats
 * and percentage widths (.woocommerce-MyAccount-content: 68%,
 * .form-row-first/-last: 47%). Inside our grids those widths shrink the
 * grid ITEMS, which is what squeezed the account content column and the
 * email/phone fields. Neutralized here; the theme grids own the layout. */
:is(.nbf-checkout, .nbf-account) form .form-row,
:is(.nbf-checkout, .nbf-account) form .form-row-first,
:is(.nbf-checkout, .nbf-account) form .form-row-last,
:is(.nbf-checkout, .nbf-account) form .form-row-wide {
	float: none;
	inline-size: 100%;
}

.nbf-account .woocommerce-MyAccount-content,
.nbf-account .woocommerce-MyAccount-navigation {
	float: none;
	inline-size: 100%;
}

/* Labels already say "(اختیاری)"; WooCommerce appends its own optional
 * marker on top, which doubled the hint on checkout. */
:is(.nbf-checkout, .nbf-account) .form-row label .optional {
	display: none;
}