/**
 * Monetro Promo Popups — v1
 * Signal Heat: navy ground, coral heat, white voice, monospace instrument data.
 * Scoped under .mpp-host. !important is used only where GeneratePress/WooCommerce
 * print global rules that would otherwise win (a{text-decoration}, ul margins,
 * theme button gradients).
 */

.mpp-host {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
	z-index: 999990;
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}
.mpp-host[dir] { direction: inherit; }
.mpp-host * { box-sizing: border-box; }

/* veil (modal only) */
.mpp-host .mpp-veil {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
	background: rgba(6, 9, 20, .62);
	opacity: 0;
	transition: opacity .24s ease;
	pointer-events: auto;
}
.mpp-host.mpp-in-view .mpp-veil { opacity: 1; }

/* ---------------- shell ---------------- */
.mpp-host .mpp-pop {
	position: absolute;
	pointer-events: auto;
	background: #1F2853;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 5px;
	box-shadow: 0 18px 50px rgba(6, 9, 20, .42);
	overflow-x: hidden;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .3s cubic-bezier(.16, .84, .44, 1), transform .3s cubic-bezier(.16, .84, .44, 1);
	-webkit-overflow-scrolling: touch;
}
.mpp-host.mpp-in-view .mpp-pop { opacity: 1; transform: none; }
.mpp-host.mpp-out .mpp-pop { opacity: 0; transform: translateY(10px); }
.mpp-host.mpp-out .mpp-veil { opacity: 0; }

.mpp-host .mpp-pop::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(45deg, transparent 0 13px, rgba(255, 255, 255, .028) 13px 15px);
}
.mpp-host .mpp-in { position: relative; padding: 18px 18px 16px; }

/* ---------------- placement ---------------- */
/* corner slide-in — bottom-LEFT so it never collides with the tawk.to bubble */
.mpp-host .mpp-corner { left: 18px; bottom: 18px; width: 340px; max-height: 82vh; }
.mpp-host .mpp-sheet { left: 18px; bottom: 18px; width: 360px; max-height: 82vh; }
.mpp-host .mpp-modal {
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
	margin: auto;
	width: 380px;
	height: -moz-fit-content;
	height: fit-content;
	max-height: 86vh;
}

@media (max-width: 782px) {
	/* bottom sheet, 64px gutter kept clear for the chat bubble */
	.mpp-host .mpp-corner,
	.mpp-host .mpp-sheet {
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
		max-height: min(62vh, 520px);
	}
	.mpp-host .mpp-modal {
		left: 10px;
		right: 10px;
		width: auto;
		max-height: 84vh;
	}
	.mpp-host .mpp-in { padding: 16px 15px 14px; }
}

