
/*
 * v1.0.1 intentionally DOES NOT move, clone, wrap, or replace scanner elements.
 * It only styles the existing scanner after scanner.js confirms the page.
 */

body.fp365-scanner-styled{
	--fp-pink:#f40051;
	--fp-pink2:#ff3277;
	--fp-dark:#0b0c11;
	--fp-panel:#14161d;
	--fp-line:rgba(255,255,255,.11);
	--fp-muted:#9aa1b2;
	background:
		radial-gradient(circle at 82% 10%,rgba(244,0,81,.16),transparent 340px),
		radial-gradient(circle at 18% 50%,rgba(244,0,81,.07),transparent 420px),
		#090a0e!important;
}

body.fp365-scanner-styled .fp365-scanner-page-title-safe{
	max-width:1100px!important;
	margin:42px auto 0!important;
	padding:0 24px!important;
	color:#fff!important;
	font-family:Montserrat,Arial,sans-serif!important;
	font-size:clamp(34px,4vw,52px)!important;
	font-weight:900!important;
	line-height:1.05!important;
	letter-spacing:-.035em!important;
	text-transform:none!important;
}

body.fp365-scanner-styled .fp365-scanner-shell-safe{
	position:relative!important;
	width:min(1100px,calc(100% - 40px))!important;
	max-width:1100px!important;
	margin:34px auto 70px!important;
	padding:58px 38px 38px!important;
	border:1px solid rgba(255,255,255,.08)!important;
	border-radius:28px!important;
	background:
		linear-gradient(145deg,rgba(244,0,81,.08),transparent 44%),
		linear-gradient(180deg,#12141b,#0c0d12)!important;
	box-shadow:0 28px 70px rgba(0,0,0,.42)!important;
	overflow:visible!important;
}

body.fp365-scanner-styled .fp365-scanner-shell-safe:before{
	content:"FETEPASS365  •  SECURE TICKET CHECK-IN";
	position:absolute;
	left:38px;
	top:22px;
	color:#ff679c;
	font-family:Montserrat,Arial,sans-serif;
	font-size:10px;
	font-weight:800;
	letter-spacing:.15em;
}

body.fp365-scanner-styled .fp365-scanner-shell-safe:after{
	content:"Enter the event Staff Scan PIN to unlock secure QR ticket validation.";
	display:block;
	margin:20px auto 0;
	padding:15px 18px;
	border:1px solid rgba(244,0,81,.14);
	border-radius:12px;
	background:rgba(244,0,81,.055);
	color:#9fa6b5;
	font-family:Montserrat,Arial,sans-serif;
	font-size:12px;
	line-height:1.55;
	text-align:center;
}

body.fp365-scanner-styled .fp365-scanner-card-safe{
	position:relative!important;
	width:min(720px,100%)!important;
	max-width:720px!important;
	margin:0 auto!important;
	padding:42px 38px 38px!important;
	border:1px solid var(--fp-line)!important;
	border-radius:20px!important;
	background:
		radial-gradient(circle at 50% 0,rgba(244,0,81,.09),transparent 190px),
		#171921!important;
	box-shadow:
		0 20px 55px rgba(0,0,0,.30),
		inset 0 1px 0 rgba(255,255,255,.04)!important;
	color:#fff!important;
}

body.fp365-scanner-styled .fp365-scanner-card-safe:before{
	content:"01";
	display:grid;
	place-items:center;
	width:42px;
	height:42px;
	margin:0 auto 20px;
	border-radius:50%;
	background:linear-gradient(135deg,var(--fp-pink),var(--fp-pink2));
	color:#fff;
	box-shadow:0 10px 24px rgba(244,0,81,.25);
	font-family:Montserrat,Arial,sans-serif;
	font-size:12px;
	font-weight:900;
}

body.fp365-scanner-styled .fp365-scanner-card-safe h1,
body.fp365-scanner-styled .fp365-scanner-card-safe h2,
body.fp365-scanner-styled .fp365-scanner-card-safe h3,
body.fp365-scanner-styled .fp365-scanner-card-safe h4{
	color:#fff!important;
	font-family:Montserrat,Arial,sans-serif!important;
	font-weight:850!important;
	letter-spacing:-.02em!important;
	text-transform:none!important;
}

body.fp365-scanner-styled .fp365-scanner-card-safe p,
body.fp365-scanner-styled .fp365-scanner-card-safe label,
body.fp365-scanner-styled .fp365-scanner-card-safe small{
	color:var(--fp-muted)!important;
	font-family:Montserrat,Arial,sans-serif!important;
}

body.fp365-scanner-styled .fp365-pin-input-safe{
	height:58px!important;
	min-height:58px!important;
	width:100%!important;
	max-width:none!important;
	padding:0 20px!important;
	border:1px solid rgba(255,255,255,.13)!important;
	border-radius:12px!important;
	background:#0b0d12!important;
	color:#fff!important;
	outline:none!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
	font-family:Montserrat,Arial,sans-serif!important;
	font-size:22px!important;
	font-weight:800!important;
	letter-spacing:.30em!important;
	text-align:center!important;
	transition:.18s ease!important;
}

body.fp365-scanner-styled .fp365-pin-input-safe:focus{
	border-color:rgba(244,0,81,.75)!important;
	box-shadow:0 0 0 4px rgba(244,0,81,.10)!important;
}

body.fp365-scanner-styled .fp365-pin-input-safe::placeholder{
	color:#666b77!important;
	opacity:1!important;
}

body.fp365-scanner-styled .fp365-open-scanner-safe{
	min-height:56px!important;
	padding:0 30px!important;
	border:1px solid var(--fp-pink)!important;
	border-radius:12px!important;
	background:linear-gradient(135deg,var(--fp-pink),var(--fp-pink2))!important;
	color:#fff!important;
	box-shadow:0 13px 30px rgba(244,0,81,.24)!important;
	font-family:Montserrat,Arial,sans-serif!important;
	font-size:13px!important;
	font-weight:850!important;
	text-decoration:none!important;
	transition:.18s ease!important;
}

body.fp365-scanner-styled .fp365-open-scanner-safe:hover{
	transform:translateY(-1px)!important;
	box-shadow:0 17px 36px rgba(244,0,81,.32)!important;
}

body.fp365-scanner-styled .fp365-scanner-card-safe img{
	max-width:230px!important;
	height:auto!important;
}

@media(max-width:720px){
	body.fp365-scanner-styled .fp365-scanner-page-title-safe{
		margin-top:28px!important;
		padding:0 16px!important;
		font-size:36px!important;
	}

	body.fp365-scanner-styled .fp365-scanner-shell-safe{
		width:calc(100% - 24px)!important;
		margin-top:24px!important;
		padding:54px 12px 20px!important;
		border-radius:20px!important;
	}

	body.fp365-scanner-styled .fp365-scanner-shell-safe:before{
		left:18px;
		top:20px;
		font-size:9px;
	}

	body.fp365-scanner-styled .fp365-scanner-card-safe{
		padding:30px 18px 24px!important;
		border-radius:16px!important;
	}

	body.fp365-scanner-styled .fp365-pin-input-safe{
		font-size:18px!important;
		letter-spacing:.20em!important;
	}

	body.fp365-scanner-styled .fp365-open-scanner-safe{
		width:100%!important;
		margin-top:10px!important;
	}
}


/* Back to Dashboard */
body.fp365-scanner-styled .fp365-back-dashboard-safe{
	position:fixed;
	top:128px;
	left:22px;
	z-index:99999;
	display:inline-flex;
	align-items:center;
	gap:10px;
	min-height:44px;
	padding:0 15px 0 12px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:11px;
	background:rgba(10,11,16,.92);
	color:#fff!important;
	box-shadow:0 10px 28px rgba(0,0,0,.28);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	text-decoration:none!important;
	font-family:Montserrat,Arial,sans-serif;
	font-size:12px;
	font-weight:800;
	line-height:1;
	transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body.fp365-scanner-styled .fp365-back-dashboard-safe span{
	display:grid;
	place-items:center;
	width:24px;
	height:24px;
	border-radius:7px;
	background:rgba(244,0,81,.13);
	color:#ff4c87;
	font-size:18px;
	line-height:1;
}
body.fp365-scanner-styled .fp365-back-dashboard-safe strong{
	font:inherit;
}
body.fp365-scanner-styled .fp365-back-dashboard-safe:hover,
body.fp365-scanner-styled .fp365-back-dashboard-safe:focus{
	transform:translateY(-1px);
	border-color:rgba(244,0,81,.55);
	background:#11131a;
	color:#fff!important;
	box-shadow:0 14px 32px rgba(0,0,0,.34);
	outline:none;
}
@media(max-width:720px){
	body.fp365-scanner-styled .fp365-back-dashboard-safe{
		position:relative;
		top:auto;
		left:auto;
		z-index:5;
		margin:14px 12px 0;
		width:max-content;
	}
}
