/* Fifty Guest Gate — frontend overlay
   ------------------------------------
   A fixed, full-viewport blur over the real page with a centered branded card.
   Everything colour/size related is driven by CSS variables set inline on
   #fgg-overlay by the plugin (see render_gate()). */

html.fgg-locked,
html.fgg-locked body {
	overflow: hidden !important;
	touch-action: none;
}

#fgg-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* above sticky navbars, below nothing that matters */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 24px;
	background: rgba(25, 25, 77, var(--fgg-dim, 0.45));
	-webkit-backdrop-filter: blur(var(--fgg-blur, 8px));
	backdrop-filter: blur(var(--fgg-blur, 8px));
	overflow-y: auto;
	animation: fgg-fade 0.28s ease both;
}

#fgg-overlay * {
	box-sizing: border-box;
}

/* Device targeting ("mobile & tablet only") is handled in gate.js, which
   reads the configured breakpoint from --fgg-bp and removes the overlay on
   wider screens. Hiding via JS keeps the exact admin breakpoint. */
#fgg-overlay.fgg-hidden {
	display: none !important;
}

.fgg-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin: auto;
	background: var(--fgg-card, #fff);
	border-radius: var(--fgg-radius, 22px);
	padding: 34px 26px 26px;
	text-align: center;
	box-shadow: 0 24px 70px rgba(25, 25, 77, 0.4);
	animation: fgg-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.fgg-lock {
	width: 46px;
	height: 46px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fgg-navy, #19194d);
	background: var(--fgg-lime, #dae83d);
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(218, 232, 61, 0.5);
}

.fgg-logo {
	display: block;
	max-height: 52px;
	max-width: 70%;
	width: auto;
	margin: 0 auto 16px;
	object-fit: contain;
}

.fgg-title {
	margin: 0 0 6px;
	color: var(--fgg-navy, #19194d);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}

.fgg-text {
	margin: 0 0 22px;
	color: var(--fgg-muted, #5a5f73);
	font-size: 14.5px;
	line-height: 1.5;
}

.fgg-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.fgg-btn:active {
	transform: translateY(1px);
}

.fgg-btn-register {
	background: var(--fgg-lime, #dae83d);
	color: var(--fgg-navy, #19194d);
	box-shadow: 0 8px 20px rgba(218, 232, 61, 0.5);
}
.fgg-btn-register:hover {
	filter: brightness(0.96);
}
.fgg-btn-register svg {
	color: var(--fgg-navy, #19194d);
}

.fgg-btn-login {
	background: var(--fgg-navy, #19194d);
	color: #fff;
	margin-top: 10px;
}
.fgg-btn-login:hover {
	filter: brightness(1.12);
}

.fgg-home {
	display: inline-block;
	margin-top: 18px;
	color: var(--fgg-navy, #19194d);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--fgg-lime, #dae83d);
	padding-bottom: 1px;
}

@keyframes fgg-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes fgg-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	#fgg-overlay,
	.fgg-card {
		animation: none;
	}
}

/* Small phones */
@media (max-width: 400px) {
	.fgg-card {
		padding: 28px 20px 22px;
	}
	.fgg-title {
		font-size: 20px;
	}
}

/* The arrow on the register button points forward in reading order, so it
   flips on right-to-left pages. Drawn by us, so the browser will not mirror
   it for us the way it does with characters such as < and >. */
[dir="rtl"] .fgg-arrow {
	transform: scaleX(-1);
}