/**
 * MaxWin USA — Storefront pop-up styles (modal + corner/docked modes).
 *
 * STANDALONE FILE. This is NOT part of the Gulp/SCSS build — it is served as-is
 * and injected site-wide by PopupsModule::load() via Renderer::injectHead().
 * Therefore: plain CSS only, literal hex values, no SCSS syntax, no @import and
 * no external asset references. Fonts (Archivo Black / Archivo / JetBrains Mono)
 * are already loaded by the storefront's main stylesheet; they are referenced
 * here with system fallbacks only.
 *
 * NAMING RULE — every class in this file is prefixed `.mw-popup-*`. The site
 * already owns the bare `.mw-*` namespace (.mw-btn-add, .mw-hero-btn,
 * .mw-lightbox, ...), so short names like .mw-pop / .mw-body / .mw-cta are
 * forbidden here. The single exception is `.mw-hp` (the honeypot input), which
 * the existing pop-up partial already ships.
 *
 * HOSTS
 *   .mw-popup-overlay  — modal mode: fixed, dimmed backdrop, centered, blocking.
 *   .mw-popup-dock     — corner mode: fixed, no backdrop, click-through, docked.
 * Both are toggled by JS with two classes only: `show` (display) then `in`
 * (reveal). All hidden -> visible motion lives in CSS, never in inline styles.
 */

/* ==========================================================================
   1. Card
   ========================================================================== */

.mw-popup-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	background: #ffffff;
	color: #212529;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
	text-align: left;
}

.mw-popup-card * {
	box-sizing: border-box;
}

/* Brand rule across the top edge. */
.mw-popup-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: #E4002B;
	pointer-events: none;
}

.mw-popup-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #8a8a8a;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
	z-index: 2;
}

.mw-popup-close:hover {
	background: #E4002B;
	color: #ffffff;
}

.mw-popup-close:focus-visible {
	background: #E4002B;
	color: #ffffff;
	outline: 2px solid #E4002B;
	outline-offset: 2px;
}

/* ==========================================================================
   2. Card content
   ========================================================================== */

.mw-popup-body {
	padding: 38px 34px 34px;
}

.mw-popup-eyebrow {
	margin: 0 0 12px;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #E4002B;
}

.mw-popup-title {
	margin: 0 0 12px;
	font-family: "Archivo Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
	font-size: 27px;
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #0d0d0d;
	text-wrap: balance;
}

.mw-popup-text {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #4a4a4f;
}

.mw-popup-offer {
	margin: 0 0 4px;
	font-family: "Archivo Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
	font-size: 46px;
	line-height: 0.9;
	text-transform: uppercase;
	color: #E4002B;
}

.mw-popup-price {
	margin: 0 0 20px;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 15px;
	color: #0d0d0d;
}

/* ==========================================================================
   3. Call to action
   ========================================================================== */

.mw-popup-cta {
	display: inline-block;
	border: 0;
	border-radius: 0;
	background: #E4002B;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 30px;
	transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.mw-popup-cta:hover {
	background: #B80022;
	color: #ffffff;
}

.mw-popup-cta:focus-visible {
	outline: 2px solid #E4002B;
	outline-offset: 3px;
}

.mw-popup-cta--full {
	display: block;
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   4. Email capture field
   ========================================================================== */

.mw-popup-field {
	display: flex;
	margin: 6px 0 4px;
	border: 2px solid #0d0d0d;
}

.mw-popup-field input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 13px 14px;
	font: inherit;
	font-size: 14px;
	color: #0d0d0d;
	background: #ffffff;
}

.mw-popup-field input:focus {
	outline: none;
}

.mw-popup-field input:focus-visible {
	outline: 2px solid #E4002B;
	outline-offset: -2px;
}

.mw-popup-field button {
	border: 0;
	border-radius: 0;
	cursor: pointer;
	background: #0d0d0d;
	color: #ffffff;
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	padding: 0 20px;
	transition: background 0.18s ease;
}

.mw-popup-field button:hover {
	background: #E4002B;
}

.mw-popup-field button:focus-visible {
	outline: 2px solid #E4002B;
	outline-offset: 2px;
}

/* ==========================================================================
   5. Coupon / promo code
   ========================================================================== */

.mw-popup-coupon {
	position: relative;
	margin: 0 0 20px;
	padding: 20px 16px;
	border: 2px dashed #c9c5c6;
	background: #f6f3f4;
	text-align: center;
}

/* Perforation notches punched out of the card's white background. */
.mw-popup-coupon::before,
.mw-popup-coupon::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	transform: translateY(-50%);
}

