/* ===== Modern auth page — light/dark aware ===== */

.gm-auth {
	--auth-bg: #F7F7F7;
	--auth-panel-bg: #FFFFFF;
	--auth-text: #181818;
	--auth-text-muted: #6b7280;
	--auth-border: #e5e7eb;
	--auth-input-bg: #FFFFFF;
	--auth-shadow: 0 20px 60px rgba(24, 24, 24, 0.10);
	--auth-brand-from: #3C8599;
	--auth-brand-to: #232f33;

	min-height: 100vh;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: var(--auth-bg);
	color: var(--auth-text);
	font-family: var(--gm-font-body);
}

@media (prefers-color-scheme: dark) {
	.gm-auth:not([data-gm-theme]) {
		--auth-bg: #101314;
		--auth-panel-bg: #181c1e;
		--auth-text: #f3f4f4;
		--auth-text-muted: #9aa3a8;
		--auth-border: #2a2f31;
		--auth-input-bg: #1f2426;
		--auth-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	}
}
.gm-auth[data-gm-theme="dark"] {
	--auth-bg: #101314;
	--auth-panel-bg: #181c1e;
	--auth-text: #f3f4f4;
	--auth-text-muted: #9aa3a8;
	--auth-border: #2a2f31;
	--auth-input-bg: #1f2426;
	--auth-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.gm-auth[data-gm-theme="light"] {
	--auth-bg: #F7F7F7;
	--auth-panel-bg: #FFFFFF;
	--auth-text: #181818;
	--auth-text-muted: #6b7280;
	--auth-border: #e5e7eb;
	--auth-input-bg: #FFFFFF;
	--auth-shadow: 0 20px 60px rgba(24, 24, 24, 0.10);
}

.gm-auth__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 48px;
	background: linear-gradient(155deg, var(--auth-brand-from), var(--auth-brand-to));
	color: #fff;
	overflow: hidden;
}
.gm-auth__brand-logo { display: inline-block; background: #fff; padding: 10px 16px; border-radius: 10px; }
.gm-auth__brand-logo img { height: 32px; width: auto; display: block; }
.gm-auth__brand-quote { max-width: 440px; }
.gm-auth__brand-quote blockquote {
	font-family: var(--gm-font-heading);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 20px;
}
.gm-auth__brand-quote cite { font-style: normal; opacity: 0.8; font-size: 0.9rem; }
.gm-auth__brand-decor {
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(214, 251, 0, 0.12);
}

.gm-auth__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: var(--auth-bg);
}
.gm-auth__card {
	width: 100%;
	max-width: 400px;
	background: var(--auth-panel-bg);
	border: 1px solid var(--auth-border);
	border-radius: 16px;
	box-shadow: var(--auth-shadow);
	padding: 40px 36px;
}

.gm-auth__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.gm-auth__mobile-logo { display: none; background: #fff; padding: 8px 14px; border-radius: 10px; }
.gm-auth__mobile-logo img { height: 28px; width: auto; display: block; }

.gm-auth__theme-toggle {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--auth-border);
	background: transparent;
	cursor: pointer;
	color: var(--auth-text);
}
.gm-auth__theme-toggle svg { width: 18px; height: 18px; }
.gm-auth__theme-toggle .gm-icon-sun { display: none; }
.gm-auth[data-gm-theme="dark"] .gm-auth__theme-toggle .gm-icon-moon { display: none; }
.gm-auth[data-gm-theme="dark"] .gm-auth__theme-toggle .gm-icon-sun { display: block; }

.gm-auth__heading { font-size: 1.6rem; margin-bottom: 6px; color: var(--auth-text); }
.gm-auth__subheading { color: var(--auth-text-muted); margin-bottom: 28px; font-size: 0.95rem; }

