/* ===============================================================
   ژیورا | ریسپانسیو مشترک
   این فایل را بعد از CSS صفحه بارگذاری کنید.
   خط مبنا: عرض 1024px و زوم 100%؛ فقط هدر مدیر استثناست.
   فصل‌ها: 01 عمومی، 02 هدر، 03 منوی پایین، 04 صفحه اصلی،
   05 خدمات، 06 فروشگاه و محصول، 07 نمونه‌کار، 08 مجله،
   09 درباره ما، 10 حساب کاربری، 11 مدیریت، 12 حرکت.
   =============================================================== */

/* 01 | محدودیت نمایشگرهای بزرگ: عرض محتوا کنترل می‌شود. */
@media (min-width: 1441px) {
  body:has(.hero-header) > main,
  body:has(.portfolio-header) > main,
  body:has(.services-header) > main,
  body:has(.service-detail-header) > main,
  body:has(.about-header) > main,
  body:has(.store-header) > main,
  body:has(.product-header) > main,
  body:has(.mag-header) > main {
    max-width: 1440px; margin-inline: auto;
  }
  .hero-header, .portfolio-header, .services-header, .service-detail-header,
  .about-header__inner, .store-header__inner, .product-header__inner, .mag-header__inner {
    max-width: 1440px; margin-inline: auto;
  }
}

/* 02 | صفحه اصلی: فقط وقتی دکمه مدیریت فعال است؛ بقیه کاربران همان هدر اصلی را می‌بینند. */
@media (min-width: 1024px) {
  .hero-header:has(.zhiura-admin-entry) {
    display: flex; gap: clamp(8px, 1vw, 20px); padding-inline: clamp(12px, 1.8vw, 30px);
  }
  .hero-header:has(.zhiura-admin-entry) .hero-nav {
    position: static; transform: none; flex: 1 1 auto; min-width: 0;
    justify-content: center; gap: clamp(7px, 1.2vw, 25px); margin-top: -15px;
  }
  .hero-header:has(.zhiura-admin-entry) .hero-nav a { font-size: clamp(11px, 1vw, 14px); white-space: nowrap; }
  .hero-header:has(.zhiura-admin-entry) .services-actions { flex: 0 0 auto; gap: clamp(5px, .7vw, 12px); }
  .hero-header:has(.zhiura-admin-entry) .zhiura-account-link__name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-header:has(.zhiura-admin-entry) .zhiura-admin-entry { flex-shrink: 0; }
}

