/* ReserveAgenda - Bottom Nav (Style 1)
   - cor via currentColor (SVG inline)
   - safe area iOS
*/

.ra-bottom-nav{
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 1px;
  z-index: 9999;

  background: #d1f5ff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0,0,0,.14);

  display: flex;
  justify-content: space-around;

  padding: 2px 5px calc(1px + env(safe-area-inset-bottom));
  backdrop-filter: blur(6px); /* se o browser suportar, fica “premium” */
}

.ra-bn-item{
  flex: 1;
  text-align: center;
  text-decoration: none !important;
  color: #949aa1; /* cinza (inativo) */
  padding: 6px 2px;
}

.ra-bn-item .ra-bn-ico{
  display: inline-flex;
  width: 36px;
  height: 36px;
}

.ra-bn-item .ra-bn-ico svg{
  width: 36px;
  height: 36px;
}

.ra-bn-item .ra-bn-txt{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}

.ra-bn-item.active{
  color: #3300ff; /* azul (ativo) - ajuste se quiser usar cor do tema */
}



/* PWA button: sobe quando existir menu inferior */
.ra-has-bottom-nav #installPwa{
  margin-bottom: 40px !important;
}

/* PWA: no desktop, vira um card menor (não vira um banner gigante) */
@media (min-width: 768px){
  #installPwa{
    max-width: 300px;
    margin: 10px auto !important;
    border-radius: 50px !important;
  }
}

/* dá espaço no conteúdo para não ficar escondido atrás do menu (somente mobile) */
@media (max-width: 767.98px){
  .ra-has-bottom-nav body{
    padding-bottom: 80px; /* ajuste fino */
  }
}

/* desktop: não precisa reservar espaço */
@media (min-width: 768px){
  .ra-has-bottom-nav body{
    padding-bottom: 0 !important;
  }
}

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