/**
 * Renéra — Welcome-offer email capture popup.
 *
 * Source: Claude Design "Email Discount Popup" (desktop) + "Mobile v2".
 * Desktop ≥768px: 640px centred modal. <768px: bottom sheet, 67vh.
 * Tokens only — see design.md. Rooftop → DM Sans/DM Mono, Recoleta stays.
 */

.rn-popup { position: fixed; inset: 0; z-index: 10000; font-family: var(--renera-font-sans); }
.rn-popup[hidden] { display: none; }
.rn-popup.is-closed { pointer-events: none; }
.rn-popup.is-closed .rn-popup__overlay,
.rn-popup.is-closed .rn-popup__dialog { display: none; }
.rn-popup.is-closed .rn-popup__pill { pointer-events: auto; }

.rn-popup__overlay {
	position: absolute; inset: 0;
	background: rgb(from var(--renera-olive-700) r g b / 0.42);
	animation: rn-popup-fade-still 0.5s var(--renera-ease) both;
}
@supports not (color: rgb(from white r g b)) {
	.rn-popup__overlay { background: var(--renera-olive-700); opacity: 0.42; }
}

/* ── Dialog (desktop) ── */
.rn-popup__dialog {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 640px; max-width: calc(100vw - 48px);
	background: var(--renera-sand-300);
	border: 1px solid var(--renera-clay-300);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgb(from var(--renera-olive-700) r g b / 0.28);
	animation: rn-popup-rise 0.6s var(--renera-ease) both;
	outline: none;
}
.rn-popup__body {
	position: relative; z-index: 2;
	min-height: 460px; padding: 64px 72px 56px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
}

/* ── Art ── */
.rn-popup__sachet {
	position: absolute; top: -40px; right: 64px; width: 112px; height: auto; z-index: 3; /* left of the close × (right 16–52px) */
	transform: rotate(16deg);
	filter: drop-shadow(0 10px 22px rgb(from var(--renera-olive-700) r g b / 0.22));
	animation: rn-popup-fade-still 0.9s var(--renera-ease) 0.3s both;
	pointer-events: none;
}
.rn-popup__orange {
	position: absolute; bottom: -52px; left: -64px; width: 200px; height: auto; z-index: 3;
	transform: rotate(-14deg);
	animation: rn-popup-fade-still 0.9s var(--renera-ease) 0.45s both;
	pointer-events: none;
}
.rn-popup__botanical {
	position: absolute; right: -30px; bottom: -40px; width: 220px; z-index: 1;
	opacity: 0.14;
	animation: rn-popup-fade-botanical 1.1s var(--renera-ease) 0.6s both;
	pointer-events: none;
}
.rn-popup__olive {
	position: absolute; top: -34px; left: -44px; width: 150px; height: auto; z-index: 3;
	transform: rotate(-12deg);
	filter: drop-shadow(0 8px 18px rgb(from var(--renera-olive-700) r g b / 0.18));
	animation: rn-popup-fade-still 0.9s var(--renera-ease) 0.55s both;
	pointer-events: none;
}
.rn-popup__acerola {
	position: absolute; right: -22px; bottom: 44px; width: 124px; height: auto; z-index: 3;
	transform: rotate(10deg);
	filter: drop-shadow(0 8px 18px rgb(from var(--renera-olive-700) r g b / 0.18));
	animation: rn-popup-fade-still 0.9s var(--renera-ease) 0.7s both;
	pointer-events: none;
}

