:root {
    --review-card-bg: #f9fafb;
    --review-badge-bg: #DBEAFE;
    --review-badge-color: #1E40AF;
}

.row-type-google-reviews-default .logo {
    width: 6rem;
    object-position: bottom;
}

.row-type-google-reviews-default .card {
    background-color: var(--review-card-bg);
}

.row-type-google-reviews-default .card .badge {
    height: 2rem;
    font-size: 0.9rem;
}

.row-type-google-reviews-default .badge {
    background-color: var(--review-badge-bg);
    color: var(--review-badge-color);
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 600;
}

.row-type-google-reviews-default .stats small, .row-type-google-reviews-default .stats .stars {
    position: relative;
    color: #6b7280;
}

.row-type-google-reviews-default .widget-bg {
    background-color: var(--review-card-bg);
    border-radius: 0.5rem;
}

.row-type-google-reviews-default .stats small::before, .row-type-google-reviews-default .stats .stars::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.5rem;
    background-color: #111827;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 100rem;
}

.review-widget .favicon {
    width: 1.25rem;
    height: 1.25rem;
}   

.review-widget i {
    display: flex;
    align-items: center;
}

.review-widget .review-count {
    font-size: 0.75rem;
}

.reviews-component .svg-icon__google:after, .average-widget .svg-icon__google:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48' style='height: 1.6rem;' class='review-logo position-absolute top-0 end-0 m-3'%3E%3C!-- TODO: Load in as icon and move inline styling to dedicated CSS file --%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E");
    width: 1.6em;
    height: 1.6em;
}

.reviews-component .svg-icon__star:after, .average-widget .svg-icon__star:after {
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath id='path4749-2-8-2' d='M7.5,0l-2,5h-5l4,3.5l-2,6l5-3.5&%23xA;&%23x9;l5,3.5l-2-6l4-3.5h-5L7.5,0z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath id='path4749-2-8-2' d='M7.5,0l-2,5h-5l4,3.5l-2,6l5-3.5&%23xA;&%23x9;l5,3.5l-2-6l4-3.5h-5L7.5,0z'/%3E%3C/svg%3E");
    width: 1em;
    height: 1em;
    background-color: #B7B7B7;
}

.reviews-component .svg-icon__plus:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136.22 136.22'%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill:%23e84235;%7D.e%7Bfill:%23fdbb06;%7D.f%7Bfill:%233f87f5;%7D.g%7Bfill:%2335a952;%7D%3C/style%3E%3C/defs%3E%3Cg id='a'/%3E%3Cg id='b'%3E%3Cg id='c'%3E%3Cg%3E%3Crect class='g' x='56.12' y='80.1' width='23.97' height='56.12'/%3E%3Crect class='e' y='56.12' width='56.12' height='23.97'/%3E%3Cpolygon class='d' points='56.12 0 56.12 56.12 56.12 80.1 80.1 56.12 80.1 0 56.12 0'/%3E%3Cpolygon class='f' points='80.1 56.12 56.12 80.1 80.1 80.1 136.22 80.1 136.22 56.12 80.1 56.12'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: 1.5em;
    height: 1.5em;
}

.reviews-component .active:after, .average-widget .active:after {
    background-color: #FFA500 !important;
}

.average-widget {
    border-radius: 8px;
    min-width: 216px;
}

.average-widget .card-body {
    padding: 12px;
}

.average-widget .rating-count {
    font-size: 40px;
    line-height: 40px;
    color: #FFA500;
}

.average-widget .svg-icon__google:after {
    width: 1.2em;
    height: 1.2em;
}