.mw-popup-coupon::before {
	left: -13px;
}

.mw-popup-coupon::after {
	right: -13px;
}

.mw-popup-coupon-label {
	margin: 0 0 8px;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8a8a8f;
}

.mw-popup-code {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #0d0d0d;
	text-align: center;
}

.mw-popup-copy {
	margin-top: 12px;
	background: transparent;
	border: 1.5px solid #0d0d0d;
	border-radius: 0;
	color: #0d0d0d;
	cursor: pointer;
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 11.5px;
	padding: 9px 20px;
	transition: background 0.16s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.mw-popup-copy:hover {
	background: #0d0d0d;
	color: #ffffff;
}

.mw-popup-copy:focus-visible {
	outline: 2px solid #E4002B;
	outline-offset: 3px;
}

.mw-popup-copy.done {
	background: #E4002B;
	border-color: #E4002B;
	color: #ffffff;
}

/* ==========================================================================
   6. Product spotlight imagery
   ========================================================================== */

.mw-popup-shot {
	position: relative;
	margin: -38px -34px 22px;
	height: 200px;
	overflow: hidden;
	background: #111111;
}

.mw-popup-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mw-popup-shot-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #E4002B;
	color: #ffffff;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 9px;
	z-index: 2;
}

/* Spotlight cards run a slightly smaller headline (per the approved design). */
.mw-popup-card--spotlight .mw-popup-title {
	font-size: 20px;
}

.mw-popup-card--spotlight .mw-popup-text {
	margin-bottom: 16px;
}

/* ==========================================================================
   7. Success state
   ========================================================================== */

/* Replaces the <form> only, so its parent .mw-popup-body already supplies the
   horizontal padding — adding more here would double it and wreck the wrap. */
.mw-popup-success {
	padding: 28px 0 8px;
	margin: 0;
	text-align: center;
	color: #66666b;
	font-size: 13.5px;
}

.mw-popup-success-tick {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #E4002B;
	color: #ffffff;
	display: grid;
	place-items: center;
	font-size: 24px;
	margin: 0 auto 16px;
}

.mw-popup-success p {
	margin: 0;
	font-size: 13.5px;
	color: #66666b;
}

/* ==========================================================================
   8. "Don't show for a day" row
   ========================================================================== */

.mw-popup-persist {
	display: flex;
	align-items: center;
	gap: 9px;
	border-top: 1px solid #e7e3e4;
	padding: 12px 34px;
	font-size: 12px;
	color: #6a6a6f;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.mw-popup-persist input {
	width: 15px;
	height: 15px;
	accent-color: #E4002B;
	cursor: pointer;
}

.mw-popup-persist input:focus-visible {
	outline: 2px solid #E4002B;
	outline-offset: 2px;
}

/* Honeypot — off-screen, never visible, never focusable in practice. */
.mw-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   9. MODAL host — dimmed, centered, blocking
   ========================================================================== */

.mw-popup-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow: auto;
	background: rgba(12, 10, 11, 0.62);
	opacity: 0;
	transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
}

.mw-popup-overlay.show {
	display: flex;
}

.mw-popup-overlay.in {
	opacity: 1;
}

