/* =========================================================
KAREN TESTIMONIALS
========================================================= */

.karen-testimonials {
width: 100%;
padding: 90px 20px;
background: #f7fbfa;
box-sizing: border-box;
}

.karen-testimonials-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

/* =========================================================
HERO
========================================================= */

.karen-testimonials-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 1px solid #e2edeb;
}

.karen-testimonials-intro {
max-width: 620px;
text-align: right;
}

.karen-testimonials-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #1dba9e;
font-size: 14px;
font-weight: 700;
}

.karen-testimonials-intro h2 {
margin: 0 0 15px;
color: #17324d;
font-size: 38px;
font-weight: 700;
line-height: 1.5;
}

.karen-testimonials-intro p {
margin: 0;
color: #71808c;
font-size: 15px;
line-height: 2;
}

/* =========================================================
SCORE
========================================================= */

.karen-testimonials-score {
flex-shrink: 0;
min-width: 190px;
padding: 26px 30px;
background: #ffffff;
border: 1px solid #dce9e6;
border-radius: 18px;
text-align: center;
box-shadow:
0 10px 30px rgba(20, 50, 70, 0.06);
}

.karen-testimonials-score__value {
color: #17324d;
font-size: 44px;
font-weight: 700;
line-height: 1.2;
}

.karen-testimonials-score__stars {
display: flex;
align-items: center;
justify-content: center;
direction: ltr;
gap: 3px;
margin: 8px 0 10px;
color: #d5dadd;
font-size: 17px;
line-height: 1;
}

.karen-testimonials-score__count {
color: #9aa5ab;
font-size: 12px;
line-height: 1.8;
}

/* =========================================================
STARS
========================================================= */

.karen-testimonials-score__stars span.is-full,
.karen-testimonial-card__rating span.is-full {
color: #e8ad38;
}