/* ── Chrome ── */
.rn-popup__close {
	position: absolute; top: 16px; right: 16px; z-index: 4; /* top-right, above the sachet (z 3) */
	width: 36px; height: 36px; padding: 0;
	border: 1px solid var(--renera-clay-300); border-radius: 999px;
	background: var(--renera-sand-300); /* cream disc keeps the × legible over the sachet */
	font-size: 22px; line-height: 1; color: var(--renera-olive-700);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
/* No hover state by design. Pin colours so the theme's global button:hover can't recolour it. */
.rn-popup__close:hover,
.rn-popup__close:focus-visible { background: var(--renera-sand-300); color: var(--renera-olive-700); border-color: var(--renera-clay-300); opacity: 1; }
.rn-popup__close:focus-visible { outline: 2px solid var(--renera-olive-500); outline-offset: 2px; }
.rn-popup__wordmark { height: 30px; width: auto; margin-bottom: 28px; }

/* ── Type ── */
.rn-popup__eyebrow {
	font-family: var(--renera-font-mono); font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--renera-olive-500); margin: 0 0 16px;
}
.rn-popup__title {
	font-family: var(--renera-font-serif); font-weight: 400; font-size: 40px;
	letter-spacing: -0.03em; line-height: 1.12; color: var(--renera-olive-700);
	margin: 0 0 14px; max-width: 400px; text-wrap: pretty;
}
.rn-popup__lede {
	font-size: 15px; line-height: 1.6; color: var(--renera-mute);
	margin: 0 0 32px; max-width: 340px;
	text-align: center; hyphens: manual; text-wrap: pretty; /* theme body sets justify + auto hyphens */
}
.rn-popup__email-echo { color: var(--renera-olive-700); }

