/*
 * Midwest Armor Notify — customer-facing OOS form.
 *
 * Visual language matches the chrome footer's "Dispatch" newsletter
 * panel: mono uppercase label, light-on-utility background, accent-
 * orange button overlay on the input. Uses the chrome theme tokens
 * (--mw-ink, --mw-util, --mw-accent, etc.) so the form auto-switches
 * day/night via html[data-mw-mode="night"]. Sensible fallbacks for
 * any future site that doesn't define the tokens.
 */

.mwa-notify {
	box-sizing: border-box;
	margin: 24px 0;
	padding: 20px;
	background: var( --mw-util, #E8E9EB );
	border: 1px solid var( --mw-border, rgba( 20, 20, 22, 0.10 ) );
	color: var( --mw-ink, #141416 );
	font-family: var( --mw-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif );
}

.mwa-notify *,
.mwa-notify *::before,
.mwa-notify *::after {
	box-sizing: border-box;
}

.mwa-notify[hidden] {
	display: none;
}

/* Title — mirrors .mw-cf-dispatch__label */
.mwa-notify__title {
	margin: 0 0 14px;
	font-family: var( --mw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var( --mw-ink, #141416 );
}

/* Sub copy — mirrors .mw-cf-dispatch__body */
.mwa-notify__sub {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --mw-ink-muted, rgba( 20, 20, 22, 0.58 ) );
}

/* ETA line — same muted color as .mwa-notify__sub but mono so the
 * date stands out as a fact rather than marketing copy. Anti-hype:
 * no countdown, just "Week of {Mon}". Sits between sub and form. */
.mwa-notify__eta {
	margin: -10px 0 18px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --mw-ink-muted, rgba( 20, 20, 22, 0.62 ) );
	font-family: var( --mw-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace );
	letter-spacing: 0.01em;
}
.mwa-notify__eta[hidden] {
	display: none;
}

/* Visually-hidden label (SR-only) */
.mwa-notify__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Row — input with button overlaid on the right edge */
.mwa-notify__row {
	position: relative;
}

/* Input + button rules use !important on color/background because the
 * form lives inside the WC variations_form on a product page where
 * WooCommerce + Elementor Pro's product widget + the theme apply
 * aggressive button/input rules that win the cascade. Scoped to our
 * .mwa-notify__* classes so nothing else is affected. */

.mwa-notify__input {
	width: 100% !important;
	background: var( --mw-input-bg, #FFFFFF ) !important;
	border: 1px solid var( --mw-border, rgba( 20, 20, 22, 0.10 ) ) !important;
	padding: 14px 140px 14px 14px !important;
	color: var( --mw-ink, #141416 ) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	outline: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: border-color 0.15s, background-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.mwa-notify__input:focus {
	border-color: var( --mw-ink, #141416 ) !important;
}

.mwa-notify__btn {
	position: absolute !important;
	right: 4px !important;
	top: 4px !important;
	bottom: 4px !important;
	padding: 0 18px !important;
	background: var( --mw-accent, #D97A4A ) !important;
	background-color: var( --mw-accent, #D97A4A ) !important;
	color: var( --mw-accent-text, #FFFFFF ) !important;
	font-family: var( --mw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace ) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: opacity 0.15s;
	-webkit-appearance: none;
	appearance: none;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1 !important;
}

.mwa-notify__btn:hover:not(:disabled),
.mwa-notify__btn:focus:not(:disabled) {
	background: var( --mw-accent, #D97A4A ) !important;
	background-color: var( --mw-accent, #D97A4A ) !important;
	color: var( --mw-accent-text, #FFFFFF ) !important;
	opacity: 0.9 !important;
	outline: 0 !important;
}

.mwa-notify__btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* Honeypot — off-screen, screen-reader hidden */
.mwa-notify__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Status (post-submit) — mirrors .mw-cf-dispatch__status */
.mwa-notify__status {
	margin-top: 14px;
	padding: 10px 12px;
	background: var( --mw-input-bg, #FFFFFF );
	border-left: 2px solid var( --mw-border, rgba( 20, 20, 22, 0.10 ) );
	color: var( --mw-ink, #141416 );
	font-size: 12.5px;
	line-height: 1.45;
}

.mwa-notify__status[hidden] {
	display: none;
}

.mwa-notify__status.is-success {
	border-left-color: #3E8E41;
}

.mwa-notify__status.is-error {
	border-left-color: #C24242;
}

/* Mobile: button drops below input full-width */
@media (max-width: 480px) {
	.mwa-notify__input {
		padding-right: 14px;
	}
	.mwa-notify__btn {
		position: static;
		width: 100%;
		margin-top: 8px;
		padding: 14px 18px;
	}
}