/**
 * Vivaia Lookbook Flipper Styles
 */

/* ============================================
   Root Wrapper
   ============================================ */
.vivaia-lookbook-flipper-wrapper {
    width: 100%;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    color: #191817;
    overflow: hidden;
}

.vivaia-lookbook-flipper-wrapper * {
    box-sizing: border-box;
}

/* ============================================
   Desktop/Tablet Version (>767px)
   ============================================ */
.vivaia-lookbook-flipper-desktop {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    margin-top: 4.167vw;
}

/* Text Section (Left) */
.vivaia-lookbook-flipper-text-section {
    display: flex;
    flex-direction: column;
    gap: 1.667vw;
    margin-left: 20px;
    min-width: 150px;
}

.vivaia-lookbook-flipper-main-title {
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: 500;
    line-height: 1.2;
    color: #191817;
    margin: 0;
}

.vivaia-lookbook-flipper-text-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.667vw;
}

.vivaia-lookbook-flipper-item-title {
    font-size: clamp(16px, 1.8vw, 32px);
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #191817;
    position: relative;
}

.vivaia-lookbook-flipper-item-title span {
    display: inline-block;
}

/* Underline on hover/active - Multiple specificity levels to override theme */
.vivaia-lookbook-flipper-wrapper .vivaia-lookbook-flipper-desktop .vivaia-lookbook-flipper-item-title:hover,
.vivaia-lookbook-flipper-wrapper .vivaia-lookbook-flipper-desktop .vivaia-lookbook-flipper-item-title.active,
.vivaia-lookbook-flipper-wrapper .vivaia-lookbook-flipper-item-title:hover,
.vivaia-lookbook-flipper-wrapper .vivaia-lookbook-flipper-item-title.active,
.vivaia-lookbook-flipper-item-title:hover,
.vivaia-lookbook-flipper-item-title.active {
    text-decoration: underline !important;
}

.vivaia-lookbook-flipper-wrapper .vivaia-lookbook-flipper-item-title:hover span,
.vivaia-lookbook-flipper-wrapper .vivaia-lookbook-flipper-item-title.active span,
.vivaia-lookbook-flipper-item-title:hover span,
.vivaia-lookbook-flipper-item-title.active span {
    text-decoration: underline !important;
}

/* Image Section (Right) */
.vivaia-lookbook-flipper-image-section {
    position: relative;
    width: 100%;
    max-width: 29vw;
    height: 38vw;
    max-height: 38vw;
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    padding-left: 30px;
}

.vivaia-lookbook-flipper-image {
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0.75;
    transition: all 0.4s ease;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    left: -30px;
}

.vivaia-lookbook-flipper-image.active {
    opacity: 1;
    z-index: 1000 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Mobile Version (<768px)
   ============================================ */
.vivaia-lookbook-flipper-mobile {
    display: block;
    padding-bottom: 5vw;
    margin-top: 5.33vw;
    overflow: hidden;
}

.vivaia-lookbook-flipper-mobile .vivaia-lookbook-flipper-main-title {
    font-size: clamp(20px, 5vw, 32px);
    margin-bottom: 4vw;
    margin-left: 10px;
    text-align: left;
}

/* Hide mobile on desktop */
@media (min-width: 768px) {
    .vivaia-lookbook-flipper-mobile {
        display: none;
    }
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 991px) {
    .vivaia-lookbook-flipper-desktop {
        margin-top: 3vw;
    }

    .vivaia-lookbook-flipper-text-section {
        gap: 2vw;
    }

    .vivaia-lookbook-flipper-text-list {
        gap: 2vw;
    }

    .vivaia-lookbook-flipper-image-section {
        max-width: 38vw;
        height: 48vw;
        max-height: 48vw;
    }
}

@media (max-width: 767px) {
    /* Hide desktop version */
    .vivaia-lookbook-flipper-desktop {
        display: none;
    }

    /* Carousel Styles */
    .vivaia-lookbook-flipper-carousel {
        position: relative;
        width: 100%;
    }

    .vivaia-lookbook-flipper-slide {
        position: relative;
        overflow: hidden;
        border-radius: 0;
        width: 70vw;
        min-width: 250px;
        max-width: 400px;
    }

    .vivaia-lookbook-flipper-slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Mobile Overlay */
    .vivaia-lookbook-flipper-mobile-overlay {
        position: absolute;
        left: 2.67vw;
        top: 2.67vw;
        z-index: 2;
        width: 94%;
        pointer-events: none;
        background: none !important;
    }

    .vivaia-lookbook-flipper-mobile-title {
        color: #ffffff;
        font-size: clamp(16px, 4.5vw, 24px);
        font-weight: 500;
        text-shadow: none !important;
        background: none !important;
        background-color: transparent !important;
    }

    /* Owl Carousel Overrides */
    .vivaia-lookbook-flipper-carousel.owl-carousel .owl-stage-outer {
        overflow: visible;
    }

    .vivaia-lookbook-flipper-carousel.owl-carousel .owl-stage {
        display: flex;
    }

    .vivaia-lookbook-flipper-carousel.owl-carousel .owl-item {
        margin-right: 5px;
    }

    /* Scrollbar */
    .vivaia-lookbook-flipper-carousel .owl-dots {
        display: none;
    }

    /* Custom scrollbar if added via JS */
    .vivaia-lookbook-flipper-scrollbar {
        position: relative;
        height: 4px;
        background: rgba(0, 0, 0, 0.1);
        margin-top: 3vw;
        border-radius: 2px;
    }

    .vivaia-lookbook-flipper-scrollbar-drag {
        position: absolute;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
        transition: transform 0.3s ease;
    }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .vivaia-lookbook-flipper-image,
    .vivaia-lookbook-flipper-item-title {
        transition: none;
    }
}

/* ============================================
   Elementor Editor Mode
   ============================================ */
.elementor-editor-active .vivaia-lookbook-flipper-wrapper {
    min-height: 400px;
}

.elementor-editor-active .vivaia-lookbook-flipper-image-section {
    min-height: 300px;
}