/**
 * Batu LMS — Custom Login Page (/batu-login/). Reuses the shared
 * --batuedu-* tokens from frontend/css/batuedu-frontend.css (loaded first)
 * for spacing/radius/shadow, but intentionally uses its own serif heading
 * font and blue-to-purple gradient button/background to match the
 * requested reference design, rather than the plugin's system-UI font
 * stack and solid primary color used elsewhere. A single fixed-width card
 * (.batuedu-custom-login-panel) holds all four views (login/register/
 * forgot-password/reset-password) — only the view inside it changes, so
 * the card itself is always the same size no matter which is showing.
 */

.batuedu-custom-login-page {
	margin: 0;
	background: #f4f5fb;
}

.batuedu-custom-login {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--batuedu-space-xl) var(--batuedu-space-lg);
	overflow: hidden;
	font-family: var(--batuedu-font-family);
}

/* ==========================================================================
   Decorative background — soft gradient wash + scattered outline shapes,
   inspired by the reference's pastel backdrop. Pure decoration: hidden from
   assistive tech, never intercepts clicks, never affects page height.
   ========================================================================== */

.batuedu-custom-login::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 12% 15%, rgba(37, 99, 235, 0.14), transparent 40%),
		radial-gradient(circle at 88% 20%, rgba(124, 58, 237, 0.14), transparent 42%),
		radial-gradient(circle at 20% 88%, rgba(124, 58, 237, 0.12), transparent 40%),
		radial-gradient(circle at 85% 82%, rgba(37, 99, 235, 0.12), transparent 42%);
}

.batuedu-custom-login-decor {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.batuedu-custom-login-shape {
	position: absolute;
	border: 2px solid rgba(79, 70, 229, 0.16);
	border-radius: 22%;
}

.batuedu-custom-login-shape-1 {
	top: 10%;
	left: 8%;
	width: 90px;
	height: 90px;
	transform: rotate(20deg);
}

.batuedu-custom-login-shape-2 {
	bottom: 12%;
	left: 12%;
	width: 46px;
	height: 46px;
	transform: rotate(-12deg);
	border-color: rgba(37, 99, 235, 0.2);
	background: rgba(37, 99, 235, 0.06);
}

.batuedu-custom-login-shape-3 {
	top: 16%;
	right: 10%;
	width: 64px;
	height: 64px;
	transform: rotate(45deg);
	border-color: rgba(124, 58, 237, 0.18);
}

.batuedu-custom-login-shape-4 {
	bottom: 16%;
	right: 9%;
	width: 110px;
	height: 110px;
	transform: rotate(-8deg);
	border-width: 1.5px;
}

@media (max-width: 860px) {
	.batuedu-custom-login-shape {
		display: none;
	}
}

/* ==========================================================================
   Card
   ========================================================================== */

.batuedu-custom-login-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid rgba(17, 24, 39, 0.06);
	border-radius: 24px;
	box-shadow: 0 24px 60px -20px rgba(30, 27, 75, 0.28), 0 8px 20px -12px rgba(30, 27, 75, 0.12);
	padding: 40px 60px;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.batuedu-custom-login-logo {
	margin-bottom: var(--batuedu-space-xl);
}

.batuedu-custom-login-logo img {
	max-height: 48px;
	max-width: 100%;
}

.batuedu-custom-login-logo-text {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #111827;
}

/* ==========================================================================
   Views — every view is the full width of the card, so the card's own
   width (set once, above) never changes when switching between them.
   ========================================================================== */

.batuedu-custom-login-view {
	width: 100%;
}

.batuedu-custom-login-view[hidden] {
	display: none;
}

.batuedu-custom-login-heading {
	margin: 0 0 6px;
	font-family: var(--batuedu-heading-font-family);
	font-size: 30px;
	font-weight: 700;
	color: #111827;
}

.batuedu-custom-login-subheading {
	margin: 0 0 var(--batuedu-space-xl);
	font-size: 15px;
	color: #6b7280;
}

/* ==========================================================================
   Form fields — form-group / input-wrap / input / button are all
   width: 100% of the same parent (the view), so they line up exactly.
   ========================================================================== */

.batuedu-custom-login-view form {
	width: 100%;
}

.batuedu-custom-login-view .batuedu-form-group {
	width: 100%;
	margin-bottom: var(--batuedu-space-md);
	box-sizing: border-box;
}

.batuedu-custom-login-view label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #111827;
}

.batuedu-custom-login-input-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.batuedu-custom-login-input-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: #9ca3af;
	pointer-events: none;
}

