/**
 * Libraria - Matrícula e login — botões do topo do computador: "Cadastrar-se" contornado e a conta de quem está logado.
 *
 * = O Que =
 * No topo do computador, o tema desenha o "Entrar" como botão roxo cheio e o "Cadastrar-se" só como texto (Poppins
 * cinza, sem fundo: `headers/header_6.css` tira o fundo de propósito). Aqui o "Cadastrar-se" vira **botão contornado**
 * no mesmo padrão do "Entrar": Open Sans 15 px em negrito, maiúsculas, cantos de 4 px, borda e letra roxas (#6648F0);
 * ao passar o mouse, fica roxo cheio. Com a pessoa logada, o mesmo botão mostra "Minha conta" e fica igual.
 *
 * = Como =
 * Regras com o escopo do tema e o id do cabeçalho (`#header .right_buttons .header-login-button.sign-up a`), mais
 * específicas que as dele (a cor do tema vem de `#header .header_default … a`). O tema tira a borda e o fundo com
 * `!important` (`headers/header_6.css`), então só a borda e o fundo do hover levam `!important` aqui.
 * O cabeçalho do celular não tem esse botão (lá, o "Entrar" e o "Criar conta" estão no topo e no menu de três tracinhos).
 *
 * Logado (desde a 5.5.0): o botão da conta do MasterStudy (`.stm_lms_account_dropdown #dLabel`, que o tema pinta de
 * cinza #EEE em formato de pílula) fica branco, com borda fina lilás, cantos de 4 px e a altura dos outros botões; ao
 * passar o mouse, borda roxa e fundo lilás claro. O `topo-conta.js` troca o ícone pela foto (ou a inicial) e o texto por
 * "Olá, Nome"; sem o JS, só o visual muda. O menu que abre ao clicar não muda.
 *
 * @package Libraria_Matricula_Login
 * @since 5.4.0
 * @since 5.5.0 Botão da conta de quem está logado.
 */

#header .right_buttons .header-login-button.sign-up a {
	display: inline-flex;
	align-items: center;
	/* O tema sobe o "Entrar" 5 px (`margin-top: -5px`): o mesmo aqui, para os dois ficarem alinhados. */
	margin-top: -5px;
	padding: 12px 18px 10px;
	border: 2px solid #6648f0 !important;
	border-radius: 4px;
	color: #6648f0;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 17px;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#header .right_buttons .header-login-button.sign-up a span {
	font-family: inherit;
	letter-spacing: inherit;
}

#header .right_buttons .header-login-button.sign-up a:hover,
#header .right_buttons .header-login-button.sign-up a:focus {
	background-color: #6648f0 !important;
	color: #fff;
}

/* ---------------------------------------------------------------- Conta de quem está logado (5.5.0). */
#header .right_buttons .stm_lms_account_dropdown .dropdown #dLabel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 43px;
	/* O tema põe `min-height: 48px`: 43 px como o "Entrar" e o "Cadastrar-se". */
	min-height: 0;
	margin-top: -5px;
	padding: 0 14px 0 6px;
	border: 1px solid #dcd7f5;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(29, 27, 58, 0.06);
	color: #1d1b3a;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

#header .right_buttons .stm_lms_account_dropdown .dropdown #dLabel:hover,
#header .right_buttons .stm_lms_account_dropdown .dropdown.open #dLabel {
	border-color: #6648f0;
	background: #f6f4ff;
}

#header .right_buttons .stm_lms_account_dropdown #dLabel .login_name {
	color: #1d1b3a;
	font-size: 14px;
	font-weight: 700;
}

#header .right_buttons .stm_lms_account_dropdown #dLabel .caret {
	margin-left: 2px;
	border-top-color: #6648f0;
}

/* Com o JS: a foto (ou a inicial) no lugar do ícone de pessoa. */
#header .right_buttons .stm_lms_account_dropdown #dLabel.lml-conta .masterstudy-dropdown-menu__icon {
	display: none;
}

#header .right_buttons .stm_lms_account_dropdown #dLabel .lml-conta__foto {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: #6648f0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

#header .right_buttons .stm_lms_account_dropdown #dLabel .lml-conta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}