/**
 * Interactive Showcase - Mobile Accordion
 * Version: 4.0.0 FINAL
 * Breakpoint: 479px and below
 * Clean & Optimized
 */

@media (max-width: 479px) {
  
  /* Container */
  .wdt-interactive-showcase-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide original content wrapper */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-content-wrapper.mobile-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
  }
  
  /* List wrapper */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
  }
  
  /* List - vertical stack */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  
  /* List items */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
  }
  
  /* Keep theme overlay */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li:before {
    height: 100% !important;
    width: 100% !important;
  }
  
  /* Li inner content */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li > a.wdt-interactive-showcase-element {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    cursor: pointer !important;
  }
  
  /* Grid to flex */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    grid-template-columns: unset !important;
  }
  
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li > .wdt-interactive-showcase-content-group a.wdt-interactive-showcase-element {
    grid-column: unset !important;
  }
  
  /* Title wrapper */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li .wdt-interactive-content-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li .wdt-content-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
  }
  
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li .wdt-content-sub-title {
    font-size: 12px !important;
    opacity: 0.8 !important;
    margin: 0 !important;
  }
  
  /* Accordion arrow */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li > a.wdt-interactive-showcase-element::after {
    content: '▼' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: currentColor !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
  }
  
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li.accordion-open > a.wdt-interactive-showcase-element::after {
    transform: translateY(-50%) rotate(180deg) !important;
    opacity: 1 !important;
  }
  
  /* Open item - unified border (top part) */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li.accordion-open {
    border: 2px solid var(--wdtPrimaryColor, #0073aa) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* Closed items */
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li:not(.accordion-open) {
    border-radius: 8px !important;
  }
  
  /* Accordion content - unified border (bottom part) */
  .wdt-interactive-showcase-container .mobile-accordion-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 2px solid var(--wdtPrimaryColor, #0073aa) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    justify-items: center !important;
  }
  
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li:not(.accordion-open) .mobile-accordion-content {
    display: none !important;
  }
  
  /* Inner div - gradient background */
  .wdt-interactive-showcase-container .mobile-accordion-content > div {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    width: 100% !important;
    background-color: transparent !important;
    background-image: linear-gradient(to top, rgb(var(--wdtSecondaryColorRgb, 0,0,0), 0.6) 30%, rgb(var(--wdtSecondaryColorRgb, 0,0,0), 0) 70%) !important;
  }
  
  /* Media group - grid layout */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-media-group {
    display: grid !important;
    align-items: flex-end !important;
    width: 100% !important;
    min-height: 250px !important;
    position: relative !important;
    background-color: inherit !important;
    background-image: inherit !important;
  }
  
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-media-group > * {
    grid-area: 1 / -1 !important;
  }
  
  /* Image wrapper */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-content-image-wrapper,
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-content-image-wrapper .wdt-content-image,
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-content-image-wrapper .wdt-content-image span,
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-content-image-wrapper .wdt-content-image a {
    height: 100% !important;
  }
  
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-content-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Image - cover */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-content-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important; /* Override tema 200px limit */
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Interactive content - relative container */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-content {
    position: relative !important;
    z-index: 1 !important;
    padding: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem) clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem) !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Play button */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-content > span i {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    cursor: pointer !important;
    width: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) !important;
    height: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) !important;
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem) !important;
    border-radius: var(--wdtRadius_Full) !important;
    background-color: rgb(var(--wdtQuaternaryColorRgb, 255,255,255), 0.8) !important;
    color: var(--wdtSecondaryColor) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
    animation: wdt-pop-up-animation 0.6s linear infinite !important;
    -webkit-animation: wdt-pop-up-animation 0.6s linear infinite !important;
  }
  
  /* Description - absolute overlay */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-content .wdt-content-description {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: -1 !important;
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem) !important;
    color: var(--wdtAccentTxtColor, #fff) !important;
    text-align: center !important;
    transform: translateY(-50%) scale(1) !important;
    -webkit-transform: translateY(-50%) scale(1) !important;
    transition: opacity 0.3s linear, transform 0.6s linear !important;
    opacity: 1 !important;
    padding: 0 20px !important;
  }
  
  /* Quote - left */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-content .wdt-content-description::before {
    content: "" !important;
    position: relative !important;
    display: inline-block !important;
    width: clamp(1.625rem, 1.45rem + 0.875vw, 2.5rem) !important;
    height: clamp(1.625rem, 1.45rem + 0.875vw, 2.5rem) !important;
    background: var(--wdtPrimaryColor) !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 63.5' style='enable-background:new 0 0 100 63.5;' xml:space='preserve'%3E%3Cpath d='M27.6,1.6c-1.9-0.6-3.9-0.9-6-0.9C11.1,0.6,2.1,8.4,1.1,18.3c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C45.8,15.8,39.1,5.2,27.6,1.6L27.6,1.6z'/%3E%3Cpath d='M81.4,1.6c-1.9-0.6-3.9-0.9-6-0.9c-10.5,0-19.6,7.8-20.6,17.7c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C99.6,15.8,92.9,5.2,81.4,1.6L81.4,1.6z'/%3E%3C/svg%3E") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 63.5' style='enable-background:new 0 0 100 63.5;' xml:space='preserve'%3E%3Cpath d='M27.6,1.6c-1.9-0.6-3.9-0.9-6-0.9C11.1,0.6,2.1,8.4,1.1,18.3c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C45.8,15.8,39.1,5.2,27.6,1.6L27.6,1.6z'/%3E%3Cpath d='M81.4,1.6c-1.9-0.6-3.9-0.9-6-0.9c-10.5,0-19.6,7.8-20.6,17.7c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C99.6,15.8,92.9,5.2,81.4,1.6L81.4,1.6z'/%3E%3C/svg%3E") !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    -webkit-mask-position: center !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
    transform: rotate(-180deg) !important;
    -webkit-transform: rotate(-180deg) !important;
    margin: 0 clamp(0.25rem, 0.175rem + 0.375vw, 0.625rem) clamp(0.375rem, 0.325rem + 0.25vw, 0.625rem) 0 !important;
    animation: wdt-quotes-animation-left-side 1s linear infinite !important;
    -webkit-animation: wdt-quotes-animation-left-side 1s linear infinite !important;
  }
  
  /* Quote - right */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-content .wdt-content-description::after {
    content: "" !important;
    position: relative !important;
    display: inline-block !important;
    width: clamp(1.625rem, 1.45rem + 0.875vw, 2.5rem) !important;
    height: clamp(1.625rem, 1.45rem + 0.875vw, 2.5rem) !important;
    background: var(--wdtPrimaryColor) !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 63.5' style='enable-background:new 0 0 100 63.5;' xml:space='preserve'%3E%3Cpath d='M27.6,1.6c-1.9-0.6-3.9-0.9-6-0.9C11.1,0.6,2.1,8.4,1.1,18.3c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C45.8,15.8,39.1,5.2,27.6,1.6L27.6,1.6z'/%3E%3Cpath d='M81.4,1.6c-1.9-0.6-3.9-0.9-6-0.9c-10.5,0-19.6,7.8-20.6,17.7c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C99.6,15.8,92.9,5.2,81.4,1.6L81.4,1.6z'/%3E%3C/svg%3E") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 63.5' style='enable-background:new 0 0 100 63.5;' xml:space='preserve'%3E%3Cpath d='M27.6,1.6c-1.9-0.6-3.9-0.9-6-0.9C11.1,0.6,2.1,8.4,1.1,18.3c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C45.8,15.8,39.1,5.2,27.6,1.6L27.6,1.6z'/%3E%3Cpath d='M81.4,1.6c-1.9-0.6-3.9-0.9-6-0.9c-10.5,0-19.6,7.8-20.6,17.7c-0.5,5.3,1.2,10.4,4.8,14.4c3.8,4.2,9.3,6.7,15,6.9 c-2.3,6.5-7.1,12.2-13.6,15.6c-1.6,0.9-2.5,2.8-2,4.6c0.5,1.8,2.1,3,3.9,3c0,0,0.1,0,0.1,0l0.3,0l0.3,0c0.6,0,1.3-0.1,1.9-0.1 c11.9-1.1,22.6-7.5,28.5-17.2c2.9-4.8,4.6-10.6,4.9-16.3C99.6,15.8,92.9,5.2,81.4,1.6L81.4,1.6z'/%3E%3C/svg%3E") !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    -webkit-mask-position: center !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
    margin: 0 0 clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem) clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem) !important;
    animation: wdt-quotes-animation-right-side 1s linear infinite !important;
    -webkit-animation: wdt-quotes-animation-right-side 1s linear infinite !important;
  }
  
  /* Media group pseudo element */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-media-group:has(> .wdt-interactive-showcase-content > .wdt-content-description)::after {
    content: "" !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background-color: inherit !important;
    background-image: inherit !important;
    pointer-events: none !important;
  }
  
  /* Button */
  .wdt-interactive-showcase-container .mobile-accordion-content .wdt-interactive-showcase-button {
    margin-top: 20px !important;
  }
  
  /* Responsive media */
  .wdt-interactive-showcase-container .mobile-accordion-content iframe,
  .wdt-interactive-showcase-container .mobile-accordion-content video {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    border-radius: 8px !important;
  }
  
  /* Transitions */
  .wdt-interactive-showcase-container .mobile-accordion-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .wdt-interactive-showcase-container .wdt-interactive-showcase-list li {
    transition: all 0.3s ease !important;
  }
  
  .wdt-cus-title-aside-interactive-showcase .wdt-interactive-showcase-container .wdt-interactive-showcase-list-wrapper ul.wdt-interactive-showcase-list li .wdt-interactive-showcase-content-group .wdt-content-image-wrapper .wdt-content-image img {
    max-height: none !important;
    height: 100% !important;
  }
}

