/**
 * ============================================================================
 * NETT TESTIMONIALS WIDGET - STYLES
 * ============================================================================
 * 
 * Testimonial section with cards, avatars, rating stars, and carousel
 * support for customer reviews and social proof.
 * 
 * Structure:
 * - .nett-testimonials (main container)
 *   - .testimonials-header (section heading)
 *   - .testimonials-grid/.testimonials-carousel (layout)
 *     - .testimonial-card (individual testimonial)
 *       - .testimonial-rating (star rating)
 *       - .testimonial-content (quote text)
 *       - .testimonial-author (author info)
 * 
 * ============================================================================
 */

/* =========================================================================
 * 1. MAIN CONTAINER
 * =========================================================================
 */

.nett-testimonials {
    position: relative;
    width: 100%;
    padding: var(--nett-section-padding-y) 0;
    background-color: var(--nett-bg-primary);
    overflow: hidden;
}

.nett-testimonials.bg-secondary {
    background-color: var(--nett-bg-secondary);
}

.nett-testimonials.bg-dark {
    background-color: var(--nett-gray-900);
}

.nett-testimonials.bg-gradient {
    background: linear-gradient(180deg, var(--nett-gray-50) 0%, var(--nett-white) 100%);
}

.testimonials-container {
    max-width: var(--nett-container-max);
    margin: 0 auto;
    padding: 0 var(--nett-space-6);
}

/* =========================================================================
 * 2. SECTION HEADER
 * =========================================================================
 */

.testimonials-header {
    text-align: center;
    margin-bottom: var(--nett-space-16);
}

.testimonials-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nett-space-2);
    padding: var(--nett-space-2) var(--nett-space-4);
    margin-bottom: var(--nett-space-4);
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-primary);
    background-color: var(--nett-primary-50);
    border-radius: var(--nett-radius-full);
}

.nett-testimonials.bg-dark .testimonials-badge {
    color: var(--nett-primary-300);
    background-color: rgba(59, 130, 246, 0.1);
}

.testimonials-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h2-size);
    font-weight: var(--nett-font-bold);
    color: var(--nett-text-primary);
    line-height: var(--nett-leading-tight);
    margin: 0 0 var(--nett-space-4) 0;
}

.nett-testimonials.bg-dark .testimonials-title {
    color: var(--nett-white);
}

.testimonials-subtitle {
    font-size: var(--nett-text-lg);
    color: var(--nett-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--nett-leading-relaxed);
}

.nett-testimonials.bg-dark .testimonials-subtitle {
    color: var(--nett-gray-400);
}

/* =========================================================================
 * 3. GRID LAYOUT
 * =========================================================================
 */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nett-gap-lg);
}

.testimonials-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.testimonials-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Masonry Layout */
.testimonials-grid.layout-masonry {
    columns: 3;
    column-gap: var(--nett-gap-lg);
}

.testimonials-grid.layout-masonry .testimonial-card {
    break-inside: avoid;
    margin-bottom: var(--nett-gap-lg);
}

/* =========================================================================
 * 4. TESTIMONIAL CARD
 * =========================================================================
 */

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--nett-space-8);
    background-color: var(--nett-testimonial-card-bg);
    border: var(--nett-border) solid var(--nett-border-color);
    border-radius: var(--nett-card-radius);
    transition: var(--nett-transition-all);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nett-card-shadow-hover);
    border-color: transparent;
}

.nett-testimonials.bg-secondary .testimonial-card {
    background-color: var(--nett-white);
}

.nett-testimonials.bg-dark .testimonial-card {
    background-color: var(--nett-gray-800);
    border-color: var(--nett-gray-700);
}

/* Card Variants */
.testimonial-card.style-bordered {
    border-width: 2px;
    border-color: var(--nett-primary-100);
}

.testimonial-card.style-gradient {
    background: linear-gradient(135deg, var(--nett-white) 0%, var(--nett-gray-50) 100%);
    border: none;
}

