/* ============================================================
   Frassati Child — Bottom App Navigation
   Barra fixa no rodapé, visível apenas em mobile
   @package FrassatiBrasil
   @version 1.1.0
============================================================ */

.frassati-bottom-nav {
  display: none;
}

@media (max-width: 768px) {

  /* ── Barra ─────────────────────────────────────────────── */
  .frassati-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-top: 1px solid #EFEFED !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.07) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none !important;
    gap: 0 !important;
  }

  /* ── Item — reset total contra Hello Elementor / WP ────── */
  .frassati-bottom-nav__item,
  .frassati-bottom-nav__item:link,
  .frassati-bottom-nav__item:visited {
    /* layout */
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 4px 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;

    /* cor — estado padrão */
    color: #B0B0A8 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    /* reset de botão */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;

    /* tap feedback nativo desativado */
    -webkit-tap-highlight-color: transparent !important;

    /* transição suave */
    transition: color 150ms ease !important;
  }

  /* ── SVG ── */
  .frassati-bottom-nav__item svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    display: block !important;
    stroke: #B0B0A8 !important;
    fill: none !important;
    transition: stroke 150ms ease, transform 150ms ease !important;
  }

  /* ── Label ── */
  .frassati-bottom-nav__item span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* ── Estado ativo — apenas cor, sem fundo ── */
  .frassati-bottom-nav__item.is-active,
  .frassati-bottom-nav__item.is-active:link,
  .frassati-bottom-nav__item.is-active:visited {
    color: #F28C28 !important;
    background: none !important;
    background-color: transparent !important;
  }

  .frassati-bottom-nav__item.is-active svg {
    stroke: #F28C28 !important;
    transform: translateY(-2px) !important;
  }

  /* ── Hover ── */
  .frassati-bottom-nav__item:hover,
  .frassati-bottom-nav__item:focus-visible {
    color: #F28C28 !important;
    background: none !important;
    background-color: transparent !important;
  }

  .frassati-bottom-nav__item:hover svg,
  .frassati-bottom-nav__item:focus-visible svg {
    stroke: #F28C28 !important;
  }

  /* ── Tap feedback ── */
  .frassati-bottom-nav__item:active svg {
    transform: scale(.88) !important;
  }

  /* ── Ícone custom (img) ── */
  .frassati-bottom-nav__icon-img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
    filter: invert(72%) sepia(0%) saturate(0%) brightness(90%) !important;
    transition: filter 150ms ease !important;
  }

  .frassati-bottom-nav__item.is-active .frassati-bottom-nav__icon-img,
  .frassati-bottom-nav__item:hover .frassati-bottom-nav__icon-img {
    filter: invert(60%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(105%) !important;
  }

  /* ── Garante que o conteúdo não fique atrás da barra ── */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }

}