/* FA Language Switcher — floating control.
   Scoped entirely under .falang / .falang-notice so it cannot leak into the
   theme, and marked .falang-ui so the translator skips its own chrome. */

.falang {
	position: fixed;
	bottom: 18px;
	z-index: 99990;
	font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.falang--bl { left: 18px; }
.falang--br { right: 18px; }

.falang-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #0d3c61;
	border-radius: 999px;
	background: #0a3d62;
	color: #fff;
	font: 600 13px/1 inherit;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(10, 61, 98, .28);
	transition: background .15s, transform .15s;
}

.falang-btn:hover { background: #0d4b78; }
.falang-btn:active { transform: translateY(1px); }
.falang-btn:focus-visible { outline: 3px solid #b08328; outline-offset: 2px; }

.falang-btn svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.falang-menu {
	position: absolute;
	bottom: calc(100% + 10px);
	min-width: 232px;
	max-height: 60vh;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid #d8dee6;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(16, 32, 48, .20);
}

.falang--bl .falang-menu { left: 0; }
.falang--br .falang-menu { right: 0; }

.falang-menu__head {
	margin: 4px 8px 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7785;
}

.falang-item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: #16324f;
}

.falang-item:hover { background: #eef3f8; }
.falang-item:focus-visible { outline: 2px solid #0a3d62; outline-offset: -2px; }
.falang-item strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.falang-item span { display: block; font-size: 11.5px; color: #6b7785; margin-top: 1px; }

.falang-status {
	margin: 6px 8px 2px;
	font-size: 12px;
	color: #6b7785;
}

/* Machine-translation disclosure. Sits above the button, full width on phones,
   because the point is that it is read, not that it is discreet. */
.falang-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99989;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 16px 10px 90px;
	background: #fdf6e6;
	border-top: 1px solid #d9a441;
	color: #6b4d10;
	font: 400 12.5px/1.5 "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.falang-notice__x {
	margin-left: auto;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: #6b4d10;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.falang-notice[hidden] { display: none !important; }

/* With the notice showing, lift the button clear of it. Driven by a body
   class rather than a sibling combinator: .falang is in the DOM before
   .falang-notice, so `.falang-notice ~ .falang` would never match. */
body.falang-noticed .falang { bottom: calc(var(--falang-notice-h, 62px) + 12px); }

/* Arabic. Only the writing direction flips — the control keeps its corner. */
html.falang-rtl body { direction: rtl; }
html.falang-rtl .falang-item { text-align: right; }
html.falang-rtl .falang-notice { padding: 10px 90px 10px 16px; }

@media (max-width: 600px) {
	.falang { bottom: 14px; }
	.falang--bl { left: 12px; }
	.falang--br { right: 12px; }
	.falang-btn { padding: 9px 13px; font-size: 12.5px; }
	.falang-menu { min-width: 208px; max-height: 52vh; }
	.falang-notice { padding: 10px 14px; font-size: 12px; }
	html.falang-rtl .falang-notice { padding: 10px 14px; }
	/* Same calc on small screens; the measured height already accounts for the
	   notice wrapping to two or three lines. */
	body.falang-noticed .falang { bottom: calc(var(--falang-notice-h, 84px) + 12px); }
}

/* The portal's own sticky mobile total bar already owns the bottom edge on
   small screens; float above it rather than fighting it. */
body.fap-mbar-on .falang { bottom: calc(var(--fap-mbar-h, 84px) + 12px); }

/* Both at once: the portal's sticky total bar AND the translation notice. */
body.fap-mbar-on.falang-noticed .falang {
	bottom: calc(var(--fap-mbar-h, 84px) + var(--falang-notice-h, 62px) + 12px);
}

/* Working state. The status line lives inside the menu, which is closed by the
   time translation starts, so the button carries the feedback. A visitor who
   clicks a language and sees nothing for five seconds concludes the thing is
   broken — which is exactly what happened. */
.falang-btn.is-busy { opacity: .85; cursor: progress; }

.falang-btn.is-busy svg {
	animation: falang-spin 1s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes falang-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.falang-btn.is-busy svg { animation: none; }
}