/* ──────────────────────────────────────────────
 * Login Page — Split-screen Layout
 * File: assets/css/moyo-login-page.css
 * ────────────────────────────────────────────── */

/* ── Hide breadcrumbs + header shadow ── */
.page-template-default .stm_lms_breadcrumbs { display: none !important; }
.page-template-default .header_default.header_6::after { display: none !important; }

/* ══════════════════════════════════════════════
   LAYOUT — split screen
   ══════════════════════════════════════════════ */
.masterstudy__login-page.moyo-login {
	display: flex !important;
	padding: 0 !important;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	min-height: 70vh;
	background-color: var(--moyo-hero-bg, #0c2340) !important;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) !important;
	background-size: 40px 40px !important;
}

/* ── Left panel ── */
.moyo-login .moyo-login__brand {
	flex: 0 0 45%;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 60px 48px;
	position: relative;
	overflow: hidden;
}

.moyo-login .moyo-login__brand::before {
	content: '';
	position: absolute;
	width: 500px; height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--moyo-primary-rgb, 37,99,235), .12) 0%, transparent 70%);
	top: -100px; right: -150px;
	pointer-events: none;
}

.moyo-login .moyo-login__brand::after {
	content: '';
	position: absolute;
	width: 400px; height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--moyo-primary-rgb, 37,99,235), .08) 0%, transparent 70%);
	bottom: -80px; left: -100px;
	pointer-events: none;
}

.moyo-login .moyo-login__brand-pattern {
	display: none;
}

.moyo-login .moyo-login__tagline {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif) !important;
	font-size: 36px !important;
	color: #fff !important;
	text-align: center; line-height: 1.3;
	max-width: 380px; position: relative; z-index: 1; margin: 0;
}

.moyo-login .moyo-login__tagline em {
	color: var(--moyo-primary, #2563eb) !important;
	font-style: italic;
}

.moyo-login .moyo-login__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px; color: rgba(255,255,255,.5) !important;
	text-align: center; margin-top: 18px; max-width: 340px;
	line-height: 1.65; position: relative; z-index: 1;
}

.moyo-login .moyo-login__stats {
	display: flex; gap: 48px; margin-top: 52px;
	position: relative; z-index: 1;
}

.moyo-login .moyo-login__stat { text-align: center; }

.moyo-login .moyo-login__stat-number {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif) !important;
	font-size: 30px !important; color: #fff !important;
}

.moyo-login .moyo-login__stat-number span {
	color: var(--moyo-primary, #2563eb) !important;
}

.moyo-login .moyo-login__stat-label {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 12px; color: rgba(255,255,255,.45) !important;
	text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px;
}

/* ══════════════════════════════════════════════
   RIGHT PANEL — form
   ══════════════════════════════════════════════ */
.moyo-login .moyo-login__form-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: transparent;
}

/* ── Card ── */
.moyo-login .moyo-login__card {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 16px;
	padding: 48px 40px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.06);
}

/* "Welcome back" */
.moyo-login .moyo-login__card .moyo-login__heading {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif) !important;
	font-size: 30px !important;
	color: var(--moyo-heading, #1e293b) !important;
	font-weight: 400 !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.2 !important;
}

.moyo-login .moyo-login__card .moyo-login__desc {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	color: #64748b !important;
	margin: 0 0 20px 0 !important;
	line-height: 1.5 !important;
}