/* 03 | قواعد تبلت و موبایل؛ محدوده 1024px بدون تغییر حفظ می‌شود. */
@media (max-width: 1023px) {
  *, *::before, *::after { box-sizing: border-box; }
  img, video, canvas, svg { max-width: 100%; }
  input, select, textarea, button { font: inherit; max-width: 100%; }
  p, h1, h2, h3, h4, a, label { overflow-wrap: anywhere; }
  main, section, article, aside, form, [class*="container"], [class*="grid"] { min-width: 0; }
  body.zr-active { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* مخفی‌سازی فقط پس از ساخته‌شدن منوی جایگزین */
  body.zr-active :is(.hero-nav,.services-nav,.service-detail-nav,.portfolio-nav,.store-nav,.product-nav,.mag-nav,.about-nav,.ps-header nav) { display: none !important; }
  body.zr-active :is(.services-actions,.service-detail-actions,.mag-actions,.about-header__actions) { display: none !important; }
  body.zr-active .ps-header > .zhiura-account-link,
  body.zr-active .ps-header > .zhiura-admin-entry { display: none !important; }
  :is(.hero-header,.services-header,.service-detail-header,.portfolio-header,.store-header__inner,.product-header__inner,.mag-header__inner,.about-header__inner) {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%; padding-inline: clamp(16px, 4vw, 30px);
  }
  .hero-header { top: 10px; }
  .hero-header .hero-brand { margin-top: 0; }
  .hero-logo, .hero-logo img { width: clamp(54px, 8vw, 78px); height: auto; }
  .zr-bottom {
    position: fixed; z-index: 900; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px; padding: 9px max(12px, env(safe-area-inset-right, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: #e9efeb; border-top: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 -10px 30px rgba(12,58,47,.16); direction: rtl;
  }
  .zr-bottom__item {
    appearance: none; position: relative; min-width: 0; min-height: 55px;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
    padding: 7px 3px; border: 0; border-radius: 15px; background: transparent;
    color: #105148; font: 500 11px/1.2 "Vazirmatn", sans-serif; text-decoration: none;
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .zr-bottom__item svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .zr-bottom__item img { width: 25px; height: 25px; object-fit: cover; border-radius: 50%; }
  .zr-bottom__item:is(:hover, .is-active, [aria-expanded="true"]) { color: #99741d; background: #e9efeb; box-shadow: -4px -4px 9px #fff, 5px 5px 10px #b9c9c0; }
  .zr-bottom__item:active { transform: scale(.95); box-shadow: inset 3px 3px 7px #c1d0c7, inset -3px -3px 7px #fff; }
  .zr-bottom__item:focus-visible, .zr-menu__close:focus-visible, .zr-menu__link:focus-visible { outline: 2px solid #bd9231; outline-offset: 2px; }
  .zr-bottom__count { position: absolute; top: 1px; inset-inline-start: calc(50% + 8px); min-width: 19px; padding: 3px; border-radius: 20px; background: #b58c2c; color: #fff; font: bold 10px/1 sans-serif; }
  .zr-dialog { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; }
  .zr-dialog::backdrop { background: rgba(0,25,23,.62); }
  .zr-menu { display: flex; flex-direction: column; gap: 10px; width: min(380px, 90vw); height: 100%; margin-inline-end: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom,0px)); overflow-y: auto; background: #e9efeb; color: #124c43; direction: rtl; animation: zr-slide-in .23s ease-out both; }
  .zr-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; }
  .zr-menu__close, .zr-menu__link { display: block; border: 0; border-radius: 14px; padding: 13px 15px; background: #e9efeb; color: inherit; font: 500 14px/1.5 "Vazirmatn", sans-serif; text-decoration: none; text-align: right; box-shadow: -4px -4px 9px #fff, 5px 5px 10px #c1d0c7; }
  .zr-menu__close { cursor: pointer; min-width: 44px; text-align: center; }
  .zr-menu__link:active { box-shadow: inset 3px 3px 7px #bdcdc4, inset -3px -3px 7px #fff; }
  .zr-menu__link[aria-current="page"] { color: #8d6e22; }
  body.zr-active .toast { bottom: calc(96px + env(safe-area-inset-bottom,0px)); }
  @keyframes zr-slide-in { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
}

/* 04 | صفحه اصلی: سکشن‌ها، کارت‌ها، نمونه‌کار و تعرفه */
@media (max-width: 1023px) {
  body.zhiora-home-page .hero { height: clamp(530px, 70vw, 620px); }
  body.zhiora-home-page .hero-content { right: 6%; width: min(58%, 500px); }
  .why-zhiura { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; padding: 55px 5%; }
  .why-zhiura > * { min-width: 0; }
  .services-grid, .works-grid, .pricing-grid, .magazine-grid, .redesign-grid,
  .service-categories-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
  .service-categories-layout { grid-template-columns: minmax(0, 1fr); }
  .investment-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .footer__content { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 24px; }
}
@media (max-width: 700px) {
  body.zhiora-home-page .hero { min-height: 570px; height: auto; }
  body.zhiora-home-page .hero-slider { position: absolute; inset: 0; }
  body.zhiora-home-page .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  body.zhiora-home-page .hero-slider::after { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(270deg, rgba(0,40,35,.82), rgba(0,40,35,.25)); pointer-events: none; }
  body.zhiora-home-page .hero-content { position: relative; inset: auto; transform: none; width: auto; min-height: 520px; justify-content: center; padding: 125px 22px 85px; }
  body.zhiora-home-page .hero-title { font-size: clamp(28px, 8vw, 42px); line-height: 1.65; }
  body.zhiora-home-page .hero-subtitle { font-size: clamp(14px, 4vw, 18px); }
  body.zhiora-home-page .hero-buttons { flex-wrap: wrap; gap: 12px; }
  body.zhiora-home-page .hero-btn { min-width: min(100%, 160px); }
  body.zhiora-home-page .hero-features { display: none; }
  .why-zhiura, .investment-container { grid-template-columns: minmax(0, 1fr); }
  .why-zhiura { padding: 45px 20px; }
  .why-visual, .investment-visual { max-width: 100%; }
  .services-center-logo, .works-logo, .service-categories-logo { max-width: 100%; }
  .footer__content { grid-template-columns: minmax(0, 1fr); padding-inline: 22px; }
}

/* 05 | خدمات و صفحات جزئیات و قالب‌های خدمات */
@media (max-width: 1023px) {
  .service-axes__grid, .specialized-services__grid, .content-services-grid,
  .content-types-grid, .content-why-grid, .uiux-services-grid, .uiux-products-grid,
  .uiux-principles-grid, .uiux-portfolio-grid, .development-services__grid,
  .development-tech__grid, .development-benefits__grid, .development-portfolio__grid,
  .ds-solutions__grid, .ds-problems__grid, .ds-capabilities__grid, .ds-projects__grid,
  .ds-why__grid, .ps-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 18px;
  }
  .content-process-track, .uiux-process__timeline, .development-process__grid,
  .ds-process__track { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 18px; }
  .content-intro-grid, .content-strategy-box, .uiux-intro .uiux-container,
  .uiux-design-system__grid, .uiux-why__grid, .development-intro__grid,
  .ds-intro__content, .ds-capabilities__content, .ds-faq__layout { gap: 30px; }
  .services-hero__content { padding-inline: clamp(20px, 6vw, 60px); }
  .services-hero__text, .service-detail-hero__text, .development-hero__text { max-width: 100%; }
  .content-portfolio-grid { height: auto; }
}
@media (max-width: 700px) {
  .services-hero { height: auto; min-height: 520px; }
  .services-hero__content { height: auto; min-height: 440px; padding: 50px 20px; }
  .services-hero__text, .service-detail-hero__text, .development-hero__text { width: 100%; }
  .service-detail-hero, .development-hero { height: auto; min-height: 580px; }
  .service-detail-hero__content { height: auto; flex-direction: column; align-items: stretch; padding: 120px 20px 40px; }
  .service-detail-hero__visual { width: 100%; max-width: 420px; margin-inline: auto; }
  .development-hero__content { height: auto; padding: 130px 20px 50px; }
  .content-intro-grid, .content-strategy-box, .content-portfolio-grid,
  .uiux-intro .uiux-container, .uiux-design-system__grid, .uiux-why__grid,
  .development-intro__grid, .ds-intro__content, .ds-capabilities__content,
  .ds-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .content-strategy-box { padding: 25px; }
  .content-portfolio-grid > * { min-height: 200px; }
  .ps-header { gap: 10px; }
}

/* 06 | فروشگاه، سبد خرید و جزئیات محصول */
@media (max-width: 1023px) {
  .categories, .product-grid, .store-products-grid, .feature-grid, .product-features-mini,
  .related-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
  .featured-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .products-layout { grid-template-columns: minmax(0, 1fr); }
  .product-hero__grid, .product-intro__box, .specs-box, .spotlight-box, .bundle-box { gap: 24px; }
  .product-preview-grid { height: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}
@media (max-width: 700px) {
  .hero__grid, .spotlight-box, .bundle-box, .product-hero__grid, .product-intro__box,
  .specs-box, .related-card { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { min-height: 0; padding-block: 45px; }
  .hero__visual { max-width: 100%; }
  .bundle-box, .spotlight-box { padding: 25px; }
  .product-gallery { grid-template-columns: minmax(0, 1fr); }
  .modal { width: calc(100% - 24px); grid-template-columns: minmax(0, 1fr); }
}

/* 07 | نمونه‌کارها و پنجره جزئیات پروژه */
@media (max-width: 1023px) {
  .web-projects, .content-showcase, .project-modal__gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
  .portfolio-intro .portfolio-container, .featured-project__card, .digital-projects,
  .capability-section .portfolio-container, .project-modal__top { gap: 25px; }
  .project-modal__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portfolio-intro .portfolio-container, .featured-project__card, .digital-projects,
  .capability-section .portfolio-container, .project-modal__top { grid-template-columns: minmax(0, 1fr); }
  .uiux-flow { display: flex; flex-wrap: wrap; justify-content: center; }
  .project-modal__gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
}

/* 08 | مجله و مقاله */
@media (max-width: 1023px) {
  .articles-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .featured-article, .selected-layout, .mag-view, .mag-modal__box { gap: 20px; }
}
@media (max-width: 700px) {
  .featured-article, .selected-layout, .mag-view, .mag-modal__box, .mag-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .selected-small { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr); }
}

/* 09 | درباره ژیورا و فرم تماس */
@media (max-width: 1023px) {
  .about-services__grid, .about-values__items, .about-why__cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  .about-process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); overflow: visible; }
}
@media (max-width: 700px) {
  .about-story__grid, .about-why__grid, .about-values__layout, .about-contact__grid,
  .about-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-footer__inner { width: calc(100% - 40px); padding-block: 25px; }
}

/* 10 | پنل کاربری، فرم‌ها، پرداخت و ورود */
@media (max-width: 700px) {
  .welcome-grid, .dashboard-grid, .downloads-layout, .support-page-grid, .profile-layout,
  .security-grid, .reviews-grid, .favorites-grid, .profile-form, .modal__box--product,
  .owned-products--page, .notification-page-list { grid-template-columns: minmax(0, 1fr); }
  .account-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  :is(.profile-form,.password-form) input, :is(.profile-form,.password-form) select { min-width: 0; width: 100%; }
}

/* 11 | مدیریت: جداول به صورت کارت، بدون اسکرول افقی در موبایل */
@media (max-width: 700px) {
  .app .hero-kpis, .app .kpis, .app .charts, .app .three, .app .bottom-grid, .app .shortcut-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .app main, .app .content { min-width: 0; }
  .app table { width: 100%; table-layout: fixed; }
  .app th, .app td { white-space: normal; overflow-wrap: anywhere; }
}
/* 12 | حرکت و دسترسی‌پذیری */
@media (prefers-reduced-motion: reduce) {
  .zr-bottom__item, .zr-menu { animation: none; transition: none; }
}

/* مکمل بخش‌های تصویری در نمایشگر کوچک: تناسب عکس حفظ می‌شود. */
@media (max-width: 700px) {
  .development-visual-card, .ds-intro__mockup, .hero-card, .capability-map { max-width: 100%; }
  .services-hero__text p, .service-detail-hero__text p, .development-hero__text p,
  .ds-section-heading > p { max-width: 100%; }
  .site-decorations, .ds-intro__visual, .hero__visual { overflow: clip; }
  .services-hero__buttons, .service-detail-hero__buttons, .development-hero__buttons { flex-wrap: wrap; gap: 12px; }
  .services-hero__button, .hero__buttons .btn { max-width: 100%; }
}

/* ================================================================
   ژیورا | نوار پایین شناور + اسکرول مودال‌ها
   این بخش را در انتهای فایل zhiura-responsive.css قرار دهید.
   ================================================================ */

@media (max-width: 1023px) {
    /* منوی پایین: باریک‌تر، شناور و هماهنگ با نئومورفیسم */
    body.zr-active .zr-bottom {
        position: fixed;
        z-index: 900;
        left: 50%;
        right: auto;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: min(520px, calc(100% - 28px));
        transform: translateX(-50%);
        padding: 5px 8px;
        gap: 3px;
        border: 1px solid rgba(255, 255, 255, .95);
        border-radius: 20px;
        background: #edf2ee;
        box-shadow: 0 12px 28px rgba(6, 51, 41, .18), inset 0 1px 0 rgba(255,255,255,.9);
    }

    body.zr-active .zr-bottom__item {
        min-height: 49px;
        padding: 4px 2px;
        gap: 3px;
        border-radius: 13px;
        font-size: 10px;
    }

        body.zr-active .zr-bottom__item svg {
            width: 21px;
            height: 21px;
        }

        body.zr-active .zr-bottom__item img {
            width: 23px;
            height: 23px;
        }

    body.zr-active {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

        /* پنل کاربری: مودال و پس‌زمینه آن بالای نوار و داخل صفحه قرار می‌گیرند. */
        body.zr-active .modal:has(> .modal__box) {
            z-index: 1600;
            padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        }

    body.modal-open.zr-active .zr-bottom {
        visibility: hidden;
    }

    /* قاب‌های تیکت، نظر، گفتگو، نمونه‌کار، مجله و جست‌وجو */
    .modal > .modal__box,
    .project-modal > .project-modal__box,
    .mag-modal > .mag-modal__box,
    .site-search-modal {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #a8beb1 transparent;
    }

    .modal > .modal__box {
        padding: 24px 20px 28px;
    }

        .modal > .modal__box .modal-form {
            padding-bottom: 4px;
        }

    .project-modal, .mag-modal {
        padding: 16px;
    }

        /* نوار اسکرول در محدوده قاب گرد و بدون گوشه‌های تیز */
        .modal > .modal__box::-webkit-scrollbar,
        .project-modal > .project-modal__box::-webkit-scrollbar,
        .mag-modal > .mag-modal__box::-webkit-scrollbar,
        .site-search-modal::-webkit-scrollbar,
        .ticket-conversation::-webkit-scrollbar {
            width: 8px;
        }

        .modal > .modal__box::-webkit-scrollbar-track,
        .project-modal > .project-modal__box::-webkit-scrollbar-track,
        .mag-modal > .mag-modal__box::-webkit-scrollbar-track,
        .site-search-modal::-webkit-scrollbar-track,
        .ticket-conversation::-webkit-scrollbar-track {
            margin-block: 14px;
            background: transparent;
        }

        .modal > .modal__box::-webkit-scrollbar-thumb,
        .project-modal > .project-modal__box::-webkit-scrollbar-thumb,
        .mag-modal > .mag-modal__box::-webkit-scrollbar-thumb,
        .site-search-modal::-webkit-scrollbar-thumb,
        .ticket-conversation::-webkit-scrollbar-thumb {
            border: 2px solid transparent;
            border-radius: 10px;
            background: #a8beb1;
            background-clip: padding-box;
        }

    /* جمع سبد از محدوده امن پایین گوشی خارج نشود. */
    .zhiura-cart-summary {
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }
}


/* =====================================================
   پنل کاربری | اسکرول منوی کناری و نمایش دکمه خروج
===================================================== */

@media (max-width: 1023px) {

    body.zr-active .user-sidebar {
        /* پنل همچنان تمام ارتفاع صفحه را دارد */
        height: 100vh;
        height: 100dvh;
        /* تمام محتوای پنل با هم اسکرول می‌شود */
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /*
      فضای خالی پایین باعث می‌شود خروج از حساب
      هنگام اسکرول بالاتر از منوی شناور قرار بگیرد.
    */
        padding-bottom: calc( 95px + env(safe-area-inset-bottom, 0px) );
        scrollbar-width: thin;
        scrollbar-color: #bda15e transparent;
    }

        body.zr-active .user-sidebar .user-brand,
        body.zr-active .user-sidebar .profile-mini,
        body.zr-active .user-sidebar .sidebar-bottom {
            flex-shrink: 0;
        }

        /* اسکرول داخلی قبلی حذف می‌شود تا دو اسکرول ایجاد نشود */
        body.zr-active .user-sidebar .user-nav {
            flex: 0 0 auto;
            overflow: visible;
        }

        body.zr-active .user-sidebar .logout-link {
            min-height: 44px;
            font-size: 12px;
        }
}

/* =====================================================
   دکمه پنل مدیریت | نئومورفیسم مشترک تمام صفحات
===================================================== */

.zhiura-admin-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 14px !important;
    border: 1px solid rgba(255, 244, 207, 0.9);
    border-radius: 14px !important;
    background: linear-gradient( 145deg, #e7cd83 0%, #c9a24a 100% ) !important;
    color: #123f36 !important;
    text-decoration: none;
    font-family: "Vazirmatn", Tahoma, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    box-shadow: -5px -5px 11px rgba(255, 255, 255, 0.75), 6px 6px 13px rgba(72, 76, 52, 0.22), inset 1px 1px 1px rgba(255, 248, 218, 0.75);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

    .zhiura-admin-entry i {
        font-size: 17px;
        line-height: 1;
    }

    .zhiura-admin-entry:hover {
        color: #123f36 !important;
        filter: brightness(1.04);
        transform: translateY(-2px);
        box-shadow: -6px -6px 13px rgba(255, 255, 255, 0.85), 8px 8px 16px rgba(72, 76, 52, 0.25), inset 1px 1px 1px rgba(255, 248, 218, 0.85);
    }

    .zhiura-admin-entry:active {
        transform: translateY(0);
        box-shadow: inset 4px 4px 8px rgba(126, 96, 34, 0.3), inset -4px -4px 8px rgba(255, 241, 188, 0.8);
    }

    .zhiura-admin-entry:focus-visible {
        outline: 2px solid #0f5b54;
        outline-offset: 3px;
    }

@media (prefers-reduced-motion: reduce) {
    .zhiura-admin-entry {
        transition: none;
    }
}

/* =====================================================
   پنل مدیریت | اسکرول افقی جدول‌ها
===================================================== */

/* ظرف جدول؛ اسکرول فقط داخل همین بخش اتفاق می‌افتد */
.app :is(.scroll, .audit-table-wrap, .report-scroll):has(> table) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bca05e #e8eeea;
}

/*
  جدول بر اساس محتوای ستون‌ها باز می‌شود؛
  اگر جا کافی نباشد، ظرف آن اسکرول می‌خورد.
*/
.app :is(.scroll, .audit-table-wrap, .report-scroll) > table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

    /* عنوان ستون‌ها شکسته و فشرده نشود */
    .app :is(.scroll, .audit-table-wrap, .report-scroll) > table th {
        min-width: 120px;
        white-space: nowrap;
    }

    /* متن طولانی سلول در محدوده خودش شکسته شود */
    .app :is(.scroll, .audit-table-wrap, .report-scroll) > table td {
        min-width: 120px;
        max-width: 320px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* ظاهر ظریف نوار اسکرول در Chrome و Edge */
.app :is(.scroll, .audit-table-wrap, .report-scroll)::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.app :is(.scroll, .audit-table-wrap, .report-scroll)::-webkit-scrollbar-track {
    background: #e8eeea;
    border-radius: 10px;
}

.app :is(.scroll, .audit-table-wrap, .report-scroll)::-webkit-scrollbar-thumb {
    background: #bca05e;
    border: 2px solid #e8eeea;
    border-radius: 10px;
}

/* =====================================================
   پنل مدیریت | دکمه‌های عملیات فروشگاه
   محصولات، دسته‌بندی‌ها و فایل‌های دیجیتال
===================================================== */

/* فاصله مناسب بین دکمه‌های عملیات */
.app [data-live-list="products"] .removal-actions,
.app [data-live-list="categories"] .removal-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

    /*
  لینک‌های ویرایش و فایل‌ها:
  لینک‌هایی که کلاس removal-button دارند،
  از جمله دکمه حذف، استایل اصلی خودشان را حفظ می‌کنند.
*/
    .app [data-live-list="products"] .removal-actions > a:not(.removal-button),
    .app [data-live-list="categories"] .removal-actions > a:not(.removal-button),
    /* عملیات مرتبط با فایل‌های دیجیتال */
    .app .scroll td a[href*="/ProductAssets" i],
    .app .scroll td a[href*="/DigitalDelivery/Downloads" i] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 8px 14px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        background: #edf3ef;
        color: #0f5147;
        font-family: "Vazirmatn", Tahoma, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
        transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
        cursor: pointer;
    }

    /* رنگ متفاوت برای فایل‌ها و انتشار در جدول محصولات */
    .app [data-live-list="products"]
    .removal-actions > a:nth-child(2):not(.removal-button) {
        background: linear-gradient(145deg, #e8d39a, #c9a24a);
        border-color: rgba(255, 244, 210, 0.9);
        color: #173f36;
    }

    /* حرکت ظریف هنگام قرارگرفتن نشانگر */
    .app [data-live-list="products"] .removal-actions > a:not(.removal-button):hover,
    .app [data-live-list="categories"] .removal-actions > a:not(.removal-button):hover,
    .app .scroll td a[href*="/ProductAssets" i]:hover,
    .app .scroll td a[href*="/DigitalDelivery/Downloads" i]:hover {
        color: #9a741f;
        transform: translateY(-2px);
        box-shadow: -5px -5px 11px rgba(255, 255, 255, 1), 7px 7px 14px rgba(45, 76, 63, 0.22);
    }

    /* حالت فشرده‌شدن هنگام کلیک */
    .app [data-live-list="products"] .removal-actions > a:not(.removal-button):active,
    .app [data-live-list="categories"] .removal-actions > a:not(.removal-button):active,
    .app .scroll td a[href*="/ProductAssets" i]:active,
    .app .scroll td a[href*="/DigitalDelivery/Downloads" i]:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
    }

    /* مشخص‌بودن دکمه هنگام استفاده از کیبورد */
    .app [data-live-list="products"] .removal-actions > a:not(.removal-button):focus-visible,
    .app [data-live-list="categories"] .removal-actions > a:not(.removal-button):focus-visible,
    .app .scroll td a[href*="/ProductAssets" i]:focus-visible,
    .app .scroll td a[href*="/DigitalDelivery/Downloads" i]:focus-visible {
        outline: 2px solid #bd9231;
        outline-offset: 3px;
    }

/* رعایت تنظیمات کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
    .app [data-live-list="products"] .removal-actions > a,
    .app [data-live-list="categories"] .removal-actions > a,
    .app .scroll td a[href*="/ProductAssets" i],
    .app .scroll td a[href*="/DigitalDelivery/Downloads" i] {
        transition: none;
    }
}


/* =====================================================
   پنل مدیریت | سفارش‌ها و کدهای تخفیف
===================================================== */

/* دکمه مشاهده جزئیات سفارش و ویرایش کد تخفیف */
.app [data-live-list="orders"] .scroll td > a,
.app [data-live-list="discounts"] .scroll td > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: #edf3ef;
    color: #0f5147;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

    .app [data-live-list="orders"] .scroll td > a:hover,
    .app [data-live-list="discounts"] .scroll td > a:hover {
        color: #9a741f;
        transform: translateY(-2px);
        box-shadow: -5px -5px 11px #ffffff, 7px 7px 14px rgba(45, 76, 63, 0.22);
    }

    .app [data-live-list="orders"] .scroll td > a:active,
    .app [data-live-list="discounts"] .scroll td > a:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
    }

    .app [data-live-list="orders"] .scroll td > a:focus-visible,
    .app [data-live-list="discounts"] .scroll td > a:focus-visible {
        outline: 2px solid #bd9231;
        outline-offset: 3px;
    }

/* =====================================================
   نشان وضعیت سفارش
===================================================== */

.zhiura-order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 11px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

    /* نقطه کوچک کنار متن وضعیت */
    .zhiura-order-status::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: currentColor;
    }

/* ثبت اولیه و در انتظار پرداخت */
.zhiura-order-status--pending {
    background: #fff3cd;
    border-color: #eed89a;
    color: #785600;
}

/* پرداخت‌شده و تکمیل‌شده */
.zhiura-order-status--success {
    background: #ddf4e6;
    border-color: #a7dbbc;
    color: #17633c;
}

/* لغوشده و ناموفق */
.zhiura-order-status--danger {
    background: #fbe4e2;
    border-color: #efb8b2;
    color: #a12f25;
}

/* در حال پردازش */
.zhiura-order-status--processing {
    background: #e4eff8;
    border-color: #b9d5e9;
    color: #245c7d;
}

/* وضعیت نامشخص */
.zhiura-order-status--neutral {
    background: #edf0ee;
    border-color: #d4ddd8;
    color: #52645b;
}

/* حالت کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
    .app [data-live-list="orders"] .scroll td > a,
    .app [data-live-list="discounts"] .scroll td > a {
        transition: none;
    }
}


/* =====================================================
   پنل مدیریت | دکمه‌های فروشگاه
===================================================== */

/* بازگشت به فهرست، سفارش‌ها و کدهای تخفیف */
.app .zhiura-admin-back,
/* ساخت کد تخفیف جدید */
.app [data-live-list="discounts"] > .panel > .head > a,
/* ایجاد محصول و ایجاد دسته‌بندی */
.app [data-live-list="products"] > .panel > .head > .removal-button:not(.removal-button--light),
.app [data-live-list="categories"] > .panel > .head > .removal-button:not(.removal-button--light),
/* فیلترهای پرداخت دستی */
.app [data-live-list="manualpayments"]
[data-live-filter-links] > a[data-live-filter-link] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: #edf3ef;
    color: #124d43;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

/* دکمه‌های ایجاد: طلایی */
.app [data-live-list="discounts"] > .panel > .head > a,
.app [data-live-list="products"] > .panel > .head > .removal-button:not(.removal-button--light),
.app [data-live-list="categories"] > .panel > .head > .removal-button:not(.removal-button--light) {
    background: linear-gradient(145deg, #e8d39a, #c9a24a);
    border-color: rgba(255, 244, 210, 0.9);
    color: #173f36;
}

/* ظرف سه فیلتر پرداخت دستی */
.app [data-live-list="manualpayments"]
[data-live-filter-links] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    /* فیلتر انتخاب‌شده */
    .app [data-live-list="manualpayments"]
    [data-live-filter-links] > a.is-active {
        background: #0f5147;
        border-color: #0f5147;
        color: #ffffff;
        box-shadow: inset 3px 3px 7px rgba(0, 35, 29, 0.3), inset -2px -2px 6px rgba(255, 255, 255, 0.08);
    }

    /* حالت حرکت */
    .app .zhiura-admin-back:hover,
    .app [data-live-list="discounts"] > .panel > .head > a:hover,
    .app [data-live-list="products"] > .panel > .head > .removal-button:not(.removal-button--light):hover,
    .app [data-live-list="categories"] > .panel > .head > .removal-button:not(.removal-button--light):hover,
    .app [data-live-list="manualpayments"]
    [data-live-filter-links] > a:hover {
        filter: brightness(1.04);
        transform: translateY(-2px);
    }

    /* حالت فشرده هنگام کلیک */
    .app .zhiura-admin-back:active,
    .app [data-live-list="discounts"] > .panel > .head > a:active,
    .app [data-live-list="products"] > .panel > .head > .removal-button:not(.removal-button--light):active,
    .app [data-live-list="categories"] > .panel > .head > .removal-button:not(.removal-button--light):active,
    .app [data-live-list="manualpayments"]
    [data-live-filter-links] > a:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.7);
    }

    /* مشخص‌بودن دکمه هنگام استفاده از کیبورد */
    .app .zhiura-admin-back:focus-visible,
    .app [data-live-list="discounts"] > .panel > .head > a:focus-visible,
    .app [data-live-list="products"] > .panel > .head > a:focus-visible,
    .app [data-live-list="categories"] > .panel > .head > a:focus-visible,
    .app [data-live-list="manualpayments"]
    [data-live-filter-links] > a:focus-visible {
        outline: 2px solid #bd9231;
        outline-offset: 3px;
    }

/* =====================================================
   سفارش‌ها | وضعیت ثبت اولیه
   بقیه رنگ‌ها در کد مرحله قبل تعریف شده‌اند.
===================================================== */

.zhiura-order-status--initial {
    background: #edf0ee;
    border-color: #d1dbd5;
    color: #52645b;
}

@media (prefers-reduced-motion: reduce) {
    .app .zhiura-admin-back,
    .app [data-live-list="discounts"] > .panel > .head > a,
    .app [data-live-list="products"] > .panel > .head > a,
    .app [data-live-list="categories"] > .panel > .head > a,
    .app [data-live-list="manualpayments"]
    [data-live-filter-links] > a {
        transition: none;
    }
}


/* =====================================================
   داشبورد مدیریت | جلوگیری از بیرون‌زدگی چیدمان
===================================================== */

/* محدوده اصلی کنار منوی مدیریت */
.app > main#dashboard {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

    /* خود داشبورد و ردیف‌های آن */
    .app > main#dashboard > .dashboard,
    .app > main#dashboard .hero-kpis,
    .app > main#dashboard .kpis,
    .app > main#dashboard .charts,
    .app > main#dashboard .three,
    .app > main#dashboard .bottom-grid {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

        /*
  اجازه می‌دهد کارت‌های داخل Grid کوچک شوند
  و به‌خاطر عرض جدول، کل صفحه را بزرگ نکنند.
*/
        .app > main#dashboard .hero-kpis > *,
        .app > main#dashboard .kpis > *,
        .app > main#dashboard .charts > *,
        .app > main#dashboard .three > *,
        .app > main#dashboard .bottom-grid > * {
            min-width: 0;
            max-width: 100%;
        }

    /* جدول‌ها داخل ظرف خودشان اسکرول می‌شوند */
    .app > main#dashboard .scroll {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* نمودار و نوشته‌های آن در فضای کارت باقی بمانند */
    .app > main#dashboard .status-body {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
        height: auto;
        min-height: 250px;
    }

    .app > main#dashboard .donut {
        flex-shrink: 0;
        max-width: 100%;
    }

    /* متن‌های طولانی باعث افزایش عرض کارت نشوند */
    .app > main#dashboard .panel {
        min-width: 0;
        overflow-wrap: anywhere;
    }


/* =====================================================
   پنل مدیریت | کاربران و پشتیبانی
===================================================== */

/*
  دکمه‌های مشاهده حساب و مشاهده و پاسخ
*/
.app [data-live-list="users"] .scroll td > a,
.app [data-live-list="support"] .scroll td > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: #edf3ef;
    color: #0f5147;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

/* ظرف فیلترهای بالای جدول پشتیبانی */
.app [data-live-list="support"]
[data-live-filter-links] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    /* دکمه‌های همه، باز، در حال بررسی، منتظر مشتری و بسته‌شده */
    .app [data-live-list="support"]
    [data-live-filter-links] > a[data-live-filter-link] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 9px 15px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        background: #edf3ef;
        color: #124d43;
        font-family: "Vazirmatn", Tahoma, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        cursor: pointer;
    }

    /* فیلتر انتخاب‌شده */
    .app [data-live-list="support"]
    [data-live-filter-links] > a.is-active {
        background: #0f5147;
        border-color: #0f5147;
        color: #ffffff;
        box-shadow: inset 3px 3px 7px rgba(0, 35, 29, 0.3), inset -2px -2px 6px rgba(255, 255, 255, 0.08);
    }

    /* حالت حرکت */
    .app [data-live-list="users"] .scroll td > a:hover,
    .app [data-live-list="support"] .scroll td > a:hover,
    .app [data-live-list="support"]
    [data-live-filter-links] > a:hover {
        transform: translateY(-2px);
        box-shadow: -5px -5px 11px #ffffff, 7px 7px 14px rgba(45, 76, 63, 0.22);
    }

    /* حالت فشرده هنگام کلیک */
    .app [data-live-list="users"] .scroll td > a:active,
    .app [data-live-list="support"] .scroll td > a:active,
    .app [data-live-list="support"]
    [data-live-filter-links] > a:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
    }

    /* نمایش فوکوس کیبورد */
    .app [data-live-list="users"] .scroll td > a:focus-visible,
    .app [data-live-list="support"] .scroll td > a:focus-visible,
    .app [data-live-list="support"]
    [data-live-filter-links] > a:focus-visible {
        outline: 2px solid #bd9231;
        outline-offset: 3px;
    }

