/* VELYON Email — public subscribe widget */

@keyframes vmailFadeInUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.vmail-subscribe-box {
	--vmail-accent: #43a047;
	--vmail-accent-hover: #388e3c;
	--vmail-radius: 12px;
	--vmail-field-radius: 8px;
	box-sizing: border-box;
	width: 100%;
	/* Defensive: opt out of any parent flex/grid "stretch" (e.g. Blocksy
	   equal-height footer widget columns) forcing this box taller than
	   its own content needs. "start" (not "flex-start") is used because
	   it's the value CSS Grid actually accepts — "flex-start" is
	   flexbox-only and is silently ignored in a grid container, which
	   would make this rule do nothing if the theme's footer uses grid.
	   !important is needed because a theme's own footer-column selector
	   is likely more specific than this single class. */
	height: auto !important;
	max-height: none !important;
	align-self: start !important;
	padding: 28px 32px;
	border-radius: var(--vmail-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	animation: vmailFadeInUp 0.5s ease-out;
	transition: box-shadow 0.2s ease;
}

.vmail-subscribe-box * {
	box-sizing: border-box;
}

.vmail-subscribe-form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.vmail-subscribe-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 260px;
	min-width: 0;
}

.vmail-subscribe-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.vmail-subscribe-description {
	font-size: 13px;
	opacity: 0.72;
	line-height: 1.5;
}

.vmail-subscribe-controls {
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex: 1 1 380px;
	max-width: 460px;
	flex-wrap: wrap;
}

.vmail-subscribe-email {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	border-radius: var(--vmail-field-radius);
	font-size: 14px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vmail-subscribe-email:focus {
	border-color: var(--vmail-accent);
	box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.18);
}

.vmail-subscribe-submit {
	flex: 0 0 auto;
	padding: 13px 24px;
	border: none;
	border-radius: var(--vmail-field-radius);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
	background: var(--vmail-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.vmail-subscribe-submit:hover {
	background: var(--vmail-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(67, 160, 71, 0.28);
}

.vmail-subscribe-submit:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.vmail-subscribe-submit:disabled {
	opacity: 0.65;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.vmail-subscribe-message {
	flex-basis: 100%;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease, padding 0.25s ease;
}

.vmail-subscribe-message.vmail-visible {
	max-height: 44px;
	opacity: 1;
	margin-top: 2px;
	padding: 9px 14px;
	border-radius: var(--vmail-field-radius);
}

.vmail-subscribe-message.vmail-notice-success {
	color: #1e7e34;
	background: rgba(67, 160, 71, 0.12);
}
.vmail-subscribe-message.vmail-notice-info {
	color: #1565c0;
	background: rgba(21, 101, 192, 0.1);
}
.vmail-subscribe-message.vmail-notice-error {
	color: #c62828;
	background: rgba(198, 40, 40, 0.1);
}

/* Light theme — white card, dark text, bordered input (matches reference #1) */
.vmail-theme-light {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.vmail-theme-light:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.vmail-theme-light .vmail-subscribe-title,
.vmail-theme-light .vmail-subscribe-description {
	color: #1d2327;
}
.vmail-theme-light .vmail-subscribe-email {
	background: #fff;
	border: 1.5px solid #d8d8d8;
	color: #1d2327;
}
.vmail-theme-light .vmail-subscribe-email::placeholder {
	color: #8a8a8a;
}

/* Dark theme — black card, white text, bordered input (matches reference #2) */
.vmail-theme-dark {
	background: #0a0a0a;
	border: 1px solid #2a2a2a;
}
.vmail-theme-dark:hover {
	box-shadow: 0 4px 20px rgba(67, 160, 71, 0.08);
}
.vmail-theme-dark .vmail-subscribe-title,
.vmail-theme-dark .vmail-subscribe-description {
	color: #ffffff;
}
.vmail-theme-dark .vmail-subscribe-email {
	background: rgba(255, 255, 255, 0.03);
	border: 1.5px solid #3a3a3a;
	color: #fff;
}
.vmail-theme-dark .vmail-subscribe-email::placeholder {
	color: #8a8a8a;
}
.vmail-theme-dark .vmail-subscribe-email:focus {
	border-color: var(--vmail-accent);
	box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.25);
}

/* Narrow containers: stack text, then full-width field, then full-width
   button — deliberately styled, not just "wrapped and abandoned". The
   shortcode is often dropped into a narrow column/sidebar even on a
   wide desktop screen, so this triggers on viewport width as a
   reasonable proxy since CSS container queries aren't reliable across
   older browsers/themes yet. */
@media (max-width: 600px) {
	.vmail-subscribe-box {
		padding: 22px 20px;
	}
	/* Switch to plain block layout on mobile instead of continuing to
	   patch flex-grow/shrink/basis resets across nested containers
	   (form -> controls -> email/button). Block layout heights are
	   always just content + padding with zero ambiguity — this
	   eliminates the whole class of flex-basis miscalculation bugs
	   rather than chasing another one. */
	.vmail-subscribe-form {
		display: block;
	}
	.vmail-subscribe-text {
		display: block;
		margin-bottom: 14px;
	}
	.vmail-subscribe-description {
		display: block;
		margin-top: 5px;
	}
	.vmail-subscribe-controls {
		display: block;
	}
	.vmail-subscribe-email {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
	.vmail-subscribe-submit {
		display: block;
		width: 100%;
	}
	.vmail-subscribe-message.vmail-visible {
		display: block;
	}
}