/**
 * Login page styles.
 *
 * Scoped to .mca-main--login so they only apply on the login template.
 * Uses existing design tokens from main.css.
 *
 * @package MustafaCyberAcademy
 */

/* ── Layout ─────────────────────────────────────────────────────── */

.mca-login-wrap {
	display: flex;
	justify-content: center;
	padding: var(--mca-space-8) 0 var(--mca-space-16);
}

.mca-login-card {
	width: 100%;
	max-width: 480px;
	background: var(--mca-bg-panel);
	border: 1px solid var(--mca-border);
	border-radius: var(--mca-radius-lg);
	padding: var(--mca-space-8);
	box-shadow: var(--mca-shadow-lg);
}

/* ── Error alert ────────────────────────────────────────────────── */

.mca-login-card .mca-alert {
	margin-bottom: var(--mca-space-6);
}

/* ── Social login (Google) ──────────────────────────────────────── */

.mca-login-social__label {
	font-size: var(--mca-text-sm);
	font-weight: 600;
	color: var(--mca-text-secondary);
	text-align: center;
	margin-bottom: var(--mca-space-4);
}

.mca-login-social__btn {
	display: flex;
	justify-content: center;
}

/* Make Nextend buttons full-width inside our card */
.mca-login-social__btn .nsl-container {
	width: 100%;
}

.mca-login-social__btn .nsl-container-buttons {
	justify-content: center;
}

.mca-login-social__btn .nsl-container-buttons a {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: var(--mca-radius-sm) !important;
	font-family: var(--mca-font) !important;
	font-weight: 600 !important;
	font-size: var(--mca-text-base) !important;
	padding: 0.75rem 1.5rem !important;
	transition: all var(--mca-trans-sm) !important;
}

.mca-login-social__btn .nsl-container-buttons a:hover {
	transform: translateY(-1px);
	box-shadow: var(--mca-shadow) !important;
}

/* Fallback banner when Nextend is unavailable */
.mca-login-social .mca-info-banner {
	margin-bottom: 0;
}

/* ── Divider ────────────────────────────────────────────────────── */

.mca-login-divider {
	display: flex;
	align-items: center;
	gap: var(--mca-space-4);
	margin: var(--mca-space-6) 0;
}

.mca-login-divider::before,
.mca-login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--mca-border);
}

.mca-login-divider span {
	font-size: var(--mca-text-xs);
	font-weight: 500;
	color: var(--mca-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* ── WP Login Form overrides ────────────────────────────────────── */

.mca-login-form #loginform {
	display: flex;
	flex-direction: column;
	gap: var(--mca-space-5);
}

.mca-login-form #loginform p {
	margin: 0;
}

.mca-login-form #loginform label {
	display: flex;
	flex-direction: column;
	gap: var(--mca-space-2);
	font-size: var(--mca-text-sm);
	font-weight: 600;
	color: var(--mca-text-secondary);
}

.mca-login-form #loginform input[type="text"],
.mca-login-form #loginform input[type="password"] {
	width: 100%;
	background: var(--mca-bg-primary);
	border: 1px solid var(--mca-border);
	border-radius: var(--mca-radius-sm);
	color: var(--mca-text-primary);
	font-family: var(--mca-font);
	font-size: var(--mca-text-sm);
	padding: 0.625rem var(--mca-space-4);
	appearance: none;
	transition: border-color var(--mca-trans-sm), box-shadow var(--mca-trans-sm);
}

.mca-login-form #loginform input[type="text"]:focus,
.mca-login-form #loginform input[type="password"]:focus {
	border-color: var(--mca-cyan);
	box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.12);
	outline: none;
}

.mca-login-form #loginform input[type="text"]::placeholder,
.mca-login-form #loginform input[type="password"]::placeholder {
	color: var(--mca-text-muted);
}

/* Remember me checkbox row */
.mca-login-form .login-remember {
	display: flex;
	align-items: center;
}

.mca-login-form .login-remember label {
	flex-direction: row;
	align-items: center;
	gap: var(--mca-space-2);
	font-weight: 400;
	color: var(--mca-text-secondary);
	cursor: pointer;
}

.mca-login-form .login-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--mca-cyan);
	cursor: pointer;
}

/* Submit button */
.mca-login-form #loginform .login-submit {
	margin-top: var(--mca-space-2);
}

.mca-login-form #wp-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-family: var(--mca-font);
	font-size: var(--mca-text-base);
	font-weight: 600;
	color: #000;
	background: var(--mca-cyan);
	border: none;
	border-radius: var(--mca-radius-sm);
	box-shadow: 0 0 20px rgba(0, 200, 255, 0.25);
	cursor: pointer;
	transition: all var(--mca-trans-sm);
}

.mca-login-form #wp-submit:hover {
	background: #33d3ff;
	box-shadow: 0 0 30px rgba(0, 200, 255, 0.35);
	transform: translateY(-1px);
}

.mca-login-form #wp-submit:focus {
	outline: 2px solid var(--mca-cyan);
	outline-offset: 3px;
}

/* ── Footer links ───────────────────────────────────────────────── */

.mca-login-footer {
	margin-top: var(--mca-space-6);
	padding-top: var(--mca-space-6);
	border-top: 1px solid var(--mca-border);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--mca-space-3);
}

.mca-login-footer__link {
	font-size: var(--mca-text-sm);
	color: var(--mca-cyan);
	text-decoration: none;
	transition: color var(--mca-trans-sm);
}

.mca-login-footer__link:hover {
	color: #33d3ff;
	text-decoration: underline;
}

.mca-login-footer__register {
	font-size: var(--mca-text-sm);
	color: var(--mca-text-secondary);
	margin: 0;
}

.mca-login-footer__register a {
	color: var(--mca-cyan);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--mca-trans-sm);
}

.mca-login-footer__register a:hover {
	color: #33d3ff;
	text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 560px) {
	.mca-login-card {
		padding: var(--mca-space-6);
		border-radius: var(--mca-radius);
	}
}