/**
 * Loading state for #cora-fav (navigation favorite indicator).
 *
 * Toggled by `geolocation.js` via la classe `.is-loading` sur `#cora-fav`.
 * Le JS injecte aussi un `<span class="cora-fav-dots">` avec trois points
 * qui bondissent en stagger (effet « typing indicator »).
 *
 * Utilisé par les deux flux :
 *  - Bouton coeur (.change-fav)
 *  - Géolocalisation auto + bouton « Trouver un restaurant »
 *
 * Stratégie :
 *  - On masque le contenu original avec `visibility: hidden` (la hauteur
 *    est conservée, donc pas de saut de layout).
 *  - Les trois points sont positionnés en absolu, alignés à gauche du
 *    wrapper, et utilisent `currentColor` → ils prennent la couleur de
 *    texte héritée du contexte (la nav).
 */

/**
 * Visibility utility used by the cora/favorite IAPI store to toggle the
 * no-fav vs fav-set sections inside #cora-fav. Uses `!important` because
 * the block-theme rule `.is-layout-flex { display: flex }` has the same
 * specificity as `[hidden]` (both single-class/attribute) and the author
 * stylesheet wins the cascade — so plain `hidden` won't hide elements
 * that also carry `is-layout-flex`.
 */
.cora-fav__hidden { display: none !important; }

/**
 * Inline three-dot loader shown inside #cora-fav while the IAPI store
 * reconciles the cookie against (potentially cached) server state. Sized
 * to fit the favorite-button slot in the header without changing layout.
 */
.cora-fav__loader {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0.25em 0.5em;
	pointer-events: none;
}
.cora-fav__loader > span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor;
	animation: cora-fav-dot-bounce 1.2s ease-in-out infinite;
}
.cora-fav__loader > span:nth-child(2) { animation-delay: 0.15s; }
.cora-fav__loader > span:nth-child(3) { animation-delay: 0.30s; }

#cora-fav.is-loading {
	pointer-events: none;
	position: relative;
}

#cora-fav.is-loading > div,
#cora-fav.is-loading > a {
	visibility: hidden;
}

.cora-fav-dots {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: inline-flex;
	gap: 2px;
	pointer-events: none;
}

.cora-fav-dots > span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: currentColor;
	animation: cora-fav-dot-bounce 1.2s ease-in-out infinite;
}

.cora-fav-dots > span:nth-child(2) { animation-delay: 0.15s; }
.cora-fav-dots > span:nth-child(3) { animation-delay: 0.30s; }

@keyframes cora-fav-dot-bounce {
	0%, 60%, 100% { transform: translateY(0);     opacity: 0.5; }
	30%           { transform: translateY(-2px);  opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
	.cora-fav-dots > span {
		animation: none;
		opacity: 0.8;
	}
}