/* LiftRev Optin — frontend templates.
   Design direction: warm paper + ink + a single deep-sage accent, generous
   whitespace, no pills/badges, no rule lines, no text-stroke, no overlapping
   text. Every wrapper carries its own --lro-bg/--lro-text/--lro-accent set
   inline per-campaign, these are just the fallbacks + structure. */

.lro-wrapper {
	--lro-bg: #FAF8F4;
	--lro-text: #20262E;
	--lro-accent: #4A6B5A;
	position: fixed;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
.lro-wrapper * { box-sizing: border-box; }

.lro-card {
	background: var(--lro-bg);
	color: var(--lro-text);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
}

.lro-close {
	position: absolute; top: 10px; right: 12px;
	background: transparent; border: none; font-size: 22px; line-height: 1;
	color: var(--lro-text); opacity: 0.5; cursor: pointer; padding: 6px;
}
.lro-close:hover { opacity: 1; }

.lro-body { padding: 36px 32px; }
.lro-headline { font-size: 24px; font-weight: 650; margin: 0 0 8px; line-height: 1.25; }
.lro-subheadline { font-size: 15px; margin: 0 0 20px; opacity: 0.75; line-height: 1.5; }

.lro-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.lro-input {
	width: 100%; padding: 12px 14px; font-size: 15px; margin-bottom: 12px;
	border: 1.5px solid rgba(0,0,0,0.15); border-radius: 8px; background: rgba(255,255,255,0.7);
	color: var(--lro-text);
}
.lro-input:focus { outline: 2px solid var(--lro-accent); outline-offset: 1px; border-color: var(--lro-accent); }

.lro-button {
	width: 100%; padding: 13px 16px; font-size: 15px; font-weight: 600;
	background: var(--lro-accent); color: #fff; border: none; border-radius: 8px; cursor: pointer;
	transition: opacity .15s ease;
}
.lro-button:hover { opacity: 0.88; }
.lro-button:disabled { opacity: 0.6; cursor: default; }

.lro-status-msg { font-size: 13px; color: #b3352f; margin-top: 8px; }
.lro-success { padding: 40px 32px; text-align: center; font-size: 17px; font-weight: 600; }

.lro-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- popup (lightbox) ---- */
.lro-type-popup {
	inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(20,22,26,0.55); padding: 20px;
}
.lro-type-popup .lro-card { width: 100%; max-width: 460px; }
.lro-type-popup .lro-layout-image-left,
.lro-type-popup .lro-layout-image-right,
.lro-type-popup .lro-layout-split { max-width: 720px; display: flex; }
.lro-type-popup .lro-layout-image-right { flex-direction: row-reverse; }
.lro-type-popup .lro-layout-image-left .lro-image,
.lro-type-popup .lro-layout-image-right .lro-image { width: 42%; }
.lro-type-popup .lro-layout-image-left .lro-body,
.lro-type-popup .lro-layout-image-right .lro-body { flex: 1; }

/* ---- fullscreen welcome mat ---- */
.lro-type-fullscreen { inset: 0; background: var(--lro-bg); display: flex; align-items: center; justify-content: center; }
.lro-type-fullscreen .lro-card { box-shadow: none; background: transparent; width: 100%; max-width: 560px; text-align: center; }
.lro-type-fullscreen .lro-headline { font-size: 36px; }
.lro-type-fullscreen .lro-input,
.lro-type-fullscreen .lro-button { max-width: 380px; margin-left: auto; margin-right: auto; }

/* ---- slide-in ---- */
.lro-type-slidein { bottom: 24px; right: 24px; }
.lro-type-slidein .lro-card { width: 340px; }
.lro-type-slidein .lro-body { padding: 26px 24px; }

/* ---- floating bar ---- */
.lro-type-floatbar { top: 0; left: 0; right: 0; }
.lro-type-floatbar .lro-card { border-radius: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.lro-type-floatbar .lro-body { padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
.lro-type-floatbar .lro-form { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.lro-type-floatbar .lro-headline { font-size: 15px; margin: 0; white-space: nowrap; }
.lro-type-floatbar .lro-subheadline { display: none; }
.lro-type-floatbar .lro-input { width: 220px; margin-bottom: 0; padding: 8px 10px; }
.lro-type-floatbar .lro-button { width: auto; padding: 8px 18px; }

/* ---- inline ---- */
.lro-inline-embed .lro-card,
[data-lro-lock-form] .lro-card { box-shadow: none; border: 1px solid rgba(0,0,0,0.08); }
.lro-inline-embed, [data-lro-lock-form] { position: static; }

/* ---- content lock ---- */
.lro-content-lock { position: relative; }
.lro-content-lock__gated { filter: blur(6px); user-select: none; pointer-events: none; }
.lro-content-lock__overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(to bottom, rgba(250,248,244,0.2), rgba(250,248,244,0.96) 40%);
}
.lro-content-lock.lro-unlocked .lro-content-lock__gated { filter: none; pointer-events: auto; user-select: auto; }
.lro-content-lock.lro-unlocked .lro-content-lock__overlay { display: none; }

/* ---- wheel ---- */
.lro-type-wheel { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,22,26,0.6); padding: 20px; }
.lro-wheel-card { width: 100%; max-width: 420px; padding: 30px 26px 34px; text-align: center; }
.lro-wheel-wrap { position: relative; width: 240px; height: 240px; margin: 10px auto 22px; }
.lro-wheel-outer { position: relative; width: 100%; height: 100%; }
.lro-wheel {
	width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden;
	border: 4px solid var(--lro-accent); transition: transform 4s cubic-bezier(.17,.67,.24,1);
	background: conic-gradient(from 0deg, var(--lro-accent), transparent 0 100%);
}
.lro-wheel-slice {
	position: absolute; top: 0; left: 50%; width: 50%; height: 50%; transform-origin: 0% 100%;
	display: flex; align-items: flex-start; justify-content: center; padding-top: 14px;
}
.lro-wheel-slice:nth-child(odd) { background: rgba(74,107,90,0.12); }
.lro-wheel-slice span { font-size: 11px; font-weight: 700; color: var(--lro-text); transform: rotate(20deg); white-space: nowrap; }
.lro-wheel-pointer {
	position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
	width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
	border-top: 16px solid var(--lro-accent); z-index: 2;
}
.lro-wheel-form .lro-headline { font-size: 17px; }

/* ---- animations ---- */
.lro-anim-fade-up { animation: lroFadeUp .35s ease both; }
.lro-anim-fade { animation: lroFade .3s ease both; }
.lro-anim-slide.lro-type-slidein { animation: lroSlideIn .35s ease both; }
.lro-closing { opacity: 0; transition: opacity .18s ease; }

@keyframes lroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lroSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
	.lro-anim-fade-up, .lro-anim-fade, .lro-anim-slide.lro-type-slidein { animation: none; }
	.lro-wheel { transition: none; }
}

@media (max-width: 600px) {
	.lro-type-slidein { left: 12px; right: 12px; bottom: 12px; }
	.lro-type-slidein .lro-card { width: 100%; }
	.lro-type-popup .lro-layout-image-left,
	.lro-type-popup .lro-layout-image-right,
	.lro-type-popup .lro-layout-split { flex-direction: column; }
	.lro-type-popup .lro-layout-image-left .lro-image,
	.lro-type-popup .lro-layout-image-right .lro-image { width: 100%; height: 140px; }
	.lro-type-floatbar .lro-input { width: 100%; }
	.lro-type-floatbar .lro-form { width: 100%; }
}