/*
 * Tailwind is pulled in without its Preflight layer on purpose.
 *
 * Preflight targets bare element selectors
 * (*, a, button, h1-h6, img, table, ul...). This stylesheet is
 * enqueued on a WordPress admin screen, so a global Preflight
 * would strip the borders, link colours and heading styles off
 * WordPress's own admin menu, admin bar and notices. The same
 * reset is applied below, scoped to the plugin's root element.
 */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css";
@config "../../../tailwind.config.js";
@source "../Main.jsx";
@source "../admin/**/*.{js,jsx}";

/* Keep reset margins below utilities and their spacing rules. */
@layer base {

	:where(#arrayfunnel-admin-app, #arrayfunnel-admin-app *) {
		margin: 0;
	}
}

/* Resolve accents under the active WordPress admin color scheme. */
@theme inline {
	--color-arrayfunnel-primary: var(--wp-admin-theme-color, #2271b1);
	--color-arrayfunnel-subtle: #f6f7f7;
	--color-arrayfunnel-success: #007017;
	--color-arrayfunnel-danger: #b32d2e;
	--color-arrayfunnel-accent: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 8%, white);
	--color-arrayfunnel-background: #f0f0f1;
	--color-arrayfunnel-text: #1d2327;
	--color-arrayfunnel-muted: #666;
	--color-arrayfunnel-border: #ddd;
}

:where(#arrayfunnel-admin-app) {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	-webkit-tap-highlight-color: transparent;

	&,
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		box-sizing: border-box;
		padding: 0;
		border: 0 solid;
	}

	p,
	ol,
	ul,
	li,
	figure {
		margin: 0;
	}

	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit;
	}

	a {
		color: inherit;
		text-decoration: inherit;
	}

	b,
	strong {
		font-weight: bolder;
	}

	code,
	kbd,
	samp,
	pre {
		font-family: ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
		font-size: 1em;
	}

	small {
		font-size: 80%;
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}

	summary {
		display: list-item;
	}

	ol,
	ul,
	menu {
		list-style: none;
	}

	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block;
		vertical-align: middle;
	}

	img,
	video {
		max-width: 100%;
		height: auto;
	}

	button,
	input,
	select,
	optgroup,
	textarea,
	::file-selector-button {
		font: inherit;
		letter-spacing: inherit;
		color: inherit;
		border-radius: 0;
		background-color: transparent;
		opacity: 1;
	}

	::placeholder {
		opacity: 1;
		color: color-mix(in oklab, currentcolor 50%, transparent);
	}

	textarea {
		resize: vertical;
	}

	button,
	input:where([type="button"], [type="reset"], [type="submit"]),
	::file-selector-button {
		appearance: button;
	}

	[hidden]:where(:not([hidden="until-found"])) {
		display: none !important;
	}
}

/* All visual tokens stay inside the plugin; WordPress chrome stays native. */
#arrayfunnel-admin-app {
	--arrayfunnel-primary: var(--wp-admin-theme-color, #2271b1);
	--arrayfunnel-primary-hover: var(--wp-admin-theme-color-darker-10, #135e96);
	--arrayfunnel-border: #ddd;
	--arrayfunnel-text: #333;
	--arrayfunnel-muted: #666;
	--text-sm: 13px;
	--text-xs: 12px;
	color: var(--arrayfunnel-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	line-height: 1.5;

	button,
	input,
	select,
	textarea {
		font-family: inherit;
	}

	a:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--arrayfunnel-primary);
		outline-offset: 2px;
	}

	.arrayfunnel-page__title {
		margin: 0;
		padding: 0;
		color: #1d2327;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4;
	}

	.arrayfunnel-page__subtitle {
		margin-top: 8px;
		color: #50575e;
		font-size: 13px;
	}
}

body.toplevel_page_arrayfunnel #wpcontent {
	padding-left: 0;
}

body.toplevel_page_arrayfunnel #wpbody-content > :is(.notice, .update-nag) {
	margin: 16px 20px;
}

