/* Site-wide EN/JA switcher prototype — pinned bottom-right, styled after the
   redesign-2026 `.marks__btn` pill (glass background, hot-pink outline). */

.lang-switcher {
	display: inline-flex;
	gap: 8px;
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 2000;
}

.lang-switcher__btn {
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid rgba(255, 105, 180, 0.55);
	border-radius: 999px;
	color: #000;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.75);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.lang-switcher__btn:hover,
.lang-switcher__btn:focus {
	border-color: #ff69b4;
	background-color: rgba(255, 105, 180, 0.18);
	color: #ff69b4;
}

.lang-switcher__btn.is-active {
	border-color: #ff69b4;
	background-color: #ff69b4;
	color: #fff;
}

.member-info .lang-ja,
.member-info .lang-en {
	display: block;
}

/* Contact form: labels carry both languages inline. In "both" mode — which is
   the state where the body has neither class — separate them with a slash so
   they don't run together. */
body:not(.lang-en):not(.lang-ja) .fluentform .ff-el-input--label .lang-en::before,
body:not(.lang-en):not(.lang-ja) .fluentform .ff-el-form-check-label .lang-en::before {
	content: ' / ';
	color: #999;
}

/* The privacy checkbox and its help text read as sentences, so those stack
   rather than sitting side by side. */
body:not(.lang-en):not(.lang-ja) .fluentform .ff-el-form-check-label .lang-ja,
body:not(.lang-en):not(.lang-ja) .fluentform .ff-el-input--content .lang-ja,
body:not(.lang-en):not(.lang-ja) .fluentform .ff_t_c .lang-ja {
	display: block;
}

body.lang-en .lang-ja,
body.lang-ja .lang-en {
	display: none;
}