/* Animations */
@keyframes wdt-pop-up-animation {
    0% {
        box-shadow: rgba(249, 255, 254, 0.16) 0px 0px 0px 0.0733333px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 10.1467px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 30.1467px;
    }
    50% {
        box-shadow: rgba(249, 255, 254, 0.16) 0px 0px 0px 0.63px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 11.26px,
                    rgba(249, 255, 254, 0.15) 0px 0px 0px 31.26px;
    }
    100% {
        box-shadow: rgba(249, 255, 254, 0.16) 0px 0px 0px 0.0733333px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 10.1467px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 30.1467px;
    }
}

@-webkit-keyframes wdt-pop-up-animation {
    0% {
        box-shadow: rgba(249, 255, 254, 0.16) 0px 0px 0px 0.0733333px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 10.1467px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 30.1467px;
    }
    50% {
        box-shadow: rgba(249, 255, 254, 0.16) 0px 0px 0px 0.63px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 11.26px,
                    rgba(249, 255, 254, 0.15) 0px 0px 0px 31.26px;
    }
    100% {
        box-shadow: rgba(249, 255, 254, 0.16) 0px 0px 0px 0.0733333px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 10.1467px,
                    rgba(249, 255, 254, 0.16) 0px 0px 0px 30.1467px;
    }
}

