/* EVI.AZ MOBILE BOTTOM NAV CSS
   Extracted from body partial to prevent late style application. */

/* =========================================================
   EVI.AZ MOBILE BOTTOM NAV — COMPACT GLASS V2
========================================================= */

@media (max-width: 991.98px){
  #eviMobileBottomNav{
    box-sizing:border-box !important;
    font-family:inherit !important;
    color:inherit !important;

    isolation:isolate !important;

    border:0 !important;
    background:transparent !important;

    transform:none !important;
  }

  #eviMobileBottomNav *,
  #eviMobileBottomNav *::before,
  #eviMobileBottomNav *::after{
    box-sizing:border-box !important;
  }


  body:has(#eviMobileBottomNav){
    padding-bottom:
      calc(
        55px
        +
        env(safe-area-inset-bottom)
      );
  }

  #eviMobileBottomNav{
    position:fixed;

    left:8px;
    right:8px;
    bottom:
      max(
        5px,
        env(safe-area-inset-bottom)
      );

    z-index:100300;

    margin:0;

    border:0;
    background:transparent;

    pointer-events:none;
  }

  #eviMobileBottomNav .nav-wrap{
    position:relative;

    width:100%;
    min-height:60px;

    padding:4px 4px;

    display:grid;
    grid-template-columns:
      repeat(5,minmax(0,1fr));
    align-items:center;
    gap:1px;

    border:
      1px solid
      rgba(255,255,255,.70);

    border-radius:17px;

    background:
      rgba(255,255,255,.70);

    box-shadow:
      0 7px 22px
      rgba(17,24,39,.11),
      inset 0 1px 0
      rgba(255,255,255,.72);

    backdrop-filter:
      blur(22px)
      saturate(145%);

    -webkit-backdrop-filter:
      blur(22px)
      saturate(145%);

    overflow:visible;

    pointer-events:auto;
  }

  #eviMobileBottomNav .nav-item{
    position:relative;

    min-width:0;
    min-height:40px;

    padding:1px 1px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;

    border-radius:13px;

    color:#7d878f;

    text-decoration:none;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      color .16s ease,
      background .16s ease,
      transform .16s ease;
  }

  #eviMobileBottomNav a.nav-item:active{
    transform:scale(.96);
  }

  #eviMobileBottomNav .nav-icon{
    position:relative;

    width:27px;
    height:22px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:inherit;

    font-size:20px;
    line-height:1;

    transition:
      background .16s ease,
      color .16s ease,
      transform .16s ease;
  }

  #eviMobileBottomNav .nav-item small{
    display:block;

    max-width:100%;

    overflow:hidden;

    color:inherit;

    font-size:7.3px;
    line-height:1;
    font-weight:760;

    text-overflow:ellipsis;
    white-space:nowrap;

    letter-spacing:-.05px;
  }

  /*
   * Hansı bölmədəsə icon + text teal olur.
   */
  #eviMobileBottomNav .nav-item.active{
    color:#008f82;
  }

  #eviMobileBottomNav .nav-item.active .nav-icon{
    background:
      rgba(0,158,142,.10);

    color:#009e8e;
  }

  /* =======================================================
     CENTER ADD — daha aşağı və daha yığcam
  ======================================================= */

  #eviMobileBottomNav .nav-center-item{
    position:relative;

    padding:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;

    background:transparent !important;

    color:#69747c;
  }

  #eviMobileBottomNav .nav-center{
    width:44px;
    height:44px;

    /*
     * Düymə artıq barın üstündən çox çıxmır.
     * "Yeni elan" yazısının sadəcə bir az üstündə qalır.
     */
    margin-top:-2px;
    margin-bottom:0;

    display:grid;
    place-items:center;

    border:
      3px solid
      rgba(247,249,250,.97);

    border-radius:13px;

    background:
      linear-gradient(
        135deg,
        #ff4d4f,
        #e53935
      );

    color:#fff;

    text-decoration:none;

    box-shadow:
      0 6px 16px
      rgba(229,57,53,.28);

    font-size:18px;

    transition:
      transform .16s ease,
      box-shadow .16s ease;
  }

  #eviMobileBottomNav .nav-center:active{
    transform:scale(.95);

    box-shadow:
      0 4px 11px
      rgba(0,158,142,.21);
  }

  #eviMobileBottomNav .nav-center-item small{
    margin-top:0;

    color:#66727a;

    font-size:8.6px;
    line-height:11px;
    font-weight:900;
  }

  /* =======================================================
     MESSAGE BADGE
  ======================================================= */

  #eviMobileBottomNav .nav-icon-with-badge{
    overflow:visible;
  }

  #eviMobileBottomNav .nav-message-badge{
    position:absolute;

    top:-5px;
    right:-6px;

    min-width:16px;
    height:16px;

    padding:0 4px;

    display:none;
    align-items:center;
    justify-content:center;

    border:
      2px solid
      rgba(255,255,255,.97);

    border-radius:999px;

    background:#ff3b30;
    color:#fff;

    font-size:7px;
    line-height:1;
    font-weight:950;

    box-shadow:
      0 2px 7px
      rgba(255,59,48,.20);
  }

  #eviMobileBottomNav .nav-message-badge.show{
    display:flex;
  }

  /* =======================================================
     ACTIVE STATE — GLOBAL CSS CONFLICT SAFE
  ======================================================= */

  /*
   * Default rəng bütün nav item-lərdə eyni.
   */
  #eviMobileBottomNav .nav-wrap > a.nav-item{
    color:#7d878f !important;
  }

  #eviMobileBottomNav .nav-wrap > a.nav-item .nav-icon,
  #eviMobileBottomNav .nav-wrap > a.nav-item .nav-icon i,
  #eviMobileBottomNav .nav-wrap > a.nav-item small{
    color:inherit !important;
  }

  /*
   * Aktiv route: icon + text teal.
   */
  #eviMobileBottomNav .nav-wrap > a.nav-item.active,
  #eviMobileBottomNav .nav-wrap > a.nav-item[aria-current="page"]{
    color:#009e8e !important;
  }

  #eviMobileBottomNav .nav-wrap > a.nav-item.active .nav-icon,
  #eviMobileBottomNav .nav-wrap > a.nav-item[aria-current="page"] .nav-icon{
    color:#009e8e !important;
    background:rgba(0,158,142,.12) !important;
  }

  #eviMobileBottomNav .nav-wrap > a.nav-item.active .nav-icon i,
  #eviMobileBottomNav .nav-wrap > a.nav-item[aria-current="page"] .nav-icon i{
    color:#009e8e !important;
  }

  #eviMobileBottomNav .nav-wrap > a.nav-item.active small,
  #eviMobileBottomNav .nav-wrap > a.nav-item[aria-current="page"] small{
    color:#009e8e !important;
    font-weight:900 !important;
  }

  /*
   * Köhnə global CSS-dəki aşağı xətti söndürürük.
   * Aktivliyi yalnız icon + text rəngi ilə göstəririk.
   */
  #eviMobileBottomNav .nav-wrap > a.nav-item.active::after,
  #eviMobileBottomNav .nav-wrap > a.nav-item[aria-current="page"]::after{
    display:none !important;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 390px){

  body:has(#eviMobileBottomNav){
    padding-bottom:
      calc(
        52px
        +
        env(safe-area-inset-bottom)
      );
  }

  #eviMobileBottomNav{
    left:6px;
    right:6px;
    bottom:
      max(
        4px,
        env(safe-area-inset-bottom)
      );
  }

  #eviMobileBottomNav .nav-wrap{
    min-height:45px;

    padding:
      1px
      3px;

    border-radius:18px;
  }

  #eviMobileBottomNav .nav-item{
    min-height:39px;
  }

  #eviMobileBottomNav .nav-icon{
    width:26px;
    height:21px;

    font-size:20px;
  }

  #eviMobileBottomNav .nav-item small{
    font-size:10px;
  }

  #eviMobileBottomNav .nav-center{
    width:38px;
    height:38px;

    margin-top:-1px;

    border-radius:12px;
  }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px){
  #eviMobileBottomNav{
    display:none !important;
  }
}


