/* =============================================
   TESTIMONIALS SECTION
   Site-wide reusable. Rendered by customer_testimonial() in
   lib/watts_functions.php. Includes overrides for the Trustindex plugin
   so its "Excellent" rating and "Based on N reviews" texts read on dark bg.
   ============================================= */

.testimonials {
    background: #0a0a0f;
    padding: 60px 20px 80px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.testimonials__inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* -- Decorative dots / pills -- */
.testimonials__decor { pointer-events: none; }

.testimonials__dot {
    position: absolute;
    border-radius: 50%;
}
.testimonials__dot--orange {
    width: 10px;
    height: 10px;
    background: #F58220;
    top: 100px;
    left: 60px;
}
.testimonials__dot--purple {
    width: 6px;
    height: 6px;
    background: #8B5CF6;
    top: 160px;
    right: 100px;
}
.testimonials__pill--cyan {
    position: absolute;
    width: 34px;
    height: 10px;
    border-radius: 5px;
    background: rgba(51, 198, 244, 0.4);
    bottom: 80px;
    right: 60px;
}

/* -- Header -- */
.testimonials__header {
    margin-bottom: 40px;
    gap: 20px;
}

.testimonials__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #F58220;
}

.testimonials__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}

/* -- Widget area -- */
.testimonials__widget {
    width: 100%;
}

/* -- Trustindex plugin text overrides (scoped to our section)
   so the "EXCELLENT" header and "Based on N reviews" subtitle are
   readable on the dark background -- */
.testimonials .ti-rating .ti-rating-large {
    color: #fff !important;
}
.testimonials .ti-rating-text {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Common surrounding labels the plugin renders (e.g. "Based on N reviews"
   where the N is wrapped in <strong>) so no stray dark text remains. */
.testimonials .ti-rating-text a,
.testimonials .ti-rating-text span,
.testimonials .ti-rating-text strong,
.testimonials .ti-rating-text b {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* -- Responsive -- */
@media (min-width: 768px) {
    .testimonials {
        padding: 80px 40px 100px;
    }
    .testimonials__title { font-size: 42px; line-height: 48px; }
    .testimonials__header { margin-bottom: 48px; }
}

@media (min-width: 992px) {
    .testimonials {
        padding: 120px 80px 100px;
    }
    .testimonials__title { font-size: 52px; line-height: 58px; }
    .testimonials__header { margin-bottom: 56px; }
}