/* =========================================================
	TALENTHUB LOGIN - FORM
========================================================= */

.th-login-form{
	display:flex;
	flex-direction:column;
	gap:18px;
	width:100%;
	max-width:520px;
}

.th-login-field{
	gap:0;
}

.th-login-field .th-label{
	color:var(--th-color-text-soft);
	font-size:.88rem;
}

.th-login-field .th-input{
	min-height:54px;
	border-radius:17px;
	background:var(--th-card-bg-glass);
	border-color:var(--th-border-glass);
	color:var(--th-color-text-main);
}

.th-login-field .th-input:hover,
.th-login-field .th-input:focus{
	background:var(--th-card-bg-hover);
	border-color:var(--th-border-cyan);
	color:var(--th-color-text-main);
}

.th-login-field .th-input::placeholder{
	color:var(--th-color-text-muted);
}

.th-login-field .th-input.is-valid,
.th-login-field .th-input.is-invalid{
	background:var(--th-card-bg-glass);
	color:var(--th-color-text-main);
	box-shadow:none;
}

.th-login-field .th-input.is-valid:focus,
.th-login-field .th-input.is-invalid:focus{
	background:var(--th-card-bg-hover);
	color:var(--th-color-text-main);
}

.th-login-field .th-input:-webkit-autofill,
.th-login-field .th-input:-webkit-autofill:hover,
.th-login-field .th-input:-webkit-autofill:focus,
.th-login-field .th-input:-webkit-autofill:active{
	-webkit-text-fill-color:var(--th-color-text-main) !important;
	caret-color:var(--th-color-text-main);
	box-shadow:0 0 0 1000px var(--th-card-bg-glass) inset !important;
	transition:background-color 9999s ease-in-out 0s;
}

.th-login-field .th-input-icon{
	color:var(--th-badge-text);
}

.th-login-password-group{
	position:relative;
}

.th-login-password-input{
	padding-right:92px !important;
}

.th-login-password-toggle{
	position:absolute;
	top:50%;
	right:10px;
	z-index:20;

	display:flex;
	align-items:center;
	justify-content:center;

	width:36px;
	height:36px;

	border:none;
	border-radius:12px;

	background:transparent;
	color:var(--th-color-text-muted);

	transform:translateY(-50%);

	transition:
		background .22s ease,
		color .22s ease,
		transform .22s ease;
}

.th-login-password-toggle:hover{
	background:var(--th-badge-bg);
	color:var(--th-badge-text);
	transform:translateY(-50%) scale(1.05);
}

.th-login-password-group::after{
	right:58px;
}

.th-login-password-group:has(.th-input.is-valid) .th-login-password-toggle,
.th-login-password-group:has(.th-input.is-invalid) .th-login-password-toggle{
	right:10px;
}

.th-login-password-group:has(.th-input.is-valid)::after,
.th-login-password-group:has(.th-input.is-invalid)::after{
	right:58px;
}

.th-login-options{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-top:2px;
}

.th-login-options .form-check{
	margin:0;
	min-height:auto;
}

.th-login-options .form-check-input{
	width:16px;
	height:16px;
	margin-top:3px;
	cursor:pointer;
	background-color:transparent;
	border-color:var(--th-border-glass);
	box-shadow:none;
}

.th-login-options .form-check-input:checked{
	background-color:var(--th-badge-text);
	border-color:var(--th-badge-text);
}

.th-login-options .form-check-label{
	color:var(--th-color-text-soft);
	font-size:.86rem;
	font-weight:750;
	cursor:pointer;
}

.th-login-options a,
.th-login-register a{
	color:var(--th-badge-text);
	font-weight:900;
	text-decoration:none;
}

.th-login-options a{
	font-size:.86rem;
}

.th-login-options a:hover,
.th-login-register a:hover{
	opacity:.85;
}

.th-login-submit{
	width:100%;
	min-height:54px;
	margin-top:2px;
	border-radius:17px;
	font-size:.98rem;
}