/* =========================================================
   FORCE CENTER ADD POSITION
   Köhnə/global CSS-i qəti şəkildə üstələyir
========================================================= */
@media (max-width: 991.98px){

  #eviMobileBottomNav .nav-wrap > .nav-center-item{
    min-height:40px !important;
    height:40px !important;

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

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:1px !important;

    overflow:visible !important;
  }

  #eviMobileBottomNav .nav-wrap > .nav-center-item > .nav-center{
    position:relative !important;

    top:0 !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

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

    margin:0 0 1px 0 !important;

    transform:none !important;

    display:grid !important;
    place-items:center !important;

    border:3px solid rgba(247,249,250,.97) !important;
    border-radius:12px !important;

    background:
      linear-gradient(
        135deg,
        #ff4d4f,
        #e53935
      ) !important;

    color:#fff !important;

    box-shadow:
      0 5px 15px
      rgba(229,57,53,.28) !important;

    font-size:17px !important;
    line-height:1 !important;
  }


  #eviMobileBottomNav .nav-wrap > .nav-center-item > small{
    position:static !important;

    display:block !important;

    margin:0 !important;
    padding:0 0 1px 0 !important;

    min-height:10px !important;
    height:10px !important;

    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;

    transform:none !important;

    color:#66727a !important;

    font-size:8.5px !important;
    line-height:10px !important;
    font-weight:900 !important;
  }
}

