/* G2 rating mini banner (template-parts/components/g2-stars-rating.php),
   Figma "SimplyDepo-Website" node 22963:11652. Sizes/weights come from the
   global sd-type-* classes in the markup; this file owns layout and colour.
   Selectors use the doubled-class trick so page CSS (hero.css,
   competitors-hub.css) can't out-rank them. Callers only set outer margins. */

.g2-rating.g2-rating,
.g2-rating.g2-rating * {
    font-family: 'Google Sans Flex Local v2', 'Google Sans Flex', sans-serif;
}

.g2-rating.g2-rating {
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    max-width: 100%;
}

.g2-rating.g2-rating .g2-rating__badge {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 0 0 auto;
}

.g2-rating.g2-rating .g2-rating__medal {
    display: block;
    width: 59px;
    height: 68px;
    flex: 0 0 auto;
}

.g2-rating.g2-rating .g2-rating__badge-text,
.g2-rating.g2-rating .g2-rating__score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
}

.g2-rating.g2-rating .g2-rating__badge-title,
.g2-rating.g2-rating .g2-rating__value,
.g2-rating.g2-rating .g2-rating__count {
    color: rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

.g2-rating.g2-rating .g2-rating__badge-season,
.g2-rating.g2-rating .g2-rating__source {
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.g2-rating.g2-rating a.g2-rating__source {
    text-decoration: none;
    transition: color 0.3s ease;
}

.g2-rating.g2-rating a.g2-rating__source:hover {
    color: rgba(0, 0, 0, 0.75);
}

.g2-rating.g2-rating .g2-rating__divider {
    display: block;
    width: 1px;
    height: 36px;
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.1);
}

.g2-rating.g2-rating .g2-rating__line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.g2-rating.g2-rating .g2-rating__value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.g2-rating.g2-rating .g2-rating__star {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.g2-rating.g2-rating .g2-rating__dot {
    color: #262626;
}

/* Figma: on viewports too narrow for the 348px banner it scales down as a
   whole instead of wrapping onto two lines. */
@media (max-width: 379px) {
    .g2-rating.g2-rating {
        zoom: 0.88;
    }
}

@media (max-width: 339px) {
    .g2-rating.g2-rating {
        zoom: 0.78;
    }
}