/**
 * Stories Custom Styles
 * 
 * This file contains custom styles for the WooCommerce Gallery Stories feature.
 * You can add your own customizations here to override the default plugin styles.
 */

.woo-gallery-story-content img,
.woo-gallery-story-content video{
    aspect-ratio: 9/16;
    object-fit: cover;
}
.woo-gallery-wrapper.has-stories{
    width: 1200px;
    max-width: 90%;
    max-height: 80vh;
}
.woo-gallery-stories,
.woo-gallery-story-content{
    width: 100%;
    height: 100%;
}
.woo-gallery-stories .woo-gallery-stories-container {
    display: flex;
    height: 100%;
}
.woo-gallery-story-video {
    width: 100% !important;
}
.woo-gallery-story-content img,
.woo-gallery-story-content video {
    aspect-ratio: 9/16 !important;
    object-fit: cover !important;
    height: 100% !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 8px;
}

.woo-gallery-story .woo-gallery-story-content {
    transform: scale(0.8) !important;
    transition: all 0.1s ease-out;
}

.woo-gallery-story.story-view-active .woo-gallery-story-content{
    transform: scale(1) !important;
}

.woo-gallery-story-video-controls{
    position: absolute;
    top: 12px;
    right: 12px;
}
.woo-gallery-story-video-controls button{
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0009;
    backdrop-filter: blur(4px);
    color: #fff;
}
.woo-gallery-story-video-controls button span.play-icon{
 font-size: 12px;   
}
.woo-gallery-story-video-controls button span.pause-icon{
 font-size: 16px;   
}