/* =========================================
   Customer Reviews Section (Mobile-First - Base)
========================================= */
.customer-reviews-section {
    margin-top: 32px;
}

.customer-reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

/* بنر اصلی در حالت موبایل */
.cr-image {
    width: 100%;
    max-width: 364px;
    height: 127px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
    padding: 24px;
    flex-shrink: 0;
}

/* SVG Mask اختصاصی موبایل برای بنر */
.cr-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #112931;
    z-index: -1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 364 127' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.2778 5.09751C25.5416 1.83363 29.9684 0 34.5842 0L329.417 0C334.032 0 338.459 1.83363 341.723 5.0975L358.903 22.2775C362.167 25.5414 364.001 29.9682 364.001 34.584L364 91.7919C364 96.4077 362.167 100.834 358.903 104.098L341.723 121.278C338.459 124.542 334.032 126.376 329.416 126.376L34.584 126.376C29.9681 126.376 25.5414 124.542 22.2775 121.278L5.09753 104.098C1.83364 100.834 8.83892e-06 96.4077 2.45723e-05 91.7918L0.000219569 34.584C0.000235302 29.9681 1.83386 25.5414 5.09773 22.2775L22.2778 5.09751Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 364 127' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.2778 5.09751C25.5416 1.83363 29.9684 0 34.5842 0L329.417 0C334.032 0 338.459 1.83363 341.723 5.0975L358.903 22.2775C362.167 25.5414 364.001 29.9682 364.001 34.584L364 91.7919C364 96.4077 362.167 100.834 358.903 104.098L341.723 121.278C338.459 124.542 334.032 126.376 329.416 126.376L34.584 126.376C29.9681 126.376 25.5414 124.542 22.2775 121.278L5.09753 104.098C1.83364 100.834 8.83892e-06 96.4077 2.45723e-05 91.7918L0.000219569 34.584C0.000235302 29.9681 1.83386 25.5414 5.09773 22.2775L22.2778 5.09751Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.cr-image .icon-cr-image {
    position: relative;
    z-index: 10;
}

.cr-image .cr-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.cr-title h4 {
    font-weight: 725;
    font-size: 20px;
    color: #fff;
    margin: 0;
}

.cr-title span {
    font-weight: 450;
    font-size: 14px;
    color: #fff;
}

/* مخفی کردن دکمه‌های اسلایدر در موبایل */
.customer-controls {
    display: none;
}

.cr-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* غیرفعال کردن استایل‌های Swiper و چیدمان عمودی در موبایل */
.cr-content .swiper-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

.cr-content .swiper-slide {
    height: auto;
}

/* استایل‌های کارت مشتری در موبایل */
.cr-content .customer-card {
    width: 100%;
    max-width: 364px;
    /* height: 280px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid rgba(56, 56, 56, 0.08);
    /* #38383814 */
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
    /* #00000029 */
    margin: 0;
    gap: 16px;
}

.customer-card .cc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cc-title .title {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.title .name {
    font-weight: 725;
    font-size: 20px;
    color: #112931;
    margin: 0;
}

.title span {
    font-weight: 325;
    font-size: 14px;
    color: #67767B;
}

.cc-title .icon {
    width: 96px;
    height: 64px;
    background: rgba(36, 147, 96, 0.08);
    /* var(--accent-green)14 */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Mask اختصاصی موبایل برای باکس توضیحات */
.customer-card .cc-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #ECEEEF;
    padding: 15px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 316 56' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96756 2.87508C11.6322 1.04395 13.9921 1.21903e-08 16.4668 3.35726e-08L299.533 2.47938e-06C302.008 2.50076e-06 304.368 1.04395 306.032 2.87508L313.716 11.327C315.186 12.9438 316 15.0503 316 17.2353V38.7647C316 40.9497 315.186 43.0562 313.716 44.673L306.032 53.1249C304.368 54.9561 302.008 56 299.533 56L16.4668 56C13.9921 56 11.6322 54.956 9.96756 53.1249L2.28414 44.673C0.814385 43.0562 0 40.9497 0 38.7647L0 17.2353C0 15.0503 0.814386 12.9438 2.28414 11.327L9.96756 2.87508Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 316 56' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.96756 2.87508C11.6322 1.04395 13.9921 1.21903e-08 16.4668 3.35726e-08L299.533 2.47938e-06C302.008 2.50076e-06 304.368 1.04395 306.032 2.87508L313.716 11.327C315.186 12.9438 316 15.0503 316 17.2353V38.7647C316 40.9497 315.186 43.0562 313.716 44.673L306.032 53.1249C304.368 54.9561 302.008 56 299.533 56L16.4668 56C13.9921 56 11.6322 54.956 9.96756 53.1249L2.28414 44.673C0.814385 43.0562 0 40.9497 0 38.7647L0 17.2353C0 15.0503 0.814386 12.9438 2.28414 11.327L9.96756 2.87508Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.customer-card .text-customer {
    font-weight: 325;
    font-size: 14px;
    text-align: justify;
    color: #67767B;
}

/* Voice Player Base */
.voice-player-card {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24.5px;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(52, 52, 52, 0.08);
    /* #34343414 */
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.08);
    /* #00000014 */
    direction: ltr;
}

.play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--accent-green);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s;
}

.waveCanvas {
    flex-grow: 1;
    width: 0;
    height: 40px;
    cursor: pointer;
}

.audio-time {
    font-family: sans-serif;
    font-size: 14px;
    color: #718096;
    min-width: 35px;
    text-align: right;
}

