.sro-badge {
	display: inline-flex;
	align-items: center;
	gap: 0;
	max-width: 46px;
	overflow: hidden;
	padding: 0.55em;
	border-radius: 999px;
	font-family: var(--font, 'Noticia Text', serif);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	background: var(--sro-bg, rgba(255, 255, 255, 0.14));
	border: 1px solid var(--sro-border, rgba(255, 255, 255, 0.5));
	color: var(--sro-text, #ffffff);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	cursor: pointer;

	/* Animation d'entrée : fondu + léger zoom, une seule fois au chargement */
	opacity: 0;
	transform: scale(0.9);
	animation: sro-pop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: 0.15s;

	/* Déroulé / repli du texte, piloté par la classe .sro-expanded (ajoutée en JS) */
	transition: max-width 0.7s cubic-bezier(0.65, 0, 0.35, 1), padding 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Sans JavaScript, la pastille reste dépliée en permanence (message toujours visible) :
   voir le bloc <noscript> injecté par le plugin qui neutralise l'état replié. */

.sro-badge.sro-expanded {
	max-width: 480px;
	padding: 0.55em 1.15em;
}

@keyframes sro-pop-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Utilitaire : si la pastille est insérée parmi des éléments qui ont déjà
   leur propre animation d'entrée (ex. .hero-content > * sur labrasseriedutnp.com),
   ajoutez cette classe au shortcode pour désactiver l'animation du plugin et
   laisser celle du site s'appliquer : [statut_restaurant class="sro-badge--use-page-animation"] */
.sro-badge--use-page-animation {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.sro-badge {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Mode statique : centrée dans son conteneur (ex. juste au-dessus du logo) */
.sro-badge--inline {
	position: relative;
	margin: 0 auto;
}

/* Mode flottant : pastille fixe dans un coin de l'écran */
.sro-badge--floating {
	position: fixed;
	z-index: 9999;
}

.sro-badge--floating.sro-badge--bottom-right { right: 20px; bottom: 20px; }
.sro-badge--floating.sro-badge--bottom-left  { left: 20px; bottom: 20px; }
.sro-badge--floating.sro-badge--top-right    { right: 20px; top: 20px; }
.sro-badge--floating.sro-badge--top-left     { left: 20px; top: 20px; }

.sro-dot {
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	flex-shrink: 0;
}

.sro-badge--open .sro-dot {
	background-color: var(--sro-open-dot, #4caf6d);
	box-shadow: 0 0 6px var(--sro-open-dot, #4caf6d);
}

.sro-badge--closed .sro-dot {
	background-color: var(--sro-closed-dot, #e0574c);
	box-shadow: 0 0 6px var(--sro-closed-dot, #e0574c);
}

.sro-label {
	display: inline-block;
	line-height: 1.3;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	margin-left: 0;
	transition: opacity 0.35s ease, margin-left 0.35s ease;
}

.sro-badge.sro-expanded .sro-label {
	opacity: 1;
	max-width: 400px;
	margin-left: 0.55em;
	transition-delay: 0.15s;
}

@media (max-width: 480px) {
	.sro-badge {
		font-size: 0.68rem;
		max-width: 40px;
		padding: 0.5em;
	}
	.sro-badge.sro-expanded {
		max-width: 320px;
		padding: 0.5em 1em;
	}
}