/**
 * Moyo Auth Modal — Branded Sign In Popup
 *
 * File: masterstudy-child/assets/css/moyo-auth.css
 * Overrides MasterStudy LMS authorization modal with brand styling.
 * All colors via CSS variables from moyo-brand.css.
 * Version: 2.0.0
 */


/* ===================================================
   1. MODAL OVERLAY — darker backdrop
   =================================================== */
.masterstudy-authorization-modal {
	background: var(--moyo-overlay, rgba(0, 0, 0, 0.55)) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}


/* ===================================================
   2. MODAL BOX — refined card
   =================================================== */
.masterstudy-authorization-modal__wrapper {
	width: 420px !important;
	max-width: 94vw !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
	overflow: hidden !important;
}


/* ===================================================
   3. CLOSE BUTTON — aligned with header row
   =================================================== */
.masterstudy-authorization-modal__close {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--moyo-border-light, #f3f4f6) !important;
	transition: background 0.2s ease !important;
	top: 24px !important;
	right: 28px !important;
}
.masterstudy-authorization-modal__close:hover {
	background: var(--moyo-border, #e5e7eb) !important;
}
.masterstudy-authorization-modal__close::after {
	color: var(--moyo-muted, #64748b) !important;
	font-size: 10px !important;
}
.masterstudy-authorization-modal__close:hover::after {
	color: var(--moyo-heading, #1e293b) !important;
}


/* ===================================================
   4. INNER CONTAINER — consistent spacing
   =================================================== */
.masterstudy-authorization-modal__container {
	padding-top: 0 !important;
}

/* ===================================================
   5. WRAPPER — single padding container
   =================================================== */
.masterstudy-authorization__wrapper {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding: 24px 28px 20px !important;
}
.masterstudy-authorization__restore {
	width: 100%;
	flex-direction: column;
	padding: 24px 28px 20px !important;
}

/* Restore form inputs — same sizing as Sign In */
.masterstudy-authorization__restore .masterstudy-authorization__form input.masterstudy-authorization__form-input {
	height: 46px !important;
	padding: 0 14px !important;
	border: 1.5px solid var(--moyo-border, #e5e7eb) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
}
.masterstudy-authorization__restore .masterstudy-authorization__form input.masterstudy-authorization__form-input::placeholder {
	font-size: 13px !important;
}

/* ===================================================
   6. HEADER — "Sign In" / "Restore password" title
   =================================================== */
.masterstudy-authorization__header {
	display: flex !important;
	align-items: center !important;
	width: 100%;
	margin-bottom: 20px !important;
	padding-right: 40px !important;
	gap: 10px !important;
}
.masterstudy-authorization__header-title {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--moyo-heading, #0f172a) !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}

/* Restore Password header — separate class from Sign In header */
.masterstudy-authorization__restore-header {
	display: flex !important;
	align-items: center !important;
	width: 100%;
	margin-bottom: 20px !important;
	padding-right: 40px !important;
	gap: 10px !important;
}

/* Back arrow — aligned with title + close button (all 32px circles) */
.masterstudy-authorization__header-back {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--moyo-border-light, #f3f4f6) !important;
	border: none !important;
	cursor: pointer;
	transition: background 0.2s ease !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.masterstudy-authorization__header-back:hover {
	background: var(--moyo-border, #e5e7eb) !important;
}
.masterstudy-authorization__header-back::after,
.masterstudy-authorization__header-back::before {
	font-size: 12px !important;
	color: var(--moyo-heading, #0f172a) !important;
}

/* Restore header title — same style as Sign In title */
.masterstudy-authorization__restore-header-title {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--moyo-heading, #0f172a) !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}


/* ===================================================
   7. FORM INPUTS — clean, branded
   =================================================== */
.masterstudy-authorization__form-field {
	margin-bottom: 14px !important;
}

/* Restore password form — consistent spacing */
.masterstudy-authorization__restore .masterstudy-authorization__form-field {
	margin-bottom: 16px !important;
}

/* Send Reset Link button — full width, consistent with Sign In */
.masterstudy-authorization__restore .masterstudy-button {
	height: 46px !important;
	width: 100% !important;
	border-radius: 8px !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	background: var(--moyo-primary, #2563eb) !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	border: none !important;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.masterstudy-authorization__restore .masterstudy-button:hover {
	background: var(--moyo-primary-end, #3b82f6) !important;
	box-shadow: 0 4px 14px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.35) !important;
}

.masterstudy-authorization__form input.masterstudy-authorization__form-input {
	height: 46px !important;
	padding: 0 44px 0 14px !important;
	border: 1.5px solid var(--moyo-border, #e5e7eb) !important;
	border-radius: 8px !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	color: var(--moyo-heading, #1e293b) !important;
	background: var(--moyo-card, #ffffff) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.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), 0.1) !important;
	outline: none !important;
}
.masterstudy-authorization__form input.masterstudy-authorization__form-input::placeholder {
	color: var(--moyo-placeholder, #94a3b8) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
}

/* Password toggle eye icon */
.masterstudy-authorization__form-show-pass {
	padding-top: 14px !important;
}
.masterstudy-authorization__form-show-pass::after {
	color: var(--moyo-placeholder, #94a3b8) !important;
	transition: color 0.2s !important;
}
.masterstudy-authorization__form-show-pass:hover::after {
	color: var(--moyo-body, #475569) !important;
}


/* ===================================================
   8. ACTIONS ROW — Remember me + Sign In button
   =================================================== */
.masterstudy-authorization__actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: 4px !important;
}

/* Remember me checkbox text */
.masterstudy-authorization__actions-remember {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	color: var(--moyo-body, #334155) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Checkbox styling */
.masterstudy-authorization__actions-remember .masterstudy-authorization__checkbox-wrapper {
	border-radius: 5px !important;
	border: 2px solid var(--moyo-border, #e5e7eb) !important;
}
.masterstudy-authorization__actions-remember .masterstudy-authorization__checkbox-wrapper.masterstudy-authorization__checkbox-wrapper_checked {
	background: var(--moyo-primary, #2563eb) !important;
	border-color: var(--moyo-primary, #2563eb) !important;
}

/* Sign In button */
.masterstudy-authorization__actions .masterstudy-button {
	height: 46px !important;
	min-width: 110px !important;
	border-radius: 8px !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	background: var(--moyo-primary, #2563eb) !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	border: none !important;
	transition: background var(--moyo-transition, 0.2s ease), transform 0.15s ease, box-shadow var(--moyo-transition, 0.2s ease) !important;
}
.masterstudy-authorization__actions .masterstudy-button:hover {
	background: var(--moyo-primary-end, #2563eb) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.35) !important;
}
.masterstudy-authorization__actions .masterstudy-button:active {
	transform: translateY(0) !important;
}


/* ===================================================
   9. BOTTOM SWITCH BAR — "Lost Password?" only
   =================================================== */
.masterstudy-authorization__switch {
	padding: 12px 28px !important;
	margin-top: 0 !important;
}
.masterstudy-authorization.masterstudy-authorization_style-modal .masterstudy-authorization__switch {
	background: var(--moyo-border-light, #f8f9fc) !important;
	border-top: 1px solid var(--moyo-border, #e5e7eb) !important;
	padding: 12px 28px !important;
}
.masterstudy-authorization__switch-wrapper {
	border: none !important;
	padding: 0 !important;
	justify-content: flex-end !important;
}

/* Lost Password link — centered since Sign Up is hidden */
.masterstudy-authorization__switch-lost-pass {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--moyo-primary, #2563eb) !important;
	text-align: center !important;
	max-width: none !important;
}
.masterstudy-authorization__switch-lost-pass:hover {
	color: var(--moyo-primary-end, #2563eb) !important;
}


/* ===================================================
   10. ERROR MESSAGES
   =================================================== */
.masterstudy-authorization__form-field.masterstudy-authorization__form-field_has-error input.masterstudy-authorization__form-input {
	border-color: var(--moyo-error, #ef4444) !important;
}


/* ===================================================
   11. RESPONSIVE
   =================================================== */
@media (max-width: 640px) {
	.masterstudy-authorization-modal__wrapper {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 8px !important;
	}
	.masterstudy-authorization__wrapper,
	.masterstudy-authorization__restore {
		padding: 24px 20px 18px !important;
	}
}

@media (max-width: 480px) {
	.masterstudy-authorization-modal__wrapper {
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		border-radius: 0 !important;
	}
	.masterstudy-authorization-modal__close {
		top: 20px !important;
		right: 20px !important;
	}
	.masterstudy-authorization__wrapper,
	.masterstudy-authorization__restore {
		padding: 20px 20px 16px !important;
	}
	.masterstudy-authorization__switch,
	.masterstudy-authorization.masterstudy-authorization_style-modal .masterstudy-authorization__switch {
		padding: 12px 20px !important;
	}
}