/*
|--------------------------------------------------------------------------
| منوی ساده موبایل
|--------------------------------------------------------------------------
| گزینه‌ها:
| خانه، فروشگاه، سفارشات، مقالات، نمونه‌کارها و تماس با ما
|--------------------------------------------------------------------------
*/

/* بخش‌های قدیمی و شلوغ منو */
.simple-mobile-menu .drawer-glow,
.simple-mobile-menu .drawer-hero,
.simple-mobile-menu .drawer-main-actions,
.simple-mobile-menu .drawer-section-title,
.simple-mobile-menu .drawer-service-pills,
.simple-mobile-menu .drawer-social-mini,
.simple-mobile-menu .drawer-contact-card {
  display: none !important;
}

@media (max-width: 760px) {

  /*
  |--------------------------------------------------------------------------
  | لایه تیره پشت منو
  |--------------------------------------------------------------------------
  */

  .drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99998 !important;

    background: rgba(3, 20, 18, 0.58) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;

    transition:
      opacity 0.15s ease,
      visibility 0.15s ease !important;
  }

  .drawer-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
  |--------------------------------------------------------------------------
  | بدنه اصلی منو
  |--------------------------------------------------------------------------
  */

  .nav-drawer,
  .nav-drawer.premium-site-menu,
  .nav-drawer.simple-mobile-menu,
  .nav-drawer.premium-site-menu.simple-mobile-menu {
    position: fixed !important;

    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;

    width: calc(100vw - 16px) !important;
    max-width: 390px !important;
    height: auto !important;
    max-height: calc(100dvh - 16px) !important;

    z-index: 99999 !important;

    margin: 0 !important;
    padding: 12px !important;
    padding-bottom: calc(
      14px + env(safe-area-inset-bottom, 0px)
    ) !important;

    border: 1px solid #dfe8e5 !important;
    border-radius: 22px !important;

    background: #f7faf9 !important;
    background-image: none !important;

    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.24) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;

    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;

    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;

    isolation: auto !important;
    contain: none !important;

    transition:
      opacity 0.14s ease,
      visibility 0.14s ease !important;
  }

  .nav-drawer.open,
  .nav-drawer.premium-site-menu.open,
  .nav-drawer.simple-mobile-menu.open,
  .nav-drawer.premium-site-menu.simple-mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .nav-drawer::before,
  .nav-drawer::after,
  .nav-drawer.premium-site-menu::before,
  .nav-drawer.premium-site-menu::after,
  .nav-drawer.simple-mobile-menu::before,
  .nav-drawer.simple-mobile-menu::after {
    display: none !important;
    content: none !important;
  }

  /*
  |--------------------------------------------------------------------------
  | هدر منو
  |--------------------------------------------------------------------------
  */

  .simple-drawer-top {
    min-height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    margin: 0 0 12px !important;
    padding: 2px 2px 12px !important;

    border-bottom: 1px solid
      color-mix(
        in srgb,
        var(--line) 80%,
        transparent
      ) !important;
  }

  .simple-drawer-top .drawer-brand {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px !important;
  }

  .simple-drawer-top .brand-mark {
    flex: 0 0 43px !important;

    width: 43px !important;
    height: 43px !important;

    border-radius: 14px !important;
  }

  .simple-drawer-top .brand-mark svg {
    width: 26px !important;
    height: 26px !important;
  }

  .simple-drawer-top .brand-text {
    min-width: 0 !important;
  }

  .simple-drawer-top .brand-text strong {
    display: block !important;

    color: var(--primary-2) !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
  }

  .simple-drawer-top .brand-text small {
    display: block !important;

    margin-top: 1px !important;

    color: var(--muted) !important;

    font-size: 9.5px !important;
    line-height: 1.4 !important;
  }

  /*
  |--------------------------------------------------------------------------
  | دکمه بستن
  |--------------------------------------------------------------------------
  */

  .simple-mobile-menu .drawer-close {
    flex: 0 0 42px !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid var(--line) !important;
    border-radius: 14px !important;

    color: var(--primary-2) !important;
    background: var(--surface) !important;

    box-shadow: 0 8px 20px rgba(6, 47, 43, 0.06) !important;

    cursor: pointer !important;
  }

  .simple-mobile-menu .drawer-close svg {
    width: 21px !important;
    height: 21px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /*
  |--------------------------------------------------------------------------
  | فهرست لینک‌ها
  |--------------------------------------------------------------------------
  */

  .drawer-links-simple {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    max-height: none !important;
  }

  /*
  |--------------------------------------------------------------------------
  | ردیف‌های منو
  |--------------------------------------------------------------------------
  */

  .drawer-links-simple .simple-drawer-link {
    position: relative !important;

    min-height: 55px !important;

    display: grid !important;
    grid-template-columns:
      40px
      minmax(0, 1fr)
      26px !important;

    align-items: center !important;

    gap: 9px !important;

    padding: 7px 10px !important;

    direction: rtl !important;

    border: 1px solid
      color-mix(
        in srgb,
        var(--line) 87%,
        rgba(255, 255, 255, 0.18)
      ) !important;

    border-radius: 16px !important;

    color: var(--primary-2) !important;

    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--surface) 96%, transparent),
        color-mix(in srgb, var(--surface-2) 90%, transparent)
      ) !important;

    box-shadow:
      0 7px 20px rgba(6, 47, 43, 0.045) !important;

    overflow: hidden !important;

    transition:
      border-color 0.18s ease,
      background 0.18s ease,
      box-shadow 0.18s ease !important;
  }

  .drawer-links-simple .simple-drawer-link::before {
    content: "" !important;

    position: absolute !important;

    top: 11px !important;
    right: 0 !important;
    bottom: 11px !important;

    width: 3px !important;

    border-radius: 999px 0 0 999px !important;

    background: var(--accent-2) !important;

    opacity: 0 !important;

    transition: opacity 0.18s ease !important;
  }

  .drawer-links-simple .simple-drawer-link:hover {
    border-color: rgba(248, 215, 103, 0.55) !important;

    box-shadow:
      0 10px 25px rgba(6, 47, 43, 0.07) !important;
  }

  /*
  |--------------------------------------------------------------------------
  | گزینه فعال
  |--------------------------------------------------------------------------
  */

  .drawer-links-simple .simple-drawer-link.active {
    border-color: rgba(248, 215, 103, 0.65) !important;

    background:
      linear-gradient(
        135deg,
        rgba(248, 215, 103, 0.16),
        color-mix(in srgb, var(--surface) 94%, transparent)
      ) !important;
  }

  .drawer-links-simple .simple-drawer-link.active::before {
    opacity: 1 !important;
  }

  /*
  |--------------------------------------------------------------------------
  | آیکن گزینه‌ها
  |--------------------------------------------------------------------------
  */

  .drawer-links-simple .simple-drawer-link .drawer-icon {
    width: 38px !important;
    height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(248, 215, 103, 0.32) !important;
    border-radius: 12px !important;

    color: var(--primary-2) !important;

    background:
      linear-gradient(
        180deg,
        rgba(248, 215, 103, 0.18),
        rgba(248, 215, 103, 0.06)
      ),
      var(--surface-2) !important;

    box-shadow:
      0 6px 16px rgba(6, 47, 43, 0.05) !important;
  }

  .drawer-links-simple .simple-drawer-link .drawer-icon svg {
    width: 20px !important;
    height: 20px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /*
  |--------------------------------------------------------------------------
  | عنوان گزینه‌ها
  |--------------------------------------------------------------------------
  */

  .drawer-links-simple .drawer-link-text {
    min-width: 0 !important;
    display: block !important;
  }

  .drawer-links-simple .drawer-link-text strong {
    display: block !important;

    color: var(--primary-2) !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .drawer-links-simple .drawer-link-text small {
    display: none !important;
  }

  /*
  |--------------------------------------------------------------------------
  | فلش انتهای گزینه‌ها
  |--------------------------------------------------------------------------
  */

  .drawer-links-simple .simple-drawer-link em {
    width: 26px !important;
    height: 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--muted) !important;

    font-style: normal !important;
  }

  .drawer-links-simple .simple-drawer-link em svg {
    width: 16px !important;
    height: 16px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /*
  |--------------------------------------------------------------------------
  | جلوگیری از افتادن عناصر ثابت روی منو
  |--------------------------------------------------------------------------
  */

  body.menu-open {
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  body.menu-open .nav-drawer {
    touch-action: auto !important;
  }

  body.menu-open .mobile-bottom-nav,
  body.menu-open .quick-call-fab,
  body.menu-open .to-top,
  body.menu-open .review-fab,
  body.menu-open .floating-menu-fab,
  body.menu-open .v51-mobile-buy {
    display: none !important;
  }

  /*
  |--------------------------------------------------------------------------
  | صفحه محصول: جلوگیری از تداخل تماس و افزودن به سبد
  |--------------------------------------------------------------------------
  */

  body[data-view="product.php"] {
    padding-bottom:
      calc(172px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-view="product.php"] .v51-mobile-buy {
    right: 10px !important;
    left: 10px !important;

    bottom:
      calc(78px + env(safe-area-inset-bottom, 0px)) !important;

    z-index: 960 !important;

    min-height: 58px !important;

    padding: 8px 10px !important;

    border-radius: 18px !important;
  }

  body[data-view="product.php"] .quick-call-fab {
    left: 12px !important;

    bottom:
      calc(146px + env(safe-area-inset-bottom, 0px)) !important;

    z-index: 955 !important;

    width: 46px !important;
    height: 46px !important;

    padding: 6px !important;

    border-radius: 16px !important;
  }

  body[data-view="product.php"] .quick-call-fab span {
    display: none !important;
  }

  body[data-view="product.php"] .quick-call-fab b {
    width: 34px !important;
    height: 34px !important;

    border-radius: 12px !important;
  }
}

/*
|--------------------------------------------------------------------------
| موبایل‌های بسیار کوچک
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

  .nav-drawer,
  .nav-drawer.premium-site-menu,
  .nav-drawer.simple-mobile-menu,
  .nav-drawer.premium-site-menu.simple-mobile-menu {
    top: 6px !important;
    right: 6px !important;

    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;

    padding: 10px !important;

    border-radius: 20px !important;
  }

  .simple-drawer-top {
    min-height: 52px !important;

    margin-bottom: 9px !important;
    padding-bottom: 9px !important;
  }

  .simple-drawer-top .brand-mark {
    flex-basis: 39px !important;

    width: 39px !important;
    height: 39px !important;
  }

  .simple-drawer-top .brand-text strong {
    font-size: 13px !important;
  }

  .simple-drawer-top .brand-text small {
    font-size: 9px !important;
  }

  .simple-mobile-menu .drawer-close {
    flex-basis: 39px !important;

    width: 39px !important;
    height: 39px !important;
  }

  .drawer-links-simple {
    gap: 6px !important;
  }

  .drawer-links-simple .simple-drawer-link {
    min-height: 52px !important;

    grid-template-columns:
      36px
      minmax(0, 1fr)
      23px !important;

    gap: 8px !important;

    padding: 6px 8px !important;

    border-radius: 14px !important;
  }

  .drawer-links-simple .simple-drawer-link .drawer-icon {
    width: 35px !important;
    height: 35px !important;

    border-radius: 11px !important;
  }

  .drawer-links-simple .drawer-link-text strong {
    font-size: 12.5px !important;
  }

  body[data-view="product.php"] .v51-mobile-buy button {
    padding-inline: 11px !important;
    font-size: 10.5px !important;
  }
}

/*
|--------------------------------------------------------------------------
| حالت تاریک
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

  html[data-theme="dark"] .nav-drawer,
  html[data-theme="dark"] .nav-drawer.premium-site-menu,
  html[data-theme="dark"] .nav-drawer.simple-mobile-menu,
  html[data-theme="dark"]
    .nav-drawer.premium-site-menu.simple-mobile-menu {
    background: #102622 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
  }

  html[data-theme="dark"]
    .drawer-links-simple
    .simple-drawer-link {
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--surface) 86%, rgba(255, 255, 255, 0.025)),
        color-mix(in srgb, var(--surface-2) 82%, rgba(255, 255, 255, 0.02))
      ) !important;
  }

  html[data-theme="dark"]
    .drawer-links-simple
    .simple-drawer-link
    .drawer-icon {
    color: var(--accent) !important;
    background: rgba(248, 215, 103, 0.09) !important;
  }
}