/* ============================================================
   Bottom Sheet — utilitário global
   ------------------------------------------------------------
   Em mobile, filtros e menus secundários se transformam em
   bottom sheet (sobe de baixo). Em desktop, ficam inline.

   Markup esperado (uso típico):
     <button class="bs-trigger" data-bs-open="meusFiltrosSheet">Filtrar</button>
     <div class="bs-panel" id="meusFiltrosSheet">
       <div class="bs-handle"></div>
       <div class="bs-header">
         <h3>Filtros</h3>
         <button class="bs-close" data-bs-close>×</button>
       </div>
       <div class="bs-content">[conteúdo]</div>
     </div>

   Em desktop:
     - .bs-trigger fica oculto
     - .bs-panel renderiza inline (sem fundo)
     - .bs-handle, .bs-header e .bs-close ficam ocultos

   Em mobile (<=760px):
     - .bs-trigger aparece como pill button
     - .bs-panel fica fixed embaixo, slide-up
     - Backdrop escuro automático via body.bs-open
   ============================================================ */

/* Desktop: panel renderiza inline e elementos mobile-only somem */
.bs-trigger { display: none; }
.bs-panel .bs-handle,
.bs-panel .bs-header,
.bs-panel .bs-close { display: none; }

@media (max-width: 760px) {
  /* Trigger button (botão "Filtrar") */
  .bs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    color: var(--bs-navy, #0D436B);
    border: 1.5px solid rgba(13, 67, 107, 0.12);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 180ms ease;
    line-height: 1;
  }
  .bs-trigger:hover {
    border-color: var(--bs-blue, #00A0DD);
    color: var(--bs-blue, #00A0DD);
  }
  .bs-trigger-icon { font-size: 14px; line-height: 1; }
  .bs-trigger-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bs-blue, #00A0DD);
    color: white;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
  }

  /* Backdrop */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(13, 67, 107, 0.50);
    z-index: 990;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  body.bs-open::after {
    opacity: 1;
    pointer-events: auto;
  }
  body.bs-open {
    overflow: hidden;
  }

  /* Panel */
  .bs-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 991;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(13, 67, 107, 0.18);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.3, 0, 0.2, 1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .bs-panel.is-open {
    transform: translateY(0);
  }

  /* Handle (puxador no topo) */
  .bs-panel .bs-handle {
    display: block;
    width: 44px; height: 4px;
    background: rgba(13, 67, 107, 0.20);
    border-radius: 4px;
    margin: 12px auto 4px;
    flex-shrink: 0;
  }

  /* Header (título + botão fechar) */
  .bs-panel .bs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 6px;
    flex-shrink: 0;
  }
  .bs-panel .bs-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--bs-navy, #0D436B);
    letter-spacing: -0.2px;
  }
  .bs-panel .bs-close {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    background: rgba(13, 67, 107, 0.06);
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-navy, #0D436B);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    font-family: inherit;
  }
  .bs-panel .bs-close:hover { background: rgba(13, 67, 107, 0.12); }

  /* Conteúdo scrollável */
  .bs-panel .bs-content {
    padding: 14px 20px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}