/**
 * Badge « note + nombre d'avis » — trois formes, un seul balisage.
 *
 * Tout ce qui se règle passe par des variables posées sur l'élément racine :
 * le champ « Couleurs » du bloc, comme l'attribut du shortcode, n'écrit qu'un
 * `style="--attps-badge-bg: …"`. Aucune variante n'a besoin de sa propre règle
 * de couleur, et une retouche ponctuelle ne demande pas d'écrire un sélecteur.
 *
 * Les tailles sont calées sur la carte d'origine (`[attps_uni_google_card]`) :
 * note à 1.5rem, libellés à 0.875rem, 1rem de padding. C'est un BADGE, une
 * pastille qu'on pose à côté d'un titre ou dans un en-tête — pas un bloc de
 * mise en avant. Les agrandir se fait par une variable, les rapetisser aussi.
 */

.attps-reviews-badge {
    /* Clair par défaut : bleu nuit sur gris. */
    --attps-badge-bg: #e6e9ee;
    --attps-badge-color: #1b2438;
    --attps-badge-muted: #4a5468;
    --attps-badge-divider: rgba(27, 36, 56, 0.22);

    --attps-badge-logo: 28px;
    --attps-badge-note-size: 1.5rem;
    --attps-badge-max-size: 1rem;
    --attps-badge-count-size: 0.875rem;
    --attps-badge-label-size: 0.75rem;
    --attps-badge-padding: 1rem;

    display: inline-block;
    max-width: 100%;
}

/* Sombre : blanc sur bleu nuit. Seules les couleurs changent. */
.attps-reviews-badge--dark {
    --attps-badge-bg: #192743;
    --attps-badge-color: #ffffff;
    --attps-badge-muted: rgba(255, 255, 255, 0.72);
    --attps-badge-divider: rgba(255, 255, 255, 0.4);
}

.attps-reviews-badge__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: var(--attps-badge-padding);
    background: var(--attps-badge-bg);
    color: var(--attps-badge-color);
    text-decoration: none;

    /*
     * Le rayon n'est PAS décidé ici : il revient aux classes utilitaires
     * (`atb-rounded-*`) ou au CSS personnalisé. Mais celles-ci se posent sur la
     * RACINE, alors que le fond — donc le coin visible — est sur cette boîte.
     * `inherit` fait le pont : le rayon écrit sur la racine descend ici, sans
     * qu'on ait à dupliquer le sélecteur.
     */
    border-radius: inherit;
    line-height: 1.2;
}

/* Un badge cliquable doit se voir cliquable, sans changer de couleur. */
a.attps-reviews-badge__inner {
    transition: filter 0.15s ease;
}

a.attps-reviews-badge__inner:hover,
a.attps-reviews-badge__inner:focus-visible {
    filter: brightness(0.96);
}

.attps-reviews-badge--dark a.attps-reviews-badge__inner:hover,
.attps-reviews-badge--dark a.attps-reviews-badge__inner:focus-visible {
    filter: brightness(1.15);
}

.attps-reviews-badge__logo {
    display: inline-flex;
    flex: 0 0 auto;
}

.attps-reviews-badge__logo img {
    display: block;
    width: var(--attps-badge-logo);
    height: auto;
}

.attps-reviews-badge__note {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    white-space: nowrap;
}

.attps-reviews-badge__value {
    font-size: var(--attps-badge-note-size);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.attps-reviews-badge__max {
    font-size: var(--attps-badge-max-size);
    font-weight: 400;
    opacity: 0.85;
}

.attps-reviews-badge__count {
    display: flex;
    flex-direction: column;
    font-size: var(--attps-badge-count-size);
}

.attps-reviews-badge__number {
    font-weight: 700;
}

/* Le libellé accompagne le nombre : il se lit en second, il est plus petit. */
.attps-reviews-badge__label {
    font-size: var(--attps-badge-label-size);
    color: var(--attps-badge-muted);
}

/* --------------------------------------------------------------- barre */
/* Logo, note, puis le compte en deux lignes à droite. */

.attps-reviews-badge--bar {
    --attps-badge-padding: 0.6rem 1.1rem;
}

.attps-reviews-badge--bar .attps-reviews-badge__inner {
    gap: 1rem;
}

/* --------------------------------------------------------------- panneau */
/* Note en haut, filet, puis le compte en dessous — d'où la colonne. */

.attps-reviews-badge--panel .attps-reviews-badge__inner {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.75rem;
    text-align: center;
}

/*
 * Le compte occupe toute la largeur sous les deux colonnes, séparé par un
 * filet. `grid-column: 1 / -1` plutôt qu'une valeur figée : la première colonne
 * disparaît quand le logo est masqué, et la règle tient quand même.
 */
.attps-reviews-badge--panel .attps-reviews-badge__count {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    /* Deux tailles de texte sur une même ligne : c'est la ligne de BASE qui les
       aligne, pas leurs boîtes — que `stretch` (le défaut) décalerait. */
    align-items: baseline;
    gap: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--attps-badge-divider);
}

/* --------------------------------------------------------------- pastille */
/* Disque : tout en colonne, centré, avec un rapport 1:1 garanti. */

.attps-reviews-badge--circle {
    --attps-badge-padding: 0.75rem;
}

.attps-reviews-badge--circle .attps-reviews-badge__inner {
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    width: var(--attps-badge-size, 116px);
    max-width: 100%;
    aspect-ratio: 1;
    text-align: center;

    /* Seule exception au rayon libre : sans lui, ce n'est plus une pastille. */
    border-radius: 50%;
}

.attps-reviews-badge--circle .attps-reviews-badge__logo img {
    width: calc(var(--attps-badge-logo) * 0.8);
}

.attps-reviews-badge--circle .attps-reviews-badge__count {
    align-items: center;
    gap: 0.1rem;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 400px) {
    .attps-reviews-badge--bar .attps-reviews-badge__inner {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }
}

/*
 * Le texte réservé aux lecteurs d'écran. La règle est celle de WordPress, mais
 * on ne peut pas compter dessus : `screen-reader-text` vient de la feuille du
 * THÈME, et un thème qui ne la déclare pas afficherait la phrase en clair au
 * milieu du badge.
 */
.attps-reviews-badge .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}