/* GENERATED by tools/build-user-modal-bundle.php - do not edit by hand.
   Edit the source files listed below and re-run the script. */
/* ---- login_signup_modal.css ---- */
/**
 * Login / Signup modal - styles from reference docs/log-sign-up.js
 * Colors: #a855f7, #3b82f6, #38bdf8, #4ade80, #ec4899, #818cf8
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

.login-signup-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	animation: loginSignupFadeIn 0.25s ease;
}
.login-signup-modal-overlay[aria-hidden="false"] {
	display: flex;
}

@keyframes loginSignupFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes loginSignupContentFadeIn {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.login-signup-modal-box {
	width: 400px;
	max-width: 95vw;
	max-height: 90vh;
	overflow-y: auto;
	background: linear-gradient(145deg, rgba(22, 18, 40, 0.95), rgba(18, 20, 36, 0.97));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 22px;
	box-shadow: 0 8px 50px rgba(0, 0, 0, 0.5);
	padding: 32px 28px 28px;
	position: relative;
	animation: loginSignupContentFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'DM Sans', sans-serif;
}

.login-signup-modal-close {
	position: absolute;
	top: 16px;
	right: 18px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.4);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-signup-modal-close:hover {
	color: rgba(255, 255, 255, 0.7);
}

.login-signup-modal-content {
	min-height: 120px;
}

/* Headings and text */
.login-signup-modal-content .lsm-title {
	color: #fff;
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}
.login-signup-modal-content .lsm-subtitle {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	margin: 6px 0 0;
}
.login-signup-modal-content .lsm-head-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, #a855f7, #3b82f6);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	font-size: 24px;
	/* Text glyphs (★ star, ✓ check) on the gradient tile */
	color: #fff;
}
.login-signup-modal-content .lsm-head-icon.signup {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	font-size: 30px;
	background: linear-gradient(135deg, #a855f7, #4ade80);
}
.login-signup-modal-content .lsm-head-icon.forgot {
	background: linear-gradient(135deg, #38bdf8, #3b82f6);
}
.login-signup-modal-content .lsm-head-icon.success {
	background: linear-gradient(135deg, #4ade80, #3b82f6);
}
.login-signup-modal-content .lsm-text-center {
	text-align: center;
	margin-bottom: 24px;
}

/* Inputs - reference style */
.login-signup-modal-content .lsm-input-wrap {
	position: relative;
	margin-bottom: 14px;
}
.login-signup-modal-content .lsm-input,
.login-signup-modal-content .lsm-input-with-icon {
	width: 100%;
	padding: 13px 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	color: #fff;
	font-size: 14px;
	outline: none;
	transition: border 0.25s, box-shadow 0.25s;
	box-sizing: border-box;
	font-family: 'DM Sans', sans-serif;
}
.login-signup-modal-content .lsm-input-with-icon {
	padding-left: 42px;
}
.login-signup-modal-content .lsm-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}
.login-signup-modal-content .lsm-input:focus,
.login-signup-modal-content .lsm-input-with-icon:focus {
	border-color: #a855f7;
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}
/* Autofill: the browser paints its own near-white background and dark text over the
   field, which breaks the dark modal the moment a saved email/password is filled in.
   The huge inset shadow is the only way to repaint that background, and text-fill-color
   the only way to recolour the text - plain background/color are ignored here.
   The long transition delay keeps the browser from flashing its colour back in. */
.login-signup-modal-content .lsm-input:-webkit-autofill,
.login-signup-modal-content .lsm-input:-webkit-autofill:hover,
.login-signup-modal-content .lsm-input:-webkit-autofill:focus,
.login-signup-modal-content .lsm-input:-webkit-autofill:active,
.login-signup-modal-content .lsm-input-with-icon:-webkit-autofill,
.login-signup-modal-content .lsm-input-with-icon:-webkit-autofill:hover,
.login-signup-modal-content .lsm-input-with-icon:-webkit-autofill:focus,
.login-signup-modal-content .lsm-input-with-icon:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #1a1830 inset;
	box-shadow: 0 0 0 1000px #1a1830 inset;
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	-webkit-transition: background-color 9999s ease-in-out 0s;
	transition: background-color 9999s ease-in-out 0s;
}

/* Focus ring has to be re-stated: the autofill rule above owns box-shadow. */
.login-signup-modal-content .lsm-input:-webkit-autofill:focus,
.login-signup-modal-content .lsm-input-with-icon:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #1a1830 inset, 0 0 0 3px rgba(168, 85, 247, 0.2);
	box-shadow: 0 0 0 1000px #1a1830 inset, 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* Firefox uses its own flag rather than -webkit-autofill. */
.login-signup-modal-content .lsm-input:autofill,
.login-signup-modal-content .lsm-input-with-icon:autofill {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.login-signup-modal-content .lsm-input-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	/* Text glyphs (✉ envelope, # etc.) would inherit the dark page color */
	color: #fff;
	opacity: 0.85;
	pointer-events: none;
}

/* Buttons */
.login-signup-modal-content .lsm-btn {
	width: 100%;
	padding: 13px;
	border-radius: 12px;
	border: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s;
	font-family: 'DM Sans', sans-serif;
	margin-bottom: 0;
}
.login-signup-modal-content .lsm-btn-primary {
	background: linear-gradient(135deg, #a855f7, #3b82f6);
	box-shadow: 0 4px 18px rgba(168, 85, 247, 0.35);
}
.login-signup-modal-content .lsm-btn-primary:active {
	transform: scale(0.97);
}
/* Google button: our own face is what the user sees, while the real Google
   Identity Services button sits on top of it invisible but clickable (GIS will
   not open the account chooser from a custom element). */
.login-signup-modal-content .lsm-google-btn-wrap {
	position: relative;
	width: 100%;
	min-height: 54px;
	margin-bottom: 1rem;
}
.login-signup-modal-content .lsm-google-face {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 15px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none; /* the real button underneath takes the click */
	transition: background 0.2s, border-color 0.2s;
}
.login-signup-modal-content .lsm-google-btn-wrap:hover .lsm-google-face {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.26);
}
.login-signup-modal-content .lsm-google-btn-wrap:active .lsm-google-face {
	transform: scale(0.99);
}
.login-signup-modal-content .lsm-google-real {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0; /* still hit-testable, unlike visibility/display */
	overflow: hidden;
	cursor: pointer;
}
/* Stretch whatever GIS renders so the whole face is clickable */
.login-signup-modal-content .lsm-google-real div,
.login-signup-modal-content .lsm-google-real iframe,
.login-signup-modal-content .lsm-google-real [role="button"] {
	width: 100% !important;
	height: 100% !important;
}
.login-signup-modal-content .lsm-google-unavailable {
	width: 100%;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	text-align: center;
}
.login-signup-modal-content .lsm-btn-forgot {
	background: linear-gradient(135deg, #38bdf8, #3b82f6);
	box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35);
}
.login-signup-modal-content .lsm-btn-secondary {
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
}
.login-signup-modal-content .lsm-btn-secondary:hover {
	color: rgba(255, 255, 255, 0.8);
}
.login-signup-modal-content .lsm-btn-success {
	background: linear-gradient(135deg, #4ade80, #3b82f6);
	box-shadow: 0 4px 18px rgba(74, 222, 128, 0.35);
}

/* Links */
.login-signup-modal-content .lsm-link {
	color: #38bdf8;
	font-size: 13px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
}
.login-signup-modal-content .lsm-link:hover {
	text-decoration: underline;
}
.login-signup-modal-content .lsm-link-purple {
	color: #a855f7;
	font-weight: 600;
}

/* OR divider */
.login-signup-modal-content .lsm-divider {
	display: flex;
	align-items: center;
	margin: 18px 0 16px;
	gap: 10px;
}
.login-signup-modal-content .lsm-divider-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18));
}
.login-signup-modal-content .lsm-divider-text {
	color: rgba(255, 255, 255, 0.38);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.8px;
	background: rgba(255, 255, 255, 0.06);
	padding: 5px 14px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Error message */
.login-signup-modal-content .lsm-error {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	margin-bottom: 10px;
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #f87171;
	font-size: 13px;
}
.login-signup-modal-content .lsm-error.hidden {
	display: none;
}

.login-signup-modal-content .lsm-divider.hidden {
	display: none;
}

/* Any element with .hidden inside modal (e.g. password mismatch message) */
.login-signup-modal-content .hidden {
	display: none !important;
}

/* Footer link row */
.login-signup-modal-content .lsm-footer-row {
	text-align: center;
	margin-top: 18px;
}
.login-signup-modal-content .lsm-footer-row span:first-child {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
}

/* Right-align block (e.g. Forgot password link) */
.login-signup-modal-content .lsm-right {
	text-align: right;
	margin-bottom: 16px;
	margin-top: -6px;
}

/* Signup: step bar (reference style) - single line, no wrap */
.login-signup-modal-content .lsm-step-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-bottom: 28px;
	flex-wrap: nowrap;
	min-width: 0;
}
.login-signup-modal-content .lsm-step-bar-item {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.login-signup-modal-content .lsm-step-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}
.login-signup-modal-content .lsm-step-dot-active {
	width: 28px;
	height: 28px;
	font-size: 11px;
	border: 2px solid rgba(255, 255, 255, 0.3);
}
.login-signup-modal-content .lsm-step-connector {
	width: 18px;
	height: 2px;
	border-radius: 2px;
	transition: background 0.4s;
	flex-shrink: 0;
}
.login-signup-modal-content .lsm-signup-step-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 6px;
	text-align: center;
}

