/* ═══════════════════════════════════════════════════════════
   Verify Employee — page styles
   Uses Kerisite CSS vars: --accent (#0ABAB5), --t1/t2/t3, --bg, --white
   ═══════════════════════════════════════════════════════════ */

.vf{display:block}

/* ─── Hero ─── */
.vf-hero{
	padding:clamp(96px,10vw,140px) 0 clamp(30px,4vw,50px);
	background:
		radial-gradient(ellipse 60% 50% at 50% 100%,var(--accent-soft) 0%,transparent 60%),
		radial-gradient(ellipse 40% 40% at 80% 20%,var(--accent-mid) 0%,transparent 50%),
		var(--white);
	position:relative;overflow:hidden
}
.vf-hero-inner{max-width:720px;margin:0 auto;text-align:center}
.vf-shield-wrap{display:flex;justify-content:center;margin-bottom:24px}
.vf-shield{
	width:88px;height:88px;border-radius:50%;
	background:var(--accent-soft);
	display:flex;align-items:center;justify-content:center;
	color:var(--accent)
}
.vf-shield svg{width:42px;height:42px}
@keyframes vfShieldPulse{
	0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}
	50%    {box-shadow:0 0 0 18px rgba(10,186,181,0)}
}
.shield-pulse{animation:vfShieldPulse 2.6s ease-in-out infinite}

.vf-divided-label{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px}
.vf-divided-label .vf-line{width:32px;height:2px;background:var(--accent)}
.vf-eyebrow{
	font-size:.72rem;font-weight:700;letter-spacing:.25em;
	text-transform:uppercase;color:var(--accent)
}
.vf-title{
	font-size:clamp(1.8rem,4vw,3rem);font-weight:800;
	line-height:1.12;letter-spacing:-.02em;color:var(--t1);
	margin:0 auto 20px;max-width:620px
}
.vf-sub{
	font-size:1.02rem;line-height:1.75;color:var(--t2);
	margin:0 auto;max-width:540px
}

