/**
 * CWS Google recenzije
 *
 * Ported from the Claude Design prototype "Croator Google Recenzije v2".
 *
 * Every colour and metric the design fixes is a --cwsgr-* custom property with
 * the design value as its fallback, so the widget looks like the prototype the
 * moment it is dropped and every Style control overrides it by setting the
 * variable rather than by out-specifying a rule.
 *
 * No webfont is loaded here. The prototype used Manrope + Space Grotesk; on a
 * WordPress site those belong to the Elementor kit / the widget's typography
 * controls, which already load Google Fonts through Elementor's own pipeline.
 * --cwsgr-font-display is the hook for the score / counter "display" face.
 *
 * Two armour blocks live at the end of this file. Read
 * docs/architecture/elementor-kit-armour.md before touching them.
 */

.cwsgr {
    /* Section */
    --cwsgr-section-bg: #F7F8FA;
    --cwsgr-section-border: #EAEDF1;
    --cwsgr-col-gap: clamp(28px, 4vw, 48px);
    --cwsgr-summary-w: 380px;

    /* Summary panel */
    --cwsgr-panel-bg: #fff;
    --cwsgr-panel-border: #EAEDF1;
    --cwsgr-panel-radius: 22px;
    --cwsgr-eyebrow: #c93a2e;
    --cwsgr-score: #0E1116;
    --cwsgr-count: #8A94A0;
    --cwsgr-intro: #5B646F;
    --cwsgr-star: #FBBC04;

    /* CTA */
    --cwsgr-cta-bg: #db4437;
    --cwsgr-cta-fg: #fff;
    --cwsgr-cta-bg-hover: var(--cwsgr-cta-bg);
    --cwsgr-cta-fg-hover: var(--cwsgr-cta-fg);

    /* Cards */
    --cwsgr-gap: 20px;
    --cwsgr-per-view: 2;
    --cwsgr-clamp: 5;
    --cwsgr-card-bg: #fff;
    --cwsgr-card-border: #EAEDF1;
    --cwsgr-card-radius: 20px;
    --cwsgr-card-star: var(--cwsgr-star);
    --cwsgr-card-star-off: #E3E7EC;
    --cwsgr-quote: #0E1116;
    --cwsgr-toggle: #db4437;
    --cwsgr-toggle-hover: #b8352a;
    --cwsgr-name: #0E1116;
    --cwsgr-company: #8A94A0;
    --cwsgr-avatar-size: 42px;
    --cwsgr-verified: #34A853;
    --cwsgr-divider: #F0F2F5;

    /* Navigation */
    --cwsgr-arrow-size: 44px;
    --cwsgr-arrow-bg: #fff;
    --cwsgr-arrow-fg: #0E1116;
    --cwsgr-arrow-border: #E1E5EA;
    --cwsgr-arrow-bg-hover: var(--cwsgr-arrow-bg);
    --cwsgr-arrow-fg-hover: var(--cwsgr-arrow-fg);
    --cwsgr-arrow-border-hover: #0E1116;
    --cwsgr-dot: #0E1116;
    --cwsgr-dot-active: #db4437;
    --cwsgr-position: #8A94A0;

    --cwsgr-font-display: inherit;

    background: var(--cwsgr-section-bg);
    border-top: 1px solid var(--cwsgr-section-border);
    border-bottom: 1px solid var(--cwsgr-section-border);
}

.cwsgr *,
.cwsgr *::before,
.cwsgr *::after {
    box-sizing: border-box;
}

.cwsgr__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--cwsgr-col-gap);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(56px, 7vw, 92px) 24px;
}

/* The two halves read their `display` from a variable so the per-device
   "Show" control can drop either of them with one media query and no JS.
   A `display:none` flex item is out of the flow entirely, so the survivor
   takes the full row without any column bookkeeping. */
.cwsgr__summary {
    display: var(--cwsgr-summary-display, block);
    flex: 0 1 var(--cwsgr-summary-w, 380px);
    min-width: 0;
    background: var(--cwsgr-panel-bg);
    border: 1px solid var(--cwsgr-panel-border);
    border-radius: var(--cwsgr-panel-radius);
    padding: 28px;
    box-shadow: 0 24px 48px -36px rgba(14, 17, 22, 0.28);
}