.karen-testimonials-score__stars span.is-half,
.karen-testimonial-card__rating span.is-half {
background:
linear-gradient(
90deg,
#e8ad38 50%,
#d5dadd 50%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

/* =========================================================
LIST
========================================================= */

.karen-testimonials-grid {
display: flex;
flex-direction: column;
gap: 20px;
}

/* =========================================================
CARD
========================================================= */

/*
بخش همیشه dir="rtl" است، پس ستون باریک
مشخصات کاربر خودکار سمت راست قرار می‌گیرد.
*/

.karen-testimonial-card {
position: relative;
display: grid;
grid-template-columns: 200px 1fr;
align-items: start;
gap: 32px;
width: 100%;
padding: 30px 32px;
background: #ffffff;
border: 1px solid #e5efed;
border-radius: 18px;
box-sizing: border-box;
overflow: hidden;
text-align: right;
box-shadow:
0 8px 30px rgba(20, 50, 70, 0.05);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}

.karen-testimonial-card:hover {
transform: translateY(-3px);
border-color: #cfe8e2;
box-shadow:
0 18px 40px rgba(20, 50, 70, 0.10);
}

/* Decorative quote */

.karen-testimonial-card__quote {
position: absolute;
top: -20px;
left: 24px;
color: #1dba9e;
font-family: Georgia, "Times New Roman", serif;
font-size: 96px;
line-height: 1;
opacity: 0.08;
pointer-events: none;
user-select: none;
}

/* =========================================================
CARD SIDE
========================================================= */

.karen-testimonial-card__side {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding-left: 32px;
border-left: 1px solid #edf2f1;
text-align: center;
}

.karen-testimonial-card__avatar {
flex-shrink: 0;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f7f4;
color: #1dba9e;
border-radius: 50%;
font-size: 21px;
font-weight: 700;
}

.karen-testimonial-card__meta {
min-width: 0;
max-width: 100%;
}

.karen-testimonial-card__meta h3 {
margin: 0 !important;
padding: 0;
color: #17324d;
font-size: 15px;
font-weight: 700;
line-height: 1.6;
word-break: break-word;
}

.karen-testimonial-card__meta time {
display: block;
margin-top: 4px;
color: #9aa5ab;
font-size: 11px;
line-height: 1.6;
}

/* =========================================================
CARD BODY
========================================================= */

.karen-testimonial-card__body {
min-width: 0;
}

.karen-testimonial-card__rating {
display: flex;
align-items: center;
direction: ltr;
gap: 2px;
margin-bottom: 12px;
color: #d5dadd;
font-size: 14px;
line-height: 1;
}

.karen-testimonial-card__title {
margin: 0 0 10px !important;
padding: 0;
color: #17324d;
font-size: 16px;
font-weight: 700;
line-height: 1.8;
}

/*
سقف عرض متن برای خوانایی.
بدون آن، خطوط روی نمایشگر بزرگ
بیش از حد کشیده می‌شوند.
*/

.karen-testimonial-card__text {
max-width: 72ch;
color: #657580;
font-size: 14px;
line-height: 2.1;
}

.karen-testimonial-card__text p {
margin: 0 0 10px !important;
padding: 0;
}

.karen-testimonial-card__text p:last-child {
margin-bottom: 0 !important;
}

/* =========================================================
EMPTY STATE
========================================================= */

.karen-testimonials-empty {
padding: 70px 30px;
background: #ffffff;
border: 1px dashed #cfe0dc;
border-radius: 20px;
text-align: center;
}

.karen-testimonials-empty__icon {
width: 74px;
height: 74px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
background: #e8f7f4;
color: #1dba9e;
border-radius: 50%;
font-size: 28px;
}

.karen-testimonials-empty h3 {
margin: 0 0 12px !important;
padding: 0;
color: #17324d;
font-size: 21px;
font-weight: 700;
line-height: 1.6;
}

.karen-testimonials-empty p {
max-width: 440px;
margin: 0 auto 26px !important;
color: #71808c;
font-size: 14px;
line-height: 2;
}

.karen-testimonials-empty__button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: #1dba9e;
color: #ffffff !important;
border-radius: 10px;
text-decoration: none !important;
font-size: 14px;
font-weight: 700;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease;
}

.karen-testimonials-empty__button:hover {
background: #17a68c;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow:
0 12px 26px rgba(29, 186, 158, 0.28);
}

.karen-testimonials-empty__button i {
transition: transform 0.3s ease;
}

.karen-testimonials-empty__button:hover i {
transform: translateX(-4px);
}

/* =========================================================
PAGINATION
========================================================= */

.karen-testimonials-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 45px;
}

.karen-testimonials-page {
min-width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
background: #ffffff;
color: #17324d !important;
border: 1px solid #dce9e6;
border-radius: 12px;
box-sizing: border-box;
text-decoration: none !important;
font-size: 14px;
font-weight: 700;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}

.karen-testimonials-page:hover {
color: #17324d !important;
border-color: #1dba9e;
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(20, 50, 70, 0.08);
}

.karen-testimonials-page.is-current {
background: #1dba9e;
color: #ffffff !important;
border-color: #1dba9e;
cursor: default;
transform: none;
}

.karen-testimonials-page--arrow {
min-width: 42px;
padding: 0;
border-radius: 50%;
font-size: 12px;
}

.karen-testimonials-page--arrow i {
color: #1dba9e;
}

.karen-testimonials-page--arrow:hover i {
color: #17324d;
}

.karen-testimonials-gap {
padding: 0 4px;
color: #9aa5ab;
font-size: 14px;
}

/* =========================================================
REVEAL
========================================================= */

.karen-testimonials-hero,
.karen-testimonials-empty,
.karen-testimonials-pagination {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}

.karen-testimonials-pagination {
transition-delay: 0.15s;
}

.karen-testimonials.karen-testimonials-visible
.karen-testimonials-hero,

.karen-testimonials.karen-testimonials-visible
.karen-testimonials-empty,

.karen-testimonials.karen-testimonials-visible
.karen-testimonials-pagination {
opacity: 1;
transform: translateY(0);
}

