/**
 * Marketing popups: centred box, bottom-right card, or a bar across the bottom.
 */

.lv-pop {
	--lv-teal: #4AA691;
	--lv-teal-700: #1F5F55;
	--lv-navy: #12355B;
	--lv-line: #e3e8ee;
	--lv-muted: #64748b;
	position: fixed;
	z-index: 300;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.lv-pop-open { overflow: hidden; }

.lv-pop__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(13, 40, 70, .55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .22s ease;
}

.lv-pop.is-in .lv-pop__backdrop { opacity: 1; }

.lv-pop__box {
	position: relative;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 26px 70px rgba(13, 40, 70, .3);
	overflow: hidden;
	opacity: 0;
	transition: opacity .22s ease, transform .22s ease;
}

.lv-pop.is-in .lv-pop__box { opacity: 1; transform: none; }

.lv-pop__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--lv-navy);
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(13, 40, 70, .18);
}

.lv-pop__close:hover { background: #fff; }

.lv-pop__media { line-height: 0; background: #EAF8F1; }
.lv-pop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lv-pop__body { padding: 1.4rem 1.5rem 1.5rem; }

.lv-pop__title {
	margin: 0 0 .5rem;
	font: 800 1.3rem/1.25 Montserrat, "Segoe UI", sans-serif;
	color: var(--lv-navy);
}

.lv-pop__text { color: #1f2933; font-size: .92rem; line-height: 1.6; }
.lv-pop__text p { margin: 0 0 .6rem; }
.lv-pop__text p:last-child { margin-bottom: 0; }
.lv-pop__text ul { margin: .4rem 0; padding-left: 1.1rem; }

.lv-pop__cta {
	display: inline-block;
	margin-top: 1rem;
	padding: .75rem 1.4rem;
	border-radius: 10px;
	background: var(--lv-teal);
	color: #fff;
	font: 700 .92rem/1 Montserrat, sans-serif;
	text-decoration: none;
	transition: background .15s;
}

.lv-pop__cta:hover { background: var(--lv-teal-700); color: #fff; }

.lv-pop__note { margin: .7rem 0 0; font-size: .74rem; color: var(--lv-muted); }

/* ------------------------------------------------------------ centred box */

.lv-pop--modal {
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
}

.lv-pop--modal .lv-pop__box {
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	transform: translateY(14px) scale(.97);
}

.lv-pop--modal .lv-pop__media { max-height: 190px; }

/* ------------------------------------------------- small card, bottom right */

.lv-pop--corner {
	right: 18px;
	bottom: 18px;
	width: min(340px, calc(100vw - 36px));
}

.lv-pop--corner .lv-pop__box { transform: translateY(18px); }
.lv-pop--corner .lv-pop__body { padding: 1.15rem 1.2rem 1.25rem; }
.lv-pop--corner .lv-pop__title { font-size: 1.08rem; }
.lv-pop--corner .lv-pop__text { font-size: .86rem; }
.lv-pop--corner .lv-pop__media { max-height: 130px; }

/* The WhatsApp button and back-to-top live here, so sit above them. */
@media (min-width: 561px) {
	.lv-pop--corner { bottom: 150px; }
}

/* ----------------------------------------------------- bar across the bottom */

.lv-pop--bar {
	left: 0;
	right: 0;
	bottom: 0;
}

.lv-pop--bar .lv-pop__box {
	border-radius: 0;
	transform: translateY(100%);
	box-shadow: 0 -8px 30px rgba(13, 40, 70, .22);
}

.lv-pop--bar .lv-pop__body {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem 3rem 1.05rem 1.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1.4rem;
}

.lv-pop--bar .lv-pop__title { margin: 0; font-size: 1.02rem; }
.lv-pop--bar .lv-pop__text { flex: 1 1 320px; font-size: .86rem; }
.lv-pop--bar .lv-pop__cta { margin: 0; white-space: nowrap; }
.lv-pop--bar .lv-pop__note { flex-basis: 100%; margin: 0; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 560px) {
	.lv-pop--corner { left: 12px; right: 12px; bottom: 86px; width: auto; }
	.lv-pop--bar .lv-pop__body { padding: 1rem 2.6rem 1.1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lv-pop__box, .lv-pop__backdrop { transition: none; }
	.lv-pop--modal .lv-pop__box, .lv-pop--corner .lv-pop__box, .lv-pop--bar .lv-pop__box { transform: none; }
}

@media print {
	.lv-pop { display: none !important; }
}
