.snml-switcher {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.snml-switcher li {
	list-style: none;
}

.snml-switcher a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.2;
	color: #111827;
	background: #f9fafb;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.snml-switcher a:hover {
	background: #ffffff;
	border-color: #9ca3af;
}

.snml-switcher li.is-active a {
	background: #111827;
	border-color: #111827;
	color: #ffffff;
}

.snml-display-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.snml-display-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 320px;
}

.snml-display-block a {
	width: 100%;
	justify-content: flex-start;
	border-radius: 10px;
}

.snml-display-select {
	display: inline-block;
	min-width: 180px;
}

.snml-display-select select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #ffffff;
	color: #111827;
	font-size: 14px;
}

.snml-flag {
	font-size: 16px;
	line-height: 1;
}

.snml-content-flags .snml-label {
	display: none;
}

.snml-content-text .snml-flag {
	display: none;
}

/* Appearance variables are attached only to the automatic floating switcher. */
.snml-floating-switcher {
 position: fixed;
 top: var(--snml-top, auto);
 bottom: var(--snml-bottom, 20px);
 left: var(--snml-left, auto);
 right: var(--snml-right, 20px);
 z-index: 2147483000;
 max-width: calc(100vw - var(--snml-offset-x, 20px) - 20px);
 max-height: calc(100vh - var(--snml-offset-y, 20px) - 20px);
 max-height: calc(100dvh - var(--snml-offset-y, 20px) - 20px);
 overflow: auto;
 box-sizing: border-box;
 padding: var(--snml-padding, 8px);
 border: var(--snml-border-width, 1px) solid var(--snml-border-color, #d1d5db);
 border-radius: var(--snml-radius, 14px);
 background: var(--snml-panel-background, #ffffff);
 box-shadow: var(--snml-shadow, 0 4px 20px rgba(0, 0, 0, 0.18));
}

.snml-floating-switcher .snml-switcher {
 display: flex;
 flex-direction: var(--snml-direction, row);
 flex-wrap: wrap;
 gap: var(--snml-gap, 6px);
 margin: 0;
 padding: 0;
 max-width: none;
 font-size: var(--snml-text-size, 14px);
}

.snml-floating-switcher .snml-label {
 display: var(--snml-label-display, none);
}

.snml-floating-switcher .snml-flag {
 display: var(--snml-flag-display, inline);
 font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
 font-size: var(--snml-flag-size, 22px);
}

.snml-floating-switcher .snml-switcher a {
 min-width: var(--snml-button-min-width, 44px);
 min-height: var(--snml-button-min-height, 44px);
 justify-content: center;
 box-sizing: border-box;
 padding: var(--snml-button-padding-y, 6px) var(--snml-button-padding-x, 10px);
 border: var(--snml-button-border-width, 1px) solid var(--snml-border-color, #d1d5db);
 border-radius: var(--snml-button-radius, 999px);
 background: var(--snml-button-background, #f9fafb);
 color: var(--snml-text-color, #111827);
}

.snml-floating-switcher .snml-switcher a:hover {
 background: var(--snml-hover-background, #ffffff);
 border-color: var(--snml-border-color, #d1d5db);
}

.snml-floating-switcher .snml-switcher li.is-active a {
 background: var(--snml-active-background, #111827);
 border-color: var(--snml-active-background, #111827);
 color: var(--snml-active-text, #ffffff);
}

.snml-floating-switcher a:focus-visible {
 outline: 2px solid var(--snml-text-color, #111827);
 outline-offset: 3px;
}

/* Drawer progressively enhances the expanded language list when JavaScript loads. */
.snml-floating-switcher.is-drawer {
 overflow: visible;
}
.snml-floating-switcher .snml-switcher-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 cursor: pointer;
 font: inherit;
 font-size: var(--snml-text-size, 14px);
 line-height: 1.2;
 min-width: var(--snml-button-min-width, 44px);
 min-height: var(--snml-button-min-height, 44px);
 padding: var(--snml-button-padding-y, 6px) var(--snml-button-padding-x, 10px);
 border: var(--snml-button-border-width, 1px) solid var(--snml-border-color, #d1d5db);
 border-radius: var(--snml-button-radius, 999px);
 background: var(--snml-button-background, #f9fafb);
 color: var(--snml-text-color, #111827);
 box-sizing: border-box;
}

.snml-floating-switcher .snml-switcher-toggle[hidden] { display: none; }
.snml-floating-switcher .snml-switcher-toggle:hover { background: var(--snml-hover-background, #ffffff); }
.snml-floating-switcher .snml-switcher-toggle:focus-visible {
 outline: 2px solid var(--snml-text-color, #111827);
 outline-offset: 3px;
}
.snml-floating-switcher .snml-switcher-toggle:focus,
.snml-floating-switcher .snml-switcher-toggle:focus-visible,
.snml-floating-switcher .snml-switcher-toggle:active {
 background: var(--snml-button-background, #f9fafb);
 color: var(--snml-text-color, #111827);
 border-color: var(--snml-border-color, #d1d5db);
 box-shadow: none;
}
.snml-floating-switcher .snml-switcher-toggle:hover:focus {
 background: var(--snml-hover-background, #ffffff);
}
.snml-floating-switcher.is-drawer .snml-switcher-panel {
 position: absolute;
 left: var(--snml-drawer-left, auto);
 right: var(--snml-drawer-right, calc(100% + 6px));
 top: var(--snml-drawer-top, auto);
 bottom: var(--snml-drawer-bottom, 0px);
 width: max-content;
 max-width: max(44px, var(--snml-drawer-max-width, calc(100vw - 120px)));
 max-height: calc(100vh - var(--snml-offset-y, 20px) - 40px);
 max-height: calc(100dvh - var(--snml-offset-y, 20px) - 40px);
 overflow: auto;
 box-sizing: border-box;
 padding: var(--snml-padding, 8px);
 border: var(--snml-border-width, 1px) solid var(--snml-border-color, #d1d5db);
 border-radius: var(--snml-radius, 14px);
 background: var(--snml-panel-background, #ffffff);
 box-shadow: var(--snml-shadow, 0 4px 20px rgba(0, 0, 0, 0.18));
 visibility: hidden;
 pointer-events: none;
 opacity: 0;
 transform: var(--snml-drawer-motion, translateX(6px));
 transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.snml-floating-switcher.is-drawer .snml-switcher-panel > .snml-switcher { min-width: 0; }
.snml-floating-switcher.is-drawer.is-open .snml-switcher-panel {
 visibility: visible;
 pointer-events: auto;
 opacity: 1;
 transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
 .snml-floating-switcher .snml-switcher-panel { transition: none; }
}