/* ==========================================================================
   XL Reviews Slider - Frontend
   All selectors are scoped under .xlrs-wrapper to beat theme rules on
   equal-specificity matches. !important is used only on properties that
   themes commonly override (button look, typography, headings, paragraphs).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap');

.xlrs-wrapper {
    position: relative;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 24px 8px 60px !important;
    box-sizing: border-box;
    font-family: inherit;
    color: #4b5563 !important;
    overflow: hidden !important;
}

.real-result{
    width: 95%;
}

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

/* Hard reset for every <button> the theme might restyle. */
.xlrs-wrapper button.xlrs-arrow,
.xlrs-wrapper button.xlrs-play,
.xlrs-wrapper button.xlrs-readmore,
.xlrs-wrapper button.xlrs-modal-close {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    font-family: inherit !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    background-image: none !important;
    outline: none;
    cursor: pointer;
}

.xlrs-wrapper button.xlrs-arrow:focus,
.xlrs-wrapper button.xlrs-play:focus,
.xlrs-wrapper button.xlrs-readmore:focus,
.xlrs-wrapper button.xlrs-arrow:hover,
.xlrs-wrapper button.xlrs-play:hover,
.xlrs-wrapper button.xlrs-readmore:hover,
.xlrs-wrapper button.xlrs-arrow:active,
.xlrs-wrapper button.xlrs-play:active,
.xlrs-wrapper button.xlrs-readmore:active {
    outline: none;
    text-decoration: none !important;
    background-image: none !important;
}

/* === Track / Slides === */
.xlrs-wrapper .xlrs-viewport {
    overflow: hidden;
}

.xlrs-wrapper .xlrs-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .6s ease;
    will-change: transform;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.xlrs-wrapper .xlrs-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 12px !important;
    margin: 0 !important;
    list-style: none;
}

.xlrs-wrapper[data-per-view="2"] .xlrs-slide { flex-basis: 50%; }
.xlrs-wrapper[data-per-view="3"] .xlrs-slide { flex-basis: 33.3333%; }
.xlrs-wrapper[data-per-view="1"] .xlrs-slide { flex-basis: 100%; }

/* Tablet: 2 cards per view up to 1024px */
@media (max-width: 1024px) {
    .xlrs-wrapper[data-per-view="3"] .xlrs-slide { flex-basis: 50%; }

    /* Narrower 2-up cards on tablet (e.g. iPad Air 820px): let the footer wrap
       so a long reviewer name can't overlap the fixed-width star rating — the
       stars drop to their own line when the name doesn't leave room. */
    .xlrs-wrapper .xlrs-card-foot {
        flex-wrap: wrap;
        gap: 10px;
    }
    .xlrs-wrapper .xlrs-card-person {
        flex: 1 1 auto;
        min-width: 0;
    }
    .xlrs-wrapper h4.xlrs-card-name {
        overflow-wrap: anywhere;
    }
    .xlrs-wrapper .xlrs-card-rating {
        flex: 0 0 auto;
    }
}

/* Mobile: 1 full-width card per view */
@media (max-width: 600px) {
    .xlrs-wrapper[data-per-view] .xlrs-slide { flex-basis: 100%; }

    .xlrs-wrapper {
        padding: 16px 10px 36px !important;
    }

    .xlrs-wrapper .xlrs-slide {
        padding: 8px !important;
    }

    .xlrs-wrapper .xlrs-card {
        padding: 18px 16px 16px !important;
    }

    .xlrs-wrapper .xlrs-card-head {
        gap: 10px;
        margin: 0 0 12px !important;
    }

    .xlrs-wrapper .xlrs-card-logo img {
        max-height: 34px !important;
        max-width: 130px !important;
    }

    .xlrs-wrapper .xlrs-card-foot {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 0 0 !important;
    }

    .xlrs-wrapper .xlrs-card-person {
        flex: 1 1 auto;
        min-width: 0;
    }

    .xlrs-wrapper .xlrs-card-rating {
        flex: 0 0 auto;
        gap: 3px;
    }

    .xlrs-wrapper .xlrs-controls {
        gap: 20px;
        margin: 16px 0 0 !important;
    }

    .xlrs-wrapper button.xlrs-arrow {
        font-size: 18px !important;
        padding: 4px 8px !important;
    }

    .xlrs-wrapper .xlrs-arrow-text {
        font-size: 18px !important;
    }
}

