/* Purefun Review Widget - see design_handoff_review_widgets/README.md.
   Two layouts switched on the widget's OWN width (not the viewport), since it's often
   placed in a narrow column or widget area: a container query does that natively, so
   the layout is already correct before any JS runs. JS only computes the card width (so
   a half card is never visible) and drives the arrow/dot state. */

.pfrw-widget {
    container-type: inline-size;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 0;
    font-family: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #191919;
}

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

.pfrw-idealo {
    --pfrw-tint: #fdf8f7;
    --pfrw-blob: #feede8;
    --pfrw-brand: #ff6600;
    --pfrw-score: #0a2d6e;
}

.pfrw-ceneo {
    --pfrw-tint: #fef9ec;
    --pfrw-blob: #fef2d2;
    --pfrw-brand: #ff6400;
    --pfrw-score: #191919;
}

/* ---------- Wide layout (widget >= 520px): summary tile beside the track ----------
   The column geometry deliberately matches the Trustpilot TrustBox carousel this sits
   next to, measured from its own DOM: 200px summary, 8px gutters around both arrows,
   and the next arrow ending 8px before the right edge. Keeping those identical is what
   makes the two widgets read as one stack rather than two near-misses. */

.pfrw-panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.pfrw-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--pfrw-blob);
    pointer-events: none;
}

.pfrw-blob-panel-a,
.pfrw-blob-panel-b {
    display: none;
}

.pfrw-blob-summary-a {
    top: -46px;
    left: -34px;
    width: 120px;
    height: 120px;
}

.pfrw-blob-summary-b {
    right: -40px;
    bottom: -54px;
    width: 130px;
    height: 130px;
}

/* The two sources anchor the card blob in opposite corners - idealo top-right, Ceneo
   bottom-left - so the two rows don't read as the same texture repeated twice. */
.pfrw-blob-card {
    width: 120px;
    height: 120px;
}

.pfrw-idealo .pfrw-blob-card {
    top: -48px;
    right: -36px;
}

.pfrw-ceneo .pfrw-blob-card {
    bottom: -48px;
    left: -36px;
}

.pfrw-summary {
    position: relative;
    flex: 0 0 200px;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    padding: 16px 14px;
    border-radius: 16px;
    background: var(--pfrw-tint);
}

.pfrw-summary-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0;
    text-align: center;
}

.pfrw-logo {
    display: block;
    height: auto;
}

.pfrw-idealo .pfrw-logo {
    width: 116px;
}

.pfrw-ceneo .pfrw-logo {
    width: 104px;
}

.pfrw-idealo-badge img {
    max-width: 160px;
    height: auto;
}

.pfrw-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.pfrw-score {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--pfrw-score);
}

.pfrw-count {
    font-size: 14px;
    color: #4b5563;
    text-decoration: none;
}

.pfrw-count-value {
    font-weight: 600;
    text-decoration: underline;
}

/* Kept rather than dropped with the rest of the summary copy: we filter out everything
   below 4 stars, and Ceneo's own review page states that openly - so the widget has to
   say it too. */
.pfrw-footer-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: #6b7280;
}

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

.pfrw-stars {
    display: flex;
    line-height: 1;
}

/* Both sources use the same bare orange glyph; only the brand hue differs (inlined per
   star in PHP, since the fill percentage is data-dependent). */
.pfrw-stars-summary {
    gap: 2px;
    font-size: 22px;
}

.pfrw-stars-card {
    gap: 2px;
    font-size: 17px;
}

/* ---------- Track ---------- */

.pfrw-track-area {
    position: relative;
    display: flex;
    flex: 999 1 240px;
    align-items: center;
    min-width: 0;
    gap: 8px;
    padding-right: 8px;
}

.pfrw-track {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-width: 0;
    gap: 32px;
    padding: 2px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.pfrw-track::-webkit-scrollbar {
    height: 0;
}

.pfrw-track:focus-visible {
    outline: 2px solid var(--pfrw-brand);
    outline-offset: 2px;
}

.pfrw-card {
    flex: 0 0 var(--pfrw-card-w, 300px);
    max-width: 100%;
    scroll-snap-align: start;
}

.pfrw-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--pfrw-tint);
}

.pfrw-card-head,
.pfrw-card-title,
.pfrw-card-text,
.pfrw-card-foot {
    position: relative;
}

.pfrw-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pfrw-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #191919;
}

/* Clamped the way the TrustBox clamps its own review text: cards stretch to the tallest
   one in the row, so a single long review otherwise leaves every short review sitting in
   a pile of empty space. */
.pfrw-card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    text-wrap: pretty;
}

.pfrw-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.pfrw-card-meta {
    font-size: 13px;
    color: #6b7280;
}

.pfrw-card-logo {
    display: block;
    flex: none;
    height: auto;
    opacity: .9;
}

.pfrw-idealo .pfrw-card-logo {
    width: 52px;
}

.pfrw-ceneo .pfrw-card-logo {
    width: 50px;
}

