/* ============================================================
   product-detail-review-slider.min.css
   Section Review / Testimoni — Card slider
   Desktop : 1 card penuh, panah kiri-kanan, dots bawah
   Mobile  : 1 card penuh, panah kiri-kanan, dots bawah
   ============================================================ */

/* ---------- Section wrapper ---------- */
.review-slider-section {
    padding   : 40px 0 56px;
    background: #fff;
    overflow  : hidden;
}

/* ---------- Header / Judul ---------- */
.review-slider-header {
    margin-bottom: 28px;
    text-align   : center;
}
.review-slider-title h2,
.review-slider-title h3 {
    font-size  : 22px;
    font-weight: 700;
    color      : #1a1a2e;
    margin     : 0;
}

/* ---------- Slider container ---------- */
.review-slider-container {
    position: relative;
}

/* ---------- Slide item ---------- */
.review-slide-item {
    box-sizing: border-box;
    padding   : 8px 12px;
    outline   : none;
}

/* ---------- Card ---------- */
.review-card {
    background   : #fff;
    border       : 1px solid #ECEFF3;
    border-radius: 16px;
    box-shadow   : 0 2px 20px rgba(0, 0, 0, 0.08);
    padding      : 24px 28px;
    box-sizing   : border-box;
}

/* ---------- Card header: nama + bintang ---------- */
.review-card-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 16px;
    gap            : 12px;
}

.review-card-name {
    font-size  : 16px;
    font-weight: 700;
    color      : #1a1a2e;
    line-height: 1.3;
}

.review-card-stars {
    display    : flex;
    gap        : 3px;
    flex-shrink: 0;
}

/* ---------- Card body: teks kiri + gambar kanan ---------- */
.review-card-body {
    display    : flex;
    gap        : 20px;
    align-items: flex-start;
}

.review-card-content {
    flex     : 1;
    min-width: 0;
    position : relative;   /* anchor untuk .review-read-more yang inline di baris terakhir */
}

.review-card-text {
    font-size  : 14px;
    color      : #444;
    line-height: 1.65;
    /* Line clamp default — tampilkan maks 5 baris */
    display            : -webkit-box;
    -webkit-line-clamp : 5;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}
/* State expanded — tampilkan semua teks */
.review-card-text.--expanded {
    display : block;   /* cabut -webkit-box agar clamp tidak berlaku */
    overflow: visible;
}

.review-card-text p {
    margin: 0;
}

/* "Baca selengkapnya" — inline di ujung baris terakhir teks (lihat mockup).
   Ditempel absolut di kanan-bawah kotak teks yang ter-clamp, dengan gradasi
   putih supaya potongan teks di belakangnya memudar rapi. */
.review-read-more {
    position       : absolute;
    right          : 0;
    bottom         : 0;
    margin         : 0;
    padding        : 0 0 0 34px;
    font-size      : 14px;
    line-height    : 1.65;          /* samakan dgn .review-card-text agar duduk di baris terakhir */
    font-weight    : 600;
    color          : #0057a8;
    background     : linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 26px, #fff 100%);
    border         : none;
    cursor         : pointer;
    text-decoration: none;
    white-space    : nowrap;
    transition     : color 0.2s;
}
/* Ellipsis "…" sebelum label, warna mengikuti teks review */
.review-read-more::before {
    content    : "\2026\00a0";
    color      : #444;
    font-weight: 400;
}
.review-read-more:hover {
    color          : #003f7c;
    text-decoration: underline;
}
.review-read-more:focus-visible {
    outline       : 2px solid #0057a8;
    outline-offset: 2px;
}

/* State terbuka — tombol jadi "Tutup" di bawah teks, tanpa gradasi & ellipsis */
.review-card-text.--expanded + .review-read-more {
    position       : static;
    display        : inline-block;
    margin-top     : 8px;
    padding        : 0;
    background     : none;
    white-space    : normal;
}
.review-card-text.--expanded + .review-read-more::before {
    content: none;
}

/* Sembunyikan jika teks tidak overflow (diset JS) */
.review-read-more.--hidden {
    display: none !important;
}

/* ---------- Gambar produk ---------- */
.review-card-image {
    flex      : 0 0 140px;
    width     : 140px;
    max-width : 140px;
    align-self: center;
}
.review-card-image img {
    width        : 100%;
    height       : auto;
    object-fit   : contain;
    border-radius: 8px;
    display      : block;
}

/* ============================================================
   TOMBOL NAVIGASI (panah kiri / kanan)
   ============================================================ */
