/**
 * AP/ANIEF UI Theme — shared shortcode/form components.
 *
 * @version 1.0.0
 * @author Andrea Parenti
 */

.apui-theme-scope .aplc-ui-page-shell,
.apui-theme-scope.aplc-ui-page-shell {
	inline-size: var(--apui-shortcode-shell-inline-size, 100%);
	max-inline-size: var(--apui-shortcode-shell-max-inline-size, 100%);
	margin-inline: var(--apui-shortcode-shell-margin-inline, auto);
	margin-block-start: var(--apui-shortcode-margin-top, 0);
	margin-block-end: var(--apui-shortcode-margin-bottom, 0);
	overflow-x: var(--apui-shortcode-shell-overflow-x, clip);
	background: var(--apui-shortcode-shell-bg, transparent);
	border: var(--apui-shortcode-shell-border, 0);
	box-shadow: var(--apui-shortcode-shell-shadow, none);
}

.apui-theme-scope .apui-shortcode,
.apui-theme-scope .aplc-ui-shortcode,
.apui-theme-scope.apui-shortcode,
.apui-theme-scope.aplc-ui-shortcode {
	inline-size: min(
		var(--apui-shortcode-panel-inline-size, var(--apui-shortcode-width, 900px)),
		calc(100vw - (var(--apui-shortcode-viewport-gutter, 16px) * 2))
	);
	max-inline-size: var(--apui-shortcode-panel-max-inline-size, var(--apui-shortcode-max-width, 900px));
	margin-inline: auto;
	padding: var(--apui-shortcode-padding, 16px);
	background: var(--apui-shortcode-bg, #ffffff);
	color: var(--apui-shortcode-text, var(--apui-text, #212121));
	font-family: var(--apui-font, inherit);
	border: var(--apui-shortcode-border-width, 1px) solid var(--apui-shortcode-border-color, var(--apui-border, #e0e0e0));
	border-radius: var(--apui-shortcode-radius, 8px);
	box-shadow: var(--apui-shortcode-shadow, none);
}

.apui-theme-scope .apui-shortcode--sm,
.apui-theme-scope .aplc-ui-shortcode--sm {
	--apui-shortcode-panel-inline-size: var(--apui-shortcode-width-sm, 640px);
	--apui-shortcode-panel-max-inline-size: var(--apui-shortcode-max-width-sm, 640px);
}

.apui-theme-scope .apui-shortcode--md,
.apui-theme-scope .aplc-ui-shortcode--md {
	--apui-shortcode-panel-inline-size: var(--apui-shortcode-width-md, 900px);
	--apui-shortcode-panel-max-inline-size: var(--apui-shortcode-max-width-md, 900px);
}

.apui-theme-scope .apui-shortcode--lg,
.apui-theme-scope .aplc-ui-shortcode--lg {
	--apui-shortcode-panel-inline-size: var(--apui-shortcode-width-lg, 1120px);
	--apui-shortcode-panel-max-inline-size: var(--apui-shortcode-max-width-lg, 1120px);
}

.apui-theme-scope .apui-shortcode__header,
.apui-theme-scope .aplc-ui-shortcode__header {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--apui-shortcode-header-gap, 12px);
	align-items: center;
	padding-block-end: var(--apui-shortcode-header-padding-bottom, 16px);
	margin-block-end: var(--apui-shortcode-header-margin-bottom, 24px);
	border-block-end: var(--apui-shortcode-header-border-width, 2px) solid var(--apui-shortcode-header-border-color, var(--apui-primary, #1565c0));
}

.apui-theme-scope .apui-shortcode__icon,
.apui-theme-scope .aplc-ui-shortcode__icon {
	color: var(--apui-shortcode-icon-color, var(--apui-primary, #1565c0));
	font-size: var(--apui-shortcode-icon-size, 32px);
	line-height: 1;
}

.apui-theme-scope .apui-shortcode__title,
.apui-theme-scope .aplc-ui-shortcode__title {
	margin: 0;
	color: var(--apui-shortcode-title, var(--apui-heading, #101828));
	font-size: var(--apui-shortcode-title-size, 24px);
	font-weight: var(--apui-shortcode-title-weight, 500);
	line-height: 1.25;
}

.apui-theme-scope .apui-shortcode__description,
.apui-theme-scope .aplc-ui-shortcode__description {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--apui-shortcode-description-color, var(--apui-muted, #757575));
	font-size: var(--apui-shortcode-description-size, 14px);
	line-height: 1.5;
}

.apui-theme-scope .apui-shortcode__body,
.apui-theme-scope .aplc-ui-shortcode__body {
	display: grid;
	gap: var(--apui-shortcode-body-gap, 14px);
	padding: var(--apui-shortcode-body-padding, 0);
}

.apui-theme-scope .apui-shortcode__actions,
.apui-theme-scope .aplc-ui-shortcode__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apui-shortcode-actions-gap, 16px);
	align-items: center;
	justify-content: flex-end;
	margin-block-start: var(--apui-shortcode-actions-margin-top, 32px);
	padding-block-start: var(--apui-shortcode-actions-padding-top, 24px);
}

.apui-theme-scope .apui-shortcode__footer,
.apui-theme-scope .aplc-ui-shortcode__footer {
	color: var(--apui-shortcode-footer-color, var(--apui-muted, #757575));
	font-size: var(--apui-shortcode-footer-size, 13px);
}

.apui-theme-scope label,
.apui-theme-scope .aplc-ui-field__label {
	color: var(--apui-label-color, var(--apui-primary, #1565c0));
	font-size: var(--apui-label-font-size, 14px);
	font-weight: var(--apui-label-font-weight, 500);
}

.apui-theme-scope input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.apui-theme-scope select,
.apui-theme-scope textarea {
	background: var(--apui-input-bg, #ffffff);
	color: var(--apui-input-text, #212121);
	border: var(--apui-input-border-width, 1px) solid var(--apui-input-border, #737373);
	border-radius: var(--apui-input-radius, 4px);
	box-shadow: none;
	font-size: var(--apui-input-font-size, 16px);
}

.apui-theme-scope input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.apui-theme-scope select {
	min-height: var(--apui-input-height, 42px);
	padding-inline: var(--apui-input-padding-x, 16px);
}

.apui-theme-scope textarea {
	min-height: var(--apui-textarea-height, 100px);
	padding: var(--apui-textarea-padding, 12px);
	line-height: var(--apui-textarea-line-height, 1.6);
}

.apui-theme-scope input:focus,
.apui-theme-scope select:focus,
.apui-theme-scope textarea:focus {
	border-color: var(--apui-input-focus, #1565c0);
	box-shadow: var(--apui-focus-ring, 0 0 0 2px rgba(21, 101, 192, .18));
	outline: none;
}

.apui-theme-scope .apui-button,
.apui-theme-scope .aplc-ui-button,
.apui-theme-scope button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--apui-button-gap, 8px);
	min-height: var(--apui-button-height, 42px);
	padding: var(--apui-button-padding-y, 10px) var(--apui-button-padding-x, 24px);
	border: var(--apui-button-border-width, 1px) solid var(--apui-button-border, #1565c0);
	border-radius: var(--apui-button-radius, 4px);
	background: var(--apui-button-bg, #1565c0);
	color: var(--apui-button-text, #ffffff);
	font-size: var(--apui-button-font-size, 14px);
	font-weight: var(--apui-button-weight, 500);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

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

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

.apui-theme-scope .apui-button-secondary:hover,
.apui-theme-scope .aplc-ui-button--secondary:hover {
	background: var(--apui-button-secondary-hover-bg, #e3f2fd);
	border-color: var(--apui-button-secondary-hover-border, #0d47a1);
	color: var(--apui-button-secondary-hover-text, #0d47a1);
}

@media (max-width: 640px) {
	.apui-theme-scope .apui-shortcode,
	.apui-theme-scope .aplc-ui-shortcode,
	.apui-theme-scope.apui-shortcode,
	.apui-theme-scope.aplc-ui-shortcode {
		padding: max(12px, calc(var(--apui-shortcode-padding, 16px) * .75));
	}

	.apui-theme-scope .apui-shortcode__actions,
	.apui-theme-scope .aplc-ui-shortcode__actions {
		justify-content: stretch;
	}

	.apui-theme-scope .apui-shortcode__actions > *,
	.apui-theme-scope .aplc-ui-shortcode__actions > * {
		flex: 1 1 100%;
	}
}