/* =============================================
   Smart Testimonial Slider  –  v3
   ============================================= */

/* ── Outer wrapper ─────────────────────────── */
.sts-outer {
    position:    relative;
    background:  var(--sts-bg, #ffffff);
    box-sizing:  border-box;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    color:       var(--sts-txt, #333);
    overflow:    hidden;   /* clip the peeking side cards at wrapper edge */
}

/* ── Swiper: must overflow so 3 slides are visible ── */
.sts-outer .sts-swiper {
    overflow: visible !important;
}

/* ── Each slide: no border, no bg ─────────── */
.sts-outer .swiper-slide {
    height:     auto !important;
    border:     none !important;
    outline:    none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Card – inactive (side) ────────────────── */
.sts-card {
    background:    #f5f6f8;
    border-radius: 14px;
    padding:       24px 22px 26px;
    min-height:    200px;
    height:        100%;
    box-sizing:    border-box;
    display:       flex;
    flex-direction:column;
    gap:           14px;

    /* NO border, NO outline — prevents the stray line */
    border:  none;
    outline: none;

    transform:  scale(0.88);
    opacity:    0.55;
    box-shadow: none;

    transition: transform .4s ease, opacity .4s ease,
                background .4s ease, box-shadow .4s ease;
}

/* ── Card – active (centre) ────────────────── */
.sts-card.sts-active {
    transform:  scale(1);
    opacity:    1;
    background: #ffffff;
    box-shadow: 0 4px 32px rgba(0,0,0,0.11);
}

/* ── Top row: avatar + name/role/stars ─────── */
.sts-top {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
}

/* Round avatar — image */
.sts-avatar {
    width:         58px;
    height:        58px;
    border-radius: 50%;      /* ← makes it perfectly round */
    object-fit:    cover;
    flex-shrink:   0;
    display:       block;
    border:        2px solid #e2e5ea;
}

/* Round avatar — letter fallback */
.sts-initial {
    width:           58px;
    height:          58px;
    border-radius:   50%;
    flex-shrink:     0;
    background:      var(--sts-accent, #f5a623);
    color:           #fff;
    font-size:       22px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Name / role column */
.sts-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding-top:    2px;
}

.sts-name {
    font-size:   15px;
    font-weight: 700;
    color:       var(--sts-txt, #111);
    line-height: 1.2;
}

.sts-role {
    font-size:   12px;
    color:       #888;
    line-height: 1.3;
}

.sts-stars {
    display:    flex;
    gap:        2px;
    margin-top: 3px;
}

.sts-star      { font-size:14px; color:#ddd; line-height:1; }
.sts-star.on   { color: var(--sts-accent, #f5a623); }

/* ── Subtitle / Headline line ──────────────── */
/* This is the italic bold line seen in image 2 */
.sts-headline {
    font-size:   15px;
    font-weight: 700;
    font-style:  italic;
    color:       var(--sts-txt, #222);
    margin:      0;
    line-height: 1.4;
}

/* ── Body text ─────────────────────────────── */
.sts-body {
    font-size:   13.5px;
    line-height: 1.72;
    color:       #666;
    margin:      0;
    flex:        1
}

p.sts-headline {
    text-align: center;
}

p.sts-body {
    text-align: center;
}

/* ── Dots ──────────────────────────────────── */
.sts-dots {
    position:   relative !important;
    bottom:     auto !important;
    margin-top: 28px;
    text-align: center;
}

.sts-dots .swiper-pagination-bullet {
    width:      9px;
    height:     9px;
    background: #ccc;
    opacity:    1;
    transition: all .3s;
}

.sts-dots .swiper-pagination-bullet-active {
    background:    var(--sts-accent, #f5a623);
    width:         22px;
    border-radius: 5px;
}

/* ── Prev / Next buttons ───────────────────── */
.sts-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           38px;
    height:          38px;
    border-radius:   50%;
    background:      #fff;
    border:          1.5px solid #dde0e6;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         30;
    box-shadow:      0 2px 8px rgba(0,0,0,0.1);
    color:           #555;
    padding:         0;
    transition:      background .2s, border-color .2s, color .2s;
}

.sts-btn:hover {
    background:   var(--sts-accent, #f5a623);
    border-color: var(--sts-accent, #f5a623);
    color:        #fff;
}

.sts-btn svg {
    width:            17px;
    height:           17px;
    fill:             none;
    stroke:           currentColor;
    stroke-width:     2.5;
    stroke-linecap:   round;
    stroke-linejoin:  round;
}

.sts-prev { left:  14px; }
.sts-next { right: 14px; }

.sts-btn.swiper-button-disabled {
    opacity:        .35;
    pointer-events: none;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 960px) {
    .sts-outer { padding: 32px 48px 44px; }
}

@media (max-width: 640px) {
    .sts-outer  { padding: 24px 42px 40px; }
    .sts-prev   { left: 4px; }
    .sts-next   { right: 4px; }
    .sts-body   { font-size: 13px; }
}