.arrayfunnel-admin-shell {
	min-width: 0;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	background: #f0f0f1;
}

.arrayfunnel-page {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

.arrayfunnel-page__header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 32px);
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	min-height: 76px;
	padding: 14px 20px;
	border-bottom: 1px solid #e1e1e1;
	background: #fff;
	box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
}

.arrayfunnel-page__heading {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.arrayfunnel-page__action {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.arrayfunnel-admin-content {
	min-width: 0;
	padding: 0;
}

.arrayfunnel-page__content {
	min-width: 0;
	padding: 20px 20px max(90px, var(--arrayfunnel-actions-height, 90px));
}

.arrayfunnel-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 6px;
	background: #fff;
}

.arrayfunnel-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 0;
}

#arrayfunnel-admin-app .arrayfunnel-card__title {
	margin: 0;
	padding: 0;
	color: var(--arrayfunnel-text);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}

.arrayfunnel-card__body {
	padding: 16px;
}

.arrayfunnel-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.arrayfunnel-toggle {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
}

.arrayfunnel-toggle .arrayfunnel-switch {
	margin-top: 1px;
}

#arrayfunnel-admin-app .arrayfunnel-field__label {
	display: block;
	color: var(--arrayfunnel-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

#arrayfunnel-admin-app .arrayfunnel-field__description {
	margin-top: 4px;
	color: var(--arrayfunnel-muted);
	font-size: 12px;
	line-height: 1.5;
}

.arrayfunnel-input-group {
	display: flex;
	align-items: stretch;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 4px;
	background: #fff;
	transition: border-color 150ms, box-shadow 150ms;
}

#arrayfunnel-admin-app .arrayfunnel-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 34px;
	min-height: 34px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--arrayfunnel-text);
	font-size: 16px;
	line-height: 1.5;
}

.arrayfunnel-input-addon {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	background: #f8f9fa;
	color: var(--arrayfunnel-muted);
	font-size: 14px;
	white-space: nowrap;
}

.arrayfunnel-input-addon--prefix {
	border-right: 1px solid var(--arrayfunnel-border);
}

.arrayfunnel-input-addon--suffix {
	border-left: 1px solid var(--arrayfunnel-border);
}

#arrayfunnel-admin-app .arrayfunnel-select,
#arrayfunnel-admin-app textarea:not(.arrayfunnel-storefront-preview *) {
	width: 100%;
	max-width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 4px;
	background-color: #fff;
	color: var(--arrayfunnel-text);
	font-size: 16px;
	line-height: 1.5;
}

#arrayfunnel-admin-app select.arrayfunnel-select {
	padding-right: 30px;
}

#arrayfunnel-admin-app textarea:not(.arrayfunnel-storefront-preview *) {
	min-height: 100px;
	padding: 8px 12px;
}

#arrayfunnel-admin-app :is(.arrayfunnel-select, textarea):focus,
.arrayfunnel-input-group:focus-within {
	border-color: var(--arrayfunnel-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--arrayfunnel-primary) 10%, transparent);
}

#arrayfunnel-admin-app .arrayfunnel-button {
	gap: 6px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 2.1538;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

#arrayfunnel-admin-app .arrayfunnel-button--primary {
	border-color: var(--arrayfunnel-primary);
	background: var(--arrayfunnel-primary);
	color: #fff;

	&:hover:not(:disabled) {
		border-color: var(--arrayfunnel-primary-hover);
		background: var(--arrayfunnel-primary-hover);
	}
}

#arrayfunnel-admin-app .arrayfunnel-button--secondary {
	border-color: var(--arrayfunnel-primary);
	background: #f6f7f7;
	color: var(--arrayfunnel-primary);

	&:hover:not(:disabled) {
		border-color: var(--arrayfunnel-primary-hover);
		background: #f0f0f1;
		color: var(--arrayfunnel-primary-hover);
	}
}

#arrayfunnel-admin-app .arrayfunnel-button--ghost {
	color: var(--arrayfunnel-primary);

	&:hover:not(:disabled) {
		background: color-mix(in srgb, var(--arrayfunnel-primary) 8%, white);
	}
}

