.du-newsletter { width: 100%; }
.du-newsletter__title { margin: 0 0 .75rem; }
.du-newsletter__form { display: flex; flex-direction: column; gap: 1rem; }
.du-newsletter__row { display: flex; flex-direction: column; gap: .25rem; }
.du-newsletter__label { font-size: .85rem; font-weight: 600; }
.du-newsletter__input {
	width: 100%;
	padding: .55rem 2rem .25rem 0;
	background: #fff;
	font: inherit;
}
/*
 * Same look as the theme's `.simple-button.tertiary-button`: icon-only 34px blue
 * square with the white ↗ and no visible label. Kept self-contained (inline SVG,
 * token with a hardcoded fallback) so the plugin does not depend on theme assets.
 * The button text stays in the DOM for screen readers, just painted transparent.
 */
.du-newsletter__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	padding: 0;
	margin-bottom: 6px;
	overflow: hidden;
	border: 1px solid var(--color-du-primary, #385CC7);
	border-radius: 0;
	background-color: var(--color-du-primary, #385CC7);
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.33677 9.59556L9.33625 0.699951L0.496582 0.699951M9.33625 0.699951L0.496582 9.59556' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	color: transparent;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	text-decoration: none;
	transition: background-color .5s ease-in-out;
}
.du-newsletter__button:hover {
	background-color: color-mix(in oklab, var(--color-du-primary, #385CC7) 50%, transparent);
}
.du-newsletter__button[disabled] { opacity: .6; cursor: not-allowed; }
.du-newsletter__button.is-loading { opacity: .7; }
.du-newsletter__inline-group {
	display: flex;
	gap: .5rem;
	align-items: stretch;
}
.du-newsletter__inline-group .du-newsletter__input { flex: 1 1 auto; min-width: 0; }
.du-newsletter__inline-group .du-newsletter__button { flex: 0 0 auto; white-space: nowrap; }
.du-newsletter__row--consent { flex-direction: row; align-items: center; gap: .5rem; }
.du-newsletter__consent { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }

label.du-newsletter__consent > span {
	color: #385CC7;
	font-weight: normal;
	font-size: 16px;
	line-height:19px;
	letter-spacing: -3%;
}

.du-newsletter__message { min-height: 1.25rem; font-size: .9rem; }
.du-newsletter__message.is-success { color: #1a7f37; }
.du-newsletter__message.is-error   { color: #b42318; }