@media (prefers-reduced-motion: reduce) {
    .app [data-live-list="users"] .scroll td > a,
    .app [data-live-list="support"] .scroll td > a,
    .app [data-live-list="support"]
    [data-live-filter-links] > a {
        transition: none;
    }
}

/* =====================================================
   پنل مدیریت | دسته‌بندی خدمات و مدیریت خدمات
===================================================== */

/* ظرف دکمه‌های بالای صفحات */
.app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    /*
  دکمه‌های بالای صفحه:
  افزودن مورد جدید، مدیریت خدمات و دسته‌بندی خدمات

  کلاس removal-button از این قسمت مستثنا است تا
  استایل دکمه سطل زباله تغییر ناخواسته نکند.
*/
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links > a:not(.removal-button),
    /* دکمه ویرایش داخل جدول */
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .removal-actions > a:not(.removal-button),
    /* دکمه فعال‌کردن و غیرفعال‌کردن */
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-status-form > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 8px 14px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        background: #edf3ef;
        color: #0f5147;
        font-family: "Vazirmatn", Tahoma, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
        transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
        cursor: pointer;
    }

    /* دکمه اول: افزودن مورد جدید */
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links > a:first-child {
        background: linear-gradient(145deg, #e8d39a, #c9a24a);
        border-color: rgba(255, 244, 210, 0.9);
        color: #173f36;
    }

/* تراز فرم تغییر وضعیت کنار ویرایش */
.app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-status-form {
    margin: 0;
}

    /* حرکت ظریف */
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links > a:not(.removal-button):hover,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .removal-actions > a:not(.removal-button):hover,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-status-form > button:hover {
        transform: translateY(-2px);
        box-shadow: -5px -5px 11px #ffffff, 7px 7px 14px rgba(45, 76, 63, 0.22);
    }

    /* حالت فشرده هنگام کلیک */
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links > a:not(.removal-button):active,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .removal-actions > a:not(.removal-button):active,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-status-form > button:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
    }

    /* فوکوس کیبورد */
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links a:focus-visible,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .removal-actions a:focus-visible,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-status-form button:focus-visible {
        outline: 2px solid #bd9231;
        outline-offset: 3px;
    }

@media (prefers-reduced-motion: reduce) {
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-head-links a,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .removal-actions a,
    .app :is( [data-live-list="service-categories"], [data-live-list="admin-services"] ) .service-status-form button {
        transition: none;
    }
}

/* =====================================================
   پنل مدیریت | نمونه‌کارها
   دسته‌بندی نمونه‌کارها و مدیریت پروژه‌ها
===================================================== */

/* تنظیم فاصله دکمه‌های بالای صفحه */
.app .portfolio-admin .head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* وضعیت‌های پروژه کنار هم قرار بگیرند */
.app .portfolio-admin .zhiura-portfolio-statuses {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* فاصله نشان وضعیت دسته‌بندی از متن */
.app .portfolio-admin .portfolio-admin-row > div:first-child > .zhiura-order-status {
    margin-top: 7px;
}

/*
  دکمه‌های عمومی:
  ویرایش، بازگشت، بارگذاری و لینک‌های بالای صفحه
*/
.app .portfolio-admin .head > a:not(.removal-button),
.app .portfolio-admin .portfolio-admin-row
.removal-actions > a:not(.removal-button),
.app .portfolio-admin .portfolio-admin-actions > a,
.app .portfolio-admin .portfolio-admin-actions > button,
.app .portfolio-admin .portfolio-media-form > button,
.app .portfolio-admin form[action*="/RemoveMedia" i] > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: #edf3ef;
    color: #124d43;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

/*
  دکمه اول بالای صفحه:
  پروژه جدید و دسته‌بندی جدید
*/
.app .portfolio-admin .head > a:first-of-type:not(.removal-button),
/* دکمه ذخیره فرم */
.app .portfolio-admin .portfolio-admin-actions > button {
    background: linear-gradient(145deg, #e8d39a, #c9a24a);
    border-color: rgba(255, 244, 210, 0.9);
    color: #173f36;
}

/* دکمه حذف داخل فهرست */
.app .portfolio-admin .removal-button--outline-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    box-sizing: border-box;
    border: 1px solid #e8b8b1;
    border-radius: 12px;
    background: #fbeae7;
    color: #a83228;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.9), 5px 5px 10px rgba(117, 58, 49, 0.14);
    cursor: pointer;
}

/* برداشتن تصویر و ویدئو در صفحه ویرایش */
.app .portfolio-admin
form[action*="/RemoveMedia" i] > button {
    background: #fbeae7;
    border-color: #e8b8b1;
    color: #a83228;
}

    /* حرکت ظریف هنگام قرارگرفتن نشانگر */
    .app .portfolio-admin .head > a:not(.removal-button):hover,
    .app .portfolio-admin .portfolio-admin-row
    .removal-actions > a:hover,
    .app .portfolio-admin .portfolio-admin-actions > a:hover,
    .app .portfolio-admin .portfolio-admin-actions > button:hover,
    .app .portfolio-admin .portfolio-media-form > button:hover,
    .app .portfolio-admin form[action*="/RemoveMedia" i] > button:hover {
        filter: brightness(1.03);
        transform: translateY(-2px);
    }

    /* حالت فشرده‌شدن */
    .app .portfolio-admin .head > a:not(.removal-button):active,
    .app .portfolio-admin .portfolio-admin-row
    .removal-actions > a:active,
    .app .portfolio-admin .portfolio-admin-actions > a:active,
    .app .portfolio-admin .portfolio-admin-actions > button:active,
    .app .portfolio-admin .portfolio-media-form > button:active,
    .app .portfolio-admin form[action*="/RemoveMedia" i] > button:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
    }

/* فوکوس برای استفاده با کیبورد */
.app .portfolio-admin :is( .head > a, .removal-actions > a, .portfolio-admin-actions > a, .portfolio-admin-actions > button, .portfolio-media-form > button, form[action*="/RemoveMedia" i] > button ):focus-visible {
    outline: 2px solid #bd9231;
    outline-offset: 3px;
}

/* کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
    .app .portfolio-admin :is( .head > a, .removal-actions > a, .portfolio-admin-actions > a, .portfolio-admin-actions > button, .portfolio-media-form > button, form[action*="/RemoveMedia" i] > button ) {
        transition: none;
    }
}

/* =====================================================
   پنل مدیریت | مجله ژیورا
   مقالات، دسته‌بندی مقاله و برچسب‌ها
===================================================== */

/* چیدمان دکمه‌های بالای صفحه */
.app .magazine-admin .head,
.app .magazine-admin .magazine-admin-actions,
.app .magazine-admin .removal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* فاصله نشان وضعیت از عنوان */
.app .magazine-admin .magazine-admin-row > div:first-child > .zhiura-order-status {
    margin-top: 7px;
}

/*
  دکمه‌های عمومی:
  ویرایش، بازگشت، دسته‌بندی‌ها، برچسب‌ها و پاک‌کردن
*/
.app .magazine-admin .head > a:not(.removal-button),
.app .magazine-admin .magazine-admin-row
.removal-actions > a:not(.removal-button),
.app .magazine-admin .magazine-admin-actions > a:not([data-live-page]),
.app .magazine-admin .magazine-admin-actions > button,
.app .magazine-admin [data-live-reset] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: #edf3ef;
    color: #124d43;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

/*
  مقاله جدید، دسته‌بندی جدید، برچسب جدید
  و دکمه ذخیره فرم
*/
.app .magazine-admin .head > a:first-of-type:not(.removal-button),
.app .magazine-admin .magazine-admin-actions > button {
    background: linear-gradient(145deg, #e8d39a, #c9a24a);
    border-color: rgba(255, 244, 210, 0.9);
    color: #173f36;
}

/* دکمه حذف داخل فهرست مقاله‌ها و دسته‌بندی‌ها */
.app .magazine-admin .removal-button--outline-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    box-sizing: border-box;
    border: 1px solid #e8b8b1;
    border-radius: 12px;
    background: #fbeae7;
    color: #a83228;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.9), 5px 5px 10px rgba(117, 58, 49, 0.14);
    cursor: pointer;
}

/* سطل زباله و بازگشت به فهرست */
.app .magazine-admin .removal-button--light,
.app [data-live-list="article-trash"] .removal-button--light {
    background: #edf3ef;
    border-color: #d5e2da;
    color: #124d43;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18);
}

/* حرکت ظریف دکمه‌ها */
.app .magazine-admin .head > a:hover,
.app .magazine-admin .magazine-admin-row
.removal-actions > a:hover,
.app .magazine-admin .magazine-admin-actions > a:hover,
.app .magazine-admin .magazine-admin-actions > button:hover,
.app .magazine-admin [data-live-reset]:hover {
    filter: brightness(1.03);
    transform: translateY(-2px);
}

/* حالت فشرده هنگام کلیک */
.app .magazine-admin .head > a:active,
.app .magazine-admin .magazine-admin-row
.removal-actions > a:active,
.app .magazine-admin .magazine-admin-actions > a:active,
.app .magazine-admin .magazine-admin-actions > button:active,
.app .magazine-admin [data-live-reset]:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
}

/* فوکوس کیبورد */
.app .magazine-admin :is( .head > a, .removal-actions > a, .magazine-admin-actions > a, .magazine-admin-actions > button, [data-live-reset] ):focus-visible {
    outline: 2px solid #bd9231;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .app .magazine-admin :is( .head > a, .removal-actions > a, .magazine-admin-actions > a, .magazine-admin-actions > button, [data-live-reset] ) {
        transition: none;
    }
}

/* =====================================================
   پنل مدیریت | ارتباطات
   درخواست خدمات، پیام‌های تماس و اعضای خبرنامه
===================================================== */

/*
  دکمه‌های عملیات جدول، پاک‌کردن فیلتر و بازگشت
*/
.app [data-service-lead-list] .scroll td > a,
.app [data-contact-list] .scroll td > a,
.app [data-lead-reset],
.app [data-contact-reset],
.app [data-nl-reset],
.app .service-lead-details > a,
.app .zhiura-contact-back,
/* دکمه‌های صفحه‌بندی */
.app .service-lead-pagination > a,
.app .admin-contact-pagination > a,
.app [data-nl-page],
/* دکمه فعال‌سازی مجدد خبرنامه */
.app [data-newsletter-list]
form[action*="Reactivate" i] > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: #edf3ef;
    color: #124d43;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.95), 5px 5px 10px rgba(45, 76, 63, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

/* دکمه‌های ثبت و ذخیره در صفحات جزئیات */
.app .service-lead-edit > button[type="submit"],
.app .admin-contact-form > button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    padding: 9px 16px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 244, 210, 0.9);
    border-radius: 12px;
    background: linear-gradient(145deg, #e8d39a, #c9a24a);
    color: #173f36;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.9), 5px 5px 10px rgba(90, 74, 38, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* لغو عضویت: ظاهر هشدار */
.app [data-newsletter-list]
form[action*="Unsubscribe" i] > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 1px solid #e8b8b1;
    border-radius: 12px;
    background: #fbeae7;
    color: #a83228;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.9), 5px 5px 10px rgba(117, 58, 49, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* حرکت ظریف */
.app [data-service-lead-list] .scroll td > a:hover,
.app [data-contact-list] .scroll td > a:hover,
.app [data-lead-reset]:hover,
.app [data-contact-reset]:hover,
.app [data-nl-reset]:hover,
.app .service-lead-details > a:hover,
.app .zhiura-contact-back:hover,
.app .service-lead-pagination > a:hover,
.app .admin-contact-pagination > a:hover,
.app [data-nl-page]:hover,
.app .service-lead-edit > button[type="submit"]:hover,
.app .admin-contact-form > button[type="submit"]:hover,
.app [data-newsletter-list] form > button:hover {
    filter: brightness(1.03);
    transform: translateY(-2px);
}

/* حالت فشرده‌شدن هنگام کلیک */
.app [data-service-lead-list] .scroll td > a:active,
.app [data-contact-list] .scroll td > a:active,
.app [data-lead-reset]:active,
.app [data-contact-reset]:active,
.app [data-nl-reset]:active,
.app .service-lead-details > a:active,
.app .zhiura-contact-back:active,
.app .service-lead-pagination > a:active,
.app .admin-contact-pagination > a:active,
.app [data-nl-page]:active,
.app .service-lead-edit > button[type="submit"]:active,
.app .admin-contact-form > button[type="submit"]:active,
.app [data-newsletter-list] form > button:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 7px rgba(64, 87, 73, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
}

/* فوکوس کیبورد */
.app :is( [data-service-lead-list] .scroll td > a, [data-contact-list] .scroll td > a, [data-lead-reset], [data-contact-reset], [data-nl-reset], .service-lead-details > a, .zhiura-contact-back, .service-lead-pagination > a, .admin-contact-pagination > a, [data-nl-page], .service-lead-edit > button, .admin-contact-form > button, [data-newsletter-list] form > button ):focus-visible {
    outline: 2px solid #bd9231;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .app :is( [data-service-lead-list] .scroll td > a, [data-contact-list] .scroll td > a, [data-lead-reset], [data-contact-reset], [data-nl-reset], .service-lead-details > a, .zhiura-contact-back, .service-lead-pagination > a, .admin-contact-pagination > a, [data-nl-page], .service-lead-edit > button, .admin-contact-form > button, [data-newsletter-list] form > button ) {
        transition: none;
    }
}

/* =========================================
   پنل مدیریت: نظرات، رسانه‌ها، گزارش‌ها،
   سئو و مدیریت نقش‌ها
   ========================================= */

/* دکمه‌های عمومی و برجسته */
.app [data-live-list="reviews"] .admin-review-pagination a,
.app [data-live-list="reviews"] [data-live-retry],
.app [data-live-list="reviews"] .admin-review-filter button,
.app .media-library .media-actions a,
.app .media-library .media-actions button,
.app .media-library .media-filter button,
.app .media-library .media-filter a,
.app .media-library .media-pagination a,
.app .media-library .head > a,
.app .media-library button[data-media-copy],
.app .reports-page [data-report-print],
.app .reports-page .report-filter a,
.app .reports-page .report-error a,
.app .reports-page .report-small article a,
.app .seo-editor__actions a,
.app [data-live-list="roles"] [data-live-reset],
.app [data-live-list="roles"] [data-live-retry],
.app [data-live-list="roles"] .live-list-search button,
.app [data-live-list="roles"] .admin-orders-pagination a,
.app [data-live-list="roles"] .scroll td p > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    max-width: 100%;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(23, 87, 76, 0.14);
    border-radius: 13px;
    background: #e8f0ed;
    color: #13584d;
    box-shadow: 4px 4px 10px rgba(37, 74, 65, 0.14), -4px -4px 10px rgba(255, 255, 255, 0.85);
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* دکمه‌های اصلی: ثبت، ذخیره و نمایش */
.app [data-live-list="reviews"] .admin-review-action:not(.admin-review-hide) button,
.app .media-library .media-upload button[type="submit"],
.app .reports-page .report-filter button[type="submit"],
.app .seo-editor__actions button[type="submit"],
.app [data-live-list="roles"] .admin-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 100%;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(151, 112, 29, 0.2);
    border-radius: 13px;
    background: #d2ad55;
    color: #173d35;
    box-shadow: 4px 4px 10px rgba(119, 91, 34, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.8);
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* عدم انتشار نظر و انتقال رسانه به سطل زباله */
.app [data-live-list="reviews"] .admin-review-hide button,
.app .media-library .media-remove button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 100%;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(166, 49, 49, 0.18);
    border-radius: 13px;
    background: #fae9e8;
    color: #a63838;
    box-shadow: 4px 4px 10px rgba(126, 61, 61, 0.13), -4px -4px 10px rgba(255, 255, 255, 0.85);
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* بازیابی رسانه از سطل زباله */
.app .media-library .media-remove form[action*="Restore" i] button,
.app .media-library form.media-remove[action*="Restore" i] button {
    border-color: rgba(23, 87, 76, 0.14);
    background: #e8f0ed;
    color: #13584d;
}

/* بازخورد حرکت دکمه‌ها */
.app [data-live-list="reviews"] :is(.admin-review-action button, .admin-review-pagination a, [data-live-retry]):hover,
.app .media-library :is(.media-actions a, .media-actions button, .media-filter button, .media-filter a, .media-pagination a, .head > a, button):not(:disabled):hover,
.app .reports-page :is(button, .report-filter a, .report-error a, .report-small article a):hover,
.app .seo-editor__actions :is(button, a):hover,
.app [data-live-list="roles"] :is(button, [data-live-reset], .admin-orders-pagination a, .scroll td p > a):hover {
    transform: translateY(-2px);
}