@media (max-width:390px){

  #eviMobileBottomNav .nav-wrap > .nav-center-item{
    min-height:39px !important;
    height:39px !important;
  }

  #eviMobileBottomNav .nav-wrap > .nav-center-item > .nav-center{
    width:38px !important;
    height:38px !important;
  }

  #eviMobileBottomNav .nav-wrap > .nav-center-item > small{
    font-size:8.2px !important;
  }
}

/* =========================================================
   FINAL NAMESPACE GUARD
   Bu qaydalar digər global CSS-lərdən daha yüksək spesifiklikdədir.
========================================================= */
@media (max-width:991.98px){

  html body #eviMobileBottomNav.evi-mobile-bottom-nav{
    position:fixed !important;

    left:8px !important;
    right:8px !important;
    bottom:max(5px, env(safe-area-inset-bottom)) !important;

    width:auto !important;
    height:auto !important;

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

    z-index:100300 !important;

    overflow:visible !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav > .nav-wrap{
    width:100% !important;
    min-height:50px !important;
    height:auto !important;

    margin:0 !important;
    padding:1px 4px !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:center !important;
    gap:1px !important;

    overflow:visible !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-item{
    min-height:40px !important;
    height:auto !important;

    margin:0 !important;
    padding:1px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center-item{
    min-height:44px !important;
    height:44px !important;

    justify-content:flex-end !important;

    overflow:visible !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center{
    position:relative !important;

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

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

    margin:0 0 1px 0 !important;
    padding:0 !important;

    transform:none !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center > i{
    font-size:19px !important;
    line-height:1 !important;
    color:#fff !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center-item > small{
    position:static !important;

    display:block !important;

    min-height:10px !important;
    height:10px !important;

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

    overflow:visible !important;

    font-size:8.5px !important;
    line-height:10px !important;
    font-weight:900 !important;

    white-space:nowrap !important;
  }
}

@media (max-width:390px){

  html body #eviMobileBottomNav.evi-mobile-bottom-nav{
    left:6px !important;
    right:6px !important;
    bottom:max(4px, env(safe-area-inset-bottom)) !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav > .nav-wrap{
    min-height:48px !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center-item{
    min-height:43px !important;
    height:43px !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center{
    width:38px !important;
    height:38px !important;
  }

  html body #eviMobileBottomNav.evi-mobile-bottom-nav .nav-center-item > small{
    min-height:10px !important;
    height:10px !important;

    font-size:8.2px !important;
    line-height:10px !important;
    font-weight:900 !important;
  }
}


@media (max-width:991.98px){
  body.evi-has-mobile-bottom-nav{
    padding-bottom:
      calc(
        60px
        +
        env(safe-area-inset-bottom)
      ) !important;
  }
}

