/*
 * Recommandation d'un masseur (fork MGM).
 *
 * Même pastille que les points forts : la case native est masquée, la pastille
 * entière en tient lieu. Rien n'est dessiné tant qu'elle n'est pas
 * sélectionnée — pas de carré vide — et une coche apparaît dans le libellé
 * quand elle l'est.
 *
 * La couleur vient de --mgm-review-tags-accent, posée par le module des points
 * forts sur les mêmes pages. Valeur de repli si elle manque.
 */

.mgm-review-reco {
	margin: 0 0 20px;
}

.mgm-review-reco .mgm-review-reco__choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid #d8dde3;
	border-radius: 999px;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.mgm-review-reco .mgm-review-reco__choice span {
	color: inherit;
}

/* La case reste dans le formulaire — elle est envoyée et reçoit le focus au
   clavier — mais disparaît visuellement. Pas de display:none, qui la
   retirerait aussi de la navigation au clavier. */
.mgm-review-reco .mgm-review-reco__choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mgm-review-reco .mgm-review-reco__choice:hover {
	border-color: var(--mgm-review-tags-accent, #2271b1);
}

/* Sélectionnée. Deux règles distinctes plutôt qu'une liste de sélecteurs : un
   navigateur qui ignore :has() jetterait la liste entière, classe comprise. La
   classe vient du script ; :has() couvre la page rouverte depuis l'historique,
   où la case est restaurée sans déclencher « change ». */
.mgm-review-reco .mgm-review-reco__choice.is-checked {
	border-color: var(--mgm-review-tags-accent, #2271b1);
	background: var(--mgm-review-tags-accent, #2271b1);
	color: #fff;
}

.mgm-review-reco .mgm-review-reco__choice:has(input:checked) {
	border-color: var(--mgm-review-tags-accent, #2271b1);
	background: var(--mgm-review-tags-accent, #2271b1);
	color: #fff;
}

/* La coche, uniquement une fois sélectionnée, et sans cadre autour. */
.mgm-review-reco .mgm-review-reco__choice.is-checked .mgm-review-reco__label::before {
	content: "\2713";
	margin-right: 7px;
	font-weight: 700;
}

.mgm-review-reco .mgm-review-reco__choice:has(input:checked) .mgm-review-reco__label::before {
	content: "\2713";
	margin-right: 7px;
	font-weight: 700;
}

/* La case masquée ne montre plus son focus : on le reporte sur la pastille. */
.mgm-review-reco .mgm-review-reco__choice:has(input:focus-visible) {
	outline: 2px solid var(--mgm-review-tags-accent, #2271b1);
	outline-offset: 2px;
}

/* Explication sous la pastille : même discrétion que les autres aides du
   formulaire. */
.mgm-review-reco .mgm-review-reco__hint {
	margin: 8px 0 0;
	max-width: 520px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
}