/* Slides Block Frontend Styles */

.fireweed-slides-wrapper {
    position: relative;
}

.fireweed-slides {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fireweed-slides-track {
    position: relative;
    width: 100%;
}

/* Slide base styles */
.fireweed-slide {
    width: 100%;
    display: none;
    margin: 0;
    box-sizing: border-box;
}

.fireweed-slide.active {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "content";
}

.fireweed-slide.inactive {
    display: none;
}

/* ==========================================
   FADE TRANSITION
   ========================================== */
.transition-fade .fireweed-slides-track {
    position: relative;
}

.transition-fade .fireweed-slide.active {
    position: relative;
    z-index: 1;
}

.transition-fade .fireweed-slide.fade-out {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
    animation: fadeOut var(--transition-duration, 500ms) ease-out forwards;
}

.transition-fade .fireweed-slide.fade-in {
    display: grid;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeIn var(--transition-duration, 500ms) ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   SLIDE TRANSITION
   ========================================== */
.transition-slide .fireweed-slides {
    overflow: hidden;
}

.transition-slide .fireweed-slides-track {
    position: relative;
    overflow: hidden;
}

.transition-slide .fireweed-slide.active {
    position: relative;
    z-index: 1;
}

.transition-slide .fireweed-slide.slide-exiting {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: transform var(--transition-duration, 500ms) ease-out;
}

.transition-slide .fireweed-slide.slide-exiting.to-left {
    transform: translateX(-100%);
}

.transition-slide .fireweed-slide.slide-exiting.to-right {
    transform: translateX(100%);
}

.transition-slide .fireweed-slide.slide-entering {
    display: grid;
    position: relative;
    z-index: 1;
}

.transition-slide .fireweed-slide.slide-entering.from-right {
    transform: translateX(100%);
}

.transition-slide .fireweed-slide.slide-entering.from-left {
    transform: translateX(-100%);
}

.transition-slide .fireweed-slide.slide-entering.slide-active {
    transition: transform var(--transition-duration, 500ms) ease-out;
    transform: translateX(0);
}


/* ==========================================
   NAVIGATION ARROWS
   ========================================== */
.fireweed-slides-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    width: var(--nav-size-desktop, 48px);
    height: var(--nav-size-desktop, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fireweed-slides-nav:hover {
    opacity: 0.8;
}

.fireweed-slides-nav svg {
    display: block;
    width: calc(var(--nav-size-desktop, 48px) * 0.5);
    height: calc(var(--nav-size-desktop, 48px) * 0.5);
}

.fireweed-slides-wrapper[data-show-nav="false"] .fireweed-slides-nav {
    display: none;
}

/* Navigation Position - Inset (default) */
.nav-position-inset .fireweed-slides-nav.prev {
    left: 0;
}

.nav-position-inset .fireweed-slides-nav.next {
    right: 0;
}

/* Navigation Position - Outside */

.nav-position-outside .fireweed-slides-nav.prev {
    right: 100%;
}

.nav-position-outside .fireweed-slides-nav.next {
    left: 100%;
}

/* Navigation Shape - Round (default) */
.nav-shape-round .fireweed-slides-nav {
    border-radius: 50%;
}

/* Navigation Shape - Square */
.nav-shape-square .fireweed-slides-nav {
    border-radius: 4px;
}

/* No Background */
.nav-no-background .fireweed-slides-nav {
    background: transparent !important;
    padding: 8px;
}

.nav-no-background .fireweed-slides-nav:hover {
    opacity: 0.7;
}

/* Disabled state for navigation arrows */
.fireweed-slides-nav.disabled {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: default;
    pointer-events: none;
}

/* Dots navigation */
.fireweed-slides-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.fireweed-slides-wrapper[data-show-dots="false"] .fireweed-slides-dots {
    display: none;
}

/* Dots Position - Inset (default) */
.dots-position-inset .fireweed-slides-dots {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
}

/* Dots Position - Outside */
.dots-position-outside .fireweed-slides-dots {
    margin-top: 1.5rem;
    padding: 0.5rem 0;
}

/* Dots Alignment - Center (default) */
.dots-align-center .fireweed-slides-dots {
    justify-content: center;
}

/* Dots Alignment - Center Left */
.dots-position-inset.dots-align-center-left .fireweed-slides-dots {
    left: auto;
    right: 50%;
    justify-content: flex-end;
    padding-right: 3rem;
}

.dots-position-outside.dots-align-center-left .fireweed-slides-dots {
    justify-content: flex-end;
    padding-right: 50%;
}

/* Dots Alignment - Center Right */
.dots-position-inset.dots-align-center-right .fireweed-slides-dots {
    left: 50%;
    right: auto;
    justify-content: flex-start;
    padding-left: 3rem;
}

.dots-position-outside.dots-align-center-right .fireweed-slides-dots {
    justify-content: flex-start;
    padding-left: 50%;
}

/* Dots Alignment - Left */
.dots-align-left .fireweed-slides-dots {
    justify-content: flex-start;
    padding-left: 25%;
}

/* Dots Alignment - Right */
.dots-align-right .fireweed-slides-dots {
    justify-content: flex-end;
    padding-right: 25%;
}

/* Dots Alignment - Far Left */
.dots-align-far-left .fireweed-slides-dots {
    justify-content: flex-start;
}

/* Dots Alignment - Far Right */
.dots-align-far-right .fireweed-slides-dots {
    justify-content: flex-end;
}

/* Constrain dots to content column width */
.dots-constrain-content .fireweed-slides-dots {
    max-width: var(--wp--style--global--content-size, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.fireweed-slides-dot {
    width: var(--dots-size-desktop, 12px);
    height: var(--dots-size-desktop, 12px);
    border-radius: 50%;
    border: none;
    background: var(--dots-inactive-color, rgba(0, 0, 0, 0.3));
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.fireweed-slides-dot:hover {
    background: var(--dots-hover-color, rgba(0, 0, 0, 0.5));
    transform: scale(1.2);
}

.fireweed-slides-dot.active {
    background: var(--dots-active-color, rgba(0, 0, 0, 0.7));
    transform: scale(1.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fireweed-slides-nav {
        width: var(--nav-size-mobile, 40px);
        height: var(--nav-size-mobile, 40px);
    }
    
    .fireweed-slides-nav svg {
        width: calc(var(--nav-size-mobile, 40px) * 0.5);
        height: calc(var(--nav-size-mobile, 40px) * 0.5);
    }
    
    /* Hide navigation arrows on mobile */
    .nav-hide-mobile .fireweed-slides-nav {
        display: none;
    }
    
    /* Mobile-specific navigation position */
    .nav-position-mobile-inset .fireweed-slides-nav.prev {
        left: 0;
        right: auto;
    }
    
    .nav-position-mobile-inset .fireweed-slides-nav.next {
        right: 0;
        left: auto;
    }
    
    .nav-position-mobile-outside .fireweed-slides-nav.prev {
        right: 100%;
        left: auto;
    }
    
    .nav-position-mobile-outside .fireweed-slides-nav.next {
        left: 100%;
        right: auto;
    }
    
    .fireweed-slides-dots {
        gap: 0.4rem;
    }
    
    .dots-position-outside .fireweed-slides-dots {
        margin-top: 1rem;
    }
    
    /* Hide dots on mobile */
    .dots-hide-mobile .fireweed-slides-dots {
        display: none;
    }
    
    /* Mobile-specific dots position - override desktop */
    .dots-position-mobile-inset .fireweed-slides-dots {
        position: absolute !important;
        bottom: 50px;
        left: 0;
        right: 0;
        z-index: 10;
        padding: 1rem;
        margin: 0 !important;
    }
    
    .dots-position-mobile-outside .fireweed-slides-dots {
        position: static !important;
        margin-top: 1.5rem;
        padding: 0.5rem 0;
        left: auto !important;
        right: auto !important;
    }
    
    /* Mobile-specific dots alignment - override desktop alignment */
    .dots-align-mobile-center .fireweed-slides-dots {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .dots-position-mobile-inset.dots-align-mobile-center-left .fireweed-slides-dots,
    .dots-position-mobile-outside.dots-align-mobile-center-left .fireweed-slides-dots {
        left: auto !important;
        right: 50% !important;
        justify-content: flex-end !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }
    
    .dots-position-mobile-inset.dots-align-mobile-center-right .fireweed-slides-dots,
    .dots-position-mobile-outside.dots-align-mobile-center-right .fireweed-slides-dots {
        left: 50% !important;
        right: auto !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }
    
    .dots-position-mobile-inset.dots-align-mobile-left .fireweed-slides-dots,
    .dots-position-mobile-outside.dots-align-mobile-left .fireweed-slides-dots {
        justify-content: flex-start !important;
        padding-left: 25% !important;
        padding-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .dots-position-mobile-inset.dots-align-mobile-right .fireweed-slides-dots,
    .dots-position-mobile-outside.dots-align-mobile-right .fireweed-slides-dots {
        justify-content: flex-end !important;
        padding-right: 25% !important;
        padding-left: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .dots-position-mobile-inset.dots-align-mobile-far-left .fireweed-slides-dots,
    .dots-position-mobile-outside.dots-align-mobile-far-left .fireweed-slides-dots {
        justify-content: flex-start !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .dots-position-mobile-inset.dots-align-mobile-far-right .fireweed-slides-dots,
    .dots-position-mobile-outside.dots-align-mobile-far-right .fireweed-slides-dots {
        justify-content: flex-end !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .fireweed-slides-dot {
        width: var(--dots-size-mobile, 10px);
        height: var(--dots-size-mobile, 10px);
    }
    
    /* Mobile constrain content - handle mobile alignment overrides */
    .dots-constrain-content.dots-align-mobile-far-left .fireweed-slides-dots {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .dots-constrain-content.dots-align-mobile-far-right .fireweed-slides-dots {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}