/* Verticle Carousel Module Styles */
/* Follows project theme system using CSS custom properties */

/* ========================================
   SIMPLE DROPDOWN LAYOUT
   ======================================== */
.simple-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color, rgba(10, 20, 30, 1.0));
    /* border: 1px solid var(--border-color, rgba(80, 100, 120, 0.5)); */
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all .25s ease-in-out;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    /* Prevent scroll propagation to underlying content */
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* keep SVG overlay as primary; fallback background can remain if desired */
}

.simple-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Inline honey SVG background overlay */
.simple-dropdown .simple-dropdown-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.58;
    pointer-events: none;
}

.simple-dropdown .simple-dropdown-bg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure content sits above background */
.simple-dropdown > .left-div,
.simple-dropdown > .right-div {
    position: relative;
    z-index: 1;
}

/* ========================================
   LEFT DIV - 60% CAROUSEL AREA
   ======================================== */
.simple-dropdown .left-div {
    flex: 0 0 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* ========================================
   RIGHT DIV - 40% NAVIGATION AREA
   ======================================== */
.simple-dropdown .right-div {
    flex: 0 0 40% !important;
    /* background: rgba(255, 255, 255, 0.1) !important; */
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 20px !important;
    padding-top: 50px !important;
    text-align: right !important;
    min-width: 0 !important;
}

/* Right div media queries */
@media (max-width: 768px) {
    .simple-dropdown .right-div {
        padding: 15px !important;
        padding-top: 50px !important;
    }
}

@media (max-width: 480px) {
    .simple-dropdown .right-div {
        padding: 10px !important;
        padding-top: 50px !important;
        padding-right: 22px !important;
    }
}

/* ========================================
   NAVIGATION LINKS
   ======================================== */
.simple-dropdown .right-div .vc-nav-link {
    color: var(--h1-color, rgba(216, 222, 233, 1.0)) !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 8px 0 !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: block !important;
    border-radius: 6px !important;
    /* border: 1px solid transparent !important; */
}

.simple-dropdown .right-div .vc-nav-link:hover {
    color: var(--highlight-color, rgba(220, 230, 240, 0.9)) !important;
    /* background: var(--accent-color-1, rgba(138, 1, 88, 0.2)) !important; */
    /* border-color: var(--accent-color-1, rgba(138, 1, 88, 1.0)) !important; */
    transform: translateX(5px) !important;
    /* box-shadow: 0 2px 8px var(--glow-color-1, rgba(138, 1, 88, 0.3)) !important; */
}

.simple-dropdown .right-div .vc-nav-link:active {
    transform: translateX(2px) !important;
    /* background: var(--accent-color-1, rgba(138, 1, 88, 0.3)) !important; */
}

/* Navigation links media queries */
@media (max-width: 768px) {
    .simple-dropdown .right-div .vc-nav-link {
        font-size: 20px !important;
        padding: 6px 12px !important;
        margin: 6px 0 !important;
    }
}

@media (max-width: 480px) {
    .simple-dropdown .right-div .vc-nav-link {
        font-size: 20px !important;
        padding: 4px 8px !important;
        margin: 4px 0 !important;
    }
}

/* ========================================
   VERTICLE CAROUSEL
   ======================================== */
.verticle-carousel {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
    /* Prevent scroll propagation and enable touch handling */
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* background: var(--container-bg, rgba(50, 70, 90, 0.2)); */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
}

/* Hover effects are handled by individual slides */

/* Carousel media queries */
@media (max-width: 768px) {
    .verticle-carousel {
        height: 300px;
    }
}

/* ========================================
   CAROUSEL CONTAINER
   ======================================== */
.verticle-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.verticle-carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   CAROUSEL SLIDES
   ======================================== */
.verticle-carousel-slide {
    position: absolute;
    left: 0;
    width: 100%;
    height: 33.333%; /* Each slide takes 1/3 of the height */
    display: flex;
    align-items: center;
    justify-content: center;


    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.verticle-carousel-slide:hover {
    transform: scale(1.02);
}

/* Hover effects for top and bottom slides */
.verticle-carousel-slide.top:hover,
.verticle-carousel-slide.bottom:hover {
    opacity: 1 !important; /* 100% opacity on hover */
    transform: scale(0.5); /* Keep 50% smaller size */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
}

.verticle-carousel-slide.theme-slide {
    cursor: pointer;
}

/* 5-slide system: top-off-screen, top, current, bottom, bottom-off-screen */
.verticle-carousel-slide.top-off-screen {
    top: -33.333%; /* Above visible area */
    opacity: 0; /* Completely invisible to prevent ghost image */
    z-index: 1;
    transform: scale(0.9);
}

.verticle-carousel-slide.top {
    top: 5%; /* Closer to current slide */
    opacity: 0.3; /* 30% opacity */
    z-index: 5;
    transform: scale(0.5); /* 50% smaller */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
}

.verticle-carousel-slide.active {
    top: 33.333%; /* Middle position */
    opacity: 1;
    z-index: 10;
    transform: scale(1);
}

.verticle-carousel-slide.bottom {
    top: 60%; /* Closer to current slide */
    opacity: 0.3; /* 30% opacity */
    z-index: 5;
    transform: scale(0.5); /* 50% smaller */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
}

.verticle-carousel-slide.bottom-off-screen {
    top: 100%; /* Below visible area */
    opacity: 0; /* Completely invisible to prevent ghost image */
    z-index: 1;
    transform: scale(0.9);
}

.verticle-carousel-slide.hidden {
    opacity: 0;
    z-index: 0;
    transform: scale(0.8);
}

/* Smooth transition classes for synchronized 5-slide movement */
.verticle-carousel-slide.transitioning {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition classes for scaling and opacity changes */
.verticle-carousel-slide.scaling-up {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    opacity: 1;
}

.verticle-carousel-slide.scaling-down {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.5);
    opacity: 0.3;
}

/* Preload all images for smooth transitions */
.verticle-carousel-slide img {
    transition: opacity 0.3s ease-in-out;
}

.verticle-carousel-slide img.loading {
    opacity: 0;
}

.verticle-carousel-slide img.loaded {
    opacity: 1;
}

/* ========================================
   CAROUSEL CONTENT
   ======================================== */
.verticle-carousel-content {
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    color: var(--text-color, rgba(216, 222, 233, 0.7));
}

.verticle-carousel-content h3 {
    margin: 0 0 10px 0;
    color: var(--h3-color, rgba(216, 222, 233, 0.9));
    font-size: 1.5em;
    text-shadow: 0 0 10px var(--glow-color-1, rgba(138, 1, 88, 1.0));
}

.verticle-carousel-content p {
    margin: 0;
    color: var(--text-color, rgba(216, 222, 233, 0.7));
    line-height: 1.5;
    font-size: 1.1em;
}

/* Content media queries */
@media (max-width: 768px) {
    .verticle-carousel-content {
        padding: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    .verticle-carousel-content h3 {
        font-size: 1.3em;
    }
    
    .verticle-carousel-content p {
        font-size: 1em;
    }
}

/* ========================================
   CAROUSEL NAVIGATION DOTS
   ======================================== */
.verticle-carousel-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    display: flex;
    gap: 10px;
}

.verticle-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color, rgba(80, 100, 120, 0.5));
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.verticle-carousel-dot.active {
    background: var(--accent-color-1, rgba(138, 1, 88, 1.0));
    box-shadow: 0 0 10px var(--glow-color-1, rgba(138, 1, 88, 1.0));
}

.verticle-carousel-dot:hover {
    background: var(--highlight-color, rgba(220, 230, 240, 0.9));
    transform: scale(1.2);
}

/* ========================================
   CAROUSEL ARROWS - REMOVED
   ======================================== */
/* Arrows removed - users can click directly on theme slides */

/* ========================================
   THEME TRANSITIONS
   ======================================== */
.verticle-carousel,
.verticle-carousel-slide,
.verticle-carousel-dot {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}