/* ─────────────────────────────────────────────────────────────────────
   datarythms — سفارشی‌سازی‌های UI روی قالب Elementor/WordPress mirror
   این فایل بعد از همه CSS های پلاگین/تم لود می‌شود تا overrides اعمال شوند.
   ───────────────────────────────────────────────────────────────────── */


/* Reading progress bar
   ─────────────────────────────────────────────────────────────────────
   پلاگین bdthemes-element-pack یک <div id="bdt-progress"> در بالای صفحه
   می‌سازد و یک <div class="inner"> داخل آن قرار می‌دهد که عرضش با اسکرول
   از 0 تا 100% تغییر می‌کند. در صفحات RTL، جریان direction باعث می‌شود
   نوار «از سمت راست» پر شود. مطابق درخواست، آن را صریحاً LTR می‌کنیم تا
   نوار «از سمت چپ» شروع به پر شدن کند و به سمت راست رشد کند. */
.bdt-horizontal-progress,
#bdt-progress {
    direction: ltr !important;
}
.bdt-horizontal-progress > .inner,
#bdt-progress > .inner {
    /* اطمینان از anchor شدن به لبه‌ی چپ بدون توجه به direction والد */
    margin-left: 0 !important;
    margin-right: auto !important;
    float: none !important;
}


/* ─────────────────────────────────────────────────────────────────────
   WooCommerce Product Category Cards — فاصله بین تصویر و عنوان
   ─────────────────────────────────────────────────────────────────────
   در سایت قدیمی title کارت محصول/دسته‌بندی (مثل "اتومیشن (۱)") با تنها
   ۹px padding-top چسبیده به تصویر بالایش بود. این فاصله را زیادتر
   می‌کنیم برای breathing room بهتر. به همه viewport ها اعمال می‌شود.
   specificity بالا با body prefix و selector های زنجیره‌ای. */
body.woocommerce .woocommerce-loop-category__title,
body .woocommerce-loop-category__title,
body .woocommerce-loop-product__title,
body ul.products li.product-category h2,
body ul.products li.product-category .woocommerce-loop-category__title,
body ul.products li.product h2,
body ul.products li.product .woocommerce-loop-product__title,
.elementor-element ul.products li.product-category h2,
.elementor-element ul.products li.product h2 {
    margin-top: 18px !important;
    padding-top: 10px !important;
    line-height: 1.6 !important;
    display: block !important;
}
body ul.products li.product-category,
body ul.products li.product,
.elementor-element ul.products li.product-category,
.elementor-element ul.products li.product {
    padding-bottom: 20px !important;
}
/* اطمینان از اینکه تصویر و عنوان داخل کارت با gap مناسب جدا شوند */
body ul.products li.product-category > a,
body ul.products li.product > a,
.elementor-element ul.products li.product-category > a,
.elementor-element ul.products li.product > a {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}


