/*!
 * CRA Multilingual — front-end language switcher
 * Two presentations share one stylesheet:
 *   .lr-ls--strip  vertical flag rail pinned to a screen edge (kdmfab style)
 *   .lr-ls--pill   flag + language name button with a dropdown (TranslatePress style)
 * Both are also used by the inline/header switcher (.lr-ls--inline).
 */

.lr-ls,
.lr-ls * { box-sizing: border-box; }

.lr-ls {
	--lr-ls-bg: #16181d;
	--lr-ls-fg: #ffffff;
	--lr-ls-hover: rgba(255, 255, 255, .14);
	--lr-ls-border: rgba(255, 255, 255, .10);
	--lr-ls-accent: #1a56db;
	--lr-ls-radius: 10px;
	--lr-ls-shadow: 0 10px 30px rgba(15, 23, 42, .22);
	--lr-ls-flag-w: 28px;
	--lr-ls-flag-h: 21px;
	--lr-ls-gap: 8px;
	--lr-ls-offset: 140px;
	font-family: inherit;
	line-height: 1.2;
}

.lr-ls.theme-light {
	--lr-ls-bg: #ffffff;
	--lr-ls-fg: #1d2327;
	--lr-ls-hover: #f2f4f8;
	--lr-ls-border: #e4e7ec;
	--lr-ls-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}

.lr-ls.theme-brand {
	--lr-ls-bg: var(--lr-ls-accent);
	--lr-ls-fg: #ffffff;
	--lr-ls-hover: rgba(255, 255, 255, .20);
	--lr-ls-border: rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------------- flags -- */

.lr-ls__flag {
	display: block;
	width: var(--lr-ls-flag-w);
	height: var(--lr-ls-flag-h);
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	flex: 0 0 auto;
}

.shape-square .lr-ls__flag { border-radius: 0; }

.shape-circle .lr-ls__flag {
	width: var(--lr-ls-flag-h);
	height: var(--lr-ls-flag-h);
	border-radius: 50%;
}

/* Text badge used when a language has no flag artwork. */
.lr-ls__flag--code {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	background: rgba(127, 127, 127, .22);
	color: inherit;
	box-shadow: none;
}

/* --------------------------------------------------------------- items --- */

.lr-ls__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--lr-ls-fg);
	font-size: 14px;
	transition: background-color .15s ease;
}

.lr-ls__item:hover,
.lr-ls__item:focus-visible { background: var(--lr-ls-hover); text-decoration: none; color: var(--lr-ls-fg); }

.lr-ls__item.is-current .lr-ls__flag { box-shadow: 0 0 0 2px var(--lr-ls-accent); }
.lr-ls__item.is-current .lr-ls__name { font-weight: 600; }

.lr-ls__name { white-space: nowrap; }

/* --------------------------------------------------------------- panel --- */

.lr-ls__panel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--lr-ls-bg);
	border: 1px solid var(--lr-ls-border);
	border-radius: var(--lr-ls-radius);
	box-shadow: var(--lr-ls-shadow);
	max-height: min(58vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.lr-ls__panel::-webkit-scrollbar { width: 6px; }
.lr-ls__panel::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .45); border-radius: 3px; }
.lr-ls__panel::-webkit-scrollbar-track { background: transparent; }

.lr-ls.is-open > .lr-ls__panel,
.lr-ls[data-trigger="hover"]:hover > .lr-ls__panel,
.lr-ls[data-trigger="hover"]:focus-within > .lr-ls__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Touch devices get click-to-open even when configured for hover. */
.lr-ls.is-touch[data-trigger="hover"]:hover > .lr-ls__panel {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
}

.lr-ls.is-touch.is-open > .lr-ls__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* -------------------------------------------------------------- toggle --- */

.lr-ls__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--lr-ls-border);
	background: var(--lr-ls-bg);
	color: var(--lr-ls-fg);
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	border-radius: var(--lr-ls-radius);
	box-shadow: var(--lr-ls-shadow);
	cursor: pointer;
	transition: transform .2s ease, background-color .15s ease;
}

