body {
    padding: 0;
    margin: 0;
    background-color: transparent !important;
    font-family: "Roboto", sans-serif;
}

a {
    text-decoration: none;
}

.btn.btn-primary {
    background-color: rgb(var(--primary_color));
    border-color: rgb(var(--primary_color));
}

.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
    background-color: rgb(var(--primary_color));
    border-color: rgb(var(--primary_color));
    color: #fff;
}

.widget {
    width: 100%;
    max-width: 320px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgb(var(--border_color));
    box-sizing: border-box;
}

.widget-average {
    font-size: 14px;
    color: rgb(var(--text_color));
}

.widget-rating {
    color: rgb(var(--star_fill_color));
    margin-left: .3rem;
}

[dir=rtl] .widget-rating {
    margin-left: 0;
    margin-right: .3rem;
}

.widget-reviews-link {
    color: rgb(var(--text_color));
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.widget-reviews-link:hover {
    text-decoration: underline;
}

.widget-v1 {
    text-align: center;
    max-width: 300px;
}

.widget-v1-logo {
    height: 30px;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.widget-v1-rating-image {
    height: 50px;
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.widget-v2-logo {
    height: 30px;
    margin-right: 10px;
}

[dir=rtl] .widget-v2-logo {
    margin-right: 0;
    margin-left: 10px;
}

.widget-v2-title {
    font-size: 16px;
    font-weight: bold;
    color: rgb(var(--text_color));
}

.widget-v2-rating-img {
    height: 20px;
}

.widget-v2-rating {
    font-size: 14px;
    color: #333;
}

.widget-v2-link {
    font-size: 14px;
    color: rgb(var(--primary_color));
    text-decoration: none;
}

.widget-v2-link:hover {
    text-decoration: underline;
}

.widget-v3-logo {
    height: 30px;
    object-fit: contain;
    max-width: 100%;
}

.widget-v3-rating-img {
    height: 20px;
    object-fit: contain;
    max-width: 100%;
}

.widget-v3-title {
    font-weight: bold;
    font-size: 16px;
    word-wrap: break-word;
}

.widget-v3-reviews {
    font-size: 14px;
    word-wrap: break-word;
}

.widget-v3-star-label {
    width: 40px;
    font-size: 12px;
    color: rgb(var(--text_color));
}

.widget-v3-progress-bg {
    height: 8px;
    background: rgb(var(--star_color));
    border-radius: 4px;
    overflow: hidden;
}

.widget-v3-progress-bar {
    background-color: rgb(var(--primary_color));
    border-radius: 4px;
}

.widget-v3-star-count {
    font-size: 12px;
    color: rgb(var(--text_muted_color));
}

.widget-v3-link {
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--primary_color));
    text-decoration: none;
}

.widget-v3-link:hover {
    text-decoration: underline;
}

.widget-v4-logo {
    height: 35px;
    margin-right: 10px;
}

[dir=rtl] .widget-v4-logo {
    margin-right: 0;
    margin-left: 10px;
}

.widget-v4-title {
    font-size: 18px;
    font-weight: bold;
    color: rgb(var(--text_color));
}

.widget-v4-rating-img {
    height: 35px;
}

.widget-v4-link {
    width: 100%;
    padding: 10px 0;
    border-radius: 4px;
    text-align: center;
}
/* ---------------------------------------------------------------------------
   v5 carousel, v6 banner, v7 wall.
   --widget-accent is set by the embed page only when the business is on a plan
   that includes branding; everything below falls back to the theme colour when
   it is absent, so an unbranded widget is styled rather than unstyled.
   --------------------------------------------------------------------------- */

.widget-quotes {
    position: relative;
    text-align: center;
}

.widget-quote {
    display: none;
}

.widget-quote.is-active {
    display: block;
    animation: widget-fade .4s ease-in;
}

@keyframes widget-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .widget-quote.is-active { animation: none; }
}

.widget-quote-stars,
.widget-wall-item-stars {
    height: 18px;
}

.widget-quote-body,
.widget-wall-item-body {
    font-size: .9rem;
    line-height: 1.5;
    font-style: normal;
    quotes: none;
}

