/**
 * Neutral opt-in styling.
 *
 * This file targets the DEFAULT class prefix only (`wme-optin`). A site that
 * sets `class_prefix` to something else — Dutch Uncles sets it to `du-optin`
 * so Milan's existing rules keep applying — should also set `enqueue_styles`
 * to false and own its own CSS. That is the whole rule: change the prefix,
 * own the paint.
 *
 * Everything here inherits. No font stack, no brand colour, no fixed text
 * colour: the form takes the surrounding type and the accent comes from one
 * custom property, so it looks like the site it is on rather than like a
 * plugin. Override --wme-accent in the theme and you are done.
 */

.wme-optin-wrap {
	--wme-accent: currentColor;
	--wme-border: rgba( 0, 0, 0, 0.18 );
	--wme-radius: 4px;
	--wme-gap: 12px;
	margin: 2em 0;
}

.wme-optin-form {
	font: inherit;
	color: inherit;
}

.wme-optin-title {
	margin: 0 0 0.6em;
	font-weight: 700;
	line-height: 1.25;
}

/* --- Inline variant ----------------------------------------------------- */

.wme-optin-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wme-gap );
	align-items: stretch;
}

.wme-optin-email-wrap {
	flex: 1 1 240px;
	min-width: 0;
}

.wme-optin-fields input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var( --wme-border );
	border-radius: var( --wme-radius );
}

.wme-optin-fields button[type="submit"],
.wme-optin-submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 20px;
	font: inherit;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
	background: transparent;
	border: 2px solid var( --wme-accent );
	border-radius: var( --wme-radius );
}

.wme-optin-fields button[type="submit"]:disabled,
.wme-optin-submit:disabled {
	cursor: default;
	opacity: 0.6;
}

/* --- Full variant ------------------------------------------------------- */

.wme-optin-field {
	margin-bottom: var( --wme-gap );
}

.wme-optin-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.wme-optin-field input[type="text"],
.wme-optin-field input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var( --wme-border );
	border-radius: var( --wme-radius );
}

.wme-optin-segment-row,
.wme-optin-privacy-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.wme-optin-privacy-row {
	margin: var( --wme-gap ) 0;
	font-size: 0.875em;
	line-height: 1.45;
}

.wme-optin-privacy-row label,
.wme-optin-segment-row label {
	margin: 0;
	font-weight: 400;
}

.wme-optin-submit {
	width: 100%;
}

/* --- Shared ------------------------------------------------------------- */

/* The honeypot. Not display:none — some bots skip hidden fields, and some
   password managers refuse to fill a form containing one. Off-screen and
   out of the tab order is the arrangement that catches the most and
   inconveniences the fewest. */
.wme-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	opacity: 0;
}

.wme-optin-legal {
	margin: 0.75em 0 0;
	font-size: 0.8125em;
	line-height: 1.5;
	opacity: 0.8;
}

.wme-optin-msg {
	margin: 0.75em 0 0;
	font-size: 0.875em;
	min-height: 1.4em;
}

.wme-optin-msg:empty {
	margin: 0;
	min-height: 0;
}

.wme-optin-ok {
	font-weight: 600;
}

.wme-optin-err {
	font-weight: 600;
}

.wme-optin-success {
	display: none;
}

@media ( max-width: 480px ) {

	.wme-optin-fields {
		display: block;
	}

	.wme-optin-email-wrap {
		margin-bottom: var( --wme-gap );
	}

	.wme-optin-fields button[type="submit"] {
		width: 100%;
	}
}