.wpls-switcher ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
}

.wpls-switcher li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
}

.wpls-switcher li::marker {
	content: none;
}

.wpls-switcher a,
.wpls-switcher span {
	display: inline-block !important;
	padding: 2px 8px !important;
	text-decoration: none !important;
	border-radius: 3px !important;
	width: auto !important;
}

.wpls-switcher-current span {
	font-weight: 700;
	border-bottom: 2px solid currentColor;
}

.wpls-flag {
	font-size: 1.2em;
	line-height: 1;
	vertical-align: middle;
}

.wpls-flag-img {
	display: inline-block;
	height: auto;
	border-radius: 2px;
	vertical-align: middle;
}

.wpls-abbr {
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.wpls-switcher-flags a,
.wpls-switcher-flags span,
.wpls-switcher-flags img {
	padding: 2px 4px;
}

/*
 * Hosting themes routinely style menus/lists with aggressive, high-
 * specificity selectors (ID-scoped, multi-level tag combinators like
 * "#top-menu li li a") that structurally match our own <li><details><ul>
 * <li><a> markup by coincidence, since it looks just like a normal nested
 * dropdown submenu. Individually overriding whichever property a given
 * theme happens to touch is a losing game — "all: revert !important"
 * resets every inherited/cascaded property back to the browser default
 * first, so only the properties we explicitly restate below (also
 * !important, so they still win the cascade) apply.
 */
.wpls-switcher-dropdown {
	all: revert !important;
	position: relative !important;
	display: inline-block !important;
	margin: 0 !important;
	line-height: normal !important;
}

.wpls-switcher-dropdown summary {
	all: revert !important;
	cursor: pointer !important;
	list-style: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 2px 8px !important;
	border-radius: 3px !important;
	line-height: normal !important;
	height: auto !important;
	width: auto !important;
}

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

.wpls-switcher-dropdown summary::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
}

.wpls-switcher-dropdown[open] summary::after {
	transform: rotate( 180deg );
}

.wpls-switcher-dropdown ul {
	all: revert !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	min-width: 100% !important;
	width: max-content !important;
	margin: 4px 0 0 !important;
	background: #fff !important;
	border: 1px solid rgba( 0, 0, 0, 0.15 ) !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 ) !important;
	padding: 4px 0 !important;
	z-index: 100 !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	white-space: nowrap !important;
	list-style: none !important;
}

/*
 * <details> without an "open" attribute is natively collapsed by the
 * browser's own UA stylesheet — a rule we can override by accident now
 * that "all: revert !important" above resets the <ul>'s display. Restate
 * the native open/closed behavior explicitly and unconditionally (not
 * just inside the nav-menu context) so a widget/shortcode placement keeps
 * working correctly too.
 */
.wpls-switcher-dropdown > ul {
	display: none !important;
}

.wpls-switcher-dropdown[open] > ul {
	display: flex !important;
}

.wpls-switcher-dropdown ul li {
	all: revert !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	list-style: none !important;
}

.wpls-switcher-dropdown ul a {
	all: revert !important;
	display: block !important;
	padding: 6px 12px !important;
	border-radius: 0 !important;
	width: auto !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.wpls-switcher-dropdown ul a:hover,
.wpls-switcher-dropdown ul a:focus {
	background: rgba( 0, 0, 0, 0.05 );
}

/*
 * When auto-injected into a theme's own nav menu (Settings → WPLS → Menus →
 * "Add switcher to all menus"), it lands as a plain <li> sibling of the real
 * menu items — many themes apply submenu-hiding rules (display:none,
 * position:absolute, visibility:hidden) to any nested <ul> inside a menu
 * item, assuming it's a dropdown. These overrides defeat that for the
 * inline layout specifically, without touching the dropdown layout's own
 * (intentional) open/closed behavior.
 */
.wpls-switcher-menu-item {
	display: inline-flex !important;
	align-items: center !important;
	list-style: none !important;
	position: relative !important;
	top: var( --wpls-switcher-y, 0px ) !important;
	left: var( --wpls-switcher-x, 0px ) !important;
}

/*
 * Matches Divi's own mobile-menu breakpoint (its desktop <ul class="et-menu">
 * is hidden and swapped for a separate mobile nav below this width) — the
 * desktop and mobile position offsets are set as custom properties on the
 * <li> itself (see WPLS_Switcher::append_switcher_to_menu()), since PHP has
 * no way to know the viewport size; only the CSS side can pick between them.
 */
@media ( max-width: 980px ) {
	.wpls-switcher-menu-item {
		top: var( --wpls-switcher-y-mobile, 0px ) !important;
		left: var( --wpls-switcher-x-mobile, 0px ) !important;
	}
}

.wpls-switcher-menu-item .wpls-switcher-inline,
.wpls-switcher-menu-item .wpls-switcher-inline ul {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	pointer-events: auto !important;
	height: auto !important;
	width: auto !important;
	overflow: visible !important;
}

.wpls-switcher-menu-item .wpls-switcher-dropdown {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	align-self: center !important;
	height: auto !important;
	max-height: none !important;
	line-height: normal !important;
}

.wpls-switcher-menu-item .wpls-switcher-dropdown summary {
	line-height: normal !important;
	height: auto !important;
}

/*
 * The dropdown's own inner <ul> is the thing most likely to get caught by a
 * theme's blanket "hide nested lists inside menu items" rule, since that's
 * exactly what it structurally looks like. Explicitly force both states
 * (closed = hidden, [open] = shown) so it isn't left permanently hidden by
 * a theme rule that doesn't know or care about the native <details> state.
 */
.wpls-switcher-menu-item .wpls-switcher-dropdown > ul {
	display: none !important;
}

.wpls-switcher-menu-item .wpls-switcher-dropdown[open] > ul {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	position: absolute !important;
	height: auto !important;
	width: auto !important;
	overflow: visible !important;
}

.wpls-switcher .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}