/**
 * Crucible Insight Newsletter — front-end layout CSS.
 *
 * This file contains only structural rules for button position variants.
 * All visual styling (colors, typography, borders, spacing) is intentionally
 * left to the active theme. These rules are enqueued at a low specificity
 * and are limited to flex-direction on the fields container.
 *
 * When disable_styles is active on an instance the wrapper carries
 * .crux-newsletter-cta--no-styles; themes may use that selector to
 * apply their own fully custom rules.
 */

/* Default (inline): fields container is a flex row.
   The theme's own flex rules for .wp-block-search__input take effect
   here; this just ensures the modifier classes work correctly when
   theme classes are stripped. */
.crux-newsletter-cta__fields {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;
}

/* Below: stack fields vertically, button after inputs. */
.crux-newsletter-cta__fields--below {
	flex-direction: column;
	align-items: stretch;
}

/* Above: stack fields vertically, button before inputs (DOM order handles position). */
.crux-newsletter-cta__fields--above {
	flex-direction: column;
	align-items: stretch;
}

/* Inline: explicit row direction (default, kept for specificity parity). */
.crux-newsletter-cta__fields--inline {
	flex-direction: row;
}

/* -----------------------------------------------------------------------
   Manage form
   ----------------------------------------------------------------------- */
.crux-nl-manage__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;
}

.crux-nl-manage__input {
	flex: 1 1 240px;
	min-width: 0;
}

.crux-nl-manage__step--action {
	display: flex;
	flex-direction: column;
	gap: .75em;
}

.crux-nl-manage__action-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.crux-nl-manage__back {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: .875em;
	text-decoration: underline;
	color: inherit;
	opacity: .7;
}

.crux-nl-manage__back:hover {
	opacity: 1;
}

/* Feedback message */
.crux-newsletter-cta__message {
	width: 100%;
}

.crux-nl-success {
	color: #155724;
}

.crux-nl-error {
	color: #721c24;
}

.crux-nl-info {
	color: #0c5460;
}

/* Modal — structural reset only; colours come from the theme via
   wp-block-button__link / wp-element-button on the confirm button. */
#crux-nl-modal-overlay * {
	box-sizing: border-box;
}