/**
 * Subscription gate popup (plugin: inweb-subscription).
 *
 * The plugin renders #inweb-popup-overlay on wp_footer (is_singular + ACF
 * `enable_subscription_popup`) and drives it from js/inweb-subscription.js:
 * it fades the overlay in at ~30% scroll, locks the page with
 * body.inweb-popup-lock, and fades it out after a successful submit.
 * This file only skins that markup in the inweb-v2 design language — the
 * behaviour stays in the plugin.
 *
 * jQuery .fadeIn()/.fadeOut() toggle the overlay's inline `display`, so the
 * card is centred with absolute + transform (independent of the overlay's
 * computed display) rather than flex.
 */

.inweb-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 100020;
	background: var(--overlay-backdrop-bg);
	backdrop-filter: blur(var(--overlay-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
}

.inweb-popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: min(560px, calc(100% - 2 * var(--gutter)));
	/* vh (not %) so the cap resolves for this absolutely-positioned card;
	 * dvh keeps it correct under mobile browser chrome. Content scrolls inside. */
	max-height: calc(100vh - 2 * var(--gutter));
	max-height: calc(100dvh - 2 * var(--gutter));
	overflow-y: auto;
	padding: 48px 40px;
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-black);
	font-family: var(--font-family);
	line-height: var(--line-height-base);
}

.inweb-popup .title {
	margin: 0 0 16px;
	font-family: var(--font-family-display);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
}

.inweb-popup .text {
	margin: 0 0 32px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: var(--color-gray-text);
}

.inweb-popup .text.mb-40 {
	margin-bottom: 32px;
}

/* ---------- Fields ---------- */

.inweb-popup .form-group {
	margin-bottom: 16px;
}

.inweb-popup .form-group.mb-40 {
	margin-bottom: 28px;
}

.inweb-popup input[type="text"],
.inweb-popup input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 51px;
	padding: 8px 24px;
	border: 1px solid var(--color-gray-border);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	color: var(--color-black);
	outline: none;
	transition: border-color var(--transition-hover);
}

.inweb-popup input[type="text"]::placeholder,
.inweb-popup input[type="email"]::placeholder {
	color: var(--color-gray-text);
	opacity: 1;
}

.inweb-popup input[type="text"]:focus,
.inweb-popup input[type="email"]:focus {
	border-color: var(--color-pink);
}

/* ---------- Submit ---------- */

.inweb-popup input[type="submit"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 51px;
	padding: 8px 24px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-pink);
	color: var(--color-white);
	font-family: var(--font-family);
	font-size: 20px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: font-weight 0.12s ease, opacity var(--transition-hover);
}

.inweb-popup input[type="submit"]:hover,
.inweb-popup input[type="submit"]:focus-visible {
	font-weight: var(--font-weight-bold);
}

.inweb-popup input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ---------- Consent checkbox ---------- */

.inweb-popup .subscription-label {
	display: flex;
	align-items: center;
	margin-top: 16px;
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: var(--font-weight-regular);
	line-height: 1.3;
	color: var(--color-gray-text);
	cursor: pointer;
}

.inweb-popup .subscription-label input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0 12px 0 0;
	display: inline-grid;
	place-content: center;
	border: 1px solid var(--color-gray-border);
	border-radius: 50%;
	background: var(--color-white);
	cursor: pointer;
	transition: border-color var(--transition-hover);
}

.inweb-popup .subscription-label input[type="checkbox"]::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-pink);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.inweb-popup .subscription-label input[type="checkbox"]:checked {
	border-color: var(--color-pink);
}

.inweb-popup .subscription-label input[type="checkbox"]:checked::before {
	opacity: 1;
}

/* ---------- Page scroll lock (added by the plugin JS) ---------- */

body.inweb-popup-lock {
	overflow: hidden;
}

/* ---------- Fade (jQuery drives opacity; keep motion consistent) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.inweb-popup {
		animation: inweb-popup-fade-in 0.24s ease;
	}
}

@keyframes inweb-popup-fade-in {
	from {
		opacity: 0;
		transform: translate(-50%, -48%);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.inweb-popup {
		padding: 32px 20px;
	}

	.inweb-popup input[type="text"],
	.inweb-popup input[type="email"] {
		min-height: 46px;
		font-size: 16px;
	}

	.inweb-popup input[type="submit"] {
		min-height: 46px;
		font-size: 18px;
	}
}