/* ==================================================================
   Testimonials (Reviews) Slider - /library/testimonials_slider/
   Used by testimonials_slider.php. To customise for one skin, copy
   this file to skins/<skindir>/styles/testimonials_slider.css and it
   will be loaded instead.

   Based on the supplied Google Reviews design. Changes from that
   design:
   - removed the page-wide body / .section rules
   - removed duplicated rules
   - the hard-coded Google logo is now each testimonial's source
     icon (an <img> inside .logo)
   - .readmore is hidden unless the text is actually cut off
     (.is-truncated is added by the slider script) or the full
     testimonial has more to read than the card's brief (.has-more)
   - .no-nav removes the side padding kept for the arrows
   ================================================================== */

/* The design relies on border-box sizing (Bootstrap sets this globally).
   Set it here too so the slider's 64px side padding never pushes it wider
   than its container on sites/skins that don't. */
.googleReviews,
.googleReviews *,
.googleReviews *:before,
.googleReviews *:after,
.reviewPopup,
.reviewPopup *,
.reviewPopup *:before,
.reviewPopup *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.googleReviews {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0d121c;
    margin: 20px 0;
}

/* Optional full-width background band (set in the slider admin).
   With a skin class (e.g. .bluebg) that class supplies the colour and
   spacing. With only a colour, this gives it some breathing room.
   Override either in the skin's CSS. */
.testimonialsBand {
    width: 100%;
}

.testimonialsBand.has-bg-colour {
    padding: 30px 0;
}

.googleReviews .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.googleReviews .header .left .title {
    font-size: 25px;
    font-weight: bold;
    margin: 0;
}

.googleReviews .header .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    padding-left: 20px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.googleReviews .header .right .reviewBtn {
    padding: 8px 20px 6px;
    background: #0052ff;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.googleReviews .header .right .reviewBtn:hover {
    background-color: #305dff;
    color: #fff;
}

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

.ratingStars {
    position: relative;
    width: 100px;
    aspect-ratio: 130/26;
    --star: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAyNiAyNiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iLTI3MC45IiB5MT0iNDEzLjcxIiB4Mj0iLTI2OS45IiB5Mj0iNDEzLjcxIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDU4NzYuNzcgODU5MS41Mykgc2NhbGUoMjEuNjkgLTIwLjc0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZiYmIwMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2UzZThlZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMi43OCwxOS43NmMuMTMtLjA4LjMtLjA4LjQzLDBsNi4wMSwzLjY0Yy4zMS4xOS43LS4wOS42Mi0uNDVsLTEuNi02Ljg4Yy0uMDMtLjE1LjAyLS4zMS4xMy0uNDFsNS4zMi00LjYzYy4yOC0uMjQuMTMtLjctLjI0LS43M2wtNy0uNmMtLjE1LS4wMS0uMjktLjExLS4zNS0uMjVsLTIuNzMtNi40OGMtLjE0LS4zNC0uNjItLjM0LS43NywwbC0yLjczLDYuNDhjLS4wNi4xNC0uMTkuMjQtLjM1LjI1bC03LC42Yy0uMzcuMDMtLjUxLjQ5LS4yNC43M2w1LjMyLDQuNjNjLjEyLjEuMTcuMjYuMTMuNDFsLTEuNiw2Ljg4Yy0uMDguMzYuMzEuNjQuNjIuNDVsNi4wMS0zLjY0WiIgZmlsbD0idXJsKCNiKSIvPjwvc3ZnPg==");
    z-index: 1;
}

.ratingStars:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--star) repeat-x;
    background-size: auto 100%;
    -webkit-filter: grayscale();
            filter: grayscale();
    z-index: -1;
}

.ratingStars span {
    display: block;
    height: 100%;
    background: var(--star) repeat-x;
    background-size: auto 100%;
}

/* ---------- Slides ---------- */

.googleReviews .slides {
    position: relative;
    margin: 0;
    padding: 0 64px;
    list-style: none;
}

.googleReviews.no-nav .slides {
    padding-left: 0;
    padding-right: 0;
}

.googleReviews .slides .owl-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
}

.googleReviews .slides .owl-stage-outer {
    padding-left: 1px;
    padding-right: 1px;
}

.googleReviews .slides .owl-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.googleReviews .slides li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 17px;
    list-style: none;
    border: 1px solid #cdd5df;
    border-radius: 13px;
    background: #fff;
    font-size: 0.875em; /* 14px */
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    cursor: pointer;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.googleReviews .slides li:focus-visible {
    outline: 2px solid #0052ff;
    outline-offset: 2px;
}

.googleReviews .slides li .top,
.reviewPopup .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
}

.googleReviews .slides li .top .meta,
.reviewPopup .top .meta {
    min-width: 0;
}