.mw-popup-overlay .mw-popup-card {
	opacity: 0;
	transform: translateY(18px) scale(0.98);
	transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.mw-popup-overlay.in .mw-popup-card {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   10. CORNER host — no backdrop, docked, non-blocking
   ========================================================================== */

.mw-popup-dock {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147482000;
	display: none;
	pointer-events: none;
	padding: 20px;
	background: none;
	box-sizing: border-box;
}

.mw-popup-dock.show {
	display: block;
}

.mw-popup-dock .mw-popup-card {
	position: fixed;
	max-width: 330px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	pointer-events: auto;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Corner anchors. Each also carries the card's pre-reveal offset; the `.in`
   reveal rules below MUST stay after these — equal specificity, source order
   decides, and the reveal has to win. */
.mw-popup-dock--bl .mw-popup-card {
	left: 20px;
	bottom: 20px;
	transform: translate(-14px, 14px);
}

.mw-popup-dock--br .mw-popup-card {
	right: 20px;
	bottom: 20px;
	transform: translate(14px, 14px);
}

.mw-popup-dock--tl .mw-popup-card {
	left: 20px;
	top: 20px;
	transform: translate(-14px, -14px);
}

.mw-popup-dock--tr .mw-popup-card {
	right: 20px;
	top: 20px;
	transform: translate(14px, -14px);
}

/* Reveal — declared after every corner modifier on purpose. */
.mw-popup-dock.in .mw-popup-card {
	opacity: 1;
	transform: translate(0, 0);
}

/* Tighter proportions in the docked size. */
.mw-popup-dock .mw-popup-body {
	padding: 30px 26px 24px;
}

.mw-popup-dock .mw-popup-persist {
	padding: 11px 26px;
}

.mw-popup-dock .mw-popup-shot {
	margin: -30px -26px 18px;
	height: 150px;
}

.mw-popup-dock .mw-popup-title {
	font-size: 21px;
}

.mw-popup-dock .mw-popup-offer {
	font-size: 38px;
}

/* ==========================================================================
   11. Inline illustration
   (non-spotlight cards render <img class="mw-popup-img"> above the copy)
   ========================================================================== */

.mw-popup-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 18px;
}

/* ==========================================================================
   12. Mobile
   ========================================================================== */

@media (max-width: 640px) {
	/* Modal becomes a bottom sheet. */
	.mw-popup-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.mw-popup-overlay .mw-popup-card {
		max-width: none;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.001s;
	}

	.mw-popup-overlay.in .mw-popup-card {
		opacity: 1;
		transform: translateY(0);
	}

	/* Corner card spans the width near its edge. */
	.mw-popup-dock {
		padding: 0;
	}

	.mw-popup-dock .mw-popup-card {
		left: 14px;
		right: 14px;
		max-width: none;
		width: auto;
		max-height: calc(100vh - 28px);
	}

	.mw-popup-dock--tl .mw-popup-card,
	.mw-popup-dock--tr .mw-popup-card {
		top: 14px;
		bottom: auto;
	}

	.mw-popup-dock--bl .mw-popup-card,
	.mw-popup-dock--br .mw-popup-card {
		bottom: 14px;
		top: auto;
	}

	.mw-popup-body {
		padding: 32px 22px 26px;
	}

	.mw-popup-persist {
		padding: 12px 22px;
	}

	.mw-popup-shot {
		margin: -32px -22px 20px;
	}

	.mw-popup-title {
		font-size: 23px;
	}

	.mw-popup-offer {
		font-size: 40px;
	}

	.mw-popup-code {
		font-size: 26px;
	}
}

/* ==========================================================================
   13. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mw-popup-overlay,
	.mw-popup-dock,
	.mw-popup-card,
	.mw-popup-cta,
	.mw-popup-copy,
	.mw-popup-close,
	.mw-popup-field button {
		transition: none !important;
		animation: none !important;
	}

	.mw-popup-overlay .mw-popup-card,
	.mw-popup-dock .mw-popup-card {
		transform: none !important;
	}
}