/* MIDZ Arabic mobile hotfix
 * Loaded only for Arabic and after the critical header CSS.
 * Purpose: keep English untouched while making the Arabic mobile header
 * use the same scroll behaviour with RTL placement.
 */

html[lang="ar"][dir="rtl"] .scroll-to-show-menu {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Keep the Arabic mobile footer compact like the original layout.  The base
   responsive stylesheet gives footer columns and contact links generous
   desktop spacing, which creates the oversized gaps seen on phones. */
@media (max-width: 767px) {
  html[dir="rtl"] .footer-area .footer-top > .row,
  html[dir="rtl"] .footer-area .footer-widgets-row {
    row-gap: 28px !important;
  }

  html[dir="rtl"] .footer-contact-infos,
  html[dir="rtl"] .footer-contact-infos .footer-widget-top,
  html[dir="rtl"] .footer-contact-infos .footer-widget-top .links {
    gap: 4px !important;
    margin: 0 !important;
  }

  html[dir="rtl"] .regional-phones--footer {
    gap: 4px !important;
    margin: 0 !important;
  }

  html[dir="rtl"] .regional-phones--footer .regional-phone-item {
    gap: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  html[dir="rtl"] .regional-phones--footer .regional-phone-code,
  html[dir="rtl"] .regional-phones--footer .regional-phone-number,
  html[dir="rtl"] .footer-contact-infos .footer-email-item {
    line-height: 1.25 !important;
    margin: 0 !important;
  }
}

@media (max-width: 991px) {
  /* Keep a single mobile menu trigger, matching the English header:
   * the inline/header-slot hamburger must never be shown. The floating
   * scroll menu below remains hidden at the top and appears after scroll. */
  html[lang="ar"][dir="rtl"] .header-menu-wrap .midz-header-slot-menu,
  html[lang="ar"][dir="rtl"] .header-menu-wrap .header-right-info .midz-header-slot-menu.hamburg-menu,
  html[lang="ar"][dir="rtl"] body.midz-scrolled-menu .header-menu-wrap .midz-header-slot-menu.hamburg-menu,
  html[lang="ar"][dir="rtl"] body.menu-open .header-menu-wrap .midz-header-slot-menu.hamburg-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0) !important;
  }

  /* At the top the portfolio/download arrow occupies the left RTL slot.
   * After scroll, the hamburger replaces it in exactly that side slot. */
  html[lang="ar"][dir="rtl"] .scroll-to-show-menu .hamburg-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: max(18px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    top: calc(max(10px, env(safe-area-inset-top, 0px)) + 9px) !important;
    pointer-events: auto !important;
    transform: scale(0) !important;
    transform-origin: center !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-scrolled-menu .scroll-to-show-menu .hamburg-menu,
  html[lang="ar"][dir="rtl"] body.menu-open .scroll-to-show-menu .hamburg-menu,
  html[lang="ar"][dir="rtl"] .scroll-to-show-menu.is-visible .hamburg-menu {
    transform: scale(1) !important;
  }

  html[lang="ar"][dir="rtl"] body:not(.midz-scrolled-menu):not(.menu-open) .scroll-to-show-menu:not(.is-visible) .hamburg-menu {
    transform: scale(0) !important;
  }

  /* Keep the Arabic drawer RTL, but let the panel itself enter from the
   * right side. No image/icon is mirrored. */
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap:not(.active) .header-sidebar-content {
    transform: translate3d(100%, 0, 0) !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap.active .header-sidebar-content {
    transform: translate3d(0, 0, 0) !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .close-header-sidebar {
    left: 20px !important;
    right: auto !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
    left: -88px !important;
    right: auto !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
    direction: rtl !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-top,
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu,
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .midz-language-switch-wrap,
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-bottom {
    position: relative !important;
    z-index: 2 !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu ul {
    align-items: flex-start !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu ul li a {
    text-align: right !important;
    font-family: var(--midz-arabic-font, "Cairo", sans-serif) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu ul li a::before {
    left: auto !important;
    right: 0 !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu ul li a:hover,
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu ul li a.active {
    padding-left: 0 !important;
    padding-right: 20px !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .midz-language-switch-wrap,
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-bottom ul {
    justify-content: flex-start !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .midz-language-switch {
    font-family: var(--midz-arabic-font, "Cairo", sans-serif) !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .midz-language-switch::before {
    display: none !important;
    content: none !important;
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
    width: min(480px, 78vw) !important;
    max-width: 480px !important;
    gap: clamp(32px, 6vh, 64px) !important;
  }

  html[lang="ar"][dir="rtl"] .scroll-to-show-menu .hamburg-menu {
    left: max(24px, env(safe-area-inset-left, 0px)) !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .close-header-sidebar {
    left: 22px !important;
    right: auto !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
    left: -100px !important;
    right: auto !important;
  }
}