/* Small mobile: further tighten for 360–480px screens */
@media (max-width: 420px) {
    .xlrs-wrapper {
        padding: 12px 6px 28px !important;
    }

    .xlrs-wrapper .xlrs-slide {
        padding: 6px !important;
    }

    .xlrs-wrapper .xlrs-card {
        padding: 14px 12px 14px !important;
        border-radius: 16px !important;
    }

    .xlrs-wrapper .xlrs-card-head {
        flex-wrap: wrap;
        gap: 8px;
        min-height: unset;
    }

    .xlrs-wrapper button.xlrs-play {
        padding: 6px 12px 6px 8px !important;
        font-size: 13px !important;
    }

    .xlrs-wrapper h4.xlrs-card-name {
        font-size: 16px !important;
        line-height: 18px !important;
    }

    .xlrs-wrapper p.xlrs-card-designation {
        font-size: 13px !important;
    }

    .xlrs-wrapper .xlrs-card-rating .xlrs-star {
        width: 18px !important;
        height: 18px !important;
    }

    .xlrs-wrapper .xlrs-card-rating .xlrs-star svg {
        width: 18px !important;
        height: 18px !important;
    }

    .xlrs-wrapper .xlrs-card-foot {
        gap: 8px;
    }

    .xlrs-wrapper button.xlrs-arrow {
        font-size: 16px !important;
        padding: 4px 6px !important;
        gap: 6px;
    }

    .xlrs-wrapper .xlrs-arrow-text {
        font-size: 16px !important;
    }

    .xlrs-wrapper .xlrs-controls {
        gap: 14px;
    }
}

/* === Card === */
.xlrs-wrapper .xlrs-card {
    position: relative;
    background: #fff !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 24px 24px 22px !important;
    margin: 0 !important;
    box-shadow: 0 6px 18px rgba(17, 24, 39, .08) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.xlrs-wrapper .xlrs-card-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px !important;
    padding: 0 !important;
    /* Matches the logo's max-height below, so a card with no logo keeps the same
       head height as one with a logo. */
    min-height: 42px;
    background: transparent !important;
    border: 0 !important;
}