@keyframes wdt-quotes-animation-left-side {
    0% { transform: scale(1) translateY(0) rotate(-180deg); }
    50% { transform: scale(1.03) translateY(2px) rotate(-180deg); }
    100% { transform: scale(1) translateY(0) rotate(-180deg); }
}

@-webkit-keyframes wdt-quotes-animation-left-side {
    0% {
        transform: scale(1) translateY(0) rotate(-180deg);
        -webkit-transform: scale(1) translateY(0) rotate(-180deg);
    }
    50% {
        transform: scale(1.03) translateY(2px) rotate(-180deg);
        -webkit-transform: scale(1.03) translateY(2px) rotate(-180deg);
    }
    100% {
        transform: scale(1) translateY(0) rotate(-180deg);
        -webkit-transform: scale(1) translateY(0) rotate(-180deg);
    }
}

@keyframes wdt-quotes-animation-right-side {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(1.5px); }
    100% { transform: scale(1) translateY(0); }
}

@-webkit-keyframes wdt-quotes-animation-right-side {
    0% {
        transform: scale(1) translateY(0);
        -webkit-transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.03) translateY(1.5px);
        -webkit-transform: scale(1.03) translateY(1.5px);
    }
    100% {
        transform: scale(1) translateY(0);
        -webkit-transform: scale(1) translateY(0);
    }
}