/* ============================================================
   Infineural Client Dashboard — Login CSS
   Dark-glassmorphism style, branded & premium
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
	--infc-accent:       #6366f1;
	--infc-accent-2:     #8b5cf6;
	--infc-teal:         #14b8a6;
	--infc-bg:           #0f1117;
	--infc-surface:      rgba(255,255,255,0.04);
	--infc-border:       rgba(255,255,255,0.08);
	--infc-text:         #f1f5f9;
	--infc-muted:        #94a3b8;
	--infc-radius:       16px;
	--infc-shadow:       0 24px 64px rgba(0,0,0,0.45);
}

/* Scoped to login wrap so it doesn't bleed into the theme */
.infc-login-wrap * {
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.infc-login-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: radial-gradient(ellipse at 60% 0%, #1e1b4b 0%, #0f1117 60%),
	            radial-gradient(ellipse at 10% 100%, #0d2d3d 0%, transparent 60%);
}

.infc-login-card {
	width: 100%;
	max-width: 420px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--infc-radius);
	padding: 40px 36px;
	box-shadow: var(--infc-shadow), inset 0 1px 0 rgba(255,255,255,0.06);
	backdrop-filter: blur(20px);
	animation: infc-fade-up 0.5s ease both;
}

@keyframes infc-fade-up {
	from { opacity:0; transform:translateY(16px); }
	to   { opacity:1; transform:translateY(0); }
}

.infc-login-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 28px;
}

.infc-login-logo-img {
	height: 48px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.infc-login-brand-text {
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--infc-accent), var(--infc-teal));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.infc-login-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--infc-text);
	margin: 0 0 6px;
	text-align: center;
}

.infc-login-subtitle {
	font-size: 14px;
	color: var(--infc-muted);
	text-align: center;
	margin: 0 0 28px;
}

.infc-login-error {
	background: rgba(239,68,68,0.12);
	border: 1px solid rgba(239,68,68,0.3);
	border-radius: 8px;
	color: #f87171;
	font-size: 13px;
	padding: 10px 14px;
	margin-bottom: 18px;
}

.infc-field-group {
	margin-bottom: 18px;
}

.infc-field-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--infc-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.infc-input-wrap {
	position: relative;
}

.infc-input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--infc-muted);
	display: flex;
	align-items: center;
	pointer-events: none;
}

.infc-input-wrap input {
	width: 100%;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px;
	padding: 12px 40px 12px 38px;
	font-size: 14px;
	color: var(--infc-text);
	transition: border-color .2s, box-shadow .2s;
	outline: none;
}

.infc-input-wrap input::placeholder { color: rgba(148,163,184,0.5); }

.infc-input-wrap input:focus {
	border-color: var(--infc-accent);
	box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

.infc-pw-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--infc-muted);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	transition: color .15s;
}

.infc-pw-toggle:hover { color: var(--infc-text); }

.infc-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 12px;
}

.infc-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--infc-muted);
	cursor: pointer;
}

.infc-remember input[type=checkbox] {
	accent-color: var(--infc-accent);
	width: 15px;
	height: 15px;
}

.infc-forgot-link {
	font-size: 13px;
	color: var(--infc-accent);
	text-decoration: none;
	white-space: nowrap;
}

.infc-forgot-link:hover { text-decoration: underline; }

.infc-login-btn {
	width: 100%;
	background: linear-gradient(135deg, var(--infc-accent), var(--infc-accent-2));
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s, transform .1s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	letter-spacing: .01em;
}

.infc-login-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.infc-login-btn:disabled { opacity: .6; cursor: wait; }

.infc-spinner-svg {
	width: 20px;
	height: 20px;
	animation: infc-spin 0.7s linear infinite;
}

@keyframes infc-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (max-width: 480px) {
	.infc-login-card { padding: 28px 22px; }
	.infc-login-title { font-size: 20px; }
}