/**
 * AP/ANIEF UI Theme — strict form and surface contract.
 *
 * This layer is intentionally loaded after the legacy and Divi bridges.
 * It makes native form controls share one geometry contract and restricts
 * visual chrome to the real shortcode surface.
 *
 * @version 1.2.0
 */

:where(.apui-theme-scope, .aplc-divi-safe-scope, .plugin-admin-scope) {
	--apui-control-height: var(--apui-input-height, var(--apui-field-height, 42px));
	--apui-control-padding-x: var(--apui-input-padding-x, 16px);
	--apui-control-padding-y: var(--apui-input-padding-y, 0px);
	--apui-control-radius: var(--apui-input-radius, var(--apui-radius-md, 4px));
	--apui-control-border-width: var(--apui-input-border-width, 1px);
	--apui-control-border-color: var(--apui-input-border, var(--apui-border-strong, #737373));
	--apui-control-bg: var(--apui-input-bg, var(--apui-surface, #ffffff));
	--apui-control-color: var(--apui-input-text, var(--apui-text, #212121));
	--apui-control-font-size: var(--apui-input-font-size, 16px);
	--apui-control-line-height: var(--apui-input-line-height, 1.25);
	--apui-control-focus: var(--apui-input-focus, var(--apui-primary, #1565c0));
	--apui-select-arrow: var(--apui-select-arrow, var(--apui-input-focus, var(--apui-primary, #1565c0)));
	--apui-button-min-height: var(--apui-button-height, 42px);
	--apui-button-font-weight: var(--apui-button-weight, 500);
	--apui-button-primary-bg: var(--apui-button-bg, var(--apui-primary, #1565c0));
	--apui-button-primary-border: var(--apui-button-border, var(--apui-primary, #1565c0));
	--apui-button-primary-text: var(--apui-button-text, #ffffff);
	--apui-button-primary-hover-bg: var(--apui-button-hover-bg, var(--apui-primary-hover, #0d47a1));
	--apui-button-primary-hover-border: var(--apui-button-hover-border, var(--apui-primary-hover, #0d47a1));
	--apui-button-primary-hover-text: var(--apui-button-hover-text, #ffffff);
}

/* One neutral layout rail; never a visual card. */
.aplc-divi-safe-scope .aplc-ui-page-shell,
.apui-theme-scope .aplc-ui-page-shell {
	box-sizing: border-box !important;
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* One visual surface: the direct shortcode panel or a root shortcode node. */
.aplc-divi-safe-scope .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
.apui-theme-scope .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
.aplc-divi-safe-scope:is(.apui-shortcode, .aplc-ui-shortcode),
.apui-theme-scope:is(.apui-shortcode, .aplc-ui-shortcode) {
	box-sizing: border-box !important;
	inline-size: min(100%, var(--apui-shortcode-panel-inline-size, var(--apui-shortcode-width, 900px))) !important;
	max-inline-size: min(100%, var(--apui-shortcode-panel-max-inline-size, var(--apui-shortcode-max-width, 900px))) !important;
	margin-inline: auto !important;
	background: var(--apui-shortcode-bg, var(--apui-surface, #ffffff)) !important;
	color: var(--apui-shortcode-text, var(--apui-text, #212121)) !important;
	border: var(--apui-shortcode-border-width, 1px) solid var(--apui-shortcode-border-color, var(--apui-border, #e0e0e0)) !important;
	border-radius: var(--apui-shortcode-radius, 8px) !important;
	box-shadow: var(--apui-shortcode-shadow, none) !important;
}


/*
 * Legacy templates sometimes nest one shortcode shell inside another.
 * A nested shell is layout-only: it must not draw a second border, radius
 * or shadow. Use .aplc-ui-card for an intentional inner card.
 */
.aplc-divi-safe-scope :is(.apui-shortcode, .aplc-ui-shortcode) :is(.apui-shortcode, .aplc-ui-shortcode),
.apui-theme-scope :is(.apui-shortcode, .aplc-ui-shortcode) :is(.apui-shortcode, .aplc-ui-shortcode) {
	inline-size: auto !important;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/*
 * Native fields. The select receives the same height, padding, font,
 * border and radius as a text input; its chevron is drawn with CSS.
 */
.aplc-divi-safe-scope :is(input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="month"], input[type="week"], select, textarea),
.apui-theme-scope :is(input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="month"], input[type="week"], select, textarea) {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	font-family: var(--apui-font, var(--apui-font-family, inherit)) !important;
	font-size: var(--apui-control-font-size) !important;
	font-weight: var(--apui-input-font-weight, 400) !important;
	line-height: var(--apui-control-line-height) !important;
	color: var(--apui-control-color) !important;
	background-color: var(--apui-control-bg) !important;
	border: var(--apui-control-border-width) solid var(--apui-control-border-color) !important;
	border-radius: var(--apui-control-radius) !important;
	box-shadow: none !important;
	outline: 0 !important;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.aplc-divi-safe-scope :is(input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="month"], input[type="week"], select:not([multiple]):not([size])),
.apui-theme-scope :is(input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="month"], input[type="week"], select:not([multiple]):not([size])) {
	height: var(--apui-control-height) !important;
	min-height: var(--apui-control-height) !important;
	padding: var(--apui-control-padding-y) var(--apui-control-padding-x) !important;
}

/*
 * Native listboxes are not single-line controls. Preserve their semantic
 * size attribute and guarantee a usable minimum height without relying on
 * plugin-specific legacy CSS.
 */
.aplc-divi-safe-scope select[multiple],
.apui-theme-scope select[multiple] {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	height: auto !important;
	min-height: var(--apui-listbox-min-height, var(--apui-multiselect-min-height, 132px)) !important;
	padding: var(--apui-listbox-padding, var(--apui-control-padding-y) var(--apui-control-padding-x)) !important;
	line-height: var(--apui-listbox-line-height, var(--apui-control-line-height)) !important;
}

.aplc-divi-safe-scope textarea,
.apui-theme-scope textarea {
	min-height: var(--apui-textarea-height, 100px) !important;
	padding: var(--apui-textarea-padding, 12px) !important;
	line-height: var(--apui-textarea-line-height, 1.5) !important;
	resize: vertical;
}

.aplc-divi-safe-scope select:not([multiple]):not([size]),
.apui-theme-scope select:not([multiple]):not([size]) {
	-webkit-appearance: none !important;
	appearance: none !important;
	padding-right: calc(var(--apui-control-padding-x) + 30px) !important;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--apui-select-arrow) 50%),
		linear-gradient(135deg, var(--apui-select-arrow) 50%, transparent 50%) !important;
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px) !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;
}

.aplc-divi-safe-scope :is(input, select, textarea)::placeholder,
.apui-theme-scope :is(input, select, textarea)::placeholder {
	color: var(--apui-input-placeholder, var(--apui-muted, #757575)) !important;
	opacity: 1 !important;
}

.aplc-divi-safe-scope :is(input, select, textarea):focus,
.apui-theme-scope :is(input, select, textarea):focus {
	border-color: var(--apui-control-focus) !important;
	box-shadow: var(--apui-focus-ring, 0 0 0 3px rgba(21, 101, 192, .18)) !important;
}

/* Unified action buttons, excluding modal/icon/link controls. */
.aplc-divi-safe-scope :is(.apui-button, .aplc-ui-button, .et_pb_button, button[type="submit"], input[type="submit"]),
.apui-theme-scope :is(.apui-button, .aplc-ui-button, .et_pb_button, button[type="submit"], input[type="submit"]) {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: var(--apui-button-height, 42px) !important;
	padding: var(--apui-button-padding-y, 10px) var(--apui-button-padding-x, 24px) !important;
	border: var(--apui-button-border-width, 1px) solid var(--apui-button-bg, var(--apui-primary, #1565c0)) !important;
	border-radius: var(--apui-button-radius, 4px) !important;
	background: var(--apui-button-bg, var(--apui-primary, #1565c0)) !important;
	color: var(--apui-button-text, #ffffff) !important;
	font-family: var(--apui-font, var(--apui-font-family, inherit)) !important;
	font-size: var(--apui-button-font-size, 14px) !important;
	font-weight: var(--apui-button-weight, 500) !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.aplc-divi-safe-scope :is(.apui-button, .aplc-ui-button, .et_pb_button, button[type="submit"], input[type="submit"]):hover,
.apui-theme-scope :is(.apui-button, .aplc-ui-button, .et_pb_button, button[type="submit"], input[type="submit"]):hover {
	border-color: var(--apui-button-hover-border, var(--apui-primary-hover, #0d47a1)) !important;
	background: var(--apui-button-hover-bg, var(--apui-primary-hover, #0d47a1)) !important;
	color: var(--apui-button-hover-text, #ffffff) !important;
}

.aplc-divi-safe-scope :is(.apui-button-secondary, .aplc-ui-button--secondary),
.apui-theme-scope :is(.apui-button-secondary, .aplc-ui-button--secondary) {
	border-color: var(--apui-button-secondary-border, var(--apui-primary, #1565c0)) !important;
	background: var(--apui-button-secondary-bg, #ffffff) !important;
	color: var(--apui-button-secondary-text, var(--apui-primary, #1565c0)) !important;
}

.aplc-divi-safe-scope :is(.apui-button-secondary, .aplc-ui-button--secondary):hover,
.apui-theme-scope :is(.apui-button-secondary, .aplc-ui-button--secondary):hover {
	border-color: var(--apui-button-secondary-hover-border, var(--apui-primary-hover, #0d47a1)) !important;
	background: var(--apui-button-secondary-hover-bg, var(--apui-soft, #e3f2fd)) !important;
	color: var(--apui-button-secondary-hover-text, var(--apui-primary-hover, #0d47a1)) !important;
}

@media (max-width: 640px) {
	.aplc-divi-safe-scope .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
	.apui-theme-scope .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
	.aplc-divi-safe-scope:is(.apui-shortcode, .aplc-ui-shortcode),
	.apui-theme-scope:is(.apui-shortcode, .aplc-ui-shortcode) {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
	}
}


/*
 * Surface Contract v1
 * -------------------
 * Every migrated plugin must expose exactly one visual shell. The layout
 * rail is 80% of the viewport (bounded by a safe gutter and a desktop max),
 * while the actual surface has uniform padding, border, radius and shadow.
 *
 * The contract tokens intentionally differ from legacy --apui-shortcode-*
 * values so old plugin CSS cannot silently reintroduce per-plugin geometry.
 */
:where(.apui-theme-scope, .aplc-divi-safe-scope, .plugin-admin-scope) {
	--apui-runtime-shell-width: var(--apui-shortcode-contract-width, 80vw);
	--apui-runtime-shell-max-width: var(--apui-shortcode-contract-max-width, 1440px);
	--apui-runtime-shell-gutter: var(--apui-shortcode-contract-min-gutter, 16px);
	--apui-runtime-shell-padding: var(--apui-shortcode-contract-padding, 20px);
	--apui-runtime-shell-border-width: var(--apui-shortcode-contract-border-width, 1px);
	--apui-runtime-shell-border-color: var(--apui-shortcode-contract-border-color, var(--apui-shortcode-border-color, var(--apui-border, #e0e0e0)));
	--apui-runtime-shell-radius: var(--apui-shortcode-contract-radius, var(--apui-shortcode-radius, 8px));
	--apui-runtime-shell-shadow: var(--apui-shortcode-contract-shadow, var(--apui-shortcode-shadow, 0 8px 24px rgba(16, 24, 40, .08)));
}

.aplc-divi-safe-scope .aplc-ui-page-shell,
.apui-theme-scope .aplc-ui-page-shell {
	/*
	 * The rail owns geometry only. It is deliberately not a card where an
	 * explicit standard shortcode panel is available.
	 */
	inline-size: 100% !important;
	max-inline-size: none !important;
}

/* Standard shell: one panel, 80% viewport width, always with chrome. */
:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
:where(.aplc-divi-safe-scope, .apui-theme-scope) > :is(.apui-shortcode, .aplc-ui-shortcode),
:where(.aplc-divi-safe-scope, .apui-theme-scope):is(.apui-shortcode, .aplc-ui-shortcode) {
	box-sizing: border-box !important;
	inline-size: min(
		var(--apui-runtime-shell-width),
		calc(100vw - (var(--apui-runtime-shell-gutter) * 2)),
		var(--apui-runtime-shell-max-width)
	) !important;
	max-inline-size: none !important;
	margin-inline: auto !important;
	padding: var(--apui-runtime-shell-padding) !important;
	background: var(--apui-shortcode-bg, var(--apui-surface, #ffffff)) !important;
	color: var(--apui-shortcode-text, var(--apui-text, #212121)) !important;
	border: var(--apui-runtime-shell-border-width) solid var(--apui-runtime-shell-border-color) !important;
	border-radius: var(--apui-runtime-shell-radius) !important;
	box-shadow: var(--apui-runtime-shell-shadow) !important;
}

/*
 * Legacy fallback: where a patched plugin has the common rail but did not
 * provide .apui-shortcode/.aplc-ui-shortcode, the rail itself becomes the
 * single visible surface. :has() prevents a duplicate card when a real
 * standard panel exists inside it.
 */
:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell:not(:has(> :is(.apui-shortcode, .aplc-ui-shortcode))) {
	box-sizing: border-box !important;
	inline-size: min(
		var(--apui-runtime-shell-width),
		calc(100vw - (var(--apui-runtime-shell-gutter) * 2)),
		var(--apui-runtime-shell-max-width)
	) !important;
	max-inline-size: none !important;
	margin-inline: auto !important;
	padding: var(--apui-runtime-shell-padding) !important;
	background: var(--apui-shortcode-bg, var(--apui-surface, #ffffff)) !important;
	color: var(--apui-shortcode-text, var(--apui-text, #212121)) !important;
	border: var(--apui-runtime-shell-border-width) solid var(--apui-runtime-shell-border-color) !important;
	border-radius: var(--apui-runtime-shell-radius) !important;
	box-shadow: var(--apui-runtime-shell-shadow) !important;
}

/* Never allow a nested legacy surface to redraw chrome. */
:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode) :is(.apui-shortcode, .aplc-ui-shortcode) {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Small viewports use the full available rail but retain the same surface contract. */
@media (max-width: 760px) {
	:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
	:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell:not(:has(> :is(.apui-shortcode, .aplc-ui-shortcode))) {
		inline-size: calc(100vw - (var(--apui-runtime-shell-gutter) * 2)) !important;
		padding: max(16px, calc(var(--apui-runtime-shell-padding) * .8)) !important;
	}
}


/*
 * Divi parent geometry contract (0.2.234)
 * ----------------------------------------
 * The Divi row/module is the only owner of external width and centering.
 * A plugin shell consumes the full available inline space of that parent and
 * never adds left/right margins of its own.
 */
:where(.apui-theme-scope, .aplc-divi-safe-scope, .plugin-admin-scope) {
	--apui-runtime-shell-width: var(--apui-shortcode-contract-width, 100%);
	--apui-runtime-shell-max-width: var(--apui-shortcode-contract-max-width, 100%);
	--apui-runtime-shell-gutter: var(--apui-shortcode-contract-min-gutter, 0px);
	--apui-runtime-shell-margin-inline-start: var(--apui-shortcode-contract-margin-inline-start, 0px);
	--apui-runtime-shell-margin-inline-end: var(--apui-shortcode-contract-margin-inline-end, 0px);
}

:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell,
:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell > :is(.apui-shortcode, .aplc-ui-shortcode),
:where(.aplc-divi-safe-scope, .apui-theme-scope) > :is(.apui-shortcode, .aplc-ui-shortcode),
:where(.aplc-divi-safe-scope, .apui-theme-scope):is(.apui-shortcode, .aplc-ui-shortcode),
:where(.aplc-divi-safe-scope, .apui-theme-scope) .aplc-ui-page-shell:not(:has(> :is(.apui-shortcode, .aplc-ui-shortcode))) {
	inline-size: 100% !important;
	width: 100% !important;
	max-inline-size: 100% !important;
	max-width: 100% !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
}