.testimonial-card.style-shadow {
    border: none;
    box-shadow: var(--nett-shadow-lg);
}

/* Quote Icon */
.testimonial-quote-icon {
    position: absolute;
    top: var(--nett-space-6);
    right: var(--nett-space-6);
    width: 48px;
    height: 48px;
    color: var(--nett-testimonial-quote-color);
    opacity: 0.5;
}

.testimonial-card.has-large-quote .testimonial-quote-icon {
    width: 80px;
    height: 80px;
    top: var(--nett-space-4);
    right: var(--nett-space-4);
    opacity: 0.3;
}

/* =========================================================================
 * 5. RATING STARS
 * =========================================================================
 */

.testimonial-rating {
    display: flex;
    gap: var(--nett-space-1);
    margin-bottom: var(--nett-space-4);
}

.testimonial-star {
    width: 20px;
    height: 20px;
    color: var(--nett-testimonial-star-color);
}

.testimonial-star.is-empty {
    color: var(--nett-gray-300);
}

.testimonial-star.is-half {
    position: relative;
}

.testimonial-star.is-half::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

/* Rating with Number */
.testimonial-rating-value {
    display: flex;
    align-items: center;
    gap: var(--nett-space-2);
}

.testimonial-rating-number {
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-bold);
    color: var(--nett-gray-700);
}

.nett-testimonials.bg-dark .testimonial-rating-number {
    color: var(--nett-gray-300);
}

/* =========================================================================
 * 6. TESTIMONIAL CONTENT
 * =========================================================================
 */

.testimonial-content {
    flex: 1;
    margin-bottom: var(--nett-space-6);
}

.testimonial-text {
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-normal);
    color: var(--nett-text-secondary);
    line-height: var(--nett-leading-relaxed);
    margin: 0;
}

.nett-testimonials.bg-dark .testimonial-text {
    color: var(--nett-gray-300);
}

.testimonial-text.is-large {
    font-size: var(--nett-text-lg);
}

.testimonial-text.is-italic {
    font-style: italic;
}

/* Highlighted Text */
.testimonial-highlight {
    color: var(--nett-primary);
    font-weight: var(--nett-font-semibold);
}

/* =========================================================================
 * 7. AUTHOR SECTION
 * =========================================================================
 */

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--nett-space-4);
    padding-top: var(--nett-space-6);
    border-top: var(--nett-border) solid var(--nett-border-color);
}

.nett-testimonials.bg-dark .testimonial-author {
    border-top-color: var(--nett-gray-700);
}

.testimonial-avatar {
    flex-shrink: 0;
    width: var(--nett-testimonial-avatar-size);
    height: var(--nett-testimonial-avatar-size);
    border-radius: var(--nett-radius-full);
    overflow: hidden;
    background-color: var(--nett-gray-100);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-avatar.is-bordered {
    border: 3px solid var(--nett-primary);
    padding: 2px;
}

/* Avatar Placeholder */
.testimonial-avatar.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nett-gradient-primary);
    color: var(--nett-white);
    font-weight: var(--nett-font-bold);
    font-size: var(--nett-text-lg);
}

.testimonial-author-info {
    flex: 1;
    min-width: 0;
}

.testimonial-author-name {
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    margin: 0 0 2px 0;
}

.nett-testimonials.bg-dark .testimonial-author-name {
    color: var(--nett-white);
}

.testimonial-author-title {
    font-size: var(--nett-text-sm);
    color: var(--nett-text-muted);
    margin: 0;
}

.nett-testimonials.bg-dark .testimonial-author-title {
    color: var(--nett-gray-500);
}

/* Company Logo */
.testimonial-company-logo {
    height: 24px;
    width: auto;
    margin-top: var(--nett-space-2);
    opacity: 0.6;
    filter: grayscale(100%);
    transition: var(--nett-transition-all);
}

.testimonial-card:hover .testimonial-company-logo {
    opacity: 1;
    filter: grayscale(0);
}

