/**
 * FreePresets Account Erasure — danger-zone + notice styles.
 * Builds on .fp-acct-card (styled by freepresets-account-ui) with a red accent.
 */

.fp-ae-danger {
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
}

.fp-ae-danger__title {
	margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
	font-size: var(--wp--preset--font-size--md, 1.15rem);
	color: #b91c1c;
}

.fp-ae-danger__lead {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--custom-contrast, #334155);
}

.fp-ae-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 0.75rem);
}

/* Field layout only — input chrome (border/bg/radius/focus) comes from the
 * shared token-based rule in account-ui.css, which now includes .fp-ae-form, so
 * these fields match every other account form. */
.fp-ae-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.fp-ae-field label {
	font-size: var(--wp--preset--font-size--sm, 0.8rem);
	color: var(--wp--preset--color--custom-contrast-2, #727272);
}

.fp-ae-actions {
	margin: var(--wp--preset--spacing--20, 0.5rem) 0 0;
}

/* Buttons match the site's pill paint (see account-ui.css). The neutral button
 * (e.g. "Cancel deletion") uses the accent token; the destructive submit uses a
 * danger red — there is no danger token in theme.json, so red is intentional. */
.fp-ae-button {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: 9999px;
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	background: var(--wp--preset--color--custom-accent, #2563eb);
	color: var(--wp--preset--color--custom-base, #f9fafb);
}

.fp-ae-button:hover {
	background: var(--wp--preset--color--custom-base-inverted, #171717);
}

.fp-ae-button--danger {
	background: #dc2626;
}

.fp-ae-button--danger:hover {
	background: #b91c1c;
}

/* Outlined danger — used for the entry link on the profile page so it reads as
 * a doorway, not a commit-to-delete button. */
.fp-ae-button--danger-outline {
	background: transparent;
	color: var(--wp--preset--color--custom-error, #dc2626);
	border: 1px solid var(--wp--preset--color--custom-error, #dc2626);
}

.fp-ae-button--danger-outline:hover {
	background: var(--wp--preset--color--custom-error, #dc2626);
	color: #ffffff;
}

.fp-ae-fineprint {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.8rem);
	color: var(--wp--preset--color--custom-contrast-2, #727272);
}

.fp-ae-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Compact "Delete account" entry on the profile page. */
.fp-ae-entry__title {
	margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
	font-size: var(--wp--preset--font-size--md, 1.15rem);
}

.fp-ae-entry__text {
	margin: 0 0 var(--wp--preset--spacing--30, 0.75rem);
	color: var(--wp--preset--color--custom-contrast-2, #727272);
}

/* On the dedicated page, give the status notice room above the form/card. */
.wp-block-free-presets-notice + .fp-ae-danger,
.wp-block-free-presets-notice + .fp-acct-card {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}