.app [data-live-list="reviews"] :is(button, a):focus-visible,
.app .media-library :is(button, a):focus-visible,
.app .reports-page :is(button, a):focus-visible,
.app .seo-editor__actions :is(button, a):focus-visible,
.app [data-live-list="roles"] :is(button, a):focus-visible {
    outline: 3px solid #c79c3f;
    outline-offset: 3px;
}

.app .media-library button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .app [data-live-list="reviews"] :is(button, a),
    .app .media-library :is(button, a),
    .app .reports-page :is(button, a),
    .app .seo-editor__actions :is(button, a),
    .app [data-live-list="roles"] :is(button, a) {
        transition: none;
    }

        .app [data-live-list="reviews"] :is(button, a):hover,
        .app .media-library :is(button, a):hover,
        .app .reports-page :is(button, a):hover,
        .app .seo-editor__actions :is(button, a):hover,
        .app [data-live-list="roles"] :is(button, a):hover {
            transform: none;
        }
}


/* ============================================
   پنل مدیریت — صفحه مدیریت سئوی صفحات
   ============================================ */

/* جلوگیری از عریض‌شدن محتوای اصلی پنل */
.app .seo-admin {
    min-width: 0;
    max-width: 100%;
}

    /* وضعیت‌های جدول سئو */
    .app .seo-admin .seo-status {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 0.35rem 0.75rem;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1.7;
        text-align: center;
        white-space: normal;
    }

    /* در دسترس / تنظیمات ذخیره‌شده */
    .app .seo-admin .seo-status--success {
        background: #e1f2e9;
        border-color: #b5ddc6;
        color: #17643f;
    }

    /* نیازمند توجه / noindex */
    .app .seo-admin .seo-status--warning {
        background: #fff4d9;
        border-color: #ead398;
        color: #805d0a;
    }

    /* استفاده از تنظیمات پیش‌فرض */
    .app .seo-admin .seo-status--neutral {
        background: #edf1ef;
        border-color: #d3dfda;
        color: #52665e;
    }

    /* دکمه‌های فرعی و عملیات جدول */
    .app .seo-admin .seo-notice a,
    .app .seo-admin .seo-table-wrap td:last-child a,
    .app .seo-admin .seo-pages a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        max-width: 100%;
        padding: 0.55rem 1rem;
        border: 1px solid rgba(23, 87, 76, 0.16);
        border-radius: 13px;
        background: #e8f0ed;
        color: #13584d;
        box-shadow: 4px 4px 10px rgba(37, 74, 65, 0.14), -4px -4px 10px rgba(255, 255, 255, 0.85);
        font: inherit;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    /* دکمه‌های اصلی صفحه */
    .app .seo-admin header .seo-button,
    .app .seo-admin .seo-toolbar button[type="submit"],
    .app .seo-admin .seo-table-wrap td:last-child .seo-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        max-width: 100%;
        padding: 0.55rem 1rem;
        border: 1px solid rgba(151, 112, 29, 0.2);
        border-radius: 13px;
        background: #d2ad55;
        color: #173d35;
        box-shadow: 4px 4px 10px rgba(119, 91, 34, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.8);
        font: inherit;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    /* فاصله دکمه‌های ستون عملیات */
    .app .seo-admin .seo-table-wrap td:last-child a {
        margin: 0.25rem;
    }

    /* اسکرول فقط داخل محدوده جدول */
    .app .seo-admin .seo-table-wrap {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* بازخورد حرکت و دسترسی با کیبورد */
    .app .seo-admin :is( header .seo-button, .seo-toolbar button, .seo-notice a, .seo-table-wrap td:last-child a, .seo-pages a ):hover {
        transform: translateY(-2px);
    }

    .app .seo-admin :is( header .seo-button, .seo-toolbar button, .seo-notice a, .seo-table-wrap td:last-child a, .seo-pages a ):focus-visible {
        outline: 3px solid #c79c3f;
        outline-offset: 3px;
    }

@media (prefers-reduced-motion: reduce) {
    .app .seo-admin :is( header .seo-button, .seo-toolbar button, .seo-notice a, .seo-table-wrap td:last-child a, .seo-pages a ) {
        transition: none;
    }

        .app .seo-admin :is( header .seo-button, .seo-toolbar button, .seo-notice a, .seo-table-wrap td:last-child a, .seo-pages a ):hover {
            transform: none;
        }
}

/* =====================================================
   صفحه اصلی — سکشن چرا ژیورا
   موبایل و تبلت؛ حفظ چیدمان دسکتاپ از عرض 1024
   ===================================================== */

@media (width < 1024px) {
    main > .why-zhiura {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "content"
            "visual"
            "points";
        align-items: start;
        gap: 28px;
        width: 100%;
        min-height: 0;
        padding: 48px clamp(20px, 5vw, 48px);
        direction: rtl;
    }

        main > .why-zhiura > * {
            box-sizing: border-box;
            min-width: 0;
            max-width: 100%;
        }

        /* عنوان، توضیحات و دکمه */
        main > .why-zhiura > .why-content {
            grid-area: content;
            justify-self: center;
            align-items: flex-start;
            width: 100%;
            max-width: 620px;
            padding: 0;
            text-align: right;
        }

        main > .why-zhiura .why-content h2 {
            margin: 0 0 14px;
            font-size: clamp(25px, 3.8vw, 30px);
            line-height: 1.5;
        }

        main > .why-zhiura .why-description {
            margin: 0 0 12px;
            font-size: 15px;
            line-height: 2;
            overflow-wrap: anywhere;
        }

        main > .why-zhiura .why-bold {
            margin: 0;
            font-size: clamp(15px, 2.2vw, 17px);
            line-height: 2;
            overflow-wrap: anywhere;
        }

            /* شکست متن متناسب با عرض واقعی صفحه */
            main > .why-zhiura .why-bold br {
                display: none;
            }

        main > .why-zhiura .why-btn {
            box-sizing: border-box;
            width: fit-content;
            max-width: 100%;
            min-width: 0;
            min-height: 46px;
            height: auto;
            margin-top: 22px;
            padding: 11px 22px;
            white-space: normal;
        }

            main > .why-zhiura .why-btn:focus-visible {
                outline: 3px solid #c9a24a;
                outline-offset: 5px;
            }

        /* تصویر با نسبت اصلی و بدون کشیدگی */
        main > .why-zhiura > .why-visual {
            grid-area: visual;
            justify-self: center;
            width: 100%;
            max-width: 340px;
            height: auto;
            min-height: 0;
            margin: 0;
        }

        main > .why-zhiura .why-visual-image {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            transform: none;
        }

        /* مزیت‌ها: موبایل تک‌ستون، تبلت در صورت وجود فضا چندستون */
        main > .why-zhiura > .why-points {
            grid-area: points;
            justify-self: center;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
            gap: 14px;
            width: 100%;
            max-width: 720px;
            margin: 0;
        }

        main > .why-zhiura .why-point {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-width: 0;
            min-height: 72px;
            padding: 18px;
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            background: linear-gradient(145deg, #f4f6f2, #e5ebe4);
            box-shadow: 5px 6px 14px rgba(43, 68, 57, 0.12), -5px -5px 14px rgba(255, 255, 255, 0.85);
            white-space: normal;
        }

        main > .why-zhiura .why-point-title {
            flex: 1;
            min-width: 0;
            font-size: 15px;
            line-height: 1.8;
            text-align: right;
            overflow-wrap: anywhere;
        }

        main > .why-zhiura .why-point-number {
            flex: 0 0 auto;
            margin: 0;
            color: #947025;
            font-size: 21px;
            direction: ltr;
        }

        /* خطوط افقی دسکتاپ در کارت‌ها کاربرد ندارند */
        main > .why-zhiura .why-point-line {
            display: none;
        }
}



/* صفحه اصلی — تنظیم نهایی چرا ژیورا در موبایل و تبلت */
@media (width < 1024px) {

    /* وسط‌چین متن و دکمه */
    main > .why-zhiura > .why-content {
        align-items: center;
        text-align: center;
    }

    /* تصویر کوچک‌تر با حفظ نسبت اصلی */
    main > .why-zhiura > .why-visual {
        width: 100%;
        max-width: clamp(210px, 40vw, 280px);
    }

    /* کارت‌های چندردیفی با ردیف آخر وسط‌چین */
    main > .why-zhiura > .why-points {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 14px;
    }

    main > .why-zhiura .why-point {
        flex: 0 1 210px;
        width: 210px;
        max-width: 100%;
        min-width: 0;
    }
}


/* =====================================================
   صفحه اصلی — هرو دسکتاپ
   حفظ نسبت بنر و تنظیم اندازه متن و دکمه‌ها
   ===================================================== */

@media (min-width: 1024px) {

    main > .hero {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        max-width: 1920px;
        height: auto;
        min-height: 0;
        aspect-ratio: 1944 / 809;
        margin-inline: auto;
        overflow: hidden;
        /* اندازه‌های داخلی تابع عرض خود هرو هستند */
        container-type: inline-size;
    }

        /* تصویر کامل؛ بدون کشیدگی یا برش سوژه */
        main > .hero .hero-slider,
        main > .hero .hero-slide {
            width: 100%;
            height: 100%;
        }

            main > .hero .hero-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }

        /* متن در محدوده سبز سمت راست */
        main > .hero .hero-content {
            box-sizing: border-box;
            top: 50%;
            right: 5%;
            bottom: auto;
            left: auto;
            width: 40%;
            max-width: 700px;
            min-width: 0;
            transform: translateY(-43%);
            align-items: flex-start;
            direction: rtl;
            text-align: right;
        }

        main > .hero .hero-eyebrow {
            gap: 8px;
            margin-bottom: clamp(10px, 1.2cqw, 22px);
            font-size: clamp(11px, 0.85cqw, 14px);
            line-height: 1.8;
        }

        main > .hero .hero-title {
            margin: 0;
            font-size: clamp(25px, 2.6cqw, 44px);
            line-height: 1.65;
            text-align: right;
            overflow-wrap: anywhere;
        }

        main > .hero .hero-subtitle {
            margin: 8px 0 clamp(16px, 1.8cqw, 30px);
            font-size: clamp(16px, 1.6cqw, 27px);
            line-height: 1.9;
            text-align: right;
            overflow-wrap: anywhere;
        }

        /* دو دکمه انعطاف‌پذیر با اندازه محدود */
        main > .hero .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: stretch;
            gap: clamp(10px, 1.1cqw, 18px);
            width: 100%;
        }

        main > .hero .hero-btn {
            box-sizing: border-box;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
            min-height: 44px;
            height: auto;
            padding: clamp(9px, 0.7cqw, 13px) clamp(14px, 1.3cqw, 24px);
            gap: 9px;
            border-radius: 15px;
            font-size: clamp(12px, 0.95cqw, 16px);
            line-height: 1.6;
            text-decoration: none;
        }

            main > .hero .hero-btn span {
                min-width: 0;
                overflow-wrap: anywhere;
            }

            main > .hero .hero-btn i {
                flex-shrink: 0;
            }

            main > .hero .hero-btn:focus-visible {
                outline: 3px solid #f0d48d;
                outline-offset: 4px;
            }

        /* ویژگی‌های پایین بنر */
        main > .hero .hero-features {
            box-sizing: border-box;
            right: 0;
            bottom: clamp(25px, 2.2cqw, 40px);
            width: 100%;
            padding-inline: 8%;
            justify-content: center;
            flex-wrap: wrap;
            gap: clamp(18px, 4cqw, 65px);
        }

        main > .hero .hero-feature {
            min-width: 0;
            gap: 7px;
            font-size: clamp(11px, 0.95cqw, 16px);
        }

        main > .hero .feature-icon {
            flex: 0 0 auto;
            width: clamp(16px, 1.2cqw, 22px);
            height: clamp(16px, 1.2cqw, 22px);
        }

            main > .hero .feature-icon img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

        main > .hero .hero-dots {
            bottom: 10px;
        }
}

/* =====================================================
   صفحه اصلی — خدمات
   فاصله ردیف‌ها و جلوگیری از تداخل آیکن‌ها
   ===================================================== */

@media (width < 1024px) {

    main > .services .services-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 90px;
        margin-top: 80px;
        margin-bottom: 24px;
        align-items: stretch;
    }

    main > .services .service-card {
        box-sizing: border-box;
        min-width: 0;
        height: auto;
        overflow: visible;
    }

    main > .services .service-card-content {
        min-width: 0;
        height: auto;
        flex: 1;
    }

    main > .services .service-icon {
        box-sizing: border-box;
        top: -55px;
        right: 50%;
        width: 80px;
        height: 80px;
        transform: translateX(50%);
    }
}

/* موبایل کوچک — کارت‌ها زیر هم */
@media (width < 600px) {

    main > .services .services-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 90px;
        width: 100%;
        max-width: 400px;
        margin-inline: auto;
    }
}
/* =====================================================
   صفحه اصلی — تایپوگرافی چرا ژیورا و خدمات
   ===================================================== */

/* موبایل و تبلت */
@media (width < 1024px) {

    /* ---------- چرا ژیورا ---------- */

    main > .why-zhiura .why-content h2 {
        font-size: clamp(24px, calc(20px + 1vw), 30px);
        line-height: 1.6;
    }

    main > .why-zhiura .why-description {
        font-size: clamp(14px, calc(13px + 0.3vw), 16px);
        line-height: 2;
    }

    main > .why-zhiura .why-bold {
        font-size: clamp(15px, calc(14px + 0.3vw), 17px);
        line-height: 1.95;
    }

    main > .why-zhiura .why-btn {
        font-size: clamp(13px, calc(12px + 0.25vw), 14px);
        line-height: 1.7;
        min-height: 44px;
        height: auto;
        padding: 10px 20px;
    }

        main > .why-zhiura .why-btn i {
            font-size: 1.2em;
            flex-shrink: 0;
        }

    main > .why-zhiura .why-point-title {
        font-size: clamp(14px, calc(13px + 0.3vw), 16px);
        line-height: 1.8;
    }

    main > .why-zhiura .why-point-number {
        font-size: clamp(19px, calc(18px + 0.4vw), 22px);
    }

    /* ---------- خدمات ---------- */

    main > .services .services-heading h2 {
        font-size: clamp(24px, calc(20px + 1vw), 30px);
        line-height: 1.6;
    }

    main > .services .services-heading p {
        font-size: clamp(14px, calc(13px + 0.3vw), 16px);
        line-height: 2;
        overflow-wrap: anywhere;
    }

    main > .services .service-card h3 {
        font-size: clamp(16px, calc(15px + 0.3vw), 18px);
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

    /* متن 12px قبلی برای موبایل بیش از حد ریز بود */
    main > .services .service-card p {
        font-size: clamp(14px, calc(13px + 0.2vw), 15px);
        line-height: 2;
        overflow-wrap: anywhere;
    }

    main > .services .service-link {
        font-size: clamp(13px, calc(12px + 0.3vw), 15px);
        line-height: 1.8;
        min-height: 44px;
        max-width: 100%;
    }

        main > .services .service-link > span:last-child {
            min-width: 0;
            overflow-wrap: anywhere;
        }
}

/* دسکتاپ بزرگ — افزایش محدود، بدون رشد بی‌نهایت */
@media (min-width: 1440px) {

    main > .why-zhiura .why-content h2,
    main > .services .services-heading h2 {
        font-size: clamp(30px, 2.1vw, 36px);
    }

    main > .why-zhiura .why-description,
    main > .services .services-heading p {
        font-size: clamp(16px, 1.05vw, 18px);
        line-height: 2;
    }

    main > .why-zhiura .why-bold {
        font-size: clamp(17px, 1.2vw, 20px);
        line-height: 1.9;
    }

    main > .why-zhiura .why-btn,
    main > .services .service-link {
        font-size: clamp(14px, 1vw, 16px);
    }

    main > .services .service-card h3 {
        font-size: clamp(18px, 1.3vw, 22px);
        line-height: 1.7;
    }

    main > .services .service-card p {
        font-size: clamp(14px, 0.95vw, 16px);
        line-height: 2;
    }
}

/* =====================================================
   صفحه اصلی — نمونه‌کارهای ژیورا
   ===================================================== */

/* سربرگ: عنوان + خط انعطاف‌پذیر + مشاهده همه */
main > .works .works-heading {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 24px);
}

    main > .works .works-heading h2 {
        flex: 0 0 auto;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
    }

