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

/* No animation — container visible as soon as overlay opens (backdrop still fades) */
.wppn-overlay.wppn-anim-none .wppn-popup-container {
    opacity: 1;
    transform: none;
    transition-property: none;
    transition-duration: 0s;
}


/* 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-close {
    pointer-events: auto;
    position: absolute;
    z-index: 50;
}

.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;
}

/* Banner embedded via shortcode — in-flow strip, not full-viewport fixed bar */
.wppn-overlay.wppn-type-banner.wppn-banner-shortcode {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    display: block;
    background: transparent;
    /* z-index comes from inline style (PHP); keep stacking above header chrome */
    opacity: 1;
}

.wppn-overlay.wppn-embed-inline.wppn-closed {
    display: none !important;
}

.wppn-overlay.wppn-type-banner.wppn-banner-shortcode .wppn-popup-container {
    opacity: 1;
    max-height: none;
}

.wppn-overlay.wppn-type-banner.wppn-banner-shortcode.wppn-show {
    opacity: 1;
}

/* Wrapper from [wppn_popup]: fills Elementor column/widget so the strip can use full column width */
.wppn-shortcode-anchor {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Shortcode banner inside Elementor header / flex rows */
.wppn-overlay.wppn-embed-inline.wppn-type-banner.wppn-banner-shortcode {
    box-sizing: border-box;
    /* flex-basis 100%: in flex layouts, «auto» often shrinks to content width */
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    justify-content: flex-start;
    align-items: stretch;
}

.elementor-section .wppn-embed-inline.wppn-type-banner.wppn-banner-shortcode,
.elementor-location-header .wppn-embed-inline.wppn-type-banner.wppn-banner-shortcode,
.elementor-widget-shortcode .wppn-embed-inline.wppn-type-banner.wppn-banner-shortcode,
.elementor-widget-html .wppn-embed-inline.wppn-type-banner.wppn-banner-shortcode,
.elementor-widget-text-editor .wppn-embed-inline.wppn-type-banner.wppn-banner-shortcode {
    width: 100%;
}

/* Stretch Elementor wrappers so the shortcode strip matches section/column width */
.elementor-widget-container:has(.wppn-shortcode-anchor) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.elementor-element.elementor-widget-shortcode:has(.wppn-shortcode-anchor),
.elementor-element.elementor-widget-html:has(.wppn-shortcode-anchor),
.elementor-element.elementor-widget-text-editor:has(.wppn-shortcode-anchor) {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

/* Flexbox / Container (Elementor 3.x): stretch to assigned track width without stealing siblings */
.e-con .elementor-element.elementor-widget-shortcode:has(.wppn-shortcode-anchor),
.e-con .elementor-element.elementor-widget-html:has(.wppn-shortcode-anchor),
.e-con .elementor-element.elementor-widget-text-editor:has(.wppn-shortcode-anchor) {
    flex-basis: auto;
    min-width: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

.elementor-column .elementor-widget-wrap:has(.wppn-shortcode-anchor) {
    width: 100%;
}

.wppn-embed-inline.wppn-type-banner .wppn-popup-container.has-outside-cta {
    margin-bottom: 0;
}

.wppn-embed-inline .wppn-cta-container.wppn-cta-outside {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    width: 100%;
}

/* 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 (seamless dual copy; desktop: full strip width, not centered) --- */
.wppn-overlay.wppn-marquee-enabled .wppn-popup-container {
    overflow: hidden;
    min-width: 0;
}

.wppn-overlay.wppn-marquee-enabled .wppn-content {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.wppn-marquee-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    direction: ltr;
    /* inline-flex row was centered when ancestor had text-align:center (desktop) */
    text-align: start;
}

.wppn-marquee-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    /* At least twice the banner width so each copy can fill the visible strip */
    min-width: 200%;
    box-sizing: border-box;
    animation: wppn-marquee-seamless var(--wppn-marquee-speed, 15s) linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

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

/* Reverse = opposite of default (default row moves left / text راست→چپ) */
.wppn-marquee-viewport.wppn-marquee-reverse .wppn-marquee-row {
    animation-direction: reverse;
}

.wppn-marquee-viewport.wppn-marquee-reverse .wppn-marquee-seg {
    justify-content: flex-end;
}

.wppn-marquee-seg {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    /* RTL: reading starts from the right edge of each half-strip */
    justify-content: flex-start;
    direction: rtl;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: start;
    padding-inline-end: clamp(1.5rem, 4vw, 3rem);
}

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

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

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

/* Banner typewriter (plain text phase, then rich HTML) */
.wppn-typewriter-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.wppn-typewriter-out {
    line-height: 1.45;
    /* normal: avoid blank trailing line from pre-wrap + trailing newlines after HTML swap */
    white-space: normal;
    word-break: break-word;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: start;
    box-sizing: border-box;
}

/* Plain-text phase: RTL flex so shrink-wrapped line is not centered in wide banner */
.wppn-typewriter-out.wppn-typewriter-typing {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 2px;
}

.wppn-typewriter-out.wppn-typewriter-typing .wppn-typewriter-text {
    flex: 0 1 auto;
    min-width: 0;
    text-align: inherit;
}

/* Plain-text phase: one line height; rich HTML phase: wpautop <p> margins stack — keep tight */
.wppn-typewriter-out:empty {
    min-height: 1.45em;
}

/* Blinking caret (typing + after rich HTML swap) */
.wppn-typewriter-caret {
    display: inline-block;
    width: 0.09em;
    min-width: 2px;
    max-width: 4px;
    height: 1.05em;
    margin-inline-start: 2px;
    vertical-align: -0.12em;
    background-color: currentColor;
    opacity: 1;
    animation: wppn-typewriter-caret-blink 1s step-end infinite;
}

@keyframes wppn-typewriter-caret-blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.wppn-typewriter-out :where(p, ul, ol, blockquote, h1, h2, h3, h4) {
    margin-block: 0.35rem;
}

.wppn-typewriter-out :where(p, ul, ol):first-child {
    margin-top: 0;
}

.wppn-typewriter-out :where(p, ul, ol):last-child {
    margin-bottom: 0;
}

.wppn-typewriter-out ul,
.wppn-typewriter-out ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-inline-start: 1.25rem;
}

/* Source must never take space or paint while typing (backup if hidden is stripped). */
.wppn-typewriter-shell .wppn-typewriter-source {
    position: absolute !important;
    inset: 0 auto auto 0;
    width: 1px !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

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