/* ============================================================
   S.T Contracts Ltd - Global Review Pill
   Shared component. Self-contained values so it renders on any
   background. Three variants: --light, --dark, --colour.
   The Google logo stays full colour in all of them.
   ============================================================ */
.st-review-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: 'Mulish', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

/* Google logo sits on its own white chip so the full-colour mark
   reads correctly on light, dark and orange pills alike. */
.st-review-pill__g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(20, 26, 32, .18);
}
.st-review-pill__g svg { display: block; }

.st-review-pill__stars {
    display: inline-flex;
    gap: 2px;
    color: #f5b50a;
    font-size: 14px;
}

.st-review-pill__rating {
    font-size: 14px;
    font-weight: 800;
}

.st-review-pill__count {
    font-size: 13px;
    font-weight: 600;
}
.st-review-pill__count a { color: inherit; text-decoration: none; }
.st-review-pill__count a:hover { text-decoration: underline; }

/* ---- Variant: light (white pill, for dark backgrounds) ---- */
.st-review-pill--light {
    background: #ffffff;
    border-color: #e6e8eb;
    box-shadow: 0 3px 12px rgba(16, 24, 32, .12);
}
.st-review-pill--light .st-review-pill__rating { color: #23282d; }
.st-review-pill--light .st-review-pill__count  { color: #5b636b; }

/* ---- Variant: dark (charcoal pill, for light backgrounds) ---- */
.st-review-pill--dark {
    background: #23282d;
    border-color: rgba(255, 255, 255, .12);
}
.st-review-pill--dark .st-review-pill__rating { color: #ffffff; }
.st-review-pill--dark .st-review-pill__count  { color: rgba(255, 255, 255, .72); }

/* ---- Variant: colour (orange pill, accent) ---- */
.st-review-pill--colour {
    background: #F28823;
    border-color: #F28823;
    box-shadow: 0 6px 18px rgba(242, 136, 35, .32);
}
.st-review-pill--colour .st-review-pill__stars  { color: #ffffff; }
.st-review-pill--colour .st-review-pill__rating { color: #ffffff; }
.st-review-pill--colour .st-review-pill__count  { color: rgba(255, 255, 255, .92); }

@media (max-width: 420px) {
    .st-review-pill { padding: .45rem .75rem; gap: .5rem; }
    .st-review-pill__count { font-size: 12px; }
    .st-review-pill__g { width: 24px; height: 24px; }
}