main > .works .works-heading-line {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

main > .works .works-heading .works-view-all {
    flex: 0 0 auto;
    gap: 5px;
    min-height: 44px;
    white-space: nowrap;
}

main > .works .works-view-all:focus-visible,
main > .works .works-project-link:focus-visible {
    outline: 3px solid #c9a24a;
    outline-offset: 4px;
    border-radius: 6px;
}

/* ---------- موبایل و تبلت ---------- */
@media (width < 1024px) {

    main > .works {
        box-sizing: border-box;
        min-width: 0;
        padding: 36px clamp(16px, 4vw, 40px) 56px;
    }

        main > .works .works-container {
            min-width: 0;
            max-width: 100%;
        }

        main > .works .works-heading {
            margin-bottom: 22px;
        }

            main > .works .works-heading h2 {
                font-size: clamp(18px, calc(14px + 1vw), 24px);
                line-height: 1.7;
            }

            main > .works .works-heading .works-view-all {
                font-size: clamp(12px, calc(10px + 0.4vw), 14px);
            }

        main > .works .works-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        /* ارتفاع کارت تابع محتوای آن است */
        main > .works :is(.works-featured, .works-card) {
            display: flex;
            flex-direction: column;
            min-width: 0;
            height: auto;
            border-radius: 20px;
            overflow: hidden;
            background: #f0f3ee;
        }

        main > .works :is(.works-featured-image, .works-card-image) {
            position: static;
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 10;
            object-fit: cover;
            transform: none;
        }

        main > .works .works-featured-image {
            aspect-ratio: 16 / 9;
        }

        main > .works .works-card-overlay {
            position: static;
            inset: auto;
            box-sizing: border-box;
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-start;
            gap: 14px;
            padding: 20px;
            background: linear-gradient(145deg, #f6f8f3, #e6ece5);
            color: #0f4c45;
        }

        main > .works .works-card-content {
            min-width: 0;
            max-width: 100%;
            margin: 0;
        }

        main > .works .works-category {
            margin-bottom: 8px;
            color: #52685e;
            font-size: clamp(12px, calc(11px + 0.2vw), 13px);
            line-height: 1.9;
            overflow-wrap: anywhere;
        }

        main > .works .works-card-content h3 {
            margin: 0 0 8px;
            color: #0f4c45;
            font-size: clamp(17px, calc(15px + 0.5vw), 20px);
            line-height: 1.8;
            text-shadow: none;
            overflow-wrap: anywhere;
        }

        main > .works .works-card-content p {
            margin: 0;
            color: #56665f;
            font-size: clamp(14px, calc(13px + 0.2vw), 15px);
            line-height: 2;
            text-shadow: none;
            overflow-wrap: anywhere;
        }

        /* دکمه مشاهده پروژه */
        main > .works .works-project-link {
            box-sizing: border-box;
            align-self: flex-start;
            width: fit-content;
            max-width: 100%;
            min-height: 44px;
            margin-top: auto;
            padding: 10px 14px;
            gap: 8px;
            border: 1px solid rgba(15, 76, 69, 0.12);
            border-radius: 13px;
            background: #e8eee7;
            color: #0f4c45;
            box-shadow: 4px 4px 9px rgba(45, 68, 56, 0.13), -4px -4px 9px rgba(255, 255, 255, 0.85);
            font-size: clamp(13px, calc(12px + 0.2vw), 14px);
            line-height: 1.7;
        }

            main > .works .works-project-link > span:last-child {
                min-width: 0;
                overflow-wrap: anywhere;
            }

        main > .works .works-project-icon {
            flex-shrink: 0;
        }

        main > .works .works-project-link:hover {
            color: #0f4c45;
        }
}

/* ---------- موبایل کوچک ---------- */
@media (width < 600px) {

    main > .works .works-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    main > .works .works-card-overlay {
        padding: 18px;
    }
}

/* ---------- دسکتاپ بزرگ؛ رشد محدود فونت ---------- */
@media (min-width: 1440px) {

    main > .works .works-heading h2 {
        font-size: clamp(30px, 2vw, 36px);
    }

    main > .works .works-heading .works-view-all {
        font-size: clamp(14px, 1vw, 16px);
    }

    main > .works .works-card-content h3 {
        font-size: clamp(24px, 1.7vw, 28px);
    }

    main > .works .works-card .works-card-content h3 {
        font-size: clamp(19px, 1.4vw, 23px);
    }

    main > .works .works-card-content p {
        font-size: 15px;
    }

    main > .works .works-card .works-card-content p {
        font-size: 14px;
    }

    main > .works .works-category,
    main > .works .works-card .works-category {
        font-size: 13px;
    }

    main > .works .works-project-link,
    main > .works .works-card .works-project-link {
        font-size: 14px;
    }
}

/* =====================================================
   صفحه اصلی — دسته‌بندی محصولات
   کارت‌های جمع‌وجور در موبایل و تبلت
   ===================================================== */

@media (width < 1024px) {

    main > .service-categories {
        box-sizing: border-box;
        min-width: 0;
        padding: 24px clamp(18px, 4vw, 40px) 56px;
    }

        main > .service-categories .service-categories-container {
            min-width: 0;
            max-width: 100%;
        }

        /* عنوان سکشن */
        main > .service-categories .service-categories-heading {
            margin-bottom: 26px;
            text-align: center;
        }

            main > .service-categories .service-categories-heading h2 {
                font-size: clamp(22px, calc(18px + 0.8vw), 28px);
                line-height: 1.7;
                overflow-wrap: anywhere;
            }

        /* تمام کارت‌ها در یک شبکه مشترک */
        main > .service-categories .service-categories-layout {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
            gap: 22px;
            min-width: 0;
            align-items: stretch;
        }

        /* این div فقط پوشاننده کارت‌های بعد از کارت اول است */
        main > .service-categories .service-categories-grid {
            display: contents;
        }

        /* کارت اول و بقیه کارت‌ها هم‌اندازه می‌شوند */
        main > .service-categories .service-category-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            min-width: 0;
            min-height: 0;
            height: auto;
            padding: 16px;
            gap: 14px;
            border-radius: 20px;
            text-decoration: none;
        }

        /* قاب تصویر مستقل از ابعاد فایل آپلودشده */
        main > .service-categories .service-category-image {
            box-sizing: border-box;
            position: relative;
            flex: 0 0 auto;
            width: 100%;
            height: clamp(110px, 18vw, 150px);
            min-height: 0;
            margin: 0;
            padding: 8px;
            border-radius: 13px;
            overflow: hidden;
            background: #e9eee7;
        }

            main > .service-categories .service-category-image img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
                transform: none;
            }

        /* حالت بدون عکس، با همان اندازه قاب */
        main > .service-categories .home-category-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #0f4c45;
            font-size: 34px;
        }

        /* محتوای کارت */
        main > .service-categories .service-category-content {
            flex: 1;
            min-width: 0;
            gap: 8px;
        }

        main > .service-categories .service-category-title {
            align-items: flex-start;
            min-width: 0;
            gap: 6px;
        }

            main > .service-categories .service-category-title h3 {
                min-width: 0;
                font-size: clamp(16px, calc(14px + 0.4vw), 18px);
                line-height: 1.8;
                overflow-wrap: anywhere;
            }

            main > .service-categories .service-category-title > i {
                flex-shrink: 0;
                margin-top: 5px;
                font-size: 18px;
            }

        main > .service-categories .service-category-content p {
            margin: 0;
            color: #59685f;
            font-size: clamp(14px, calc(13px + 0.2vw), 15px);
            line-height: 1.9;
            overflow-wrap: anywhere;
        }

        /* لینک پایین کارت */
        main > .service-categories .service-category-link {
            max-width: 100%;
            margin-top: auto;
            padding-top: 8px;
            font-size: clamp(13px, calc(12px + 0.2vw), 14px);
        }

        main > .service-categories .service-category-arrow {
            box-sizing: border-box;
            width: auto;
            max-width: 100%;
            min-height: 44px;
            padding: 8px 14px;
            border-radius: 14px;
            background: #e8eee7;
            color: #0f4c45;
            box-shadow: 4px 4px 9px rgba(45, 68, 56, 0.12), -4px -4px 9px rgba(255, 255, 255, 0.85);
        }

            main > .service-categories .service-category-arrow > span {
                min-width: 0;
                overflow-wrap: anywhere;
            }

        main > .service-categories .service-category-card:focus-visible {
            outline: 3px solid #c9a24a;
            outline-offset: 4px;
        }
}


/* =====================================================
   دکمه مشترک ژیورا — تمام اندازه‌های صفحه
   ===================================================== */