#arrayfunnel-admin-app .arrayfunnel-button--danger {
	border-color: #b32d2e;
	background: #b32d2e;
	color: #fff;

	&:hover:not(:disabled) {
		background: #8a2424;
	}
}

#arrayfunnel-admin-app .arrayfunnel-button--medium {
	min-height: 40px;
	padding: 0 16px;
}

#arrayfunnel-admin-app .arrayfunnel-button--large {
	min-height: 44px;
	padding: 0 20px;
}

#arrayfunnel-admin-app .arrayfunnel-button:disabled {
	border-color: #dcdcde;
	background: #f6f7f7;
	color: #a7aaad;
	cursor: not-allowed;
}

.arrayfunnel-alert svg {
	flex-shrink: 0;
	margin-top: 2px;
}

/* Match ArraySubs' floating settings actions, within the native WP content. */
.arrayfunnel-settings-actions__inner {
	position: fixed;
	inset-inline-start: 160px;
	inset-inline-end: 0;
	bottom: 10px;
	z-index: 100;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.arrayfunnel-settings-actions__content {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: min(600px, calc(100% - 40px));
	padding: 5px 10px;
	border-radius: 4px;
	background: rgb(255 255 255 / 40%);
	box-shadow: 0 -6px 36px rgb(0 0 0 / 16%), 0 10px 36px rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 6%);
	backdrop-filter: blur(4px);
	pointer-events: auto;
}

.arrayfunnel-settings-actions__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	margin-inline-start: auto;
}

#arrayfunnel-admin-app .arrayfunnel-settings-actions__setup {
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--arrayfunnel-primary);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: underline;
	cursor: pointer;

	&:disabled {
		color: #8c8f94;
		cursor: not-allowed;
	}
}

#arrayfunnel-admin-app .arrayfunnel-settings-actions__updated {
	margin: 0;
	color: #696969;
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.arrayfunnel-settings-actions__status {
	max-width: 360px;
	font-size: 12px;
	line-height: 1.4;
}

.arrayfunnel-settings-actions__status[role="alert"] {
	color: #b32d2e;
}

body.folded .arrayfunnel-settings-actions__inner {
	inset-inline-start: 36px;
}

@media (min-width: 783px) and (max-width: 960px) {

	body.auto-fold .arrayfunnel-settings-actions__inner {
		inset-inline-start: 36px;
	}
}

@media (max-width: 782px) {

	body.toplevel_page_arrayfunnel #wpcontent {
		padding-left: 0;
	}

	.arrayfunnel-page__header {
		top: 46px;
		min-height: 76px;
		gap: 12px;
		padding: 12px 16px;
	}

	.arrayfunnel-page__heading,
	.arrayfunnel-page__action {
		flex-basis: 100%;
	}

	.arrayfunnel-page__content {
		padding: 16px 16px max(110px, var(--arrayfunnel-actions-height, 110px));
	}

	body .arrayfunnel-settings-actions__inner,
	body.folded .arrayfunnel-settings-actions__inner {
		inset-inline-start: 0;
	}

	.arrayfunnel-settings-actions__content {
		gap: 10px;
		max-width: calc(100% - 24px);
	}

	.arrayfunnel-settings-actions__content > .arrayfunnel-button {
		flex: 1;
		justify-content: center;
		white-space: nowrap;
	}

	.arrayfunnel-settings-actions__meta {
		flex-basis: 100%;
		order: 1;
		align-items: center;
		margin-inline-start: 0;
		text-align: center;
	}
}

@media (max-width: 600px) {

	.arrayfunnel-page__header {
		top: 0;
	}
}

