/* 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;
}