/**

 * iOS «Add to Home Screen» فقط — لا يؤثر على Safari العادي.

 * Landing: نفس هيدر landing.css (موبايل) + safe-top تحت الساعة فقط.

 */

@media (display-mode: standalone) {

  :root {

    --safe-top: env(safe-area-inset-top, 0px);

    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --safe-left: env(safe-area-inset-left, 0px);

    --safe-right: env(safe-area-inset-right, 0px);

  }



  /* Dashboard */

  .top-navbar {

    top: var(--safe-top) !important;

    height: var(--topbar-base-h, 70px) !important;

    padding-top: 0 !important;

    padding-left: max(16px, var(--safe-left)) !important;

    padding-right: max(16px, var(--safe-right)) !important;

    box-sizing: border-box !important;

  }



  .news-ticker-wrapper {

    top: calc(var(--topbar-base-h, 70px) + var(--safe-top)) !important;

  }



  body.news-hidden .news-ticker-wrapper {

    top: calc(var(--topbar-base-h, 70px) + var(--safe-top)) !important;

  }



  body:not(.news-hidden) .container {

    padding-top: calc(92px + var(--safe-top)) !important;

  }



  .news-hidden .container {

    padding-top: calc(var(--topbar-base-h, 70px) + var(--safe-top)) !important;

  }



  /* حسابي */

  body > .container {

    padding-top: max(16px, calc(16px + var(--safe-top))) !important;

  }



  body.eedeex-page-parametre .container {

    padding-top: calc(70px + var(--safe-top)) !important;

  }



  body.eedeex-page-parametre.news-hidden .container {

    padding-top: calc(70px + var(--safe-top)) !important;

  }



  body.eedeex-page-parametre #settingsModal.settings-page-panel.modal.active {

    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;

    box-sizing: border-box !important;

  }



  body.eedeex-page-parametre .parametre-page-nav {

    padding-top: calc(10px + var(--safe-top)) !important;

  }



  .ref-shell,

  .wrap {

    padding-top: calc(12px + var(--safe-top)) !important;

  }



  footer {

    padding-bottom: max(20px, calc(20px + var(--safe-bottom))) !important;

  }



  @media (max-width: 768px) {

    .top-navbar {

      height: 52px !important;

    }



    .news-ticker-wrapper {

      top: calc(52px + var(--safe-top)) !important;

    }



    body:not(.news-hidden) .container {

      padding-top: calc(92px + var(--safe-top)) !important;

    }



    .news-hidden .container {

      padding-top: calc(52px + var(--safe-top)) !important;

    }



    body.desktop-tradex:not(.news-hidden) .container {

      padding-top: calc(92px + var(--safe-top)) !important;

    }



    body.desktop-tradex.news-hidden .container {

      padding-top: calc(52px + var(--safe-top)) !important;

    }



    body.eedeex-page-parametre .container,

    body.eedeex-page-parametre.news-hidden .container {

      padding-top: calc(52px + var(--safe-top)) !important;

    }

  }



  @media (max-width: 480px) {

    .top-navbar {

      height: 50px !important;

    }



    .news-ticker-wrapper {

      top: calc(50px + var(--safe-top)) !important;

    }



    body:not(.news-hidden) .container {

      padding-top: calc(86px + var(--safe-top)) !important;

    }



    .news-hidden .container {

      padding-top: calc(50px + var(--safe-top)) !important;

    }



    body.eedeex-page-parametre .container,

    body.eedeex-page-parametre.news-hidden .container {

      padding-top: calc(50px + var(--safe-top)) !important;

    }

  }



  @media (max-width: 900px) {

    .shell > .sidebar {

      top: var(--safe-top) !important;

      padding-top: calc(12px + var(--safe-top)) !important;

    }



    .shell > .main {

      padding-top: max(12px, var(--safe-top)) !important;

      padding-bottom: max(24px, calc(24px + var(--safe-bottom))) !important;

    }

  }

}



/* ===== Landing: هيدر مطابق لصورة Safari (موبايل) ===== */