.review-prev-btn,
.review-next-btn {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    z-index       : 10;
    width         : 40px;
    height        : 40px;
    border-radius : 50%;
    border        : none;
    background    : #fff;
    box-shadow    : 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor        : pointer;
    display       : flex ;
    align-items   : center;
    justify-content: center;
    padding       : 0;
    transition    : background 0.2s, box-shadow 0.2s;
}
.review-prev-btn { left: -20px; }
.review-next-btn { right: -20px; }

.review-prev-btn:hover,
.review-next-btn:hover {
    background: #0057a8;
    box-shadow: 0 4px 16px rgba(0, 87, 168, 0.25);
}
.review-prev-btn:hover svg path,
.review-next-btn:hover svg path {
    stroke: #fff;
}

/* Sembunyikan slick default arrows */
.review-list-wrapper .slick-prev,
.review-list-wrapper .slick-next {
    display: none !important;
}

/* ============================================================
   DOTS / PAGINATION
   ============================================================ */
.review-dots-wrapper {
    text-align : center;
    margin-top : 24px;
    line-height: 1;
}
.review-dots-wrapper .slick-dots {
    position       : static;
    display        : none !important ;
    justify-content: center;
    align-items    : center;
    gap            : 6px;
    padding        : 0;
    margin         : 0;
    list-style     : none;
}
.review-dots-wrapper .slick-dots li {
    width : auto;
    height: auto;
    margin: 0;
}
.section-winning-skills .winning-skill-container .image-frame .img-mid-banner.mobile{
    border-radius: 0px !important;
}
.review-dots-wrapper .slick-dots li button {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    border       : none;
    background   : #c9d4e0;
    padding      : 0;
    font-size    : 0;
    cursor       : pointer;
    transition   : background 0.25s, width 0.25s, border-radius 0.25s;
    display      : block;
}
.review-dots-wrapper .slick-dots li button::before {
    display: none;
}
.review-dots-wrapper .slick-dots li.slick-active button {
    width        : 24px;
    border-radius: 4px;
    background   : #0057a8;
}

/* ============================================================
   MOBILE  ≤ 767px
   ============================================================ */
@media (max-width: 767px) {
    .review-slider-section {
        padding: 0px 0 48px;
    }

    .review-slider-title h2,
    .review-slider-title h3 {
        font-size : 20px;
        text-align: left;
    }
    .review-slider-header {
        padding   : 0 16px;
        text-align: left;
    }

    .review-slide-item {
        padding: 6px 8px;
    }

    .review-card {
        padding: 18px 16px;
    }

    .review-card-name {
        font-size: 14px;
    }

    .review-card-stars svg {
        width : 15px;
        height: 15px;
    }

    .review-card-image {
        flex     : 0 0 110px;
        width    : 110px;
        max-width: 110px;
    }

    .review-card-text {
        font-size          : 13px;
        -webkit-line-clamp : 6;
    }

    .review-read-more {
        font-size  : 13px;
        padding-left: 30px;
        background : linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 22px, #fff 100%);
    }

    .review-prev-btn { left: 0px; }
    .review-next-btn { right: 0px; }
}

/* ============================================================
   DESKTOP  ≥ 768px — 3 card seragam, tanpa efek blur/scale
   ============================================================ */
@media (min-width: 768px) {
    /* Clip partial cloned slides — hanya 3 yang kelihatan */
    .review-slider-section .slick-list {
        overflow: hidden !important;
    }

    .review-slide-item {
        padding: 8px 10px;
    }

    /* Semua card seragam — tidak ada scale/blur/opacity difference */
    .review-list-wrapper .slick-slide .review-card {
        transform  : none;
        opacity    : 1;
        box-shadow : 0 2px 16px rgba(0, 0, 0, 0.09);
    }

    .review-prev-btn { left: -28px; }
    .review-next-btn { right: -28px; }
}

@media (min-width: 1200px) {
    .review-prev-btn { left: -40px; }
    .review-next-btn { right: -40px; }
}

/* ============================================================
   Panah dihilangkan kalau tidak ada yang bisa digeser.
   Saat jumlah kartu <= slidesToShow (mis. 3 review di desktop yang
   memang menampilkan 3 sekaligus), slick memberi class .slick-hidden
   ke tombol panah. Aturan .slick-hidden dari slick.css punya
   spesifisitas yang sama dengan aturan .review-prev-btn/.review-next-btn
   di file ini, dan file ini dimuat belakangan — jadi display:flex-nya
   menang dan panahnya tetap terlihat walau tidak berfungsi.
   ============================================================ */
.review-prev-btn.slick-hidden,
.review-next-btn.slick-hidden {
    display: none !important;
}