/* RepublicaPass V32 — bottom nav anchored to stable mobile viewport */
@media (max-width:820px){
  :root{
    --rp32-nav-base:64px;
    --rp32-nav-total:calc(var(--rp32-nav-base) + env(safe-area-inset-bottom));
  }

  .rp-mobile-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--rp32-nav-total)!important;
    min-height:var(--rp32-nav-total)!important;
    top:calc(100svh - var(--rp32-nav-total))!important;
    bottom:auto!important;
    margin:0!important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;
    z-index:2147483000!important;
    transform:none!important;
    -webkit-transform:none!important;
    translate:none!important;
    scale:none!important;
    rotate:none!important;
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
    backface-visibility:visible!important;
    contain:layout paint!important;
    isolation:isolate!important;
    background:#020706!important;
    border-top:1px solid rgba(13,242,138,.10)!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.36)!important;
  }

  /* Cover the area revealed when the mobile browser toolbar collapses.
     The navigation itself stays in the same physical vertical position. */
  .rp-mobile-bottom-nav::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:100%;
    height:180px;
    background:#020706;
    pointer-events:none;
  }

  .rp-mobile-bottom-nav a,
  .rp-mobile-bottom-nav a:hover,
  .rp-mobile-bottom-nav a:focus,
  .rp-mobile-bottom-nav a:active,
  .rp-mobile-bottom-nav a.is-active,
  .rp-mobile-bottom-nav a::before,
  .rp-mobile-bottom-nav a::after,
  .rp-mobile-bottom-nav svg,
  .rp-mobile-bottom-nav span{
    transform:none!important;
    -webkit-transform:none!important;
    translate:none!important;
    scale:none!important;
    rotate:none!important;
    animation:none!important;
    transition:none!important;
  }

  .rp-mobile-bottom-nav a.is-active svg{
    transform:none!important;
    -webkit-transform:none!important;
  }

  body.public-body{
    padding-bottom:calc(var(--rp32-nav-total) + 10px)!important;
  }
  body.rp-page-evento,
  body.rp-page-checkout,
  body.rp-page-compra{
    padding-bottom:0!important;
  }
}

/* Fallback for older browsers without stable viewport units. */
@supports not (height:100svh){
  @media (max-width:820px){
    .rp-mobile-bottom-nav{
      top:auto!important;
      bottom:0!important;
    }
    .rp-mobile-bottom-nav::after{display:none!important}
  }
}