.gm-auth__tabs { display: flex; gap: 4px; background: var(--auth-input-bg); border: 1px solid var(--auth-border); border-radius: 10px; padding: 4px; margin-bottom: 28px; }
.gm-auth__tab {
	flex: 1;
	text-align: center;
	padding: 9px 0;
	border-radius: 7px;
	font-family: var(--gm-font-heading);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--auth-text-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.gm-auth__tab.is-active { background: var(--gm-primary); color: #fff; }

.gm-auth__form { display: flex; flex-direction: column; gap: 16px; }
.gm-auth__form.is-hidden { display: none; }
.gm-auth__field { display: flex; flex-direction: column; gap: 6px; }
.gm-auth__field label { font-size: 0.85rem; font-weight: 600; color: var(--auth-text); }
.gm-auth__field input {
	font-family: var(--gm-font-body);
	font-size: 0.98rem;
	padding: 12px 14px;
	border-radius: 9px;
	border: 1px solid var(--auth-border);
	background: var(--auth-input-bg);
	color: var(--auth-text);
}
.gm-auth__field input:focus { outline: 2px solid var(--gm-primary); border-color: var(--gm-primary); }

.gm-auth__row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
.gm-auth__row a { color: var(--gm-primary); }
.gm-auth__checkbox { display: flex; align-items: center; gap: 8px; color: var(--auth-text-muted); }

.gm-auth__submit {
	margin-top: 4px;
	padding: 13px 0;
	border-radius: 9px;
	border: none;
	background: var(--gm-primary);
	color: #fff;
	font-family: var(--gm-font-heading);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.gm-auth__submit:hover { background: var(--gm-primary-dark); }

.gm-auth__divider { text-align: center; color: var(--auth-text-muted); font-size: 0.85rem; margin: 24px 0; position: relative; }
.gm-auth__divider::before, .gm-auth__divider::after { content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--auth-border); }
.gm-auth__divider::before { left: 0; }
.gm-auth__divider::after { right: 0; }

.gm-auth__social { display: flex; flex-direction: column; gap: 10px; }
.gm-auth__social .gm-social-btn { border-color: var(--auth-border); background: var(--auth-input-bg); color: var(--auth-text); }
.gm-auth__social .gm-social-btn:hover { background: var(--auth-bg); }

.gm-auth__error {
	background: rgba(216, 50, 50, 0.12);
	border: 1px solid var(--gm-danger);
	color: var(--gm-danger);
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.88rem;
	margin-bottom: 18px;
}
.gm-auth__notice {
	background: rgba(76, 204, 107, 0.12);
	border: 1px solid var(--gm-success);
	color: #1e8e3e;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.88rem;
	margin-bottom: 18px;
}

.gm-auth__back { margin-top: 24px; text-align: center; font-size: 0.85rem; }
.gm-auth__back a { color: var(--auth-text-muted); }

/* Wider card for the Tutor LMS registration form (more fields than our own) */
.gm-auth__card--wide { max-width: 460px; }

/**
 * Restyles Tutor LMS's own [tutor_student_registration_form] output
 * (fields, button, alerts) to match this page's design tokens, without
 * touching Tutor's markup, fields, nonces, or JS — see page-templates/auth.php.
 */
.gm-auth__tutor-form #tutor-registration-wrap {
	max-width: none !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.gm-auth__tutor-form #tutor-registration-form { padding: 0 !important; }
.gm-auth__tutor-form .tutor-form-group { margin-bottom: 16px; }
.gm-auth__tutor-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--auth-text);
	margin-bottom: 6px;
}
.gm-auth__tutor-form .tutor-form-control,
.gm-auth__tutor-form input[type="text"],
.gm-auth__tutor-form input[type="email"],
.gm-auth__tutor-form input[type="password"] {
	width: 100% !important;
	font-family: var(--gm-font-body) !important;
	font-size: 0.98rem !important;
	padding: 12px 14px !important;
	border-radius: 9px !important;
	border: 1px solid var(--auth-border) !important;
	background: var(--auth-input-bg) !important;
	color: var(--auth-text) !important;
}
.gm-auth__tutor-form .tutor-form-control:focus { outline: 2px solid var(--gm-primary); border-color: var(--gm-primary) !important; }
.gm-auth__tutor-form .tutor-btn-primary {
	width: 100% !important;
	padding: 13px 0 !important;
	border-radius: 9px !important;
	border: none !important;
	background: var(--gm-primary) !important;
	color: #fff !important;
	font-family: var(--gm-font-heading) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
}
.gm-auth__tutor-form .tutor-btn-primary:hover { background: var(--gm-primary-dark); }
.gm-auth__tutor-form .tutor-btn-link { color: var(--gm-primary); }
.gm-auth__tutor-form .tutor-small,
.gm-auth__tutor-form .tutor-label { color: var(--auth-text-muted); font-size: 0.85rem; }
.gm-auth__tutor-form a { color: var(--gm-primary); }

@media (max-width: 900px) {
	.gm-auth { grid-template-columns: 1fr; }
	.gm-auth__brand { display: none; }
	.gm-auth__mobile-logo { display: block; }
	.gm-auth__card { border: none; box-shadow: none; padding: 24px 4px; }
	.gm-auth__panel { padding: 24px 20px; }
}