/* ==========================================================================
   Mobile bottom navigation — precision floating active-pill system
   Active destination exposes its label; inactive destinations stay icon-only.
   ========================================================================== */
@media (max-width:700px){
  body.papillon-theme{
    padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;
  }

  body.papillon-theme .mobile-bottom-nav{
    position:fixed!important;
    inset-inline:10px!important;
    inset-block-end:calc(8px + env(safe-area-inset-bottom))!important;
    z-index:1000!important;
    display:flex!important;
    width:auto!important;
    height:64px!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    padding:7px 8px!important;
    border:1px solid rgba(14,98,102,.12)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 12px 34px rgba(18,43,48,.16),0 2px 8px rgba(18,43,48,.08)!important;
    backdrop-filter:blur(18px) saturate(1.15)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
    direction:rtl;
    overflow:hidden;
  }

  body.papillon-theme .mobile-bottom-nav>a{
    position:relative!important;
    display:flex!important;
    width:auto!important;
    min-width:44px!important;
    max-width:none!important;
    height:48px!important;
    flex:1 1 0%!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:row!important;
    gap:0!important;
    padding:0!important;
    margin:0!important;
    border:1px solid transparent!important;
    border-radius:16px!important;
    background:transparent!important;
    color:#718087!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1!important;
    text-decoration:none!important;
    box-shadow:none!important;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    overflow:hidden;
    contain:layout paint;
    transition:
      flex-grow 300ms cubic-bezier(.22,.75,.18,1),
      flex-basis 300ms cubic-bezier(.22,.75,.18,1),
      background-color 240ms cubic-bezier(.22,.75,.18,1),
      border-color 240ms cubic-bezier(.22,.75,.18,1),
      color 220ms cubic-bezier(.22,.75,.18,1),
      transform 180ms cubic-bezier(.22,.75,.18,1)!important;
  }

  body.papillon-theme .mobile-bottom-nav>a::before,
  body.papillon-theme .mobile-bottom-nav>a::after{
    display:none!important;
    content:none!important;
  }

  body.papillon-theme .mobile-bottom-nav>a.is-active{
    width:auto!important;
    min-width:108px!important;
    max-width:none!important;
    flex:2 1 0%!important;
    justify-content:center!important;
    gap:8px!important;
    padding-inline:14px!important;
    border-color:#c8dddd!important;
    background:linear-gradient(135deg,#e8f4f3,#eef8f7)!important;
    color:#0e6266!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.66),0 5px 14px rgba(14,98,102,.08)!important;
  }

  body.papillon-theme .mobile-bottom-nav .mobile-nav-icon{
    display:grid!important;
    width:24px!important;
    height:24px!important;
    flex:0 0 24px!important;
    place-items:center!important;
    color:currentColor!important;
    transform:translateZ(0);
  }

  body.papillon-theme .mobile-bottom-nav .mobile-nav-icon svg{
    display:block!important;
    width:23px!important;
    height:23px!important;
    max-width:none!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.85!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    overflow:visible!important;
  }

  body.papillon-theme .mobile-bottom-nav>a.is-active .mobile-nav-icon svg{
    stroke-width:2!important;
  }

  body.papillon-theme .mobile-bottom-nav .mobile-nav-label{
    display:block!important;
    width:0!important;
    max-width:0!important;
    margin:0!important;
    opacity:0!important;
    overflow:hidden!important;
    color:currentColor!important;
    font-size:11.5px!important;
    font-weight:850!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    transform:translateX(5px)!important;
    transition:max-width 260ms cubic-bezier(.22,.75,.18,1),width 260ms cubic-bezier(.22,.75,.18,1),opacity 180ms ease,transform 260ms cubic-bezier(.22,.75,.18,1)!important;
  }

  body.papillon-theme .mobile-bottom-nav>a.is-active .mobile-nav-label{
    width:auto!important;
    max-width:82px!important;
    opacity:1!important;
    transform:none!important;
  }

  body.papillon-theme .mobile-bottom-nav>a:active{
    transform:scale(.965)!important;
  }

  body.papillon-theme .mobile-bottom-nav>a:focus-visible{
    outline:2px solid rgba(14,98,102,.42)!important;
    outline-offset:1px!important;
  }

}

@media (max-width:370px){
  body.papillon-theme .mobile-bottom-nav{
    inset-inline:7px!important;
    gap:4px!important;
    padding-inline:6px!important;
    border-radius:18px!important;
  }
  body.papillon-theme .mobile-bottom-nav>a{
    min-width:42px!important;
  }
  body.papillon-theme .mobile-bottom-nav>a.is-active{
    min-width:102px!important;
    flex-grow:2.05!important;
    gap:6px!important;
    padding-inline:11px!important;
  }
  body.papillon-theme .mobile-bottom-nav>a.is-active .mobile-nav-label{
    max-width:74px!important;
    font-size:11.5px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.papillon-theme .mobile-bottom-nav>a,
  body.papillon-theme .mobile-bottom-nav .mobile-nav-label{
    transition:none!important;
  }
}