/* Signup: password strength */
.login-signup-modal-content .lsm-password-strength {
	margin-bottom: 14px;
}
.login-signup-modal-content .lsm-password-strength.hidden {
	display: none !important;
}
/* Forgot new password: strength label and bar use inline colors; ensure no dark override */
.login-signup-modal-content #lsm-forgot-strength-label {
	color: inherit;
}

/* Signup: OTP digit inputs */
.login-signup-modal-content .lsm-otp-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 18px;
}
.login-signup-modal-content .lsm-otp-digit {
	width: 42px;
	height: 50px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.07);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	color: #fff;
	outline: none;
	transition: border 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}
.login-signup-modal-content .lsm-otp-digit:focus {
	border-color: #a855f7;
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

/* Signup: checkbox (WhatsApp) */
.login-signup-modal-content .lsm-checkbox-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}
.login-signup-modal-content .lsm-checkbox-wrap input {
	width: 22px;
	height: 22px;
	accent-color: #a855f7;
}

/* Signup: select (state, education) */
.login-signup-modal-content .lsm-select {
	appearance: none;
	cursor: pointer;
	color: #fff;
}
.login-signup-modal-content .lsm-select option {
	background: #1a1a2e;
	color: #fff;
}

/* Signup: Google Calendar opt-in card */
.login-signup-modal-content .lsm-calendar-opt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.login-signup-modal-content .lsm-calendar-opt-on {
	border-color: rgba(245, 158, 11, 0.55);
	background: rgba(245, 158, 11, 0.10);
}
.login-signup-modal-content .lsm-calendar-opt input {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: #f59e0b;
}
.login-signup-modal-content .lsm-calendar-opt-icon {
	font-size: 22px;
	line-height: 1.1;
}
.login-signup-modal-content .lsm-calendar-opt-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}
.login-signup-modal-content .lsm-calendar-opt-text strong {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
.login-signup-modal-content .lsm-calendar-opt-text small {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	line-height: 1.5;
}

/* Signup: exam tags */
.login-signup-modal-content .lsm-exam-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-bottom: 10px;
	max-height: 200px;
	overflow-y: auto;
}
.login-signup-modal-content .lsm-exam-tag {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 20px;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
	font-family: 'DM Sans', sans-serif;
}
.login-signup-modal-content .lsm-exam-tag:hover {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.8);
}
.login-signup-modal-content .lsm-exam-tag-selected {
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

/* Signup: email-only CTA button */
.login-signup-modal-content .lsm-btn-signup-email {
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.2));
	border: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}