.lr-ls__toggle:hover { background: color-mix(in srgb, var(--lr-ls-bg) 88%, #808080); }
.lr-ls__toggle:focus-visible { outline: 2px solid var(--lr-ls-accent); outline-offset: 2px; }

.lr-ls__caret {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	opacity: .75;
	transition: transform .2s ease;
}

.lr-ls.is-open .lr-ls__caret,
.lr-ls[data-trigger="hover"]:hover .lr-ls__caret { transform: rotate(180deg); }

/* ------------------------------------------------------------- floating -- */

.lr-ls--float {
	position: fixed;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 0;
	/* The collapsed rail still reserves the height of its hidden panel, so the
	   wrapper itself must not swallow clicks meant for the page behind it. */
	pointer-events: none;
}

.lr-ls--float > * { pointer-events: auto; }

.lr-ls--float .lr-ls__panel {
	position: relative;
	margin-bottom: var(--lr-ls-gap);
}

/* An invisible bridge across the gap keeps hover-opening from flickering when
   the pointer travels from the toggle up into the panel. */
.lr-ls--float .lr-ls__panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: calc(var(--lr-ls-gap) + 2px);
}

.lr-ls--float.pos-br { right: 0; bottom: var(--lr-ls-offset); align-items: flex-end; }
.lr-ls--float.pos-bl { left: 0;  bottom: var(--lr-ls-offset); align-items: flex-start; }
.lr-ls--float.pos-mr { right: 0; top: 50%; transform: translateY(-50%); align-items: flex-end; }
.lr-ls--float.pos-ml { left: 0;  top: 50%; transform: translateY(-50%); align-items: flex-start; }

/* Square off the edge that touches the screen, the way TranslatePress does. */
.lr-ls--float.pos-br > *,
.lr-ls--float.pos-mr > * { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.lr-ls--float.pos-bl > *,
.lr-ls--float.pos-ml > * { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }

/* Edge-peek: collapsed control tucks halfway off-screen until hovered. */
.lr-ls--float.is-peek:not(.is-open) .lr-ls__toggle { transform: translateX(42%); }
.lr-ls--float.is-peek.pos-bl:not(.is-open) .lr-ls__toggle,
.lr-ls--float.is-peek.pos-ml:not(.is-open) .lr-ls__toggle { transform: translateX(-42%); }
.lr-ls--float.is-peek:hover .lr-ls__toggle,
.lr-ls--float.is-peek:focus-within .lr-ls__toggle { transform: translateX(0); }

/* ---------------------------------------------------------- strip style -- */

.lr-ls--strip .lr-ls__panel { gap: 0; padding: 5px; }

.lr-ls--strip .lr-ls__item { padding: 5px 6px; }

/* Names ride alongside as tooltips so the rail stays narrow. */
.lr-ls--strip:not(.has-labels) .lr-ls__name {
	position: absolute;
	top: 50%;
	padding: 5px 9px;
	border-radius: 6px;
	background: #111418;
	color: #fff;
	font-size: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.lr-ls--strip:not(.has-labels).pos-br .lr-ls__name,
.lr-ls--strip:not(.has-labels).pos-mr .lr-ls__name { right: 100%; margin-right: 10px; transform: translateY(-50%) translateX(6px); }
.lr-ls--strip:not(.has-labels).pos-bl .lr-ls__name,
.lr-ls--strip:not(.has-labels).pos-ml .lr-ls__name { left: 100%; margin-left: 10px; transform: translateY(-50%) translateX(-6px); }

.lr-ls--strip:not(.has-labels) .lr-ls__item:hover .lr-ls__name,
.lr-ls--strip:not(.has-labels) .lr-ls__item:focus-visible .lr-ls__name { opacity: 1; transform: translateY(-50%); }

.lr-ls--strip .lr-ls__toggle { padding: 8px 9px; }
.lr-ls--strip .lr-ls__code { font-size: 12px; font-weight: 700; letter-spacing: .4px; }

/* ----------------------------------------------------------- pill style -- */

.lr-ls--pill .lr-ls__panel { min-width: 190px; }
.lr-ls--pill .lr-ls__toggle { padding: 9px 12px; }

/* --------------------------------------------------------------- inline -- */

.lr-ls--inline {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
}

.lr-ls--inline .lr-ls__toggle {
	box-shadow: none;
	background: transparent;
	border-color: transparent;
	color: inherit;
	padding: 6px 8px;
	gap: 7px;
}

.lr-ls--inline .lr-ls__toggle:hover { background: rgba(127, 127, 127, .12); }

.lr-ls--inline .lr-ls__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 180px;
	z-index: 9991;
}

.lr-ls--inline.align-left .lr-ls__panel { right: auto; left: 0; }

.rtl .lr-ls--inline .lr-ls__panel { right: auto; left: 0; }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 782px) {
	.lr-ls--float { --lr-ls-flag-w: 26px; --lr-ls-flag-h: 19px; --lr-ls-offset: 110px; }
	.lr-ls--float .lr-ls__panel { max-height: 50vh; }
	.lr-ls--float.hide-mobile { display: none; }
}

@media print {
	.lr-ls--float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lr-ls__panel,
	.lr-ls__toggle,
	.lr-ls__caret,
	.lr-ls__name { transition: none; }
}