/*
 * The dialog that follows a Google tap, and the slots Google's button renders
 * into. Same tokens as the demo's sign-up gate (demo.css "Dialog"), repeated
 * here because this file also loads on pages without the demo.
 */

.gldot {
	--gldot-fg: #171b1c;
	--gldot-muted: #5d6b6f;
	--gldot-border: #e3e7e8;
	--gldot-primary: #2d59c8;
	position: fixed;
	inset: 0;
	z-index: 2147483002;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5);
	font-family: 'GenerectInter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	animation: gldot-fade 0.2s ease;
}

.gldot[hidden] {
	display: none;
}

.gldot,
.gldot * {
	box-sizing: border-box;
}

.gldot__dialog {
	position: relative;
	display: grid;
	gap: 12px;
	justify-items: center;
	width: 100%;
	max-width: 440px;
	background: #fff;
	color: var(--gldot-fg);
	border: 1px solid var(--gldot-border);
	border-radius: 8px;
	padding: 28px 24px 24px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	text-align: center;
	outline: none;
	animation: gldot-zoom 0.2s ease;
}

.gldot__close {
	position: absolute;
	top: 12px;
	right: 12px;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 4px;
	width: 28px;
	height: 28px;
	font-size: 20px;
	line-height: 1;
	color: var(--gldot-fg);
	opacity: 0.6;
	cursor: pointer;
}

.gldot__close:hover {
	opacity: 1;
}

.gldot__who {
	position: relative;
	width: 48px;
	height: 48px;
}

.gldot__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.gldot__spinner {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--gldot-border);
	border-top-color: transparent;
}

.gldot.is-busy .gldot__spinner {
	border-top-color: var(--gldot-primary);
	animation: gldot-spin 0.8s linear infinite;
}

.gldot__title {
	margin: 4px 0 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--gldot-fg);
}

.gldot__body {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--gldot-muted);
}

/* Turnstile appears here only when Cloudflare wants an interaction. */
.gldot__ts {
	width: 100%;
}

.gldot__ts:empty {
	display: none;
}

.gldot__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: 4px;
}

.gldot__actions:empty {
	display: none;
}

.gldot__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 6px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--gldot-muted);
}

.gldot__btn--primary {
	background: var(--gldot-primary);
	color: #fff;
}

.gldot__btn--primary:hover {
	background: rgba(45, 89, 200, 0.9);
}

.gldot__btn--ghost:hover {
	background: #f1f3f3;
	color: var(--gldot-fg);
}

.gldot__btn:focus-visible,
.gldot__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(45, 89, 200, 0.5);
}

/* Google's button is invisible until its iframe has proved the origin is
   allowed (onetap.js watchButton), and gone if it never does. Pages that must
   not shift reserve the space themselves (landing.css .gll__google). */
[data-gldot-source]:not(.is-ready) {
	visibility: hidden;
	pointer-events: none;
}

[data-gldot-source].is-unavailable {
	display: none !important;
}

@keyframes gldot-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes gldot-zoom {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes gldot-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gldot,
	.gldot__dialog {
		animation: none;
	}

	.gldot.is-busy .gldot__spinner {
		animation-duration: 2.4s;
	}
}

/* generect.com (PRO-1613): the same dialog in the site's own look (webhavva tokens: black 2px rules,
   16px cards with a hard shadow, black buttons, #f4bd38 accent), not the demo's blue. */
.gldot {
	--gldot-fg: #121212;
	--gldot-muted: rgba(18, 18, 18, 0.72);
	--gldot-border: #000;
	--gldot-primary: #0a0a0a;
	font-family: inherit;
}

.gldot__dialog {
	border: 2px solid #000;
	border-radius: 16px;
	box-shadow: 8px 8px 0 #0a0a0a;
	padding: 32px 28px 28px;
	background: #f4f2ee;
}

.gldot__title {
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
}

.gldot__body {
	font-size: 16px;
	line-height: 24px;
}

.gldot__btn {
	height: 48px;
	border-radius: 4px;
	border: 2px solid #000;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
}

.gldot__btn--primary {
	background: #0a0a0a;
	color: #fff;
}

.gldot__btn--primary:hover {
	background: #f4bd38;
	color: #000;
}

.gldot__btn--ghost:hover {
	background: #f4bd38;
	color: #000;
}

.gldot__btn:focus-visible,
.gldot__close:focus-visible {
	box-shadow: 0 0 0 3px #f4bd38;
}

.gldot.is-busy .gldot__spinner {
	border-top-color: #f4bd38;
}

/* no avatar and nothing in progress: no empty ring above the title */
.gldot:not(.is-busy) .gldot__spinner {
	display: none;
}

.gldot:not(.is-busy) .gldot__who:has(.gldot__avatar[hidden]) {
	display: none;
}