/**
 * Entry-gate overlay styles.
 *
 * Every visual property is scoped to #vra-gate and marked !important — this is
 * ISOLATION, not aggression: the plugin lands in unknown themes whose global
 * card/h2/button/input rules would otherwise bleed into the overlay. Colors come
 * from the CSS custom properties emitted in PHP (var(--vra-*)), so a site rebrands
 * entirely from settings without touching this file.
 */
#vra-gate{
	position:fixed!important;inset:0!important;z-index:2147483000!important;
	display:flex!important;align-items:flex-start!important;justify-content:center!important;
	margin:0!important;padding:30px 18px!important;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;
	font-family:var(--vra-font)!important;background-color:var(--vra-navy)!important;
}
#vra-gate *,#vra-gate *::before,#vra-gate *::after{box-sizing:border-box;}
#vra-gate::before{
	content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
	background-image:var(--vra-bg);background-size:cover;background-position:center;background-repeat:no-repeat;
	opacity:1;filter:saturate(0.96) brightness(0.98);
}
#vra-gate::after{
	content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
	background:linear-gradient(0deg,var(--vra-backdrop),var(--vra-backdrop));
}
@keyframes vra-gate-in{from{opacity:0;transform:translateY(14px) scale(0.99);}to{opacity:1;transform:none;}}

#vra-gate .vra-gate-shell{position:relative!important;z-index:1!important;margin:auto!important;width:100%!important;max-width:464px!important;display:block!important;}

#vra-gate .vra-gate-card{
	position:relative!important;z-index:1!important;margin:0!important;float:none!important;
	width:100%!important;overflow:hidden!important;
	background:var(--vra-card)!important;
	-webkit-backdrop-filter:blur(var(--vra-blur)) saturate(1.1);backdrop-filter:blur(var(--vra-blur)) saturate(1.1);
	border:1px solid rgba(128,128,128,0.28)!important;border-radius:var(--vra-radius)!important;color:var(--vra-text)!important;
	box-shadow:0 40px 110px rgba(8,20,36,0.55),0 6px 22px rgba(8,20,36,0.35),inset 0 1px 0 rgba(255,255,255,0.12)!important;
	padding:24px 32px 26px!important;text-align:left!important;
	animation:vra-gate-in .5s cubic-bezier(0.16,1,0.3,1) both;
}
#vra-gate .vra-gate-card::before{
	content:'';position:absolute;top:0;left:0;right:0;height:3px;
	background:linear-gradient(90deg,var(--vra-accent) 0%,var(--vra-accent2) 50%,var(--vra-accent2) 100%);
}
#vra-gate .vra-gate-logo{display:block!important;width:142px!important;max-width:54%!important;height:auto!important;margin:0 auto 14px!important;filter:brightness(1.08);}
#vra-gate .vra-gate-wordmark{display:block!important;text-align:center!important;font-size:22px!important;font-weight:800!important;color:var(--vra-text)!important;margin:0 auto 14px!important;letter-spacing:-0.3px;}
#vra-gate .vra-gate-h2{color:var(--vra-text)!important;font-size:26px!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-0.5px!important;margin:0 0 10px!important;text-align:center!important;}
#vra-gate .vra-gate-intro{color:var(--vra-muted)!important;font-size:13.5px!important;line-height:1.6!important;margin:0 0 22px!important;text-align:center!important;}

#vra-gate .vra-gate-check{
	display:flex!important;gap:13px!important;align-items:flex-start!important;text-align:left!important;width:100%!important;
	padding:15px 16px!important;border:1px solid rgba(255,255,255,0.18)!important;border-radius:14px!important;margin:0 0 12px!important;cursor:pointer;
	background:rgba(255,255,255,0.07)!important;transition:border-color .15s,background .15s,box-shadow .15s;
	touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