/* دکمه اختصاصی مشاهده بیشتر در موبایل */
.load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    /* فاصله از کارت‌ها */
    width: 100%;
    max-width: 364px;
    height: 64px;
    border-radius: 12px;
    gap: 8px;
    padding-right: 32px;
    padding-left: 24px;
    background: var(--accent-gold);
    color: #112931;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}


/* =========================================
   Desktop View (min-width: 992px)
========================================= */
@media (min-width: 992px) {
    .customer-reviews-section {
        margin-top: 56px;
    }

    .customer-reviews {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 49.5px;
        overflow: hidden;
    }

    /* بازگردانی سایز و ظاهر بنر دسکتاپ */
    .cr-image {
        width: 302px;
        max-width: 302px;
        height: 302px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 37px;
        margin-top: 15px;
    }

    /* SVG Mask دسکتاپ */
    .cr-image::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 302 302' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7209 7.02943C35.2218 2.52856 41.3263 0 47.6915 0L254.309 0C260.674 0 266.779 2.52856 271.28 7.02943L294.971 30.7205C299.472 35.2214 302 41.3259 302 47.6912L302 254.309C302 260.674 299.471 266.779 294.971 271.279L271.279 294.971C266.779 299.471 260.674 302 254.309 302H47.6911C41.3259 302 35.2214 299.471 30.7206 294.971L7.02944 271.279C2.52857 266.779 5.85836e-06 260.674 1.62863e-05 254.309L0.000354782 47.6911C0.00036521 41.3259 2.52893 35.2214 7.02979 30.7206L30.7209 7.02943Z' fill='%23000'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 302 302' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7209 7.02943C35.2218 2.52856 41.3263 0 47.6915 0L254.309 0C260.674 0 266.779 2.52856 271.28 7.02943L294.971 30.7205C299.472 35.2214 302 41.3259 302 47.6912L302 254.309C302 260.674 299.471 266.779 294.971 271.279L271.279 294.971C266.779 299.471 260.674 302 254.309 302H47.6911C41.3259 302 35.2214 299.471 30.7206 294.971L7.02944 271.279C2.52857 266.779 5.85836e-06 260.674 1.62863e-05 254.309L0.000354782 47.6911C0.00036521 41.3259 2.52893 35.2214 7.02979 30.7206L30.7209 7.02943Z' fill='%23000'/%3E%3C/svg%3E");
    }

    .cr-image .icon-cr-image {
        margin-top: -60px;
    }

    .cr-image .cr-title {
        align-items: center;
    }

    /* نمایش دکمه‌های ناوبری اسلایدر دسکتاپ */
    .customer-controls {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
        position: relative;
        width: 100%;
        height: 48px;
    }

    .customer-controls .swiper-button-next,
    .customer-controls .swiper-button-prev {
        position: static;
        width: 48px;
        height: 48px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        margin: 0;
    }

    .customer-controls .swiper-button-next::after,
    .customer-controls .swiper-button-prev::after {
        font-size: 18px;
        color: white;
    }

    .cr-content .customer-slider {
        padding: 30px 15px;
    }

    /* بازگردانی چیدمان افقی Swiper */
    .cr-content .swiper-wrapper {
        flex-direction: row;
        gap: 0;
        /* در دسکتاپ، خودِ Swiper فاصله را با spaceBetween کنترل می‌کند */
    }

    /* بازگردانی سایز کارت دسکتاپ */
    .cr-content .customer-card {
        width: 411px;
        max-width: 411px;
        height: 328px;
        padding: 32px;
        border: 1px solid #EBEBEB;
        box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
        gap: 0;
    }

    /* SVG Mask دسکتاپ برای توضیحات کارت */
    .customer-card .cc-desc {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 347 56' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.2429 2.57258C12.8901 0.925383 15.1242 1.02795e-08 17.4536 2.85771e-08L329.546 2.47999e-06C331.876 2.49829e-06 334.11 0.925385 335.757 2.57258L344.427 11.2429C346.075 12.8901 347 15.1242 347 17.4536V38.4487C347 40.7781 346.075 43.0122 344.427 44.6594L335.757 53.3297C334.11 54.9769 331.876 55.9023 329.546 55.9023L17.4536 55.9023C15.1241 55.9023 12.8901 54.9769 11.2429 53.3297L2.57258 44.6594C0.925384 43.0122 0 40.7781 0 38.4487L0 17.4536C0 15.1242 0.925385 12.8901 2.57258 11.2429L11.2429 2.57258Z' fill='%23000'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 347 56' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.2429 2.57258C12.8901 0.925383 15.1242 1.02795e-08 17.4536 2.85771e-08L329.546 2.47999e-06C331.876 2.49829e-06 334.11 0.925385 335.757 2.57258L344.427 11.2429C346.075 12.8901 347 15.1242 347 17.4536V38.4487C347 40.7781 346.075 43.0122 344.427 44.6594L335.757 53.3297C334.11 54.9769 331.876 55.9023 329.546 55.9023L17.4536 55.9023C15.1241 55.9023 12.8901 54.9769 11.2429 53.3297L2.57258 44.6594C0.925384 43.0122 0 40.7781 0 38.4487L0 17.4536C0 15.1242 0.925385 12.8901 2.57258 11.2429L11.2429 2.57258Z' fill='%23000'/%3E%3C/svg%3E");
    }

    /* پنهان کردن دکمه "مشاهده بیشتر" در دسکتاپ (چون اسلایدر داریم) */
    .load-more-btn {
        display: none;
    }
}