/* =========================================================
	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:var(--th-color-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:var(--th-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 var(--th-palette-rgb-034-197-094-a-2200);
	border-radius:16px;
	background:
		linear-gradient(135deg, var(--th-palette-rgb-034-197-094-a-1000), var(--th-palette-rgb-000-212-255-a-0600)),
		var(--th-card-bg-glass);
	box-shadow:0 12px 28px var(--th-control-shadow);
	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), var(--th-color-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:var(--th-palette-rgb-034-197-094-a-0800);
	border-radius:999px;
}

.th-login-role-list::-webkit-scrollbar-thumb{
	background:var(--th-palette-rgb-034-197-094-a-3800);
	border-radius:999px;
}

.th-login-role-list::-webkit-scrollbar-thumb:hover{
	background:var(--th-palette-rgb-034-197-094-a-5600);
}

.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 var(--th-palette-rgb-015-023-042-a-1000);
}

.th-login-role-option:has(input:checked){
	border-color:var(--th-palette-rgb-034-197-094-a-7800);
	background:
		linear-gradient(135deg, var(--th-status-success-ring), var(--th-palette-rgb-000-212-255-a-0600)),
		var(--th-card-bg-hover);
	box-shadow:
		0 0 0 4px var(--th-status-success-ring),
		0 18px 40px var(--th-palette-rgb-015-023-042-a-1200);
}

.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:var(--th-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:var(--th-color-success);
	background:var(--th-color-success);
	color:var(--th-color-white);
	transform:scale(1.05);
}

.th-login-role-option:has(input:checked) .th-login-role-icon{
	background:var(--th-palette-rgb-034-197-094-a-1600);
	color:var(--th-color-success-strong);
}

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

html[data-theme="dark"] .th-login-field .th-label{
	color:var(--th-palette-rgb-255-255-255-a-7400);
}

html[data-theme="dark"] .th-login-field .th-input{
	background:var(--th-palette-rgb-255-255-255-a-0450);
	border-color:var(--th-white-border-soft);
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-login-field .th-input:hover,
html[data-theme="dark"] .th-login-field .th-input:focus{
	background:var(--th-palette-rgb-255-255-255-a-0650);
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-login-field .th-input::placeholder{
	color:var(--th-palette-rgb-255-255-255-a-4200);
}

html[data-theme="dark"] .th-login-field .th-input.is-valid,
html[data-theme="dark"] .th-login-field .th-input.is-invalid{
	background:var(--th-palette-rgb-255-255-255-a-0450);
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-login-field .th-input.is-valid{
	border-color:var(--th-palette-rgb-034-197-094-a-7000);
}

html[data-theme="dark"] .th-login-field .th-input.is-invalid{
	border-color:var(--th-palette-rgb-239-068-068-a-5800);
}

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:var(--th-palette-rgb-255-255-255-a-0650);
	color:var(--th-color-white);
}

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:var(--th-color-white) !important;
	caret-color:var(--th-color-white);
	box-shadow:0 0 0 1000px var(--th-palette-rgb-020-032-050) inset !important;
	border-color:var(--th-palette-rgb-255-255-255-a-1800);
}

html[data-theme="dark"] .th-login-field .th-input-icon{
	color:var(--th-config-hero-overlay-end);
}

html[data-theme="dark"] .th-login-password-toggle{
	color:var(--th-palette-rgb-255-255-255-a-5200);
}

html[data-theme="dark"] .th-login-password-toggle:hover{
	background:var(--th-config-dark-inset);
	color:var(--th-palette-rgb-132-255-056);
}

html[data-theme="dark"] .th-login-options .form-check-input{
	background-color:var(--th-color-transparent);
	border-color:var(--th-palette-rgb-255-255-255-a-2500);
}

html[data-theme="dark"] .th-login-options .form-check-input:checked{
	background-color:var(--th-color-success);
	border-color:var(--th-color-success);
}

html[data-theme="dark"] .th-login-options .form-check-label{
	color:var(--th-announcement-text-soft);
}

html[data-theme="dark"] .th-login-options a,
html[data-theme="dark"] .th-login-register a{
	color:var(--th-palette-rgb-132-255-056);
}

html[data-theme="dark"] .th-login-register{
	color:var(--th-palette-rgb-255-255-255-a-6400);
}

html[data-theme="dark"] .th-login-change-heading strong{
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-login-temp-notice{
	background:
		linear-gradient(135deg, var(--th-palette-rgb-132-255-056-a-1000), var(--th-palette-rgb-000-212-255-a-0700)),
		var(--th-palette-rgb-255-255-255-a-0450);
	border-color:var(--th-palette-rgb-132-255-056-a-2200);
	box-shadow:0 12px 28px var(--th-palette-rgb-000-000-000-a-2200);
}

html[data-theme="dark"] .th-login-temp-notice strong{
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-login-temp-notice span{
	color:var(--th-palette-rgb-255-255-255-a-6600);
}

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:var(--th-color-white);
}

html[data-theme="dark"] .th-login-role-heading p,
html[data-theme="dark"] .th-login-role-content span{
	color:var(--th-palette-rgb-255-255-255-a-6600);
}

html[data-theme="dark"] .th-login-role-option{
	background:var(--th-palette-rgb-255-255-255-a-0450);
	border-color:var(--th-white-border-soft);
}

html[data-theme="dark"] .th-login-role-option:hover{
	background:var(--th-palette-rgb-255-255-255-a-0650);
	border-color:var(--th-palette-rgb-132-255-056-a-3000);
}

html[data-theme="dark"] .th-login-role-option:has(input:checked){
	border-color:var(--th-palette-rgb-132-255-056-a-5500);
	background:
		linear-gradient(135deg, var(--th-palette-rgb-132-255-056-a-1200), var(--th-palette-rgb-000-212-255-a-0700)),
		var(--th-palette-rgb-255-255-255-a-0650);
	box-shadow:
		0 0 0 4px var(--th-palette-rgb-132-255-056-a-1000),
		0 18px 40px var(--th-palette-rgb-000-000-000-a-2200);
}

html[data-theme="dark"] .th-login-role-option:has(input:checked) .th-login-role-icon{
	background:var(--th-palette-rgb-132-255-056-a-1400);
	color:var(--th-palette-rgb-132-255-056);
}

@media (max-width:576px){

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

	.th-login-options{
		align-items:center;
		flex-direction:row;
		gap:8px;
	}

	.th-login-options .form-check{
		flex:0 0 auto;
	}

	.th-login-options .form-check-label,
	.th-login-options a{
		font-size:.78rem;
	}

	.th-login-options a{
		min-width:0;
		text-align:right;
	}

	.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;
	}

}