/**
 * Vertical Stacked Slider - Styles
 */

/* ===================
   Base Wrapper
   =================== */
.vss-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    gap: 20px;
    --vss-transition-duration: 500ms;
    --vss-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

.vss-wrapper:focus {
    outline: none;
}

/* ===================
   Slides Container
   =================== */
.vss-slides-container {
    position: relative;
    flex: 1;
    height: 500px;
    overflow: visible;
}

/* ===================
   Individual Slides
   =================== */
.vss-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: #1a1a2e;
    overflow: hidden;
    transform-origin: center top;
    will-change: transform, opacity;
    transition: 
        transform var(--vss-transition-duration) var(--vss-transition-easing),
        opacity var(--vss-transition-duration) var(--vss-transition-easing);
}

/* Ensure nested content doesn't break layout */
.vss-slide > * {
    height: 100%;
}

/* Clickable peeking cards cursor */
.vss-wrapper[data-vss-settings*='"enableClickCards":true'] .vss-slide:not([style*="translateY(0)"]) {
    cursor: pointer;
}

/* ===================
   Glow Effect
   =================== */
.vss-glow {
    position: absolute;
    width: var(--vss-glow-spread, 150px);
    height: var(--vss-glow-spread, 150px);
    background: radial-gradient(
        circle,
        var(--vss-glow-color, #8B5CF6) 0%,
        transparent 70%
    );
    opacity: var(--vss-glow-opacity, 0.5);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    transition: opacity 0.3s ease;
}

/* Glow positions */
.vss-glow-top-left .vss-glow {
    top: -50px;
    left: -50px;
}

.vss-glow-top-center .vss-glow {
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.vss-glow-top-right .vss-glow {
    top: -50px;
    right: -50px;
}

.vss-glow-bottom-left .vss-glow {
    bottom: -50px;
    left: -50px;
}

.vss-glow-bottom-center .vss-glow {
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.vss-glow-bottom-right .vss-glow {
    bottom: -50px;
    right: -50px;
}

/* ===================
   Pagination
   =================== */
.vss-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

.vss-pagination-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
}

.vss-pagination-dot:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.vss-pagination-dot.active {
    background: #8B5CF6;
    border-color: #8B5CF6;
}

.vss-dot-number {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

.vss-pagination-dot.active .vss-dot-number {
    color: #ffffff;
}

/* Pagination positions */
.vss-pagination-right {
    flex-direction: row;
}

.vss-pagination-right .vss-pagination {
    order: 2;
}

.vss-pagination-right .vss-slides-container {
    order: 1;
}

.vss-pagination-left {
    flex-direction: row;
}

.vss-pagination-left .vss-pagination {
    order: 1;
}

.vss-pagination-left .vss-slides-container {
    order: 2;
}

.vss-pagination-bottom {
    flex-direction: column;
}

.vss-pagination-bottom .vss-pagination {
    flex-direction: row;
    order: 2;
}

.vss-pagination-bottom .vss-slides-container {
    order: 1;
}

/* ===================
   Builder Styles (when not initialized)
   =================== */
/* Show peek effect preview in builder */
.vss-wrapper:not(.vss-initialized) .vss-slides-container {
    min-height: 500px;
    position: relative;
}

/* Hide Bricks placeholder from layout - ALWAYS hide it */
.vss-slides-container > .brx-nestable-children-placeholder,
.vss-slides-container > .brx-nestable-children-placeholder.vss-slide {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
    transform: none !important;
}

/* Target slide children (not placeholder) */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:not(.brx-nestable-children-placeholder) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* First slide - element right after placeholder (MUST be fully opaque) */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > .brx-nestable-children-placeholder + *,
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:first-child:not(.brx-nestable-children-placeholder) {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

/* Second slide - first peek */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > .brx-nestable-children-placeholder + * + *,
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:first-child:not(.brx-nestable-children-placeholder) + * {
    transform: translateY(50px) scale(0.95) !important;
    opacity: 0.7 !important;
    z-index: 99 !important;
}

/* Third slide - second peek */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > .brx-nestable-children-placeholder + * + * + *,
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:first-child:not(.brx-nestable-children-placeholder) + * + * {
    transform: translateY(85px) scale(0.92) !important;
    opacity: 0.5 !important;
    z-index: 98 !important;
}

/* Fourth slide - third peek */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > .brx-nestable-children-placeholder + * + * + * + *,
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:first-child:not(.brx-nestable-children-placeholder) + * + * + * {
    transform: translateY(115px) scale(0.89) !important;
    opacity: 0.35 !important;
    z-index: 97 !important;
}

/* Fifth slide - fourth peek */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > .brx-nestable-children-placeholder + * + * + * + * + *,
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:first-child:not(.brx-nestable-children-placeholder) + * + * + * + * {
    transform: translateY(140px) scale(0.86) !important;
    opacity: 0.2 !important;
    z-index: 96 !important;
}

/* Hide remaining slides (6+) in builder */
.vss-wrapper:not(.vss-initialized) .vss-slides-container > .brx-nestable-children-placeholder + * + * + * + * + * + *,
.vss-wrapper:not(.vss-initialized) .vss-slides-container > *:first-child:not(.brx-nestable-children-placeholder) + * + * + * + * + * {
    opacity: 0 !important;
    z-index: 0 !important;
}

/* Ensure active slide is always fully opaque when JS initializes */
.vss-wrapper.vss-initialized .vss-slide[style*="translateY(0)"] {
    opacity: 1 !important;
}

/* ===================
   Responsive
   =================== */
@media (max-width: 768px) {
    .vss-wrapper {
        flex-direction: column;
    }

    .vss-pagination-right,
    .vss-pagination-left {
        flex-direction: column;
    }

    .vss-pagination-right .vss-pagination,
    .vss-pagination-left .vss-pagination {
        flex-direction: row;
        order: 2;
    }

    .vss-pagination-right .vss-slides-container,
    .vss-pagination-left .vss-slides-container {
        order: 1;
    }

    .vss-pagination {
        flex-direction: row;
        justify-content: center;
        padding: 16px 0;
    }

    .vss-slides-container {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .vss-slides-container {
        height: 350px;
    }

    .vss-pagination-dot {
        width: 28px;
        height: 28px;
    }

    .vss-dot-number {
        font-size: 11px;
    }
}

/* ===================
   Accessibility
   =================== */
.vss-pagination-dot:focus {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}

.vss-pagination-dot:focus:not(:focus-visible) {
    outline: none;
}

.vss-pagination-dot:focus-visible {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .vss-slide {
        transition-duration: 0.01ms !important;
    }

    .vss-glow {
        transition: none;
    }

    .vss-pagination-dot {
        transition: none;
    }
}