.elementor-741 .elementor-element.elementor-element-291ec8a{--display:flex;--min-height:700px;--border-radius:60px 60px 60px 60px;}.elementor-741 .elementor-element.elementor-element-291ec8a:not(.elementor-motion-effects-element-type-background), .elementor-741 .elementor-element.elementor-element-291ec8a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-741 .elementor-element.elementor-element-f5bdc11.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-741 .elementor-element.elementor-element-f5bdc11 .elementor-swiper-button{font-size:20px;}#elementor-popup-modal-741{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-741 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-741 .dialog-close-button{display:flex;}#elementor-popup-modal-741 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(min-width:768px){.elementor-741 .elementor-element.elementor-element-291ec8a{--content-width:400px;}}@media(max-width:1024px){.elementor-741 .elementor-element.elementor-element-f5bdc11.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-741 .elementor-element.elementor-element-f5bdc11.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}/* Start custom CSS *//* ========================================
   استایل‌های کلی پاپ‌آپ استوری
   ======================================== */

/* پس‌زمینه تار و مشکی برای کل پاپ‌آپ */
.elementor-popup-modal .dialog-message {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* کانتینر اصلی استوری */
.elementor-popup-modal .elementor-widget-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ========================================
   دکمه بستن (سمت راست بالا)
   ======================================== */

/* آیکون بستن */
.elementor-popup-modal .dialog-close-button {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    width: 35px !important;
    height: 35px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.elementor-popup-modal .dialog-close-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg) scale(1.1);
}

.elementor-popup-modal .dialog-close-button svg {
    width: 18px !important;
    height: 18px !important;
    fill: #ffffff !important;
}

/* ========================================
   نوار پیشرفت (مثل اینستاگرام)
   ======================================== */

/* کانتینر نوار پیشرفت */
.story-progress-container {
    position: absolute !important;
    top: 10px !important;
    left: 15px !important;
    right: 60px !important; /* فاصله از دکمه بستن */
    display: flex !important;
    gap: 4px !important;
    z-index: 999 !important;
}

/* هر نوار پیشرفت */
.story-progress-bar {
    flex: 1;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* انیمیشن پر شدن نوار */
.story-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffffff 0%, #f0f0f0 100%) !important;
    border-radius: 10px !important;
    animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* ========================================
   هدر استوری (عکس پروفایل و نام)
   ======================================== */

.story-header {
    position: absolute !important;
    top: 25px !important;
    left: 15px !important;
    right: 70px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 998 !important;
}

/* دایره عکس پروفایل */
.story-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    object-fit: cover !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* نام کاربر */
.story-username {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
}

/* زمان انتشار */
.story-time {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-right: 5px !important;
}

/* ========================================
   محتوای استوری (عکس/ویدیو)
   ======================================== */

/* اسلایدر استوری */
.elementor-popup-modal .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000000 !important;
}

/* تصاویر استوری */
.story-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ویدیوهای استوری */
.story-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ========================================
   متن روی استوری
   ======================================== */

.story-text-overlay {
    position: absolute !important;
    bottom: 80px !important;
    left: 20px !important;
    right: 20px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    z-index: 997 !important;
    line-height: 1.5 !important;
}

/* ========================================
   دکمه‌های ناوبری (قبلی/بعدی)
   ======================================== */

/* فلش‌های ناوبری */
.elementor-popup-modal .swiper-button-next,
.elementor-popup-modal .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease !important;
}

.elementor-popup-modal .swiper-button-next:hover,
.elementor-popup-modal .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.1);
}

.elementor-popup-modal .swiper-button-next::after,
.elementor-popup-modal .swiper-button-prev::after {
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* ========================================
   ناحیه کلیک (چپ/راست برای عوض کردن استوری)
   ======================================== */

/* ناحیه کلیک سمت چپ (استوری قبلی) */
.story-click-area-left {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 30% !important;
    height: 100% !important;
    z-index: 996 !important;
    cursor: pointer !important;
}

/* ناحیه کلیک سمت راست (استوری بعدی) */
.story-click-area-right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 30% !important;
    height: 100% !important;
    z-index: 996 !important;
    cursor: pointer !important;
}

/* ========================================
   انیمیشن‌های ورود و خروج
   ======================================== */

/* انیمیشن ورود پاپ‌آپ */
.elementor-popup-modal.dialog-type-lightbox {
    animation: storyPopupEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes storyPopupEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* انیمیشن خروج پاپ‌آپ */
.elementor-popup-modal.dialog-type-lightbox.closing {
    animation: storyPopupExit 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes storyPopupExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
}

/* ========================================
   افکت‌های اضافی
   ======================================== */

/* سایه زیر متن برای خوانایی بهتر */
.story-text-shadow {
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* گرادیانت پایین صفحه (برای خوانایی متن) */
.story-bottom-gradient {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 150px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important;
    z-index: 995 !important;
    pointer-events: none !important;
}

/* ========================================
   ریسپانسیو (موبایل)
   ======================================== */

@media (max-width: 767px) {
    .elementor-popup-modal .dialog-message {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    
    .story-header {
        top: 20px !important;
    }
    
    .story-avatar {
        width: 35px !important;
        height: 35px !important;
    }
    
    .story-username {
        font-size: 13px !important;
    }
    
    .elementor-popup-modal .dialog-close-button {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
    }
}

/* ========================================
   افکت‌های Hover (فقط دسکتاپ)
   ======================================== */

@media (min-width: 768px) {
    /* افکت زوم ملایم روی عکس‌ها */
    .story-image:hover {
        transform: scale(1.02);
        transition: transform 0.3s ease !important;
    }
    
    /* افکت درخشش روی دکمه بستن */
    .elementor-popup-modal .dialog-close-button::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        border-radius: 50%;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        animation: rainbowRotate 3s linear infinite;
    }
    
    .elementor-popup-modal .dialog-close-button:hover::before {
        opacity: 0.5;
    }
    
    @keyframes rainbowRotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}/* End custom CSS */