/* Ronaro Review Stories — v1.2.23
   Instagram-story-inspired interaction without third-party branding. */

.ronaro-review-stories {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 2px !important;
}

.ronaro-review-stories__heading {
    margin: 0 0 13px !important;
    color: #17212b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

.ronaro-review-stories__rail {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 2px 10px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ronaro-review-stories__rail::-webkit-scrollbar {
    display: none !important;
}

button.ronaro-review-story {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    flex: 0 0 92px !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #454f4a !important;
    font-family: inherit !important;
    text-align: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
    outline: none !important;
    scroll-snap-align: start;
}

button.ronaro-review-story::before,
button.ronaro-review-story::after {
    display: none !important;
    content: none !important;
}

.ronaro-review-story__ring {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    padding: 3px !important;
    border-radius: 50% !important;
    background:
        conic-gradient(
            #0b7d59 0deg 275deg,
            #43b989 275deg 330deg,
            #0b7d59 330deg 360deg
        ) !important;
    box-shadow: 0 2px 9px rgba(11, 125, 89, .12) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

button.ronaro-review-story:hover .ronaro-review-story__ring {
    transform: scale(1.035) !important;
    box-shadow: 0 5px 14px rgba(11, 125, 89, .18) !important;
}

.ronaro-review-story__image {
    display: block !important;
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background: #f3f6f4 !important;
}

.ronaro-review-story__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    box-shadow: none !important;
}

.ronaro-review-story__label {
    display: -webkit-box !important;
    width: 88px !important;
    overflow: hidden !important;
    margin-top: 7px !important;
    color: #4f5954 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* =========================================================
   Full-screen story viewer
   ========================================================= */

.ronaro-story-viewer {
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 18px !important;
    background: rgba(8, 10, 9, .93) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.ronaro-story-viewer.is-open {
    display: flex !important;
}

.ronaro-story-viewer__card {
    position: relative !important;
    display: block !important;
    width: min(420px, calc(100vw - 36px)) !important;
    height: min(746px, calc(100vh - 36px)) !important;
    aspect-ratio: 9 / 16 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #111 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.42) !important;
}

.ronaro-story-viewer__media {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #111 !important;
}

.ronaro-story-viewer__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}

.ronaro-story-viewer__shade-top,
.ronaro-story-viewer__shade-bottom {
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: 0 !important;
    pointer-events: none !important;
}

.ronaro-story-viewer__shade-top {
    top: 0 !important;
    height: 28% !important;
    background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0)) !important;
}

.ronaro-story-viewer__shade-bottom {
    bottom: 0 !important;
    height: 46% !important;
    background: linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,0)) !important;
}

.ronaro-story-viewer__progress {
    position: absolute !important;
    z-index: 5 !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    gap: 3px !important;
    height: 3px !important;
}

.ronaro-story-viewer__progress-segment {
    position: relative !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.35) !important;
}

.ronaro-story-viewer__progress-segment::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: right center !important;
    background: #fff !important;
}

.ronaro-story-viewer__progress-segment.is-done::after {
    transform: scaleX(1) !important;
}

.ronaro-story-viewer__progress-segment.is-active::after {
    animation: ronaro-story-progress 7s linear forwards !important;
}

@keyframes ronaro-story-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.ronaro-story-viewer__header {
    position: absolute !important;
    z-index: 5 !important;
    top: 22px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #fff !important;
}