/* =========================================================================
 * 8. CAROUSEL STYLES
 * =========================================================================
 */

.testimonials-carousel {
    position: relative;
    overflow: visible;
}

.testimonials-carousel .swiper-wrapper {
    padding-bottom: var(--nett-space-4);
}

.testimonials-carousel .swiper-slide {
    height: auto;
}

.testimonials-carousel .testimonial-card {
    height: 100%;
}

/* Navigation Arrows */
.testimonials-nav {
    display: flex;
    justify-content: center;
    gap: var(--nett-space-4);
    margin-top: var(--nett-space-8);
}

.testimonials-nav-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nett-white);
    border: var(--nett-border) solid var(--nett-border-color);
    border-radius: var(--nett-radius-full);
    color: var(--nett-gray-600);
    cursor: pointer;
    transition: var(--nett-transition-all);
}

.testimonials-nav-btn:hover {
    background-color: var(--nett-primary);
    border-color: var(--nett-primary);
    color: var(--nett-white);
}

.testimonials-nav-btn svg {
    width: 20px;
    height: 20px;
}

.testimonials-nav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nett-testimonials.bg-dark .testimonials-nav-btn {
    background-color: var(--nett-gray-800);
    border-color: var(--nett-gray-700);
    color: var(--nett-gray-300);
}

/* Pagination */
.testimonials-pagination {
    display: flex;
    justify-content: center;
    gap: var(--nett-space-2);
    margin-top: var(--nett-space-8);
}

.testimonials-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--nett-gray-300);
    border-radius: var(--nett-radius-full);
    cursor: pointer;
    transition: var(--nett-transition-all);
}

.testimonials-pagination-bullet:hover {
    background-color: var(--nett-gray-400);
}

.testimonials-pagination-bullet.is-active {
    width: 28px;
    background-color: var(--nett-primary);
}

.nett-testimonials.bg-dark .testimonials-pagination-bullet {
    background-color: var(--nett-gray-700);
}

.nett-testimonials.bg-dark .testimonials-pagination-bullet.is-active {
    background-color: var(--nett-primary);
}

/* =========================================================================
 * 9. FEATURED TESTIMONIAL
 * =========================================================================
 */

.testimonial-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nett-gap-xl);
    align-items: center;
    padding: var(--nett-space-12);
    background-color: var(--nett-gray-50);
    border-radius: var(--nett-radius-2xl);
}

.nett-testimonials.bg-dark .testimonial-featured {
    background-color: var(--nett-gray-800);
}

.testimonial-featured-image {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--nett-radius-xl);
    overflow: hidden;
}

.testimonial-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-featured-content {
    display: flex;
    flex-direction: column;
    gap: var(--nett-space-6);
}

.testimonial-featured-text {
    font-size: var(--nett-text-2xl);
    font-weight: var(--nett-font-medium);
    color: var(--nett-text-primary);
    line-height: var(--nett-leading-relaxed);
    margin: 0;
}

.nett-testimonials.bg-dark .testimonial-featured-text {
    color: var(--nett-white);
}

/* =========================================================================
 * 10. STATISTICS/METRICS
 * =========================================================================
 */

.testimonials-stats {
    display: flex;
    justify-content: center;
    gap: var(--nett-gap-xl);
    padding: var(--nett-space-12) 0;
    margin-bottom: var(--nett-space-12);
    border-bottom: var(--nett-border) solid var(--nett-border-color);
}

.nett-testimonials.bg-dark .testimonials-stats {
    border-bottom-color: var(--nett-gray-800);
}

.testimonial-stat {
    text-align: center;
}

.testimonial-stat-value {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-4xl);
    font-weight: var(--nett-font-bold);
    color: var(--nett-primary);
    line-height: 1;
}

.testimonial-stat-label {
    font-size: var(--nett-text-sm);
    color: var(--nett-text-muted);
    margin-top: var(--nett-space-2);
}

