/* ========================================
   TESTIMONIAL CAROUSEL FIX
   Fixes button flickering and icon hover effects
   ======================================== */

/* ----------------------------------------
   1. CAROUSEL BUTTONS - No flickering, stable transitions
   ---------------------------------------- */

/* Override global rules - ensure buttons work properly */
.carousel-btn,
.carousel-btn-prev,
.carousel-btn-next,
.pm-testimonials-section .carousel-btn,
.testimonial-carousel-wrapper .carousel-btn {
    position: absolute !important;
    top: 50% !important;
    margin-top: -24px !important;
    transform: none !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    outline: none !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Hover state - smooth without flickering */
.carousel-btn:hover,
.carousel-btn-prev:hover,
.carousel-btn-next:hover,
.pm-testimonials-section .carousel-btn:hover,
.testimonial-carousel-wrapper .carousel-btn:hover {
    background: #1E5CAA !important;
    background-color: #1E5CAA !important;
    border-color: #1E5CAA !important;
    box-shadow: 0 4px 15px rgba(30, 92, 170, 0.3) !important;
    transform: none !important;
}

/* Focus state */
.carousel-btn:focus,
.carousel-btn-prev:focus,
.carousel-btn-next:focus {
    outline: none !important;
    box-shadow: 0 4px 15px rgba(30, 92, 170, 0.3) !important;
}

/* Active/pressed state */
.carousel-btn:active,
.carousel-btn-prev:active,
.carousel-btn-next:active {
    transform: none !important;
}

/* Positioning */
.carousel-btn-prev {
    left: 5px !important;
    right: auto !important;
}

.carousel-btn-next {
    right: 5px !important;
    left: auto !important;
}

/* SVG inside buttons - stable color transitions */
.carousel-btn svg,
.carousel-btn-prev svg,
.carousel-btn-next svg,
.pm-testimonials-section .carousel-btn svg,
.testimonial-carousel-wrapper .carousel-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #1E5CAA !important;
    stroke-width: 2.5 !important;
    flex-shrink: 0 !important;
    transition: stroke 0.25s ease !important;
    -webkit-transition: stroke 0.25s ease !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* SVG hover state */
.carousel-btn:hover svg,
.carousel-btn-prev:hover svg,
.carousel-btn-next:hover svg,
.pm-testimonials-section .carousel-btn:hover svg,
.testimonial-carousel-wrapper .carousel-btn:hover svg {
    stroke: #ffffff !important;
}

/* ----------------------------------------
   2. TESTIMONIAL STAR ICONS - No hover effects
   ---------------------------------------- */

/* Stars should NEVER change on hover - completely static */
.testimonial-stars-new,
.testimonial-stars-new svg,
.testimonial-card-new .testimonial-stars-new,
.testimonial-card-new .testimonial-stars-new svg,
.pm-testimonials-section .testimonial-stars-new,
.pm-testimonials-section .testimonial-stars-new svg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    pointer-events: none !important;
}

/* Ensure stars keep their gold fill color */
.testimonial-stars-new svg {
    width: 18px !important;
    height: 18px !important;
    fill: #f59e0b !important;
}

/* On card hover, stars should NOT change */
.testimonial-card-new:hover .testimonial-stars-new,
.testimonial-card-new:hover .testimonial-stars-new svg {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    fill: #f59e0b !important;
}

/* ----------------------------------------
   3. TESTIMONIAL AVATAR - No white box on hover
   ---------------------------------------- */

.testimonial-avatar,
.testimonial-card-new .testimonial-avatar {
    transition: none !important;
    -webkit-transition: none !important;
}

.testimonial-card-new:hover .testimonial-avatar {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ----------------------------------------
   4. TESTIMONIAL CARDS - Clean hover
   ---------------------------------------- */

.testimonial-card-new {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.testimonial-card-new:hover {
    border-color: #1E5CAA !important;
    box-shadow: 0 8px 30px rgba(30, 92, 170, 0.12) !important;
    transform: none !important;
}

/* Ensure quote mark pseudo-element doesn't interfere */
.testimonial-card-new::before {
    pointer-events: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

.testimonial-card-new:hover::before {
    transform: none !important;
    opacity: 1 !important;
}

/* ----------------------------------------
   5. RESPONSIVE ADJUSTMENTS
   ---------------------------------------- */

@media (max-width: 767.98px) {
    .carousel-btn,
    .carousel-btn-prev,
    .carousel-btn-next {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin-top: -20px !important;
    }
    
    .carousel-btn svg,
    .carousel-btn-prev svg,
    .carousel-btn-next svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 575.98px) {
    .carousel-btn,
    .carousel-btn-prev,
    .carousel-btn-next {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin-top: -18px !important;
    }
    
    .carousel-btn svg,
    .carousel-btn-prev svg,
    .carousel-btn-next svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .carousel-btn-prev {
        left: 2px !important;
    }
    
    .carousel-btn-next {
        right: 2px !important;
    }
}

/* ----------------------------------------
   6. CAROUSEL DOTS - Clean transitions
   ---------------------------------------- */

.carousel-dot,
.carousel-dots .carousel-dot {
    transition: background-color 0.3s ease, width 0.3s ease !important;
    -webkit-transition: background-color 0.3s ease, width 0.3s ease !important;
    transform: none !important;
}

.carousel-dot:hover {
    background: #94a3b8 !important;
    transform: none !important;
}

.carousel-dot.active {
    background: #1E5CAA !important;
    width: 28px !important;
    border-radius: 5px !important;
}