/**
 * Estilos do seletor de idiomas do plugin Recipe Multilang.
 * Projetado para ser minimalista e compatível com temas populares (Astra, GeneratePress, Kadence).
 */

/* ============================================================
   Contêiner principal
   ============================================================ */
.rml-lang-switcher {
	display: block;
	margin: 1em 0;
}

/* ============================================================
   Lista de idiomas
   ============================================================ */
.rml-lang-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ============================================================
   Item individual de idioma
   ============================================================ */
.rml-lang-item {
	display: inline-flex;
	align-items: center;
}

.rml-lang-item a,
.rml-lang-item span {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.3em 0.65em;
	border-radius: 4px;
	font-size: 0.875em;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid #d0d0d0;
	background-color: #f8f8f8;
	color: #333;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rml-lang-item a:hover {
	background-color: #e8e8e8;
	border-color: #aaa;
	color: #000;
	text-decoration: none;
}

/* ============================================================
   Idioma ativo (selecionado atualmente)
   ============================================================ */
.rml-lang-item.rml-lang-active a,
.rml-lang-item.rml-lang-active span {
	background-color: #2271b1;
	border-color: #2271b1;
	color: #fff;
	font-weight: 600;
	cursor: default;
}

/* ============================================================
   Idioma original (marcado com estrela)
   ============================================================ */
.rml-original-badge {
	font-size: 0.75em;
	color: #f0c040;
	margin-left: 0.15em;
	line-height: 1;
}

.rml-lang-item.rml-lang-active .rml-original-badge {
	color: #ffd700;
}

/* ============================================================
   Idioma indisponível (sem tradução)
   ============================================================ */
.rml-lang-item.rml-lang-unavailable a,
.rml-lang-item.rml-lang-unavailable span {
	background-color: #fafafa;
	border-color: #e0e0e0;
	color: #bbb;
	cursor: not-allowed;
	opacity: 0.7;
}

/* ============================================================
   Emoji de bandeira
   ============================================================ */
.rml-flag {
	font-style: normal;
	line-height: 1;
}

/* ============================================================
   Estilos por modo
   ============================================================ */

/* Apenas bandeiras: padding menor */
.rml-style-flags .rml-lang-item a,
.rml-style-flags .rml-lang-item span {
	padding: 0.3em 0.5em;
	font-size: 1.1em;
}

/* ============================================================
   Responsivo: em telas pequenas, aumentar área de toque
   ============================================================ */
@media (max-width: 600px) {
	.rml-lang-list {
		gap: 0.4em;
	}

	.rml-lang-item a,
	.rml-lang-item span {
		padding: 0.45em 0.7em;
		font-size: 0.9em;
	}
}

/* ============================================================
   Dropdown (<select>)
   ============================================================ */
.rml-style-dropdown {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.rml-dropdown-label {
	font-size: 0.875em;
	color: #555;
	white-space: nowrap;
}

.rml-dropdown-wrap {
	position: relative;
	display: inline-block;
}

.rml-lang-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.35em 2em 0.35em 0.65em;
	font-size: 0.875em;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background-color: #f8f8f8;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	color: #333;
	cursor: pointer;
	min-width: 160px;
	transition: border-color 0.15s ease;
}

.rml-lang-select:hover,
.rml-lang-select:focus {
	border-color: #2271b1;
	outline: none;
}

.rml-lang-select option:disabled {
	color: #aaa;
}

/* ============================================================
   Aviso de tradução em andamento
   ============================================================ */
.rml-translating-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	padding: 0.65em 0.9em;
	border-radius: 5px;
	font-size: 0.875em;
	line-height: 1.5;
	margin-bottom: 0.75em;
}

.rml-notice-pending {
	background-color: #fff8e1;
	border: 1px solid #ffe082;
	color: #795548;
}

.rml-notice-unavailable {
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	color: #666;
}

.rml-notice-icon {
	font-size: 1.1em;
	line-height: 1.5;
	flex-shrink: 0;
}

/* ============================================================
   Badge do idioma detectado (estilo lista)
   ============================================================ */
.rml-detected-badge {
	font-size: 0.7em;
	color: #2271b1;
	margin-left: 0.2em;
	vertical-align: middle;
}

.rml-lang-item.rml-lang-detected > a,
.rml-lang-item.rml-lang-detected > span {
	border-color: #2271b1;
}

/* ============================================================
   Compatibilidade com temas: redefinir herança indesejada
   ============================================================ */
.rml-lang-switcher *,
.rml-lang-switcher *::before,
.rml-lang-switcher *::after {
	box-sizing: border-box;
}

.rml-lang-list li {
	margin: 0;
	padding: 0;
}

.rml-lang-list li::before,
.rml-lang-list li::after {
	display: none;
	content: none;
}