/* Reset box model inside the popup so padding never causes overflow/cropping */
#letterness-popup-wrapper,
#letterness-popup-wrapper *,
#letterness-popup-wrapper *::before,
#letterness-popup-wrapper *::after {
	box-sizing: border-box;
}

#letterness-popup-wrapper {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	opacity: 1;
	transition: opacity var(--letterness-anim-duration, 400ms) ease;
	padding: 16px;
	overflow-y: auto;
}
#letterness-popup-wrapper.letterness-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
	#letterness-popup-wrapper { transition-duration: var(--letterness-mobile-anim-duration, 400ms); }
}

.letterness-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, var(--letterness-overlay-opacity, 0.45));
	backdrop-filter: blur(8px);
}

.letterness-modal {
	position: relative;
	background: var(--letterness-content-bg, #fff);
	width: 100%;
	max-width: var(--letterness-desktop-max-width, 480px);
	max-height: var(--letterness-desktop-max-height, 85vh);
	border-radius: var(--letterness-radius, 24px);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	z-index: 10;
	transition: transform var(--letterness-anim-duration, 400ms) cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--letterness-anim-duration, 400ms) ease;
}
@media (max-width: 768px) {
	.letterness-modal {
		border-radius: var(--letterness-mobile-radius, 24px);
		transition-duration: var(--letterness-mobile-anim-duration, 400ms);
		max-width: 94vw;
	}
}

