/*
 * Componente unico de autenticacao DM -- toggle mostrar/ocultar password,
 * partilhado por TODOS os formularios de password do site (modal de
 * login, "Ativar o meu acesso", reset password, alterar password). Ver
 * includes/class-password-field.php para a marcacao PHP que gera este
 * HTML e assets/password-toggle.js para o comportamento do clique.
 *
 * O icone vive DENTRO da caixa do input (position:absolute, alinhado a
 * direita, altura = altura do campo) -- ao contrario do login-modal.css
 * antigo (botao fora da caixa), porque este e' agora o layout pedido em
 * todos os formularios de password do site. O padding-right do proprio
 * input reserva o espaco, para o texto escrito nunca ficar por baixo do
 * icone.
 */

.dm-password-wrapper {
	position: relative;
	width: 100%;
	/* Mesmo tecto do proprio input (.dmadv-form input[type="password"] em
	 * dashboard.css, max-width:420px) -- sem isto o wrapper esticava a
	 * largura toda do formulario enquanto o input ficava travado nos 420px,
	 * e o botao de mostrar/ocultar (right:0 do wrapper) acabava longe do
	 * campo em vez de colado a ele. */
	max-width: 420px;
	/* Espaco entre campos consecutivos (Password atual/Nova/Confirmar) e antes
	 * do botao "Alterar password" a seguir -- sem isto ficavam colados. */
	margin-bottom: 10px;
}

/* Especificidade reforcada (classe repetida, mesma tecnica ja usada em
 * login-modal.css para o hover do .dmadv-login-trigger) para ganhar
 * sempre a qualquer regra de formulario existente com a mesma
 * especificidade de base (ex. ".dmadv-form input[type=password]" em
 * dashboard.css), independentemente da ordem de carregamento das folhas
 * de estilo. */
.dm-password-wrapper.dm-password-wrapper input[type="password"],
.dm-password-wrapper.dm-password-wrapper input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding-right: 44px;
}

.dm-password-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #6b6b6b;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Especificidade reforcada (classe repetida) -- o tema Kadence tem uma
 * regra global "button:hover, button:focus, button:active { background:
 * var(--global-palette-btn-bg-hover) }" com especificidade (0,1,1), que
 * SEM isto ganhava ao nosso ".dm-password-toggle { background: none }"
 * de base (0,1,0) e pintava o botao de fundo rosa solido ao tocar/focar. */
.dm-password-toggle.dm-password-toggle:hover,
.dm-password-toggle.dm-password-toggle:focus,
.dm-password-toggle.dm-password-toggle:active,
.dm-password-toggle.dm-password-toggle:focus-visible {
	background: none;
	color: #1e1e1e;
}

.dm-password-toggle-icon-hide {
	display: none;
}

.dm-password-toggle.is-visible .dm-password-toggle-icon-show {
	display: none;
}

.dm-password-toggle.is-visible .dm-password-toggle-icon-hide {
	display: block;
}

/*
 * "Lembrar" + link de recuperacao/problemas de acesso -- checkbox a
 * esquerda, link a direita no desktop (flex + space-between); em mobile
 * quebra para duas linhas sem sobrepor (flex-wrap, sem posicionamento
 * absoluto).
 */
.dm-login-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 10px;
}

.dm-login-remember {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	/* Alvo tactil confortavel sem aumentar o checkbox visualmente. */
	padding: 4px 0;
}

.dm-login-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #ff3c9f;
}

@media (max-width: 480px) {
	.dm-login-options {
		gap: 6px 12px;
	}
}