.ronaro-story-viewer__avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,.95) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.ronaro-story-viewer__header-meta {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.ronaro-story-viewer__author {
    display: block !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ronaro-story-viewer__stars {
    direction: ltr !important;
    display: block !important;
    margin: 2px 0 0 !important;
    color: #ffd65a !important;
    font-size: 12px !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
}

.ronaro-story-viewer__info {
    position: absolute !important;
    z-index: 5 !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-align: right !important;
    background: transparent !important;
}

.ronaro-story-viewer__text {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 0 12px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.35) !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.ronaro-story-viewer__product {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.ronaro-story-viewer__close {
    position: absolute !important;
    z-index: 8 !important;
    top: 20px !important;
    left: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.28) !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.ronaro-story-viewer__nav {
    position: absolute !important;
    z-index: 6 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 34% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.ronaro-story-viewer__nav--prev {
    right: 0 !important;
}

.ronaro-story-viewer__nav--next {
    left: 0 !important;
}

.ronaro-story-viewer__edge-prev,
.ronaro-story-viewer__edge-next {
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-top: -21px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.11) !important;
    color: rgba(255,255,255,.9) !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    pointer-events: none !important;
    backdrop-filter: blur(4px) !important;
}

.ronaro-story-viewer__edge-prev {
    right: 10px !important;
}

.ronaro-story-viewer__edge-next {
    left: 10px !important;
}

body.ronaro-story-open {
    overflow: hidden !important;
}

/* Admin-only empty state */
.ronaro-review-stories-empty {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    border: 1px dashed #bcd9cc !important;
    border-radius: 11px !important;
    background: #f5faf7 !important;
    color: #4d5a54 !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
}

.ronaro-review-stories-empty strong {
    color: #087a55 !important;
    font-size: 12px !important;
}

@media (max-width: 767px) {
    .ronaro-review-stories__rail {
        gap: 11px !important;
    }

    button.ronaro-review-story {
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }

    .ronaro-review-story__ring {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
        padding: 2px !important;
    }

    .ronaro-review-story__image {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        border-width: 2px !important;
    }

    .ronaro-review-story__label {
        width: 74px !important;
        margin-top: 5px !important;
        font-size: 9px !important;
    }

    .ronaro-story-viewer {
        padding: 12px 14px !important;
        background: rgba(8, 10, 9, .95) !important;
    }

    .ronaro-story-viewer__card {
        width: calc(100vw - 28px) !important;
        height: calc(100vh - 24px) !important;
        max-width: 430px !important;
        max-height: calc(100vh - 24px) !important;
        aspect-ratio: auto !important;
        border-radius: 18px !important;
        box-shadow: 0 18px 55px rgba(0,0,0,.36) !important;
    }

    .ronaro-story-viewer__info {
        bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    .ronaro-story-viewer__progress {
        top: max(8px, env(safe-area-inset-top)) !important;
    }

    .ronaro-story-viewer__header,
    .ronaro-story-viewer__close {
        top: calc(max(8px, env(safe-area-inset-top)) + 10px) !important;
    }

    .ronaro-story-viewer__edge-prev,
    .ronaro-story-viewer__edge-next {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ronaro-story-viewer__progress-segment.is-active::after {
        animation: none !important;
        transform: scaleX(1) !important;
    }
}


/* =========================================================
   v1.2.25 — fix RTL arrows + fit story inside mobile viewport
   ========================================================= */

/* Right side = previous, so chevron points right.
   Left side = next, so chevron points left. */
.ronaro-story-viewer__edge-prev {
    font-size: 0 !important;
}
.ronaro-story-viewer__edge-prev::before {
    content: "›" !important;
    display: block !important;
    font-size: 26px !important;
    line-height: 1 !important;
}

.ronaro-story-viewer__edge-next {
    font-size: 0 !important;
}
.ronaro-story-viewer__edge-next::before {
    content: "‹" !important;
    display: block !important;
    font-size: 26px !important;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    .ronaro-story-viewer {
        box-sizing: border-box !important;
        padding:
            max(10px, env(safe-area-inset-top))
            12px
            max(10px, env(safe-area-inset-bottom)) !important;
    }

    /*
     * Keep the 9:16 story frame but size it from BOTH viewport width and
     * viewport height. This prevents long phones/browser UI from making the
     * story taller than the visible screen.
     */
    .ronaro-story-viewer__card {
        width: min(
            calc(100vw - 24px),
            calc((100dvh - 28px) * 0.5625),
            390px
        ) !important;
        height: auto !important;
        aspect-ratio: 9 / 16 !important;
        max-width: 390px !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 18px !important;
    }

    @supports not (height: 100dvh) {
        .ronaro-story-viewer__card {
            width: min(
                calc(100vw - 24px),
                calc((100vh - 28px) * 0.5625),
                390px
            ) !important;
            max-height: calc(100vh - 28px) !important;
        }
    }

    /* On very short screens, tighten overlays slightly. */
    @media (max-height: 700px) {
        .ronaro-story-viewer__header {
            top: 18px !important;
        }

        .ronaro-story-viewer__info {
            bottom: 12px !important;
        }

        .ronaro-story-viewer__text {
            margin-bottom: 8px !important;
            font-size: 11px !important;
            line-height: 1.75 !important;
            -webkit-line-clamp: 4 !important;
        }

        .ronaro-story-viewer__product {
            min-height: 38px !important;
            font-size: 10px !important;
        }
    }
}


/* =========================================================
   v1.2.26 — definitive story navigation direction fix
   Right side = NEXT  → 
   Left side  = PREV  ←
   ========================================================= */

/* Click zones */
.ronaro-story-viewer__nav--next {
    right: 0 !important;
    left: auto !important;
}

.ronaro-story-viewer__nav--prev {
    left: 0 !important;
    right: auto !important;
}

/* Visible arrows */
.ronaro-story-viewer__edge-next {
    right: 10px !important;
    left: auto !important;
    font-size: 0 !important;
}

.ronaro-story-viewer__edge-next::before {
    content: "›" !important;
    display: block !important;
    font-size: 26px !important;
    line-height: 1 !important;
}

.ronaro-story-viewer__edge-prev {
    left: 10px !important;
    right: auto !important;
    font-size: 0 !important;
}

.ronaro-story-viewer__edge-prev::before {
    content: "‹" !important;
    display: block !important;
    font-size: 26px !important;
    line-height: 1 !important;
}


/* =========================================================
   v1.2.27 — hard-fix navigation direction + desktop scrolling
   ========================================================= */

/* Isolate the viewer navigation from site RTL transforms/reordering. */
.ronaro-story-viewer,
.ronaro-story-viewer__card {
    direction: ltr !important;
}

.ronaro-story-viewer__header,
.ronaro-story-viewer__info,
.ronaro-story-viewer__text,
.ronaro-story-viewer__author,
.ronaro-story-viewer__product {
    direction: rtl !important;
}

/* Explicit physical positions. No logical left/right properties. */
.ronaro-story-viewer__nav--prev {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
}

.ronaro-story-viewer__nav--next {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
}

.ronaro-story-viewer__edge-prev {
    left: 10px !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    font-size: 0 !important;
    transform: none !important;
}

.ronaro-story-viewer__edge-prev::before {
    content: "‹" !important;
    display: block !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    transform: none !important;
}

.ronaro-story-viewer__edge-next {
    right: 10px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    font-size: 0 !important;
    transform: none !important;
}

.ronaro-story-viewer__edge-next::before {
    content: "›" !important;
    display: block !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    transform: none !important;
}

/* Horizontal stories carousel controls */
.ronaro-review-stories__viewport {
    position: relative !important;
    width: 100% !important;
}

.ronaro-review-stories__rail {
    cursor: grab !important;
    user-select: none !important;
    scroll-behavior: smooth !important;
    padding-inline: 42px !important;
}

.ronaro-review-stories__rail.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
}

.ronaro-review-stories__scroll {
    position: absolute !important;
    z-index: 10 !important;
    top: 37px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(11,125,89,.16) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #087a55 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: .96 !important;
    transition: opacity .15s ease, transform .15s ease !important;
}

.ronaro-review-stories__scroll:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

.ronaro-review-stories__scroll--prev {
    left: 4px !important;
    right: auto !important;
}

.ronaro-review-stories__scroll--next {
    right: 4px !important;
    left: auto !important;
}

@media (max-width: 767px) {
    .ronaro-review-stories__scroll {
        display: none !important;
    }

    .ronaro-review-stories__rail {
        padding-inline: 2px !important;
        cursor: auto !important;
    }
}


/* =========================================================
   v1.2.28 — SVG arrows + reliable click/drag
   ========================================================= */

/* Completely hide any old text/pseudo arrow from earlier versions. */
.ronaro-story-viewer__edge-prev::before,
.ronaro-story-viewer__edge-next::before {
    content: none !important;
    display: none !important;
}

.ronaro-story-viewer__edge-prev,
.ronaro-story-viewer__edge-next {
    direction: ltr !important;
    font-size: 0 !important;
}

.ronaro-story-viewer__edge-prev svg,
.ronaro-story-viewer__edge-next svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
}

/* Physical navigation — cannot be reversed by RTL. */
.ronaro-story-viewer__nav--prev {
    left: 0 !important;
    right: auto !important;
}
.ronaro-story-viewer__edge-prev {
    left: 10px !important;
    right: auto !important;
}

.ronaro-story-viewer__nav--next {
    right: 0 !important;
    left: auto !important;
}
.ronaro-story-viewer__edge-next {
    right: 10px !important;
    left: auto !important;
}

/* Carousel arrows use SVG too. */
.ronaro-review-stories__scroll {
    direction: ltr !important;
    font-size: 0 !important;
}

.ronaro-review-stories__scroll svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

/*
 * Keep the horizontal scroll mechanics LTR so scrollLeft behaves consistently
 * across Chrome/Firefox/Safari. Story text itself remains RTL.
 */
.ronaro-review-stories__rail {
    direction: ltr !important;
    touch-action: pan-y !important;
}

.ronaro-review-story,
.ronaro-review-story__label {
    direction: rtl !important;
}

.ronaro-review-stories__rail.is-pointer-down {
    cursor: grab !important;
}

.ronaro-review-stories__rail.is-dragging {
    cursor: grabbing !important;
}


/* =========================================================
   v1.2.29 — image loading placeholders / anti-flicker
   ========================================================= */

/* Thumbnail skeleton inside story circles */
.ronaro-review-story__image {
    position: relative !important;
    background:
        linear-gradient(
            90deg,
            #eef2ef 0%,
            #f8faf9 45%,
            #eef2ef 90%
        ) !important;
    background-size: 220% 100% !important;
    animation: ronaro-story-skeleton 1.2s linear infinite !important;
}

.ronaro-review-story__thumb {
    opacity: 0 !important;
    transition: opacity .2s ease !important;
}

.ronaro-review-story__thumb.is-loaded {
    opacity: 1 !important;
}

.ronaro-review-story__thumb.is-error {
    opacity: 0 !important;
}

.ronaro-review-story__image:has(.ronaro-review-story__thumb.is-loaded) {
    animation: none !important;
    background: #f3f6f4 !important;
}

/* Viewer loading layer */
.ronaro-story-viewer__media {
    position: absolute !important;
}

.ronaro-story-viewer__media::before {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    display: block !important;
    background:
        linear-gradient(
            110deg,
            #171b19 8%,
            #222825 18%,
            #171b19 33%
        ) !important;
    background-size: 220% 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease !important;
}

.ronaro-story-viewer__media::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    left: 50% !important;
    width: 34px !important;
    height: 34px !important;
    margin: -17px 0 0 -17px !important;
    border: 3px solid rgba(255,255,255,.28) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ronaro-story-viewer__media.is-loading::before {
    opacity: 1 !important;
    animation: ronaro-story-skeleton 1.2s linear infinite !important;
}

.ronaro-story-viewer__media.is-loading::after {
    opacity: 1 !important;
    animation: ronaro-story-spinner .75s linear infinite !important;
}

.ronaro-story-viewer__media img {
    opacity: 1 !important;
    transition: opacity .18s ease !important;
}

.ronaro-story-viewer__media.is-loading img {
    opacity: 0 !important;
}

/* Hide text while the next story image is still loading,
   so old image/text never visually mix with the next story. */
.ronaro-story-viewer__card.is-story-loading .ronaro-story-viewer__header,
.ronaro-story-viewer__card.is-story-loading .ronaro-story-viewer__info {
    opacity: 0 !important;
}

.ronaro-story-viewer__header,
.ronaro-story-viewer__info {
    transition: opacity .16s ease !important;
}

@keyframes ronaro-story-skeleton {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@keyframes ronaro-story-spinner {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ronaro-review-story__image,
    .ronaro-story-viewer__media::before,
    .ronaro-story-viewer__media::after {
        animation: none !important;
    }
}


/* =========================================================
   v1.2.30 — reliable mouse + touch dragging for story rail
   ========================================================= */

.ronaro-review-stories__rail {
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
    scroll-snap-type: none !important;
}

.ronaro-review-stories__rail.is-dragging {
    scroll-snap-type: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.ronaro-review-stories__rail img {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    pointer-events: none !important;
}

/* Keep the clickable button receiving pointer events. */
.ronaro-review-story {
    touch-action: manipulation !important;
}


/* =========================================================
   v1.2.31 — smoother story rail + rating under name
   ========================================================= */

/* Keep rail movement visually smooth without forcing item-by-item jumps. */
.ronaro-review-stories__rail {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    will-change: scroll-position !important;
}

/* Viewer header: user info on the right, stars directly below name. */
.ronaro-story-viewer__header {
    direction: rtl !important;
    text-align: right !important;
}

.ronaro-story-viewer__header-meta {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    direction: rtl !important;
    text-align: right !important;
}

.ronaro-story-viewer__author {
    width: 100% !important;
    text-align: right !important;
    direction: rtl !important;
}

.ronaro-story-viewer__stars {
    align-self: flex-start !important;
    width: auto !important;
    margin-top: 4px !important;
    direction: ltr !important;
    text-align: right !important;
    font-size: 12px !important;
    line-height: 1 !important;
}


/* =========================================================
   v1.2.33 — native smooth mobile carousel
   ========================================================= */

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .ronaro-review-stories__rail {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        cursor: auto !important;
        will-change: auto !important;
    }

    .ronaro-review-stories__rail.is-pointer-down,
    .ronaro-review-stories__rail.is-dragging {
        cursor: auto !important;
    }

    .ronaro-review-story {
        touch-action: manipulation !important;
    }
}


/* =========================================================
   v1.2.34 — anti-FOUC / reveal only after carousel is ready
   ========================================================= */

.ronaro-review-stories.ronaro-stories-preparing {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ronaro-review-stories.ronaro-stories-ready {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity .16s ease !important;
}

/*
 * Keep a stable minimum height while hidden, so the page doesn't jump
 * when the Story row becomes visible.
 */
.ronaro-review-stories.ronaro-stories-preparing .ronaro-review-stories__viewport {
    min-height: 112px !important;
}

@media (max-width: 767px) {
    .ronaro-review-stories.ronaro-stories-preparing .ronaro-review-stories__viewport {
        min-height: 92px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ronaro-review-stories.ronaro-stories-ready {
        transition: none !important;
    }
}


/* =========================================================
   v1.2.36 — refined story rings
   ========================================================= */

/* Thinner, cleaner outer ring */
.ronaro-review-story__ring {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    padding: 2px !important;
    background:
        conic-gradient(
            #0b7d59 0deg 280deg,
            #48b88c 280deg 330deg,
            #0b7d59 330deg 360deg
        ) !important;
    box-shadow: 0 2px 7px rgba(11, 125, 89, .10) !important;
}

/* Less white gap, slightly larger customer image */
.ronaro-review-story__image {
    width: 75px !important;
    height: 75px !important;
    min-width: 75px !important;
    min-height: 75px !important;
    border-width: 2px !important;
}

/* Slightly tighter visual spacing */
.ronaro-review-story__label {
    margin-top: 6px !important;
}

button.ronaro-review-story:hover .ronaro-review-story__ring {
    transform: scale(1.025) !important;
    box-shadow: 0 5px 12px rgba(11, 125, 89, .15) !important;
}

@media (max-width: 767px) {
    .ronaro-review-story__ring {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
        padding: 1.5px !important;
    }

    .ronaro-review-story__image {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        border-width: 1.5px !important;
    }

    .ronaro-review-story__label {
        margin-top: 5px !important;
    }
}


/* =========================================================
   v1.2.37 — swipe anywhere on Story image on mobile
   ========================================================= */

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .ronaro-story-viewer__card,
    .ronaro-story-viewer__media {
        touch-action: pan-y !important;
    }

    .ronaro-story-viewer__media img {
        -webkit-user-drag: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}