/**
 * MHB Newsletter (Brevo) — submission status styling.
 *
 * The pattern's form layout lives in the theme stylesheet. Here we only
 * style the success/error inline messages that the JS toggles.
 */

.mhb-newsletter__success {
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	color: var(--wp--preset--color--sage, #496E63);
	background: var(--wp--preset--color--parchment, #F1EADF);
	border: 1px solid var(--wp--preset--color--sand, #E8DDCB);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	animation: mhb-newsletter-success-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mhb-newsletter__success-text {
	line-height: 1.3;
}

/* Animated check badge */
.mhb-newsletter__check {
	display: inline-block;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	flex: 0 0 1.4em;
	border-radius: 50%;
	background: var(--wp--preset--color--sage, #496E63);
	color: var(--wp--preset--color--cream, #FFFDF8);
	animation: mhb-newsletter-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
}
.mhb-newsletter__check::after {
	content: "";
	position: absolute;
	top: 48%;
	left: 50%;
	width: 0.36em;
	height: 0.66em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -60%) rotate(45deg);
	transform-origin: center;
	animation: mhb-newsletter-check-draw 280ms ease-out 320ms both;
}

@keyframes mhb-newsletter-success-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mhb-newsletter-pop {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@keyframes mhb-newsletter-check-draw {
	from { opacity: 0; transform: translate(-50%, -60%) rotate(45deg) scale(0.4); }
	to   { opacity: 1; transform: translate(-50%, -60%) rotate(45deg) scale(1); }
}

/* Form fade-out while we swap to the success state */
.mhb-newsletter {
	transition: opacity 240ms ease;
}
.mhb-newsletter.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.mhb-newsletter input[disabled] {
	opacity: 0.65;
	transition: opacity var(--wp--custom--transition--fast, 150ms ease);
}

/* Submit button — press feedback + animated loading spinner */
.mhb-newsletter button[type="submit"] {
	position: relative;
	transition: transform 120ms ease,
	            background-color var(--wp--custom--transition--fast, 150ms ease),
	            opacity var(--wp--custom--transition--fast, 150ms ease);
}
.mhb-newsletter button[type="submit"]:active:not([disabled]) {
	transform: scale(0.97);
}
.mhb-newsletter.is-submitting button[type="submit"] {
	color: transparent;
	cursor: progress;
	opacity: 1;
}
.mhb-newsletter.is-submitting button[type="submit"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin-top: -0.55em;
	margin-left: -0.55em;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--cream, #FFFDF8);
	border-top-color: transparent;
	animation: mhb-newsletter-spin 0.7s linear infinite;
}
@keyframes mhb-newsletter-spin {
	to { transform: rotate(360deg); }
}

.mhb-newsletter__status:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mhb-newsletter,
	.mhb-newsletter button[type="submit"],
	.mhb-newsletter__success,
	.mhb-newsletter__check,
	.mhb-newsletter__check::after {
		transition: none !important;
		animation: none !important;
	}
	.mhb-newsletter.is-submitting button[type="submit"]::after {
		animation: mhb-newsletter-spin 1.2s linear infinite !important;
	}
}

/* Honeypot — kept in the DOM and accessible-named for screen readers' sake
 * via aria-hidden=true on the wrapper, but visually and tab-order hidden. */
.mhb-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}