.googleReviews .slides li .top .meta .name,
.reviewPopup .top .meta .name {
    margin: 0 0 2px;
    font-weight: bold;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

.googleReviews .slides li .top .meta .date,
.reviewPopup .top .meta .date {
    margin: 0;
    color: rgb(105, 117, 134);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

/* Source icon (uploaded in Testimonials Sources) */
.googleReviews .slides li .top .logo,
.reviewPopup .top .logo {
    margin-left: auto;
    margin-top: 5px;
    width: 25px;
    height: 25px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.googleReviews .slides li .top .logo img,
.reviewPopup .top .logo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.googleReviews .slides li .rating .ratingStars,
.reviewPopup .rating .ratingStars {
    width: 125px;
    margin-bottom: 10px;
}

.googleReviews .slides li .bottom {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.googleReviews .slides li .bottom .comment {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.googleReviews .slides li .bottom .comment .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.googleReviews .slides li .bottom .comment .text>:first-child {
    margin-top: 0;
}

.googleReviews .slides li .bottom .comment .text>:last-child {
    margin-bottom: 0;
}

.googleReviews .slides li .bottom .readmore {
    display: none;
    margin: 5px 0 0;
    font-weight: bold;
}

.googleReviews .slides li .bottom.is-truncated .readmore,
.googleReviews .slides li .bottom.has-more .readmore {
    display: block;
}

/* Full testimonial for the popup - never shown on the card itself */
.googleReviews .fulltext {
    display: none !important;
}

/* ---------- Carousel controls ---------- */

.googleReviews .slides .owl-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    margin-top: -30px;
    pointer-events: none;
}

.googleReviews .slides .owl-nav.disabled {
    display: none;
}

.googleReviews .slides .owl-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 10px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.googleReviews .slides .owl-dots.disabled {
    display: none;
}

.googleReviews .slides .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    background: #cdd5df;
    outline: none;
    margin: 0 2px 4px;
    border-radius: 100%;
}

.googleReviews .slides .owl-dots .owl-dot.active {
    background-color: #697586;
}

.googleReviews .slides .owl-nav button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIiB2aWV3Qm94PSIwIDAgODAwIDgwMCI+PHBhdGggZD0iTTI2NC42NSw4MS44Yy0xOS41MiwxOS41Mi0xOS41Miw1MS4xOCwwLDcwLjdsMjQ3LjUsMjQ3LjUtMjQ3LjUsMjQ3LjVjLTE5LjE4LDE5Ljg2LTE4LjYzLDUxLjUyLDEuMjMsNzAuNywxOS4zOCwxOC43MSw1MC4xLDE4LjcxLDY5LjQ3LDBsMjgyLjg1LTI4Mi44NWMxOS41Mi0xOS41MywxOS41Mi01MS4xNywwLTcwLjdMMzM1LjM1LDgxLjhjLTE5LjUzLTE5LjUyLTUxLjE3LTE5LjUyLTcwLjcsMGgwWiIvPjwvc3ZnPg==") no-repeat center;
    pointer-events: auto;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    background-size: 20px;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.googleReviews .slides .owl-nav button.owl-next {
    margin-left: auto;
}

.googleReviews .slides .owl-nav button.owl-prev {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.googleReviews .slides .owl-nav button.disabled {
    opacity: 0.3;
    cursor: default;
}

.googleReviews .slides .owl-nav button span {
    display: none;
}

.googleReviews .slides .owl-nav button:hover {
    background-color: #eee;
}

/* ---------- Full review popup (Fancybox) ---------- */

.fancybox-close-small:after {
    right: 15px;
    top: 15px;
}

.reviewPopup {
    max-width: 900px;
    margin: 15px;
    padding: 20px 30px;
    border-radius: 30px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #0d121c;
}

.reviewPopup .meta {
    font-size: 15px;
    margin-bottom: 10px;
}

.reviewPopup .name {
    margin: 0;
    font-size: 17px;
    font-weight: bold;
}

.reviewPopup .date {
    margin: 0 0 10px;
}

.reviewPopup .top {
    margin-bottom: 0;
}

.reviewPopup .top .logo {
    width: 45px;
    height: 45px;
    margin-top: 10px;
    margin-right: 20px;
}

.reviewPopup .bottom {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

.reviewPopup .text {
    text-align: center;
    font-size: 14px;
}

.reviewPopup .text>:last-child {
    margin-bottom: 0;
}

.reviewPopup .readmore {
    display: none;
}

/* ---------- Extra Small Screens ---------- */

@media only screen and (max-width : 767px) {
    .googleReviews .header {
        margin-bottom: 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .googleReviews .header .left .title {
        font-size: 22px;
    }

    .googleReviews .header .right {
        margin-left: 0;
        padding-left: 0;
        margin-top: 10px;
    }

    .googleReviews .slides {
        padding-left: 0;
        padding-right: 0;
    }

    .googleReviews .slides .owl-nav {
        display: none;
    }

    .fancybox-close-small:after {
        right: 5px;
        top: 5px;
    }

    .reviewPopup {
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 20px;
    }

    .reviewPopup .top .logo {
        width: 30px;
        height: 30px;
        margin-top: 20px;
        margin-right: 0;
    }
}