/**
 * LaunchPress Slider Frontend Styles
 */

.lps-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
}

.lps-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.lps-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lps-transition-speed, 500ms) ease, visibility var(--lps-transition-speed, 500ms) ease, transform var(--lps-transition-speed, 500ms) ease;
    z-index: 1;
}

.lps-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.lps-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lps-slide-content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.lps-slide-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


/* Optional public Slide Title (Beta46). */
.lps-public-slide-title {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    max-width: calc(100% - 40px);
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.88);
    color: #111;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

/* Layers */
.lps-layer {
    position: absolute;
    z-index: 3;
}

/* Beta58: entrance timing is explicitly staged by JavaScript. Layers start
   hidden so there is no flash before JS initializes. A waiting layer remains
   fully hidden for its Entrance Delay, a running layer performs only the
   selected animation, and a completed layer returns to its normal visible
   state. */
.lps-layer[data-animation-in-type] {
    opacity: 0;
}

.lps-layer.lps-entry-waiting {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}

.lps-layer.lps-entry-running {
    visibility: visible;
}

.lps-layer.lps-entry-done {
    opacity: 1;
    visibility: visible;
}

.lps-layer h2 {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Beta74: keep Heading layers WYSIWYG across themes. The saved typography
   lives on the layer wrapper, so force the inner H2 to inherit the full saved
   typography instead of allowing the active WordPress theme's H2 rules to
   replace the slider editor's font family/weight/line-height/etc. */
.lps-layer-heading h2 {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

.lps-layer img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Beta50: saved Button layer dimensions control the visible button itself. */
.lps-layer-button .lps-button {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
    overflow: hidden;
}

.lps-button:hover {
    opacity: 0.9;
}

.lps-layer-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #fff;
    min-height: 100px;
}

/* Navigation Arrows */
.lps-nav-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.lps-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    pointer-events: all;
}

.lps-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.lps-arrow svg {
    fill: currentColor;
}

.lps-arrow-prev {
    left: 15px;
}

.lps-arrow-next {
    right: 15px;
}

/* Pagination */
.lps-nav-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.lps-pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lps-pagination-dot-color, #9ca3af);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    opacity: 0.78;
}

.lps-pagination-dot:hover {
    opacity: 1;
}