.batuedu-custom-login-input-wrap .batuedu-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px 12px 42px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fafafa;
	font-size: 14px;
	line-height: 20px;
	color: #111827;
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.batuedu-custom-login-input-wrap .batuedu-input:focus {
	outline: none;
	border-color: #4f46e5;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.batuedu-custom-login-input-wrap .batuedu-input::placeholder {
	color: #9ca3af;
}

/* The eye toggle sits inside the input's right edge — pinned to that edge
   regardless of the (always-equal) input width, never overlapping the
   typed text. */
.batuedu-custom-login-input-wrap:has(.batuedu-custom-login-eye-toggle) .batuedu-input {
	padding-right: 44px;
}

.batuedu-custom-login-eye-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 999px;
	color: #9ca3af;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.batuedu-custom-login-eye-toggle svg {
	width: 18px;
	height: 18px;
}

.batuedu-custom-login-eye-toggle:hover {
	background: rgba(79, 70, 229, 0.08);
	color: #4f46e5;
}

/* ==========================================================================
   Remember me / Forgot password row
   ========================================================================== */

.batuedu-custom-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--batuedu-space-lg);
	font-size: 14px;
}

/* Qualified with the element type (label.batuedu-custom-login-checkbox, not
   just .batuedu-custom-login-checkbox) so this beats .batuedu-custom-login-view
   label's `display: block` above — same specificity, later in the
   cascade — instead of silently losing to it and never actually becoming a
   flex row at all (the real cause of the checkbox/text misalignment). */
label.batuedu-custom-login-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #374151;
	cursor: pointer;
	line-height: 16px;
}

/* A native checkbox's own checkmark glyph isn't reliably centered once its
   box is custom-sized (varies by browser/OS) — appearance: none removes
   that native rendering entirely, and the checkmark below is drawn by hand
   at exact coordinates instead, so it's centered on purpose rather than by
   luck. */
.batuedu-custom-login-checkbox input {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	border: 1.5px solid #d1d5db;
	border-radius: 4px;
	background: #ffffff;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.batuedu-custom-login-checkbox input:checked {
	background: #4f46e5;
	border-color: #4f46e5;
}

.batuedu-custom-login-checkbox input:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #ffffff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.batuedu-custom-login-row a,
.batuedu-custom-login-switch-line a {
	color: #4f46e5;
	font-weight: 600;
	text-decoration: none;
}

.batuedu-custom-login-row a:hover,
.batuedu-custom-login-switch-line a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Primary button — same width: 100% of the view as every input above.
   ========================================================================== */

.batuedu-custom-login-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(90deg, #2563eb, #7c3aed);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.55);
	transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.batuedu-custom-login-btn:hover {
	opacity: 0.92;
	box-shadow: 0 14px 28px -10px rgba(79, 70, 229, 0.6);
}

.batuedu-custom-login-btn:active {
	transform: translateY(1px);
}

.batuedu-custom-login-btn:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}

/* ==========================================================================
   Switch line / divider / footnote
   ========================================================================== */

.batuedu-custom-login-switch-line {
	margin: var(--batuedu-space-lg) 0 0;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}

.batuedu-custom-login-divider {
	margin: var(--batuedu-space-xl) 0 var(--batuedu-space-lg);
	border: none;
	border-top: 1px solid #e5e7eb;
}

/* Not flex: this paragraph can contain a plain sentence OR one with inline
   links in it (the "Need any help?" line) — flex would turn the icon, each
   run of text, and each link into separate side-by-side flex items instead
   of one naturally wrapping sentence, breaking the line badly whenever it
   needed to wrap. Floating the icon instead lets everything else flow as
   normal paragraph text, wrapping exactly like any other sentence.
   overflow: hidden keeps the paragraph's own box wrapped around the float. */
.batuedu-custom-login-footnote {
	overflow: hidden;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #9ca3af;
	word-break: break-word;
	overflow-wrap: break-word;
}

.batuedu-custom-login-footnote + .batuedu-custom-login-footnote {
	margin-top: 8px;
}

.batuedu-custom-login-footnote svg {
	float: left;
	width: 16px;
	height: 16px;
	margin: 1px 8px 0 0;
	color: #16a34a;
}

.batuedu-custom-login-footnote a {
	color: #6b7280;
	font-weight: 600;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 480px) {
	.batuedu-custom-login {
		padding: var(--batuedu-space-lg) var(--batuedu-space-md);
	}

	.batuedu-custom-login-panel {
		padding: 32px 24px;
		border-radius: 18px;
	}

	.batuedu-custom-login-heading {
		font-size: 25px;
	}
}