.login-signup-modal-content .lsm-btn-signup-email:hover {
	opacity: 0.95;
}
.login-signup-modal-content .lsm-btn-finish {
	background: linear-gradient(135deg, #ec4899, #a855f7, #4ade80);
	box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
	font-weight: 700;
}
.login-signup-modal-content .lsm-btn-finish:active {
	transform: scale(0.97);
}

/* ---- password_toggle.css ---- */
/* Global password visibility toggle (see js/password_toggle.js) */

.pwd-toggle-wrap {
	position: relative;
	display: block;
	width: 100%;
}

/* Extra specificity so it beats .form-control / .lsm-input-with-icon padding */
.pwd-toggle-wrap > input.has-pwd-toggle {
	padding-right: 44px;
}

/* Edge/IE draw their own reveal button - avoid two eyes */
input.has-pwd-toggle::-ms-reveal,
input.has-pwd-toggle::-ms-clear {
	display: none;
}

.pwd-toggle-btn {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: inherit;
	opacity: 0.55;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.2s, background 0.2s;
}

.pwd-toggle-btn:hover,
.pwd-toggle-btn:focus {
	opacity: 1;
	background: rgba(128, 128, 128, 0.14);
}

.pwd-toggle-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Dark login/signup modal - the inherited page color is dark there, so force white */
.lsm-input-wrap .pwd-toggle-btn,
.login-signup-modal-content .pwd-toggle-btn {
	color: #fff;
	opacity: 0.7;
}

.lsm-input-wrap .pwd-toggle-btn:hover,
.lsm-input-wrap .pwd-toggle-btn:focus,
.login-signup-modal-content .pwd-toggle-btn:hover,
.login-signup-modal-content .pwd-toggle-btn:focus {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.pwd-toggle-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	pointer-events: none;
}