/* Stack Reviews — front-end widget. One sheet, themed per instance via inline --sr-* vars. */ .sr-widget{ --sr-star-empty:#d8d8e0; font-family:var(--sr-font, inherit); color:var(--sr-text,#1f2937); box-sizing:border-box; max-width:100%; } .sr-widget *,.sr-widget *::before,.sr-widget *::after{box-sizing:border-box;} /* ── summary header ── */ .sr-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 var(--sr-gap,16px);} .sr-summary-score{font-size:36px;line-height:1;font-weight:800;color:var(--sr-text,#1f2937);} /* 1.0.84 — the score readable on any section: the look's text colour on a chip of its card colour (background + a spread shadow, so nothing moves). On a section of the card's colour the chip doesn't show; a dark look on a white section, or a light look on a dark one, gets its contrast. Hardened, like the avatar. */ .sr-widget .sr-summary-score{color:var(--sr-text,#1f2937)!important;background:var(--sr-card-bg,#fff)!important;box-shadow:0 0 0 7px var(--sr-card-bg,#fff)!important; border-radius:4px!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;-webkit-text-fill-color:currentColor!important;} .sr-summary-mid{display:flex;flex-direction:column;gap:4px;} .sr-summary-meta{display:flex;align-items:center;gap:6px;color:var(--sr-muted,#6b7280);font-size:13px;} .sr-cta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px; background:#1a73e8;color:#fff;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;} .sr-cta:hover{background:#1666d0;color:#fff;} .sr-summary--badge{display:inline-flex;margin:0;padding:12px 18px;border:1px solid var(--sr-border,#e5e7eb); border-radius:var(--sr-radius,14px);background:var(--sr-card-bg,#fff);box-shadow:0 1px 3px rgba(0,0,0,.06);} /* ── stars ── */ .sr-stars-inner{display:inline-flex;line-height:1;font-size:var(--sr-star-size,18px);} .sr-star{position:relative;color:var(--sr-star-empty);} .sr-star.is-full{color:var(--sr-star,#fbbf24);} .sr-star.is-half::before{content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--sr-star,#fbbf24);} /* ── layouts ── */ .sr-list{position:relative;} .sr-layout-grid .sr-list{display:grid;grid-template-columns:repeat(var(--sr-cols,3),minmax(0,1fr));gap:var(--sr-gap,16px);} .sr-layout-list .sr-list{display:flex;flex-direction:column;gap:var(--sr-gap,16px);} .sr-layout-masonry .sr-list{columns:var(--sr-cols,3);column-gap:var(--sr-gap,16px);} .sr-layout-masonry .sr-card{break-inside:avoid;margin-bottom:var(--sr-gap,16px);} @media(max-width:900px){ .sr-layout-grid .sr-list{grid-template-columns:repeat(2,minmax(0,1fr));} .sr-layout-masonry .sr-list{columns:2;} } @media(max-width:600px){ .sr-layout-grid .sr-list,.sr-layout-masonry .sr-list{grid-template-columns:1fr;columns:1;} } /* ── card ── */ .sr-card{ background:var(--sr-card-bg,#fff); color:var(--sr-text,#1f2937); border:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb); border-radius:var(--sr-radius,14px); padding:var(--sr-pad,20px); text-align:var(--sr-align,left); font-size:var(--sr-text-size,15px); display:flex;flex-direction:column;gap:10px; } .sr-shadow-sm .sr-card{box-shadow:0 1px 3px rgba(16,24,40,.08);} .sr-shadow-md .sr-card{box-shadow:0 4px 12px rgba(16,24,40,.10);} .sr-shadow-lg .sr-card{box-shadow:0 10px 26px rgba(16,24,40,.14);} .sr-card-head{display:flex;align-items:center;gap:11px;} .sr-align-center .sr-card{text-align:center;} .sr-align-center .sr-card-head{justify-content:center;} /* 1.0.79 — the avatar stays a round picture whatever the theme says: Elementor's `.elementor img{border-radius:0;height:auto}` (and a theme's own img rules) made it square, and a photo copied before 1.0.79 showed its black corners. */ .sr-widget .sr-avatar{width:42px!important;height:42px!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important; border-radius:50%!important;object-fit:cover!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important; background-color:#eef0f4!important;flex:0 0 auto;} .sr-avatar--txt{display:inline-flex;align-items:center;justify-content:center;color:#4b5563;font-weight:700;font-size:15px;} .sr-meta{min-width:0;flex:1 1 auto;} .sr-author{font-weight:var(--sr-author-w,600);font-size:var(--sr-author-size,15px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sr-date{color:var(--sr-muted,#6b7280);font-size:12px;margin-top:2px;} .sr-card-glogo{flex:0 0 auto;opacity:.9;} .sr-glogo{display:block;} /* ── slider card variants (carousel only; .sr-v1 = classic default) ── */ /* v2 — centered: avatar + name stacked on top, everything centered */ .sr-v2 .sr-card{text-align:center;align-items:center;} .sr-v2 .sr-card-head{flex-direction:column;align-items:center;gap:6px;} .sr-v2 .sr-meta{flex:0 0 auto;text-align:center;} .sr-v2 .sr-author{white-space:normal;} .sr-v2 .sr-stars{width:100%;text-align:center;} .sr-v2 .sr-card-glogo{display:none;} /* v3 — speech bubble: review in a rounded bubble with a tail, author below */ .sr-v3 .sr-card{background:transparent;border:0;box-shadow:none!important;padding:0;gap:0;} .sr-v3 .sr-stars{order:0;margin-bottom:8px;} .sr-v3 .sr-text{order:1;background:var(--sr-card-bg,#f4f4f6);border:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb);border-radius:var(--sr-radius,14px);padding:var(--sr-pad,18px);position:relative;box-shadow:0 1px 3px rgba(16,24,40,.06);} .sr-v3 .sr-card-head{order:2;margin-top:14px;align-self:stretch;width:100%;justify-content:flex-start;text-align:left;} .sr-v3 .sr-meta{flex:0 0 auto;text-align:left;} /* v4 — quote: stars on top, prominent text, author under a divider */ .sr-v4 .sr-card{gap:14px;} .sr-v4 .sr-stars{order:0;} .sr-v4 .sr-text{order:1;font-size:calc(var(--sr-text-size,15px) + 1px);} .sr-v4 .sr-card-head{order:2;padding-top:13px;border-top:1px solid var(--sr-border,#e5e7eb);} /* v5 — minimal: borderless, airy, text-forward */ .sr-v5 .sr-card{background:transparent;border:0;box-shadow:none!important;padding:6px 4px;gap:8px;} /* Google wordmark (coloured letters) reused by the header / summary variants */ .sr-gword{font-weight:700;letter-spacing:-.5px;line-height:1;white-space:nowrap;} /* v6 — Google header bar above the cards */ .sr-ghead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sr-card-bg,#f4f4f6);border:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb);border-radius:var(--sr-radius,14px);padding:14px 20px;margin:0 0 var(--sr-gap,16px);} .sr-ghead-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .sr-ghead .sr-gword{font-size:20px;} .sr-ghead-word,.sr-ghead-rate{font-weight:700;color:var(--sr-text,#1f2937);} .sr-ghead-sep,.sr-ghead-meta{color:var(--sr-muted,#6b7280);} .sr-ghead-btn{margin-left:auto;padding:9px 16px;border:1px solid var(--sr-border,#e5e7eb);border-radius:8px;background:#fff;color:var(--sr-text,#1f2937);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;} .sr-ghead-btn:hover{background:#f6f6f6;color:var(--sr-text,#1f2937);} /* 1.0.85 — "Write a review" in the look's own pair (its card colour + text colour), like the cards and the 1.0.84 score: the fixed white made it white on white in a dark look. Hover: a light tint over the card colour (on white = the old #f6f6f6). Hardened, so a theme's link rules can't repaint it. */ .sr-widget .sr-ghead-btn{padding:9px 16px!important;border:1px solid var(--sr-border,#e5e7eb)!important;border-radius:8px!important; background:var(--sr-card-bg,#fff)!important;color:var(--sr-text,#1f2937)!important;-webkit-text-fill-color:currentColor!important; text-decoration:none!important;text-shadow:none!important;text-transform:none!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;} .sr-widget .sr-ghead-btn:hover,.sr-widget .sr-ghead-btn:focus{background:var(--sr-card-bg,#fff) linear-gradient(rgba(0,0,0,.035),rgba(0,0,0,.035))!important;color:var(--sr-text,#1f2937)!important;} .sr-widget.sr-theme-dark .sr-ghead-btn:hover,.sr-widget.sr-theme-dark .sr-ghead-btn:focus{background:var(--sr-card-bg,#fff) linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08))!important;} /* v7 (left) + v9 (centered top) summary block: word + stars + "Based on N reviews" + wordmark */ .sr-lsum{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;} .sr-lsum-word{font-size:22px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sr-text,#1f2937);} .sr-lsum-stars{font-size:calc(var(--sr-star-size,18px) + 4px);} .sr-lsum-meta{color:var(--sr-muted,#6b7280);font-size:14px;} .sr-lsum-meta b{color:var(--sr-text,#1f2937);} .sr-lsum .sr-gword{font-size:24px;margin-top:2px;} .sr-widget.sr-v7{display:flex;align-items:center;gap:calc(var(--sr-gap,16px) + 6px);} .sr-v7 .sr-lsum{flex:0 0 190px;} .sr-v7 .sr-list{flex:1 1 auto;min-width:0;} .sr-v9 .sr-lsum{margin:0 auto var(--sr-gap,16px);max-width:340px;} @media(max-width:600px){.sr-widget.sr-v7{flex-direction:column;align-items:stretch;}.sr-v7 .sr-lsum{flex:none;}} /* v8 — centered card with the avatar overhanging the top edge */ .sr-v8 .sr-view{padding-top:40px;} /* 1.0.80 — on the cards' window (it clips), was on .sr-list */ .sr-v8 .sr-card{text-align:center;align-items:center;overflow:visible;} .sr-v8 .sr-card-head{flex-direction:column;align-items:center;gap:5px;} .sr-widget.sr-v8 .sr-avatar{margin-top:-48px!important;width:54px!important;height:54px!important;border:3px solid var(--sr-card-bg,#fff)!important;box-shadow:0 2px 8px rgba(0,0,0,.14)!important;} .sr-v8 .sr-stars{width:100%;text-align:center;} .sr-v8 .sr-card-glogo{display:none;} .sr-text{color:var(--sr-text,#1f2937);line-height:1.55;font-size:var(--sr-text-size,15px);margin:0;} /* Small inline three-dots "read more" — hardened against theme button styles */ .sr-widget .sr-more{display:inline;box-sizing:content-box;width:auto!important;min-height:0!important;height:auto;margin:0 0 0 3px;padding:0 4px!important;background:none!important;border:0!important;box-shadow:none!important;outline:none;color:var(--sr-muted,#6b7280)!important;font:inherit!important;font-weight:700!important;line-height:1;letter-spacing:2px;text-transform:none!important;text-decoration:none!important;vertical-align:baseline;cursor:pointer;-webkit-appearance:none!important;appearance:none!important;-webkit-tap-highlight-color:transparent;} .sr-widget .sr-more:hover,.sr-widget .sr-more:focus{color:var(--sr-star,#1a73e8)!important;background:none!important;} /* ── carousel ── */ .sr-layout-carousel .sr-list{overflow:hidden;} .sr-track{display:flex;gap:var(--sr-gap,16px);will-change:transform;transition:transform .45s cubic-bezier(.4,0,.2,1);} .sr-track .sr-card{flex:0 0 calc((100% - (var(--sr-pv,3) - 1) * var(--sr-gap,16px)) / var(--sr-pv,3));min-width:0;} /* 1.0.80 — min-width: a card held at its content's width overflowed its window (the last one cut off) */ @media(max-width:900px){.sr-track .sr-card{flex-basis:calc((100% - (var(--sr-pv-tab,2) - 1) * var(--sr-gap,16px)) / var(--sr-pv-tab,2));}} @media(max-width:600px){.sr-track .sr-card{flex-basis:calc((100% - (var(--sr-pv-mob,1) - 1) * var(--sr-gap,16px)) / var(--sr-pv-mob,1));}} /* Arrows/dots also hardened so the site theme can't repaint them */ .sr-widget .sr-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px!important;height:38px!important;min-height:0!important;border-radius:50%!important; border:1px solid var(--sr-border,#e5e7eb)!important;background:var(--sr-card-bg,#fff)!important;color:var(--sr-text,#1f2937)!important; font-size:20px;line-height:1;padding:0!important;cursor:pointer;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.1)!important;text-transform:none!important;-webkit-appearance:none!important;appearance:none!important;display:flex;align-items:center;justify-content:center;} .sr-widget .sr-prev{left:-6px;} .sr-widget .sr-next{right:-6px;} .sr-widget .sr-arrow:disabled{opacity:.35;cursor:default;} .sr-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;} /* 1.0.80 — the slider's arrows: beside the cards (each in its own lane, the cards' window between them), never over a review; a solid circle in the widget's text colour with a ring in its card colour, so it shows on a light and on a dark section; on a phone they sit under the cards, the dots between them. Hardened — a theme's button rules can't move or repaint them. */ .sr-layout-carousel .sr-view{overflow:hidden;} .sr-widget.sr-layout-carousel.sr-has-arrows .sr-list{padding-left:56px;padding-right:56px;} .sr-widget.sr-has-dots{--sr-dots-h:22px;} .sr-widget.sr-v8{--sr-arrow-dy:20px;} .sr-widget.sr-layout-carousel .sr-arrow{position:absolute!important;top:calc(50% + var(--sr-arrow-dy,0px) - var(--sr-dots-h,0px) / 2)!important;bottom:auto!important; transform:translateY(-50%)!important;width:42px!important;height:42px!important;min-width:0!important;min-height:0!important;max-width:none!important; margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--sr-text,#1f2937)!important; color:var(--sr-card-bg,#fff)!important;box-shadow:0 0 0 2px var(--sr-card-bg,#fff),0 3px 10px rgba(0,0,0,.28)!important;opacity:1; font-size:0!important;line-height:0!important;letter-spacing:0!important;text-indent:0!important;outline-offset:3px;} .sr-widget.sr-layout-carousel .sr-prev{left:6px!important;right:auto!important;} .sr-widget.sr-layout-carousel .sr-next{right:6px!important;left:auto!important;} .sr-widget.sr-layout-carousel .sr-arrow:hover:not(:disabled),.sr-widget.sr-layout-carousel .sr-arrow:focus-visible{background:var(--sr-text,#1f2937)!important;color:var(--sr-card-bg,#fff)!important; box-shadow:0 0 0 2px var(--sr-card-bg,#fff),0 5px 16px rgba(0,0,0,.38)!important;} .sr-widget.sr-layout-carousel .sr-arrow:disabled{opacity:.45!important;cursor:default;} .sr-widget .sr-arrow .sr-chev{display:block!important;width:20px!important;height:20px!important;margin:0!important;fill:none!important;stroke:currentColor!important;} @media(max-width:600px){ .sr-widget.sr-layout-carousel.sr-has-arrows .sr-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:14px;padding-left:0;padding-right:0;} .sr-widget.sr-layout-carousel.sr-has-arrows .sr-view{flex:0 0 100%;min-width:0;} .sr-widget.sr-layout-carousel .sr-arrow{position:static!important;transform:none!important;margin-top:14px!important;} .sr-widget.sr-layout-carousel .sr-prev{order:1;} .sr-widget.sr-layout-carousel.sr-has-arrows .sr-dots{order:2;margin-top:14px;} .sr-widget.sr-layout-carousel .sr-next{order:3;} } /* 1.0.82 — Arrow position other than the sides: the arrows in a row of their own under (or over) the cards, the dots in that row's free space (bottom) or under the cards (top) — a grid, so arrows and dots never overlap; the same on every width. */ .sr-widget.sr-layout-carousel.sr-arrows-out .sr-list{display:grid;align-items:center;column-gap:10px;row-gap:14px;padding-left:0;padding-right:0;} .sr-widget.sr-layout-carousel.sr-arrows-out .sr-view{grid-area:view;min-width:0;} .sr-widget.sr-layout-carousel.sr-arrows-out .sr-arrow{position:static!important;transform:none!important;margin:0!important;} .sr-widget.sr-layout-carousel.sr-arrows-out .sr-prev{grid-area:prev;} .sr-widget.sr-layout-carousel.sr-arrows-out .sr-next{grid-area:next;} .sr-widget.sr-layout-carousel.sr-arrows-out .sr-dots{grid-area:dots;margin-top:0;min-width:0;flex-wrap:wrap;} .sr-widget.sr-arrows-bottom-center .sr-list{grid-template-columns:1fr auto auto auto 1fr;grid-template-areas:"view view view view view" ". prev dots next .";} .sr-widget.sr-arrows-bottom-left .sr-list{grid-template-columns:auto auto 1fr;grid-template-areas:"view view view" "prev next dots";} .sr-widget.sr-arrows-bottom-left .sr-dots{justify-content:flex-end;} .sr-widget.sr-arrows-bottom-right .sr-list{grid-template-columns:1fr auto auto;grid-template-areas:"view view view" "dots prev next";} .sr-widget.sr-arrows-bottom-right .sr-dots{justify-content:flex-start;} .sr-widget.sr-arrows-top-left .sr-list{grid-template-columns:auto auto 1fr;grid-template-areas:"prev next ." "view view view" "dots dots dots";} .sr-widget.sr-arrows-top-right .sr-list{grid-template-columns:1fr auto auto;grid-template-areas:". prev next" "view view view" "dots dots dots";} /* 1.0.86 — the arrows whole in every position (his "i think you did not count border spaces"): the list clipped them where they met its edge (its ring, shadow and focus ring cut). The list no longer clips them (the cards' window still clips the cards), and the space round each arrow is counted inside the widget — its 2px ring and the focus ring (3px out, 2px wide) — so a theme container that clips at the widget's edge can't cut them either: 6px from every edge an arrow meets, as on the sides. Only the arrows come 6px in; the bottom row gets 6px under it, the top row 6px over it, the phone's row 6px under it. */ .sr-widget.sr-layout-carousel.sr-has-arrows .sr-list{overflow:visible!important;} .sr-widget.sr-layout-carousel .sr-arrow:focus,.sr-widget.sr-layout-carousel .sr-arrow:focus-visible{outline-offset:3px!important;outline-width:2px!important;} .sr-widget.sr-layout-carousel.sr-arrows-bottom-center .sr-list,.sr-widget.sr-layout-carousel.sr-arrows-bottom-left .sr-list, .sr-widget.sr-layout-carousel.sr-arrows-bottom-right .sr-list{padding-bottom:6px!important;} .sr-widget.sr-layout-carousel.sr-arrows-top-left .sr-list,.sr-widget.sr-layout-carousel.sr-arrows-top-right .sr-list{padding-top:6px!important;} .sr-widget.sr-layout-carousel.sr-arrows-out.sr-arrows-bottom-left .sr-prev,.sr-widget.sr-layout-carousel.sr-arrows-out.sr-arrows-top-left .sr-prev{margin-left:6px!important;} .sr-widget.sr-layout-carousel.sr-arrows-out.sr-arrows-bottom-right .sr-next,.sr-widget.sr-layout-carousel.sr-arrows-out.sr-arrows-top-right .sr-next{margin-right:6px!important;} @media(max-width:600px){.sr-widget.sr-layout-carousel.sr-has-arrows:not(.sr-arrows-out) .sr-list{padding-bottom:6px!important;}} .sr-widget .sr-dots button{width:8px!important;height:8px!important;min-height:0!important;border-radius:50%!important;border:0!important;background:var(--sr-star-empty)!important;box-shadow:none!important;cursor:pointer;padding:0!important;-webkit-appearance:none!important;appearance:none!important;} .sr-widget .sr-dots button.is-on{background:var(--sr-star,#fbbf24)!important;width:22px!important;border-radius:4px!important;} /* ───────────────────────── Sidebar layout — narrow single column, 4 pre-designed variants ───────────────────────── */ .sr-layout-sidebar{max-width:400px;} .sr-layout-sidebar .sr-list{display:flex;flex-direction:column;gap:var(--sr-gap,16px);} /* stars + blue verified check on one row (Full sidebar cards + slider II bubble) */ .sr-stars-row{display:flex;align-items:center;gap:6px;} .sr-verified{flex:0 0 auto;display:block;} /* the two sliding variants share the track + single-card-per-view sizing */ .sr-sb1 .sr-list,.sr-sb2 .sr-list{overflow:hidden;} .sr-sb1 .sr-track,.sr-sb2 .sr-track{display:flex;gap:var(--sr-gap,16px);will-change:transform;transition:transform .45s cubic-bezier(.4,0,.2,1);} .sr-sb1 .sr-track .sr-card,.sr-sb2 .sr-track .sr-card{flex:0 0 100%;} .sr-sb-nav{display:flex;gap:8px;} .sr-sb-nav .sr-arrow{position:static;transform:none;width:32px!important;height:32px!important;font-size:17px;box-shadow:0 1px 3px rgba(0,0,0,.12)!important;} /* Variant I — a single grey panel: fixed summary head, sliding text + author, arrows bottom-right */ .sr-sb1 .sr-sb-panel{position:relative;background:var(--sr-card-bg,#f3f4f6);border:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb);border-radius:var(--sr-radius,14px);padding:var(--sr-pad,20px);} .sr-shadow-sm .sr-sb1 .sr-sb-panel{box-shadow:0 1px 3px rgba(16,24,40,.08);} .sr-shadow-md .sr-sb1 .sr-sb-panel{box-shadow:0 4px 12px rgba(16,24,40,.10);} .sr-shadow-lg .sr-sb1 .sr-sb-panel{box-shadow:0 10px 26px rgba(16,24,40,.14);} .sr-sb1 .sr-card{background:transparent;border:0;box-shadow:none!important;padding:0;gap:12px;} .sr-sb-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .sr-sb-word{font-weight:700;font-size:calc(var(--sr-text-size,15px) + 3px);line-height:1.2;color:var(--sr-text,#1f2937);} .sr-sb-based{color:var(--sr-muted,#6b7280);font-size:13px;} .sr-sb-hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;} .sr-sb1 .sr-sb-hrow .sr-gword{font-size:22px;} .sr-sb-author{display:flex;align-items:center;gap:10px;padding-right:80px;} .sr-sb1 .sr-sb-nav{position:absolute;right:var(--sr-pad,20px);bottom:var(--sr-pad,20px);} /* Variant II — author on top + next arrow top-right; grey speech bubble; centered rating footer */ .sr-widget.sr-sb2{position:relative;} .sr-sb2 .sr-card{background:transparent;border:0;box-shadow:none!important;padding:0;gap:0;} .sr-sb2 .sr-card-head{margin-bottom:12px;padding-right:44px;} .sr-sb2 .sr-sb-nav{position:absolute;top:0;right:0;} .sr-sb2 .sr-sb-nav .sr-prev{display:none;} .sr-bubble{position:relative;background:var(--sr-card-bg,#f3f4f6);border:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb);border-radius:var(--sr-radius,14px);padding:var(--sr-pad,18px);box-shadow:0 1px 3px rgba(16,24,40,.06);} .sr-bubble::before{content:"";position:absolute;left:24px;top:-7px;width:14px;height:14px;background:var(--sr-card-bg,#f3f4f6);border-left:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb);border-top:var(--sr-border-w,1px) solid var(--sr-border,#e5e7eb);transform:rotate(45deg);} .sr-bubble-top{display:flex;align-items:center;gap:6px;margin-bottom:8px;} .sr-bubble-g{margin-left:auto;} .sr-sb-foot{text-align:center;margin-top:16px;color:var(--sr-muted,#6b7280);font-size:14px;line-height:1.5;} .sr-sb-foot b{color:var(--sr-text,#1f2937);} /* Variants III & IV — a static stack of full cards (author + "G" corner, stars + verified, text) */ .sr-sb3 .sr-stars-row,.sr-sb4 .sr-stars-row{margin-top:2px;} /* Variant IV — business summary header above the stack */ .sr-sb-biz{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--sr-gap,16px);} .sr-sb-logo{width:64px;height:64px;border-radius:10px;flex:0 0 auto;background:#e9eaee no-repeat center/26px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");} .sr-sb-biz-main{display:flex;flex-direction:column;gap:5px;min-width:0;} .sr-sb-biz-name{font-weight:700;font-size:16px;line-height:1.2;color:var(--sr-text,#1f2937);} .sr-sb-biz-meta{color:var(--sr-muted,#6b7280);font-size:13px;} .sr-sb-write{align-self:flex-start;margin-top:4px;padding:8px 16px;border:1px solid var(--sr-border,#d0d5dd);border-radius:8px;background:transparent;color:var(--sr-text,#1f2937);text-decoration:none;font-weight:600;font-size:13px;line-height:1;} .sr-sb-write:hover{background:rgba(0,0,0,.03);color:var(--sr-text,#1f2937);} .sr-theme-dark .sr-sb-logo{background-color:#2b3240;} .sr-theme-dark .sr-sb-write:hover{background:rgba(255,255,255,.06);} /* ── dark theme minor tweaks (colors themselves come from the vars) ── */ .sr-theme-dark{--sr-star-empty:#3a3f4b;} .sr-widget.sr-theme-dark .sr-avatar--txt{background-color:#2b2f3a!important;color:#cbd5e1;} /* ───────────────────────── Badge layout — 15 variants ───────────────────────── */ .sr-layout-badge{display:inline-block;text-align:center;color:var(--sr-text,#1f2937);} /* Award badges 1-4 — a centered column, small gaps */ .sr-bg-col{display:inline-flex;flex-direction:column;align-items:center;gap:4px;} .sr-bg-row{display:inline-flex;align-items:center;gap:8px;} .sr-bg-title{font-weight:800;font-size:17px;line-height:1.25;margin:6px 0 3px;} .sr-bg-rate{font-weight:700;} .sr-bg-verified{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--sr-muted,#6b7280);font-size:12px;} .sr-info{opacity:.7;flex:0 0 auto;} /* the coloured Google wordmark is reused — size it up where the design is prominent */ .sr-badge--card .sr-gword{font-size:22px;} .sr-badge3 .sr-gword,.sr-badge11 .sr-gword{font-size:26px;} /* the big "G" */ .sr-bg-g{display:inline-flex;line-height:0;} .sr-bg-g svg{width:34px;height:34px;} .sr-badge5 .sr-bg-g svg,.sr-badge6 .sr-bg-g svg,.sr-badge7 .sr-bg-g svg,.sr-badge8 .sr-bg-g svg{width:40px;height:40px;} /* Boxed vertical (5,6) */ .sr-badge--boxed{border:1px solid var(--sr-border,#e5e7eb);border-radius:10px;display:inline-block;min-width:190px;background:var(--sr-card-bg,#fff);text-align:center;} .sr-bg-cap{padding:12px 16px;border-bottom:1px solid var(--sr-border,#e5e7eb);font-weight:800;} .sr-bg-body{padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px;} .sr-bg-rate-lg{font-size:26px;font-weight:800;} .sr-bg-foot{padding:9px 16px;border-top:1px solid var(--sr-border,#e5e7eb);} /* Boxed horizontal (7,8) */ .sr-badge--boxed-h{display:inline-flex;align-items:stretch;border:1px solid var(--sr-border,#e5e7eb);border-radius:10px;overflow:hidden;background:var(--sr-card-bg,#fff);} .sr-bg-left{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 16px;border-right:1px solid var(--sr-border,#e5e7eb);} .sr-bg-right{padding:12px 16px;text-align:left;display:flex;flex-direction:column;gap:4px;justify-content:center;} .sr-bg-star-rate{font-weight:700;display:inline-flex;align-items:center;gap:4px;} /* 1.0.87 — badges VII + VIII: every line of the right column on one side (his "this badget left align is not correct"). The column stretched its lines to its width, and the "verified" line centred its words in that width while the stars row and the title sat left — off by however much the widest line was wider. Now the lines keep their own width and line up: at the left (Alignment: Left), centred (Alignment: Center). The column's width, the badge and the left column don't change. Hardened, so a theme's text-align rules can't pull one line away. */ .sr-widget .sr-badge--boxed-h .sr-bg-right{align-items:flex-start!important;text-align:left!important;} .sr-widget .sr-badge--boxed-h .sr-bg-right>*{text-align:inherit!important;} .sr-widget .sr-badge--boxed-h .sr-bg-verified{justify-content:flex-start!important;} .sr-widget.sr-align-center .sr-badge--boxed-h .sr-bg-right{align-items:center!important;text-align:center!important;} .sr-widget.sr-align-center .sr-badge--boxed-h .sr-bg-verified{justify-content:center!important;} /* HTML cards (9-13) + company (14,15) */ .sr-badge--card{display:inline-flex;flex-direction:column;align-items:center;gap:8px;background:var(--sr-card-bg,#fff);border-radius:14px;box-shadow:0 6px 20px rgba(16,24,40,.12);padding:18px 22px;} .sr-badge--card.sr-badge--row{flex-direction:row;align-items:center;gap:12px;text-align:left;} .sr-bg-cell{display:flex;flex-direction:column;gap:4px;min-width:0;} .sr-bg-strong{font-weight:700;} .sr-bg-meta{color:var(--sr-muted,#6b7280);font-size:13px;} .sr-bg-uline,.sr-badge--card u{text-decoration:underline;} .sr-bg-chip{background:#f1f3f5;border-radius:6px;padding:2px 7px;font-weight:700;color:#1f2937;} .sr-bg-excellent{font-weight:800;letter-spacing:1px;} .sr-badge11 .sr-stars-inner{font-size:calc(var(--sr-star-size,18px) + 6px);} /* Company badges (14,15) reuse .sr-sb-biz — compact, no bottom margin */ .sr-badge--card.sr-sb-biz{margin:0;align-items:center;} .sr-badge14 .sr-sb-logo,.sr-badge15 .sr-sb-logo{width:48px;height:48px;} /* Popup modal (#15) */ /* Trigger is a