/* =============================================
   Testimonials Slider Pro - Public Styles
   ============================================= */

/* ── CSS Variables ── */
.tsp-wrapper {
    --tsp-accent:       #4F46E5;
    --tsp-accent-rgb:   79, 70, 229;
    --tsp-bg:           #FAFBFF;
    --tsp-card-bg:      #FFFFFF;
    --tsp-text:         #111827;
    --tsp-muted:        #6B7280;
    --tsp-star-empty:   #D1D5DB;
    --tsp-star-fill:    #F59E0B;
    --tsp-border:       rgba(0, 0, 0, .07);
    --tsp-shadow:       0 4px 24px rgba(0, 0, 0, .08);
    --tsp-radius:       20px;
    --tsp-radius-sm:    12px;
    --tsp-transition:   .45s cubic-bezier(.4, 0, .2, 1);

    position: relative;
    width: 100%;
    padding: 60px 0 80px;
    box-sizing: border-box;
    font-family: inherit;
    overflow: hidden;
}


/* ── Slider ── */
.tsp-slider {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0 auto;
    max-width: 760px;
    padding: 0 20px;
    box-sizing: border-box;
}

.tsp-track {
    display: flex;
    transition: transform var(--tsp-transition);
    will-change: transform;
}
.tsp-wrapper[data-animation="fade"] .tsp-track {
    display: block;
    position: relative;
}

/* ── Slide ── */
.tsp-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 4px;
}
.tsp-wrapper[data-animation="fade"] .tsp-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--tsp-transition);
    pointer-events: none;
}
.tsp-wrapper[data-animation="fade"] .tsp-slide.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

/* ── Card ── */
.tsp-card {
    background: var(--tsp-card-bg);
    border: 1px solid var(--tsp-border);
    border-radius: var(--tsp-radius);
    padding: 44px 48px 36px;
    box-shadow: var(--tsp-shadow);
    text-align: center;
    transition: box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.tsp-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tsp-accent), rgba(var(--tsp-accent-rgb), .4));
    border-radius: var(--tsp-radius) var(--tsp-radius) 0 0;
}
.tsp-card:hover {
    box-shadow: 0 8px 40px rgba(var(--tsp-accent-rgb), .15);
}

/* ── Quote icon ── */
.tsp-quote-icon {
    color: var(--tsp-accent);
    opacity: .15;
    margin-bottom: 20px;
    line-height: 1;
}
.tsp-quote-icon svg {
    width: 40px;
    height: 32px;
}

/* ── Content ── */
.tsp-content {
    font-size: 17px;
    line-height: 1.7;
    color: var(--tsp-text);
    margin-bottom: 24px;
    font-style: italic;
}
.tsp-content p { margin: 0; }
.tsp-content p + p { margin-top: 10px; }

/* ── Stars ── */
.tsp-stars {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-bottom: 24px;
}
.tsp-star {
    font-size: 20px;
    color: var(--tsp-star-empty);
    transition: color .15s;
}
.tsp-star.filled { color: var(--tsp-star-fill); }

/* ── Author ── */
.tsp-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.tsp-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(var(--tsp-accent-rgb), .2);
    box-shadow: 0 0 0 2px rgba(var(--tsp-accent-rgb), .1);
}
.tsp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tsp-avatar-placeholder {
    background: linear-gradient(135deg, var(--tsp-accent), rgba(var(--tsp-accent-rgb), .6));
    display: flex;
    align-items: center;
    justify-content: center;
}
.tsp-avatar-placeholder span {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
}

.tsp-author-info {
    text-align: left;
}
.tsp-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--tsp-text);
    line-height: 1.3;
}
.tsp-meta {
    display: block;
    font-size: 13px;
    color: var(--tsp-muted);
    margin-top: 2px;
}

/* ── Buttons ── */
.tsp-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tsp-card-bg);
    border: 1px solid var(--tsp-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tsp-text);
    transition: all .2s ease;
    padding: 0;
}
.tsp-btn:hover {
    background: var(--tsp-accent);
    border-color: var(--tsp-accent);
    color: #fff;
    box-shadow: 0 4px 20px rgba(var(--tsp-accent-rgb), .35);
    transform: translateY(-50%) scale(1.05);
}
.tsp-btn svg { display: block; flex-shrink: 0; }
.tsp-prev { left: 0; }
.tsp-next { right: 0; }

/* ── Dots ── */
.tsp-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.tsp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--tsp-accent-rgb), .2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all .25s ease;
}
.tsp-dot.active {
    background: var(--tsp-accent);
    width: 24px;
    border-radius: 4px;
}

/* ── No testimonials ── */
.tsp-no-testimonials {
    text-align: center;
    color: var(--tsp-muted);
    font-style: italic;
    padding: 40px;
}

/* ── Author without avatar ── */
.tsp-author--no-avatar {
    justify-content: center;
}
.tsp-author--no-avatar .tsp-author-info {
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .tsp-wrapper { padding: 40px 0 70px; }
    .tsp-card { padding: 32px 24px 28px; }
    .tsp-content { font-size: 15px; }
    .tsp-btn { display: none; }
    .tsp-slider { padding: 0 10px; }
}