.nett-testimonials.bg-dark .testimonial-stat-label {
    color: var(--nett-gray-500);
}

/* =========================================================================
 * 11. ANIMATIONS
 * =========================================================================
 */

.testimonial-card.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--nett-transition-all);
}

.testimonial-card.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Animation */
.testimonials-grid.animate-stagger .testimonial-card:nth-child(1) {
    transition-delay: 0.1s;
}

.testimonials-grid.animate-stagger .testimonial-card:nth-child(2) {
    transition-delay: 0.2s;
}

.testimonials-grid.animate-stagger .testimonial-card:nth-child(3) {
    transition-delay: 0.3s;
}

.testimonials-grid.animate-stagger .testimonial-card:nth-child(4) {
    transition-delay: 0.4s;
}

.testimonials-grid.animate-stagger .testimonial-card:nth-child(5) {
    transition-delay: 0.5s;
}

.testimonials-grid.animate-stagger .testimonial-card:nth-child(6) {
    transition-delay: 0.6s;
}

/* =========================================================================
 * 12. RESPONSIVE STYLES
 * =========================================================================
 */

@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-grid.layout-masonry {
        columns: 2;
    }
    
    .testimonial-featured {
        padding: var(--nett-space-8);
    }
}

@media (max-width: 768px) {
    .testimonials-grid,
    .testimonials-grid.columns-2,
    .testimonials-grid.columns-4 {
        grid-template-columns: 1fr;
    }
    
    .testimonials-grid.layout-masonry {
        columns: 1;
    }
    
    .testimonial-featured {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .testimonial-featured-image {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .testimonial-featured-text {
        font-size: var(--nett-text-xl);
    }
    
    .testimonials-stats {
        flex-wrap: wrap;
        gap: var(--nett-gap-lg);
    }
    
    .testimonial-stat {
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .testimonials-container {
        padding: 0 var(--nett-space-4);
    }
    
    .testimonial-card {
        padding: var(--nett-space-6);
    }
    
    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }
}


    /* =========================================================================
     * 13. ADVANCED UTILITY CLASSES & ANIMATIONS (UPGRADE)
     * =========================================================================
     */
    .ntt-testimonials-fade-in {
        animation: nttTestimonialsFadeIn 1.2s var(--nett-ease) both !important;
    }
    .ntt-testimonials-slide-up {
        animation: nttTestimonialsSlideUp 0.9s var(--nett-ease) both !important;
    }
    .ntt-testimonials-bounce {
        animation: nttTestimonialsBounce 1.1s cubic-bezier(.68,-0.55,.27,1.55) both !important;
    }
    .ntt-testimonials-zoom-in {
        animation: nttTestimonialsZoomIn 0.7s var(--nett-ease) both !important;
    }
    .ntt-testimonials-shadow-xl {
        box-shadow: var(--nett-shadow-xl) !important;
    }
    .ntt-testimonials-border-primary {
        border: 2px solid var(--nett-primary) !important;
    }
    .ntt-testimonials-bg-gradient {
        background: var(--nett-gradient-primary) !important;
    }
    .ntt-testimonials-text-gradient {
        background: var(--nett-gradient-primary) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    .ntt-testimonials-blur {
        filter: blur(2px) !important;
    }
    .ntt-testimonials-scale-up {
        transform: scale(1.08) !important;
    }
    .ntt-testimonials-rotate {
        transform: rotate(-2deg) !important;
    }
    .ntt-testimonials-opacity-80 {
        opacity: 0.8 !important;
    }
    .ntt-testimonials-pointer {
        cursor: pointer !important;
    }
    .ntt-testimonials-flex-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ntt-testimonials-hidden {
        display: none !important;
    }

    @keyframes nttTestimonialsFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes nttTestimonialsSlideUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes nttTestimonialsBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-18px); }
    }
    @keyframes nttTestimonialsZoomIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    /* Ensure all selectors use !important and master variables (already present above, re-checked) */