/* Sangriha Language Switch — front-end pill
   Themed via --sls-accent / --sls-radius injected inline. */

#sls-pill-source { display: none !important; }

.sls-pill {
	--_bg: var(--sls-accent-soft, rgba(214,34,70,.14));
	--_fg: var(--sls-accent, #d62246);
	--_line: var(--sls-accent-line, rgba(214,34,70,.34));
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	box-sizing: border-box;
	padding: .55em .95em;
	border-radius: var(--sls-radius, 999px);
	font-size: 13px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .2s ease;
	vertical-align: middle;
}
.sls-pill:hover { transform: translateY(-1px); }
.sls-pill:active { transform: translateY(0) scale(.97); }
.sls-pill:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 0 0 4px var(--_line);
}

.sls-pill-ic {
	display: inline-flex;
	font-size: 1.08em;
	line-height: 0;
}
.sls-pill-ic svg { display: block; }
.sls-pill-tx { display: inline-block; }
.sls-pill.sls-upper .sls-pill-tx { text-transform: uppercase; letter-spacing: .06em; font-size: .92em; }

/* ---- Sizes ---- */
.sls-pill.sls-size-sm { font-size: 12px; padding: .48em .8em; }
.sls-pill.sls-size-md { font-size: 13px; }
.sls-pill.sls-size-lg { font-size: 15px; padding: .62em 1.1em; }

/* ---- Style: glass ---- */
.sls-pill.sls-style-glass {
	color: #fff;
	background: var(--_bg);
	border: 1px solid var(--_line);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px -8px rgba(0,0,0,.5);
}
.sls-pill.sls-style-glass .sls-pill-ic { color: var(--_fg); filter: brightness(1.35); }
.sls-pill.sls-style-glass:hover {
	background: color-mix(in srgb, var(--_fg) 24%, transparent);
	border-color: var(--_fg);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -10px var(--_line);
}

/* ---- Style: filled ---- */
.sls-pill.sls-style-filled {
	color: #fff;
	background: var(--_fg);
	border: 1px solid transparent;
	box-shadow: 0 8px 20px -10px var(--_fg);
}
.sls-pill.sls-style-filled .sls-pill-ic { color: #fff; }
.sls-pill.sls-style-filled:hover {
	background: color-mix(in srgb, var(--_fg) 88%, #000);
	box-shadow: 0 12px 26px -10px var(--_fg);
}

/* ---- Style: soft ---- */
.sls-pill.sls-style-soft {
	color: var(--_fg);
	background: var(--_bg);
	border: 1px solid transparent;
}
.sls-pill.sls-style-soft .sls-pill-ic { color: var(--_fg); }
.sls-pill.sls-style-soft:hover {
	background: color-mix(in srgb, var(--_fg) 20%, transparent);
}

/* ---- Style: outline ---- */
.sls-pill.sls-style-outline {
	color: var(--_fg);
	background: transparent;
	border: 1.5px solid var(--_line);
}
.sls-pill.sls-style-outline .sls-pill-ic { color: var(--_fg); }
.sls-pill.sls-style-outline:hover {
	border-color: var(--_fg);
	background: var(--_bg);
}

/* On a light theme, keep glass text readable */
@media (prefers-color-scheme: light) {
	.sls-pill.sls-style-glass { color: color-mix(in srgb, var(--_fg) 78%, #111); }
}

/* ---- Placement: inside the byline / meta row ---- */
.sls-meta-slot {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
/* When the byline row is a horizontal flexbox, push the pill to the far
   right of that boxed row and keep it vertically centred. */
.sls-meta-slot.sls-in-flex {
	margin-left: auto;
	align-self: center;
}
/* When the row is not flex, pin the pill to the right edge of the row.
   Absolute (not fixed) means it scrolls with the page and stays boxed. */
.sls-meta-rel { position: relative; }
.sls-meta-rel > .sls-meta-slot {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Right-aligned bar fallback, still within the boxed content column */
.sls-inline-bar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 1.1rem;
}

.sls-pill.sls-block { display: inline-flex; margin: 0 0 1.1rem; }

/* Floating is opt-in only (Display tab), never the automatic fallback */
.sls-pill.sls-floating {
	position: fixed;
	z-index: 9990;
	box-shadow: 0 10px 30px -8px rgba(0,0,0,.55);
	animation: sls-fade-in .35s ease both;
}
.sls-pill.sls-floating.sls-c-top-right { top: 84px; right: 16px; }
.sls-pill.sls-floating.sls-c-top-left { top: 84px; left: 16px; }
.sls-pill.sls-floating.sls-c-bottom-right { bottom: 96px; right: 16px; }

@keyframes sls-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Ripple ---- */
.sls-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	transform: scale(0);
	animation: sls-ripple .6s ease-out;
	pointer-events: none;
	z-index: 0;
}
.sls-style-outline .sls-ripple,
.sls-style-soft .sls-ripple { background: var(--_line); }
@keyframes sls-ripple {
	to { transform: scale(2.6); opacity: 0; }
}

/* ---- Pulse ---- */
.sls-anim-pulse.sls-clicked { animation: sls-pulse .4s ease; }
@keyframes sls-pulse {
	0% { box-shadow: 0 0 0 0 var(--_line); }
	100% { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
}

/* generic click nudge */
.sls-clicked .sls-pill-tx { animation: sls-nudge .3s ease; }
@keyframes sls-nudge {
	50% { transform: translateX(2px); }
}

/* ---- Responsive ---- */
.sls-meta-slot .sls-pill { flex: 0 0 auto; }

@media (max-width: 600px) {
	.sls-pill.sls-size-lg { font-size: 14px; padding: .56em 1em; }
	.sls-meta-slot.sls-in-flex { margin-left: auto; }
}
@media (max-width: 430px) {
	.sls-meta-slot .sls-pill { font-size: 12px; padding: .46em .72em; }
	/* If the byline is cramped, keep the icon but let the label breathe */
	.sls-meta-rel > .sls-meta-slot { right: 0; }
}
@media (max-width: 340px) {
	/* Extreme narrow: icon-only so it can never overlap the byline text */
	.sls-meta-slot .sls-pill .sls-pill-tx { display: none; }
	.sls-meta-slot .sls-pill { padding: .5em; }
}

@media (prefers-reduced-motion: reduce) {
	.sls-pill, .sls-pill:hover, .sls-pill:active { transition: none; transform: none; }
	.sls-ripple, .sls-anim-pulse.sls-clicked, .sls-pill.sls-floating { animation: none; }
}