.zhiura-btn,
main > .service-categories .service-category-arrow {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    height: auto;
    padding: 10px 18px;
    border: 1px solid #c9a24a;
    border-radius: 14px;
    background: #e8eee7;
    color: #0f4c45;
    box-shadow: 4px 4px 9px rgba(45, 68, 56, 0.12), -4px -4px 9px rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: clamp(13px, calc(12px + 0.2vw), 16px);
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .zhiura-btn:hover,
    main > .service-categories .service-category-card:hover .service-category-arrow {
        background: #e8eee7;
        color: #0f4c45;
        transform: translateY(-2px);
        box-shadow: 6px 6px 12px rgba(45, 68, 56, 0.17), -5px -5px 12px rgba(255, 255, 255, 0.9);
    }

    .zhiura-btn:active,
    main > .service-categories .service-category-card:active .service-category-arrow {
        transform: translateY(0);
        box-shadow: inset 3px 3px 7px rgba(45, 68, 56, 0.16), inset -3px -3px 7px rgba(255, 255, 255, 0.85);
    }

    .zhiura-btn:focus-visible {
        outline: 3px solid #c9a24a;
        outline-offset: 4px;
    }

    .zhiura-btn > i {
        flex-shrink: 0;
    }

    .zhiura-btn > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .zhiura-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

@media (prefers-reduced-motion: reduce) {
    .zhiura-btn,
    main > .service-categories .service-category-arrow {
        transition: none;
    }

        .zhiura-btn:hover,
        main > .service-categories .service-category-card:hover .service-category-arrow {
            transform: none;
        }
}



/* =====================================================
   صفحه اصلی — فقط دیده نشو، به یاد بمان
   متن ← مراحل ← گوشی ← خدمات محتوا ← شروع همکاری
   ===================================================== */

@media (width < 1024px) {

    main > .content-process {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 40px clamp(18px, 4vw, 40px) 56px;
        direction: rtl;
    }

        /* عنوان ابتدا؛ دکمه همین پوشاننده به انتهای بخش می‌رود */
        main > .content-process > .works-heading2 {
            display: contents;
        }

        main > .content-process .works-heading2 h2 {
            order: 0;
            max-width: 100%;
            margin: 0;
            color: #0f4c45;
            font-size: clamp(23px, calc(19px + 0.8vw), 29px);
            line-height: 1.7;
            text-align: center;
            overflow-wrap: anywhere;
        }

        main > .content-process .works-heading-line2 {
            display: none;
        }

        /* توضیح کوتاه قبل از مراحل */
        main > .content-process > .content-process-header {
            order: 1;
            width: 100%;
            max-width: 620px;
        }

        main > .content-process .content-process-title-wrap {
            margin: 0;
            padding: 0;
        }

            main > .content-process .content-process-title-wrap p {
                color: #59685f;
                font-size: clamp(14px, calc(13px + 0.2vw), 15px);
                line-height: 2;
                text-align: center;
                overflow-wrap: anywhere;
            }

            main > .content-process .content-process-title-wrap br {
                display: none;
            }

        /* بستر اصلی: حذف اندازه‌ها و جابه‌جایی‌های ثابت دسکتاپ */
        main > .content-process .content-process-stage {
            order: 2;
            position: relative;
            inset: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 14px;
            width: 100%;
            max-width: 680px;
            min-width: 0;
            min-height: 0;
            margin: 0;
        }

        /* کارت‌های دو ستون فعلی وارد یک چیدمان مشترک می‌شوند */
        main > .content-process .process-column {
            display: contents;
        }

        main > .content-process .process-card {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            flex: 0 0 calc((100% - 14px) / 2);
            width: auto;
            min-width: 0;
            height: auto;
            min-height: 94px;
            padding: 14px;
            gap: 9px;
            border: 1px solid rgba(201, 162, 74, 0.55);
            border-radius: 16px;
            background: linear-gradient(145deg, #f8f9f5, #e8ede5);
        }

        main > .content-process .process-card-script {
            order: 1;
        }

        main > .content-process .process-card-hook {
            order: 2;
        }

        main > .content-process .process-card-camera {
            order: 3;
        }

        main > .content-process .process-card-edit {
            order: 4;
        }

        main > .content-process .process-card-publish {
            order: 5;
        }

        main > .content-process .process-card-top {
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 6px;
        }

        main > .content-process .process-number {
            color: #947025;
            font-size: clamp(13px, calc(12px + 0.2vw), 14px);
        }

        main > .content-process .process-name {
            min-width: 0;
            font-size: clamp(13px, calc(11px + 0.5vw), 16px);
            overflow-wrap: anywhere;
        }

        main > .content-process .process-card p {
            font-size: clamp(12px, calc(11px + 0.3vw), 14px);
            line-height: 1.9;
            overflow-wrap: anywhere;
        }

        /* گوشی وسط؛ اتصال مرکزی به کارت پنجم */
        main > .content-process .process-phone-area {
            order: 6;
            position: relative;
            inset: auto;
            flex: 0 0 100%;
            display: flex;
            justify-content: center;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 28px 0;
        }

            main > .content-process .process-phone-area::before,
            main > .content-process .process-phone-area::after {
                content: "";
                position: absolute;
                left: 50%;
                width: 1px;
                height: 42px;
                transform: translateX(-50%);
                background: #c9a24a;
                pointer-events: none;
            }

            main > .content-process .process-phone-area::before {
                top: -14px;
            }

            main > .content-process .process-phone-area::after {
                bottom: -14px;
            }

        /* خطوط دسکتاپ با چیدمان موبایل هماهنگ نیستند */
        main > .content-process .process-connections {
            display: none;
        }

        main > .content-process .process-phone {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            width: clamp(164px, 27vw, 200px);
            height: auto;
            aspect-ratio: 177 / 374;
            margin: 0;
            transform: none;
        }

        main > .content-process .process-phone-screen > img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* چهار کارت خدمات محتوا زیر گوشی */
        main > .content-process .content-cards {
            order: 7;
            position: relative;
            inset: auto;
            flex: 0 0 100%;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            width: 100%;
            min-width: 0;
        }

        main > .content-process .content-card {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            height: auto;
            min-height: 120px;
            padding: 16px 12px;
            gap: 10px;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            border-radius: 18px;
            border-color: rgba(15, 76, 69, 0.12);
            background: #edf2ea;
            box-shadow: 5px 5px 12px rgba(45, 68, 56, 0.12), -5px -5px 12px rgba(255, 255, 255, 0.85);
        }

            main > .content-process .content-card > i {
                color: #0f4c45;
                font-size: 24px;
            }

        main > .content-process .content-card-text {
            min-width: 0;
            align-items: center;
            text-align: center;
        }

        main > .content-process .content-card h3 {
            font-size: clamp(14px, calc(12px + 0.4vw), 16px);
            line-height: 1.8;
            overflow-wrap: anywhere;
        }

        main > .content-process .content-card p {
            margin-top: 6px;
            color: #59685f;
            font-size: clamp(12px, calc(11px + 0.3vw), 14px);
            line-height: 1.9;
            overflow-wrap: anywhere;
        }

        /* پوشاننده خالی فعلی */
        main > .content-process .uplodeVedio {
            display: none;
        }

        /* دکمه شروع همکاری در انتهای سکشن */
        main > .content-process .works-heading2 > .works-view-all {
            order: 3;
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 9px;
            width: fit-content;
            max-width: 100%;
            min-height: 44px;
            margin-top: 6px;
            padding: 10px 20px;
            border: 1px solid rgba(15, 76, 69, 0.15);
            border-radius: 14px;
            background: #e8eee7;
            color: #0f4c45;
            box-shadow: 4px 4px 9px rgba(45, 68, 56, 0.12), -4px -4px 9px rgba(255, 255, 255, 0.85);
            font-size: clamp(13px, calc(12px + 0.2vw), 14px);
            line-height: 1.8;
            text-decoration: none;
        }

        main > .content-process .works-view-all:focus-visible {
            outline: 3px solid #c9a24a;
            outline-offset: 4px;
        }
}

/* سکشن تولید محتوا — رنگ کارت‌ها و دکمه در موبایل و تبلت */
@media (width < 1024px) {

    /* چهار کارت زیر گوشی: آبی اصلی */
    main > .content-process .content-card {
        background: #eaf1fa;
        border-color: rgb(48 134 255 / 38%);
        box-shadow: 4px 4px 10px rgba(48, 134, 255, 0.13), -4px -4px 10px rgba(255, 255, 255, 0.95);
    }

        main > .content-process .content-card > i {
            color: #3086ff;
        }

        main > .content-process .content-card:hover {
            box-shadow: 6px 6px 14px rgba(48, 134, 255, 0.16), -6px -6px 13px rgba(255, 255, 255, 1);
        }

    /* شروع همکاری: سبز کله‌غازی با متن سفید */
    main > .content-process .works-heading2 > .works-view-all {
        background: #0f4c45;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 6px 6px 14px rgba(15, 76, 69, 0.25), -5px -5px 12px rgba(255, 255, 255, 0.85), inset 1px 1px 3px rgba(255, 255, 255, 0.12);
        transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

        /* متن و آیکن رنگ دکمه را با هم می‌گیرند */
        main > .content-process .works-heading2 > .works-view-all > span,
        main > .content-process .works-heading2 > .works-view-all > i {
            color: inherit;
        }

        main > .content-process .works-heading2 > .works-view-all:hover,
        main > .content-process .works-heading2 > .works-view-all:focus-visible {
            color: #c9a24a;
        }

        main > .content-process .works-heading2 > .works-view-all:active {
            transform: translateY(1px);
            box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.1);
        }
}
/* تصویر داخل گوشی — نمایش با اندازه اصلی */
@media (width < 1024px) {
    main > .content-process .process-phone-screen > img {
        object-fit: none;
        object-position: center;
    }
}


/* =====================================================
   صفحه اصلی — خدمات در موبایل‌های بزرگ
   ===================================================== */

@media (400px <= width < 600px) {

    main > .services .services-grid {
        max-width: 350px;
        margin-inline: auto;
        margin-top: 68px;
        row-gap: 76px;
    }

    main > .services .service-card {
        min-height: 0;
        padding: 36px 20px 18px;
        border-radius: 16px;
    }

    main > .services .service-icon {
        width: 68px;
        height: 68px;
        top: -44px;
    }

        main > .services .service-icon i {
            font-size: 23px;
        }

    main > .services .service-card h3 {
        margin: 4px 0 10px;
        font-size: 16px;
        line-height: 1.8;
    }

    main > .services .service-card p {
        min-height: 0;
        font-size: 14px;
        line-height: 1.9;
    }

    main > .services .service-link {
        font-size: 13px;
        min-height: 44px;
    }
}

/* =====================================================
   صفحه اصلی — بنر تبلیغاتی یکپارچه
   تصویر چپ، متن و دکمه راست
   ===================================================== */

@media (width < 1024px) {

    main > .hero-banner {
        box-sizing: border-box;
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        width: calc(100% - 32px);
        max-width: 960px;
        height: auto;
        min-height: 200px;
        aspect-ratio: auto;
        margin: 24px auto 48px;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 15px;
        background: #efe5d8;
        box-shadow: none;
        direction: rtl;
    }

        /* تصویر پس‌زمینه؛ بدون کشیدگی */
        main > .hero-banner .hero-banner__image {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: left center;
        }

        /* ارتفاع بنر با متن و دکمه افزایش پیدا می‌کند */
        main > .hero-banner .hero-banner__content {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            grid-column: 1;
            z-index: 5;
            transform: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 100%;
            min-width: 0;
            padding: 22px 12px;
            text-align: center;
        }

            main > .hero-banner .hero-banner__content h1 {
                margin: 0;
                font-size: clamp(17px, calc(12px + 1.2vw), 26px);
                line-height: 1.7;
                overflow-wrap: anywhere;
            }

            main > .hero-banner .hero-banner__content p {
                margin: 0;
                font-size: clamp(12px, calc(10px + 0.6vw), 16px);
                line-height: 1.9;
                overflow-wrap: anywhere;
            }

            main > .hero-banner .hero-banner__content br {
                display: none;
            }

        main > .hero-banner .hero-banner__button {
            box-sizing: border-box;
            flex-shrink: 0;
            width: fit-content;
            max-width: 100%;
            min-width: 0;
            min-height: 44px;
            height: auto;
            margin: 2px 0 0;
            padding: 8px 12px;
            gap: 6px;
            font-size: clamp(12px, calc(10px + 0.4vw), 14px);
            line-height: 1.7;
            white-space: normal;
        }

            main > .hero-banner .hero-banner__button > span:first-child {
                min-width: 0;
                overflow-wrap: anywhere;
            }

        main > .hero-banner .hero-banner__arrow {
            flex-shrink: 0;
            font-size: 18px;
        }
}

/* =====================================================
   صفحه اصلی — اگر این کسب‌وکار را امروز می‌ساختیم
   تگ‌ها زیر دکمه در موبایل و تبلت
   ===================================================== */

@media (width < 1024px) {

    main .redesign-card__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
        min-width: 0;
        margin-top: 22px;
    }

    /* ابتدا دکمه */
    main .redesign-card__button {
        order: 0;
        align-self: center;
        max-width: 100%;
    }

    /* سپس تگ‌ها، کنار هم و وسط‌چین */
    main .redesign-card__tags {
        order: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    main .redesign-tag {
        box-sizing: border-box;
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 32px;
        padding: 6px 12px;
        font-size: clamp(11px, calc(10px + 0.25vw), 13px);
        line-height: 1.7;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* بازطراحی کسب‌وکار — وسط‌چین و تنظیم تیتر */
@media (width < 1024px) {

    /* تیتر و توضیح ابتدای سکشن */
    main .redesign-header {
        text-align: center;
    }

    main .redesign-title {
        margin: 20px 0 14px;
        font-size: clamp(18px, calc(10px + 2vw), 28px);
        line-height: 1.7;
        letter-spacing: normal;
        text-align: center;
        text-wrap: balance;
    }

    /* آیکن، نام پروژه و توضیحات کارت */
    main .redesign-card__content {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 16px;
        padding-inline: 8px;
        text-align: center;
    }

    main .redesign-card__icon {
        margin-inline: auto;
    }

    main .redesign-card__info {
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    main .redesign-card__title {
        text-align: center;
        font-size: clamp(20px, calc(16px + 0.8vw), 25px);
        line-height: 1.7;
    }

    main .redesign-card__text {
        margin-inline: auto;
        text-align: center;
        font-size: clamp(14px, calc(13px + 0.2vw), 15px);
        line-height: 2;
    }
}
/* توضیح زیر تیتر سکشن بازطراحی */
@media (width < 1024px) {
    main .redesign-header .redesign-description {
        font-size: 9px;
        line-height: 1.9;
        text-align: center;
    }
}

/* =====================================================
   صفحه اصلی — سرمایه‌گذاری: به‌زودی
   تمام پلتفرم‌ها
   ===================================================== */

main > .investment--soon {
    box-sizing: border-box;
    width: 100%;
    padding: 24px clamp(16px, 3vw, 48px) 48px;
}

    main > .investment--soon .investment-container {
        box-sizing: border-box;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        width: 100%;
        max-width: 1410px;
        min-height: 320px;
        margin-inline: auto;
        border: 1px solid rgba(201, 162, 74, 0.25);
        border-radius: 22px;
        background: radial-gradient( ellipse at 20% 50%, rgba(201, 162, 74, 0.12), transparent 65% ), #082f2c;
    }

    /* متن سمت راست */
    main > .investment--soon .investment-content {
        box-sizing: border-box;
        position: relative;
        z-index: 3;
        min-width: 0;
        padding: clamp(28px, 4vw, 56px);
    }

    /* نشان به‌زودی */
    main > .investment--soon .investment-soon-label {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 13px;
        border: 1px solid rgba(201, 162, 74, 0.3);
        border-radius: 999px;
        background: rgba(201, 162, 74, 0.08);
        color: #edcf87;
        font-size: clamp(12px, calc(11px + 0.2vw), 14px);
        line-height: 1.8;
    }

    main > .investment--soon .investment-soon-dot {
        flex-shrink: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d9b761;
        box-shadow: 0 0 14px rgba(217, 183, 97, 0.65);
    }

    main > .investment--soon .investment-title {
        margin: 20px 0 0;
        font-size: clamp(24px, calc(18px + 1vw), 36px);
        line-height: 1.7;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    main > .investment--soon .investment-description {
        max-width: 460px;
        margin: 14px 0 0;
        color: #d5e2dc;
        font-size: clamp(14px, calc(13px + 0.2vw), 16px);
        font-weight: 400;
        line-height: 2;
        overflow-wrap: anywhere;
    }

    /* وضعیت؛ ظاهر اطلاع‌رسانی دارد، نه دکمه */
    main > .investment--soon .investment-soon-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 22px;
        color: #edcf87;
        font-size: clamp(13px, calc(12px + 0.2vw), 15px);
        line-height: 1.8;
    }

        main > .investment--soon .investment-soon-status i {
            flex-shrink: 0;
            font-size: 20px;
        }

    /* تصویر سمت چپ؛ مستقل از ارتفاع متن */
    main > .investment--soon .investment-visual {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 320px;
        margin: 0;
        z-index: 1;
        overflow: hidden;
    }

        main > .investment--soon .investment-visual img {
            display: block;
            width: 100%;
            max-width: none;
            height: 100%;
            position: absolute;
            inset: 0;
            object-fit: contain;
            object-position: center;
            opacity: 0.65;
        }

/* موبایل و تبلت: تصویر پس‌زمینه، متن وسط */
@media (width < 1024px) {

    main > .investment--soon .investment-container {
        grid-template-columns: minmax(0, 1fr);
        min-height: 300px;
    }

    main > .investment--soon .investment-visual {
        position: absolute;
        inset: 0;
        min-height: 0;
        height: 100%;
        pointer-events: none;
    }

        main > .investment--soon .investment-visual img {
            opacity: 0.15;
        }

    main > .investment--soon .investment-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 36px clamp(20px, 5vw, 44px);
        text-align: center;
    }

    main > .investment--soon .investment-description {
        text-align: center;
    }

    main > .investment--soon .investment-soon-status {
        justify-content: center;
    }
}

/* =====================================================
   سرمایه‌گذاری — اصلاح ظاهر لپ‌تاپ و دسکتاپ
   ===================================================== */

@media (min-width: 1024px) {

    main > .investment--soon .investment-container {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        min-height: 290px;
        background: #082f2c;
    }

    /* محتوای فشرده‌تر */
    main > .investment--soon .investment-content {
        padding: 30px clamp(28px, 3vw, 48px);
    }

    main > .investment--soon .investment-title {
        margin-top: 14px;
        font-size: clamp(25px, 2vw, 32px);
        line-height: 1.7;
    }

    main > .investment--soon .investment-description {
        max-width: 420px;
        margin-top: 10px;
        font-size: clamp(14px, 1vw, 16px);
        line-height: 2;
    }

    main > .investment--soon .investment-soon-status {
        margin-top: 16px;
        font-size: 14px;
    }

    /* حذف ظاهر مستطیلی عکس با محوشدن لبه‌ها */
    main > .investment--soon .investment-visual {
        min-height: 290px;
        align-self: stretch;
    }

        main > .investment--soon .investment-visual img {
            opacity: 0.9;
            object-fit: contain;
            -webkit-mask-image: radial-gradient( ellipse 65% 65% at center, #000 35%, transparent 78% );
            mask-image: radial-gradient( ellipse 65% 65% at center, #000 35%, transparent 78% );
        }
}

/* =====================================================
   صفحه اصلی — CTA موبایل و تبلت
   حفظ فرم اصلی، زمینه یکپارچه و چیدمان مرتب
   ===================================================== */

@media (width < 1024px) {

    main > .final-cta {
        box-sizing: border-box;
        width: 100%;
        padding: 32px 16px 40px;
        margin: 0;
    }

        main > .final-cta .final-cta__container {
            box-sizing: border-box;
            position: relative;
            isolation: isolate;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            justify-items: center;
            align-items: start;
            gap: 18px;
            width: 100%;
            max-width: 680px;
            height: auto;
            min-height: 0;
            margin: 0 auto;
            padding: 32px clamp(18px, 4vw, 32px);
            overflow: visible;
            border-radius: 22px;
            background: #073d35;
            box-shadow: 0 12px 28px rgba(15, 76, 69, 0.16);
        }

        /* تصویر تزئینی پشت محتوا */
        main > .final-cta .final-cta__image {
            position: absolute;
            inset: 0;
            z-index: 0;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            object-fit: cover;
            object-position: left center;
            opacity: 0.22;
        }

        /* حذف نوارهای روشن و یکپارچه‌کردن زمینه */
        main > .final-cta .final-cta__overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient( 180deg, rgba(4, 43, 36, 0.82), rgba(4, 43, 36, 0.55) 50%, rgba(4, 43, 36, 0.94) );
        }

        /* ورود متن و دکمه تماس به شبکه اصلی */
        main > .final-cta .final-cta__content,
        main > .final-cta .final-cta__buttons {
            display: contents;
        }

        /* عنوان */
        main > .final-cta .final-cta__title {
            grid-row: 1;
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 500px;
            margin: 0;
            padding: 0;
            color: #fff;
            font-size: clamp(22px, calc(18px + 0.8vw), 28px);
            line-height: 1.8;
            text-align: center;
            text-wrap: balance;
            overflow-wrap: anywhere;
        }

        /* توضیح قبل از فرم */
        main > .final-cta .final-cta__description {
            grid-row: 2;
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 410px;
            margin: 0;
            color: #e0e9e3;
            font-size: clamp(14px, calc(13px + 0.2vw), 15px);
            line-height: 2;
            text-align: center;
            overflow-wrap: anywhere;
        }

            main > .final-cta .final-cta__title br,
            main > .final-cta .final-cta__description br {
                display: none;
            }

        /* فرم: همان ظاهر اصلی، بدون جای‌گذاری ثابت */
        main > .final-cta .final-cta__form {
            box-sizing: border-box;
            grid-row: 3;
            position: relative;
            inset: auto;
            z-index: 3;
            transform: none;
            width: 100%;
            max-width: 340px;
            min-width: 0;
            min-height: 0;
            height: auto;
            margin: 8px 0 0;
            padding: 14px;
            gap: 12px;
        }

        main > .final-cta .final-cta__field {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            height: 50px;
        }

            /* فونت 16px برای خوانایی و جلوگیری از زوم خودکار آیفون */
            main > .final-cta .final-cta__field input,
            main > .final-cta .final-cta__dropdown-trigger {
                box-sizing: border-box;
                width: 100%;
                min-width: 0;
                height: 50px;
                padding: 10px 34px 10px 10px;
                font-family: inherit;
                font-size: 16px;
                line-height: 1.7;
                color: #425b50;
            }

                main > .final-cta .final-cta__field input::placeholder {
                    color: #697a70;
                }

            main > .final-cta .final-cta__field > i {
                right: 11px;
                font-size: 15px;
                color: #697a70;
            }

        /* فهرست موضوع با بازشدن، ارتفاع فرم را افزایش می‌دهد */
        main > .final-cta .final-cta__dropdown {
            display: block;
            height: auto;
            min-height: 50px;
        }

            main > .final-cta .final-cta__dropdown > i {
                top: 25px;
            }

        main > .final-cta .final-cta__dropdown-menu {
            position: static;
            inset: auto;
            display: none;
            width: 100%;
            transform: none;
        }

        main > .final-cta .final-cta__dropdown.is-open
        .final-cta__dropdown-menu {
            display: flex;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none;
        }

        main > .final-cta .final-cta__dropdown-menu button {
            min-height: 44px;
            height: auto;
            padding: 9px 10px;
            font-size: 14px;
            line-height: 1.8;
        }

        main > .final-cta .final-cta__submit {
            box-sizing: border-box;
            min-height: 48px;
            height: auto;
            margin-top: 2px;
            padding: 10px 14px;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.8;
        }

        main > .final-cta [data-service-lead-message] {
            margin: 0;
            font-size: 14px;
            line-height: 1.9;
            overflow-wrap: anywhere;
        }

            main > .final-cta [data-service-lead-message]:empty {
                display: none;
            }

        /* فرم دیده می‌شود؛ دکمه تکراری مشاوره لازم نیست */
        main > .final-cta .final-cta__button--consult {
            display: none;
        }

        /* راه تماس جایگزین، زیر فرم */
        main > .final-cta .final-cta__button--contact {
            box-sizing: border-box;
            grid-row: 4;
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            max-width: 100%;
            min-height: 44px;
            height: auto;
            margin: 4px 0 0;
            padding: 9px 18px;
            color: #e4c77e;
            font-size: 14px;
            line-height: 1.8;
            text-decoration: none;
            white-space: normal;
        }

        main > .final-cta :is(input, button, a):focus-visible {
            outline: 3px solid #c9a24a;
            outline-offset: 3px;
        }
}

/* نمایش هر دو دکمه CTA در موبایل و تبلت */
@media (width < 1024px) {

    main > .final-cta .final-cta__buttons {
        grid-row: 4;
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 4px 0 0;
    }

    main > .final-cta .final-cta__button--consult,
    main > .final-cta .final-cta__button--contact {
        display: inline-flex;
        grid-row: auto;
        margin: 0;
    }
}

/* یکسان‌سازی اندازه دو دکمه CTA */
@media (width < 1024px) {

    main > .final-cta .final-cta__button--consult,
    main > .final-cta .final-cta__button--contact {
        box-sizing: border-box;
        flex: 0 1 190px;
        width: 190px;
        max-width: 100%;
        min-height: 46px;
        height: auto;
        padding: 10px 12px;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        line-height: 1.8;
    }
}

/* =====================================================
   CTA موبایل و تبلت — زمینه ساده بدون تصویر
   ===================================================== */

@media (width < 1024px) {

    main > .final-cta .final-cta__image,
    main > .final-cta .final-cta__overlay {
        display: none;
    }

    main > .final-cta .final-cta__container {
        background: radial-gradient( ellipse at top right, rgba(201, 162, 74, 0.07), transparent 60% ), #093e35;
        border: 1px solid rgba(201, 162, 74, 0.18);
        border-radius: 22px;
    }

    main > .final-cta .final-cta__title {
        font-weight: 800;
        text-shadow: none;
    }

    main > .final-cta .final-cta__description {
        color: #dce7df;
        text-shadow: none;
    }
}

/* =====================================================
   فوتر — موبایل و تبلت
   حفظ تصویر کامل ZHIURA و خط طلایی
   ===================================================== */

@media (width < 1024px) {

    footer.footer {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #001f20;
    }

        footer.footer .footer__container {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            width: 100%;
            max-width: none;
            min-height: 0;
            height: auto;
            padding: 0;
            background: #001f20;
        }

        /* محتوا بالای تصویر قرار می‌گیرد */
        footer.footer .footer__content {
            box-sizing: border-box;
            grid-row: 1;
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "about"
                "links"
                "contact"
                "brand";
            gap: 30px;
            width: 100%;
            max-width: 760px;
            min-height: 0;
            margin: 0 auto;
            padding: 36px clamp(22px, 5vw, 42px) 0;
            direction: rtl;
        }

            footer.footer .footer__content > div {
                box-sizing: border-box;
                position: relative;
                min-width: 0;
                max-width: 100%;
                margin: 0;
                padding: 0;
                border: 0;
                text-align: center;
            }

        footer.footer .footer__about {
            grid-area: about;
        }

        footer.footer .footer__links {
            grid-area: links;
        }

        footer.footer .footer__contact {
            grid-area: contact;
        }

        footer.footer .footer__brand {
            grid-area: brand;
            align-items: center;
        }

        /* عنوان‌ها */
        footer.footer .footer__heading {
            margin: 0 0 16px;
            color: #d5b25f;
            font-size: clamp(16px, calc(14px + 0.3vw), 18px);
            line-height: 1.8;
            white-space: normal;
        }

        /* معرفی */
        footer.footer .footer__about-text {
            max-width: 460px;
            margin: 0 auto;
            color: #e1e9e5;
            font-size: clamp(14px, calc(13px + 0.2vw), 15px);
            line-height: 2;
            overflow-wrap: anywhere;
        }

        footer.footer .footer__about-link {
            justify-content: center;
            min-height: 44px;
            margin-top: 10px;
            font-size: 14px;
        }

        footer.footer .footer__socials {
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 16px;
        }

            footer.footer .footer__socials a {
                width: 44px;
                height: 44px;
                border: 1px solid rgba(201, 162, 74, 0.2);
                border-radius: 13px;
                background: rgba(255, 255, 255, 0.03);
            }

                footer.footer .footer__socials a i {
                    font-size: 20px;
                }

        /* دسترسی سریع، دو ستون */
        footer.footer .footer__nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
        }

        footer.footer .footer__nav-column {
            min-width: 0;
            gap: 4px;
        }

        footer.footer .footer__nav a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            font-size: 14px;
            line-height: 1.8;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        /* فرم خبرنامه؛ حفظ ظاهر نئومورفیسم فعلی */
        footer.footer .footer__subscribe {
            box-sizing: border-box;
            width: 100%;
            max-width: 350px;
            height: 54px;
            margin: 0 auto 10px;
            border-radius: 12px;
        }

            footer.footer .footer__subscribe input {
                box-sizing: border-box;
                min-width: 0;
                padding: 0 12px 0 60px;
                font-size: 16px;
                direction: ltr;
                text-align: right;
                color: #425b50;
            }

                footer.footer .footer__subscribe input::placeholder {
                    color: #697a70;
                }

            footer.footer .footer__subscribe button {
                left: 5px;
                width: 44px;
                height: 44px;
                border-radius: 9px;
            }

                footer.footer .footer__subscribe button i {
                    font-size: 18px;
                }

        footer.footer .footer__contact > small {
            color: #bdcec5;
        }

        footer.footer [data-newsletter-status] {
            max-width: 100%;
            color: #e2c67e;
            overflow-wrap: anywhere;
        }

        footer.footer .footer__contact-info {
            align-items: center;
            gap: 4px;
            margin: 18px 0 0;
        }

            footer.footer .footer__contact-info a {
                max-width: 100%;
                min-height: 36px;
                font-size: 14px;
                line-height: 1.9;
                overflow-wrap: anywhere;
            }

        /* لوگو و نمادهای اعتماد */
        footer.footer .footer__logo {
            width: 64px;
            height: 64px;
            margin: 0;
        }

        footer.footer .footer__trust {
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            width: 100%;
            margin-top: 20px;
        }

        footer.footer .footer__trust-item {
            flex: 0 0 58px;
            width: 58px;
            height: 72px;
        }

        /* تصویر کامل، بدون کشیدگی یا برش نوشته و خط */
        footer.footer .footer__background {
            grid-row: 2;
            position: relative;
            inset: auto;
            display: block;
            width: 100%;
            max-width: none;
            height: auto;
            margin: 0;
            object-fit: contain;
            transform: none;
            pointer-events: none;
        }

        /* کپی‌رایت مستقل از تصویر */
        footer.footer .footer__copyright {
            box-sizing: border-box;
            grid-row: 3;
            position: relative;
            inset: auto;
            transform: none;
            width: 100%;
            margin: 0;
            padding: 10px 20px calc(100px + env(safe-area-inset-bottom, 0px));
            color: #d5b25f;
            font-size: 12px;
            line-height: 1.9;
            text-align: center;
        }

        footer.footer :is(a, button, input):focus-visible {
            outline: 3px solid #c9a24a;
            outline-offset: 4px;
        }
}

/* تبلت: چهار بخش در دو ستون */
@media (768px <= width < 1024px) {

    footer.footer .footer__content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "about links"
            "contact brand";
        column-gap: 32px;
        row-gap: 36px;
    }
}

/* =====================================================
   فوتر — لوگو و نوشته مستقل در موبایل و تبلت
   ===================================================== */

/* این بخش در دسکتاپ نمایش داده نمی‌شود */
footer.footer .footer__mobile-identity {
    display: none;
}

@media (width < 1024px) {

    footer.footer,
    footer.footer .footer__container {
        background: #001f20;
    }

        /* تصویر یکپارچه قبلی در موبایل حذف می‌شود */
        footer.footer .footer__background {
            display: none;
        }

        /* لوگوی قبلی فقط در دسکتاپ باقی می‌ماند */
        footer.footer .footer__brand > .footer__logo {
            display: none;
        }

        /* ابتدای فوتر: لوگو و نوشته بزرگ */
        footer.footer .footer__mobile-identity {
            box-sizing: border-box;
            grid-row: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            width: 100%;
            min-width: 0;
            padding: 36px 0 0;
        }

        footer.footer .footer__mobile-logo {
            display: block;
            width: clamp(64px, 12vw, 86px);
            height: auto;
            margin: 0;
            object-fit: contain;
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22));
        }

        footer.footer .footer__mobile-wordmark {
            display: block;
            width: 100%;
            max-width: 760px;
            height: auto;
            direction: ltr;
            pointer-events: none;
            user-select: none;
        }

        /* محتوا بعد از هویت بصری */
        footer.footer .footer__content {
            grid-row: 2;
            padding-top: 24px;
        }

        /* نمادهای اعتماد بدون تکرار لوگو */
        footer.footer .footer__trust {
            margin-top: 0;
        }

        footer.footer .footer__copyright {
            grid-row: 3;
            margin-top: 24px;
        }
}

/* نوشته مستقل در دسکتاپ مخفی بماند */
footer.footer .footer__container > .footer__mobile-wordmark {
    display: none;
}

@media (width < 1024px) {

    /* لوگو در ابتدای فوتر */
    footer.footer .footer__mobile-identity {
        grid-row: 1;
        padding: 32px 0 0;
    }

    /* محتوای اصلی */
    footer.footer .footer__content {
        grid-row: 2;
    }

    /* نوشته بزرگ و خط طلایی، بعد از محتوا */
    footer.footer .footer__container > .footer__mobile-wordmark {
        display: block;
        grid-row: 3;
        justify-self: center;
        width: 100%;
        max-width: 760px;
        height: auto;
        margin-top: 24px;
        direction: ltr;
    }

    /* کپی‌رایت، آخرین بخش فوتر */
    footer.footer .footer__copyright {
        grid-row: 4;
        position: relative;
        inset: auto;
        transform: none;
        margin: 0;
        padding: 12px 20px calc(100px + env(safe-area-inset-bottom, 0px));
    }
}

/* لوگوی طلایی در ابتدای فوتر موبایل و تبلت */
@media (width < 1024px) {

    footer.footer .footer__container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

        footer.footer .footer__container > .footer__mobile-identity {
            display: flex;
            grid-column: 1;
            grid-row: 1;
            order: -1;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 0;
            padding: 32px 0 8px;
        }

    footer.footer .footer__mobile-logo {
        position: static;
        inset: auto;
        transform: none;
        width: 76px;
        height: auto;
        margin: 0;
    }
}


/* فوتر — جلوگیری از تکرار لوگو در موبایل و تبلت */
@media (width < 1024px) {
    footer.footer .footer__content .footer__logo {
        display: none;
    }
}

/* =====================================================
   فوتر — شبکه‌های اجتماعی در تمام پلتفرم‌ها
   ===================================================== */

footer.footer .footer__about-name {
    color: #d5b25f;
    font-weight: 700;
}

footer.footer .footer__socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

    footer.footer .footer__socials a {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(201, 162, 74, 0.2);
        border-radius: 13px;
        background: linear-gradient(145deg, #073632, #042724);
        color: #e5ebeb;
        box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.22), inset 1px 1px 1px rgba(255, 255, 255, 0.05);
        text-decoration: none;
        transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

        footer.footer .footer__socials a i {
            font-size: 20px;
            line-height: 1;
            color: inherit;
        }

        footer.footer .footer__socials a:hover {
            color: #e4c77e;
            border-color: rgba(201, 162, 74, 0.6);
            transform: translateY(-2px);
        }

        footer.footer .footer__socials a:active {
            transform: translateY(0);
            box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.25);
        }

        footer.footer .footer__socials a:focus-visible {
            outline: 3px solid #c9a24a;
            outline-offset: 4px;
        }

@media (prefers-reduced-motion: reduce) {
    footer.footer .footer__socials a {
        transition: none;
    }

        footer.footer .footer__socials a:hover {
            transform: none;
        }
}

/* =====================================================
   صفحه اصلی — بنر طراحی سایت و فروشگاه
   نسخه موبایل و تبلت
   ===================================================== */

@media (width < 1024px) {

    main > .hero-banner {
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
        align-items: center;
        width: calc(100% - 32px);
        max-width: 760px;
        height: auto;
        min-height: 220px;
        aspect-ratio: auto;
        margin: 28px auto 44px;
        padding: 0;
        overflow: hidden;
        direction: rtl;
        border: 1px solid rgba(201, 162, 74, 0.35);
        border-radius: 22px;
        background: #0a4039;
        box-shadow: 0 12px 26px rgba(15, 76, 69, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

        /* تصویر در سمت چپ */
        main > .hero-banner .hero-banner__image {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: left center;
        }

        /* زمینه خوانای متن با اتصال نرم به تصویر */
        main > .hero-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient( to left, #083e36 0%, rgba(8, 62, 54, 0.98) 35%, rgba(8, 62, 54, 0.85) 49%, rgba(8, 62, 54, 0.12) 75%, transparent 100% );
        }

        /* متن و دکمه بدون وابستگی به ارتفاع عکس */
        main > .hero-banner .hero-banner__content {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            grid-column: 1;
            z-index: 2;
            transform: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 13px;
            width: 100%;
            min-width: 0;
            padding: 24px 16px 24px 8px;
            text-align: right;
        }

            main > .hero-banner .hero-banner__content h1 {
                margin: 0;
                color: #fff;
                font-size: clamp(18px, calc(14px + 0.9vw), 25px);
                font-weight: 800;
                line-height: 1.8;
                text-wrap: balance;
                overflow-wrap: anywhere;
            }

            main > .hero-banner .hero-banner__content p {
                margin: 0;
                color: #e0e9df;
                font-size: clamp(13px, calc(12px + 0.2vw), 15px);
                line-height: 1.9;
                overflow-wrap: anywhere;
            }

            main > .hero-banner .hero-banner__content br {
                display: none;
            }

        /* دکمه طلایی برجسته */
        main > .hero-banner .hero-banner__button {
            box-sizing: border-box;
            width: fit-content;
            max-width: 100%;
            min-width: 0;
            min-height: 44px;
            height: auto;
            margin-top: 3px;
            padding: 10px 13px;
            gap: 7px;
            border: 1px solid rgba(255, 235, 180, 0.5);
            border-radius: 13px;
            background: linear-gradient(145deg, #e0be6d, #bf9239);
            color: #153e34;
            box-shadow: 4px 5px 12px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(255, 255, 255, 0.4);
            font-size: clamp(12px, calc(11px + 0.2vw), 14px);
            font-weight: 700;
            line-height: 1.8;
            text-decoration: none;
            white-space: normal;
        }

            main > .hero-banner .hero-banner__button > span:first-child {
                min-width: 0;
                overflow-wrap: anywhere;
            }

        main > .hero-banner .hero-banner__arrow {
            flex-shrink: 0;
            font-size: 17px;
        }

        main > .hero-banner .hero-banner__button:hover {
            color: #153e34;
            transform: translateY(-2px);
        }

        main > .hero-banner .hero-banner__button:focus-visible {
            outline: 3px solid #f3d68c;
            outline-offset: 4px;
        }
}


/* فوتر — محدودکردن عرض در نمایشگرهای خیلی بزرگ */
@media (min-width: 1600px) {

    footer.footer {
        background: #f5f5f3;
    }

        footer.footer .footer__container {
            width: 100%;
            max-width: 1440px;
            margin-inline: auto;
            /* هماهنگ با نسبت تصویر اصلی 1440 × 494 */
            min-height: 494px;
        }

        footer.footer .footer__background {
            object-fit: cover;
            object-position: center;
        }
}

/* =====================================================
   پنل کاربری — مودال ثبت نظر
   انتخاب محصول و امتیاز، تمام اندازه‌ها
   ===================================================== */

:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) > label {
    min-width: 0;
}

/* فیلدهای کشویی نئومورفیسم */
:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    height: auto;
    margin-top: 8px;
    padding: 12px 14px 12px 42px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(15, 76, 69, 0.16);
    border-radius: 13px;
    background-color: #edf2ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f4c45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 18px;
    color: #0f4c45;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    direction: rtl;
    text-align: right;
    box-shadow: inset 3px 3px 7px rgba(45, 68, 56, 0.1), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select:invalid {
        color: #65776b;
    }

    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select:hover {
        border-color: rgba(15, 76, 69, 0.4);
    }

    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select:focus-visible {
        outline: 2px solid #c9a24a;
        outline-offset: 3px;
        border-color: #c9a24a;
    }

    /* رنگ گزینه‌ها در مرورگرهایی که پشتیبانی می‌کنند */
    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select option {
        background: #f0f4ee;
        color: #0f4c45;
        font-family: inherit;
        font-size: 16px;
    }

        :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select option:checked {
            background: #0f4c45;
            color: #ffffff;
        }

    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

@media (prefers-reduced-motion: reduce) {
    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select {
        transition: none;
    }
}

/* =====================================================
   پنل کاربری — کشویی سفارشی ثبت نظر
   ===================================================== */

:is(#reviewModal, #ticketModal) .review-select {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
}

/* فیلد اصلی برای ارسال و اعتبارسنجی حفظ می‌شود */
:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) select.review-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

:is(#reviewModal, #ticketModal) .review-select__trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 76, 69, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, #f5f7f2, #e5ece3);
    color: #0f4c45;
    box-shadow: 4px 4px 10px rgba(45, 68, 56, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.8;
    text-align: right;
    direction: rtl;
    cursor: pointer;
}

:is(#reviewModal, #ticketModal) .review-select__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

:is(#reviewModal, #ticketModal) .review-select__arrow {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

:is(#reviewModal, #ticketModal) .review-select.is-open .review-select__arrow {
    transform: rotate(225deg);
}

:is(#reviewModal, #ticketModal) .review-select__trigger:focus-visible {
    outline: 2px solid #c9a24a;
    outline-offset: 3px;
}

/* داخل جریان فرم باز می‌شود؛ از مودال بیرون نمی‌زند */
:is(#reviewModal, #ticketModal) .review-select__list {
    box-sizing: border-box;
    display: grid;
    gap: 5px;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b6c7b9 #edf2ec;
    margin-top: 10px;
    padding: 7px;
    border: 1px solid rgba(15, 76, 69, 0.13);
    border-radius: 15px;
    background: #f2f5ef;
    box-shadow: inset 2px 2px 6px rgba(45, 68, 56, 0.07), inset -2px -2px 6px rgba(255, 255, 255, 0.9);
}

    :is(#reviewModal, #ticketModal) .review-select__list[hidden] {
        display: none;
    }

:is(#reviewModal, #ticketModal) .review-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #244d3e;
    font-size: 14px;
    line-height: 1.8;
    text-align: right;
    overflow-wrap: anywhere;
    cursor: pointer;
}

    :is(#reviewModal, #ticketModal) .review-select__option.is-active,
    :is(#reviewModal, #ticketModal) .review-select__option:hover {
        background: #e0e9dc;
    }

    :is(#reviewModal, #ticketModal) .review-select__option[aria-selected="true"] {
        background: #0f4c45;
        color: #fff;
    }

        :is(#reviewModal, #ticketModal) .review-select__option[aria-selected="true"]::after {
            content: "✓";
            flex-shrink: 0;
            color: #e4c77e;
        }

    :is(#reviewModal, #ticketModal) .review-select__option[aria-disabled="true"] {
        opacity: 0.45;
        cursor: not-allowed;
    }



/* پنل کاربری — هماهنگی فیلدهای مودال ثبت نظر */
:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) input[name="Title"],
:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) textarea[name="Comment"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 76, 69, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, #f5f7f2, #e5ece3);
    color: #0f4c45;
    box-shadow: 4px 4px 10px rgba(45, 68, 56, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) input[name="Title"] {
    min-height: 50px;
    height: auto;
}

:is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) textarea[name="Comment"] {
    min-height: 150px;
    height: auto;
    resize: vertical;
}

    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) input[name="Title"]:hover,
    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) textarea[name="Comment"]:hover {
        border-color: rgba(15, 76, 69, 0.4);
    }

    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) input[name="Title"]:focus-visible,
    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) textarea[name="Comment"]:focus-visible {
        outline: 2px solid #c9a24a;
        outline-offset: 3px;
        border-color: #c9a24a;
    }

