/**
 * Libraria - Matrícula e login — janela de entrar/cadastrar: abas, rodapé com botão e sem "puxar para atualizar".
 *
 * = O Que =
 * - Enquanto a janela do MasterStudy está aberta (o `body` ganha `masterstudy-authorization-body-hidden`), o navegador do
 *   celular não atualiza a página ao puxar para baixo. A área que rola da janela não passa o gesto para a página.
 * - Desde a 5.4.0 (formulário com `lml-com-abas`, posto pelo `janela-abas.js`): abas "Criar conta | Entrar" no lugar do
 *   título; "Esqueceu a senha?" abaixo da senha; botão "Entrar" na largura toda; no rodapé, "Criar conta" / "Entrar"
 *   como botão contornado. Botões no padrão do site: cantos de 4 px, roxo #6648F0.
 *
 * Sem o `janela-abas.js` a classe não existe e a janela fica como o MasterStudy desenha.
 *
 * @package Libraria_Matricula_Login
 * @since 5.3.1
 * @since 5.4.0 Abas, "Esqueceu a senha?" e rodapé com botão.
 */

html:has(body.masterstudy-authorization-body-hidden),
body.masterstudy-authorization-body-hidden {
	overscroll-behavior-y: none;
}

.masterstudy-authorization-modal_open,
.masterstudy-authorization-modal_open .masterstudy-authorization-modal__container {
	overscroll-behavior: contain;
}

/* ---------------------------------------------------------------- Abas (5.4.0). */
.lml-com-abas {
	--lml-acento: #6648f0;
}

.lml-com-abas .masterstudy-authorization__header-title {
	display: none;
}

.lml-com-abas .lml-abas {
	display: flex;
	width: 100%;
	margin-bottom: 4px;
	border-bottom: 2px solid #e6e3f5;
}

.lml-com-abas .lml-aba {
	flex: 1;
	margin-bottom: -2px;
	padding: 8px 0 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: #8a88a0;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.lml-com-abas .lml-aba--ativa {
	border-bottom-color: var(--lml-acento);
	color: #1d1b3a;
}

/* Na janela, espaço para o X do MasterStudy à direita (na página de login não há X). */
.masterstudy-authorization-modal .lml-com-abas .lml-abas {
	width: calc(100% - 44px);
}

/* "Esqueceu a senha?" abaixo da senha. */
.lml-com-abas .masterstudy-authorization__form .lml-esqueci,
.lml-com-abas .lml-esqueci {
	display: block;
	align-self: stretch;
	width: 100%;
	/* O MasterStudy limita o "Esqueceu a senha?" a 150 px (no rodapé); aqui ele ocupa a linha para ir à direita. */
	max-width: none;
	margin: -8px 0 14px;
	color: var(--lml-acento);
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	text-decoration: underline;
	cursor: pointer;
}

.lml-com-abas .lml-esqueci.masterstudy-authorization__switch-lost-pass_hide {
	display: none;
}

/* Botão "Entrar" na largura toda, com "Lembrar-se de mim" embaixo. */
.lml-com-abas .masterstudy-authorization__actions {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 14px;
}

.lml-com-abas .masterstudy-authorization__actions .masterstudy-button {
	justify-content: center;
	width: 100%;
	height: 44px;
	border-radius: 4px;
}

/* Rodapé: "Não tem conta?" / "Já tem uma conta?" e o botão contornado ao lado. */
.lml-com-abas .masterstudy-authorization__switch-wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Texto e botão lado a lado: o rodapé fica fixo embaixo da janela (do MasterStudy) e não pode crescer muito. */
.lml-com-abas .masterstudy-authorization__switch-account {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.lml-com-abas .masterstudy-authorization__switch-account-title {
	display: block;
	font-size: 15px;
}

.lml-com-abas .masterstudy-authorization__switch-account-link {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 42px;
	margin: 0;
	padding: 0 20px;
	border: 2px solid var(--lml-acento);
	border-radius: 4px;
	color: var(--lml-acento);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.lml-com-abas.masterstudy-authorization_login #masterstudy-authorization-sign-in,
.lml-com-abas.masterstudy-authorization_register #masterstudy-authorization-sign-up {
	display: none;
}