/* WP TK LOCK — base overlay layout (design-agnostic) */

html.wp-tk-lock-html-lock, body.wp-tk-lock-active {
	overflow: hidden !important;
	touch-action: none;
}

body.wp-tk-lock-active > *:not(.wp-tk-lock-overlay) {
	pointer-events: none !important;
}

.wp-tk-lock-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2147483600;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #fff;
	background: #1a1a2e;
	pointer-events: auto;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.wp-tk-lock-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.wp-tk-lock-scene > svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Brand mark (uploaded image) — circle-clipped, anchored to one of 9 positions */
.wp-tk-lock-brand {
	position: absolute;
	width:  var(--tk-brand-size, 28vmin);
	height: var(--tk-brand-size, 28vmin);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,0.45);
	background: rgba(0,0,0,0.2);
	z-index: 1;        /* sits above the scene SVG but BEHIND the keypad */
	pointer-events: none;
}
.wp-tk-lock-brand img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 9 anchor presets — offsets driven by --tk-brand-off-x / --tk-brand-off-y */
.wp-tk-lock-brand-pos-top-left      { top: var(--tk-brand-off-y, 4vh); left:  var(--tk-brand-off-x, 4vw); }
.wp-tk-lock-brand-pos-top-center    { top: var(--tk-brand-off-y, 4vh); left:  50%; transform: translateX(-50%); }
.wp-tk-lock-brand-pos-top-right     { top: var(--tk-brand-off-y, 4vh); right: var(--tk-brand-off-x, 4vw); }
.wp-tk-lock-brand-pos-middle-left   { top: 50%;  transform: translateY(-50%); left:  var(--tk-brand-off-x, 4vw); }
.wp-tk-lock-brand-pos-middle-center { top: 50%;  left: 50%; transform: translate(-50%, -50%); }
.wp-tk-lock-brand-pos-middle-right  { top: 50%;  transform: translateY(-50%); right: var(--tk-brand-off-x, 4vw); }
.wp-tk-lock-brand-pos-bottom-left   { bottom: var(--tk-brand-off-y, 4vh); left:  var(--tk-brand-off-x, 4vw); }
.wp-tk-lock-brand-pos-bottom-center { bottom: var(--tk-brand-off-y, 4vh); left: 50%; transform: translateX(-50%); }
.wp-tk-lock-brand-pos-bottom-right  { bottom: var(--tk-brand-off-y, 4vh); right: var(--tk-brand-off-x, 4vw); }

.wp-tk-lock-keypad-wrap {
	position: absolute;
	top: var(--tk-keypad-y, 20%);
	left: var(--tk-keypad-x, 50%);
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	z-index: 3;        /* always above the brand mark */
}

.wp-tk-lock-keypad {
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: calc(24px * var(--tk-kp-scale, 1));
	padding: calc(24px * var(--tk-kp-scale, 1));
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	width: min(calc(420px * var(--tk-kp-scale, 1)), 96vw);
}

/* High-specificity selector so themes that target input[type=text] can't
   reset the background / color of the lock display field. */
.wp-tk-lock-overlay input.wp-tk-lock-display {
	width: 100%;
	box-sizing: border-box;
	font-size: calc(28px * var(--tk-kp-scale, 1));
	letter-spacing: 8px;
	text-align: center;
	padding: calc(12px * var(--tk-kp-scale, 1)) calc(16px * var(--tk-kp-scale, 1));
	border-radius: calc(14px * var(--tk-kp-scale, 1));
	border: 2px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	margin-bottom: calc(16px * var(--tk-kp-scale, 1));
	outline: none;
	caret-color: transparent;
	-webkit-text-fill-color: #fff;
	box-shadow: none;
}

.wp-tk-lock-display.is-error {
	border-color: #ff5466;
	animation: wp-tk-lock-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.wp-tk-lock-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tk-kp-gap, 14px);
}

.wp-tk-lock-key {
	min-width: calc(64px * var(--tk-kp-scale, 1));
	min-height: calc(64px * var(--tk-kp-scale, 1));
	font-size: calc(26px * var(--tk-kp-scale, 1));
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--tk-kp-radius, 16px);
	cursor: pointer;
	transition: transform 80ms ease, background 120ms ease;
	-webkit-tap-highlight-color: transparent;
}
.wp-tk-lock-key:hover { background: rgba(255, 255, 255, 0.2); }
.wp-tk-lock-key:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.3); }

/* Screen-mirror safe mode: kill press-feedback so an observer can't tell
   which key was just tapped. Hover stays subtle; :active flash removed. */
.wp-tk-lock-screen-safe .wp-tk-lock-key:hover  { background: rgba(255, 255, 255, 0.12); }
.wp-tk-lock-screen-safe .wp-tk-lock-key:active { transform: none; background: rgba(255, 255, 255, 0.12); }
.wp-tk-lock-screen-safe .wp-tk-lock-key:focus  { outline: none; }
.wp-tk-lock-key.is-submit { background: rgba(110, 220, 130, 0.45); }
.wp-tk-lock-key.is-back   { background: rgba(255, 130, 130, 0.35); }

.wp-tk-lock-keypad-blocked {
	text-align: center;
	padding: 32px 28px;
}
.wp-tk-lock-blocked-icon  { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.wp-tk-lock-blocked-title { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 8px; }
.wp-tk-lock-blocked-text  { font-size: 14px; opacity: 0.85; line-height: 1.4; max-width: 360px; margin: 0 auto; }

.wp-tk-lock-error {
	margin-top: 12px;
	min-height: 1.4em;
	text-align: center;
	color: #ff8a96;
	font-weight: 600;
}

/* Preview banner — admin-only, only when ?wp_tk_lock_preview=1.
   Compact centered pill so the admin can still interact with the lock icon /
   keypad while tweaking settings in another tab. */
.wp-tk-lock-preview-banner {
	position: fixed;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2147483647;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 14px;
	max-width: min(560px, 92vw);
	background: #ffd54a;
	color: #1c1208;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 999px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.35);
	opacity: 0.92;
	transition: opacity 120ms ease;
	pointer-events: auto;
}
.wp-tk-lock-preview-banner:hover { opacity: 1; }
.wp-tk-lock-preview-close {
	border: 0;
	background: rgba(0,0,0,0.18);
	color: #1c1208;
	width: 20px; height: 20px;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-tk-lock-preview-close:hover { background: rgba(0,0,0,0.35); color: #fff; }

.wp-tk-lock-dev-x {
	position: fixed;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 2147483647;
	opacity: 0.75;
}
.wp-tk-lock-dev-x:hover { opacity: 1; }
.wp-tk-lock-dev-x::after {
	content: "DEV";
	position: absolute;
	right: 50px;
	top: 12px;
	font-size: 11px;
	letter-spacing: 1px;
	opacity: 0.8;
}

@keyframes wp-tk-lock-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-8px); }
	40%, 60% { transform: translateX(8px); }
}

/* Reduce or remove motion for users who request it. */
@media (prefers-reduced-motion: reduce) {
	.wp-tk-lock-display.is-error {
		animation: none !important;
	}
	.wp-tk-lock-key {
		transition: none !important;
	}
}

/* Visible focus ring for keyboard users. */
.wp-tk-lock-key:focus-visible,
.wp-tk-lock-dev-x:focus-visible {
	outline: 3px solid #ffd54a;
	outline-offset: 2px;
}