@media (prefers-reduced-motion: reduce) {
    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) input[name="Title"],
    :is(#reviewModal, #ticketModal) :is(#reviewForm, #ticketForm) textarea[name="Comment"] {
        transition: none;
    }
}

/* =====================================================
   پنل کاربری — مودال ایجاد تیکت
   هماهنگ با فرم ثبت نظر
   ===================================================== */

#ticketModal #ticketForm input[name="Subject"],
#ticketModal #ticketForm textarea[name="Description"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 76, 69, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, #f5f7f2, #e5ece3);
    color: #0f4c45;
    box-shadow: 4px 4px 10px rgba(45, 68, 56, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ticketModal #ticketForm input[name="Subject"] {
    min-height: 50px;
    height: auto;
}

#ticketModal #ticketForm textarea[name="Description"] {
    min-height: 150px;
    height: auto;
    resize: vertical;
}

    #ticketModal #ticketForm input[name="Subject"]:hover,
    #ticketModal #ticketForm textarea[name="Description"]:hover {
        border-color: rgba(15, 76, 69, 0.4);
    }

    #ticketModal #ticketForm input[name="Subject"]:focus-visible,
    #ticketModal #ticketForm textarea[name="Description"]:focus-visible {
        outline: 2px solid #c9a24a;
        outline-offset: 3px;
        border-color: #c9a24a;
    }