.th-login-register{
	text-align:center;
	color:var(--th-color-text-soft);
	font-size:.9rem;
	font-weight:700;
}

.th-login-register a{
	margin-left:8px;
}

.th-login-change-form[hidden]{
	display:none;
}

.th-login-change-heading{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.th-login-change-heading span{
	color:var(--th-badge-text);
	font-size:.78rem;
	font-weight:950;
	letter-spacing:0;
	text-transform:uppercase;
}

.th-login-change-heading strong{
	color:var(--th-color-text-main);
	font-size:1.28rem;
	font-weight:950;
	line-height:1.15;
}

.th-login-back-btn{
	width:100%;
	min-height:48px;
	border-radius:16px;
}

.th-login-temp-notice{
	position:relative;
	overflow:hidden;
	display:inline-flex;
	align-items:flex-start;
	align-self:flex-start;
	gap:10px;
	width:auto;
	max-width:430px;
	margin-top:0;
	margin-bottom:2px;
	padding:12px 14px;
	border:1px solid rgba(34,197,94,.22);
	border-radius:16px;
	background:
		linear-gradient(135deg, rgba(34,197,94,.10), rgba(0,212,255,.06)),
		var(--th-card-bg-glass);
	box-shadow:0 12px 28px rgba(15,23,42,.08);
	text-align:left;
}

.th-login-temp-notice::before{
	content:"";
	position:absolute;
	inset:0 auto 0 0;
	width:4px;
	background:var(--th-gradient-line);
}

.th-login-temp-notice[hidden]{
	display:none;
}

.th-login-temp-notice i{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 32px;
	width:32px;
	height:32px;
	border-radius:12px;
	background:var(--th-badge-bg);
	color:var(--th-badge-text);
	font-size:.92rem;
}

.th-login-temp-notice div{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:2px;
	min-width:0;
}

.th-login-temp-notice strong{
	display:block;
	color:var(--th-color-text-main);
	font-size:.86rem;
	font-weight:950;
	line-height:1.18;
	text-align:left;
}

.th-login-temp-notice span{
	display:block;
	color:var(--th-color-text-soft);
	font-size:.76rem;
	font-weight:750;
	line-height:1.35;
	text-align:left;
}

.th-login-role-form[hidden]{
	display:none;
}

.th-login-role-form{
	position:relative;
	overflow:hidden;
	max-height:calc(100svh - 150px);
	padding:28px;
	border:1px solid var(--th-border-glass);
	border-radius:28px;
	background:
		radial-gradient(circle at top left, var(--th-radial-primary), transparent 36%),
		var(--th-card-bg-glass);
	box-shadow:0 24px 70px var(--th-shadow-card);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}

.th-login-role-form::before{
	content:"";
	position:absolute;
	inset:0 auto 0 0;
	width:5px;
	background:var(--th-gradient-line);
	opacity:.9;
}

.th-login-role-form > *{
	position:relative;
	z-index:2;
}

.th-login-role-heading{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.th-login-role-heading span{
	color:var(--th-badge-text);
	font-size:.78rem;
	font-weight:950;
	letter-spacing:0;
	text-transform:uppercase;
}

.th-login-role-heading strong{
	color:var(--th-color-text-main);
	font-size:1.34rem;
	font-weight:950;
	line-height:1.12;
}

.th-login-role-heading p{
	margin:0;
	color:var(--th-color-text-soft);
	font-size:.9rem;
	font-weight:750;
	line-height:1.45;
}

.th-login-role-heading b{
	color:var(--th-color-text-main);
	font-weight:950;
}

.th-login-role-list{
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	gap:12px;
	min-height:0;
	max-height:clamp(230px, 42svh, 390px);
	padding:4px 8px 4px 4px;
	margin:0 -8px 0 -4px;
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-gutter:stable;
}

.th-login-role-list::-webkit-scrollbar{
	width:6px;
}

.th-login-role-list::-webkit-scrollbar-track{
	background:rgba(34,197,94,.08);
	border-radius:999px;
}

.th-login-role-list::-webkit-scrollbar-thumb{
	background:rgba(34,197,94,.38);
	border-radius:999px;
}

.th-login-role-list::-webkit-scrollbar-thumb:hover{
	background:rgba(34,197,94,.56);
}

.th-login-role-option{
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	min-height:82px;
	padding:15px 16px;
	border:1px solid var(--th-border-glass);
	border-radius:18px;
	background:var(--th-card-bg-glass);
	cursor:pointer;
	transition:
		border-color .22s ease,
		background .22s ease,
		box-shadow .22s ease,
		transform .22s ease;
}

.th-login-role-option:hover{
	border-color:var(--th-border-cyan);
	background:var(--th-card-bg-hover);
	transform:translateY(-2px);
	box-shadow:0 16px 34px rgba(15,23,42,.10);
}

.th-login-role-option:has(input:checked){
	border-color:rgba(34,197,94,.78);
	background:
		linear-gradient(135deg, rgba(34,197,94,.12), rgba(0,212,255,.06)),
		var(--th-card-bg-hover);
	box-shadow:
		0 0 0 4px rgba(34,197,94,.12),
		0 18px 40px rgba(15,23,42,.12);
}

.th-login-role-option input{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

.th-login-role-icon,
.th-login-role-check{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
}

.th-login-role-icon{
	width:42px;
	height:42px;
	border-radius:15px;
	background:var(--th-badge-bg);
	color:var(--th-badge-text);
	font-size:1.05rem;
}

.th-login-role-content{
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	gap:4px;
	min-width:0;
}

.th-login-role-content strong{
	color:var(--th-color-text-main);
	font-size:.98rem;
	font-weight:950;
	line-height:1.15;
}

.th-login-role-content span{
	color:var(--th-color-text-soft);
	font-size:.78rem;
	font-weight:750;
	line-height:1.35;
}

.th-login-role-check{
	width:30px;
	height:30px;
	border-radius:999px;
	border:1px solid var(--th-border-glass);
	color:transparent;
	font-size:1rem;
	transition:
		border-color .22s ease,
		background .22s ease,
		color .22s ease,
		transform .22s ease;
}

.th-login-role-option:has(input:checked) .th-login-role-check{
	border-color:#22c55e;
	background:#22c55e;
	color:#ffffff;
	transform:scale(1.05);
}

.th-login-role-option:has(input:checked) .th-login-role-icon{
	background:rgba(34,197,94,.16);
	color:#16a34a;
}

/* =========================================================
	DARK MODE
========================================================= */

html[data-theme="dark"] .th-login-field .th-label{
	color:rgba(255,255,255,.74);
}

html[data-theme="dark"] .th-login-field .th-input{
	background:rgba(255,255,255,.045);
	border-color:rgba(255,255,255,.12);
	color:#ffffff;
}

html[data-theme="dark"] .th-login-field .th-input:hover,
html[data-theme="dark"] .th-login-field .th-input:focus{
	background:rgba(255,255,255,.065);
	color:#ffffff;
}

html[data-theme="dark"] .th-login-field .th-input::placeholder{
	color:rgba(255,255,255,.42);
}

html[data-theme="dark"] .th-login-field .th-input.is-valid,
html[data-theme="dark"] .th-login-field .th-input.is-invalid{
	background:rgba(255,255,255,.045);
	color:#ffffff;
}

html[data-theme="dark"] .th-login-field .th-input.is-valid{
	border-color:rgba(34,197,94,.7);
}

html[data-theme="dark"] .th-login-field .th-input.is-invalid{
	border-color:rgba(239,68,68,.58);
}

html[data-theme="dark"] .th-login-field .th-input.is-valid:hover,
html[data-theme="dark"] .th-login-field .th-input.is-valid:focus,
html[data-theme="dark"] .th-login-field .th-input.is-invalid:hover,
html[data-theme="dark"] .th-login-field .th-input.is-invalid:focus{
	background:rgba(255,255,255,.065);
	color:#ffffff;
}

html[data-theme="dark"] .th-login-field .th-input:-webkit-autofill,
html[data-theme="dark"] .th-login-field .th-input:-webkit-autofill:hover,
html[data-theme="dark"] .th-login-field .th-input:-webkit-autofill:focus,
html[data-theme="dark"] .th-login-field .th-input:-webkit-autofill:active{
	-webkit-text-fill-color:#ffffff !important;
	caret-color:#ffffff;
	box-shadow:0 0 0 1000px #142032 inset !important;
	border-color:rgba(255,255,255,.18);
}

html[data-theme="dark"] .th-login-field .th-input-icon{
	color:rgba(255,255,255,.48);
}

html[data-theme="dark"] .th-login-password-toggle{
	color:rgba(255,255,255,.52);
}

html[data-theme="dark"] .th-login-password-toggle:hover{
	background:rgba(255,255,255,.08);
	color:#84ff38;
}

html[data-theme="dark"] .th-login-options .form-check-input{
	background-color:transparent;
	border-color:rgba(255,255,255,.25);
}

html[data-theme="dark"] .th-login-options .form-check-input:checked{
	background-color:#22c55e;
	border-color:#22c55e;
}

html[data-theme="dark"] .th-login-options .form-check-label{
	color:rgba(255,255,255,.68);
}

html[data-theme="dark"] .th-login-options a,
html[data-theme="dark"] .th-login-register a{
	color:#84ff38;
}

html[data-theme="dark"] .th-login-register{
	color:rgba(255,255,255,.64);
}

html[data-theme="dark"] .th-login-change-heading strong{
	color:#ffffff;
}

html[data-theme="dark"] .th-login-temp-notice{
	background:
		linear-gradient(135deg, rgba(132,255,56,.10), rgba(0,212,255,.07)),
		rgba(255,255,255,.045);
	border-color:rgba(132,255,56,.22);
	box-shadow:0 12px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] .th-login-temp-notice strong{
	color:#ffffff;
}

html[data-theme="dark"] .th-login-temp-notice span{
	color:rgba(255,255,255,.66);
}

html[data-theme="dark"] .th-login-role-heading strong,
html[data-theme="dark"] .th-login-role-heading b,
html[data-theme="dark"] .th-login-role-content strong{
	color:#ffffff;
}

html[data-theme="dark"] .th-login-role-heading p,
html[data-theme="dark"] .th-login-role-content span{
	color:rgba(255,255,255,.66);
}

html[data-theme="dark"] .th-login-role-option{
	background:rgba(255,255,255,.045);
	border-color:rgba(255,255,255,.12);
}

html[data-theme="dark"] .th-login-role-option:hover{
	background:rgba(255,255,255,.065);
	border-color:rgba(132,255,56,.30);
}

html[data-theme="dark"] .th-login-role-option:has(input:checked){
	border-color:rgba(132,255,56,.55);
	background:
		linear-gradient(135deg, rgba(132,255,56,.12), rgba(0,212,255,.07)),
		rgba(255,255,255,.065);
	box-shadow:
		0 0 0 4px rgba(132,255,56,.10),
		0 18px 40px rgba(0,0,0,.22);
}

html[data-theme="dark"] .th-login-role-option:has(input:checked) .th-login-role-icon{
	background:rgba(132,255,56,.14);
	color:#84ff38;
}

@media (max-width:576px){

	.th-login-form{
		max-width:100%;
		gap:16px;
	}

	.th-login-options{
		align-items:flex-start;
		flex-direction:column;
		gap:10px;
	}

	.th-login-submit{
		min-height:52px;
	}

	.th-login-temp-notice{
		gap:10px;
		max-width:100%;
		margin-top:0;
		padding:11px 12px;
	}

	.th-login-temp-notice i{
		flex-basis:30px;
		width:30px;
		height:30px;
	}

	.th-login-role-option{
		align-items:flex-start;
		min-height:auto;
		padding:13px;
	}

	.th-login-role-check{
		margin-top:5px;
	}

}