/**
 * Affichage USD/EUR — basculement via classe body.is-currency-{usd|eur}.
 * Par défaut (avant init JS) : on cache l'EUR pour éviter le flash double affichage.
 */

.clv-price .clv-price-usd,
.clv-price .clv-price-eur {
	display: inline;
}

/* Avant que le JS ait défini la devise, on cache EUR (fallback USD) */
body:not(.is-currency-eur) .clv-price-eur { display: none !important; }
body.is-currency-eur       .clv-price-usd { display: none !important; }

/* ----- Toggle UI -----
 * Customisable via 3 CSS variables :
 *   --clv-currency-color       : couleur brand (bordure + texte bouton inactif + fond bouton actif)
 *   --clv-currency-active-text : texte du bouton actif (défaut : blanc)
 *   --clv-currency-inactive-bg : fond du bouton inactif (défaut : transparent)
 *
 * À surcharger dans le CSS additionnel du thème :
 *   :root { --clv-currency-color: #1a3a5c; }
 */

.clv-currency-toggle {
	--_color: var(--clv-currency-color, #1a3a5c);
	--_active-text: var(--clv-currency-active-text, #ffffff);
	--_inactive-bg: var(--clv-currency-inactive-bg, transparent);
	--_font-size: var(--clv-currency-font-size, 13px);

	display: inline-flex;
	gap: 0;
	border: 1px solid var(--_color);
	border-radius: 999px;
	overflow: hidden;
	color: var(--_color);
	background: var(--_inactive-bg);
	font-size: var(--_font-size) !important;
	line-height: 1 !important;
	user-select: none;
}

.clv-currency-toggle .clv-currency-btn {
	background: transparent;
	border: 0;
	padding: 0.45em 0.85em;
	cursor: pointer;
	color: var(--_color);
	font-family: inherit;
	font-size: inherit !important;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1 !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.clv-currency-toggle .clv-currency-btn.is-active {
	background: var(--_color);
	color: var(--_active-text);
}

.clv-currency-toggle .clv-currency-btn:hover:not(.is-active) {
	background: color-mix(in srgb, var(--_color) 10%, transparent);
}

.clv-currency-toggle .clv-currency-btn:focus-visible {
	outline: 2px solid var(--_color);
	outline-offset: 2px;
}