/* Rhino Translator – language switcher (Figma: okID "Button", Neutral / ghost / lg, node 3439:22231). */
.rtls {
	--rtls-text: #1f2329;          /* Neutral / Midnight Slate - 800 */
	--rtls-hover: #f6f7f8;         /* ghost button, State=Hover */
	--rtls-border: #dfe1e5;        /* ghost button, State=Focus stroke */
	--rtls-ring: rgba(24, 27, 31, .12); /* State=Focus: 0 0 0 4px */
	--rtls-menu-bg: #fff;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	color: var(--rtls-text);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0;
}
.rtls *, .rtls *::before, .rtls *::after { box-sizing: border-box; }
.rtls-wrap { display: flex; }

/* The button: flag 24px · label · caret 24px, gap 12px, padding 10px 24px, radius 12px, 48px high. */
.rtls__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 10px 24px;
	min-height: 48px;
	background: transparent;
	color: inherit;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.rtls__current:hover,
.rtls__current:active { background: var(--rtls-hover); color: inherit; }
.rtls__current:focus { outline: none; }
.rtls__current:focus-visible,
.rtls__current[aria-expanded="true"] {
	background: var(--rtls-menu-bg);
	box-shadow: inset 0 0 0 1px var(--rtls-border), 0 0 0 4px var(--rtls-ring);
}
.rtls__current[disabled] { cursor: default; background: transparent; box-shadow: none; }

.rtls__flag,
.rtls__badge {
	flex: none;
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
}
.rtls__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f1f3fa;
	color: #3f509e;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
}
.rtls__caret {
	flex: none;
	width: 24px;
	height: 24px;
	transition: transform .15s ease;
}
.rtls__current[aria-expanded="true"] .rtls__caret { transform: rotate(180deg); }
.rtls__code { font-weight: 600; }
.rtls__name + .rtls__code, .rtls__code + .rtls__name { margin-inline-start: -4px; }

/* The menu: same rows as the button, in a white card. Opens up or down (data-dir). */
.rtls__list {
	position: absolute;
	inset-inline-start: 0;
	z-index: 1000;
	min-width: 100%;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--rtls-menu-bg);
	border: 1px solid var(--rtls-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(24, 27, 31, .12);
}
.rtls[data-dir="down"] .rtls__list { top: calc(100% + 8px); }
.rtls[data-dir="up"] .rtls__list { bottom: calc(100% + 8px); }
.rtls--end .rtls__list { inset-inline-start: auto; inset-inline-end: 0; }
.rtls__list[hidden] { display: none; }
.rtls__list li { margin: 0; padding: 0; list-style: none; }
.rtls__list li::before { display: none; }
.rtls__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	min-height: 44px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.rtls__list a:hover,
.rtls__list a:focus-visible { background: var(--rtls-hover); color: inherit; outline: none; }

/* Floating variant (optional, Settings → Language switcher). */
.rtls--float { position: fixed; bottom: 20px; z-index: 99990; }
.rtls--float .rtls__current { background: var(--rtls-menu-bg); box-shadow: inset 0 0 0 1px var(--rtls-border), 0 8px 24px rgba(24, 27, 31, .12); }
.rtls--br { right: 20px; }
.rtls--bl { left: 20px; }
@media (max-width: 600px) {
	.rtls--float { bottom: 12px; }
	.rtls--br { right: 12px; }
	.rtls--bl { left: 12px; }
}

.rtls .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
@media print { .rtls { display: none; } }