/**
 * Booknetic for Theme V4 — Language Switcher
 *
 * Styles the <details>/<summary> markup produced by bft_language_switcher().
 * Three variants: dropdown (default), inline (pill row), sheet (full-width).
 *
 * Dark-first design matching the V4 admin/theme token system.
 * Light-mode overrides provided via @media prefers-color-scheme.
 */

/* ── Design tokens ──────────────────────────────────────────────────── */
.bft-language-switcher {
	--ls-bg:          #18181b;
	--ls-border:      rgba(255, 255, 255, 0.10);
	--ls-radius:      10px;
	--ls-text:        #e4e4e7;
	--ls-muted:       #a1a1aa;
	--ls-hover-bg:    rgba(139, 92, 246, 0.12);
	--ls-active-bg:   rgba(139, 92, 246, 0.22);
	--ls-accent:      #8b5cf6;
	--ls-shadow:      0 8px 28px rgba(0, 0, 0, 0.45);
	--ls-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--ls-speed:       160ms;
}

/* ── Container ──────────────────────────────────────────────────────── */
.bft-language-switcher {
	position: relative;
	display: inline-block;
	font-family: var(--ls-font);
}

/* Remove native <details> arrow */
.bft-language-switcher summary            { list-style: none; }
.bft-language-switcher summary::-webkit-details-marker { display: none; }

/* ── Trigger (summary) ──────────────────────────────────────────────── */
.bft-language-switcher__trigger {
	display:        flex;
	align-items:    center;
	gap:            6px;
	padding:        6px 12px 6px 8px;
	background:     rgba(255, 255, 255, 0.06);
	border:         1px solid var(--ls-border);
	border-radius:  8px;
	cursor:         pointer;
	user-select:    none;
	color:          var(--ls-text);
	font-size:      13px;
	font-weight:    500;
	line-height:    1;
	transition:     background var(--ls-speed), border-color var(--ls-speed);
	white-space:    nowrap;
}
.bft-language-switcher__trigger:hover {
	background:    rgba(255, 255, 255, 0.10);
	border-color:  rgba(255, 255, 255, 0.20);
}
.bft-language-switcher[open] .bft-language-switcher__trigger {
	border-color:  var(--ls-accent);
	background:    rgba(139, 92, 246, 0.12);
}

.bft-language-switcher__flag    { font-size: 16px; line-height: 1; }
.bft-language-switcher__current { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Chevron built from CSS — no extra markup */
.bft-language-switcher__trigger::after {
	content:     "";
	display:     inline-block;
	width:       5px;
	height:      5px;
	border-right:  1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform:   rotate(45deg) translateY(-2px);
	opacity:     0.55;
	margin-left: 3px;
	transition:  transform var(--ls-speed);
}
.bft-language-switcher[open] .bft-language-switcher__trigger::after {
	transform: rotate(225deg) translateY(-2px);
}

/* ── Dropdown menu ──────────────────────────────────────────────────── */
.bft-language-switcher__menu {
	position:     absolute;
	top:          calc(100% + 6px);
	right:        0;
	min-width:    140px;
	background:   var(--ls-bg);
	border:       1px solid var(--ls-border);
	border-radius: var(--ls-radius);
	box-shadow:   var(--ls-shadow);
	overflow:     hidden;
	z-index:      9999;
	animation:    bft-ls-open var(--ls-speed) ease;
}

@keyframes bft-ls-open {
	from { opacity: 0; transform: translateY(-6px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Language option rows ───────────────────────────────────────────── */
.bft-lang-option {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         9px 14px;
	color:           var(--ls-text);
	text-decoration: none;
	font-size:       13px;
	font-weight:     500;
	transition:      background var(--ls-speed);
	cursor:          pointer;
}
.bft-lang-option + .bft-lang-option {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.bft-lang-option:hover    { background: var(--ls-hover-bg); }
.bft-lang-option.is-active { background: var(--ls-active-bg); }

.bft-lang-option__label {
	display:     flex;
	align-items: center;
	gap:         8px;
}

/* Check mark — visible only on active option */
.bft-lang-option__check {
	opacity:     0;
	color:       var(--ls-accent);
	font-size:   11px;
	font-weight: 700;
	transition:  opacity var(--ls-speed);
}
.bft-lang-option.is-active .bft-lang-option__check { opacity: 1; }

/* ── Inline variant — pill row, no trigger needed ───────────────────── */
.bft-language-switcher--inline .bft-language-switcher__trigger {
	display: none;
}

/* Force the menu open for inline (no <details> toggle needed) */
.bft-language-switcher--inline,
.bft-language-switcher--inline > summary { display: none; }
.bft-language-switcher--inline .bft-language-switcher__menu {
	display:          flex !important;
	flex-direction:   row;
	gap:              4px;
	position:         static;
	background:       transparent;
	border:           none;
	box-shadow:       none;
	animation:        none;
	overflow:         visible;
}
.bft-language-switcher--inline {
	display: inline-flex !important;
}
.bft-language-switcher--inline .bft-lang-option {
	padding:      5px 12px;
	border-radius: 6px;
	border:        1px solid var(--ls-border);
	background:    transparent;
}
.bft-language-switcher--inline .bft-lang-option + .bft-lang-option {
	border-top: 1px solid var(--ls-border);
}
.bft-language-switcher--inline .bft-lang-option:hover {
	background: var(--ls-hover-bg);
}
.bft-language-switcher--inline .bft-lang-option.is-active {
	background:   var(--ls-active-bg);
	border-color: var(--ls-accent);
}
.bft-language-switcher--inline .bft-lang-option__check { display: none; }

/* ── Light-mode overrides ───────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
	.bft-language-switcher {
		--ls-bg:       #ffffff;
		--ls-border:   rgba(0, 0, 0, 0.10);
		--ls-text:     #1e1b4b;
		--ls-muted:    #6b7280;
		--ls-hover-bg: rgba(139, 92, 246, 0.06);
		--ls-shadow:   0 8px 24px rgba(0, 0, 0, 0.12);
	}
	.bft-language-switcher__trigger {
		background: rgba(0, 0, 0, 0.04);
	}
	.bft-language-switcher__trigger:hover {
		background:    rgba(0, 0, 0, 0.07);
		border-color:  rgba(0, 0, 0, 0.20);
	}
	.bft-lang-option + .bft-lang-option {
		border-top-color: rgba(0, 0, 0, 0.06);
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.bft-language-switcher,
	.bft-language-switcher * {
		transition: none !important;
		animation:  none !important;
	}
}