/**
 * NFP Viewport Fixed Module CSS
 *
 * Basic styles for the NFP Viewport Fixed functionality
 */

/* Base class for viewport fixed elements */
.nfp-viewport-fixed {
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Create stacking context for fixed elements */
    will-change: transform, opacity;
}

/* Initial hidden state - starting point for animations */
.nfp-viewport-fixed.nfp-fixed-hidden {
    visibility: hidden;
    pointer-events: none;
    /* Add small delay before hiding completely to allow animations to finish */
    transition-delay: 0s, 0s, 0.3s;
}

/* Visible state - elements are shown */
.nfp-viewport-fixed.nfp-fixed-visible {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* Position: top */
.nfp-viewport-fixed[data-nfp-fixed-position="top"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    /* Support for WordPress admin bar */
    body.admin-bar & {
        top: 32px;
    }
    @media screen and (max-width: 782px) {
        body.admin-bar & {
            top: 46px;
        }
    }
}

/* Position: bottom */
.nfp-viewport-fixed[data-nfp-fixed-position="bottom"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}

/* Animation: fade */
.nfp-viewport-fixed[data-nfp-fixed-animation="fade"].nfp-fixed-hidden {
    opacity: 0;
}

.nfp-viewport-fixed[data-nfp-fixed-animation="fade"].nfp-fixed-visible {
    opacity: 1;
}

/* Animation: slide for top position */
.nfp-viewport-fixed[data-nfp-fixed-position="top"][data-nfp-fixed-animation="slide"].nfp-fixed-hidden {
    transform: translateY(-100%);
}

.nfp-viewport-fixed[data-nfp-fixed-position="top"][data-nfp-fixed-animation="slide"].nfp-fixed-visible {
    transform: translateY(0);
}

/* Animation: slide for bottom position */
.nfp-viewport-fixed[data-nfp-fixed-position="bottom"][data-nfp-fixed-animation="slide"].nfp-fixed-hidden {
    transform: translateY(100%);
}

.nfp-viewport-fixed[data-nfp-fixed-position="bottom"][data-nfp-fixed-animation="slide"].nfp-fixed-visible {
    transform: translateY(0);
}

/* Z-index customization via data attribute - handled by JavaScript */
.nfp-viewport-fixed[data-nfp-fixed-zindex] {
    /* z-index will be handled by JavaScript instead */
}

/* WooCommerce specific styling */
body.woocommerce .nfp-viewport-fixed button.button {
    margin-bottom: 0;
}

/* Slightly improved mobile experience */
@media (max-width: 1024px) {
    /* Tablet-specific styles */
    .nfp-viewport-fixed {
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
}

@media (max-width: 767px) {
    /* Mobile-specific styles */
    .nfp-viewport-fixed {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    /* Ensure content doesn't overflow */
    .nfp-viewport-fixed .elementor-container {
        flex-wrap: wrap;
    }
}