.xlrs-wrapper .xlrs-card-logo {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

.xlrs-wrapper .xlrs-card-logo img {
    max-height: 42px !important;
    max-width: 170px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.xlrs-wrapper .xlrs-card-body {
    color: #778AA9 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-family: 'Google Sans', 'DM Sans', sans-serif !important;
    font-style: normal !important;
    text-align: left !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Column flex so the "Read More" button sits directly under the text
       instead of at the bottom of the (stretched) body box. No `align-items`
       here on purpose — the text must keep stretching to full width; only the
       button opts out with `align-self`. */
    display: flex !important;
    flex-direction: column;
}

/* === Long reviews: 4-line clamp + Read More ===
   One long review used to set the height of every card in the row. The review
   is clamped to four lines with an ellipsis and a toggle to open it.
   `.is-clamped` is added by frontend.js and never from here, so with JS
   disabled the full review is shown rather than truncated with no way to
   expand it. */
.xlrs-wrapper .xlrs-card-text {
    min-width: 0;
}

.xlrs-wrapper .xlrs-card-text.is-clamped {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden !important;
}

.xlrs-wrapper button.xlrs-readmore {
    align-self: flex-start;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #35B6FF !important;
    font-family: 'Google Sans', 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: color .15s ease;
}

.xlrs-wrapper button.xlrs-readmore:hover,
.xlrs-wrapper button.xlrs-readmore:focus-visible {
    color: #1E93D8 !important;
    background: transparent !important;
    text-decoration: underline !important;
}

.xlrs-wrapper button.xlrs-readmore[hidden] {
    display: none !important;
}

.xlrs-wrapper .xlrs-card-body p {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #778AA9 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-family: 'Google Sans', 'DM Sans', sans-serif !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

.xlrs-wrapper .xlrs-card-body p:last-child {
    margin-bottom: 0 !important;
}

.xlrs-wrapper .xlrs-card-foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.xlrs-wrapper .xlrs-card-person {
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    flex: 1 1 auto;
    min-width: 0;
    border-left: 2px solid #35B6FF !important;
}

.xlrs-wrapper h4.xlrs-card-name {
    margin: 0 0 2px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #191919 !important;
    line-height: 20px !important;
    font-family: 'Syne', sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
}

.xlrs-wrapper p.xlrs-card-designation {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #778AA9 !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    font-family: 'Google Sans', 'DM Sans', sans-serif !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.xlrs-wrapper .xlrs-card-rating {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.xlrs-wrapper .xlrs-card-rating .xlrs-star {
    display: inline-flex !important;
    align-items: center;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
}

.xlrs-wrapper .xlrs-card-rating .xlrs-star svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

.xlrs-wrapper .xlrs-card-rating .xlrs-star svg path {
    fill: #D1D5DB !important;
}

.xlrs-wrapper .xlrs-card-rating .xlrs-star.is-on svg path {
    fill: #FFC300 !important;
}

/* === Play button (glass pill) === */
.xlrs-wrapper button.xlrs-play {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px 8px 10px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    background: linear-gradient(
        135deg,
        rgba(207, 234, 255, .55) 0%,
        rgba(95, 192, 255, .35) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    color: #0a0a0a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(255, 255, 255, .15),
        0 4px 14px rgba(31, 110, 180, .18) !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.xlrs-wrapper button.xlrs-play .xlrs-play-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0;
    fill: none;
    transform-origin: center;
    animation: xlrs-play-pulse 1.6s ease-in-out infinite;
}

@keyframes xlrs-play-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.xlrs-wrapper button.xlrs-play:hover .xlrs-play-icon,
.xlrs-wrapper button.xlrs-play:focus .xlrs-play-icon {
    animation-duration: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
    .xlrs-wrapper button.xlrs-play .xlrs-play-icon {
        animation: none;
    }
}

.xlrs-wrapper button.xlrs-play .xlrs-play-icon circle {
    fill: none !important;
    stroke: #0a0a0a !important;
    stroke-width: 1.8 !important;
}

.xlrs-wrapper button.xlrs-play .xlrs-play-icon path {
    fill: #0a0a0a !important;
}

.xlrs-wrapper button.xlrs-play .xlrs-play-text {
    color: #0a0a0a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .1px;
    white-space: nowrap;
}

.xlrs-wrapper button.xlrs-play:hover,
.xlrs-wrapper button.xlrs-play:focus {
    transform: translateY(-1px);
    background: linear-gradient(
        135deg,
        rgba(207, 234, 255, .7) 0%,
        rgba(95, 192, 255, .5) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -1px 0 rgba(255, 255, 255, .2),
        0 8px 22px rgba(31, 110, 180, .28) !important;
}

.xlrs-wrapper button.xlrs-play:active {
    transform: translateY(0);
}

/* === Controls === */
.xlrs-wrapper .xlrs-controls {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.xlrs-wrapper button.xlrs-arrow {
    background: transparent !important;
    color: #778AA9 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: 'Syne', sans-serif !important;
    line-height: 100% !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    transition: color .15s ease !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

.xlrs-wrapper button.xlrs-arrow:hover,
.xlrs-wrapper button.xlrs-arrow:focus-visible {
    color: #191919 !important;
    background: transparent !important;
}

.xlrs-wrapper button.xlrs-arrow:disabled {
    color: #c3c8d0 !important;
    cursor: not-allowed;
    background: transparent !important;
}

.xlrs-wrapper .xlrs-arrow-icon {
    display: inline-flex !important;
    align-items: center;
    line-height: 1 !important;
}

.xlrs-wrapper .xlrs-arrow-icon--flip {
    transform: scaleX(-1) !important;
}

.xlrs-wrapper .xlrs-arrow-text {
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: 'Syne', sans-serif !important;
    line-height: 100% !important;
}

/* === Modal ===
   The modal is rendered inside .xlrs-wrapper but uses position: fixed,
   so it floats at the viewport. Theme rules under .xlrs-wrapper * still
   apply, so we keep the same scoping + !important.
*/
.xlrs-wrapper .xlrs-modal {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    inset: 0;
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px !important;
    margin: 0 !important;
}

.xlrs-wrapper .xlrs-modal.is-open {
    display: flex !important;
}

.xlrs-wrapper .xlrs-modal-backdrop {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    inset: 0;
    background: rgba(15, 23, 42, .8) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.xlrs-wrapper .xlrs-modal-dialog {
    position: relative !important;
    width: 100% !important;
    max-width: 880px !important;
    background: #000 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.xlrs-wrapper .xlrs-modal-video {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xlrs-wrapper .xlrs-modal-video video,
.xlrs-wrapper .xlrs-modal-video iframe {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.xlrs-wrapper button.xlrs-modal-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .55) !important;
    color: #fff !important;
    font-size: 26px !important;
    line-height: 1 !important;
    z-index: 2 !important;
    transition: background .15s ease;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.xlrs-wrapper button.xlrs-modal-close:hover {
    background: rgba(0, 0, 0, .85) !important;
    color: #fff !important;
}

body.xlrs-modal-open {
    overflow: hidden !important;
}

/* ==========================================================================
   Scroll Reveal — "Rise & Unfold"
   A slow, premium entrance: each card tilts up from its base out of a soft
   depth (3D rotateX) while lifting + fading in, cascading card-by-card via a
   per-card stagger (--xlrs-i). JS adds .xlrs-reveal (marks JS active, hides
   the cards) and then .xlrs-in once the slider scrolls into view.

   NOTE: the animation runs on .xlrs-card ONLY — never on .xlrs-track or
   .xlrs-slide, whose transforms drive the carousel itself. Animating the card
   keeps the reveal fully independent of the slide mechanics.
   ========================================================================== */
.xlrs-wrapper.xlrs-reveal .xlrs-card {
    opacity: 0;
    transform: perspective(1400px) translateY(46px) rotateX(-13deg) scale(0.965);
    transform-origin: 50% 100%;
    /* Slow, luxurious easing (easeOutExpo-ish) + per-card stagger. */
    transition:
        opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 1.25s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--xlrs-i, 0) * 0.13s);
    /* Shadow starts flatter so it "settles" onto the surface as the card lands. */
    box-shadow: 0 2px 6px rgba(17, 24, 39, .04) !important;
}

.xlrs-wrapper.xlrs-reveal.xlrs-in .xlrs-card {
    opacity: 1;
    transform: perspective(1400px) translateY(0) rotateX(0deg) scale(1);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .08) !important;
}

/* Respect users who prefer less motion — show cards immediately, no transform. */
@media (prefers-reduced-motion: reduce) {
    .xlrs-wrapper.xlrs-reveal .xlrs-card,
    .xlrs-wrapper.xlrs-reveal.xlrs-in .xlrs-card {
        opacity: 1;
        transform: none;
        transition: none;
        box-shadow: 0 6px 18px rgba(17, 24, 39, .08) !important;
    }
}