/* STORYMODE.CSS - Template and Story Mode Styles */
/* Centralized styles for all story templates and swiper functionality */

/* STORYMODE SWIPER STYLES */
.swiper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 50;
    pointer-events: none;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    pointer-events: none;
    /* Make slides non-interactive */
}

.swiper-fade .swiper-slide-active {
    pointer-events: none;
    /* Override default to make the active slide non-interactive */
}

.swiper-fade .swiper-slide-active .interactive {
    pointer-events: auto;
    /* Make specific content areas interactive */
}

.swiper-button-next,
.swiper-button-prev {
    pointer-events: auto;
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0px 0px 0px 1px #0E3F7E08,
        0px 1px 1px -0.5px #2A334508,
        0px 3px 3px -1.5px #2A334608,
        0px 6px 6px -3px #2A334608,
        0px 12px 12px -6px #0E3F7E08,
        0px 24px 24px -12px #0E3F7E10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80; /* ensure above swiper and map */
}

/* Position the buttons relative to viewport since they are outside the swiper */
.swiper-button-next {
    right: 10px;
}

.swiper-button-prev {
    left: 10px;
}

/* SWIPER TEMPLATE GENERIC */
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

/* Template fonts - Moved to templates.css */

/* Template styles moved to templates.css */