/**
 * Bilingual Blog SR-FR — Frontend CSS
 * Clean, theme-agnostic, Astra/Elementor safe
 */

/* ─── Switcher container ─────────────────────────────────────────────────────── */
.bbsf-switcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	margin-bottom: 24px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	font-family: inherit;
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.bbsf-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}

.bbsf-btn:hover {
	background: rgba(0, 0, 0, 0.06);
	color: #222;
}

.bbsf-btn--active {
	background: #fff;
	color: #111;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.bbsf-btn__flag {
	font-size: 16px;
	line-height: 1;
}

/* ─── SR-specific accent ────────────────────────────────────────────────────── */
.bbsf-btn--sr.bbsf-btn--active {
	color: #C0392B; /* Serbian red accent */
}

/* ─── FR-specific accent ────────────────────────────────────────────────────── */
.bbsf-btn--fr.bbsf-btn--active {
	color: #2563EB; /* French blue accent */
}

/* ─── Content sections ───────────────────────────────────────────────────────── */
.bbsf-content-section {
	display: block;
}

.bbsf-content-section[hidden] {
	display: none !important;
}

/* ─── Fade animations ────────────────────────────────────────────────────────── */
@keyframes bbsf-fade-in-anim {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes bbsf-fade-out-anim {
	from { opacity: 1; }
	to   { opacity: 0; }
}

.bbsf-fade-in {
	animation: bbsf-fade-in-anim 0.28s ease forwards;
}

.bbsf-fade-out {
	animation: bbsf-fade-out-anim 0.18s ease forwards;
}

/* ─── Pill style variant: [bilingual_post_switcher style="pills"] ────────────── */
.bbsf-switcher--pills {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	gap: 10px;
}

.bbsf-switcher--pills .bbsf-btn {
	border: 2px solid #ddd;
	border-radius: 50px;
}

.bbsf-switcher--pills .bbsf-btn--active {
	border-color: currentColor;
	background: transparent;
	box-shadow: none;
}

.bbsf-switcher--pills .bbsf-btn--sr.bbsf-btn--active {
	border-color: #C0392B;
}

.bbsf-switcher--pills .bbsf-btn--fr.bbsf-btn--active {
	border-color: #2563EB;
}

/* ─── Minimal style variant ──────────────────────────────────────────────────── */
.bbsf-switcher--minimal {
	background: transparent;
	border: none;
	padding: 0;
	gap: 16px;
}

.bbsf-switcher--minimal .bbsf-btn {
	padding: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 0;
	color: #999;
	border-bottom: 2px solid transparent;
}

.bbsf-switcher--minimal .bbsf-btn--active {
	color: #111;
	border-bottom-color: #111;
	box-shadow: none;
	background: transparent;
}

/* ─── Elementor context ─────────────────────────────────────────────────────── */
.bbsf-switcher--elementor {
	margin-bottom: 20px;
}

/* ─── Dark mode ─────────────────────────────────────────────────────────────── */
@media ( prefers-color-scheme: dark ) {
	.bbsf-switcher {
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.12);
	}

	.bbsf-btn {
		color: rgba(255, 255, 255, 0.6);
	}

	.bbsf-btn--active {
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	}

	.bbsf-btn:hover {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.bbsf-switcher {
		width: 100%;
		justify-content: center;
	}

	.bbsf-btn {
		flex: 1;
		justify-content: center;
	}
}