/*
|--------------------------------------------------------------------------
| AMOREA — Pop-up de inicio de sesión
|--------------------------------------------------------------------------
|
| Componente propio (no reutiliza `.amorea-modal` de cart.css) porque
| este pop-up debe funcionar en cualquier página del sitio, no sólo
| donde cart.css se encola — ver template-parts/site/login-modal.php.
|
| Centrado con `top:50%;left:50%;transform:translate(-50%,-50%)` en vez
| de depender de `margin:auto` nativo de <dialog>: reset.css tiene
| `*{margin:0}` sitewide y una regla de autor siempre le gana a la hoja
| nativa del navegador — mismo bug/arreglo ya documentado en cart.css
| para "Vaciar carrito".
|
*/

.amorea-login-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(360px, calc(100vw - var(--space-8)));
	max-height: calc(100vh - var(--space-8));
	overflow-y: auto;
	padding: var(--space-6);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	background: var(--color-surface);
	color: var(--color-text);
}

.amorea-login-modal::backdrop {
	background: rgba(29, 19, 23, 0.45);
}

.amorea-login-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--text-xl);
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}

.amorea-login-modal__close:hover {
	background: var(--color-accent);
	color: var(--color-primary);
}

.amorea-login-modal__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	text-align: center;
}

.amorea-login-modal__heart {
	color: var(--color-primary);
}

.amorea-login-modal__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-text);
}

.amorea-login-modal__tabs {
	display: flex;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-canvas);
}

.amorea-login-modal__tab {
	flex: 1 1 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.amorea-login-modal__tab.is-active {
	background: var(--color-surface);
	color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.amorea-login-modal__intro {
	margin: 0 0 var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: left;
}

.amorea-login-modal__soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) 0 var(--space-2);
	text-align: center;
}

.amorea-login-modal__soon .amorea-login-modal__heart {
	color: var(--color-accent);
}

.amorea-login-modal__soon-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-text);
}

.amorea-login-modal__soon-text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.amorea-login-modal__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.amorea-login-modal__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	text-align: left;
}

.amorea-login-modal__field label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}

.amorea-login-modal__remember {
	display: flex;
	align-items: center;
	text-align: left;
}

.amorea-login-modal__remember label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.amorea-login-modal__status {
	margin: 0;
	min-height: 1.2em;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: left;
}

.amorea-login-modal__status.is-error {
	color: var(--color-error);
}

.amorea-login-modal__submit {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
}

.amorea-login-modal__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.amorea-login-modal__lost {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
	text-align: center;
}

.amorea-login-modal__lost a {
	color: var(--color-primary);
}