/* ============================================
   LOGIN PAGE - DFS AB Style
   ============================================ */

/* Page container with centered layout */
.login-page-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - 400px); /* Account for header/footer */
	padding: var(--padding-xlarge) var(--padding-default);
	background: var(--color-background-1);
}

/* Login card - beautiful centered card */
.login-card {
	width: 100%;
	max-width: 450px;
	background: var(--color-white);
	border-radius: var(--border-radius-card); /* 20px */
	box-shadow: var(--box-shadow-hover); /* 0 8px 24px rgba(0,0,0,0.12) */
	padding: var(--padding-xlarge); /* 80px on desktop */
	display: flex;
	flex-direction: column;
	gap: var(--padding-large);
}

/* Login heading */
.login-card h1 {
	font-size: var(--font-size-h2); /* 32px */
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	text-align: center;
	margin: 0 0 var(--padding-default) 0;
	letter-spacing: -0.5px;
}

/* Form styling */
.login-form {
	display: flex;
	flex-direction: column;
	gap: var(--padding-large);
	width: 100%;
}

/* Form group (label + input) */
.login-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--padding-small);
}

/* Labels */
.login-form-group label {
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin: 0;
}

/* Input fields */
.login-form-group input[type="text"],
.login-form-group input[type="password"],
.login-form-group input[type="email"] {
	width: 100%;
	padding: 14px 16px;
	font-size: var(--font-size-default);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: var(--border-radius-button); /* 8px */
	background: var(--color-white);
	color: var(--color-text-primary);
	transition: var(--transition-fast);
	box-sizing: border-box;
}

.login-form-group input:focus {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 3px rgba(0, 119, 190, 0.15);
	outline: none;
}

.login-form-group input::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

/* Login button */
.login-form button[type="submit"] {
	width: 100%;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: var(--font-weight-semibold);
	background: var(--color-secondary);
	color: var(--color-white);
	border: none;
	border-radius: var(--border-radius-button);
	cursor: pointer;
	transition: var(--transition-default);
	margin-top: var(--padding-default);
}

.login-form button[type="submit"]:hover {
	background: #005A92;
	transform: translateY(-2px);
	box-shadow: var(--box-shadow-button);
}

.login-form button[type="submit"]:active {
	transform: translateY(0);
}

/* Error message styling */
.login-error {
	background: #FFEBEE;
	color: #C62828;
	padding: var(--padding-default);
	border-radius: var(--border-radius-default);
	border-left: 4px solid var(--color-error);
	font-size: var(--font-size-default);
	margin-bottom: var(--padding-default);
	box-shadow: 0 2px 8px rgba(211, 47, 47, 0.1);
}

/* Success message (if needed) */
.login-success {
	background: #E8F5E9;
	color: #2E7D32;
	padding: var(--padding-default);
	border-radius: var(--border-radius-default);
	border-left: 4px solid var(--color-success);
	font-size: var(--font-size-default);
	margin-bottom: var(--padding-default);
	box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

/* "Forgot password" link (if added later) */
.login-forgot-password {
	text-align: center;
	margin-top: var(--padding-default);
}

.login-forgot-password a {
	color: var(--color-secondary);
	font-size: var(--font-size-small);
	text-decoration: none;
	transition: var(--transition-fast);
}

.login-forgot-password a:hover {
	color: var(--color-tertiary);
	text-decoration: underline;
}

/* Optional: Register link */
.login-register-link {
	text-align: center;
	margin-top: var(--padding-large);
	padding-top: var(--padding-default);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.login-register-link p {
	font-size: var(--font-size-default);
	color: var(--color-text-secondary);
	margin-bottom: var(--padding-small);
}

.login-register-link a {
	color: var(--color-secondary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition: var(--transition-fast);
}

.login-register-link a:hover {
	color: var(--color-tertiary);
	text-decoration: underline;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
	.login-page-container {
		padding: var(--padding-large) var(--padding-default);
	}

	.login-card {
		padding: var(--padding-large);
		max-width: 100%;
	}

	.login-card h1 {
		font-size: var(--font-size-h3); /* 24px */
	}
}

/* Mobile */
@media (max-width: 480px) {
	.login-page-container {
		padding: var(--padding-default);
		min-height: calc(100vh - 300px);
	}

	.login-card {
		padding: var(--padding-default);
		border-radius: var(--border-radius-default); /* 12px instead of 20px */
	}

	.login-card h1 {
		font-size: var(--font-size-h4); /* 20px */
	}

	.login-form {
		gap: var(--padding-default);
	}

	.login-form-group {
		gap: 8px;
	}

	.login-form-group input[type="text"],
	.login-form-group input[type="password"],
	.login-form-group input[type="email"] {
		padding: 12px 14px;
		font-size: 16px; /* Prevent zoom on iOS */
	}

	.login-form button[type="submit"] {
		padding: 14px 24px;
		font-size: 16px;
	}
}