/* Overlay */
.wppn-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Popup Container - Using Variables for easier overriding */
.wppn-popup-container {
    background: var(--wppn-bg-color, #fff);
    color: var(--wppn-text-color, #333);
    border-radius: var(--wppn-border-radius, 8px);
    border: var(--wppn-border-width, 0px) solid var(--wppn-border-color, #ccc);
    font-size: var(--wppn-font-size, 14px);
    /* Added font size variable */

    padding: 25px 20px 20px;
    /* More top padding for close btn */
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    text-align: right;
    /* Default for Persian */
    box-sizing: border-box;
    /* Critical for padding calculations */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */

    /* Transition Duration Variable */
    transition-duration: var(--wppn-anim-duration, 0.5s);
}

.wppn-popup-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
}

/* Default Animation (Fade/Scale) - Kept as fallback or base */
.wppn-popup-container {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
}

/* Fade Animation */
.wppn-overlay.wppn-anim-fade .wppn-popup-container {
    transform: scale(1);
    /* No scale change, just fade */
}

.wppn-overlay.wppn-show.wppn-anim-fade .wppn-popup-container {
    opacity: 1;
}

/* Zoom Animation (Default original style) */
.wppn-overlay.wppn-anim-zoom .wppn-popup-container {
    transform: scale(0.7);
}

.wppn-overlay.wppn-show.wppn-anim-zoom .wppn-popup-container {
    opacity: 1;
    transform: scale(1);
}

/* Slide Down Animation */
.wppn-overlay.wppn-anim-slide-down .wppn-popup-container {
    transform: translateY(-100px);
}

.wppn-overlay.wppn-show.wppn-anim-slide-down .wppn-popup-container {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Up Animation */
.wppn-overlay.wppn-anim-slide-up .wppn-popup-container {
    transform: translateY(100px);
}

.wppn-overlay.wppn-show.wppn-anim-slide-up .wppn-popup-container {
    opacity: 1;
    transform: translateY(0);
}


/* General Show State for Overlay */
.wppn-overlay.wppn-show {
    opacity: 1;
}

/* Close Button */
.wppn-close {
    position: absolute;
    top: 10px;
    right: 15px;
    /* Adjust for RTL usually, but standard X is fine */
    font-size: 24px;
    font-weight: bold;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: 10;
    transition: color 0.2s;
    width: 30px;
    /* Ensure tap target size */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wppn-close:hover {
    color: #333;
}

/* RTL Support if theme is RTL */
body.rtl .wppn-close {
    right: auto;
    left: 15px;
}

/* CTA Button Basic */
.wppn-cta-container {
    margin-top: 20px;
    text-align: center;
    box-sizing: border-box;
}

.wppn-cta-button {
    display: inline-block;
    padding: 10px 25px;
    background-color: #0073aa;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    transition: opacity 0.2s, transform 0.1s;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    /* Prevents padding from increasing width */
    max-width: 100%;
    /* Ensure it never exceeds container */
}

.wppn-cta-button:hover {
    opacity: 0.9;
}

.wppn-cta-button:active {
    transform: scale(0.98);
}

/* Stretch Style */
.wppn-cta-container.wppn-cta-stretch {
    width: 100%;
}

.wppn-cta-container.wppn-cta-stretch .wppn-cta-button {
    display: block;
    width: 100%;
    text-align: center;
}

/* Outside Style */
/* When outside, we need to ensure the button container is positioned RELATIVE to the popup but visually OUTSIDE */
.wppn-popup-container.has-outside-cta {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 60px;
    /* Space for button visually */
    overflow: visible;
    /* Allow button to hang outside */
}

.wppn-cta-container.wppn-cta-outside {
    position: absolute;
    top: 100%;
    /* Push it exactly below the container */
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    z-index: -1;
    /* Optional: if we want it behind, but usually we want it flush */
}

.wppn-cta-container.wppn-cta-outside .wppn-cta-button {
    display: block;
    width: 100%;
    border-radius: 0 0 8px 8px;
    /* Rounded bottom only */
    padding: 15px;
    margin: 0;
}

/* --- Banner Type Styles --- */
.wppn-overlay.wppn-type-banner {
    background: transparent;
    pointer-events: none;
}

.wppn-overlay.wppn-type-banner .wppn-popup-container {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    margin: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.wppn-overlay.wppn-banner-top {
    align-items: flex-start;
}

.wppn-overlay.wppn-banner-top .wppn-popup-container {
    border-top: none;
    border-left: none;
    border-right: none;
}

.wppn-overlay.wppn-banner-bottom {
    align-items: flex-end;
}

.wppn-overlay.wppn-banner-bottom .wppn-popup-container {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

/* Close button positioning for banners */
.wppn-overlay.wppn-type-banner .wppn-close {
    top: 5px;
    right: 5px;
    transform: none;
}

body.rtl .wppn-overlay.wppn-type-banner .wppn-close {
    right: auto;
    left: 5px;
}

/* --- Banner Marquee Styles --- */
.wppn-overlay.wppn-marquee-enabled .wppn-popup-container {
    overflow: hidden;
}

.wppn-overlay.wppn-marquee-enabled .wppn-content {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    /* Ensure layout starts from left to make movement math predictable */
    direction: ltr !important;
}

.wppn-marquee-track {
    display: inline-block;
    /* Restore text reading direction to RTL */
    direction: rtl !important;
    animation: wppn-marquee-ltr var(--wppn-marquee-speed, 15s) linear infinite;
    will-change: transform;
    /* Force GPU acceleration */
    transform: translateZ(0);
}

.wppn-marquee-track:hover {
    animation-play-state: paused;
}

.wppn-marquee-track p {
    display: inline;
    margin: 0;
}

@keyframes wppn-marquee-ltr {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(100vw, 0, 0);
    }
}

/* --- Product Suggestions Slider --- */
.wppn-suggestions .swiper-button-next,
.wppn-suggestions .swiper-button-prev {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    color: #333;
}

.wppn-suggestions .swiper-button-next:after,
.wppn-suggestions .swiper-button-prev:after {
    font-size: 12px;
    font-weight: bold;
}

.wppn-suggestions .swiper-button-next {
    right: -10px;
}

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

.wppn-suggestions .swiper-slide {
    height: auto;
}