.karen-testimonial-card {
opacity: 0;
transform: translateY(24px);
}

.karen-testimonial-card.is-revealed {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.6s ease,
transform 0.6s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}

/* Fallback when JavaScript is unavailable */

.no-js .karen-testimonial-card,
.karen-testimonials-nojs .karen-testimonial-card {
opacity: 1;
transform: none;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1024px) {


.karen-testimonials {
    padding: 75px 20px;
}

.karen-testimonials-intro h2 {
    font-size: 32px;
}

.karen-testimonial-card {
    grid-template-columns: 165px 1fr;

    gap: 26px;

    padding: 26px 28px;
}

.karen-testimonial-card__side {
    padding-left: 26px;
}

.karen-testimonial-card__avatar {
    width: 52px;
    height: 52px;

    font-size: 19px;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


.karen-testimonials {
    padding: 60px 15px;
}

.karen-testimonials-hero {
    flex-direction: column;
    align-items: stretch;

    gap: 26px;

    margin-bottom: 32px;
    padding-bottom: 30px;
}

.karen-testimonials-intro {
    max-width: 100%;
}

.karen-testimonials-intro h2 {
    font-size: 27px;
}

.karen-testimonials-intro p {
    font-size: 13px;
}

.karen-testimonials-score {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 16px;

    min-width: 0;

    padding: 18px 20px;

    text-align: right;
}

.karen-testimonials-score__value {
    font-size: 34px;
}

.karen-testimonials-score__stars {
    justify-content: flex-start;
    margin: 0;
}

.karen-testimonials-score__count {
    margin-right: auto;
}


/* List */

.karen-testimonials-grid {
    gap: 16px;
}

.karen-testimonial-card {
    grid-template-columns: 1fr;

    gap: 16px;

    padding: 24px;
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(20, 50, 70, 0.06);
}

/*
ستون کناری روی موبایل به یک ردیف افقی
تبدیل می‌شود و خط جداکننده از کنار
به زیر منتقل می‌شود.
*/

.karen-testimonial-card__side {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    padding-left: 0;
    padding-bottom: 16px;

    border-left: none;
    border-bottom: 1px solid #edf2f1;

    text-align: right;
}

.karen-testimonial-card__avatar {
    width: 46px;
    height: 46px;

    font-size: 17px;
}

.karen-testimonial-card__text {
    max-width: none;
    font-size: 13px;
}

.karen-testimonial-card__title {
    font-size: 15px;
}

.karen-testimonial-card__quote {
    font-size: 70px;
}


/* Empty */

.karen-testimonials-empty {
    padding: 50px 22px;
}

.karen-testimonials-empty h3 {
    font-size: 18px;
}

.karen-testimonials-empty__button {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}


/* Pagination */

.karen-testimonials-pagination {
    gap: 6px;
    margin-top: 34px;
}

.karen-testimonials-page {
    min-width: 38px;
    height: 38px;

    padding: 0 10px;

    font-size: 13px;
}

.karen-testimonials-page--arrow {
    min-width: 38px;
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


.karen-testimonials-intro h2 {
    font-size: 24px;
}

.karen-testimonial-card {
    padding: 20px;
    gap: 14px;
}

.karen-testimonial-card__side {
    gap: 10px;
    padding-bottom: 14px;
}

.karen-testimonial-card__avatar {
    width: 40px;
    height: 40px;

    font-size: 15px;
}

.karen-testimonials-page {
    min-width: 34px;
    height: 34px;

    padding: 0 8px;
}

.karen-testimonials-page--arrow {
    min-width: 34px;
}


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


.karen-testimonials-hero,
.karen-testimonials-empty,
.karen-testimonials-pagination,
.karen-testimonial-card {
    opacity: 1;
    transform: none;
    transition: none;
}

.karen-testimonial-card:hover,
.karen-testimonials-page:hover,
.karen-testimonials-empty__button:hover {
    transform: none;
}


}