/* SWS Testimonial Carousel - Strict Namespaced CSS */

.sws-tcarousel-section * {
    box-sizing: border-box;
}

.sws-tcarousel-section {
    --sws-navy: #0A1628;
    --sws-gold: #F4AB4B;
    --sws-white: #FFFFFF;
    --sws-bg: #FFF9F0;
    
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 50px 30px;
    background: var(--sws-bg);
    border: 4px solid var(--sws-navy);
    border-radius: 16px;
    box-shadow: 6px 6px 0 var(--sws-navy);
    font-family: 'Josefin Sans', sans-serif;
    overflow: hidden;
}

/* Background Texture */
.sws-tcarousel-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; opacity: 0.3; z-index: 1;
}

/* Header Area */
.sws-tcarousel-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative; z-index: 2;
}
.sws-tcarousel-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--sws-white); border: 3px solid var(--sws-navy);
    border-radius: 50px; padding: 8px 20px; margin-bottom: 20px;
    font-size: 0.85rem; font-weight: 700; color: var(--sws-navy);
    box-shadow: 3px 3px 0 var(--sws-gold);
}
.sws-tcarousel-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    line-height: 1.1; letter-spacing: 0.05em; margin: 0 0 10px 0;
}
.sws-tcarousel-dark { color: var(--sws-navy); }
.sws-tcarousel-gold { color: var(--sws-gold); }
.sws-tcarousel-subtitle {
    font-size: 1.1rem; color: var(--sws-navy); font-weight: 600;
    margin-bottom: 20px; opacity: 0.8;
}
.sws-tcarousel-divider {
    width: 80px; height: 4px; background: var(--sws-gold);
    margin: 0 auto; border-radius: 2px;
}

/* Slider Track Layout */
.sws-tcarousel-viewport {
    position: relative; z-index: 2;
    overflow: hidden; width: 100%;
    padding: 20px 0 40px 0;
}
.sws-tcarousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 24px;
}

/* Individual Slides */
.sws-tcarousel-slide {
    flex: 0 0 280px;
    height: 360px;
    opacity: 0.5;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.sws-tcarousel-slide.active-slide {
    flex: 0 0 360px;
    height: 420px;
    opacity: 1;
    transform: scale(1);
}
.sws-tcarousel-slide.flank-slide {
    opacity: 0.8;
}

/* The Video Card wrapper */
.sws-tcarousel-card {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 12px;
    background: #111;
    border: 4px solid var(--sws-navy);
    box-shadow: 4px 4px 0 rgba(10, 22, 40, 0.2);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.sws-tcarousel-slide.active-slide .sws-tcarousel-card {
    box-shadow: 6px 6px 0 var(--sws-gold);
}

/* Video Card Internals */
.sws-tcarousel-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    z-index: 1; transition: opacity 0.3s;
}
.sws-tcarousel-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    background: var(--sws-gold);
    border: 4px solid var(--sws-white);
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}
.sws-tcarousel-play-btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 52%;
    transform: translate(-50%, -50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid var(--sws-white);
}
.sws-tcarousel-card:hover .sws-tcarousel-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.sws-tcarousel-spinner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: var(--sws-gold);
    border-radius: 50%;
    z-index: 3;
    display: none;
    animation: swsTSpin 1s linear infinite;
}
@keyframes swsTSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* The Iframe Container */
.sws-tcarousel-iframe-container {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 10;
    opacity: 0;
    pointer-events: none; /* Let shield handle clicks */
}
.sws-tcarousel-iframe-container iframe {
    width: 100%; height: 100%; border: none;
}

/* The Invisible Click Shield */
.sws-tcarousel-click-shield {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 20;
    cursor: pointer;
}

/* STATE MODIFIERS (Applied via JS) */
.sws-tcarousel-card.state-loading .sws-tcarousel-play-btn { display: none; }
.sws-tcarousel-card.state-loading .sws-tcarousel-spinner { display: block; }

.sws-tcarousel-card.state-playing .sws-tcarousel-play-btn { display: none; }
.sws-tcarousel-card.state-playing .sws-tcarousel-spinner { display: none; }
.sws-tcarousel-card.state-playing .sws-tcarousel-thumb { opacity: 0; }
.sws-tcarousel-card.state-playing .sws-tcarousel-iframe-container { opacity: 1; }

.sws-tcarousel-card.state-paused .sws-tcarousel-play-btn { display: block; }
.sws-tcarousel-card.state-paused .sws-tcarousel-spinner { display: none; }
.sws-tcarousel-card.state-paused .sws-tcarousel-thumb { opacity: 0; }
.sws-tcarousel-card.state-paused .sws-tcarousel-iframe-container { opacity: 1; }


/* Controls (Arrows & Audio) */
.sws-tcarousel-controls {
    display: flex; justify-content: center; align-items: center;
    gap: 20px; position: relative; z-index: 2; margin-bottom: 25px;
}
.sws-tcarousel-arrow {
    width: 50px; height: 50px;
    border: 3px solid var(--sws-navy); border-radius: 50%;
    background: var(--sws-white); color: var(--sws-navy);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 3px 3px 0 var(--sws-navy);
    transition: all 0.2s ease; padding: 0;
}
.sws-tcarousel-arrow svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.sws-tcarousel-arrow:hover {
    background: var(--sws-gold); color: var(--sws-white);
    transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--sws-navy);
}
.sws-tcarousel-arrow:active {
    transform: translate(0, 0); box-shadow: 1px 1px 0 var(--sws-navy);
}

/* Audio Toggle Wrapper */
.sws-tcarousel-audio-wrap {
    display: flex; background: var(--sws-white);
    border: 3px solid var(--sws-navy); border-radius: 50px;
    padding: 4px; box-shadow: 3px 3px 0 var(--sws-navy);
}
.sws-tcarousel-audio-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: 50px;
    background: transparent; color: var(--sws-navy);
    font-family: inherit; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; opacity: 0.5; transition: all 0.2s ease;
}
.sws-tcarousel-audio-btn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sws-tcarousel-audio-btn.active {
    background: var(--sws-navy); color: var(--sws-white); opacity: 1;
}

/* Indicators */
.sws-tcarousel-dots {
    display: flex; justify-content: center; gap: 10px; position: relative; z-index: 2;
}
.sws-tcarousel-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: transparent; border: 2px solid var(--sws-navy);
    cursor: pointer; transition: all 0.3s;
}
.sws-tcarousel-dot.active {
    background: var(--sws-gold); transform: scale(1.3); border-color: var(--sws-gold);
}

/* Responsive */
@media (max-width: 1024px) {
    .sws-tcarousel-slide { flex: 0 0 240px; height: 320px; }
    .sws-tcarousel-slide.active-slide { flex: 0 0 320px; height: 380px; }
}
@media (max-width: 768px) {
    .sws-tcarousel-slide { flex: 0 0 200px; height: 280px; }
    .sws-tcarousel-slide.active-slide { flex: 0 0 260px; height: 340px; }
    .sws-tcarousel-audio-btn span { display: none; } /* Hide text on mobile to save space */
    .sws-tcarousel-audio-btn { padding: 10px 14px; }
}
@media (max-width: 480px) {
    .sws-tcarousel-slide { flex: 0 0 160px; height: 240px; }
    .sws-tcarousel-slide.active-slide { flex: 0 0 220px; height: 300px; }
    .sws-tcarousel-arrow { width: 44px; height: 44px; }
}