/*
 * Auth styles — login & register
 * These styles are intentionally scoped to the classes used in
 * `template-login.php` and `template-register.php`.
 */

/* Layout for the auth card */
.auth-card {
	max-width: 980px;
	margin: 3rem auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
	padding: 2rem;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(11,18,30,0.06);
}

@media (max-width: 880px) {
	.auth-card { grid-template-columns: 1fr; padding: 1.25rem; margin: 2rem 1rem; }
}

.auth-content { padding: 0 0.5rem; }

.page-title {
	margin: 0 0 1rem 0;
	font-size: 1.5rem;
	color: #071224;
	line-height: 1.2;
}

.register-form { display: flex; flex-direction: column; gap: 0.9rem; }

.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-field label { font-weight: 600; color: #0f1724; font-size: 0.95rem; }

.form-input-field {
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	border: 1px solid #e6e9ef;
	background: #fff;
	font-size: 1rem;
	color: #0b1220;
	transition: box-shadow 120ms ease, border-color 120ms ease;
}

.form-input-field:focus { outline: none; border-color: #6366f1; box-shadow: 0 6px 18px rgba(99,102,241,0.08); }

.form-button {
	margin-top: 4px;
	padding: 0.9rem 1rem;
	background: #6366f1;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 80ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.form-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(99,102,241,0.12); }
.form-button:active { transform: translateY(0); }
.header-buttons-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.form-small { font-size: 0.95rem; color: #6b7280; margin-top: 0.5rem; }

.auth-illustration img { width: 100%; height: auto; display: block; border-radius: 8px; }
.auth-illustration { padding: 0 0.5rem; }

/* Small helpers */
.form-field input[aria-invalid="true"] { border-color: #ef4444; box-shadow: 0 6px 18px rgba(239,68,68,0.06); }

/* Accessible focus for keyboard users */
*:focus { outline-offset: 3px; }

/* Make sure images don't overflow */
.auth-illustration img { max-width: 100%; height: auto; }

/* A subtle rule in case the theme applies dark backgrounds elsewhere */
.auth-card { background-clip: padding-box; }