.lps-pagination-dot.active {
    background: var(--lps-pagination-active-color, #2271b1);
    border-color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transform: scale(1.2);
}

/* Animations */
@keyframes lps-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lps-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lps-slide-left-in { 0% { transform: translateX(-40px); opacity: 0; } 0.01% { transform: translateX(-40px); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes lps-slide-left-out { 0% { transform: translateX(0); opacity: 1; } 99.99% { transform: translateX(-40px); opacity: 1; } 100% { transform: translateX(-40px); opacity: 0; } }
@keyframes lps-slide-right-in { 0% { transform: translateX(40px); opacity: 0; } 0.01% { transform: translateX(40px); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes lps-slide-right-out { 0% { transform: translateX(0); opacity: 1; } 99.99% { transform: translateX(40px); opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
@keyframes lps-slide-up-in { 0% { transform: translateY(40px); opacity: 0; } 0.01% { transform: translateY(40px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes lps-slide-up-out { 0% { transform: translateY(0); opacity: 1; } 99.99% { transform: translateY(-40px); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes lps-slide-down-in { 0% { transform: translateY(-40px); opacity: 0; } 0.01% { transform: translateY(-40px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes lps-slide-down-out { 0% { transform: translateY(0); opacity: 1; } 99.99% { transform: translateY(40px); opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes lps-scale-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lps-scale-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.8); opacity: 0; } }
@keyframes lps-rotate-in { from { transform: rotate(-8deg) scale(0.92); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes lps-rotate-out { from { transform: rotate(0) scale(1); opacity: 1; } to { transform: rotate(8deg) scale(0.92); opacity: 0; } }

/* Layer entrance animations are started by Beta58's JS scheduler only after
   the configured Entrance Delay has fully elapsed. The scheduler has already
   waited, so CSS delay is intentionally zero here. */
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type] {
    animation-duration: var(--lps-anim-in-duration, 500ms);
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type] {
    animation-duration: var(--lps-anim-out-duration, 500ms);
    animation-delay: var(--lps-anim-out-delay, 0ms);
    animation-timing-function: ease;
    animation-fill-mode: both;
}
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="fade"] { animation-name: lps-fade-in; }
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="slideLeft"] { animation-name: lps-slide-left-in; }
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="slideRight"] { animation-name: lps-slide-right-in; }
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="slideUp"] { animation-name: lps-slide-up-in; }
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="slideDown"] { animation-name: lps-slide-down-in; }
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="scale"] { animation-name: lps-scale-in; }
.lps-slide.active .lps-layer.lps-entry-running[data-animation-in-type="rotate"] { animation-name: lps-rotate-in; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="fade"] { animation-name: lps-fade-out; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="slideLeft"] { animation-name: lps-slide-left-out; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="slideRight"] { animation-name: lps-slide-right-out; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="slideUp"] { animation-name: lps-slide-up-out; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="slideDown"] { animation-name: lps-slide-down-out; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="scale"] { animation-name: lps-scale-out; }
.lps-slide.lps-layer-exiting .lps-layer:not(.lps-entry-waiting)[data-animation-out-type="rotate"] { animation-name: lps-rotate-out; }

/* Beta59 uses a separate layer-exit phase. The current slide stays fully
   active and visible while its layers complete Exit Delay + Exit Duration. */
.lps-slide.lps-layer-exiting {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    pointer-events: none;
}

/* Whole-slide transition phase, started only after layer exits finish. */
.lps-slide.lps-exiting {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    pointer-events: none;
}

/* Beta55: None means there is no whole-slide transition. Layer animations
   remain independent. Hide only the outgoing slide background while its
   layers finish their Exit Animation so the incoming slide is not blocked by
   a full-canvas background. */
.lps-slider.lps-animation-none .lps-slide {
    transform: none;
    transition: none;
}

.lps-slider.lps-animation-none .lps-slide.lps-exiting .lps-slide-background,
.lps-slider.lps-animation-none .lps-slide.lps-exiting .lps-public-slide-title {
    opacity: 0;
}

/* Beta39: transition mode is an explicit class on the slider root. */
.lps-slider.lps-animation-fade .lps-slide,
.lps-slider[data-settings*="\"animation\":\"fade\""] .lps-slide {
    transform: none;
    transition: opacity var(--lps-transition-speed, 500ms) ease;
    will-change: opacity;
}

.lps-slider.lps-animation-fade .lps-slide.lps-exiting,
.lps-slider[data-settings*="\"animation\":\"fade\""] .lps-slide.lps-exiting {
    opacity: 0;
}

.lps-slider.lps-animation-slide .lps-slide,
.lps-slider[data-settings*="\"animation\":\"slide\""] .lps-slide {
    transform: translateX(100%);
    transition: transform var(--lps-transition-speed, 500ms) ease, opacity var(--lps-transition-speed, 500ms) ease;
    will-change: transform, opacity;
}

.lps-slider.lps-animation-slide .lps-slide.active,
.lps-slider[data-settings*="\"animation\":\"slide\""] .lps-slide.active {
    transform: translateX(0);
}

.lps-slider.lps-animation-slide .lps-slide.prev,
.lps-slider[data-settings*="\"animation\":\"slide\""] .lps-slide.prev {
    transform: translateX(-100%);
}

/* Responsive */
@media screen and (max-width: 768px) {
    /* Beta38: JS scales narrow-screen layers without mutating saved editor data.
       Media fits the full mobile canvas and is temporarily clamped inward rather
       than being over-shrunk because of its desktop X/Y position. */
    .lps-layer {
        transform-origin: top left;
    }

    /* Fallback for browsers that do not support the individual scale property:
       media layers still cannot exceed the remaining slide width. */
    .lps-layer-video,
    .lps-layer-image {
        max-width: calc(100% - 8px);
        box-sizing: border-box;
    }

    .lps-layer-heading h2,
    .lps-layer-text {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .lps-arrow {
        width: 40px;
        height: 40px;
    }
    
    .lps-arrow-prev {
        left: 10px;
    }
    
    .lps-arrow-next {
        right: 10px;
    }
    
    .lps-pagination-dot {
        width: 10px;
        height: 10px;
    }
    
}

@media screen and (max-width: 480px) {
    .lps-arrow {
        width: 35px;
        height: 35px;
    }
    
}

/* Touch/Swipe Support */
.lps-slider.lps-touch-enabled {
    touch-action: pan-y;
}

.lps-slider.lps-touch-enabled .lps-slider-wrapper {
    touch-action: pan-y;
}

/* Loading State */
.lps-slider.lps-loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lps-slider.lps-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f1;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: lps-spin 0.8s linear infinite;
}

@keyframes lps-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Accessibility */
.lps-slider:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.lps-arrow:focus,
.lps-pagination-dot:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .lps-slider {
        height: auto !important;
    }
    
    .lps-slide {
        position: relative;
        opacity: 1;
        visibility: visible;
        page-break-inside: avoid;
    }
    
    .lps-nav-arrows,
    .lps-nav-pagination {
        display: none;
    }
}

/* Single-slide sliders never need arrows or pagination. */
.lps-slider.lps-single-slide .lps-nav {
    display: none !important;
}

/* Video layers */
.lps-layer-video iframe,
.lps-layer-video video {
    width: 100%;
    height: 100%;
    display: block;
}

.lps-layer-video video {
    object-fit: contain;
    background: #000;
}