/* Divi Translate — front-end language switcher */

.dtr-switcher {
	--dtr-bg: #ffffff;
	--dtr-border: #d8dade;
	--dtr-text: #2b2e34;
	--dtr-active-bg: #f2f4f7;
	--dtr-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
}

/*
 * Real flag SVGs (bundled with the plugin) instead of emoji: flag emoji
 * rely on OS/browser font support that is very often missing (most
 * commonly on Windows), silently showing raw text instead of an icon.
 */
.dtr-switcher .dtr-flag {
	display: inline-block;
	width: 18px;
	height: 13px;
	vertical-align: middle;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Flat list style */
.dtr-switcher.dtr-style-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dtr-switcher.dtr-style-list .dtr-item a {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--dtr-radius);
	text-decoration: none;
	color: var(--dtr-text);
	white-space: nowrap;
}

.dtr-switcher.dtr-style-list .dtr-item a:hover,
.dtr-switcher.dtr-style-list .dtr-item.dtr-active a {
	background: var(--dtr-active-bg);
}

/* Dropdown (native <details>/<summary>) style */
.dtr-switcher.dtr-style-dropdown {
	position: relative;
	display: inline-block;
}

.dtr-switcher.dtr-style-dropdown summary {
	cursor: pointer;
	list-style: none;
	background: var(--dtr-bg);
	border: 1px solid var(--dtr-border);
	border-radius: var(--dtr-radius);
	color: var(--dtr-text);
	padding: 6px 30px 6px 12px;
	white-space: nowrap;
	position: relative;
	user-select: none;
}

.dtr-switcher.dtr-style-dropdown summary::-webkit-details-marker {
	display: none;
}

.dtr-switcher.dtr-style-dropdown summary::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}

.dtr-switcher.dtr-style-dropdown ul {
	list-style: none;
	margin: 4px 0 0;
	padding: 4px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	background: var(--dtr-bg);
	border: 1px solid var(--dtr-border);
	border-radius: var(--dtr-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	z-index: 9999;
}

.dtr-switcher.dtr-style-dropdown .dtr-item a {
	display: block;
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--dtr-text);
	white-space: nowrap;
}

.dtr-switcher.dtr-style-dropdown .dtr-item a:hover,
.dtr-switcher.dtr-style-dropdown .dtr-item.dtr-active a {
	background: var(--dtr-active-bg);
}

/* Floating switcher */
.dtr-floating {
	position: fixed;
	z-index: 100000;
}

.dtr-floating.dtr-pos-bottom-right {
	right: 20px;
	bottom: 20px;
}

.dtr-floating.dtr-pos-bottom-left {
	left: 20px;
	bottom: 20px;
}

.dtr-floating.dtr-pos-top-right {
	right: 20px;
	top: 20px;
}

.dtr-floating.dtr-pos-top-left {
	left: 20px;
	top: 20px;
}

.dtr-floating .dtr-floating-inner.dtr-style-dropdown summary {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/*
 * A floating switcher anchored to the bottom (or right) of the viewport
 * must open its panel upward (or leftward) instead of the default
 * top-left growth, otherwise the options render off-screen.
 */
.dtr-floating.dtr-pos-bottom-right .dtr-style-dropdown ul,
.dtr-floating.dtr-pos-top-right .dtr-style-dropdown ul {
	left: auto;
	right: 0;
}

.dtr-floating.dtr-pos-bottom-right .dtr-style-dropdown ul,
.dtr-floating.dtr-pos-bottom-left .dtr-style-dropdown ul {
	top: auto;
	bottom: 100%;
	margin: 0 0 4px;
}