.cwsgr__main {
    display: var(--cwsgr-main-display, block);
    flex: 1 1 420px;
    min-width: 0;
}

/* Under this width the panel and the carousel always stack, whatever the
   "Show" control says — two columns in 600px of viewport is not a layout. */
@media (max-width: 999px) {
    .cwsgr__summary,
    .cwsgr__main {
        flex-basis: 100%;
    }
}

/* ------------------------------------------------------------------
 * Summary panel
 * ------------------------------------------------------------------ */

.cwsgr__brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.6px;
    line-height: 1;
}

.cwsgr__wordmark {
    display: flex;
}

.cwsgr__wordmark-letter--g1 { color: #4285F4; }
.cwsgr__wordmark-letter--g2 { color: #EA4335; }
.cwsgr__wordmark-letter--g3 { color: #FBBC04; }
.cwsgr__wordmark-letter--g4 { color: #34A853; }

.cwsgr__brand-suffix {
    color: #5B646F;
    font-weight: 500;
}

.cwsgr__eyebrow {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--cwsgr-eyebrow);
}

.cwsgr__score {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 8px;
}

.cwsgr__score-value {
    font-family: var(--cwsgr-font-display);
    font-size: clamp(46px, 5.5vw, 62px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -2px;
    color: var(--cwsgr-score);
}

.cwsgr__score-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 5px;
}

.cwsgr__summary .cwsgr__stars {
    font-size: 19px;
    letter-spacing: 3px;
}

.cwsgr__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--cwsgr-count);
}

.cwsgr__intro {
    margin: 20px 0 26px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cwsgr-intro);
    text-wrap: pretty;
}

.cwsgr__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cwsgr__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 22px;
    border-radius: 12px;
    background: var(--cwsgr-cta-bg);
    color: var(--cwsgr-cta-fg);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.cwsgr__cta:hover,
.cwsgr__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.45);
}

.cwsgr__cta-arrow {
    font-size: 16px;
    line-height: 1;
}

/* ------------------------------------------------------------------
 * Stars
 * ------------------------------------------------------------------ */

.cwsgr__stars {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--cwsgr-star);
}

.cwsgr__star {
    color: var(--cwsgr-card-star-off);
}

.cwsgr__star.is-on {
    color: inherit;
}

.cwsgr__summary .cwsgr__star.is-on {
    color: var(--cwsgr-star);
}

/* ------------------------------------------------------------------
 * Controls row
 * ------------------------------------------------------------------ */

.cwsgr__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.cwsgr__controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* The rail is a fixed-width window over a longer track; the JS sets the
   host width, the mask and the track offset so the active pill stays
   centred however many pages there are. */
.cwsgr__rail {
    position: relative;
    flex: none;
    width: 132px;
    height: 20px;
    overflow: hidden;
}

.cwsgr__rail-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: left .28s ease;
}

.cwsgr__dot {
    flex: none;
    display: block;
    width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--cwsgr-dot);
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: .32;
    transition: width .28s ease, opacity .28s ease, background-color .28s ease;
}

.cwsgr__dot.is-active {
    background: var(--cwsgr-dot-active);
    opacity: 1;
}

.cwsgr__position {
    flex: none;
    font-family: var(--cwsgr-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--cwsgr-position);
}

.cwsgr__nav {
    display: flex;
    flex: none;
    gap: 10px;
}

.cwsgr__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cwsgr-arrow-size);
    height: var(--cwsgr-arrow-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--cwsgr-arrow-border);
    border-radius: 50%;
    background: var(--cwsgr-arrow-bg);
    color: var(--cwsgr-arrow-fg);
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}

.cwsgr__arrow:hover,
.cwsgr__arrow:focus-visible {
    border-color: var(--cwsgr-arrow-border-hover);
    background: var(--cwsgr-arrow-bg-hover);
    color: var(--cwsgr-arrow-fg-hover);
    transform: translateY(-2px);
}