@media (prefers-reduced-motion: reduce) {
    #ticketModal #ticketForm input[name="Subject"],
    #ticketModal #ticketForm textarea[name="Description"] {
        transition: none;
    }
}

/* دکمه خانه، داخل محدوده محتوای پنل */
.user-content > .user-home-actions {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

    .user-content > .user-home-actions > .user-back-home {
        position: static;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        margin: 0;
        max-width: 100%;
        flex-shrink: 0;
    }

/* =====================================================
   فروشگاه — تنظیم عنوان‌ها و توضیحات کوتاه
   ===================================================== */

main.store-page .hero__copy h1 {
    font-size: clamp(26px, calc(18px + 1.4vw), 42px);
    line-height: 1.65;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

main.store-page .section-head h2,
main.store-page .center-head h2 {
    font-size: clamp(21px, calc(17px + 0.7vw), 29px);
    line-height: 1.7;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* توضیح زیر عنوان اصلی */
main.store-page .hero__copy > p {
    font-size: clamp(14px, calc(13px + 0.2vw), 16px);
    line-height: 1.95;
}

/* توضیح زیر تیتر سکشن‌ها */
main.store-page .section-head > p,
main.store-page .center-head > p {
    font-size: clamp(13px, calc(12px + 0.2vw), 15px);
    line-height: 1.9;
    overflow-wrap: anywhere;
}

/* عنوان و توضیح کارت‌های محصولات منتخب */
main.store-page .product-body h3 {
    font-size: clamp(16px, calc(14px + 0.3vw), 19px);
    line-height: 1.8;
    overflow-wrap: anywhere;
}

main.store-page .product-body > p {
    font-size: clamp(13px, calc(12px + 0.2vw), 15px);
    line-height: 1.9;
    overflow-wrap: anywhere;
}

/* عنوان کارت‌های فهرست محصولات */
main.store-page .store-product-card h3 {
    font-size: clamp(16px, calc(14px + 0.3vw), 19px);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* عنوان و متن مزیت‌های خرید */
main.store-page .why h3 {
    font-size: clamp(16px, calc(14px + 0.3vw), 19px);
    line-height: 1.7;
}

main.store-page .why p {
    font-size: clamp(13px, calc(12px + 0.2vw), 15px);
    line-height: 1.9;
}

@media (width < 1024px) {
    main.store-page .hero__copy h1 br {
        display: none;
    }
}

/* فروشگاه — تیتر دسته‌بندی‌ها در موبایل */
@media (width < 600px) {

    main.store-page #categories .section-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

        main.store-page #categories .section-head > div {
            width: 100%;
            min-width: 0;
        }

        main.store-page #categories .section-head h2 {
            width: 100%;
            max-width: none;
            margin: 0;
            font-size: clamp(20px, 5vw, 24px);
            line-height: 1.7;
            white-space: nowrap;
        }

        main.store-page #categories .section-head > p {
            flex: none;
            width: 100%;
            max-width: none;
            margin: 0;
            font-size: 13px;
            line-height: 1.9;
            text-align: right;
        }
}

/* =====================================================
   فروشگاه — مزیت‌های خرید در موبایل و تبلت
   ===================================================== */

@media (width < 1024px) {

    main.store-page #why .why {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        width: 100%;
        min-width: 0;
    }

        main.store-page #why .why > article {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 100%;
            min-width: 0;
            height: auto;
            padding: 24px 16px;
            text-align: center;
        }

        main.store-page #why .why h3 {
            width: 100%;
            margin: 0;
            font-size: clamp(16px, calc(14px + 0.3vw), 18px);
            line-height: 1.8;
            word-break: normal;
            overflow-wrap: normal;
        }

        main.store-page #why .why p {
            width: 100%;
            margin: 0;
            font-size: 14px;
            line-height: 2;
            word-break: normal;
            overflow-wrap: break-word;
        }

        main.store-page #why .why > article > i {
            flex-shrink: 0;
        }
}

@media (width < 380px) {
    main.store-page #why .why {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =====================================================
   فروشگاه — خبرنامه در تمام پلتفرم‌ها
   ===================================================== */

main.store-page #newsletter {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 620px;
    margin: 28px auto 56px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(15, 76, 69, 0.1);
    border-radius: 22px;
    background: linear-gradient(145deg, #f5f7f2, #e5ece3);
    box-shadow: 7px 8px 18px rgba(45, 68, 56, 0.12), -7px -7px 18px rgba(255, 255, 255, 0.85);
    direction: rtl;
    text-align: center;
}

    main.store-page #newsletter > div {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

        main.store-page #newsletter > div > i {
            color: #0f4c45;
            font-size: 24px;
        }

    main.store-page #newsletter input {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 11px 14px;
        border: 1px solid rgba(15, 76, 69, 0.12);
        border-radius: 13px;
        background: #edf2ec;
        color: #0f4c45;
        box-shadow: inset 3px 3px 7px rgba(45, 68, 56, 0.09), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
        font-family: inherit;
        font-size: 16px;
        line-height: 1.7;
        text-align: right;
    }

        main.store-page #newsletter input::placeholder {
            color: #65776b;
            opacity: 1;
        }

    main.store-page #newsletter button {
        box-sizing: border-box;
        min-height: 48px;
        padding: 11px 22px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 13px;
        background: #0f4c45;
        color: #fff;
        box-shadow: 4px 4px 9px rgba(15, 76, 69, 0.2), inset 1px 1px 2px rgba(255, 255, 255, 0.12);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.7;
    }

    main.store-page #newsletter > small {
        display: block;
        margin-top: 14px;
        color: #52695c;
        font-size: 13px;
        line-height: 1.9;
    }

    main.store-page #newsletter input:disabled {
        opacity: 1;
        -webkit-text-fill-color: #65776b;
        cursor: not-allowed;
    }

    main.store-page #newsletter button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

    main.store-page #newsletter :is(input, button):focus-visible {
        outline: 2px solid #c9a24a;
        outline-offset: 3px;
    }

/* موبایل: دکمه زیر فیلد برای جلوگیری از فشردگی */
@media (width < 600px) {

    main.store-page #newsletter > div {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    main.store-page #newsletter button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* =====================================================
   صفحه خدمات — هرو در موبایل و تبلت
   ===================================================== */

@media (width < 1024px) {

    #services-hero {
        box-sizing: border-box;
        position: relative;
        height: auto;
        min-height: 0;
    }

        /* حفظ تصویر فعلی در پس‌زمینه */
        #services-hero .services-hero__background {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

            #services-hero .services-hero__background > img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: left center;
            }

            /* روشن‌کردن محدوده متن، بدون حذف تصویر */
            #services-hero .services-hero__background::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient( to bottom, rgba(247, 247, 243, 0.25), rgba(247, 247, 243, 0.9) 40%, rgba(247, 247, 243, 0.94) );
            }

        #services-hero .services-hero__content {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            transform: none;
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 680px;
            height: auto;
            min-height: 0;
            margin-inline: auto;
            padding: 140px 24px 48px;
        }

        #services-hero .services-hero__text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            width: 100%;
            max-width: 560px;
            min-width: 0;
            text-align: center;
        }

        #services-hero .services-hero__eyebrow {
            justify-content: center;
            margin: 0;
            font-size: 12px;
            line-height: 1.8;
        }

        #services-hero .services-hero__text h1 {
            margin: 0;
            font-size: clamp(28px, calc(21px + 1.8vw), 39px);
            line-height: 1.7;
            text-align: center;
            text-wrap: balance;
            overflow-wrap: anywhere;
        }

        #services-hero .services-hero__text > p {
            max-width: 460px;
            margin: 0;
            color: #52665c;
            font-size: clamp(14px, calc(13px + 0.2vw), 16px);
            line-height: 2;
            text-align: center;
            overflow-wrap: anywhere;
        }

        #services-hero .services-hero__buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 14px;
            width: 100%;
            margin-top: 8px;
        }

        #services-hero .services-hero__button {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 160px;
            max-width: 220px;
            min-width: 0;
            min-height: 48px;
            height: auto;
            padding: 11px 16px;
            gap: 9px;
            font-size: 14px;
            line-height: 1.8;
            text-align: center;
            white-space: normal;
        }

            #services-hero .services-hero__button > i {
                flex-shrink: 0;
            }

            #services-hero .services-hero__button:focus-visible {
                outline: 3px solid #c9a24a;
                outline-offset: 4px;
            }
}

/* =====================================================
   خدمات — مسیر همکاری عمودی در موبایل و تبلت
   ===================================================== */

@media (width < 1024px) {

    #cooperation-process {
        box-sizing: border-box;
        padding: 40px 22px;
    }

        #cooperation-process .cooperation-process__container {
            width: 100%;
            min-width: 0;
        }

        #cooperation-process .cooperation-process__heading {
            gap: 12px;
        }

        #cooperation-process .cooperation-process__heading-content {
            min-width: 0;
            text-align: center;
        }

        #cooperation-process .cooperation-process__heading h2 {
            font-size: clamp(21px, calc(17px + 0.8vw), 28px);
            line-height: 1.7;
        }

        #cooperation-process .cooperation-process__heading p {
            font-size: 14px;
            line-height: 1.9;
        }

        #cooperation-process .cooperation-process__heading-line {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
            max-width: 60px;
        }

        /* بستر مسیر */
        #cooperation-process .cooperation-process__track {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            width: 100%;
            max-width: 380px;
            min-width: 0;
            height: auto;
            min-height: 0;
            margin: 30px auto 0;
            padding: 0;
            direction: rtl;
            transform: none;
        }

        /* خطوط افقی دسکتاپ در موبایل استفاده نمی‌شوند */
        #cooperation-process .cooperation-route {
            display: none;
        }

        /* هر مرحله: دایره سمت راست، شماره و عنوان کنارش */
        #cooperation-process .cooperation-step {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            transform: none;
            display: grid;
            grid-template-columns: 64px minmax(0, 1fr);
            grid-template-rows: auto auto;
            align-content: start;
            align-items: center;
            column-gap: 20px;
            row-gap: 2px;
            width: 100%;
            min-width: 0;
            height: auto;
            min-height: 96px;
            margin: 0;
            padding: 0 0 24px;
            text-align: right;
        }

            /* خط پیوسته پشت دایره‌ها */
            #cooperation-process .cooperation-step::before {
                content: "";
                position: absolute;
                top: 32px;
                bottom: -32px;
                right: 31px;
                width: 1px;
                background: rgba(201, 162, 74, 0.65);
                pointer-events: none;
            }

        #cooperation-process .cooperation-step--07::before {
            bottom: 0;
        }

        #cooperation-process .cooperation-step__circle {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            transform: none;
            z-index: 1;
            grid-column: 1;
            grid-row: 1 / 3;
            width: 64px;
            height: 64px;
            margin: 0;
            background: #f1f5f1;
        }

            #cooperation-process .cooperation-step__circle > i {
                font-size: 27px;
            }

        #cooperation-process .cooperation-step__number {
            position: static;
            transform: none;
            grid-column: 2;
            grid-row: 1;
            margin: 0;
            color: #947025;
            font-size: 12px;
            line-height: 1.8;
        }

        #cooperation-process .cooperation-step h3 {
            position: static;
            transform: none;
            grid-column: 2;
            grid-row: 2;
            margin: 0;
            font-size: clamp(16px, calc(14px + 0.3vw), 18px);
            line-height: 1.8;
        }

        /* پایان مسیر */
        #cooperation-process .cooperation-finish {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            transform: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: center;
            gap: 12px;
            width: fit-content;
            max-width: 100%;
            min-height: 64px;
            height: auto;
            margin: 16px 0 0;
            padding: 10px 18px;
        }

        #cooperation-process .cooperation-finish__text {
            font-size: 14px;
            line-height: 1.8;
        }
}


/* =====================================================
   خدمات — بنر پایانی «آینده کسب‌وکارتان»
   ===================================================== */

@media (width < 1024px) {

    #future-cta {
        box-sizing: border-box;
        position: relative;
        height: auto;
        min-height: 0;
        padding: 0;
        isolation: isolate;
    }

        #future-cta .future-cta__background {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-position: left center;
            background-size: cover;
        }

        #future-cta .future-cta__overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient( to bottom, rgba(247, 247, 243, 0.92), rgba(247, 247, 243, 0.88) 65%, rgba(247, 247, 243, 0.65) );
        }

        #future-cta .future-cta__content {
            box-sizing: border-box;
            position: relative;
            inset: auto;
            transform: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            width: 100%;
            max-width: 680px;
            height: auto;
            min-height: 0;
            margin-inline: auto;
            padding: 42px 24px;
            text-align: center;
        }

        #future-cta .future-cta__text {
            width: 100%;
            min-width: 0;
            text-align: center;
        }

        #future-cta .future-cta__eyebrow {
            font-size: 12px;
            line-height: 1.9;
        }

        #future-cta h2 {
            margin: 12px 0;
            font-size: clamp(23px, calc(19px + 0.8vw), 30px);
            line-height: 1.8;
            text-wrap: balance;
            overflow-wrap: anywhere;
        }

        #future-cta .future-cta__text > p {
            margin: 0;
            color: #52665c;
            font-size: 14px;
            line-height: 2;
            overflow-wrap: anywhere;
        }

        #future-cta .future-cta__actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 14px;
            width: 100%;
            margin: 0;
        }

        #future-cta .future-cta__button {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 160px;
            max-width: 220px;
            min-width: 0;
            min-height: 48px;
            height: auto;
            padding: 11px 16px;
            gap: 9px;
            font-size: 14px;
            line-height: 1.8;
            white-space: normal;
        }

            #future-cta .future-cta__button > i {
                flex-shrink: 0;
            }

            #cooperation-process .cooperation-finish:focus-visible,
            #future-cta .future-cta__button:focus-visible {
                outline: 3px solid #c9a24a;
                outline-offset: 4px;
            }
}

/* خدمات — وسط‌چین‌کردن مسیر همکاری */
@media (width < 1024px) {

    #cooperation-process .cooperation-process__track {
        width: min(100%, 240px);
        margin-inline: auto;
    }

    #cooperation-process .cooperation-step {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 18px;
    }

    #cooperation-process .cooperation-finish {
        align-self: center;
    }
}

/* خدمات — خوانایی بنر پایانی و وضوح دکمه‌ها */
@media (width < 1024px) {

    #future-cta {
        background: #f3f5ef;
    }

        /* کم‌رنگ‌شدن فقط تصویر */
        #future-cta .future-cta__background {
            z-index: 0;
            opacity: 0.25;
            filter: none;
        }

        #future-cta .future-cta__overlay {
            z-index: 1;
            background: rgba(245, 247, 241, 0.4);
            opacity: 1;
        }

        #future-cta .future-cta__content {
            position: relative;
            z-index: 2;
            opacity: 1;
            filter: none;
        }

        #future-cta h2 {
            color: #0f4c45;
            text-shadow: none;
        }

        #future-cta .future-cta__text > p {
            color: #465e51;
            text-shadow: none;
        }

        /* دکمه تماس روشن و واضح */
        #future-cta .future-cta__button--secondary {
            background: #edf2e9;
            color: #0f4c45;
            border: 1px solid rgba(15, 76, 69, 0.2);
            opacity: 1;
            filter: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

            #future-cta .future-cta__button--secondary span,
            #future-cta .future-cta__button--secondary i {
                color: inherit;
                opacity: 1;
                filter: none;
            }

            #future-cta .future-cta__button--secondary:hover {
                background: #e3ebde;
                color: #0f4c45;
            }
}

/* خدمات — قرارگیری واقعی مراحل روی محور وسط */
@media (width < 1024px) {

    #cooperation-process .cooperation-process__track {
        width: 100%;
        max-width: 380px;
        margin-inline: auto;
        align-items: center;
    }

    #cooperation-process .cooperation-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        width: 100%;
        min-height: 0;
        padding: 0 0 30px;
        text-align: center;
    }

        #cooperation-process .cooperation-step::before {
            top: 32px;
            bottom: -32px;
            right: 50%;
            transform: translateX(50%);
        }

    #cooperation-process .cooperation-step--07::before {
        display: none;
    }

    #cooperation-process .cooperation-step__circle {
        order: 0;
        margin: 0;
    }

    #cooperation-process .cooperation-step__number,
    #cooperation-process .cooperation-step h3 {
        position: relative;
        z-index: 1;
        margin: 0;
        padding-inline: 10px;
        background: #f5f5f3;
        text-align: center;
    }

    #cooperation-process .cooperation-step__number {
        order: 1;
    }

    #cooperation-process .cooperation-step h3 {
        order: 2;
    }

    #cooperation-process .cooperation-finish {
        align-self: center;
        margin-top: 0;
    }
}