/**
 * AI Auto Translator — seletor de idiomas no site.
 *
 * O seletor aparece dentro do tema de terceiros, então herda a fonte do tema
 * e evita cores fortes: ele precisa parecer parte do site, não um enxerto do
 * plugin. As únicas cores próprias são um verdigris discreto no foco e no
 * indicador, para dar identidade sem competir com o design do tema.
 */

.aat-switcher-wrapper {
	--aat-sw-ink: #16233d;
	--aat-sw-accent: #2e7166;
	--aat-sw-rule: #d5d0c7;

	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	max-width: 100%;
}

.aat-switcher-label {
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
}

.aat-language-select {
	/* Seta desenhada em CSS: sem imagem externa e acompanha a cor do texto. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
	color: inherit;

	padding: 6px 30px 6px 12px;
	border: 1px solid var(--aat-sw-rule);
	border-radius: 3px;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 15px) calc(50% + 1px),
		calc(100% - 11px) calc(50% + 1px);
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;

	cursor: pointer;
	max-width: 100%;
}

.aat-language-select:hover {
	border-color: #b9b2a6;
}

.aat-language-select:focus-visible {
	outline: 2px solid var(--aat-sw-accent);
	outline-offset: 1px;
	border-color: var(--aat-sw-accent);
}

/* Navegadores sem :focus-visible */
.aat-language-select:focus {
	border-color: var(--aat-sw-accent);
}

/* ---------------------------------------------------------------------------
   Posições da exibição automática
   --------------------------------------------------------------------------- */

/*
 * Flutuante: fica acima do conteúdo, então precisa de sombra para se separar
 * da página. É o único lugar do plugin onde a sombra se justifica.
 */
.aat-floating-switcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--aat-sw-rule, #d5d0c7);
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(22, 35, 61, 0.14);
}

/* Topo da página: uma faixa fina, alinhada à direita. */
.aat-header-switcher {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 8px 20px;
	background: #fbfaf8;
	border-bottom: 1px solid #e2ded6;
}

/* Antes e depois do conteúdo: separado por régua, como uma nota editorial. */
.aat-before-content-switcher,
.aat-after-content-switcher {
	margin: 20px 0;
	padding: 12px 0;
	border-top: 1px solid #e2ded6;
	border-bottom: 1px solid #e2ded6;
}

/* Em telas estreitas o flutuante encolhe para não cobrir o conteúdo. */
@media screen and (max-width: 600px) {
	.aat-floating-switcher {
		right: 12px;
		bottom: 12px;
		padding: 6px 10px;
	}

	.aat-floating-switcher .aat-switcher-label {
		display: none;
	}

	.aat-header-switcher {
		padding: 6px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aat-switcher-wrapper * {
		transition: none !important;
	}
}

/* Modo escuro: só quando o tema declara suporte, para não destoar. */
@media (prefers-color-scheme: dark) {
	.aat-floating-switcher {
		background: #1c2130;
		border-color: #3a4152;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	}

	.aat-floating-switcher .aat-language-select {
		background-color: #262c3d;
		border-color: #3a4152;
		color: #eceef3;
	}
}