.cwsgr__arrow[disabled] {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* ------------------------------------------------------------------
 * Track + cards
 * ------------------------------------------------------------------ */

.cwsgr__viewport {
    overflow: hidden;
    /* Padding + negative margin so a focus ring or a shadow on the edge card
       is not clipped by the overflow. */
    padding: 4px;
    margin: -4px;
    touch-action: pan-y;
    /* The JS sizes this to the current page's tallest card; transitioning it
       keeps the page below from jumping when the pages differ in height. */
    transition: height .42s cubic-bezier(.22, .61, .36, 1);
}

.cwsgr__track {
    display: flex;
    align-items: flex-start;
    gap: var(--cwsgr-gap);
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.cwsgr.is-dragging .cwsgr__track {
    transition: none;
}

/* Dragging a card must not paint a text selection across the quotes. */
.cwsgr.is-dragging,
.cwsgr.is-dragging .cwsgr__card {
    user-select: none;
    -webkit-user-select: none;
}

.cwsgr.is-dragging .cwsgr__viewport {
    cursor: grabbing;
}

.cwsgr__card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - (var(--cwsgr-per-view) - 1) * var(--cwsgr-gap)) / var(--cwsgr-per-view));
    max-width: calc((100% - (var(--cwsgr-per-view) - 1) * var(--cwsgr-gap)) / var(--cwsgr-per-view));
    min-width: 0;
    margin: 0;
    padding: 28px;
    background: var(--cwsgr-card-bg);
    border: 1px solid var(--cwsgr-card-border);
    border-radius: var(--cwsgr-card-radius);
}

.cwsgr__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cwsgr__card .cwsgr__stars {
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--cwsgr-card-star);
}

.cwsgr__date {
    font-size: 12px;
    font-weight: 600;
    color: var(--cwsgr-company);
}

.cwsgr__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-bottom: 20px;
}

.cwsgr__quote-wrap {
    position: relative;
}

.cwsgr__quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cwsgr-clamp);
    line-clamp: var(--cwsgr-clamp);
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cwsgr-quote);
    text-wrap: pretty;
}

.cwsgr__card.is-expanded .cwsgr__quote {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* `transparent` is interpolated premultiplied in every evergreen browser, so
   the gradient fades from the card colour rather than through grey. */
.cwsgr__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, transparent, var(--cwsgr-card-bg) 78%);
    transition: opacity .2s ease;
}

.cwsgr__card.is-clamped:not(.is-expanded) .cwsgr__fade {
    opacity: 1;
}

.cwsgr__toggle {
    align-self: flex-start;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: none;
    color: var(--cwsgr-toggle);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease;
}

.cwsgr__toggle:hover,
.cwsgr__toggle:focus-visible {
    color: var(--cwsgr-toggle-hover);
}

.cwsgr__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.cwsgr__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--cwsgr-avatar-size);
    height: var(--cwsgr-avatar-size);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
}

.cwsgr__avatar--img {
    object-fit: cover;
}

.cwsgr__avatar--p0 { background: #FBECEA; color: #db4437; }
.cwsgr__avatar--p1 { background: #EAF0FB; color: #3B6FD4; }
.cwsgr__avatar--p2 { background: #E7F3EA; color: #2E8B4F; }
.cwsgr__avatar--p3 { background: #FDF3DC; color: #B98A0A; }
.cwsgr__avatar--p4 { background: #EDEFF3; color: #4A5460; }

.cwsgr__author-meta {
    min-width: 0;
}

.cwsgr__author-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--cwsgr-name);
    text-decoration: none;
}

.cwsgr__author-company {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cwsgr-company);
}

.cwsgr__verified {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cwsgr-divider);
    font-size: 12px;
    font-weight: 700;
    color: var(--cwsgr-verified);
}

.cwsgr__verified-ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cwsgr-verified);
    color: #fff;
    font-size: 10px;
}

/* Keyboard focus stays visible even where the kit strips outlines. */
.cwsgr__arrow:focus-visible,
.cwsgr__dot:focus-visible,
.cwsgr__toggle:focus-visible,
.cwsgr__cta:focus-visible,
.cwsgr__author-name:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cwsgr__viewport,
    .cwsgr__track,
    .cwsgr__rail-track,
    .cwsgr__dot,
    .cwsgr__arrow,
    .cwsgr__cta,
    .cwsgr__fade {
        transition: none;
    }

    .cwsgr__arrow:hover,
    .cwsgr__cta:hover {
        transform: none;
    }
}