/* ── Flatten MasterStudy form into card — REMOVE all inner boxes ── */
.moyo-login .moyo-login__card .masterstudy__login-page-form {
	display: flex !important;
	max-width: 100% !important;
	width: 100% !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization,
.moyo-login .moyo-login__card .masterstudy-authorization.masterstudy-authorization_login {
	width: 100% !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: none !important;
}

/* Remove the 60px auto margin MasterStudy adds */
.masterstudy__login-page .masterstudy-authorization {
	margin: 0 !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__wrapper {
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: none !important;
}

/* Hide MasterStudy "Sign In" heading */
.moyo-login .moyo-login__card .masterstudy-authorization__header {
	display: none !important;
}

/* ══════════════════════════════════════════════
   INPUTS — bordered, rounded, with background
   ══════════════════════════════════════════════ */
.moyo-login .moyo-login__card .masterstudy-authorization__form-field {
	margin-bottom: 16px !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__form input.masterstudy-authorization__form-input,
.moyo-login .moyo-login__card input.masterstudy-authorization__form-input {
	background: #f8fafc !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 13px 16px !important;
	font-size: 15px !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	color: var(--moyo-heading, #1e293b) !important;
	height: auto !important;
	box-shadow: none !important;
	outline: none !important;
	width: 100% !important;
	transition: border-color .2s, box-shadow .2s !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__form input.masterstudy-authorization__form-input::placeholder {
	color: #94a3b8 !important;
	font-size: 14px !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__form input.masterstudy-authorization__form-input:focus {
	border-color: var(--moyo-primary, #2563eb) !important;
	box-shadow: 0 0 0 3px rgba(var(--moyo-primary-rgb, 37,99,235), .12) !important;
	background: #fff !important;
	outline: none !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__form input.masterstudy-authorization__form-input:active {
	border: 1.5px solid #e2e8f0 !important;
	background: #f8fafc !important;
	box-shadow: none !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__form input.masterstudy-authorization__form-input_pass {
	padding-right: 50px !important;
}

/* Password toggle */
.moyo-login .moyo-login__card .masterstudy-authorization__form-show-pass {
	color: #64748b !important;
}
.moyo-login .moyo-login__card .masterstudy-authorization__form-show-pass:hover {
	color: var(--moyo-heading, #1e293b) !important;
}

/* ══════════════════════════════════════════════
   ACTIONS — Remember me row + full-width button
   ══════════════════════════════════════════════ */
.moyo-login .moyo-login__card .masterstudy-authorization__actions {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	margin-top: 4px !important;
	margin-bottom: 0 !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__actions-remember {
	margin-right: auto !important;
}

/* Checkbox */
.moyo-login .moyo-login__card .masterstudy-authorization__checkbox-wrapper {
	width: 18px !important; height: 18px !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 5px !important;
	background: #fff !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__checkbox-wrapper.masterstudy-authorization__checkbox-wrapper_checked {
	background: var(--moyo-primary, #2563eb) !important;
	border-color: var(--moyo-primary, #2563eb) !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__checkbox-title {
	font-size: 14px !important;
	color: #475569 !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
}

/* Hide Sign Up button */
.moyo-login .moyo-login__card .masterstudy-authorization__actions .masterstudy-button[data-id="masterstudy-authorization-register-button"] {
	display: none !important;
}

/* Sign In button — full width, pushed to bottom via order */
.moyo-login .moyo-login__card .masterstudy-authorization__actions .masterstudy-button[data-id="masterstudy-authorization-login-button"] {
	display: flex !important;
	order: 10 !important;
	width: 100% !important;
	justify-content: center !important;
	align-items: center !important;
	background: var(--moyo-primary, #2563eb) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 32px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	color: #fff !important;
	cursor: pointer !important;
	letter-spacing: .3px !important;
	text-transform: none !important;
	line-height: normal !important;
	height: auto !important;
	min-width: unset !important;
	margin-top: 16px !important;
	transition: background .2s, box-shadow .2s !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__actions .masterstudy-button[data-id="masterstudy-authorization-login-button"]:hover {
	background: #1d4ed8 !important;
	box-shadow: 0 4px 12px rgba(var(--moyo-primary-rgb, 37,99,235), .3) !important;
	transform: none !important;
}

/* ── Lost Password link ── */
.moyo-login .moyo-login__card .masterstudy-authorization__switch {
	margin-top: 12px !important;
	padding: 0 !important;
	border-top: none !important;
	background: none !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__switch-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	border: none !important;
	padding: 0 !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__switch-lost-pass {
	font-size: 13px !important;
	color: var(--moyo-primary, #2563eb) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__switch-lost-pass:hover {
	color: #1d4ed8 !important;
}

/* Hide sign up links */
.moyo-login .moyo-login__card .masterstudy-authorization__switch-account {
	display: none !important;
}

/* Instructor page link */
.moyo-login .moyo-login__card .masterstudy-authorization__instructor-page {
	display: none !important;
}

/* ── Restore password form ── */
.moyo-login .moyo-login__card .masterstudy-authorization__restore-password,
.moyo-login .moyo-login__card .masterstudy-authorization__restore-pass-email {
	background: none !important;
	padding: 0 !important;
}

.moyo-login .moyo-login__card .masterstudy-authorization__restore.masterstudy-authorization__restore_show {
	display: flex !important;
	padding: 0 !important;
}

/* Hide "Welcome back" heading when restore password is visible */
.moyo-login .moyo-login__card:has(.masterstudy-authorization__restore_show) .moyo-login__heading,
.moyo-login .moyo-login__card:has(.masterstudy-authorization__restore_show) .moyo-login__desc {
	display: none !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 960px) {
	.masterstudy__login-page.moyo-login {
		flex-direction: column !important;
	}
	.moyo-login .moyo-login__brand {
		flex: 0 0 auto;
		padding: 48px 24px 36px;
	}
	.moyo-login .moyo-login__tagline { font-size: 26px !important; }
	.moyo-login .moyo-login__stats { gap: 32px; margin-top: 32px; }
}

@media (max-width: 640px) {
	.moyo-login .moyo-login__brand { padding: 36px 20px 28px; }
	.moyo-login .moyo-login__tagline { font-size: 22px !important; }
	.moyo-login .moyo-login__stat-number { font-size: 24px !important; }
	.moyo-login .moyo-login__card { padding: 32px 24px; border-radius: 12px; }
	.moyo-login .moyo-login__stats { gap: 24px; }
}