.widget-quote-author,
.widget-wall-item-author {
    font-size: .8rem;
    opacity: .7;
}

.widget-quote-empty {
    font-size: .85rem;
    opacity: .7;
}

.widget-quote-link,
.widget-reviews-link {
    color: var(--widget-accent, inherit);
    font-size: .8rem;
    display: inline-block;
    text-decoration: none;
}

/* Banner: one row on a desktop page, stacked on a narrow one. */
.widget-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
}

.widget-banner-score {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.widget-banner-stars {
    height: 18px;
}

.widget-banner-count {
    font-size: .8rem;
    opacity: .7;
}

.widget-banner-quote {
    flex: 1 1 240px;
    font-size: .875rem;
    min-width: 0;
}

.widget-banner-cta {
    margin-inline-start: auto;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: .85rem;
    text-decoration: none;
    color: #fff;
    background: var(--widget-accent, #0d6efd);
    white-space: nowrap;
}

/* Wall: the tallest of the set, so it scrolls inside its own frame rather than
   forcing the host page to guess a height. */
.widget-wall {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
    padding: 12px 16px;
}

.widget-wall-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.widget-wall-stars {
    height: 18px;
}

.widget-wall-item + .widget-wall-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.widget-rating {
    color: var(--widget-accent, inherit);
}

/* ------------------------------------------------------------------ v8 badge
   A seal. Square and vertical so it sits in a footer column or a sidebar,
   where v1 - a horizontal line - has to be squeezed. */

.widget-badge {
    max-width: 180px;
    padding: 16px 14px;
    border: 1px solid #e6e8eb;
}

.widget-badge-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: inherit;
}

.widget-badge-score {
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 700;
    color: var(--widget-accent, inherit);
}

.widget-badge-stars {
    height: 18px;
    margin: 8px 0 6px;
}

.widget-badge-count {
    font-size: .78rem;
    color: #6b7280;
}

.widget-badge-logo {
    height: 14px;
    margin-top: 12px;
    opacity: .8;
}

/* -------------------------------------------------------------- v9 spotlight
   One review, set large, with the quote mark doing the work a border would
   otherwise have to. */

.widget-spotlight {
    max-width: 420px;
    padding: 22px 20px;
    border: 1px solid #e6e8eb;
    position: relative;
}

.widget-spotlight::before {
    content: "\201C";
    position: absolute;
    top: 2px;
    left: 12px;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--widget-accent, #d7dbe0);
    opacity: .28;
    pointer-events: none;
}

.widget-spotlight-stars {
    height: 17px;
    margin-bottom: 10px;
}

.widget-spotlight-body {
    position: relative;
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.55;
    color: #1b1f24;
}

.widget-spotlight-author {
    font-size: .85rem;
    font-weight: 600;
    color: #1b1f24;
}

.widget-spotlight-meta {
    display: block;
    font-weight: 400;
    font-size: .78rem;
    color: #6b7280;
    margin-top: 2px;
}

.widget-spotlight-link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef0f2;
    width: 100%;
    font-size: .82rem;
    color: #6b7280;
}

/* ------------------------------------------------------------------ v10 grid
   The wall in two columns, for a page with width rather than height. */

.widget-grid {
    max-width: 640px;
    padding: 18px;
    border: 1px solid #e6e8eb;
}

.widget-grid-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eef0f2;
}

.widget-grid-stars {
    height: 17px;
}

.widget-grid-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* One column when the host gives it a narrow slot. The iframe reports its own
   height back to the loader, so the change in shape is picked up rather than
   leaving the frame the wrong size. */
@media (max-width: 460px) {
    .widget-grid-items {
        grid-template-columns: minmax(0, 1fr);
    }
}

.widget-grid-item {
    padding: 12px;
    border-radius: 6px;
    background: #f7f8f9;
}

.widget-grid-item-stars {
    height: 14px;
    margin-bottom: 8px;
}

.widget-grid-item-body {
    margin: 0 0 8px;
    font-size: .85rem;
    line-height: 1.5;
    color: #1b1f24;
}

.widget-grid-item-author {
    font-size: .78rem;
    font-weight: 600;
    color: #6b7280;
}