/* ============================================================
 * Kit armour — the Elementor kit's global button/link rule
 * ============================================================
 *
 * Every Elementor site ships a kit rule shaped like:
 *
 *   .elementor-kit-9 button,
 *   .elementor-kit-9 input[type="button"],
 *   .elementor-kit-9 input[type="submit"],
 *   .elementor-kit-9 .elementor-button { background-color: …; color: …; }
 *   .elementor-kit-9 a               { color: …; }
 *
 * One class plus one element — specificity (0,1,1) — which beats every
 * single-class rule above. This widget renders three real <button>s (the two
 * arrows, the per-card "show more" toggle, and every dot the JS builds) plus
 * two links (the CTA and an optional reviewer-name link), so without this
 * block the arrows and dots would silently take the site's brand button
 * colours and the CTA its link colour.
 *
 * The fix is specificity, not `!important`: re-asserting under the `.cwsgr`
 * root is (0,2,0), which wins cleanly and still leaves the Style tab a step
 * higher — the controls write --cwsgr-* variables that these rules consume,
 * so overriding a colour in the panel keeps working (kit-armour.md, point 4).
 *
 * Only the properties the kit sets are repeated: background + color on the
 * buttons, color alone on the links (the kit sets no background on <a>).
 * Hover states are restated here too, or the block would swallow the (0,2,0)
 * hover rules above it (kit-armour.md, point 5).
 */

.cwsgr .cwsgr__arrow {
    background: var(--cwsgr-arrow-bg);
    color: var(--cwsgr-arrow-fg);
}

.cwsgr .cwsgr__arrow:hover,
.cwsgr .cwsgr__arrow:focus-visible {
    background: var(--cwsgr-arrow-bg-hover);
    color: var(--cwsgr-arrow-fg-hover);
}

.cwsgr .cwsgr__dot {
    background: var(--cwsgr-dot);
    color: inherit;
}

.cwsgr .cwsgr__dot.is-active {
    background: var(--cwsgr-dot-active);
}

.cwsgr .cwsgr__toggle {
    background: none;
    color: var(--cwsgr-toggle);
}

.cwsgr .cwsgr__toggle:hover,
.cwsgr .cwsgr__toggle:focus-visible {
    color: var(--cwsgr-toggle-hover);
}

.cwsgr .cwsgr__cta {
    color: var(--cwsgr-cta-fg);
}

.cwsgr .cwsgr__cta:hover,
.cwsgr .cwsgr__cta:focus-visible {
    color: var(--cwsgr-cta-fg-hover);
}

.cwsgr .cwsgr__author-name {
    color: var(--cwsgr-name);
}

/* ============================================================
 * Second armour — the theme's bare-element button reset
 * ============================================================
 *
 * Themes routinely ship
 *
 *   [type=button], [type=submit], button { padding:.5rem 1rem; border:1px solid …;
 *                                          border-radius:3px; display:inline-block;
 *                                          font-size:1rem; font-weight:400; … }
 *
 * `[type=button]` is (0,1,0) — a tie with every single-class rule above, and
 * an outright win for any property those rules never declare. All three
 * buttons here carry an explicit type, and the arrow is a fixed-size
 * border-box circle: a stray `padding:.5rem 1rem` collapses its glyph exactly
 * the way it collapsed the Raskid ugovora close button.
 *
 * So the box + type properties are re-asserted at (0,2,0). Colours are NOT
 * repeated — the kit block above already owns those.
 */

.cwsgr .cwsgr__arrow {
    display: flex;
    width: var(--cwsgr-arrow-size);
    height: var(--cwsgr-arrow-size);
    padding: 0;
    border: 1px solid var(--cwsgr-arrow-border);
    border-radius: 50%;
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.cwsgr .cwsgr__arrow:hover,
.cwsgr .cwsgr__arrow:focus-visible {
    border-color: var(--cwsgr-arrow-border-hover);
}

.cwsgr .cwsgr__dot {
    display: block;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    font: inherit;
}

.cwsgr .cwsgr__toggle {
    display: inline-block;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Re-asserting `display` at (0,2,0) at the end of the file beats the UA
   stylesheet's [hidden]{display:none}, so the "show more" toggle — which the
   markup hides with the plain attribute until the JS finds an overflow —
   would leak onto every card. One blanket rule closes it. */
.cwsgr [hidden] {
    display: none;
}