/* Whoopba Shared Theme Components: Testimonials & Solutions */

/* --- Testimonials Slider --- */
#wt-root{--wt-teal-900:#0a5f58;--wt-teal-700:#0c8479;--wt-teal-600:#0f9c90;--wt-teal-500:#12aea1;--wt-ink:#0b2b28;--wt-white:#fff;--wt-gold:#ffc94d;--wt-font:'Titillium Web','Segoe UI',Arial,sans-serif;font-family:var(--wt-font);box-sizing:border-box}
    #wt-root *,#wt-root *::before,#wt-root *::after{box-sizing:inherit}
    #wt-root .wt-heading{max-width:100%;margin:0 auto 36px;text-align:center}
    #wt-root .wt-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wt-teal-700);background:#d9f5f1;padding:6px 14px;border-radius:999px;margin-bottom:14px}
    #wt-root .wt-title{font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--wt-ink);line-height:1.2;margin:0}
    #wt-root .wt-carousel{position:relative;max-width:1670px;margin:0 auto;touch-action:pan-y}
    #wt-root .wt-viewport{overflow:hidden;border-radius:22px}
    #wt-root .wt-track{display:flex;transition:transform .5s cubic-bezier(.65,0,.35,1);will-change:transform}
    #wt-root .wt-slide{flex:0 0 100%;display:flex;align-items:stretch;background:linear-gradient(155deg,var(--wt-teal-600),var(--wt-teal-700));min-height:500px}
    #wt-root .wt-photo{flex:0 0 300px;position:relative;background:#d8d8d8}
    #wt-root .wt-photo img{width:100%;height:100%;object-fit:cover;display:block}
    #wt-root .wt-author-bar{position:absolute;left:0;right:0;bottom:0;background:var(--wt-white);padding:16px 20px}
    #wt-root .wt-author-name{display:block;font-weight:700;font-size:16px;color:var(--wt-ink)}
    #wt-root .wt-author-role{display:block;font-size:13px;color:var(--wt-teal-700);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
    #wt-root .wt-content{flex:1 1 auto;padding:44px 44px 30px;display:flex;flex-direction:column;color:var(--wt-white);min-width:0}
    #wt-root .wt-quote-mark{font-size:64px;line-height:.6;font-weight:700;color:rgba(255,255,255,.55);font-family:Georgia,'Times New Roman',serif;margin-bottom:6px;user-select:none}
    #wt-root .wt-text{font-size:16px;line-height:1.65;font-weight:300;flex:1 1 auto;max-height:360px;overflow-y:auto;padding-right:10px}
    #wt-root .wt-text p{margin:0 0 14px}
    #wt-root .wt-text p:last-child{margin-bottom:0}
    #wt-root .wt-text::-webkit-scrollbar{width:6px}
    #wt-root .wt-text::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:6px}
    #wt-root .wt-text::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);border-radius:6px}
    #wt-root .wt-footer{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
    #wt-root .wt-stars{color:var(--wt-gold);font-size:18px;letter-spacing:3px}
    #wt-root .wt-counter{font-size:14px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.04em}
    #wt-root .wt-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:var(--wt-white);color:var(--wt-teal-700);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(10,60,55,.25);transition:background .2s,transform .2s;z-index:2}
    #wt-root .wt-nav:hover{background:var(--wt-teal-600);color:var(--wt-white)}
    #wt-root .wt-nav:focus-visible{outline:3px solid var(--wt-teal-900);outline-offset:2px}
    #wt-root .wt-nav-prev{left:-20px}
    #wt-root .wt-nav-next{right:-20px}
    #wt-root .wt-dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
    #wt-root .wt-dot{width:9px;height:9px;border-radius:50%;border:0;background:#bfe6e1;cursor:pointer;padding:0;transition:background .2s,transform .2s}
    #wt-root .wt-dot:hover{background:var(--wt-teal-500)}
    #wt-root .wt-dot[aria-current=true]{background:var(--wt-teal-700);transform:scale(1.25)}
    @media(max-width:720px){
      #wt-root .wt-slide{flex-direction:column;min-height:0}
      #wt-root .wt-photo{flex:0 0 220px}
      #wt-root .wt-content{padding:30px 24px 26px}
      #wt-root .wt-text{max-height:none;overflow-y:visible;padding-right:0}
      #wt-root .wt-nav{display:none}
    }
    @media(prefers-reduced-motion:reduce){#wt-root .wt-track{transition:none}}

/* --- Additional Solutions Slider --- */
.whoopba-slider-section {
                width: 100%;
                max-width: 1200px;
                margin: 50px auto;
                padding: 40px 20px;
                font-family: "Titillium Web", sans-serif;
                box-sizing: border-box;
                overflow: hidden;
            }
            .whoopba-slider-header {
                text-align: center;
                margin-bottom: 40px;
            }
            .whoopba-slider-title {
                color: #151515;
                font-size: clamp(26px, 4vw, 38px);
                font-weight: 600;
                margin: 0 0 12px 0;
                line-height: 1.2;
            }
            .whoopba-slider-subtitle {
                color: #686568;
                font-size: clamp(14px, 2vw, 17px);
                font-weight: 400;
                margin: 0;
            }

            /* Carousel Track Container */
            .whoopba-carousel-viewport {
                width: 100%;
                overflow: hidden;
                position: relative;
                padding: 10px 0 20px;
            }
            .whoopba-carousel-track {
                display: flex;
                gap: 20px;
                transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
                will-change: transform;
            }
            .whoopba-carousel-slide {
                flex: 0 0 calc((100% - 80px) / 5); /* 5 cards per view on desktop */
                min-width: 180px;
                box-sizing: border-box;
            }

            /* Card Styles */
            .whoopba-card {
                background: #ffffff;
                border: 1px solid rgba(0, 0, 0, 0.09);
                border-radius: 18px;
                padding: 28px 16px 22px;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                text-decoration: none !important;
                height: 100%;
                box-sizing: border-box;
                transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
                box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
            }
            .whoopba-card:hover {
                transform: translateY(-5px);
                border-color: #10AAA3;
                box-shadow: 0 14px 32px rgba(16, 170, 163, 0.14);
            }
            .whoopba-card-icon-wrap {
                width: 52px;
                height: 52px;
                border-radius: 12px;
                background: rgba(16, 170, 163, 0.09);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 20px;
                color: #10AAA3;
                transition: background 0.2s ease;
            }
            .whoopba-card:hover .whoopba-card-icon-wrap {
                background: rgba(16, 170, 163, 0.16);
            }
            .whoopba-card-icon-wrap svg {
                width: 26px;
                height: 26px;
                stroke: currentColor;
                display: block;
            }
            .whoopba-card-title {
                color: #151515;
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 14px;
                line-height: 1.3;
                transition: color 0.18s ease;
            }
            .whoopba-card:hover .whoopba-card-title {
                color: #10AAA3;
            }
            .whoopba-card-learn {
                color: #10AAA3;
                font-size: 13px;
                font-weight: 600;
                margin-top: auto;
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }

            /* Controls: Arrows & Dots */
            .whoopba-carousel-controls {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                margin-top: 24px;
            }
            .whoopba-carousel-arrows {
                display: flex;
                align-items: center;
                gap: 16px;
            }
            .whoopba-arrow-btn {
                width: 46px !important;
                height: 46px !important;
                border-radius: 50% !important;
                border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
                background: #ffffff !important;
                color: #151515 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease !important;
                outline: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }
            .whoopba-arrow-btn:hover {
                border-color: #10AAA3 !important;
                color: #10AAA3 !important;
                background: rgba(16, 170, 163, 0.08) !important;
                transform: scale(1.06);
            }
            .whoopba-arrow-btn svg {
                width: 22px !important;
                height: 22px !important;
                stroke-width: 2.2 !important;
                stroke: currentColor !important;
                fill: none !important;
                display: block !important;
            }

            /* Dots */
            .whoopba-carousel-dots {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .whoopba-dot {
                width: 7px !important;
                height: 7px !important;
                border-radius: 50% !important;
                background: #c2c2c2 !important;
                opacity: 0.6 !important;
                cursor: pointer !important;
                transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, width 0.2s ease !important;
                border: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                outline: none !important;
            }
            .whoopba-dot:hover,
            .whoopba-dot:focus {
                background: #10AAA3 !important;
                opacity: 0.85 !important;
                box-shadow: none !important;
            }
            .whoopba-dot.is-active {
                background: #10AAA3 !important;
                opacity: 1 !important;
                width: 20px !important;
                border-radius: 4px !important;
            }

            /* Breakpoints */
            @media (max-width: 1100px) {
                .whoopba-carousel-slide {
                    flex: 0 0 calc((100% - 60px) / 4);
                }
            }
            @media (max-width: 850px) {
                .whoopba-carousel-slide {
                    flex: 0 0 calc((100% - 40px) / 3);
                }
            }
            @media (max-width: 600px) {
                .whoopba-carousel-slide {
                    flex: 0 0 calc((100% - 20px) / 2);
                }
            }
            @media (max-width: 400px) {
                .whoopba-carousel-slide {
                    flex: 0 0 100%;
                }
            }

/* ================================================================
   Whoopba Button Hover Sparkle & Theme Enhancements
   ================================================================ */

/* Universal root-relative star icon for production domain portability */
.demo-star-btn .elementor-button::after {
    background-image: url("/wp-content/uploads/2026/03/New-Project-4.png") !important;
}

/* White Sparkle Star for buttons inside teal banner containers */
.elementor-element-33483b2e .demo-star-btn .elementor-button::after,
.elementor-element-139b0a3 .demo-star-btn .elementor-button::after,
.elementor-element-764a2247 .demo-star-btn .elementor-button::after,
.elementor-element-9cd700d .demo-star-btn .elementor-button::after,
.demo-star-btn--white .elementor-button::after {
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.22)) !important;
    right: -14px !important;
    top: -28px !important;
}

/* Ensure banner buttons retain their crisp outlined transparent styling */
.elementor-element-72e254c6 a.elementor-button,
.elementor-element-2fcbbbd a.elementor-button {
    background-color: transparent !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
}
.elementor-element-72e254c6 a.elementor-button:hover,
.elementor-element-2fcbbbd a.elementor-button:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Ensure teal banner containers do not clip hovering stars */
.elementor-element-33483b2e,
.elementor-element-139b0a3,
.elementor-element-764a2247,
.elementor-element-9cd700d {
    overflow: visible !important;
}

/* Composited Animations & Clean Transitions */
button.whoopba-mobile-panel__close {
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.sw-mcard {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}