/* FDM Suite — Gate (Email Gate + Link Gate) frontend.
   Intentionally light: the widget's look comes from the admin's custom HTML.
   This only provides the overlay, the blurred backdrop, and a fallback form. */

.fdm-gate-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* above the site header + most plugins */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 16px;
}
.fdm-gate-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.fdm-gate-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 620px;
	max-height: 92vh;
	overflow-y: auto;
}
.fdm-gate-widget { width: 100%; }

/* Scoped mode — the gate covers only its target div (not the viewport): the
   widget sits ~10% from the top of that div, the div blurs behind it, and the
   rest of the page stays usable. */
.fdm-gate-overlay.fdm-gate-scoped {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
}
.fdm-gate-scoped .fdm-gate-backdrop { position: absolute; }
.fdm-gate-scoped .fdm-gate-dialog {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: min(620px, 92%);
	max-height: none;
}
.fdm-gate-close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.fdm-gate-close:hover { background: rgba(0, 0, 0, 0.55); }

/* Elements blurred behind the gate (when a blur selector is configured). The
   backdrop-filter above already blurs the whole page; this is for targeting a
   specific div and as a fallback where backdrop-filter is unsupported. */
.fdm-gate-blurred {
	filter: blur(6px);
	transition: filter 0.2s ease;
	pointer-events: none;
	user-select: none;
}

/* Fallback form — only injected when the custom HTML didn't include a marked
   email field / submit button. */
.fdm-gate-default-form {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.fdm-gate-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	font-size: 15px;
}
.fdm-gate-btn {
	padding: 11px 20px;
	border: 0;
	border-radius: 6px;
	background: #1f6f43;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.fdm-gate-btn:disabled { opacity: 0.6; cursor: default; }
.fdm-gate-msg { margin: 10px 0 0; font-size: 13px; }
.fdm-gate-msg.is-error { color: #e06c63; }
.fdm-gate-msg.is-ok { color: #7bd39a; }