/* Transleti Mobile Language & Currency Switcher v1.3.2 */

/* Hidden on desktop */
.transleti-lang-dropdown,
.transleti-currency-dropdown {
	display: none;
}

@media (max-width: 768px) {
	/* Hide WPML flag widget on mobile */
	.widget_icl_lang_sel_widget {
		display: none !important;
	}

	/* ---- Shared button style (inherits top-bar text styling) ---- */
	.transleti-lang-btn,
	.transleti-currency-btn {
		color: inherit;
		cursor: pointer;
		font: inherit;
		display: inline-flex;
		align-items: center;
		gap: 3px;
		white-space: nowrap;
		-webkit-user-select: none;
		user-select: none;
	}

	/* Icons scale with text, nudged up for alignment */
	.transleti-globe-icon,
	.transleti-coin-icon {
		width: 1em;
		height: 1em;
		flex-shrink: 0;
		position: relative;
		top: -1px;
	}

	/* ---- Language dropdown (left) ---- */
	.transleti-lang-dropdown {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		margin-right: 12px;
	}

	/* ---- Currency dropdown (next to language) ---- */
	.transleti-currency-dropdown {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		margin-right: auto; /* pushes Mi cuenta to the right */
	}

	/* ---- Dropdown lists (shared) ---- */
	.transleti-lang-list,
	.transleti-currency-list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 8px;
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		border-radius: 6px;
		max-height: 320px;
		overflow-y: auto;
		z-index: 99999;
		min-width: 200px;
		padding: 4px 0;
	}

	.transleti-lang-list.open,
	.transleti-currency-list.open {
		display: block;
	}

	.transleti-lang-list a,
	.transleti-currency-list a {
		display: flex;
		align-items: center;
		padding: 10px 14px;
		text-decoration: none;
		color: #333;
		font-size: 14px;
		font-weight: 400;
		text-transform: none;
		gap: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.transleti-lang-list a:last-child,
	.transleti-currency-list a:last-child {
		border-bottom: none;
	}

	.transleti-lang-list a:hover,
	.transleti-lang-list a:focus,
	.transleti-currency-list a:hover,
	.transleti-currency-list a:focus {
		background: #f5f5f5;
	}

	.transleti-lang-list a.active,
	.transleti-currency-list a.active {
		font-weight: 700;
		background: #f0f4ff;
	}

	.transleti-lang-list a img {
		width: 22px;
		height: 15px;
		flex-shrink: 0;
	}

	.transleti-currency-symbol {
		opacity: 0.6;
		margin-left: auto;
	}
}