/* Root variables are injected from PHP settings */
:root{
	--tw2ag-bg:#0b0b0b;
	--tw2ag-panel-bg:rgba(255,255,255,0.02);
	--tw2ag-text:#ffffff;
	--tw2ag-question:#ffffff;
	--tw2ag-btn-bg:#ffffff;
	--tw2ag-btn-text:#0b0b0b;
	--tw2ag-logo-w:auto;
}

html.tw2ag-lock, html.tw2ag-lock body { overflow: hidden !important; }
.tw2ag-overlay[aria-hidden="true"] { display: none; }

.tw2ag-overlay {
	position: fixed;
	inset: 0;
	background: var(--tw2ag-bg);
	color: var(--tw2ag-text);
	display: grid;
	place-items: center;
	z-index: 999999;
}

.tw2ag-panel {
	max-width: 640px;
	width: 92vw;
	text-align: center;
	padding: 32px;
	border-radius: 16px;
	background: var(--tw2ag-panel-bg);
	box-shadow: 0 10px 40px rgba(0,0,0,.45);
	outline: 0;
}

.tw2ag-logo-wrap { margin-bottom: 16px; }
.tw2ag-logo-wrap img { width: var(--tw2ag-logo-w); max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* Stronger specificity to override theme styles */
.tw2ag-overlay .tw2ag-question { font-size: clamp(22px, 3.2vw, 36px); line-height: 1.2; margin: 0 0 18px 0; color: var(--tw2ag-question) !important; }

.tw2ag-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }

.tw2ag-btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 12px 22px;
	font-weight: 700;
	cursor: pointer;
	background: var(--tw2ag-btn-bg);
	color: var(--tw2ag-btn-text);
	transition: transform .06s ease-in, filter .2s ease;
}

/* Remove borders/outlines on focus/active as requested */
.tw2ag-btn:focus, .tw2ag-btn:active { outline: none !important; box-shadow: none !important; }
.tw2ag-btn:hover { filter: brightness(0.95); }
.tw2ag-btn:active { transform: translateY(1px) scale(0.99); }

.tw2ag-note { font-size: 14px; margin-top: 12px; opacity: .9; color: var(--tw2ag-text); }