@media (hover:hover) and (pointer:fine){
	#vra-gate .vra-gate-check:hover{border-color:rgba(128,128,128,0.55)!important;background:rgba(128,128,128,0.10)!important;}
}
#vra-gate .vra-gate-check:focus-within{border-color:var(--vra-accent2)!important;box-shadow:0 0 0 3px rgba(128,128,128,0.22)!important;}
#vra-gate .vra-gate-check input{appearance:auto!important;-webkit-appearance:auto!important;margin:1px 0 0!important;width:20px!important;height:20px!important;flex-shrink:0!important;accent-color:var(--vra-accent);cursor:pointer;touch-action:manipulation;}
#vra-gate .vra-gate-check span{font-size:13.5px!important;line-height:1.5!important;color:var(--vra-text)!important;}
#vra-gate .vra-gate-check span strong{font-weight:700!important;color:var(--vra-text)!important;}

#vra-gate .vra-gate-enter{
	width:100%!important;margin:18px 0 0!important;padding:16px!important;border:0!important;border-radius:100px!important;text-transform:none!important;
	background:linear-gradient(135deg,var(--vra-accent2) 0%,var(--vra-accent) 100%)!important;color:#FFFFFF!important;font-size:15px!important;font-weight:800!important;font-family:inherit!important;line-height:1!important;
	cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;letter-spacing:.01em!important;
	touch-action:manipulation;-webkit-tap-highlight-color:transparent;
	box-shadow:0 12px 28px rgba(0,0,0,0.18)!important;transition:transform .15s,box-shadow .2s,background .2s,color .2s;text-shadow:none!important;
}
#vra-gate .vra-gate-enter svg{flex-shrink:0;}
#vra-gate .vra-gate-enter:disabled{background:rgba(128,128,128,0.18)!important;color:var(--vra-muted)!important;cursor:not-allowed;box-shadow:none!important;}
#vra-gate .vra-gate-enter:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,0.24)!important;}
#vra-gate .vra-gate-enter:not(:disabled):active{transform:translateY(0) scale(0.99);}
#vra-gate .vra-gate-enter:focus-visible{outline:3px solid rgba(128,128,128,0.65);outline-offset:2px;}

#vra-gate .vra-gate-fine{font-size:11px!important;line-height:1.6!important;color:var(--vra-fine)!important;margin:18px 0 0!important;text-align:left!important;}
#vra-gate .vra-gate-fine a{color:var(--vra-accent2)!important;text-decoration:underline!important;}
#vra-gate .vra-gate-exit{font-size:12.5px!important;color:var(--vra-muted)!important;margin:16px 0 4px!important;text-align:center!important;}
#vra-gate .vra-gate-exit a{color:var(--vra-text)!important;font-weight:700!important;text-decoration:underline!important;}

@media (min-width:560px){
	#vra-gate{padding:46px 20px!important;}
	#vra-gate .vra-gate-shell{max-width:486px!important;}
	#vra-gate .vra-gate-card{padding:28px 40px 32px!important;}
	#vra-gate .vra-gate-h2{font-size:29px!important;}
}
@media (max-width:560px){
	#vra-gate{padding:calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom))!important;}
	#vra-gate .vra-gate-card{padding:18px 20px 18px!important;border-radius:18px!important;}
	#vra-gate .vra-gate-logo{width:96px!important;margin:0 auto 9px!important;}
	#vra-gate .vra-gate-wordmark{font-size:18px!important;margin:0 auto 9px!important;}
	#vra-gate .vra-gate-h2{font-size:21px!important;line-height:1.1!important;margin:0 0 7px!important;}
	#vra-gate .vra-gate-intro{font-size:12.5px!important;line-height:1.4!important;margin:0 0 12px!important;}
	#vra-gate .vra-gate-check{padding:10px 12px!important;margin:0 0 8px!important;gap:10px!important;border-radius:11px!important;}
	#vra-gate .vra-gate-check span{font-size:12.5px!important;line-height:1.38!important;}
	#vra-gate .vra-gate-check input{width:18px!important;height:18px!important;}
	#vra-gate .vra-gate-enter{padding:13px!important;margin:12px 0 0!important;font-size:14px!important;}
	#vra-gate .vra-gate-fine{font-size:9.8px!important;line-height:1.4!important;margin:11px 0 0!important;}
	#vra-gate .vra-gate-exit{font-size:11.5px!important;margin:9px 0 2px!important;}
}