@media (display-mode: standalone),

       (display-mode: fullscreen) {

  body > header {

    top: 0 !important;

    /* safe-top فقط — الشعار مباشرة تحت شريط الحالة */
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;

    padding-bottom: 8px !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    box-sizing: border-box !important;

    background: rgba(15, 21, 53, 0.95) !important;

  }



  body > header .header-content {

    flex-direction: column !important;

    align-items: center !important;

    gap: 8px !important;

  }



  body > header .header-actions {

    display: none !important;

  }



  body > header .logo {

    width: 100% !important;

    justify-content: center !important;

    font-size: 23px !important;

  }



  body > header nav {

    width: 100% !important;

    min-height: 32px !important;

  }



  body > header nav ul {

    justify-content: center !important;

    width: 100% !important;

  }



  html[dir="rtl"] body > header .header-locale-wrap {

    left: 10px !important;

    right: auto !important;

    top: calc(14px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;

    transform: translateY(-50%) !important;

  }



  html[dir="ltr"] body > header .header-locale-wrap {

    right: 10px !important;

    left: auto !important;

    top: calc(14px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;

    transform: translateY(-50%) !important;

  }



  html[dir="rtl"] body > header nav ul {

    gap: 24px !important;

  }



  html[dir="rtl"] body > header nav a {

    font-size: 0.78rem !important;

    font-weight: 700 !important;

    color: #e0e6ff !important;

  }



  html[dir="rtl"] body > header nav ul li + li::before {

    right: -12px !important;

    height: 14px !important;

    background: rgba(251, 191, 36, 0.55) !important;

  }



  body > header ~ #hero.hero,

  body > header + .hero {

    /* ارتفاع الهيدر فقط — لا تكرار safe-top؛ المحتوى من أعلى وليس في منتصف الشاشة */
    min-height: auto !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

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

    padding-bottom: 40px !important;

  }

}



/* نسخة احتياطية + iOS قديم */

html.pwa-standalone {

  --safe-top: env(safe-area-inset-top, 0px);

  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --safe-left: env(safe-area-inset-left, 0px);

  --safe-right: env(safe-area-inset-right, 0px);

}



html.pwa-standalone .top-navbar {

  top: var(--safe-top) !important;

  height: var(--topbar-base-h, 70px) !important;

  padding-top: 0 !important;

  padding-left: max(16px, var(--safe-left)) !important;

  padding-right: max(16px, var(--safe-right)) !important;

  box-sizing: border-box !important;

}



html.pwa-standalone .news-ticker-wrapper {

  top: calc(var(--topbar-base-h, 70px) + var(--safe-top)) !important;

}



html.pwa-standalone body.news-hidden .news-ticker-wrapper {

  top: calc(var(--topbar-base-h, 70px) + var(--safe-top)) !important;

}



html.pwa-standalone body:not(.news-hidden) .container {

  padding-top: calc(92px + var(--safe-top)) !important;

}



html.pwa-standalone .news-hidden .container {

  padding-top: calc(var(--topbar-base-h, 70px) + var(--safe-top)) !important;

}



html.pwa-standalone body > header {

  top: 0 !important;

  padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;

  padding-bottom: 8px !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

  box-sizing: border-box !important;

  background: rgba(15, 21, 53, 0.95) !important;

}



html.pwa-standalone body > header .header-content {

  flex-direction: column !important;

  align-items: center !important;

  gap: 8px !important;

}



html.pwa-standalone body > header .header-actions {

  display: none !important;

}



html.pwa-standalone body > header .logo {

  width: 100% !important;

  justify-content: center !important;

  font-size: 23px !important;

}



html.pwa-standalone body > header nav {

  width: 100% !important;

  min-height: 32px !important;

}



html.pwa-standalone body > header nav ul {

  justify-content: center !important;

  width: 100% !important;

}



html.pwa-standalone[dir="rtl"] body > header .header-locale-wrap,

html.pwa-standalone html[dir="rtl"] body > header .header-locale-wrap {

  left: 10px !important;

  right: auto !important;

  top: calc(14px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;

  transform: translateY(-50%) !important;

}



html.pwa-standalone[dir="ltr"] body > header .header-locale-wrap,

html.pwa-standalone html[dir="ltr"] body > header .header-locale-wrap {

  right: 10px !important;

  left: auto !important;

  top: calc(14px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;

  transform: translateY(-50%) !important;

}



html.pwa-standalone[dir="rtl"] body > header nav ul,

html.pwa-standalone html[dir="rtl"] body > header nav ul {

  gap: 24px !important;

}



html.pwa-standalone[dir="rtl"] body > header nav a,

html.pwa-standalone html[dir="rtl"] body > header nav a {

  font-size: 0.78rem !important;

  font-weight: 700 !important;

  color: #e0e6ff !important;

}



html.pwa-standalone[dir="rtl"] body > header nav ul li + li::before,

html.pwa-standalone html[dir="rtl"] body > header nav ul li + li::before {

  right: -12px !important;

  height: 14px !important;

  background: rgba(251, 191, 36, 0.55) !important;

}



html.pwa-standalone body > header ~ #hero.hero,

html.pwa-standalone body > header + .hero {

  min-height: auto !important;

  align-items: flex-start !important;

  justify-content: flex-start !important;

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

  padding-bottom: 40px !important;

}



html.pwa-standalone body > .container {

  padding-top: max(16px, calc(16px + var(--safe-top))) !important;

}



html.pwa-standalone body.eedeex-page-parametre .container,

html.pwa-standalone body.eedeex-page-parametre.news-hidden .container {

  padding-top: calc(70px + var(--safe-top)) !important;

}



html.pwa-standalone body.eedeex-page-parametre #settingsModal.settings-page-panel.modal.active {

  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;

  box-sizing: border-box !important;

}



html.pwa-standalone body.eedeex-page-parametre .parametre-page-nav {

  padding-top: calc(10px + var(--safe-top)) !important;

}



html.pwa-standalone .ref-shell,

html.pwa-standalone .wrap {

  padding-top: calc(12px + var(--safe-top)) !important;

}



html.pwa-standalone footer {

  padding-bottom: max(20px, calc(20px + var(--safe-bottom))) !important;

}



/* صفحة سيولة EDX */

html.pwa-standalone body.eedeex-page-liquidity {

  min-height: calc(var(--vh, 1vh) * 100);

  min-height: 100dvh;

}



html.pwa-standalone body.eedeex-page-liquidity .top-bar {

  padding-top: max(10px, var(--safe-top, env(safe-area-inset-top, 0px))) !important;

  padding-left: max(12px, var(--safe-left, env(safe-area-inset-left, 0px))) !important;

  padding-right: max(12px, var(--safe-right, env(safe-area-inset-right, 0px))) !important;

}



html.pwa-standalone body.eedeex-page-liquidity .bottom-fixed {

  padding-bottom: max(10px, calc(10px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)))) !important;

}



@media (max-width: 768px) {

  html.pwa-standalone .top-navbar {

    height: 52px !important;

  }



  html.pwa-standalone .news-ticker-wrapper {

    top: calc(52px + var(--safe-top)) !important;

  }



  html.pwa-standalone body:not(.news-hidden) .container {

    padding-top: calc(92px + var(--safe-top)) !important;

  }



  html.pwa-standalone .news-hidden .container {

    padding-top: calc(52px + var(--safe-top)) !important;

  }



  html.pwa-standalone body.eedeex-page-parametre .container,

  html.pwa-standalone body.eedeex-page-parametre.news-hidden .container {

    padding-top: calc(52px + var(--safe-top)) !important;

  }

}



@media (max-width: 480px) {

  html.pwa-standalone .top-navbar {

    height: 50px !important;

  }



  html.pwa-standalone .news-ticker-wrapper {

    top: calc(50px + var(--safe-top)) !important;

  }



  html.pwa-standalone body:not(.news-hidden) .container {

    padding-top: calc(86px + var(--safe-top)) !important;

  }



  html.pwa-standalone .news-hidden .container {

    padding-top: calc(50px + var(--safe-top)) !important;

  }



  html.pwa-standalone body.eedeex-page-parametre .container,

  html.pwa-standalone body.eedeex-page-parametre.news-hidden .container {

    padding-top: calc(50px + var(--safe-top)) !important;

  }

}