/* The module grid follows ArraySubs' body and footer card structure. */
.arrayfunnel-modules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.arrayfunnel-modules__controls {
	display: flex;
	max-width: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.arrayfunnel-modules__search {
	position: relative;
	display: flex;
	flex: 1 1 220px;
	align-items: center;
	min-width: 0;

	> svg {
		position: absolute;
		inset-inline-start: 12px;
		color: #646970;
		pointer-events: none;
	}
}

#arrayfunnel-admin-app .arrayfunnel-modules__search input {
	width: 100%;
	min-width: 0;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 6px 38px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;

	&:focus {
		border-color: var(--arrayfunnel-primary);
		outline: none;
		box-shadow: 0 0 0 1px var(--arrayfunnel-primary);
	}

	&::-webkit-search-cancel-button {
		appearance: none;
	}
}

.arrayfunnel-modules__clear {
	position: absolute;
	inset-inline-end: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	color: #646970;
	cursor: pointer;
}

.arrayfunnel-module-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 4%);

	&.is-on {
		border-color: color-mix(in srgb, var(--arrayfunnel-primary) 40%, #dcdcde);
	}
}

.arrayfunnel-module-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 20px;

	> p {
		color: #50575e;
		font-size: 13px;
		line-height: 1.6;
	}
}

.arrayfunnel-module-card__header {
	display: flex;
	align-items: center;
	gap: 12px;

	h3 {
		min-width: 0;
		color: #1d2327;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.4;
		overflow-wrap: anywhere;
	}
}

.arrayfunnel-module-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--arrayfunnel-primary) 10%, #fff);
	color: var(--arrayfunnel-primary);
}

.arrayfunnel-module-card.is-off .arrayfunnel-module-card__icon {
	background: #f0f0f1;
	color: #646970;
}

.arrayfunnel-module-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 12px 20px;
	border-top: 1px solid #f0f0f1;
	background: #f6f7f7;
}

.arrayfunnel-module-card__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #007017;
	font-size: 13px;
	font-weight: 600;
}

#arrayfunnel-admin-app .arrayfunnel-module-card__configure {
	border-radius: 2px;
	color: var(--arrayfunnel-primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover {
		color: var(--arrayfunnel-primary-hover);
	}
}

.arrayfunnel-module-badge {
	margin-inline-start: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: #f0f0f1;
	color: #50575e;
	font-size: 12px;
	font-weight: 600;
}

@media (max-width: 1200px) {

	.arrayfunnel-modules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {

	.arrayfunnel-modules {
		grid-template-columns: minmax(0, 1fr);
	}

	#arrayfunnel-admin-app .arrayfunnel-modules__search input {
		min-height: 44px;
		font-size: 16px;
	}
}

/* Shared admin controls: storefront colors appear only in preview swatches. */
.arrayfunnel-choice-field {
	min-width: 0;
	padding: 0;
	border: 0;
}

.arrayfunnel-choice-field > legend {
	margin-bottom: 6px;
}

/* WP resets fieldset margins; keep grouped choices spaced like other fields. */
.arrayfunnel-choice-field:not(:last-child) {
	margin-block-end: 16px;
}

.arrayfunnel-choice-group {
	display: grid;
	grid-template-columns: repeat(var(--arrayfunnel-choice-columns, 3), minmax(0, 1fr));
	gap: 8px;
}

#arrayfunnel-admin-app .arrayfunnel-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 4px;
	background: #fff;
	color: var(--arrayfunnel-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	transition: border-color 150ms, background-color 150ms, color 150ms;

	&:hover:not(:disabled) {
		border-color: var(--arrayfunnel-primary);
		background: color-mix(in srgb, var(--arrayfunnel-primary) 4%, white);
	}

	&.is-selected {
		border-color: var(--arrayfunnel-primary);
		background: color-mix(in srgb, var(--arrayfunnel-primary) 8%, white);
		color: var(--arrayfunnel-primary-hover);
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}
}

#arrayfunnel-admin-app .arrayfunnel-choice--with-description {
	justify-content: flex-start;
	text-align: start;
}

.arrayfunnel-choice__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.arrayfunnel-choice__label {
	overflow-wrap: anywhere;
}

.arrayfunnel-choice__description {
	color: var(--arrayfunnel-muted);
	font-size: 12px;
	line-height: 1.5;
}

