/* WN Interactive Phone — wnip.css */

/*
 * ============================================================
 * WN Interactive Phone
 * ============================================================
 *
 * ویجت باید تمام کانتینر والد Hero را بپوشاند.
 * کانتینر والد Hero همان کانتینری است که ویدیوی پس‌زمینه دارد.
 *
 * ساختار:
 *
 * Hero Container (1280×720)
 * └── Elementor Widget
 *     └── .elementor-widget-container
 *         └── .wnip-wrapper
 *             └── .wnip-screen
 *                 ├── .wnip-content
 *                 └── .wnip-overlay
 *
 * ============================================================
 */


/* ============================================================
   1. خود ویجت Elementor
   ============================================================ */

/*
 * چون .wnip-wrapper به صورت absolute است،
 * خود Elementor Widget باید ابعاد داشته باشد.
 *
 * این بخش باعث می‌شود ویجت دقیقاً کل کانتینر Hero
 * را به عنوان یک لایه روی ویدیوی پس‌زمینه بپوشاند.
 */

.elementor-widget-wnip_interactive_phone {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    z-index: 20;
}


/*
 * کانتینر داخلی Elementor
 */

.elementor-widget-wnip_interactive_phone > .elementor-widget-container {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}


/* ============================================================
   2. لایه اصلی ویجت
   ============================================================ */

.wnip-wrapper {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    pointer-events: none;

    z-index: 20;

    box-sizing: border-box;
}


/* ============================================================
   3. صفحه موبایل
   ============================================================ */

.wnip-screen {
    position: absolute;

    overflow: hidden;

    pointer-events: auto;

    background: #0a0a0f;

    z-index: 1;

    box-sizing: border-box;

    /*
     * اجازه می‌دهد تصویر یا ویدیو دقیقاً
     * داخل محدوده صفحه موبایل نمایش داده شود.
     */
    isolation: isolate;

    cursor: default;
}


/* ============================================================
   4. لایه محتوا
   ============================================================ */

.wnip-content {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    opacity: 0;

    z-index: 1;

    overflow: hidden;

    background: #0a0a0f;

    transition:
        opacity 0.4s ease;

    will-change: opacity;

    box-sizing: border-box;
}


/*
 * محتوای روشن
 */

.wnip-content.wnip-on {
    opacity: 1;
}


/* ============================================================
   5. تصویر و ویدیو
   ============================================================ */

.wnip-content video,
.wnip-content img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: block;

    object-fit: cover;

    border: 0;

    box-sizing: border-box;
}


/* ============================================================
   6. متن
   ============================================================ */

.wnip-text-wrap {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 16px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    font-family: inherit;
}


/* ============================================================
   7. لایه Overlay
   ============================================================ */

.wnip-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    z-index: 2;

    pointer-events: none;

    opacity: 0;

    background: radial-gradient(
        ellipse at 50% 40%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 70%
    );

    transition:
        opacity 0.4s ease;

    box-sizing: border-box;
}


/*
 * وقتی محتوا روشن است Overlay هم فعال شود.
 */

.wnip-content.wnip-on ~ .wnip-overlay {
    opacity: 1;
}


/* ============================================================
   8. جلوگیری از مشکلات Elementor
   ============================================================ */

.elementor-widget-wnip_interactive_phone,
.elementor-widget-wnip_interactive_phone > .elementor-widget-container,
.elementor-widget-wnip_interactive_phone .wnip-wrapper {
    box-sizing: border-box;
}


/*
 * Elementor ممکن است روی بعضی کانتینرها
 * overflow یا margin ایجاد کند.
 */

.elementor-widget-wnip_interactive_phone > .elementor-widget-container {
    overflow: visible;
}


/* ============================================================
   9. جلوگیری از تغییر اندازه تصویر توسط Elementor / Theme
   ============================================================ */

.elementor-widget-wnip_interactive_phone img {
    max-width: none;
}


/* ============================================================
   10. موبایل و تبلت
   ============================================================ */

/*
 * موقعیت و اندازه صفحه موبایل در Elementor
 * توسط کنترل‌های Responsive خود ویجت تعیین می‌شود.
 *
 * این بخش فقط مطمئن می‌شود لایه اصلی ویجت
 * در تمام Breakpointها ابعاد والد را حفظ کند.
 */

@media (max-width: 1024px) {

    .elementor-widget-wnip_interactive_phone {
        width: 100%;
        height: 100%;
    }

    .elementor-widget-wnip_interactive_phone > .elementor-widget-container {
        width: 100%;
        height: 100%;
    }

    .wnip-wrapper {
        width: 100%;
        height: 100%;
    }

}


@media (max-width: 767px) {

    .elementor-widget-wnip_interactive_phone {
        width: 100%;
        height: 100%;
    }

    .elementor-widget-wnip_interactive_phone > .elementor-widget-container {
        width: 100%;
        height: 100%;
    }

    .wnip-wrapper {
        width: 100%;
        height: 100%;
    }

}


/* ============================================================
   پایان
   ============================================================ */