.letterness-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #f1f5f9;
	border: none;
	border-radius: 9999px;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	z-index: 12;
}
.letterness-close:hover { background: #e2e8f0; }

.letterness-flex {
	display: flex;
	flex-direction: row;
	min-height: 340px;
	max-height: var(--letterness-desktop-max-height, 85vh);
	width: 100%;
}

.letterness-left {
	width: var(--letterness-desktop-left-width, 40%);
	min-width: 0;
	background-color: var(--letterness-left-bg, #f3f4f6);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.letterness-right {
	width: 0; /* combined with flex:1 lets it shrink below content size, preventing overflow */
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--letterness-desktop-padding, 32px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden; /* the fit engine scales content to fit; never scroll */
	font-size: var(--letterness-base-font, 15px);
}

/* The content wrapper the fit engine resizes (via font-size) so content always
   fits its shape and the viewport, never clipping and never scrolling. */
.letterness-fit {
	width: 100%;
}

.letterness-grid-pattern {
	position: absolute;
	inset: 0;
	opacity: 0.15;
	background-image: radial-gradient(var(--letterness-primary, #111827) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
}

picture { display: block; line-height: 0; }

.letterness-badge {
	width: var(--letterness-desktop-badge, 100px);
	height: var(--letterness-desktop-badge, 100px);
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	font-weight: 800;
	color: var(--letterness-primary, #111827);
	position: relative;
	z-index: 1;
}
.letterness-badge-img {
	width: calc(var(--letterness-desktop-badge, 100px) * 1.4);
	height: calc(var(--letterness-desktop-badge, 100px) * 1.4);
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 1;
}
@media (max-width: 768px) {
	.letterness-badge { width: var(--letterness-mobile-badge, 72px); height: var(--letterness-mobile-badge, 72px); font-size: 32px; }
	.letterness-badge-img { width: calc(var(--letterness-mobile-badge, 72px) * 1.4); height: calc(var(--letterness-mobile-badge, 72px) * 1.4); }
}

/* Desktop/mobile-specific emoji text: both spans render, CSS shows the right one */
.letterness-badge-mobile-text { display: none; }
@media (max-width: 768px) {
	.letterness-badge-desktop-text { display: none; }
	.letterness-badge-mobile-text { display: inline; }
}

/* ---------- Badge / image animation (style set via device-scoped class below; speed via CSS var) ---------- */
@keyframes letterness-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes letterness-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes letterness-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.letterness-badge, .letterness-badge-img {
	animation-duration: var(--letterness-badge-speed, 2.5s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@media (min-width: 769px) {
	.letterness-badge.letterness-anim-desktop-none, .letterness-badge-img.letterness-anim-desktop-none { animation: none; }
	.letterness-badge.letterness-anim-desktop-float, .letterness-badge-img.letterness-anim-desktop-float { animation-name: letterness-float; }
	.letterness-badge.letterness-anim-desktop-pulse, .letterness-badge-img.letterness-anim-desktop-pulse { animation-name: letterness-pulse; }
	.letterness-badge.letterness-anim-desktop-wiggle, .letterness-badge-img.letterness-anim-desktop-wiggle { animation-name: letterness-wiggle; }
}
@media (max-width: 768px) {
	.letterness-badge, .letterness-badge-img { animation-duration: var(--letterness-mobile-badge-speed, 2.5s); }
	.letterness-badge.letterness-anim-mobile-none, .letterness-badge-img.letterness-anim-mobile-none { animation: none; }
	.letterness-badge.letterness-anim-mobile-float, .letterness-badge-img.letterness-anim-mobile-float { animation-name: letterness-float; }
	.letterness-badge.letterness-anim-mobile-pulse, .letterness-badge-img.letterness-anim-mobile-pulse { animation-name: letterness-pulse; }
	.letterness-badge.letterness-anim-mobile-wiggle, .letterness-badge-img.letterness-anim-mobile-wiggle { animation-name: letterness-wiggle; }
}

.letterness-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.2em; font-weight: 800; margin-bottom: 1.3em; flex-shrink: 0; text-align: center; }
.letterness-right h2 { font-size: 1.75em; font-weight: 800; color: #1b1b1b; margin: 0 0 0.55em 0; line-height: 1.2; word-wrap: break-word; }
.letterness-right p { font-size: 1em; color: #475569; line-height: 1.5; margin: 0 0 1.3em 0; word-wrap: break-word; }
.letterness-right form { display: flex; flex-direction: column; gap: 0.7em; width: 100%; }
.letterness-right label { font-size: 0.72em; font-weight: 700; color: #64748b; letter-spacing: 0.05em; }
.letterness-right input { width: 100%; padding: 0.75em 1em; border-radius: 0.7em; border: 1px solid #cbd5e1; font-size: 0.95em; outline: none; }
.letterness-right input:focus { border-color: var(--letterness-primary, #111827); }
.letterness-right button[type="submit"] { width: 100%; padding: 0.9em; border: none; border-radius: 0.7em; color: #fff; font-size: 1em; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
.letterness-right button[type="submit"]:hover { opacity: 0.9; }
.letterness-disclaimer { text-align: center; font-size: 0.72em !important; color: #94a3b8 !important; margin-top: 0.8em !important; margin-bottom: 0 !important; }
.letterness-hidden { display: none !important; }
.letterness-success-icon { display: flex; justify-content: center; margin-bottom: 1em; }
.letterness-bonus { background: #f8f9fb; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 1em; padding: 1em; margin-bottom: 1.3em; }
.letterness-bonus-title { font-size: 0.72em; font-weight: 700; color: var(--letterness-primary, #111827); margin-bottom: 0.5em; letter-spacing: 0.05em; }
.letterness-bonus p { font-style: italic; font-size: 0.9em; font-weight: 700; margin: 0 0 0.8em 0; word-wrap: break-word; }
.letterness-reveal-btn { width: 100%; height: 2.7em; background: #fff; border: 1px dashed rgba(17, 24, 39, 0.2); border-radius: 8px; cursor: pointer; font-weight: 700; color: var(--letterness-primary, #111827); position: relative; overflow: hidden; }
.btn-answer-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.letterness-footer { text-align: center; }
.letterness-footer a { font-size: 0.78em; font-weight: 700; text-transform: uppercase; color: #64748b; text-decoration: none; }
.letterness-footer a:hover { color: var(--letterness-primary, #111827); }

/* =========================================================================
   Entrance animations, desktop applies >=769px, mobile applies <=768px
   ========================================================================= */
@media (min-width: 769px) {
	.letterness-entrance-desktop-fade.letterness-hidden .letterness-modal { transform: none; }
	.letterness-entrance-desktop-scale_fade.letterness-hidden .letterness-modal { transform: scale(0.95); }
	.letterness-entrance-desktop-slide_up.letterness-hidden .letterness-modal { transform: translateY(40px); }
	.letterness-entrance-desktop-slide_down.letterness-hidden .letterness-modal { transform: translateY(-40px); }
	.letterness-entrance-desktop-slide_left.letterness-hidden .letterness-modal { transform: translateX(60px); }
	.letterness-entrance-desktop-slide_right.letterness-hidden .letterness-modal { transform: translateX(-60px); }
	.letterness-entrance-desktop-bounce .letterness-modal { transition-timing-function: cubic-bezier(0.34, 1.7, 0.5, 1); }
	.letterness-entrance-desktop-bounce.letterness-hidden .letterness-modal { transform: scale(0.7); }
	.letterness-entrance-desktop-zoom_bounce .letterness-modal { transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }
	.letterness-entrance-desktop-zoom_bounce.letterness-hidden .letterness-modal { transform: scale(0.4); }
	.letterness-entrance-desktop-blur_fade .letterness-modal { filter: blur(0); }
	.letterness-entrance-desktop-blur_fade.letterness-hidden .letterness-modal { filter: blur(6px); transform: scale(0.98); }
	#letterness-popup-wrapper.letterness-entrance-desktop-flip { perspective: 1200px; }
	.letterness-entrance-desktop-flip .letterness-modal { transform-style: preserve-3d; }
	.letterness-entrance-desktop-flip.letterness-hidden .letterness-modal { transform: rotateY(90deg); }
}
@media (max-width: 768px) {
	.letterness-entrance-mobile-fade.letterness-hidden .letterness-modal { transform: none; }
	.letterness-entrance-mobile-scale_fade.letterness-hidden .letterness-modal { transform: scale(0.95); }
	.letterness-entrance-mobile-slide_up.letterness-hidden .letterness-modal { transform: translateY(40px); }
	.letterness-entrance-mobile-slide_down.letterness-hidden .letterness-modal { transform: translateY(-40px); }
	.letterness-entrance-mobile-slide_left.letterness-hidden .letterness-modal { transform: translateX(60px); }
	.letterness-entrance-mobile-slide_right.letterness-hidden .letterness-modal { transform: translateX(-60px); }
	.letterness-entrance-mobile-bounce .letterness-modal { transition-timing-function: cubic-bezier(0.34, 1.7, 0.5, 1); }
	.letterness-entrance-mobile-bounce.letterness-hidden .letterness-modal { transform: scale(0.7); }
	.letterness-entrance-mobile-zoom_bounce .letterness-modal { transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }
	.letterness-entrance-mobile-zoom_bounce.letterness-hidden .letterness-modal { transform: scale(0.4); }
	.letterness-entrance-mobile-blur_fade .letterness-modal { filter: blur(0); }
	.letterness-entrance-mobile-blur_fade.letterness-hidden .letterness-modal { filter: blur(6px); transform: scale(0.98); }
	#letterness-popup-wrapper.letterness-entrance-mobile-flip { perspective: 1200px; }
	.letterness-entrance-mobile-flip .letterness-modal { transform-style: preserve-3d; }
	.letterness-entrance-mobile-flip.letterness-hidden .letterness-modal { transform: rotateY(90deg); }
}

/* =========================================================================
   Shapes, desktop applies >=769px, mobile applies <=768px
   ========================================================================= */
@media (min-width: 769px) {
	.letterness-shape-desktop-stacked .letterness-flex { flex-direction: column; }
	.letterness-shape-desktop-stacked .letterness-left { width: 100%; height: 200px; }
	.letterness-shape-desktop-stacked .letterness-right { width: 100%; }

	.letterness-shape-desktop-minimal .letterness-left,
	.letterness-shape-desktop-circle .letterness-left,
	.letterness-shape-desktop-hexagon .letterness-left,
	.letterness-shape-desktop-octagon .letterness-left { display: none; }
	.letterness-shape-desktop-minimal .letterness-right,
	.letterness-shape-desktop-circle .letterness-right,
	.letterness-shape-desktop-hexagon .letterness-right,
	.letterness-shape-desktop-octagon .letterness-right { width: 100%; }

	/* Shaped popups keep a FIXED aspect ratio (a circle is always a circle).
	   JS sizes the shape to the chosen size (capped to the viewport) and scales
	   the inner content to fit, so the shape never distorts and never scrolls. */
	.letterness-shape-desktop-circle .letterness-modal,
	.letterness-shape-desktop-hexagon .letterness-modal,
	.letterness-shape-desktop-octagon .letterness-modal {
		background: transparent;
		box-shadow: none;
		overflow: visible;
		max-height: none;
		width: min(var(--letterness-desktop-max-width, 480px), 92vw, 88vh);
		aspect-ratio: 1 / 1;
		filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.18));
	}
	.letterness-shape-desktop-circle .letterness-modal::before,
	.letterness-shape-desktop-hexagon .letterness-modal::before,
	.letterness-shape-desktop-octagon .letterness-modal::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--letterness-content-bg, #fff);
		z-index: 0;
	}
	.letterness-shape-desktop-circle .letterness-flex,
	.letterness-shape-desktop-hexagon .letterness-flex,
	.letterness-shape-desktop-octagon .letterness-flex {
		position: relative;
		z-index: 1;
		min-height: 0;
		max-height: none;
		height: 100%;
	}
	.letterness-shape-desktop-circle .letterness-right,
	.letterness-shape-desktop-hexagon .letterness-right,
	.letterness-shape-desktop-octagon .letterness-right {
		overflow: hidden;
		text-align: center;
		align-items: center;
		justify-content: center;
		padding: 0;
		height: 100%;
	}
	.letterness-shape-desktop-circle .letterness-logo,
	.letterness-shape-desktop-hexagon .letterness-logo,
	.letterness-shape-desktop-octagon .letterness-logo { justify-content: center; }

	.letterness-shape-desktop-circle .letterness-modal::before { border-radius: 50%; }
	.letterness-shape-desktop-hexagon .letterness-modal::before { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); }
	.letterness-shape-desktop-octagon .letterness-modal::before { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
}
@media (max-width: 768px) {
	.letterness-shape-mobile-stacked .letterness-left { height: var(--letterness-mobile-left-height, 120px); }

	.letterness-shape-mobile-minimal .letterness-left,
	.letterness-shape-mobile-circle .letterness-left,
	.letterness-shape-mobile-hexagon .letterness-left,
	.letterness-shape-mobile-octagon .letterness-left { display: none; }
	.letterness-shape-mobile-minimal .letterness-right,
	.letterness-shape-mobile-circle .letterness-right,
	.letterness-shape-mobile-hexagon .letterness-right,
	.letterness-shape-mobile-octagon .letterness-right { width: 100%; }

	.letterness-shape-mobile-circle .letterness-modal,
	.letterness-shape-mobile-hexagon .letterness-modal,
	.letterness-shape-mobile-octagon .letterness-modal {
		background: transparent;
		box-shadow: none;
		overflow: visible;
		max-height: none;
		width: min(var(--letterness-mobile-size, 340px), 92vw, 82vh);
		aspect-ratio: 1 / 1;
		filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.18));
	}
	.letterness-shape-mobile-circle .letterness-modal::before,
	.letterness-shape-mobile-hexagon .letterness-modal::before,
	.letterness-shape-mobile-octagon .letterness-modal::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--letterness-content-bg, #fff);
		z-index: 0;
	}
	.letterness-shape-mobile-circle .letterness-flex,
	.letterness-shape-mobile-hexagon .letterness-flex,
	.letterness-shape-mobile-octagon .letterness-flex {
		position: relative;
		z-index: 1;
		min-height: 0;
		max-height: none;
		height: 100%;
	}
	.letterness-shape-mobile-circle .letterness-right,
	.letterness-shape-mobile-hexagon .letterness-right,
	.letterness-shape-mobile-octagon .letterness-right {
		overflow: hidden;
		text-align: center;
		align-items: center;
		justify-content: center;
		padding: 0;
		height: 100%;
	}
	.letterness-shape-mobile-circle .letterness-logo,
	.letterness-shape-mobile-hexagon .letterness-logo,
	.letterness-shape-mobile-octagon .letterness-logo { justify-content: center; }

	.letterness-shape-mobile-circle .letterness-modal::before { border-radius: 50%; }
	.letterness-shape-mobile-hexagon .letterness-modal::before { clip-path: polygon(20% 3%, 80% 3%, 100% 50%, 80% 97%, 20% 97%, 0% 50%); }
	.letterness-shape-mobile-octagon .letterness-modal::before { clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%); }
}

/* =========================================================================
   Screen transitions (signup <-> confirmation)
   ========================================================================= */
#letterness-screen-signup,
#letterness-screen-confirm {
	opacity: 1;
	transform: none;
	transition: opacity var(--letterness-anim-duration, 400ms) ease, transform var(--letterness-anim-duration, 400ms) ease;
}
@media (max-width: 768px) {
	#letterness-screen-signup,
	#letterness-screen-confirm { transition-duration: var(--letterness-mobile-anim-duration, 400ms); }
}
.letterness-right { perspective: 1000px; }

@media (min-width: 769px) {
	.letterness-transition-desktop-fade.letterness-screen-leaving { opacity: 0; }
	.letterness-transition-desktop-fade.letterness-screen-entering { opacity: 0; }
	.letterness-transition-desktop-slide.letterness-screen-leaving { opacity: 0; transform: translateX(-24px); }
	.letterness-transition-desktop-slide.letterness-screen-entering { opacity: 0; transform: translateX(24px); }
	.letterness-transition-desktop-zoom.letterness-screen-leaving { opacity: 0; transform: scale(0.9); }
	.letterness-transition-desktop-zoom.letterness-screen-entering { opacity: 0; transform: scale(1.08); }
	.letterness-transition-desktop-flip.letterness-screen-leaving { opacity: 0; transform: rotateX(90deg); }
	.letterness-transition-desktop-flip.letterness-screen-entering { opacity: 0; transform: rotateX(-90deg); }
}
@media (max-width: 768px) {
	.letterness-transition-mobile-fade.letterness-screen-leaving { opacity: 0; }
	.letterness-transition-mobile-fade.letterness-screen-entering { opacity: 0; }
	.letterness-transition-mobile-slide.letterness-screen-leaving { opacity: 0; transform: translateX(-24px); }
	.letterness-transition-mobile-slide.letterness-screen-entering { opacity: 0; transform: translateX(24px); }
	.letterness-transition-mobile-zoom.letterness-screen-leaving { opacity: 0; transform: scale(0.9); }
	.letterness-transition-mobile-zoom.letterness-screen-entering { opacity: 0; transform: scale(1.08); }
	.letterness-transition-mobile-flip.letterness-screen-leaving { opacity: 0; transform: rotateX(90deg); }
	.letterness-transition-mobile-flip.letterness-screen-entering { opacity: 0; transform: rotateX(-90deg); }
}

/* ---------- Mobile: sizing (unaffected by shape/animation overrides above) ---------- */
@media (max-width: 768px) {
	#letterness-popup-wrapper { padding: var(--letterness-mobile-margin, 12px); }
	.letterness-flex { flex-direction: column; }
	.letterness-left { width: 100%; height: var(--letterness-mobile-left-height, 120px); }
	.letterness-right { width: 100%; padding: var(--letterness-mobile-padding, 24px); }

}

/* Consent checkbox (shared markup) */
.letterness-consent { display: flex; align-items: flex-start; gap: 0.55em; margin: 0.7em 0 0.3em; font-size: 0.8em; line-height: 1.45; color: #4b5563; text-align: left; }
.letterness-consent .letterness-consent-input { margin: 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px; }
.letterness-consent a { text-decoration: underline; color: inherit; }
.letterness-req { color: #dc2626; }

/* Name + custom fields (scale with the popup size) */
.letterness-fields { display: flex; flex-direction: column; gap: 0.6em; margin: 0; }
.letterness-fields .letterness-field { width: 100%; padding: 0.75em 1em; font-size: 0.95em; border: 1px solid #cbd5e1; border-radius: 0.7em; box-sizing: border-box; outline: none; }
.letterness-fields .letterness-field:focus { border-color: var(--letterness-primary, #111827); }

/* RTL support (Day 10) */
[dir="rtl"] .letterness-close { right: auto; left: 16px; }
[dir="rtl"] .letterness-consent { text-align: right; }
[dir="rtl"] .letterness-right { text-align: right; }
[dir="rtl"] .letterness-disclaimer { text-align: center; }

/* Reduced motion: respect the user's OS preference. */
@media (prefers-reduced-motion: reduce) {
	#letterness-popup-wrapper,
	.letterness-modal,
	.letterness-badge-img,
	.letterness-badge { animation: none !important; transition: none !important; }
}

/* Stronger focus outline for keyboard users. */
.letterness-close:focus-visible,
.letterness-right input:focus-visible,
.letterness-right button:focus-visible { outline: 2px solid var(--letterness-primary, #111827); outline-offset: 2px; }

/* Visually-hidden label kept for screen readers (field labels show as placeholders). */
.letterness-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }