/**
 * Shared responsive guardrails for Zarinchap platform forms.
 *
 * This file intentionally targets platform and WooCommerce account forms only.
 * Native checkboxes, radios, range controls and SelectWoo's hidden source select
 * are excluded so a layout repair cannot create duplicate or malformed controls.
 */
:where(
	form[class^="zc-"],
	form[class*=" zc-"],
	body.wp-admin form,
	.zc-platform-admin form,
	.woocommerce-account .woocommerce-MyAccount-content form
) {
	max-width: 100%;
}

:where(
	form[class^="zc-"],
	form[class*=" zc-"],
	body.wp-admin form,
	.zc-platform-admin form,
	.woocommerce-account .woocommerce-MyAccount-content form
) *,
:where(.zc-platform-card, .zc-form-card, .zc-hub-card, .zc-account-card) * {
	box-sizing: border-box;
	min-width: 0;
}

:where(
	form[class^="zc-"],
	form[class*=" zc-"],
	body.wp-admin form,
	.zc-platform-admin form,
	.woocommerce-account .woocommerce-MyAccount-content form
) :where(input, select, textarea, button) {
	max-width: 100%;
}

:where(
	form[class^="zc-"],
	form[class*=" zc-"],
	body.wp-admin form,
	.zc-platform-admin form,
	.woocommerce-account .woocommerce-MyAccount-content form
) :where(input[type="email"], input[type="tel"], input[type="url"], input[inputmode="numeric"], input[inputmode="decimal"], input[dir="ltr"]) {
	direction: ltr;
	text-align: left;
}

:where(
	form[class^="zc-"],
	form[class*=" zc-"],
	body.wp-admin form,
	.zc-platform-admin form,
	.woocommerce-account .woocommerce-MyAccount-content form
) :where(.zc-file-name, .zc-upload-name, .filename, code, output) {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Preserve SelectWoo's source field even if another stylesheet resets it. */
:where(
	form[class^="zc-"],
	form[class*=" zc-"],
	body.wp-admin form,
	.zc-platform-admin form,
	.woocommerce-account .woocommerce-MyAccount-content form
) select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 1px !important;
	min-height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form[class*="zc-"] select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 1px !important;
	min-height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* A wide data table may scroll; its page must not. */
:where(.woocommerce-account .woocommerce-MyAccount-content, .zc-platform-admin)
	:where(.zc-table, .zc-data-table, table.shop_table, table.widefat) {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 782px) {
	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) :where(fieldset, .zc-form-grid, .zc-fields, .zc-store-form__grid, .zc-partner-form__grid, .form-row, .form-row-first, .form-row-last) {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Keep a label and its full-size control on separate, readable lines. */
	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) label:has(>
		:is(
			input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.select2-hidden-accessible),
			select:not(.select2-hidden-accessible),
			textarea,
			.select2-container
		)
	) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		line-height: 1.8;
	}

	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) label > :is(
		input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.select2-hidden-accessible),
		select:not(.select2-hidden-accessible),
		textarea,
		.select2-container
	) {
		display: block !important;
		position: relative;
		width: 100% !important;
		max-width: 100% !important;
		margin: 7px 0 0 !important;
	}

	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) label > :where(small, .description, .zc-form-help, .zc-field-help) {
		display: block;
		width: 100%;
		margin: 5px 0 0;
		line-height: 1.9;
	}

	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) :where(.required, .zc-required, .zc-form-required, [class*="required-badge"]) {
		display: inline-flex !important;
		width: auto !important;
		white-space: nowrap;
		vertical-align: baseline;
	}

	/* SelectWoo must expose exactly one visible control and keep its arrow inside. */
	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) select.select2-hidden-accessible {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		min-width: 1px !important;
		min-height: 1px !important;
		max-width: 1px !important;
		max-height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) .select2-container {
		width: 100% !important;
		max-width: 100% !important;
	}

	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		body.wp-admin form,
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) .select2-selection {
		display: block !important;
		position: relative;
		width: 100% !important;
		max-width: 100% !important;
	}

	:where(
		form[class^="zc-"],
		form[class*=" zc-"],
		.zc-platform-admin form,
		.woocommerce-account .woocommerce-MyAccount-content form
	) .select2-selection__arrow {
		inset-inline-start: 8px !important;
		inset-inline-end: auto !important;
		right: auto !important;
		left: 8px !important;
	}

	/*
	 * Account pages have accumulated a few older high-specificity flex rules.
	 * Keep this final guard equally specific so source order can reliably win.
	 */
	body.woocommerce-account .woocommerce-MyAccount-content form[class*="zc-"] label:has(>
		:is(
			input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.select2-hidden-accessible),
			select:not(.select2-hidden-accessible),
			textarea,
			.select2-container
		)
	) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content form[class*="zc-"] label > :is(
		input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.select2-hidden-accessible),
		select:not(.select2-hidden-accessible),
		textarea,
		.select2-container
	) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 7px 0 0 !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content form[class*="zc-"] label > select.select2-hidden-accessible,
	body.woocommerce-account .woocommerce-MyAccount-content form[class*="zc-"] select.select2-hidden-accessible {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		min-width: 1px !important;
		min-height: 1px !important;
		max-width: 1px !important;
		max-height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}