.arrayfunnel-choice__swatch {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: 50%;
}

#arrayfunnel-admin-app .arrayfunnel-choice-field--compact .arrayfunnel-choice {
	min-height: 30px;
	padding: 4px 10px;
	white-space: nowrap;
}

#arrayfunnel-admin-app .arrayfunnel-search-control {
	width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 4px 12px 4px 32px;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 4px;
	background: #fff;
	color: var(--arrayfunnel-text);
	font-size: 16px;
	line-height: 1.5;

	&:focus {
		border-color: var(--arrayfunnel-primary);
		outline: none;
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--arrayfunnel-primary) 10%, transparent);
	}
}

.arrayfunnel-search-results {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 40;
	max-height: 220px;
	margin-top: 4px;
	padding: 4px;
	overflow-y: auto;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.arrayfunnel-search-results__option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px;
	border-radius: 3px;
	color: var(--arrayfunnel-text);
	font-size: 13px;
	text-align: start;
	cursor: pointer;

	&:hover {
		background: color-mix(in srgb, var(--arrayfunnel-primary) 8%, white);
	}
}

.arrayfunnel-panel {
	padding: 12px;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 4px;
	background: #f6f7f7;
}

.arrayfunnel-selected-product {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--arrayfunnel-primary);
	border-radius: 4px;
	background: color-mix(in srgb, var(--arrayfunnel-primary) 6%, white);
	color: var(--arrayfunnel-text);
	font-size: 13px;
}

.arrayfunnel-selected-product__remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	color: var(--arrayfunnel-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.arrayfunnel-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 22px;
	padding: 1px 6px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: #f0f0f1;
	color: #50575e;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

.arrayfunnel-badge--success {
	background: #edfaef;
	color: #007017;
}

.arrayfunnel-badge--warning {
	background: #fff8e5;
	color: #996800;
}

.arrayfunnel-badge--info {
	background: color-mix(in srgb, var(--arrayfunnel-primary) 8%, white);
	color: var(--arrayfunnel-primary-hover);
}

.arrayfunnel-table {
	width: 100%;
	border-collapse: collapse;
	color: var(--arrayfunnel-text);
	font-size: 13px;

	th,
	td {
		padding: 10px 12px;
		border-bottom: 1px solid var(--arrayfunnel-border);
		text-align: start;
	}

	th {
		background: #f6f7f7;
		color: #50575e;
		font-weight: 500;
	}

	tbody tr:last-child td {
		border-bottom: 0;
	}
}

#arrayfunnel-admin-app .arrayfunnel-alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.6;
}

.arrayfunnel-alert--info {
	border-color: color-mix(in srgb, var(--arrayfunnel-primary) 30%, white);
	background: color-mix(in srgb, var(--arrayfunnel-primary) 5%, white);
	color: var(--arrayfunnel-primary-hover);
}

.arrayfunnel-alert--success {
	border-color: #b8e6bf;
	background: #edfaef;
	color: #007017;
}

.arrayfunnel-alert--warning {
	border-color: #f0d78c;
	background: #fff8e5;
	color: #996800;
}

.arrayfunnel-alert--error {
	border-color: #f0b8b8;
	background: #fcf0f1;
	color: #b32d2e;
}

#arrayfunnel-admin-app :is(.arrayfunnel-input, .arrayfunnel-select):disabled {
	background: #f6f7f7;
	color: #8c8f94;
	cursor: not-allowed;
}

.arrayfunnel-button .arrayfunnel-spinner {
	border-color: color-mix(in srgb, currentcolor 25%, transparent);
	border-top-color: currentcolor;
}

@media (max-width: 600px) {

	.arrayfunnel-choice-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.arrayfunnel-choice-field--compact .arrayfunnel-choice-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 4px;
	}
}

.arrayfunnel-confirm-dialog {
	width: 100%;
	max-width: 420px;
	padding: 24px;
	border: 1px solid var(--arrayfunnel-border);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 32px rgb(0 0 0 / 20%);
}

.arrayfunnel-editor-fields {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}