/* ── Form ── */
.rn-popup__form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; }
.rn-popup__input {
	height: 52px; padding: 0 18px; width: 100%; box-sizing: border-box;
	border: 1px solid var(--renera-clay-300); border-radius: 10px;
	background: var(--renera-paper); font-family: inherit; font-size: 15px;
	color: var(--renera-olive-700); outline: none;
	transition: border-color var(--renera-dur-fast) var(--renera-ease);
}
.rn-popup__input::placeholder { color: var(--renera-mute); opacity: 1; }
.rn-popup__input:focus { border-color: var(--renera-olive-500); }
.rn-popup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rn-popup__btn {
	height: 52px; border-radius: 10px; cursor: pointer;
	font-family: var(--renera-font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
	transition: opacity var(--renera-dur-fast) var(--renera-ease);
	position: relative;
}
.rn-popup__btn-primary { border: 1px solid var(--renera-olive-900); background: var(--renera-olive-700); color: var(--renera-sand-300); }
.rn-popup__btn-primary:hover,
.rn-popup__btn-primary:focus-visible { background: var(--renera-olive-700); color: var(--renera-sand-300); border-color: var(--renera-olive-900); opacity: 0.9; } /* pin: theme's global button:hover recolours */
.rn-popup__btn-secondary { margin-top: 4px; padding: 0 32px; height: 48px; border: 1px solid var(--renera-olive-700); background: transparent; color: var(--renera-olive-700); font-size: 12px; }
.rn-popup__btn-secondary:hover,
.rn-popup__btn-secondary:focus-visible { background: transparent; color: var(--renera-olive-700); border-color: var(--renera-olive-700); opacity: 0.8; }
.rn-popup__btn-busy { display: none; }
.rn-popup__form.is-busy .rn-popup__btn-label { visibility: hidden; }
.rn-popup__form.is-busy .rn-popup__btn-busy { display: block; position: absolute; inset: 0; line-height: 50px; }
.rn-popup__form.is-busy .rn-popup__btn-primary { pointer-events: none; opacity: 0.85; }

.rn-popup__error { margin: 0; min-height: 1.2em; font-size: 13px; line-height: 1.4; color: var(--renera-clay-700); }
.rn-popup__error:empty { display: none; }

.rn-popup__decline {
	margin-top: 20px; border: 0; background: transparent; cursor: pointer;
	font-family: inherit; font-size: 13px; color: var(--renera-mute);
	text-decoration: underline; text-underline-offset: 3px;
	transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-popup__decline:hover,
.rn-popup__decline:focus-visible { background: transparent; color: var(--renera-olive-700); }

/* ── Success ── */
.rn-popup__state { display: flex; flex-direction: column; align-items: center; width: 100%; }
.rn-popup__state[hidden] { display: none; }

/* ── Reopen pill ── */
.rn-popup__pill {
	position: fixed; bottom: 24px; left: 24px; z-index: 10001;
	width: 56px; height: 56px; padding: 0; border-radius: 999px;
	border: 1px solid var(--renera-olive-900); background: var(--renera-olive-700); color: var(--renera-sand-300);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	cursor: pointer; box-shadow: var(--renera-shadow-lift);
	transition: transform var(--renera-dur-fast) var(--renera-ease), opacity var(--renera-dur-fast) var(--renera-ease);
}
.rn-popup__pill-icon { width: 20px; height: 20px; display: block; }
.rn-popup__pill-text { font-family: var(--renera-font-mono); font-size: 10px; letter-spacing: 0.08em; line-height: 1; }
.rn-popup__pill:hover,
.rn-popup__pill:focus-visible { background: var(--renera-olive-700); color: var(--renera-sand-300); transform: translateY(-2px); }
.rn-popup__pill:focus-visible { outline: 2px solid var(--renera-olive-500); outline-offset: 3px; }
.rn-popup__pill[hidden] { display: none; }

/* ── Motion ── */
@keyframes rn-popup-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes rn-popup-sheet { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rn-popup-fade-still { from { opacity: 0; } to { opacity: 1; } }
@keyframes rn-popup-fade-botanical { from { opacity: 0; } to { opacity: 0.14; } }
@media (prefers-reduced-motion: reduce) {
	.rn-popup *, .rn-popup { animation: none !important; transition: none !important; }
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 767px) {
	.rn-popup__dialog {
		left: 0; right: 0; top: auto; bottom: 0;
		transform: none; width: auto; max-width: none; box-sizing: border-box;
		height: 67vh; height: 67dvh; min-height: 520px;
		border: 0; border-top: 1px solid var(--renera-clay-300);
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -16px 48px rgb(from var(--renera-olive-700) r g b / 0.26);
		animation-name: rn-popup-sheet;
	}
	.rn-popup__body { position: absolute; inset: 0; min-height: 0; padding: 20px 28px 32px; }
	/* Mobile art: the × and the centred wordmark leave no clear room in the
	   top-right band (measured), so the sachet peeks from the bottom-right
	   and the acerola sits under the × on the right edge. */
	.rn-popup__sachet { top: auto; bottom: -46px; right: -22px; width: 92px; transform: rotate(-16deg); }
	.rn-popup__olive { top: -26px; left: -40px; width: 116px; }
	.rn-popup__acerola { top: 64px; bottom: auto; right: -16px; width: 84px; transform: rotate(12deg); }
	.rn-popup__botanical { right: auto; left: 50%; transform: translateX(-30%); bottom: -36px; width: 180px; }
	.rn-popup__orange { bottom: -44px; left: -56px; width: 170px; }
	.rn-popup__botanical { right: -40px; bottom: -30px; width: 190px; }
	.rn-popup__close { top: 12px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
	.rn-popup__wordmark { height: 24px; }
	.rn-popup__eyebrow { font-size: 10px; margin-bottom: 14px; }
	.rn-popup__title { font-size: 32px; line-height: 1.14; margin-bottom: 12px; max-width: 270px; }
	.rn-popup__lede { font-size: 14px; margin-bottom: 24px; max-width: 290px; }
	.rn-popup__form { gap: 10px; max-width: 320px; }
	.rn-popup__input { font-size: 16px; padding: 0 16px; }
	.rn-popup__btn-primary { font-size: 12px; }
	.rn-popup__decline { margin-top: 16px; min-height: 44px; }
	.rn-popup__btn-secondary { margin-top: 20px; height: 52px; width: 100%; max-width: 320px; }
	.rn-popup__pill { bottom: 20px; left: 16px; width: 52px; height: 52px; }
}