/* ─── Fraud notice ─── */
.vf-notice-wrap{padding:0 0 clamp(28px,3vw,40px)}
.vf-notice{
	max-width:640px;margin:0 auto;
	background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radius);
	padding:18px 22px;display:flex;gap:16px;align-items:flex-start
}
.vf-notice-ico{
	width:40px;height:40px;border-radius:10px;flex-shrink:0;
	background:#FEE2E2;color:#DC2626;
	display:flex;align-items:center;justify-content:center
}
.vf-notice-ico svg{width:20px;height:20px}
.vf-notice h4{
	font-size:.9rem;font-weight:700;color:#B91C1C;
	margin:0 0 4px;letter-spacing:.01em
}
.vf-notice p{font-size:.88rem;line-height:1.65;color:#DC2626;margin:0}
.vf-notice p strong{color:#991B1B}

/* ─── Verify card ─── */
.vf-card-wrap{padding:0 0 clamp(40px,5vw,56px)}
.vf-card{
	max-width:640px;margin:0 auto;
	background:var(--white);border:1px solid var(--b2);
	border-radius:24px;box-shadow:var(--sh-md);overflow:hidden
}

.vf-tabs{
	display:flex;border-bottom:1px solid var(--b2);padding:0 12px
}
.vf-tab{
	padding:16px 20px;font-size:.84rem;font-weight:600;
	cursor:pointer;border:none;background:none;color:var(--t3);
	border-bottom:2px solid transparent;
	display:flex;align-items:center;gap:8px;
	font-family:inherit;transition:color .2s,border-color .2s
}
.vf-tab svg{width:18px;height:18px}
.vf-tab:hover{color:var(--t1)}
.vf-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.vf-panels{padding:26px clamp(20px,3vw,36px)}
.vf-panel{display:none}
.vf-panel.active{display:block}
.vf-label{
	display:block;font-size:.72rem;font-weight:700;
	color:var(--t3);text-transform:uppercase;letter-spacing:.12em;
	margin-bottom:10px
}
.vf-input{
	width:100%;background:var(--bg);
	border:1.5px solid transparent;border-radius:var(--radius-sm);
	padding:14px 18px;font-size:16px;color:var(--t1);
	font-family:inherit;outline:none;
	transition:border-color .2s,box-shadow .2s,background .2s;
	box-sizing:border-box
}
.vf-input:focus{
	border-color:var(--accent);
	box-shadow:0 0 0 3px var(--accent-soft);
	background:var(--white)
}
.vf-input::placeholder{color:var(--t4)}
.vf-input.vf-mono{
	font-family:ui-monospace,'SF Mono','Menlo',monospace;
	letter-spacing:.04em;font-weight:500
}
.vf-input--error{border-color:#DC2626}

/* Rate limit inline notice (soft warning, not a fraud result) */
.vf-rate-notice{
	margin-top:14px;padding:12px 14px;
	background:#FFFBEB;border:1px solid #FDE68A;
	border-radius:var(--radius-sm);
	font-size:.85rem;color:#B45309;line-height:1.5;
	display:flex;align-items:flex-start;gap:8px;
	animation:vfSlideUp .4s var(--ease) both
}
.vf-rate-notice::before{
	content:'⏱';font-size:1.05rem;line-height:1.3;flex-shrink:0
}

.vf-submit-wrap{padding:0 clamp(20px,3vw,36px) clamp(20px,3vw,36px)}
.vf-submit{
	width:100%;padding:16px;
	border-radius:var(--radius-sm);border:none;cursor:pointer;
	font-size:.96rem;font-weight:700;font-family:inherit;
	display:flex;align-items:center;justify-content:center;gap:10px;
	background:var(--accent);color:var(--white);
	position:relative;overflow:hidden;
	transition:background .25s var(--ease),transform .15s var(--ease),box-shadow .25s var(--ease)
}
.vf-submit:hover{background:var(--accent-hover);box-shadow:0 8px 26px var(--accent-glow)}
.vf-submit:active{transform:scale(.985)}
.vf-submit:disabled{opacity:.9;cursor:wait}
.vf-submit svg{width:20px;height:20px}

@keyframes vfScanLine{0%{left:-30%}100%{left:130%}}
.vf-submit.scanning .vf-scan{
	position:absolute;top:0;width:30%;height:100%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
	animation:vfScanLine 1.5s ease-in-out infinite
}

.vf-trust{
	max-width:640px;margin:20px auto 0;
	display:flex;flex-wrap:wrap;justify-content:center;gap:18px
}
.vf-trust-item{
	display:inline-flex;align-items:center;gap:6px;
	font-size:.78rem;color:var(--t3);font-weight:500
}
.vf-trust-item svg{width:14px;height:14px;color:var(--accent)}

/* ─── Result cards ─── */
.vf-results-wrap{padding:clamp(12px,2vw,20px) 0 clamp(40px,5vw,60px)}
@keyframes vfSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.vf-result{
	max-width:640px;margin:0 auto;
	border-radius:20px;padding:28px clamp(22px,2.6vw,32px);
	position:relative;overflow:hidden;
	animation:vfSlideUp .5s var(--ease) both
}
.vf-result::before{
	content:'';position:absolute;top:0;right:0;
	width:120px;height:120px;border-radius:50%;
	opacity:.06;transform:translate(30px,-30px)
}

/* Verified */
.vf-result--verified{background:#ECFDF5;border:1.5px solid #A7F3D0}
.vf-result--verified::before{background:var(--accent)}
.vf-result--verified .vf-result-head{
	display:flex;align-items:center;gap:10px;
	margin-bottom:22px;color:var(--accent);
	font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.vf-result--verified .vf-result-head svg{width:20px;height:20px}

.vf-result-body{display:flex;gap:26px;flex-wrap:wrap}
.vf-result-photo{
	flex-shrink:0;position:relative;
	display:flex;flex-direction:column;align-items:center
}
.vf-photo-box{
	width:110px;height:110px;border-radius:20px;overflow:hidden;
	border:2px solid var(--accent-mid);box-shadow:var(--sh-sm);
	background:var(--bg);
	display:flex;align-items:center;justify-content:center
}
.vf-photo-box img{width:100%;height:100%;object-fit:cover}
.vf-photo-placeholder{color:var(--accent);display:flex}
.vf-photo-placeholder svg{width:46px;height:46px}
.vf-photo-badge{
	position:absolute;bottom:28px;right:-4px;
	width:28px;height:28px;border-radius:50%;
	background:var(--accent);color:var(--white);
	display:flex;align-items:center;justify-content:center;
	border:2px solid var(--white);box-shadow:var(--sh-sm)
}
.vf-photo-badge svg{width:14px;height:14px}
.vf-verified-chip{
	font-size:.64rem;font-weight:800;color:var(--accent);
	letter-spacing:.18em;margin-top:8px;text-transform:uppercase
}

.vf-result-info{flex:1;min-width:0}
.vf-result-info h3{
	font-size:1.36rem;font-weight:800;color:var(--t1);
	margin:0 0 4px;letter-spacing:-.01em
}
.vf-result-title{font-size:.92rem;color:var(--t3);margin:0 0 18px}
.vf-result-meta{
	display:grid;grid-template-columns:1fr 1fr;
	gap:10px 22px
}
.vf-result-meta .vf-meta-k{
	display:block;font-size:.66rem;font-weight:700;
	color:var(--t4);text-transform:uppercase;letter-spacing:.12em;margin-bottom:2px
}
.vf-result-meta .vf-meta-v{
	display:block;font-size:.88rem;font-weight:700;color:var(--t1)
}
.vf-result-meta .vf-meta-v--active{color:var(--accent)}

/* Not found */
.vf-result--notfound{background:#FEF2F2;border:1.5px solid #FECACA}
.vf-result--notfound::before{background:#DC2626}
.vf-result-head--danger{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vf-result-ico--danger{
	width:44px;height:44px;border-radius:50%;
	background:#FEE2E2;color:#DC2626;flex-shrink:0;
	display:flex;align-items:center;justify-content:center
}
.vf-result-ico--danger svg{width:24px;height:24px}
.vf-result-head--danger h3{
	font-size:1.08rem;font-weight:800;color:#B91C1C;margin:0 0 2px
}
.vf-result-head--danger p{
	font-size:.76rem;font-weight:600;color:#DC2626;margin:0
}

/* Inactive */
.vf-result--inactive{background:#FFFBEB;border:1.5px solid #FDE68A}
.vf-result--inactive::before{background:#D97706}
.vf-result-head--warn{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vf-result-ico--warn{
	width:44px;height:44px;border-radius:50%;
	background:#FEF3C7;color:#D97706;flex-shrink:0;
	display:flex;align-items:center;justify-content:center
}
.vf-result-ico--warn svg{width:24px;height:24px}
.vf-result-head--warn h3{
	font-size:1.08rem;font-weight:800;color:#B45309;margin:0 0 2px
}
.vf-result-head--warn p{
	font-size:.76rem;font-weight:600;color:#D97706;margin:0
}
.vf-result--inactive .vf-result-name{
	font-size:.94rem;font-weight:700;color:#92400E;margin:0 0 6px
}

.vf-result-body-text{
	font-size:.92rem;line-height:1.65;margin:0
}
.vf-result--notfound .vf-result-body-text{color:#DC2626}
.vf-result--notfound .vf-result-body-text strong{color:#991B1B}
.vf-result--inactive .vf-result-body-text{color:#92400E}
.vf-result--inactive .vf-result-body-text strong{color:#78350F}
.vf-result--inactive .vf-result-body-text a{color:inherit;text-decoration:underline}

.vf-again-wrap{max-width:640px;margin:24px auto 0;text-align:center}
.vf-again-wrap button{
	background:none;border:none;cursor:pointer;
	font-family:inherit;font-size:.88rem;font-weight:700;
	color:var(--t2);display:inline-flex;align-items:center;gap:8px;
	padding:6px 10px;transition:color .2s
}
.vf-again-wrap button:hover{color:var(--accent)}
.vf-again-wrap svg{width:18px;height:18px}

/* ─── Tips ─── */
.vf-tips{padding:clamp(50px,7vw,90px) 0;background:var(--bg)}
.vf-tips-head{text-align:center;max-width:560px;margin:0 auto clamp(32px,4vw,48px)}
.vf-tips-head .tag{display:inline-flex;justify-content:center}
.vf-tips-head .sec-h{margin-top:14px}

.vf-tips-grid{
	display:grid;grid-template-columns:repeat(4,1fr);
	gap:clamp(14px,1.6vw,20px)
}
.vf-tip-card{
	background:var(--white);border:1px solid var(--b2);
	border-radius:var(--radius);padding:24px 22px;
	transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.vf-tip-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--accent-mid)}
.vf-tip-ico{
	width:42px;height:42px;border-radius:10px;
	background:#FEE2E2;color:#DC2626;
	display:flex;align-items:center;justify-content:center;margin-bottom:16px
}
.vf-tip-ico svg{width:20px;height:20px}
.vf-tip-card--accent .vf-tip-ico{background:var(--accent-soft);color:var(--accent)}
.vf-tip-card h4{
	font-size:.92rem;font-weight:700;color:var(--t1);
	margin:0 0 8px
}
.vf-tip-card p{
	font-size:.82rem;line-height:1.6;color:var(--t3);margin:0
}
.vf-tip-card p strong{color:var(--t1)}

/* ─── Contact ─── */
.vf-contact{padding:clamp(36px,5vw,56px) 0}
.vf-contact-inner{
	max-width:620px;margin:0 auto;text-align:center
}
.vf-contact-inner p{
	font-size:.94rem;color:var(--t2);margin:0 0 18px
}
.vf-contact-inner .btn{gap:10px}
.vf-contact-inner .btn svg{width:18px;height:18px}

/* ─── Responsive ─── */
@media(max-width:900px){
	.vf-tips-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
	.vf-title{font-size:clamp(1.7rem,7vw,2.2rem)}
	.vf-notice{flex-direction:column;padding:16px 18px}
	.vf-notice-ico{width:36px;height:36px}
	.vf-result-body{flex-direction:column;gap:18px;align-items:flex-start}
	.vf-result-meta{grid-template-columns:1fr}
	.vf-photo-badge{bottom:26px;right:-6px}
	.vf-tips-grid{grid-template-columns:1fr;gap:12px}
	.vf-tab{padding:14px 14px;font-size:.8rem}
	.vf-tab span{display:none}
	.vf-tab svg{width:20px;height:20px}
	.vf-tabs{justify-content:center;gap:8px}
}