/* ═════════════════════════════════════════════════════════════════════
   DESKTOP-ONLY FIXES (≥769px)
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* سکشن فروشگاه: بلوک تیتر (5b660e3) در دسکتاپ margin-bottom:-25px و
       بلوک محصولات (a314826) margin-top:-20px دارد؛ مجموع ۴۵px کشش منفی
       باعث می‌شد کارت‌های محصول حدود ۱۵px روی زیرنویس «Online Service
       Store» بیفتند (هم‌پوشانی). margin-top بلوک محصولات را به مقدار
       کوچکِ مثبت تغییر می‌دهیم تا کارت‌ها با فاصله‌ی تمیز (~۱۳px) زیر
       زیرنویس قرار گیرند. فقط دسکتاپ؛ موبایل (که جداگانه تنظیم شده) دست‌نخورده. */
    main .elementor-element-a314826 {
        margin-top: 8px !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   تمام تنظیمات این بخش فقط روی صفحات کوچک (≤768px) اعمال می‌شوند تا
   دسکتاپ دست‌نخورده بماند. ساختار هدر و فوتر در طراحی Elementor برای
   نمایش افقی دسکتاپ طراحی شده و در موبایل ستون‌ها روی هم چیده می‌شوند و
   فضای عمودی غیرضروری اشغال می‌کنند. این overrides عناصر تزئینی را در
   موبایل پنهان می‌کند و padding را فشرده می‌سازد.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── HEADER ─────────────────────────────────────────────────────
       در دسکتاپ هدر شامل: top-bar (آیکن‌های شبکه‌های اجتماعی + شماره
       تماس) + main-row (لوگو + منو + جستجو + آیکن‌های پنل کاربر).
       در موبایل، فقط لوگو + همبرگر منو لازم است؛ بقیه پنهان می‌شود تا
       هدر از ~802px به ~120px برسد. */

    /* ردیف بالای هدر (آیکن‌های شبکه اجتماعی، شماره تماس، divider) — حذف کامل در موبایل */
    .elementor-element-b1f8abe {
        display: none !important;
    }

    /* بخش دکمه‌های CTA کنار لوگو (ورود/ثبت‌نام) — جای کمی دارد، حذف می‌شود */
    .elementor-element-199513a {
        display: none !important;
    }

    /* ستون آیکن‌های ابزار (search، آیکن‌های متفرقه) — منو همبرگر کافی است */
    .elementor-element-7d9e075 {
        display: none !important;
    }

    /* فشرده‌سازی بخش اصلی هدر (لوگو + همبرگر) */
    .elementor-element-5af8c12 {
        padding: 8px 12px !important;
        min-height: 0 !important;
        gap: 8px !important;
        /* پس‌زمینه‌ی سفید solid — جلوگیری از خواندن متن صفحه از پشت
           هدر sticky هنگام اسکرول */
        background: #ffffff !important;
        background-image: none !important;
        position: relative !important;
    }
    /* همبرگر در گوشه‌ی راست بالا (fixed) — برای سایت RTL فارسی طبیعی‌تر
       است که آیکن منو در همان سمتی که خواندن شروع می‌شود قرار گیرد. */
    header[data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active) {
        position: fixed !important;
        right: 14px !important;
        left: auto !important;
        top: 14px !important;
        transform: none !important;
        z-index: 9997 !important;
    }
    /* لوگوی هدر در موبایل — وسط viewport */
    .elementor-element-5af8c12 .elementor-element-159155c,
    .elementor-element-5af8c12 [class*="element-159155c"] {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    .elementor-element-5af8c12 .elementor-element-159155c .elementor-widget-container,
    .elementor-element-5af8c12 .elementor-element-814e541 {
        margin: 0 auto !important;
        text-align: center !important;
    }
    .elementor-element-5af8c12 img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    .elementor-element-5af8c12 .elementor-motion-effects-layer,
    .elementor-element-5af8c12 .elementor-motion-effects-container {
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
    }

    /* بهینه‌سازی اندازه لوگو در موبایل */
    .elementor-element-159155c img,
    .elementor-element-814e541 img {
        max-height: 50px !important;
        width: auto !important;
    }


    /* ─── HEADER LAYOUT: همبرگر و لوگو در یک ردیف ────────────────────
       ساختار پیش‌فرض: لوگو در ستون مجزا، همبرگر در ستون دیگر — در موبایل
       به دلیل عرض container دو ردیف می‌چینند. با تبدیل به flex-row و
       justify-content: space-between، لوگو راست و همبرگر چپ (RTL) */
    header[data-elementor-type="header"] .elementor-element-5af8c12 > .e-con-inner,
    header[data-elementor-type="header"] .elementor-element-951f3eb > .e-con-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* جعبه‌ی لوگو و جعبه‌ی همبرگر inline در یک ردیف */
    .elementor-element-4f1b2fd,
    .elementor-element-159155c {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* container والد همبرگر (4f1b2fd) align-items center و padding صفر */
    .elementor-element-4f1b2fd {
        align-self: center !important;
        align-items: center !important;
    }

    /* container والد لوگو (159155c) align-items center */
    .elementor-element-159155c {
        align-self: center !important;
        text-align: end !important; /* RTL: راست */
    }


    /* ─── STICKY HEADER: پس‌زمینه‌ی solid هنگام sticky شدن ──────────
       وقتی هدر sticky می‌شود و کاربر اسکرول می‌کند، متن محتوای پشت هدر
       از طریق پس‌زمینه‌ی شفاف خوانده می‌شود. پس‌زمینه‌ی solid + سایه
       کوچک = ظاهر تمیز و قابل خواندن. */
    header[data-elementor-type="header"] {
        background: #ffffff !important;
    }
    header[data-elementor-type="header"].elementor-sticky--effects,
    header[data-elementor-type="header"].elementor-sticky {
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        backdrop-filter: none !important;
    }

    /* همه‌ی sub-container های هدر — پس‌زمینه شفاف تا فقط outer سفید باشد */
    header[data-elementor-type="header"] .elementor-element {
        backdrop-filter: none !important;
    }

    /* منو همبرگر بزرگ‌تر/قابل لمس‌تر (حداقل ۴۴×۴۴ apple HIG)
       نکته: در تنظیمات اصلی Elementor، رنگ آیکن toggle با alpha 0
       (شفاف) ست شده — احتمالاً بنا بر طرح Hover-only. در موبایل که
       hover معنا ندارد، آیکن باید همیشه دیده شود. */
    .elementor-menu-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        color: #1a1a1a !important;
    }
    .elementor-menu-toggle svg {
        fill: currentColor !important;
        color: #1a1a1a !important;
        width: 28px !important;
        height: 28px !important;
    }
    .elementor-menu-toggle .elementor-menu-toggle__icon--open,
    .elementor-menu-toggle .elementor-menu-toggle__icon--close {
        color: #1a1a1a !important;
        fill: #1a1a1a !important;
    }


    /* ─── FOOTER ─────────────────────────────────────────────────────
       تنظیمات دست‌نخورده‌ی Elementor در موبایل پذیرفتنی است؛ فقط
       اصلاحات کم‌خطر اعمال می‌کنیم تا چیزی بدتر نشود:
       - shape divider های تزئینی (موج‌های بالا/پایین) که در موبایل بد
         رندر می‌شوند، پنهان شوند.
       - عکس‌ها overflow نکنند.
       - منوها فاصله‌ی فشرده‌تر داشته باشند.
       - تصویر لوگوی فوتر max-height معقول. */

    [data-elementor-type="footer"] .elementor-shape {
        display: none !important;
    }

    [data-elementor-type="footer"] img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ── copyright: full-width + وسط‌چین ── */
    [data-elementor-type="footer"] .elementor-element-b3ef33a {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        flex: 0 0 100% !important;
    }
    [data-elementor-type="footer"] .elementor-element-b3ef33a .elementor-widget-container {
        text-align: center !important;
        width: 100% !important;
    }
    [data-elementor-type="footer"] .elementor-element-b3ef33a p,
    [data-elementor-type="footer"] .elementor-element-b3ef33a a {
        text-align: center !important;
        display: inline !important;
    }

    /* ── "کلیه حقوق" paragraph: وسط‌چین ── */
    [data-elementor-type="footer"] .elementor-element-29ddedd {
        width: 100% !important;
        text-align: center !important;
    }
    [data-elementor-type="footer"] .elementor-element-29ddedd p {
        text-align: center !important;
    }

    /* ── popup‌ها: overflow نکنند ── */
    [data-elementor-type="popup"] {
        overflow-x: hidden !important;
    }

    [data-elementor-type="footer"] .elementor-widget-image img {
        max-height: 120px !important;
        width: auto !important;
    }

    [data-elementor-type="footer"] .elementor-nav-menu li {
        margin-bottom: 4px !important;
    }
    [data-elementor-type="footer"] .elementor-nav-menu a {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* ─── FOOTER MOBILE — وسط‌چینی و ستونی‌کردن ──────────────────────
       در دسکتاپ فوتر دو ستون کنار هم دارد (f34187d با flex-direction:row).
       در موبایل باید ستون‌ها روی هم بیایند (column) و همه‌ی محتوا وسط‌چین شود.
       بخش‌های اصلی:
         • f34187d: ستون اصلی (row→column)
         • مجوزها + eNAMAD + copyright: وسط‌چین
         • تماس با ما: آیتم‌های آدرس/تلفن/ایمیل وسط‌چین */

    /* ستون اصلی فوتر: از row به column تبدیل شود */
    [data-elementor-type="footer"] .elementor-element-f34187d {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* همه‌ی متن‌ها و عناصر فوتر: وسط‌چین */
    [data-elementor-type="footer"] .elementor-element-f34187d *,
    [data-elementor-type="footer"] .elementor-element-0a2602a *,
    [data-elementor-type="footer"] .elementor-element-9e9bc4c * {
        text-align: center !important;
        justify-content: center !important;
    }

    /* تماس با ما — آیتم‌های آدرس، تلفن، ایمیل وسط‌چین */
    [data-elementor-type="footer"] .elementor-element-9c819e1,
    [data-elementor-type="footer"] .elementor-element-d02e144,
    [data-elementor-type="footer"] .elementor-element-768b8f8,
    [data-elementor-type="footer"] .elementor-element-f1f7df5 {
        text-align: center !important;
        width: 100% !important;
    }
    [data-elementor-type="footer"] .elementor-element-9c819e1 *,
    [data-elementor-type="footer"] .elementor-element-d02e144 *,
    [data-elementor-type="footer"] .elementor-element-768b8f8 *,
    [data-elementor-type="footer"] .elementor-element-f1f7df5 * {
        text-align: center !important;
        justify-content: center !important;
    }

    /* eNAMAD: وسط‌چین (قبلاً flex-end بود) */
    [data-elementor-type="footer"] .elementor-element-d2fe98f {
        justify-content: center !important;
        align-items: center !important;
    }

    /* آیکون‌های شبکه‌های اجتماعی: حتماً وسط */
    [data-elementor-type="footer"] .elementor-element-2521aa9 {
        justify-content: center !important;
    }

    /* بخش مجوزها: وسط */
    [data-elementor-type="footer"] .elementor-element-0a2602a {
        align-items: center !important;
        text-align: center !important;
    }

    /* copyright: وسط */
    [data-elementor-type="footer"] .elementor-element-9e9bc4c {
        align-items: center !important;
        text-align: center !important;
    }

    /* آیکون‌های تماس (موقعیت آیکون کنار متن) — وسط‌چین */
    [data-elementor-type="footer"] .elementor-element-c455655 {
        align-items: center !important;
    }
    [data-elementor-type="footer"] .elementor-element-c455655 .elementor-icon-list-items {
        justify-content: center !important;
    }


    /* ─── MAIN CONTENT GENERAL ──────────────────────────────────────
       تنظیمات عمومی محتوای main برای خوانایی موبایل. */

    /* container ها — padding افقی متوسط (نه صفر، نه desktop) */
    main .e-con-boxed,
    main .e-con-full {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* عکس‌های widget تمام‌عرض موبایل (به جای width ثابت دسکتاپ) */
    main .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* تیترهای بزرگ desktop در موبایل کوچک‌تر شوند برای خوانایی بهتر
       کاربر گفت "متن تو گوشی مخصوصا عنوان ها خیلی بزرگ دیده میشن" */
    main h1, main .elementor-heading-title.elementor-size-xxl {
        font-size: clamp(1.35rem, 5vw, 1.8rem) !important;
        line-height: 1.35 !important;
    }
    main h2, main .elementor-heading-title.elementor-size-xl {
        font-size: clamp(1.2rem, 4.4vw, 1.55rem) !important;
        line-height: 1.4 !important;
    }
    main h3 {
        font-size: clamp(1.05rem, 4vw, 1.3rem) !important;
        line-height: 1.45 !important;
    }
    main h4, main h5, main h6 {
        font-size: clamp(0.95rem, 3.6vw, 1.15rem) !important;
        line-height: 1.5 !important;
    }

    /* دکمه‌ها قابل لمس باشند (min 44px) */
    .elementor-button,
    .premium-button,
    [class*="elementor-widget-button"] a,
    [class*="elementor-widget-button"] button {
        min-height: 44px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* فرم‌ها — input ها min height قابل لمس */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], input[type="url"],
    select, textarea {
        min-height: 44px !important;
        font-size: 16px !important; /* جلوگیری از zoom سفاری iOS */
    }


    /* ─── BODY-WIDE: جلوگیری از horizontal overflow ────────────────
       drawer منو در حالت بسته با `transform: translateX(110%)` بیرون
       از viewport قرار دارد ولی همچنان به document scrollWidth کمک
       می‌کند. `overflow: clip` کاملاً برش می‌دهد بدون اینکه scrollable
       area بسازد. `overflow-x: hidden` به‌عنوان fallback برای مرورگرهای
       قدیمی. */
    html, body {
        overflow-x: clip !important;
    }
    @supports not (overflow-x: clip) {
        html, body {
            overflow-x: hidden !important;
        }
    }

    /* container هایی که عرض ثابت دارند، fluid شوند */
    .e-con-boxed > .e-con-inner {
        max-width: 100% !important;
    }


    /* ─── IMAGES: همه‌ی تصاویر در محتوا، حداکثر عرض ۱۰۰٪ ──────────
       برای جلوگیری از overflow لوگوهای بزرگ مثل بنر فرانگار/FNT که
       با width ثابت تنظیم شده بودند. */
    main img,
    main svg,
    [data-elementor-type="footer"] img,
    [data-elementor-type="footer"] svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* بنر/لوگوی شرکای تجاری (Faranegar Tabriz / FNT) که با عرض دسکتاپ
       طراحی شده و در موبایل از container بزرگتر می‌شود */
    .elementor-widget-image .elementor-image,
    .elementor-widget-image figure,
    .elementor-widget-image a {
        max-width: 100% !important;
    }


    /* ─── BUTTONS: دکمه‌های CTA که از container بیرون می‌زنند ─────
       دکمه‌هایی مثل "درخواست" که در دسکتاپ width ثابت دارند و در
       موبایل text-cut می‌شوند. راه‌حل: widget container و خود لینک
       دکمه full-width بشن، متن نشکند، در center باشد. */

    /* Widget container — Elementor و Premium Addons */
    main .elementor-widget-button,
    main .elementor-widget-premium-addon-button,
    main [class*="elementor-widget-button"] {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* خود لینک/دکمه — auto-fit با محتوا، اما حداکثر عرض container */
    main .elementor-button,
    main .premium-button,
    main [class*="elementor-widget-button"] a,
    main [class*="elementor-widget-button"] button {
        max-width: 100% !important;
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* container والد دکمه (که دکمه را inline می‌چسباند) — اطمینان از
       اینکه فضای کافی برای دکمه‌ی full-width می‌دهد */
    main .elementor-widget-container {
        max-width: 100% !important;
    }


    /* ─── TEXT COLUMNS: ستون‌های متنی که در موبایل خیلی باریک می‌شوند
       (هر کلمه روی یک خط). علت: container parent دارای max-width
       کوچک، یا padding بزرگ، یا flex با ratio که در 375px کار نمی‌کند.
       حل: تمام e-con فرزند در main عرض 100٪ و حداقل عرض 0 */

    main .e-con.e-child,
    main .e-con-inner > .e-con {
        max-width: 100% !important;
        flex-basis: 100% !important;
        min-width: 0 !important;
    }

    /* widget های متن: word-break معقول */
    main .elementor-widget-text-editor,
    main .elementor-widget-heading {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Widget هایی با تنظیم "Initial Width" یا "Inherit" در Elementor
       — در دسکتاپ به اندازه‌ی محتوا شرینک می‌شوند (مثلا 199px) که در
       موبایل باعث می‌شود متن طولانی هر کلمه را روی یک خط بنویسد.
       در موبایل این widget ها باید عرض parent را پر کنند. */
    main .elementor-widget__width-initial,
    main .elementor-widget__width-inherit,
    main .elementor-widget__width-auto {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        align-self: stretch !important;
    }


    /* ─── ELEMENTOR FLEX-WRAP BUG: ستون‌بندی غلط در RTL ───────────
       Elementor در موبایل به طور پیش‌فرض `--flex-wrap-mobile: wrap`
       می‌گذارد. در یک کانتینر با `flex-direction: column` + `flex-wrap:
       wrap` + فرزندان با `flex-basis: 100%`، هر فرزند تمام ارتفاع را
       می‌خواهد، پس فرزند دوم به «ستون جدید» می‌پرد. در RTL، ستون جدید
       سمت چپ ساخته می‌شود → فرزند دوم از viewport بیرون می‌ره.

       حل قطعی: همه‌ی e-flex container ها در موبایل به flex-direction:
       column و flex-wrap: nowrap تبدیل شوند. این:
       • برای row-direction های اصلی → تبدیل به column → stack وردستی ✓
       • برای column-direction های اصلی → بدون تغییر ✓
       • حذف کامل bug ستون جدید سمت چپ ✓
       این رفتار همان نتیجه‌ی پیش‌فرض stack وردستی Elementor در mobile
       را بدون bug تأمین می‌کند. */
    main .e-flex,
    main .e-con-inner {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    /* استثنا — Container هایی که چند widget آیکن متوالی دارند (نوار
       شبکه‌های اجتماعی، آیکن‌های ابزار) — باید horizontal بمانند.
       با :has() تشخیص می‌دهیم: e-flex که حداقل ۲ widget icon متوالی
       داخل آن باشد، بازگرداندن به row با wrap. */
    main .e-flex:has(> .elementor-widget-icon + .elementor-widget-icon),
    main .e-flex:has(> .elementor-widget-social-icons),
    main .e-flex:has(> .elementor-icon-list-items.elementor-inline-items),
    [data-elementor-type="footer"] .e-flex:has(> .elementor-widget-icon + .elementor-widget-icon),
    [data-elementor-type="footer"] .e-flex:has(> .elementor-widget-social-icons) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* داخل nav social icons، حذف max-width 100٪ که آیکن‌ها رو cell width 100٪ می‌کند */
    main .e-flex:has(> .elementor-widget-icon + .elementor-widget-icon) > .elementor-widget-icon,
    [data-elementor-type="footer"] .e-flex:has(> .elementor-widget-icon + .elementor-widget-icon) > .elementor-widget-icon {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }


    /* ─── Premium Tabs Nav: تب‌های افقی → عمودی در موبایل ───────
       تب‌های "هوش مصنوعی و اتومیشن، مارکتینگ، ..." در دسکتاپ افقی هستند
       و در موبایل با عرض ۳۷۵ از container بیرون می‌زنند. عمودی stack
       شوند تا هر تب کامل دیده شود. */
    main .premium-tabs-nav-list.premium-tabs-horizontal {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    main .premium-tabs-nav-list.premium-tabs-horizontal .premium-tabs-nav-list-item {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }


    /* ─── Customers section: وسط‌چین کارت‌های مشتری ──────────────
       کارت‌های مشتری از widget bdt-interactive-tabs استفاده می‌کنند
       (نه elementor-icon-list). در دسکتاپ هر کارت چپ‌چین است (لوگو چپ،
       متن راست). در موبایل وسط‌چین کنیم تا تمیزتر باشد. */
    main .elementor-icon-list-items,
    main .elementor-icon-list-item {
        text-align: center !important;
        justify-content: center !important;
    }
    main .elementor-icon-list-item .elementor-icon-list-text {
        text-align: center !important;
    }
    /* bdt-interactive-tabs widget — کارت‌های مشتری به‌صورت SLIDER
       افقی در موبایل، دقیقاً مثل اسلایدر «دانشنامه و مقالات». هر کارت
       تمام‌عرض container است (یک کارت در هر view، بدون peek) تا عیناً
       مثل کاروسل دانشنامه (slidesPerView:1) دیده شود. */
    main .bdt-interactive-tabs-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding: 6px 0 14px 0 !important;
        scrollbar-width: thin !important;
        grid-template-columns: none !important;
    }
    main .bdt-interactive-tabs-wrap > .bdt-interactive-tabs-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: center !important;
    }

    /* bdt-interactive-tabs widget items — کارت‌های مشتری.
       ساختار: لوگو + متن در یک ردیف افقی. در موبایل به stack عمودی
       تبدیل می‌کنیم (لوگو بالا، متن وسط زیر آن) و وسط‌چین کامل. */
    main [data-widget_type="bdt-interactive-tabs.default"] .bdt-interactive-tabs-item,
    main .bdt-interactive-tabs-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 16px !important;
    }

    /* scrollbar style مثل سایر slider ها */
    main .bdt-interactive-tabs-wrap::-webkit-scrollbar {
        height: 6px !important;
    }
    main .bdt-interactive-tabs-wrap::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 3px !important;
    }
    main .bdt-interactive-tabs-wrap::-webkit-scrollbar-thumb {
        background: rgba(111, 0, 254, 0.4) !important;
        border-radius: 3px !important;
    }
    main .bdt-interactive-tabs-item > *,
    main .bdt-interactive-tabs-item h3,
    main .bdt-interactive-tabs-item h4,
    main .bdt-interactive-tabs-item .bdt-interactive-tabs-title,
    main .bdt-interactive-tabs-item p,
    main .bdt-interactive-tabs-item span,
    main .bdt-interactive-tabs-item div {
        text-align: center !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* تصویر/لوگوی مشتری وسط‌چین و در بالا */
    main .bdt-interactive-tabs-item img,
    main .bdt-interactive-tabs-item .bdt-interactive-tabs-icon,
    main .bdt-interactive-tabs-item [class*="-icon"] {
        order: -1 !important;
        margin: 0 auto 4px auto !important;
        display: block !important;
    }


    /* ─── DARK SECTIONS: متن سفید روی پس‌زمینه‌ی تیره ──────────
       بخش‌هایی با پس‌زمینه‌ی نیلی/تیره که متن سفید دارند، در موبایل
       گاهی به دلیل overlap با لایه‌های decorative، خوانایی پایین است.
       افزایش font-weight و رنگ روشن برای کنتراست بهتر. */
    main .elementor-element[style*="background-color: rgb(0"] *,
    main .elementor-element[style*="background-color:#0"] *,
    main [class*="dark"] p, main [class*="dark"] h2,
    main [class*="dark"] h3 {
        color: #f5f5f5 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    /* fallback: هر paragraph داخل main که رنگ متن آن سفید/خیلی روشن
       باشد، text-shadow کوچک برای کنتراست بهتر روی پس‌زمینه‌های متغیر */
    main p[style*="color: rgb(255"], main p[style*="color:#fff"], main p[style*="color: #fff"] {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    }


    /* ─── TEXT ALIGNMENT: حذف justify اجباری روی متن فارسی ─────────
       پلاگین Elementor در بسیاری از widget ها text-align: justify ست
       کرده. در موبایل که عرض خط کوچک است، justify باعث می‌شود فاصله‌ی
       بین کلمات خیلی زیاد شود و خوانایی متن فارسی به شدت کاهش یابد.
       در موبایل به جای justify، متن از start (راست در RTL) چیده شود. */
    main .elementor-widget-text-editor,
    main .elementor-widget-text-editor *,
    main .elementor-widget-heading,
    main .elementor-widget-heading *,
    main p,
    main h1, main h2, main h3, main h4, main h5, main h6 {
        text-align: start !important;
    }

    /* font-size های خیلی بزرگ desktop (مثل ۳۱px با line-height ۶۲px)
       در موبایل با عرض ۳۷۵px خط فقط ۳-۴ کلمه می‌گیرد. کاهش به اندازه‌ی
       قابل خواندن. clamp() اجازه می‌دهد بزرگ‌تر هم بشود بسته به viewport. */
    main p {
        font-size: clamp(15px, 4vw, 18px) !important;
        line-height: 1.7 !important;
    }
    main .elementor-widget-text-editor p,
    main .elementor-widget-text-editor {
        font-size: clamp(15px, 4vw, 18px) !important;
        line-height: 1.75 !important;
    }
    /* تیترهای H1/H2 بزرگ — clamp مناسب */
    main h1 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.35 !important; }
    main h2 { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.4 !important; }
    main h3 { font-size: clamp(17px, 4.6vw, 22px) !important; line-height: 1.5 !important; }
    main h4 { font-size: clamp(16px, 4.4vw, 20px) !important; line-height: 1.5 !important; }

    /* Premium Dual Header — تیترهای دو-بخشی سکشن‌ها (مثل «راهکار ها و خدمات»،
       «زمان سرمایه نهایی شماست») در موبایل ۴۰–۵۰px رندر می‌شدند چون
       <span> داخلی font-size مخصوص خودش را از post CSS دسکتاپ می‌گیرد که
       از کپ main h2 بزرگ‌تر است. مستقیماً span ها را هدف می‌گیریم. */
    main .premium-dual-header-first-header,
    main .premium-dual-header-first-span {
        font-size: clamp(22px, 6vw, 27px) !important;
        line-height: 1.35 !important;
    }
    main .premium-dual-header-second-header,
    main .premium-dual-header-second-span {
        font-size: clamp(14px, 4vw, 17px) !important;
        line-height: 1.4 !important;
    }

    /* وسط‌چین کردن تیترهای دو-بخشی سکشن‌ها در موبایل (فروشگاه «Online
       Service Store» و مشتریان «Our Customers»). این تیترها در دسکتاپ
       با text-align:center رندر می‌شوند، اما قانون عمومیِ بالاتر
       (main h2 {text-align:start !important}) آن‌ها را در موبایل
       راست‌چین می‌کرد. با specificity کلاس‌محور دوباره وسط‌چین می‌کنیم.
       اندازه‌ی فونت دست‌نخورده می‌ماند. */
    main .premium-header-block .elementor-widget-container,
    main .premium-dual-header-first-header,
    main .premium-dual-header-first-header span,
    main .premium-dual-header-first-span,
    main .premium-dual-header-second-header,
    main .premium-dual-header-second-span {
        text-align: center !important;
    }

    /* علاوه بر text-align، خودِ «باکسِ» ویجتِ تیتر هم باید وسط باشد.
       این ویجت‌ها در کانتینرهای flex با align-items:flex-start (در RTL=راست)
       قرار دارند، پس به‌اندازه‌ی محتوا جمع شده و می‌چسبند راست؛ در نتیجه با
       اینکه متنشان center بود، کل تیتر نسبت به سکشن به راست منحرف می‌شد
       (مثلاً «مشتریان ما» ۱۲۲px، «پروژه‌ها» ۸۴px، «دانشنامه» ۸۰px). با
       تمام‌عرض‌کردن ویجت، متنِ وسط‌چین دقیقاً وسطِ سکشن می‌نشیند. */
    main .premium-header-block.elementor-widget {
        width: 100% !important;
        max-width: 100% !important;
        align-self: center !important;
    }

    /* فروشگاه سرویس‌ها («Online Service Store»): کانتینر تیتر دو-بخشی در
       دسکتاپ margin-bottom منفی (-25px) دارد. روی موبایل این مقدار منفی
       گرید محصولات را به‌سمت بالا روی زیرنویس می‌کشید و باعث هم‌پوشانی
       (~15px) می‌شد. فقط در موبایل خنثی‌اش می‌کنیم تا فاصله‌ی تمیز بین
       زیرنویس و کارت‌ها بماند (دسکتاپ دست‌نخورده باقی می‌ماند). */
    main .elementor-element-5b660e3 {
        margin-bottom: 8px !important;
    }

    /* فروشگاه: تیترِ «فروشگاه سرویس ها و خدمات» نسبت به کل سکشن وسط نبود.
       کانتینرِ تیتر (d1fffe2) در موبایل ستونی با align-items:flex-start
       (در RTL = راست) است، پس ویجتِ تیتر فقط به‌اندازه‌ی محتوایش عرض
       می‌گرفت و می‌چسبید راست (مرکزش ~۴۹px از مرکز سکشن منحرف می‌شد).
       با align-items:center هم آیکن و هم تیتر دقیقاً وسطِ سکشن می‌نشینند. */
    main .elementor-element-d1fffe2 {
        align-items: center !important;
    }

    /* فروشگاه: عنوان‌های زیر کارت‌های دسته‌بندی (اتومیشن، زیرساخت کسب و
       کار، ...) در موبایل به‌خاطر قانونِ عمومیِ h2 حدود ۲۰.۸px می‌شدند
       (حتی بزرگ‌تر از دسکتاپ ۱۸px) و letter-spacing:3.3px باعث پیچیدن و
       شلوغی می‌شد. کوچک‌تر + فاصله‌حرفِ کمتر + وسط‌چین (مثل دسکتاپ) تا
       تمیزتر و خواناتر دیده شوند. */
    main .elementor-element-e0c4fa2 .woocommerce-loop-category__title {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
    main .elementor-element-e0c4fa2 .woocommerce-loop-category__title .count {
        font-size: 13px !important;
    }

    /* تیترهای داخل کارت‌های آیکن — وسط‌چین تا تمیزتر باشند */
    main .elementor-icon-box-content .elementor-icon-box-title,
    main .elementor-icon-box-content .elementor-icon-box-description,
    main [class*="elementor-position-top"] .elementor-icon-box-title,
    main [class*="elementor-position-top"] .elementor-icon-box-description {
        text-align: center !important;
    }


    /* ─── ICON BOX CARDS: وسط‌چین در موبایل ────────────────────────
       کارت‌های "افزایش سودآوری، کاهش ریسک، ..." در دسکتاپ سمت راست
       (RTL) چیده شده‌اند با آیکن سمت راست متن. در موبایل وسط‌چین
       به ظاهر بصری بهتر است. */
    main .elementor-icon-box-wrapper {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    main .elementor-icon-box-icon {
        margin: 0 auto !important;
    }

    main .elementor-icon-box-content {
        text-align: center !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION DRAWER (Slide-in modal from left)
   ═════════════════════════════════════════════════════════════════════
   منوی همبرگر به‌صورت drawer سمت چپ slide می‌آید (مثل اپ‌های موبایل
   مدرن). در حالت بسته: کاملاً خارج viewport. در حالت باز (toggle با
   کلاس .elementor-active): با انیمیشن slide به داخل می‌آید.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* drawer container — fixed full height، اولش خارج viewport
       در RTL (فارسی) drawer از سمت راست می‌آید (طبیعی‌تر برای دست
       کاربر و جهت خواندن).
       isolation: isolate یک stacking context جدید ایجاد می‌کند تا
       backdrop-filter پشت drawer به محتوای آن سرایت نکند. */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(85vw, 320px) !important;
        max-width: 320px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        background: #ffffff !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.22) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 70px 12px 24px 12px !important;
        isolation: isolate !important;

        transform: translateX(110%) !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        visibility: hidden !important;
        opacity: 1 !important;

        display: block !important;
    }

    /* وقتی toggle کنار dropdown کلاس elementor-active دارد، dropdown باز شود */
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* آیتم‌های منو inside drawer */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* RTL: تراز راست */
        padding: 16px 18px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        background: transparent !important;
        text-decoration: none !important;
        transition: background 0.2s, color 0.2s, transform 0.15s !important;
        min-height: 52px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: right !important;
        border: 1px solid transparent !important;
        letter-spacing: 0.2px !important;
        /* تضمین click — pointer events فعال، cursor pointer */
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1 !important;
    }

    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a:focus {
        background: #f5f1ff !important;
        color: #6F00FE !important;
        transform: translateX(-4px);
    }

    /* صفحه‌ی فعلی — استایل ملایم نه پررنگ */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-item > a,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-ancestor > a {
        background: #f5f1ff !important;
        color: #6F00FE !important;
        font-weight: 700 !important;
        border-color: rgba(111, 0, 254, 0.15) !important;
    }

    /* divider ظریف بین آیتم‌های منو برای تمایز بهتر */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li + li {
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
    }

    /* دکمه‌ی close (X) داخل drawer در گوشه‌ی بالا-چپ (در RTL: لبه‌ی
       مخالف ورودی drawer) — به Elementor نمی‌سپریم چون آنجا توگل با
       همان hamburger دو-وظیفه‌ای است؛ صرفاً موقعیت‌دهی hamburger وقتی
       باز است را بهبود می‌دهیم. */
    /* X close button — وقتی drawer باز است، در گوشه‌ی بالا-چپ drawer
       (drawer از راست می‌آید، X در سمت مقابل آن قرار می‌گیرد). */
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        position: fixed !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }


    /* ─── HEADER MOBILE — زیباتر و حرفه‌ای‌تر ─────────────────────
       هدر در موبایل: لوگو + همبرگر در یک ردیف تمیز.
       NOTE: backdrop-filter یک stacking context جدید می‌سازد و باعث
       می‌شود drawer fixed داخل header از محتوای main پایین برود.
       به‌جای backdrop-filter از background solid استفاده می‌کنیم و
       z-index هدر را بالا می‌دهیم تا drawer روی همه‌چیز بنشیند. */
    header[data-elementor-type="header"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    }

    /* hamburger کمی زیباتر — دایره‌ی پس‌زمینه ملایم با hover */
    header[data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active) {
        background: rgba(111, 0, 254, 0.06) !important;
        border-radius: 10px !important;
        transition: background 0.2s, transform 0.15s !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active):active {
        transform: scale(0.92) !important;
        background: rgba(111, 0, 254, 0.12) !important;
    }


    /* ─── DARK CTA SECTION — متن سفید روی پس‌زمینه‌ی تیره ───────
       بخش "همین امروز با ما تماس بگیرید" + "آیا آماده‌اید..." در موبایل
       متن سفید روی گرادینت تیره/فوتر دارد. مشکل: متن تقریباً نامرئی
       (سفید روی پس‌زمینه‌ی ناهموار). حل: text-shadow قوی + رنگ روشن‌تر */
    main .elementor-element[class*="-bg-overlay"],
    main .elementor-background-overlay {
        background-color: rgba(0, 0, 0, 0.32) !important;
    }
    /* هر container در main که background dark دارد، متن داخلش باید
       کنتراست داشته باشد. استفاده از CSS :has() برای detect.
       اعمال text-shadow قوی روی متن‌های روشن (color rgb >220) و
       افزایش وزن فونت برای خوانایی بهتر */

    /* استایل کلی برای تمام پاراگراف‌های روشن در main — کنتراست عمومی */
    main p, main .elementor-widget-text-editor p {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }

    /* بخش‌هایی با background dark gradient یا تصویر تیره (مثل CTA
       "آیا آماده‌اید"). شناسایی از طریق رنگ متن روشن یا overlay. */
    main .elementor-element[class*="-bg-overlay"] *,
    main .elementor-background-overlay ~ * p,
    main .elementor-background-overlay ~ * h1,
    main .elementor-background-overlay ~ * h2,
    main .elementor-background-overlay ~ * h3,
    main .elementor-background-overlay ~ * span {
        text-shadow:
            0 1px 4px rgba(0, 0, 0, 0.9),
            0 2px 12px rgba(0, 0, 0, 0.7) !important;
        font-weight: 600 !important;
    }

    /* رویکرد universal: هر متن با رنگ روشن (نزدیک سفید) داخل main،
       شامل text-shadow قوی شود. این رویکرد جامع‌ترین راه است چون
       به inline-style یا کلاس وابسته نیست. */
    main p[class*="elementor-heading"],
    main h1, main h2, main h3, main h4, main h5, main h6,
    main p,
    main .elementor-widget-text-editor,
    main .elementor-widget-text-editor *,
    main .premium-button-text,
    main .elementor-button {
        /* اگر color به سمت سفید است (light text)، shadow اضافه شود */
    }

    /* fallback مستقیم: متن داخل sections که overlay دارند */
    main .elementor-element:has(> .elementor-background-overlay) p,
    main .elementor-element:has(> .elementor-background-overlay) h1,
    main .elementor-element:has(> .elementor-background-overlay) h2,
    main .elementor-element:has(> .elementor-background-overlay) h3,
    main .elementor-element:has(> .elementor-background-overlay) h4,
    main .elementor-element:has(> .elementor-background-overlay) span {
        text-shadow:
            0 1px 4px rgba(0, 0, 0, 0.85),
            0 2px 14px rgba(0, 0, 0, 0.65) !important;
        font-weight: 600 !important;
    }

    /* container هایی که overlay دارند — تیره‌تر شدن برای کنتراست بهتر */
    main .elementor-element:has(> .elementor-background-overlay) .elementor-background-overlay {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    /* بخش‌های CTA با گرادینت تیره که از طریق background-image می‌آیند
       (نه overlay div). targetkردن بر اساس section ID-class مشخص.
       رنگ زرد روشن انتخاب شده برای کنتراست حداکثری روی پس‌زمینه‌ی
       تیره/تصویری — درست مثل دکمه‌های CTA سایت اصلی. */
    main .elementor-element-39207de p,
    main .elementor-element-39207de h1,
    main .elementor-element-39207de h2,
    main .elementor-element-39207de h3,
    main .elementor-element-39207de h4,
    main .elementor-element-39207de span,
    main .elementor-element-39207de .elementor-heading-title {
        color: #ffffff !important;
        font-weight: 800 !important;
        text-shadow:
            0 2px 6px rgba(0, 0, 0, 1),
            0 0 16px rgba(0, 0, 0, 0.95),
            1px 1px 2px rgba(0, 0, 0, 0.9) !important;
        letter-spacing: 0.3px !important;
    }
    /* overlay تیره‌ی برند روی کل بخش CTA.
       ⚠️ علتِ نامرئی‌بودن متن: در سایت اصلی رنگ متن (#E9ECF2) با رنگ
       پس‌زمینه‌ی همین section یکی است و فقط روی ناحیه‌ی تیرهٔ تصویرِ
       background خوانا می‌شود؛ در موبایل تصویر (background-size:contain)
       کوچک می‌شود و متنِ بالایی روی زمینه‌ی روشن می‌افتد ⇒ نامرئی.
       راه‌حل قطعی: یک overlay تیره‌ی پررنگ روی کل section + متن سفیدِ
       پررنگ. اینطوری مستقل از اینکه تصویرِ background لود شود یا نه،
       متن همیشه خواناست. (تصویر background یک URL ریموت است که آفلاین
       لود نمی‌شود، پس نباید به آن وابسته باشیم.) */
    main .elementor-element-39207de {
        position: relative !important;
        /* حذف تصویرِ پس‌زمینه‌ی شخص (up-footear.webp) در موبایل: روی
           گوشی این تصویر با background-size:contain به‌صورت یک نوارِ
           بهم‌ریخته وسطِ سکشن می‌افتاد و بد دیده می‌شد. در عوض یک
           پس‌زمینه‌ی بنفشِ تمیزِ برند می‌گذاریم. (در دسکتاپ دست‌نخورده) */
        background-image: none !important;
        background-color: #1e0738 !important;
    }
    /* overlay اکنون مات (opaque) است تا حتی اگر تصویرِ ریموت لود شود،
       کاملاً پوشانده شود و عکس روی موبایل دیده نشود. گرادینتِ بنفشِ برند
       به CTA حسِ یک بنرِ تمیز و یکدست می‌دهد. */
    main .elementor-element-39207de::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(135deg,
            #1e0738 0%,
            #4a0d9e 48%,
            #6F00FE 100%) !important;
        opacity: 1 !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
    main .elementor-element-39207de > * {
        position: relative !important;
        z-index: 1 !important;
    }

    /* رویکرد عمومی‌تر: هر متن با color روشن (light gray یا کم‌رنگ)
       داخل main باید text-shadow قوی داشته باشد. CSS نمی‌تواند رنگ
       کلاس‌ها را inspect کند، اما با attribute selector برای style‌های
       inline که سفید/کم‌رنگ هستند، پوشش می‌دهیم. علاوه بر این، در
       sections با gradient، فرض می‌کنیم متن سفید است. */
    main [class*="-dark"] p,
    main [class*="-dark"] h2,
    main [class*="-dark"] h3,
    main [class*="background-image"] p,
    main [class*="background-image"] h2,
    main [data-settings*="background_image"] p,
    main [data-settings*="background_image"] h2,
    main [data-settings*="background_image"] h3 {
        color: #ffffff !important;
        font-weight: 600 !important;
        text-shadow:
            0 1px 4px rgba(0, 0, 0, 0.85),
            0 2px 12px rgba(0, 0, 0, 0.6) !important;
    }

    /* دکمه‌های اکشن (درخواست مشاوره، سوالات متداول، شماره تماس،
       مشاهده کل پروژه‌ها/مقالات و …) در موبایل دقیقاً مثل دسکتاپ:
       زرد #FFC533 با متن سرمه‌ای #042551 و وزن ۹۰۰. (قبلاً برای کنتراست
       سفید شده بودند ولی کاربر خواست عیناً رنگ دسکتاپ باشند.) */
    main .elementor-button,
    main .premium-button,
    main [class*="elementor-widget-button"] a {
        background: #FFC533 !important;
        color: #042551 !important;
        font-weight: 900 !important;
        border: 2px solid #FFC533 !important;
        box-shadow: 0 4px 12px rgba(4, 37, 81, 0.18) !important;
    }
    /* متنِ داخلِ دکمه — span داخل premium-button-text-icon-wrapper. در CTA
       (#upfooter / 39207de) یک قانونِ «span سفید» وجود دارد؛ این selector
       با specificity بالاتر (0,2,2) آن را خنثی و متن را سرمه‌ای می‌کند تا
       روی زرد خوانا بماند. */
    main .premium-button .premium-button-text-icon-wrapper span,
    main .premium-button span,
    main .elementor-button .elementor-button-text {
        color: #042551 !important;
        font-weight: 900 !important;
        text-shadow: none !important;
    }
    main .elementor-button:hover,
    main .premium-button:hover {
        background: #f0b400 !important;
        border-color: #f0b400 !important;
    }
    main .premium-button:hover .premium-button-text-icon-wrapper span,
    main .premium-button:hover span,
    main .elementor-button:hover .elementor-button-text {
        color: #042551 !important;
    }
    /* ─── HERO (9239a69) موبایل — تیترها وسط‌چین مثل دسکتاپ ────────
       تیتر اصلی H1 (d30dc84) و زیرتیترِ «راهکار ها و خدمات ما» (0d5e68a)
       در دسکتاپ center هستند ولی در موبایل start (راست‌چین) بودند و کنارِ
       آیکن/دکمه‌ی وسط‌چین نامرتب دیده می‌شدند. */
    main .elementor-element-d30dc84,
    main .elementor-element-d30dc84 .elementor-heading-title,
    main .elementor-element-0d5e68a,
    main .elementor-element-0d5e68a .elementor-heading-title {
        text-align: center !important;
    }
    main .elementor-element-d30dc84 .elementor-heading-title {
        line-height: 1.5 !important;
    }
    /* فاصله‌ی «راهکار ها و خدمات ما» از دکمه‌ی درخواست مشاوره‌ی بالایش */
    main .elementor-element-0d5e68a {
        margin-top: 22px !important;
    }

    /* ─── CTA (#upfooter) موبایل — چینش متعادل و رفع آفست ──────────
       در دسکتاپ محتوای CTA در نیمه‌ی راست (کنار تصویرِ پس‌زمینه‌ی شخص)
       می‌نشیند و نوار آیکن‌های اجتماعی (a261472) با margin-right:120px
       جا داده شده. در موبایل تصویری در کنار نیست؛ همان آفست باعث می‌شد
       این نوار ۱۱۰px از لبه‌ی چپ بیرون بزند و کج دیده شود. در موبایل
       همه را تمام‌عرض و وسط‌چین می‌کنیم تا یک ستونِ تمیز و متقارن شود. */
    main .elementor-element-39207de > .e-con-inner {
        align-items: center !important;
        gap: 14px !important;
    }
    main .elementor-element-a261472 {
        margin-right: 0 !important;
        margin-left: 0 !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    main .elementor-element-1e602e0 {
        align-self: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    /* جمله‌ی دعوتِ کوتاه «همین امروز با ما تماس بگیرید…» را وسط‌چین کن
       (همان رفتارِ دسکتاپ که text-align:center است). */
    main .elementor-element-f39c26e,
    main .elementor-element-f39c26e p {
        text-align: center !important;
    }
    /* دکمه‌های CTA در موبایل تمام‌عرض و با فاصله‌ی یکنواخت روی هم */
    main .elementor-element-1e602e0 .premium-button {
        width: 100% !important;
        justify-content: center !important;
    }


    /* ─── FOOTER MOBILE — تمیز و خوانا ───────────────────────────
       فوتر شامل چند ستون است که در موبایل روی هم چیده می‌شوند. اعمال
       padding یکنواخت، حذف border/divider های decorative، فاصله‌ی
       استاندارد بین آیتم‌ها. */
    [data-elementor-type="footer"] {
        background: #f8f9fb !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-elementor-type="footer"] .e-con,
    [data-elementor-type="footer"] .e-con-inner {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    [data-elementor-type="footer"] h2,
    [data-elementor-type="footer"] h3,
    [data-elementor-type="footer"] h4 {
        margin-bottom: 12px !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }
    [data-elementor-type="footer"] p,
    [data-elementor-type="footer"] li {
        margin-bottom: 8px !important;
        line-height: 1.6 !important;
        font-size: 0.95rem !important;
    }
    [data-elementor-type="footer"] a {
        text-decoration: none !important;
    }
    /* آیکن‌های شبکه اجتماعی در فوتر — grid 4×2 برای چینش متعادل
       ۸ آیکن در ۲ ردیف × ۴ ستون (به جای flex-wrap نامتعادل ۵+۳). */
    [data-elementor-type="footer"] .e-flex:has(> .elementor-widget-icon + .elementor-widget-icon) {
        display: grid !important;
        grid-template-columns: repeat(4, auto) !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 16px 12px !important;
        gap: 18px 22px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    [data-elementor-type="footer"] .e-flex:has(> .elementor-widget-icon + .elementor-widget-icon) > .elementor-widget-icon {
        margin: 0 !important;
    }


    /* ─── FOOTER OVERFLOW — حذف margin/positioning های desktop ─────
       container های فوتر در دسکتاپ ممکن است margin-left/right یا
       transform داشته باشند (مثلاً برای offset designs). در موبایل
       این آفست‌ها باعث overflow افقی می‌شوند. همه‌ی margin های افقی
       e-con/e-flex در فوتر را به ۰ ریست می‌کنیم. */
    [data-elementor-type="footer"] .e-con,
    [data-elementor-type="footer"] .e-flex,
    [data-elementor-type="footer"] .elementor-element {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* همینطور main: container هایی که با margin desktop آفست دارن */
    main .e-con[style*="margin-"],
    main .e-flex[style*="margin-"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* ─── DIVIDER OVERFLOW — رفع اسکرول افقی موبایل ───────────────
       widget های divider داخل کانتینرهای flex-column با align-items:
       flex-start روی محور افقی به width:0 جمع می‌شوند و به لبه‌ی راست
       (RTL) می‌چسبند؛ آیکنِ ۳۰px وسطشان از لبه‌ی صفحه بیرون می‌زند و
       باعث اسکرول عرضی می‌شود (به‌خصوص مرورگرهای قدیمی که overflow:clip
       را پشتیبانی نمی‌کنند). با تمام‌عرض‌کردن widget مشکل رفع می‌شود و
       آیکن دقیقاً وسط می‌نشیند. */
    main .elementor-widget-divider {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }
    main .elementor-widget-divider .elementor-divider,
    main .elementor-widget-divider .elementor-divider-separator {
        width: 100% !important;
    }


    /* ─── "15 سال تجربه" widget — کارت با عدد بزرگ ────────────
       این widget در موبایل عدد ۱۵ خیلی بزرگ + متن + arrow دارد.
       بهبود: padding یکنواخت، center-align، arrow کوچک‌تر. */
    main .elementor-widget-counter,
    main [class*="counter-number"],
    main .elementor-counter {
        text-align: center !important;
    }
    main .elementor-counter-number-wrapper,
    main .elementor-counter-title {
        text-align: center !important;
        justify-content: center !important;
    }


    /* ─── DRAWER X BUTTON — حذف focus outline زرد ─────────────
       browser ها روی hamburger active یک focus ring (معمولاً زرد یا
       آبی) رسم می‌کنند که زشت است. */
    header[data-elementor-type="header"] .elementor-menu-toggle:focus,
    header[data-elementor-type="header"] .elementor-menu-toggle:focus-visible,
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        outline: none !important;
        outline-offset: 0 !important;
    }


/* بستن block @media (max-width: 768px) */
}


/* ─── PRELOADER (wppu) — فقط در موبایل constrain شود ───────────
   روی دسکتاپ preloader اندازه طبیعی خودش (500px) داشته باشد.
   فقط در viewport های ≤768 constrain می‌کنیم تا overflow نکند. */
@media (max-width: 768px) {
    .wppu-preloader,
    .wppu-preloader * {
        box-sizing: border-box !important;
    }
    .wppu-preloader {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .wppu-preloader .wppu-logo-loader,
    .wppu-preloader .wppu_frameT,
    .wppu-preloader .wppu_frameTC,
    .wppu-preloader .wppu_special_preloader,
    .wppu-preloader [class*="wppu_frame"],
    .wppu-preloader div[style*="width:500"],
    .wppu-preloader div[style*="width: 500"] {
        max-width: 90vw !important;
        width: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        position: relative !important;
    }
    .wppu-preloader img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .wppu-preloader div[style*="width"] {
        max-width: 90vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 480px) {
    .wppu-preloader .wppu-logo-loader,
    .wppu-preloader [class*="wppu_frame"],
    .wppu-preloader div[style*="width"] {
        max-width: 86vw !important;
    }
}


/* placeholder block برای ادامه (با هدف حفظ ساختار اصلی فایل) */
@media (max-width: 768px) {

    /* backdrop overlay — فقط لایه‌ی پشت drawer تیره شود، نه خود drawer.
       ⚠️ مهم: backdrop باید روی خودِ header باشد (نه روی toggle).
       toggle در حالت active دارای z-index:10000 است و یک stacking context
       می‌سازد؛ اگر backdrop روی ::after آن باشد، بالای drawer (9999) رندر
       می‌شود و هم کلیک منو را می‌گیرد هم کل drawer را تیره می‌کند.
       drawer یک فرزندِ header است (z-index 9999)، پس ::after خودِ header
       زیرِ drawer رندر می‌شود → فقط پس‌زمینه تیره می‌شود نه drawer.
       pointer-events:none تضمین می‌کند هرگز کلیک‌ها را نگیرد. */
    header[data-elementor-type="header"]:has(.elementor-menu-toggle.elementor-active)::after {
        content: "";
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 1 !important;
        pointer-events: none !important;
        animation: drawer-backdrop-in 0.32s ease both !important;
    }

    @keyframes drawer-backdrop-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* hamburger وقتی drawer باز است (X button) بالاتر از drawer
       نمایش داده شود تا کاربر بتواند با همان دکمه ببندد. position
       fixed قبلاً تنظیم شده — اینجا فقط z-index */
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        z-index: 10000 !important;
    }


    /* ─── PROJECTS GRID → HORIZONTAL SLIDER در موبایل ─────────────
       widget bdt-post-grid از کلاس .bdt-grid برای layout استفاده می‌کند
       (با grid-template-columns روی parent). در موبایل به یک ردیف
       اسکرول افقی (snap) تبدیل می‌کنیم — مشابه swiper "دانشنامه و مقالات" */
    main .bdt-grid.bdt-grid-stack,
    main .bdt-post-grid .bdt-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 6px 12px 14px 12px !important;
        scrollbar-width: thin !important;
        margin: 0 !important;
        grid-template-columns: none !important;
    }
    main .bdt-grid.bdt-grid-stack > *,
    main .bdt-post-grid .bdt-grid > * {
        flex: 0 0 92% !important;
        max-width: 92% !important;
        width: 92% !important;
        scroll-snap-align: center !important;
    }

    /* استایل scrollbar */
    main .bdt-grid::-webkit-scrollbar {
        height: 6px !important;
    }
    main .bdt-grid::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 3px !important;
    }
    main .bdt-grid::-webkit-scrollbar-thumb {
        background: rgba(111, 0, 254, 0.4) !important;
        border-radius: 3px !important;
    }
}


/* ─── PHONE-SPECIFIC (≤480px) ──────────────────────────────────────
   تنظیمات شدیدتر برای گوشی‌های کوچک. */

@media (max-width: 480px) {

    /* لوگو کمی کوچک‌تر */
    .elementor-element-159155c img,
    .elementor-element-814e541 img {
        max-height: 50px !important;
    }

    /* تیترها یک پله کوچک‌تر */
    main h2, main .elementor-heading-title.elementor-size-xl {
        font-size: clamp(1.3rem, 4.8vw, 1.7rem) !important;
    }
    main .premium-dual-header-first-header,
    main .premium-dual-header-first-span {
        font-size: clamp(20px, 5.6vw, 24px) !important;
    }
    main .premium-dual-header-second-header,
    main .premium-dual-header-second-span {
        font-size: clamp(13px, 3.8vw, 15px) !important;
    }

    /* padding container ها کمتر */
    main .e-con-boxed,
    main .e-con-full {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   DRAWER — طراحی سازمانی (موبایل ≤768 + تبلت 769–1024)
   ═════════════════════════════════════════════════════════════════════
   رنگ‌بندی سازمانی: navy #042551 + زرد #FFC533
   هدر navy با لوگوی سفید + دکمه X سمت چپ + کارت‌های سفید + RTL راست‌چین */

/* ── Drawer: هدر سفید + لوگوی رنگی + X navy کوچک داخل هدر ── */
@media (max-width: 1024px) {

    /* بدنه: پس‌زمینه آبی‌خاکستری خیلی ملایم */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown {
        background: #f0f4fb !important;
        padding-top: 80px !important;
        padding-bottom: 32px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        border-left: 3px solid #042551 !important;
    }

    /* هدر سفید با لوگوی رنگی سایت */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        height: 68px !important;
        background-color: #ffffff !important;
        background-image: url('/content/uploads/2025/08/data-rythms-final-02.png') !important;
        background-repeat: no-repeat !important;
        background-size: auto 40px !important;
        background-position: center center !important;
        border-bottom: 2px solid #042551 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        box-shadow: 0 2px 8px rgba(4,37,81,0.08) !important;
    }

    /* X: navy کوچک ۳۴px — داخل هدر سفید */
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        width: 34px !important;
        height: 34px !important;
        padding: 6px !important;
        background: #042551 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(4,37,81,0.25) !important;
        z-index: 10000 !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active svg {
        fill: white !important;
        color: white !important;
        width: 22px !important;
        height: 22px !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
        fill: white !important;
        color: white !important;
    }

    /* آیتم‌ها: کارت سفید، متن راست‌چین */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu {
        gap: 7px !important;
        padding: 4px 0 !important;
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li + li {
        border-top: none !important;
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
        background: #ffffff !important;
        border: none !important;
        border-right: 3px solid #dee6f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 5px rgba(4,37,81,0.07) !important;
        color: #042551 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 14px 18px 14px 12px !important;
        min-height: 50px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        /* در RTL: flex-start = سمت راست بصری؛ flex-end = سمت چپ بصری */
        direction: rtl !important;
        justify-content: flex-start !important;
        text-align: right !important;
        letter-spacing: 0.3px !important;
        transform: none !important;
        transition: all 0.18s ease !important;
    }

    /* hover */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a:focus {
        background: #e8f0ff !important;
        color: #042551 !important;
        border-right: 3px solid #FFC533 !important;
        box-shadow: 0 3px 12px rgba(4,37,81,0.1) !important;
        transform: translateX(-2px) !important;
    }

    /* صفحه فعال — همرنگ دسکتاپ: rgb(229,50,241) بنفش/صورتی */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-item > a,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-ancestor > a {
        background: rgba(229, 50, 241, 0.08) !important;
        color: rgb(229, 50, 241) !important;
        font-weight: 700 !important;
        border-right: 4px solid rgb(229, 50, 241) !important;
        border-color: rgb(229, 50, 241) !important;
        box-shadow: 0 3px 12px rgba(229,50,241,0.18) !important;
    }
}

/* ── X: موقعیت سمت چپ — موبایل (34px center در هدر 68px → top=17) ── */
@media (max-width: 768px) {
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        top: 17px !important;
        left: calc(100vw - min(85vw, 320px) + 10px) !important;
        right: auto !important;
    }
}

/* ── X: موقعیت سمت چپ — تبلت ── */
@media (min-width: 769px) and (max-width: 1024px) {
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        top: 17px !important;
        left: calc(100vw - min(70vw, 340px) + 10px) !important;
        right: auto !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   FOOTER MOBILE — جلوگیری از اسکرول افقی + وسط‌چینی copyright
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* کانتینر اصلی فوتر: overflow خودش رو نگه داره */
    [data-elementor-type="footer"] {
        overflow-x: hidden !important;
    }
    [data-elementor-type="footer"] .elementor-element-f34187d {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    /* copyright paragraph: وسط‌چین */
    [data-elementor-type="footer"] .elementor-element-b3ef33a p,
    [data-elementor-type="footer"] .elementor-element-9e9bc4c p,
    [data-elementor-type="footer"] .elementor-element-b02fa54 + * p {
        text-align: center !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   GLOBAL FIXES (هم desktop هم mobile)
   ═════════════════════════════════════════════════════════════════════ */

/* WooCommerce Product Category Cards — فاصله بین تصویر و عنوان
   در سکشن "فروشگاه سرویس‌ها و خدمات" کارت‌های دسته‌بندی، عنوان فارسی
   به تصویر چسبیده است. فاصله‌ی استاندارد اضافه می‌کنیم تا تمیزتر باشد. */
.woocommerce ul.products li.product-category,
.woocommerce ul.products li.product {
    padding-bottom: 12px !important;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    margin-top: 16px !important;
    padding-top: 0 !important;
    display: block !important;
    line-height: 1.6 !important;
}

/* تصاویر کارت‌های محصول/دسته‌بندی — margin-bottom برای انفصال از عنوان */
.woocommerce ul.products li.product-category > a > img,
.woocommerce ul.products li.product > a > img,
.woocommerce ul.products li.product-category img:first-of-type,
.woocommerce ul.products li.product img:first-of-type {
    display: block !important;
    margin-bottom: 14px !important;
}


/* Premium Dual Header — تیتر دو-بخشی
   ─────────────────────────────────────────────────────────────────────
   ساختار: یک <h2> با دو <span> داخل آن. اولی تیتر اصلی فارسی، دومی
   subtitle انگلیسی. پلاگین premium-addons تنظیم پیش‌فرض line-height
   و margin مناسبی بین این دو ندارد و subtitle خیلی نزدیک به تیتر می‌چسبد.
   فاصله‌ی عمودی استاندارد بین تیتر و subtitle را اضافه می‌کنیم. */
.premium-dual-header-second-header {
    display: block;
    margin-top: 0.6em;
    line-height: 1.4;
}


/* ═════════════════════════════════════════════════════════════════════
   DIVIDER PATTERN FIX — بازگردانی الگوی «× × ×» (نوع pattern)
   ═════════════════════════════════════════════════════════════════════
   divider های نوع «pattern» در Elementor با ماسک SVG (data-URI) الگوی
   ضربدر «× × ×» می‌ساختند، اما HTTrack آن data-URI را ذخیره نکرد، پس
   --divider-pattern-url خراب شد و نوار توپر خاکستری دیده می‌شد.
   حل: یک ماسک SVG معتبرِ inline می‌سازیم که همان «×» را بازتولید می‌کند.

   دو نوع divider داریم:
   • view-line  (بدون آیکن): یک separator سراسری → ماسک روی خودِ separator
   • view-line_icon (با آیکن قطب‌نمای وسط): Elementor دو خط «×» را از
     ::before و ::after جداگانه‌ی separator می‌سازد و آیکن وسطشان است.
     پس برای این نوع، ماسک باید روی ::before/::after برود نه خود separator،
     وگرنه آیکن به چپ می‌افتد و خطوط دو طرف ناپدید می‌شوند.

   متغیر ماسک یک‌بار تعریف می‌شود تا تکرار نشود. */
.elementor-widget-divider--separator-type-pattern .elementor-divider {
    --x-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 L12 12 M12 4 L4 12' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── نوع بدون آیکن: ماسک روی خود separator ── */
.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator {
    background: #b0b6c0 !important;
    background-image: none !important;
    border-top: none !important;
    height: 14px !important;
    min-height: 14px !important;
    -webkit-mask-image: var(--x-mask) !important;
    mask-image: var(--x-mask) !important;
    -webkit-mask-repeat: repeat-x !important;
    mask-repeat: repeat-x !important;
    -webkit-mask-size: 16px 14px !important;
    mask-size: 16px 14px !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
/* در نوع بدون آیکن، pseudo ها لازم نیستند (نوار توپر می‌ساختند) */
.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator::before,
.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator::after {
    display: none !important;
    content: none !important;
}

/* ── نوع با آیکن: خطوط «×» از ::before/::after دو طرف آیکن ── */
.elementor-widget-divider--view-line_icon .elementor-divider-separator {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    height: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    display: flex !important;
    align-items: center !important;
}
.elementor-widget-divider--view-line_icon .elementor-divider-separator::before,
.elementor-widget-divider--view-line_icon .elementor-divider-separator::after {
    content: "" !important;
    display: block !important;
    flex-grow: 1 !important;
    height: 14px !important;
    background: #b0b6c0 !important;
    -webkit-mask-image: var(--x-mask) !important;
    mask-image: var(--x-mask) !important;
    -webkit-mask-repeat: repeat-x !important;
    mask-repeat: repeat-x !important;
    -webkit-mask-size: 16px 14px !important;
    mask-size: 16px 14px !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
/* آیکن قطب‌نمای وسط دست‌نخورده و وسط بماند */
.elementor-widget-divider--view-line_icon .elementor-divider {
    align-items: center !important;
}
.elementor-widget-divider--view-line_icon .elementor-icon {
    flex-shrink: 0 !important;
    margin: 0 12px !important;
}


/* ═════════════════════════════════════════════════════════════════════
   GLOBAL OVERFLOW FIX — جلوگیری از اسکرول افقی در همه سایزها
   ═════════════════════════════════════════════════════════════════════
   عنصر f34187d در فوتر عرض ثابت 1400px دارد (Elementor desktop design).
   در همه viewport های کوچک‌تر از 1400px از لبه خارج می‌شود.
   با max-width:100% و overflow-x:hidden این را در همه سایزها مهار می‌کنیم. */

/* فوتر: ستون اصلی + همه فرزندان overflow نکنند */
[data-elementor-type="footer"] .elementor-element-f34187d {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* بخش "دفاتر تبریز | تهران" (56eec16) که داخل f34187d است */
[data-elementor-type="footer"] .elementor-element-56eec16 {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* جلوگیری کلی از overflow در فوتر */
[data-elementor-type="footer"] {
    overflow-x: hidden !important;
}


/* ═════════════════════════════════════════════════════════════════════
   PERFORMANCE — lazy loading تصاویر داخل محتوا
   ═════════════════════════════════════════════════════════════════════
   تصاویر below-the-fold در main با CSS مجبور به lazy load می‌شوند تا
   render اولیه بلاک نشود و LCP بهتر باشد. hero و logo استثنا هستند. */

/* تصاویر محتوا که lazyload نشدند — اعمال از طریق CSS content-visibility */
main .elementor-widget-image img:not([loading]) {
    content-visibility: auto !important;
}

/* contain-intrinsic-size برای جلوگیری از layout shift */
main .elementor-widget-image {
    contain-intrinsic-size: 0 300px;
}


/* ═════════════════════════════════════════════════════════════════════
   TABLET HAMBURGER + DRAWER (769px – 1024px)
   ═════════════════════════════════════════════════════════════════════
   منوی این سایت در Elementor کلاس `dropdown-tablet` دارد ⇒ آیکن همبرگر
   تا 1024px نمایش داده می‌شود و منوی افقی فقط در ≥1025px برمی‌گردد. اما
   استایل drawer ما فقط تا 768px بود، پس در بازه‌ی 769–1024:
     • آیکن همبرگر نامرئی بود (رنگ Elementor با alpha 0)
     • منو به‌صورت dropdown وسط‌چینِ پیش‌فرض (زشت) باز می‌شد
   این بلوک همان تجربه‌ی drawer موبایل را به کل بازه‌ی همبرگر گسترش می‌دهد
   بدون دست‌زدن به قوانین ≤768 (که از قبل درست کار می‌کنند) و بدون اثر
   روی دسکتاپ ≥1025. فقط مربوط به هدر/منو است؛ محتوای صفحه دست‌نخورده.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

    /* عناصر تزئینی هدر که در حالت همبرگر لازم نیستند پنهان شوند */
    .elementor-element-b1f8abe,   /* top-bar: شبکه‌های اجتماعی + شماره تماس */
    .elementor-element-199513a,   /* دکمه‌های ورود/ثبت‌نام */
    .elementor-element-7d9e075 {  /* ستون ابزار (جستجو و ...) */
        display: none !important;
    }

    /* هدر sticky سفیدِ تمیز */
    header[data-elementor-type="header"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    }
    header[data-elementor-type="header"] .elementor-element {
        backdrop-filter: none !important;
    }

    /* لوگو وسط‌چین */
    .elementor-element-5af8c12 .elementor-element-159155c,
    .elementor-element-5af8c12 [class*="element-159155c"] {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    .elementor-element-159155c img,
    .elementor-element-814e541 img {
        max-height: 50px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* ─── همبرگر: آیکن مرئی + دکمه‌ی لمسی ۴۴×۴۴ + گوشه‌ی بالا-راست ─── */
    .elementor-menu-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        color: #1a1a1a !important;
    }
    .elementor-menu-toggle svg {
        fill: currentColor !important;
        color: #1a1a1a !important;
        width: 28px !important;
        height: 28px !important;
    }
    .elementor-menu-toggle .elementor-menu-toggle__icon--open,
    .elementor-menu-toggle .elementor-menu-toggle__icon--close {
        color: #1a1a1a !important;
        fill: #1a1a1a !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active) {
        position: fixed !important;
        right: 14px !important;
        left: auto !important;
        top: 14px !important;
        transform: none !important;
        z-index: 9997 !important;
        background: rgba(111, 0, 254, 0.06) !important;
        border-radius: 10px !important;
        transition: background 0.2s, transform 0.15s !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active):active {
        transform: scale(0.92) !important;
        background: rgba(111, 0, 254, 0.12) !important;
    }

    /* ─── DRAWER container — fixed، از سمت راست slide می‌آید ─── */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(70vw, 340px) !important;
        max-width: 340px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        background: #ffffff !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.22) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 70px 12px 24px 12px !important;
        isolation: isolate !important;
        transform: translateX(110%) !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        visibility: hidden !important;
        opacity: 1 !important;
        display: block !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* آیتم‌های منو — تراز راست (RTL) */
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* RTL: تراز راست */
        padding: 16px 18px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        background: transparent !important;
        text-decoration: none !important;
        transition: background 0.2s, color 0.2s, transform 0.15s !important;
        min-height: 52px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: right !important;
        border: 1px solid transparent !important;
        letter-spacing: 0.2px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1 !important;
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu a:focus {
        background: #f5f1ff !important;
        color: #6F00FE !important;
        transform: translateX(-4px);
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-item > a,
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-ancestor > a {
        background: #f5f1ff !important;
        color: #6F00FE !important;
        font-weight: 700 !important;
        border-color: rgba(111, 0, 254, 0.15) !important;
    }
    header[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li + li {
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
    }

    /* دکمه‌ی بستن (X) — همان‌جای همبرگر (گوشه‌ی بالا-راست)؛ موقع toggle جابه‌جا نمی‌شود */
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        position: fixed !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        z-index: 10000 !important;
    }
    header[data-elementor-type="header"] .elementor-menu-toggle:focus,
    header[data-elementor-type="header"] .elementor-menu-toggle:focus-visible,
    header[data-elementor-type="header"] .elementor-menu-toggle.elementor-active {
        outline: none !important;
        outline-offset: 0 !important;
    }

    /* backdrop تیره پشت drawer */
    header[data-elementor-type="header"]:has(.elementor-menu-toggle.elementor-active)::after {
        content: "";
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 1 !important;
        pointer-events: none !important;
        animation: drawer-backdrop-in 0.32s ease both !important;
    }
    @keyframes drawer-backdrop-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}


/* ═════════════════════════════════════════════════════════════════════
   TABLET CONTENT FIX — دکمه‌های CTA پایانی در یک ردیف (769px – 1024px)
   ═════════════════════════════════════════════════════════════════════
   سه دکمه‌ی «درخواست مشاوره / سوالات متداول / تلفن» در کانتینر 1e602e0
   هستند. در دسکتاپ این کانتینر به اندازه‌ی کافی پهن است و سه دکمه کنار
   هم در یک ردیف می‌نشینند. اما عرض کانتینر ~۵۰٪ والد است؛ در بازه‌ی
   تبلت این ۵۰٪ آن‌قدر کوچک می‌شود که خانه‌های flex جمع می‌شوند ولی
   دکمه‌های با عرض ثابت (~۱۷۰px) داخلشان سرریز کرده و روی هم می‌افتند.
   با تمام‌عرض‌کردن کانتینر، همان ردیف تمیزِ دسکتاپ در تبلت هم حفظ می‌شود
   (نه روی‌هم، نه زیرِ هم). فقط 769–1024؛ موبایل (ستونی) و دسکتاپ دست‌نخورده. */
@media (min-width: 769px) and (max-width: 1024px) {
    main .elementor-element-1e602e0 {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   DESKTOP MENU — آیتم‌های منو یک‌ردیف و تنگ‌تر (≥1025px)
   ═════════════════════════════════════════════════════════════════════
   مجموع عرض ۷ آیتم با padding پیش‌فرض (20px طرفین) حدود ۹۰۲px است اما
   container منو ~768px — پس منو به دو ردیف می‌شکست. با کاهش padding به
   9px و فونت به 14.5px، مجموع به ~730px می‌رسد و داخل همان container
   یک‌ردیف جا می‌شود. ویجت منو (9557574) دست‌نخورده می‌ماند تا آیکون‌های
   ابزار (7d9e075) کنارش جا بگیرند. */
@media (min-width: 1025px) {

    /* آیتم‌های منو: یک‌ردیف، بدون شکستن */
    header[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu {
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }

    header[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li > a,
    header[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 14.5px !important;
        white-space: nowrap !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   DESKTOP — آیکون‌های ابزار هدر (7d9e075) فقط در ≥1500px نمایش
   ═════════════════════════════════════════════════════════════════════
   بررسی: در 1025–1499px آیکون‌ها با متن منو همپوشانی دارند (iconsRight >
   menuFirstItemLeft). در 1500px به بالا همپوشانی برطرف می‌شود.
   پس در 1025–1499 مخفی‌اند و از 1500 به بالا نمایان می‌شوند. */
@media (min-width: 1025px) and (max-width: 1499px) {
    header[data-elementor-type="header"] .elementor-element-7d9e075 {
        display: none !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   DESKTOP — جلوگیری از روی‌هم‌افتادن دکمه‌های هدر (≥1025px)
   ═════════════════════════════════════════════════════════════════════
   علت اصلی: Elementor عرض ثابت ۱۴۰px روی هر دکمه و ۱۹۷px روی wrapper
   آن‌ها ست کرده. چون دو دکمه جمعاً ۲۸۰px نیاز دارند و wrapper کوچک‌تر
   است، در همه‌ی عرض‌های دسکتاپ روی هم می‌افتادند.
   فیکس: عرض‌های ثابت برداشته می‌شوند تا دکمه‌ها با محتوا جمع شوند و
   هیچ‌وقت روی هم نیفتند. این برای همه‌ی ≥1025 اعمال می‌شود.
   فشرده‌سازی (font/padding) فقط برای بازه‌ی باریک‌تر ۱۰۲۵–۱۳۰۰ است. */

/* قسمت ۱: عرض‌های ثابت دکمه‌ها — همه‌ی دسکتاپ (≥1025) */
@media (min-width: 1025px) {
    /* خوشه‌ی دکمه‌ها: تک‌ردیف بدون شکستن */
    header[data-elementor-type="header"] .elementor-element-199513a {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    /* wrapper: عرض ثابت برداشته شود */
    header[data-elementor-type="header"] .elementor-element-9fc9425 {
        width: auto !important;
        min-width: 0 !important;
    }
    /* هر دکمه: عرض بر اساس محتوا، nowrap */
    header[data-elementor-type="header"] .elementor-element-199513a a {
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
}

/* قسمت ۲: فشرده‌سازی اضافی فقط برای دسکتاپ باریک (1025–1300) */
@media (min-width: 1025px) and (max-width: 1300px) {
    header[data-elementor-type="header"] .elementor-element-199513a a {
        font-size: 12.5px !important;
        padding: 8px 12px !important;
    }
    /* آیتم‌های منو یک پله فشرده‌تر تا فضای دکمه‌ها آزاد شود */
    header[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li > a,
    header[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 14px !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════
   POPUP «سایت در حال به‌روزرسانی» (popup 4510)
   ═════════════════════════════════════════════════════════════════════
   markup این پاپ‌آپ در صفحه هست ولی Elementor آن را با display:none پنهان
   می‌کند و JS آن (که بازش می‌کرد) در این پروژه‌ی استاتیک 404 است.
   با کلاس .ssg-popup-open (که اسکریپت ما موقع لود اضافه می‌کند) به‌صورت
   modal وسط صفحه با overlay تیره نمایش داده می‌شود. */
[data-elementor-type="popup"][data-elementor-id="4510"].ssg-popup-open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(4, 20, 45, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    animation: ssg-popup-fade 0.28s ease both !important;
    overflow-y: auto !important;
}
@keyframes ssg-popup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* کادر داخلی پاپ‌آپ: کارت سفید وسط، با حداکثر عرض و گوشه‌ی گرد */
[data-elementor-type="popup"][data-elementor-id="4510"].ssg-popup-open > .elementor-element {
    background: #ffffff !important;
    border-radius: 16px !important;
    max-width: 720px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    margin: 0 auto !important;
}
/* دکمه‌ی بستن (×) — گوشه‌ی بالا-چپ کادر */
.ssg-popup-close {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #042551 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(4, 37, 81, 0.3) !important;
    transition: background 0.2s, transform 0.15s !important;
    padding: 0 !important;
}
.ssg-popup-close:hover { background: #0a3a72 !important; transform: scale(1.06) !important; }
/* وقتی پاپ‌آپ باز است، اسکرول بدنه قفل شود */
body.ssg-popup-lock { overflow: hidden !important; }

/* ── موبایل (≤768px): فشرده‌سازی پاپ‌آپ تا بدون اسکرول جا شود ── */
@media (max-width: 768px) {
    [data-elementor-type="popup"][data-elementor-id="4510"].ssg-popup-open {
        padding: 10px !important;
    }
    [data-elementor-type="popup"][data-elementor-id="4510"].ssg-popup-open > .elementor-element {
        max-height: 94vh !important;
        border-radius: 14px !important;
    }
    /* عنوان «دیتا ریتمز» — از 48 به ~26px */
    [data-elementor-type="popup"][data-elementor-id="4510"] h2,
    [data-elementor-type="popup"][data-elementor-id="4510"] h2 a {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    /* زیرعنوان «تحول دیجیتال...» — از 24 به ~15px */
    [data-elementor-type="popup"][data-elementor-id="4510"] p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
    }
    /* پاراگراف بزرگ «سیستم رزرو...» — از 25 به ~14px */
    [data-elementor-type="popup"][data-elementor-id="4510"] p[style*="font-size"],
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-widget-text-editor p {
        font-size: 14px !important;
    }
    /* تیترهای «سایت در حال...»، «شماره تماس»، ساعت کاری — از 18-20 به ~15px */
    [data-elementor-type="popup"][data-elementor-id="4510"] h3,
    [data-elementor-type="popup"][data-elementor-id="4510"] h3 a,
    [data-elementor-type="popup"][data-elementor-id="4510"] h3 span {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }
    /* لوگو کوچک‌تر — از 110 به ~70px */
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-widget-image img {
        max-height: 64px !important;
        width: auto !important;
    }
    /* آیکن هشدار ⚠️ کوچک‌تر */
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-widget-image img[src*="warning"],
    [data-elementor-type="popup"][data-elementor-id="4510"] img[width="50"],
    [data-elementor-type="popup"][data-elementor-id="4510"] img[width="60"] {
        max-height: 40px !important;
    }
    /* فشرده‌کردن padding کانتینرهای داخلی */
    [data-elementor-type="popup"][data-elementor-id="4510"] .e-con-inner,
    [data-elementor-type="popup"][data-elementor-id="4510"] .e-con {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-widget {
        margin-bottom: 4px !important;
    }
    /* آیکن‌های شبکه‌های اجتماعی کمی کوچک‌تر */
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-icon svg,
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-icon img {
        max-width: 26px !important;
        max-height: 26px !important;
    }
}

/* ── گوشی‌های کوتاه‌تر (≤640px ارتفاع یا ≤480px عرض): فشرده‌تر ── */
@media (max-width: 480px) {
    [data-elementor-type="popup"][data-elementor-id="4510"] h2,
    [data-elementor-type="popup"][data-elementor-id="4510"] h2 a {
        font-size: 23px !important;
    }
    [data-elementor-type="popup"][data-elementor-id="4510"] p,
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-widget-text-editor p {
        font-size: 13px !important;
    }
    [data-elementor-type="popup"][data-elementor-id="4510"] h3,
    [data-elementor-type="popup"][data-elementor-id="4510"] h3 a,
    [data-elementor-type="popup"][data-elementor-id="4510"] h3 span {
        font-size: 14px !important;
    }
    [data-elementor-type="popup"][data-elementor-id="4510"] .elementor-widget-image img {
        max-height: 54px !important;
    }
}