/*
 * Reusable login modal (see includes/class-login-modal.php). Frontend-facing
 * component, so it uses the site's own public accent colour (#ff3c9f — same
 * pink as the WhatsApp/telefone buttons and the favorite control) rather
 * than the dashboard's internal palette.
 *
 * The trigger/"Painel" control lives inline in the theme's own nav menu
 * (injected as a plain <li> — see inject_navbar_item() in PHP). Corner
 * radius (4px) matches every other button on the site (.dmadv-button,
 * .dm2027-ms-phone/-whatsapp) — not a pill, not sharp corners either.
 */

.dmadv-navbar-item {
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.dmadv-login-trigger {
	/* !important on display/gap: Kadence's own `.mobile-navigation a{display:block}`
	(class+element, (0,1,1)) otherwise outranks this single-class selector
	(0,1,0) on the "Painel" state, which renders as an <a> - the "Login"
	state (a <button>) never hit this since that theme rule only targets
	`a`. Same specificity fight as the hover-color rule below, different
	property. */
	display: inline-flex !important;
	align-items: center;
	gap: 6px !important;
	background: transparent;
	color: #ff3c9f;
	border: 1.5px solid #ff3c9f;
	border-radius: 4px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.dmadv-login-trigger-icon {
	flex-shrink: 0;
}

/*
 * Kadence's own nav-menu CSS ships a higher-specificity !important rule
 * for `li.menu-item > a:hover` (4 classes/pseudo-classes + 3 elements —
 * (0,4,3)) that otherwise wins the text colour fight against a plain
 * `a.dmadv-login-trigger:hover` (0,2,1). Rather than coupling this
 * component to Kadence's exact selector chain (`.main-navigation
 * .primary-menu-container > ul > li...`, which is exactly what we want
 * to stay isolated from — a theme update could reshape it any time),
 * the class is deliberately repeated to out-rank ANY single-class
 * third-party hover rule on b-tier specificity alone: (0,5,0) beats
 * (0,4,3) regardless of how many ancestor elements a theme's selector
 * chains through. Bump the repeat count here first if a future theme
 * rule ever climbs to b=5+.
 */
.dmadv-login-trigger.dmadv-login-trigger.dmadv-login-trigger.dmadv-login-trigger:hover,
.dmadv-login-trigger.dmadv-login-trigger.dmadv-login-trigger.dmadv-login-trigger:focus {
	background: #ff3c9f !important;
	color: #fff !important;
}

/* "Painel" (logged-in navbar state) — soft grey, no pill/border; hover reuses the same pink fill + white text as the "Login" trigger above. */
.dmadv-panel-link {
	background: #eeeeee;
	border: none;
	border-radius: 4px;
}

/*
 * Link de logout a seguir ao "Painel" -- pedido explicito para ser SO o
 * icone, sem fundo/borda nem qualquer efeito de hover/foco de botao (ao
 * contrario de .dmadv-login-trigger acima). display:flex so' para centrar
 * o SVG verticalmente com o resto do menu, nada mais.
 */
.dmadv-logout-icon-link {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.dmadv-logout-icon-link .dmadv-logout-icon {
	display: block;
}

/*
 * "Painel" + logout no drawer mobile: no desktop este mesmo <li> ja e' um
 * flex row (.dmadv-navbar-item acima) e o resultado ja fica correto -- o
 * ajuste abaixo e' so' para dentro do drawer do Kadence (`.mobile-navigation`),
 * onde `assets/css/header.min.css` do tema poe TODO `.mobile-navigation a`
 * a `display:block;width:100%` (uma lista vertical, uma linha por link).
 * `.dmadv-login-trigger{display:inline-flex !important}` acima ja vence a
 * parte do `display` (o !important ganha independente de especificidade),
 * mas ninguem tinha ainda anulado o `width:100%` -- e' esse `width` que
 * fazia o fundo cinza do "Painel" esticar a linha toda. Um unico <li>
 * (ver inject_navbar_item() no PHP) resolve o "ficam em linhas separadas";
 * as regras aqui resolvem o "fundo do tamanho errado".
 */
.mobile-navigation ul li.dmadv-navbar-item-account.dmadv-navbar-item-account {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* Ultimo item do menu mobile -- sem linha divisoria por baixo (pedido
	 * explicito; antes tinha uma, replicando o separador que cada <a> ja
	 * trazia individualmente, mas fica deslocado por ser o ultimo item). */
	border-bottom: none;
}

.mobile-navigation .dmadv-navbar-item-account .dmadv-panel-link,
.mobile-navigation .dmadv-navbar-item-account .dmadv-logout-icon-link {
	width: auto;
	flex-shrink: 0;
}

/* Repete a classe do <li> de propósito -- mesmo truque de especificidade já
 * usado acima (ver .dmadv-login-trigger:hover) para garantir que esta regra
 * vence `.mobile-navigation ul li:not(.menu-item-has-children) a` (mesma
 * especificidade "crua", (0,2,3) vs (0,2,3) — sem isto o resultado dependeria
 * da ordem de carregamento dos dois stylesheets, imprevisível). O contorno
 * inferior passa a viver no <li> (uma linha só para os dois elementos juntos),
 * não em cada <a> individualmente (ficariam dois traços curtos lado a lado). */
.mobile-navigation ul li.dmadv-navbar-item-account.dmadv-navbar-item-account > a {
	border-bottom: none;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.dmadv-login-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 20, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Belt-and-suspenders with login-modal.js's closeOpenDrawers(): that JS
	closes Kadence's mobile-menu/search drawers when this modal opens, but
	the z-index here is the guarantee that holds even if that misses a
	timing edge (fast open/close, a future extra trigger) - Kadence's own
	popup drawers top out at #mobile-drawer's 99999 (ID selector beats its
	own .popup-drawer{z-index:100000} class rule) and .select2-container's
	100000, so this stays above both with room to spare. */
	z-index: 100001;
	padding: 16px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.dmadv-login-overlay[hidden] {
	display: none;
}

.dmadv-login-overlay.dmadv-login-open {
	opacity: 1;
}

.dmadv-login-dialog {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 380px;
	border-radius: 12px;
	padding: 32px 28px 28px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	font-family: inherit;
	color: #1e1e1e;
	transform: translateY(10px) scale(0.98);
	transition: transform 0.18s ease;
}

.dmadv-login-overlay.dmadv-login-open .dmadv-login-dialog {
	transform: translateY(0) scale(1);
}

.dmadv-login-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	padding: 6px;
}

.dmadv-login-close:hover {
	color: #1e1e1e;
}

.dmadv-login-view h2 {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.dmadv-login-view[hidden] {
	display: none;
}

.dmadv-login-view form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dmadv-login-view label {
	font-size: 13px;
	font-weight: 600;
	color: #444;
	margin-top: 10px;
}

.dmadv-login-view input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	font-size: 15px;
}

.dmadv-login-view input:focus {
	outline: none;
	border-color: #ff3c9f;
}

/* Toggle mostrar/ocultar password -- agora um componente partilhado por
 * TODOS os formularios de password do site (nao so este modal), ver
 * assets/password-toggle.css (.dm-password-wrapper / .dm-password-toggle).
 * O icone passou a viver DENTRO da caixa do input (era fora antes, de
 * proposito, para nunca colidir com o icone que gestores de password
 * como 1Password/Bitwarden/Chrome injetam na borda direita) -- decisao
 * explicita do layout pedido para todos os formularios de password do
 * site; a colisao visual ocasional com esses icones de terceiros e' uma
 * limitacao conhecida e aceite, nao um esquecimento. */

.dmadv-login-submit {
	margin-top: 18px;
	width: 100%;
	background: #ff3c9f;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.dmadv-login-submit:hover {
	background: #e0308a;
}

.dmadv-login-submit:disabled {
	background: #f5b6d7;
	cursor: default;
}

.dmadv-login-link {
	display: block;
	margin: 16px auto 0;
	background: none;
	border: none;
	color: #ff3c9f;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-align: center;
}

.dmadv-login-message {
	min-height: 18px;
	font-size: 13px;
	margin-top: 8px;
}

.dmadv-login-message.dmadv-login-message-error {
	color: #c0264a;
}

.dmadv-login-message.dmadv-login-message-success {
	color: #157a4a;
}

@media (max-width: 480px) {
	.dmadv-login-dialog {
		padding: 26px 20px 22px;
		border-radius: 10px;
	}

	.dmadv-login-trigger {
		padding: 6px 12px;
		font-size: 13px;
	}
}

/*
 * Abaixo do breakpoint mobile do Kadence (1024px — mesmo ponto em que o
 * tema troca #main-header por #mobile-header, ver header.min.css) o fundo
 * escuro do overlay ficava a fazer de "salto" visual entre o menu mobile
 * branco (ver global.css do dm-core) e o diálogo branco do login. Em fundo
 * sólido branco em vez de rgba(20,16,20,.55), sem blur (nada por trás para
 * desfocar), a transição fica contínua — a sombra do próprio diálogo
 * (.dmadv-login-dialog, acima) continua a dar a noção de profundidade.
 */
@media (max-width: 1024px) {
	.dmadv-login-overlay {
		background: #EDF2F7;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}