/**
 * Merchonic — Login page styles.
 *
 * Uses the same CSS custom property token system as the wizard/register.
 */

.mc-login-root {
	--mc-primary: #2271b1;
	--mc-primary-hover: #135e96;
	--mc-primary-contrast: #ffffff;
	--mc-surface: #ffffff;
	--mc-surface-muted: #fafafa;
	--mc-border: #dcdcde;
	--mc-border-strong: #c3c4c7;
	--mc-text: #1d2327;
	--mc-text-muted: #646970;
	--mc-error-bg: #fcf0f1;
	--mc-error-border: #f2c2c4;
	--mc-error-text: #8a2424;
	--mc-info-bg: #f0f6fc;
	--mc-info-border: #c9def0;
	--mc-info-text: #1d4268;
	--mc-space-xs: 4px;
	--mc-space-sm: 8px;
	--mc-space-md: 14px;
	--mc-space-lg: 24px;
	--mc-radius-sm: 3px;
	--mc-radius-md: 4px;
	--mc-font-size-sm: 12px;
	--mc-font-size-base: 14px;
	--mc-font-size-xl: 16px;
	--mc-max-width: 440px;

	max-width: var(--mc-max-width);
	margin: 48px auto;
	padding: var(--mc-space-lg);
	color: var(--mc-text);
	font-family: inherit;
}

.mc-login-root h1 {
	margin: 0 0 var(--mc-space-lg);
	font-size: 28px;
	text-align: center;
}

.mc-login-notice {
	padding: var(--mc-space-sm) var(--mc-space-md);
	border-radius: var(--mc-radius-sm);
	margin-bottom: var(--mc-space-md);
	font-size: var(--mc-font-size-base);
}
.mc-login-notice-error {
	background: var(--mc-error-bg);
	border-left: 4px solid var(--mc-error-border);
	color: var(--mc-error-text);
}
.mc-login-notice-info {
	background: var(--mc-info-bg);
	border-left: 4px solid var(--mc-info-border);
	color: var(--mc-info-text);
}

.mc-login-form {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-md);
	padding: var(--mc-space-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mc-login-form .mc-field {
	margin-bottom: var(--mc-space-md);
}

/* .mc-login-form label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--mc-space-xs);
	font-size: var(--mc-font-size-base);
}
.mc-login-form input[type="text"],
.mc-login-form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--mc-border-strong);
	border-radius: var(--mc-radius-sm);
	font-family: inherit;
	font-size: var(--mc-font-size-xl);
	box-sizing: border-box;
}
.mc-login-form input:focus {
	outline: none;
	border-color: var(--mc-primary);
	box-shadow: 0 0 0 1px var(--mc-primary);
} */

.mc-login-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: var(--mc-space-md) 0;
	font-size: var(--mc-font-size-base);
}
.mc-login-remember {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
	margin: 0;
	cursor: pointer;
}
.mc-login-lost {
	color: var(--mc-primary);
	text-decoration: none;
}
.mc-login-lost:hover {
	text-decoration: underline;
}

.mc-login-submit {
	display: block;
	width: 100%;
	padding: 12px;
	font-size: var(--mc-font-size-xl);
	font-weight: 600;
}

.mc-login-register-prompts {
	margin-top: var(--mc-space-lg);
	padding-top: var(--mc-space-md);
	border-top: 1px solid var(--mc-border);
	text-align: center;
	color: var(--mc-text-muted);
	font-size: var(--mc-font-size-base);
}
.mc-login-register-prompts p {
	margin: var(--mc-space-xs) 0;
}
.mc-login-register-prompts a {
	color: var(--mc-primary);
	font-weight: 500;
}

/* Shared mc-btn styles (small footprint — inherits if theme ships them) */
.mc-login-root .mc-btn {
	display: inline-block;
	padding: 8px 16px;
	border: none;
	border-radius: var(--mc-radius-sm);
	font-size: var(--mc-font-size-base);
	cursor: pointer;
	text-decoration: none;
	font-weight: 500;
}
.mc-login-root .mc-btn-primary {
	background: var(--mc-primary);
	color: var(--mc-primary-contrast);
}
.mc-login-root .mc-btn-primary:hover {
	background: var(--mc-primary-hover);
}