.pfrw-verified {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #1a7a48;
}

.pfrw-verified-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a9c58;
    color: #ffffff;
    font-size: 10px;
}

.pfrw-verified-label {
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Arrows ---------- */

.pfrw-nav-wrap {
    display: flex;
    flex: none;
    border-radius: 50%;
    cursor: pointer;
}

/* No hover fill on a disabled arrow - the TrustBox leaves its own disabled arrow
   completely transparent, and the cursor already says the control is dead. */
.pfrw-nav-wrap.is-off {
    cursor: not-allowed;
}

.pfrw-nav {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    /* Matches the TrustBox arrow's rendered colour (its markup says #8C8C8C but its own
       CSS paints #191919), so the two carousels' arrows read as the same control. */
    color: #191919;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pfrw-nav svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pfrw-nav:hover {
    background: #eef0ff;
    color: #4d61fc;
}

/* :focus rather than :focus-visible - Chrome suppresses focus-visible for mouse clicks
   on buttons, and the ring is wanted on click too. */
.pfrw-nav:focus {
    outline: 2px solid #191919;
    outline-offset: 2px;
}

/* aria-disabled rather than the disabled attribute: a truly disabled button swallows
   pointer events on its wrapper too, so the "not-allowed" hover feedback never fires. */
.pfrw-nav[aria-disabled="true"] {
    color: #d1d1d1;
    pointer-events: none;
}

/* ---------- Dots (stacked layout only) ---------- */

.pfrw-dots {
    display: none;
}

.pfrw-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(25, 25, 25, .15);
    cursor: pointer;
    transition: background .15s;
}

.pfrw-dot.is-active {
    background: var(--pfrw-brand);
}

/* ---------- Stacked layout (widget < 520px): one tinted panel ----------
   520px is where the TrustBox itself switches (measured: side-by-side down to 520,
   full-width stacked at 519), so the two widgets change shape at the same moment
   instead of one going mobile a whole breakpoint before the other. */

@container (max-width: 519px) {
    .pfrw-panel {
        display: block;
        overflow: hidden;
        padding: 22px 16px 16px;
        border-radius: 20px;
        background: var(--pfrw-tint);
    }

    .pfrw-blob-panel-a,
    .pfrw-blob-panel-b {
        display: block;
    }

    .pfrw-blob-panel-a {
        top: -50px;
        left: -40px;
        width: 150px;
        height: 150px;
    }

    .pfrw-blob-panel-b {
        right: -50px;
        bottom: -70px;
        width: 170px;
        height: 170px;
    }

    .pfrw-blob-summary-a,
    .pfrw-blob-summary-b,
    .pfrw-blob-card {
        display: none;
    }

    .pfrw-summary {
        flex: none;
        margin-inline: 0;
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .pfrw-summary-inner {
        height: auto;
        gap: 8px;
    }

    .pfrw-idealo .pfrw-logo {
        width: 168px;
    }

    .pfrw-ceneo .pfrw-logo {
        width: 150px;
    }

    .pfrw-score-row {
        gap: 12px;
        margin-top: 0;
    }

    .pfrw-score {
        font-size: 30px;
    }

    .pfrw-count {
        font-size: 16px;
    }

    .pfrw-stars-summary {
        gap: 3px;
        font-size: 30px;
    }

    .pfrw-stars-card {
        font-size: 19px;
    }

    .pfrw-track-area {
        flex: none;
        gap: 8px;
        /* The stacked panel supplies its own symmetric 16px padding - the wide layout's
           trailing 8px (there to match Trustpilot's right edge) would skew it. */
        padding-right: 0;
        /* ...but the carousel row itself reaches 8px past that, so the arrows land on
           the same inset as the TrustBox's own stacked arrows. The summary above keeps
           the full 16px. */
        margin-inline: -8px;
        margin-top: 16px;
    }

    .pfrw-track {
        padding: 0;
    }

    /* The panel already carries the brand, so cards drop the tint, the blob and the
       corner logo and read as plain white content blocks. */
    .pfrw-card-inner {
        background: #ffffff;
    }

    .pfrw-ceneo .pfrw-card-inner {
        gap: 8px;
    }

    .pfrw-card-logo {
        display: none;
    }

    .pfrw-idealo .pfrw-card-title {
        font-size: 16px;
        color: #0a2d6e;
    }

    .pfrw-card-text {
        font-size: 15px;
    }

    .pfrw-card-foot {
        margin-top: 8px;
        padding-top: 0;
    }

    .pfrw-card-meta {
        color: #8a8a8a;
    }

    /* Ceneo's stacked card puts the name/date directly under the stars, above the
       review text (idealo keeps it last in both layouts). */
    .pfrw-ceneo .pfrw-card-foot {
        order: 1;
        margin-top: 0;
    }

    .pfrw-ceneo .pfrw-card-text {
        order: 2;
    }

    .pfrw-dots {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pfrw-track {
        scroll-behavior: auto;
    }
}