/* ---------------- close ---------------- */
.mpp-host .mpp-x {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 3;
	width: 30px;
	height: 30px;
	min-width: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .09) !important;
	color: rgba(255, 255, 255, .82) !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
}
.mpp-host .mpp-x:hover { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.mpp-host [dir="rtl"] .mpp-x,
.mpp-host .mpp-pop[dir="rtl"] .mpp-x { right: auto; left: 9px; }

/* ---------------- type ---------------- */
.mpp-host .mpp-eyebrow {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #FF8079;
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 9px;
	padding-right: 32px;
}
.mpp-host .mpp-pop[dir="rtl"] .mpp-eyebrow { padding-right: 0; padding-left: 32px; }
.mpp-host .mpp-eyebrow i {
	width: 11px;
	height: 11px;
	flex: none;
	background: #FF4E46;
	clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
}

.mpp-host .mpp-h {
	margin: 0 0 9px !important;
	padding: 0 14px 0 0;
	font-size: 21px !important;
	line-height: 1.16 !important;
	font-weight: 800 !important;
	letter-spacing: -.03em;
	color: #fff !important;
	text-wrap: balance;
}
.mpp-host .mpp-pop[dir="rtl"] .mpp-h {
	padding: 0 0 0 14px;
	font-size: 19px !important;
	line-height: 1.4 !important;
	letter-spacing: 0;
}
.mpp-host .mpp-s {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, .8) !important;
}
.mpp-host .mpp-pop[dir="rtl"] .mpp-s { line-height: 1.75 !important; }
.mpp-host .mpp-s b, .mpp-host .mpp-s strong { color: #fff; font-weight: 700; }

/* ---------------- price ---------------- */
.mpp-host .mpp-price {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 13px 0 2px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
}
.mpp-host .mpp-was { font-size: 13px; color: rgba(255, 255, 255, .42); text-decoration: line-through; }
.mpp-host .mpp-now { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.mpp-host .mpp-code {
	margin-left: auto;
	font-size: 10px;
	letter-spacing: .09em;
	padding: 4px 8px;
	background: #FF4E46;
	color: #fff;
	border-radius: 2px;
	font-weight: 700;
}
.mpp-host .mpp-pop[dir="rtl"] .mpp-code { margin-left: 0; margin-right: auto; }

/* ---------------- options ---------------- */
.mpp-host .mpp-opts { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.mpp-host .mpp-opt {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 11px 12px !important;
	font-size: 13px;
	text-align: left;
	color: #fff !important;
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 3px !important;
	cursor: pointer;
	box-shadow: none !important;
}
.mpp-host .mpp-pop[dir="rtl"] .mpp-opt { text-align: right; }
.mpp-host .mpp-opt.mpp-pick {
	border-color: #FF4E46 !important;
	background: rgba(255, 78, 70, .15) !important;
}
.mpp-host .mpp-opt em {
	margin-left: auto;
	font-style: normal;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #FF8079;
}
.mpp-host .mpp-pop[dir="rtl"] .mpp-opt em { margin-left: 0; margin-right: auto; }

/* ---------------- form ---------------- */
.mpp-host .mpp-form { margin: 0; }
.mpp-host .mpp-field { margin-top: 13px; }
.mpp-host .mpp-phone {
	width: 100%;
	padding: 12px !important;
	font-size: 15px !important; /* 16px-ish avoids iOS zoom-on-focus */
	color: #fff !important;
	background: rgba(255, 255, 255, .07) !important;
	border: 1px solid rgba(255, 255, 255, .2) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	direction: ltr;
	text-align: left;
}
.mpp-host .mpp-phone::placeholder { color: rgba(255, 255, 255, .45); }
.mpp-host .mpp-phone:focus {
	border-color: #FF4E46 !important;
	outline: 2px solid rgba(255, 78, 70, .35);
	outline-offset: 1px;
}
.mpp-host .mpp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.mpp-host .mpp-consent {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .62);
	cursor: pointer;
}
.mpp-host .mpp-consent input { margin: 2px 0 0; flex: none; width: 14px; height: 14px; accent-color: #FF4E46; }
.mpp-host .mpp-consent a {
	color: #FF8079 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.mpp-host .mpp-msg { min-height: 0; font-size: 12px; margin-top: 8px; color: rgba(255, 255, 255, .7); }
.mpp-host .mpp-msg:empty { margin-top: 0; }
.mpp-host .mpp-msg.mpp-err { color: #FFB3AE; }
.mpp-host .mpp-msg.mpp-ok { color: #7BE0BC; }

/* ---------------- buttons ---------------- */
.mpp-host .mpp-cta {
	display: block;
	width: 100%;
	margin-top: 13px;
	padding: 13px !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: #FF4E46 !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -.01em;
	text-align: center;
	cursor: pointer;
	box-shadow: none !important;
	text-transform: none !important;
}
.mpp-host .mpp-cta:hover { background: #FF352C !important; }
.mpp-host .mpp-cta[disabled] { opacity: .6; cursor: default; }

.mpp-host .mpp-dec {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 6px !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	color: rgba(255, 255, 255, .55) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none !important;
}
.mpp-host .mpp-dec:hover { color: rgba(255, 255, 255, .88) !important; }

.mpp-host .mpp-meta {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 13px;
	padding-top: 9px;
}

/* focus visibility */
.mpp-host button:focus-visible,
.mpp-host a:focus-visible,
.mpp-host input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mpp-host .mpp-pop,
	.mpp-host .mpp-veil { transition: none; transform: none; }
}