/* ================================================================ v11-v30
   Styles 11 to 30. The families are deliberate rather than decorative: micro
   for inline placement, dark for the half of host pages that are not white,
   score-led for when the number is the argument, and a set of shapes for the
   slots a card does not fit. */

/* --------------------------------------------------------- micro (11-13) */

.widget-micro {
    display: inline-block;
    max-width: none;
}

.widget-micro-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.widget-micro-stars { height: 14px; }
.widget-micro-score { font-size: .9rem; }
.widget-micro-count { font-size: .78rem; color: #6b7280; }

/* ----------------------------------------------------------- dark (14-17) */

/*
   Applied as a modifier on the existing shapes rather than as separate rules,
   so a fix to the light version cannot silently miss its dark twin.
*/
.widget-dark {
    background: #16191d;
    border-color: #2a2f36;
    color: #e8eaed;
}

.widget-dark .widget-average,
.widget-dark .widget-v2-rating,
.widget-dark .widget-badge-count,
.widget-dark .widget-wall-item-author { color: #9aa3ad; }

.widget-dark .widget-rating,
.widget-dark .widget-v2-title,
.widget-dark .widget-wall-item-body { color: #ffffff; }

.widget-dark .widget-reviews-link,
.widget-dark .widget-v2-link { color: var(--widget-accent, #7aa7ff); }

.widget-dark .widget-wall-item { border-color: #2a2f36; }

/* ----------------------------------------------------- score-led (18-21) */

.widget-ring { max-width: 180px; padding: 16px; border: 1px solid #e6e8eb; }

.widget-ring-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
}

/* conic-gradient rather than SVG or a chart library: the whole point of the
   embed is that it costs the page that frames it nothing. */
.widget-ring-dial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--widget-accent, rgb(var(--primary_color))) var(--dial), #eceef1 0);
}

.widget-ring-value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.widget-ring-count { margin-top: 10px; font-size: .78rem; color: #6b7280; }

.widget-headline { max-width: 300px; padding: 18px; text-align: center; border: 1px solid #e6e8eb; }
.widget-headline a { color: inherit; display: block; }
.widget-headline-score { font-size: 3rem; line-height: 1; font-weight: 700; }
.widget-headline-out { font-size: 1rem; color: #6b7280; margin-left: 2px; }
.widget-headline-stars { display: block; height: 18px; margin: 10px auto 8px; }
.widget-headline-count { display: block; font-size: .8rem; color: #6b7280; }

.widget-recommend { max-width: 260px; padding: 18px; text-align: center; border: 1px solid #e6e8eb; }
.widget-recommend a { color: inherit; display: block; }
.widget-recommend-pct { display: block; font-size: 2.4rem; line-height: 1; font-weight: 700; color: var(--widget-accent, inherit); }
.widget-recommend-label { display: block; margin-top: 8px; font-size: .85rem; }
.widget-recommend-count { display: block; margin-top: 8px; font-size: .76rem; color: #6b7280; }

.widget-dist { max-width: 300px; padding: 16px; border: 1px solid #e6e8eb; }
.widget-dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.widget-dist-label { width: 10px; font-size: .78rem; color: #6b7280; }
.widget-dist-track { flex: 1; height: 6px; border-radius: 99px; background: #eceef1; overflow: hidden; }
.widget-dist-fill { display: block; height: 100%; background: var(--widget-accent, rgb(var(--primary_color))); }
.widget-dist-pct { width: 34px; text-align: right; font-size: .74rem; color: #6b7280; }
.widget-dist-link { display: inline-block; margin-top: 8px; font-size: .78rem; }

/* -------------------------------------------------------- shapes (22-30) */

.widget-strip { max-width: 100%; padding: 8px 14px; border: 1px solid #e6e8eb; }
.widget-strip-inner { display: flex; align-items: center; gap: 10px; color: inherit; }
.widget-strip-stars { height: 15px; }
.widget-strip-count { font-size: .78rem; color: #6b7280; }

.widget-split { display: flex; max-width: 520px; border: 1px solid #e6e8eb; overflow: hidden; }
.widget-split-score {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 18px 16px; background: #f7f8f9; color: inherit; flex-shrink: 0; min-width: 120px;
}
.widget-split-num { font-size: 1.9rem; line-height: 1; font-weight: 700; }
.widget-split-stars { height: 14px; margin: 8px 0 6px; }
.widget-split-count { font-size: .72rem; color: #6b7280; }
.widget-split-body { padding: 16px; }
.widget-split-quote { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; }
.widget-split-author { font-size: .78rem; font-weight: 600; color: #6b7280; }

.widget-column { max-width: 220px; padding: 16px; border: 1px solid #e6e8eb; }
.widget-column-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef0f2; color: inherit; }
.widget-column-stars { height: 14px; }
.widget-column-item { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #f2f4f6; }
.widget-column-item:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.widget-column-quote { margin: 0 0 4px; font-size: .82rem; line-height: 1.45; }
.widget-column-author { font-size: .74rem; color: #6b7280; }

.widget-masonry { max-width: 680px; padding: 16px; border: 1px solid #e6e8eb; }
.widget-masonry-cols { column-count: 3; column-gap: 12px; }
.widget-masonry-item { break-inside: avoid; margin-bottom: 12px; padding: 12px; border-radius: 6px; background: #f7f8f9; }
.widget-masonry-stars { height: 13px; margin-bottom: 6px; }
.widget-masonry-body { margin: 0 0 6px; font-size: .82rem; line-height: 1.45; }
.widget-masonry-author { font-size: .74rem; font-weight: 600; color: #6b7280; }
@media (max-width: 560px) { .widget-masonry-cols { column-count: 1; } }

.widget-portrait { max-width: 400px; padding: 18px; border: 1px solid #e6e8eb; }
.widget-portrait-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.widget-portrait-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--widget-accent, rgb(var(--primary_color))); color: #fff; font-weight: 700;
}
.widget-portrait-name { display: block; font-size: .85rem; font-weight: 600; }
.widget-portrait-stars { height: 13px; margin-top: 4px; }
.widget-portrait-body { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; }

.widget-grid-three { max-width: 760px; }
.widget-grid-three .widget-grid-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .widget-grid-three .widget-grid-items { grid-template-columns: minmax(0, 1fr); } }

.widget-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 100%; padding: 12px 16px; border: 1px solid #e6e8eb; border-radius: 8px; background: #fff; }
.widget-cta-score { display: inline-flex; align-items: center; gap: 8px; }
.widget-cta-stars { height: 15px; }
.widget-cta-text { flex: 1; font-size: .86rem; color: #6b7280; }
.widget-cta-btn { white-space: nowrap; }

.widget-outline { display: inline-block; padding: 8px 12px; border: 1px solid currentColor; border-radius: 6px; opacity: .95; }
.widget-outline-inner { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.widget-outline-stars { height: 14px; }
.widget-outline-meta { font-size: .8rem; }

.widget-list { max-width: 460px; padding: 8px 0; border: 1px solid #e6e8eb; border-radius: 8px; background: #fff; }
.widget-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: inherit; border-bottom: 1px solid #f2f4f6; }
.widget-list-row:last-child { border-bottom: 0; }
.widget-list-stars { height: 12px; flex-shrink: 0; }
.widget-list-text { flex: 1; min-width: 0; font-size: .82rem; }
.widget-list-author { font-size: .74rem; color: #6b7280; white-space: nowrap; }

/*
 * The widget a business shows before its first review.
 *
 * Same frame, same width, same type as the rating styles - it replaces them
 * rather than sitting beside them, so a page that reserved space for a widget
 * gets one the same size. Nothing here is a colour the theme does not already
 * use, because this renders on somebody else's website and the one thing it
 * must not do is look like it belongs to a different site than the one that
 * asked for it.
 */
.widget-first {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    text-align: center;
}

.widget-first-logo {
    height: 22px;
    width: auto;
}

.widget-first-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
}

.widget-first-cta {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--widget-accent, #f5a623);
}

.widget-first-cta:hover {
    filter: brightness(0.94);
    color: #fff;
    text-decoration: none;
}