#help-fab{
    position: fixed;
    right: 70px;           /* ← a sinistra del search */
    bottom: 14px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
    display: grid;
    place-items: center;
    z-index: 10001;
    cursor: pointer;
  }

  #help-fab.active {
    background: #0d47a1;
    color: #fff;
  }


/* Bottone FAB in basso a destra */
#search-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  display: grid; place-items: center;
  z-index: 10001;
  cursor: pointer;
}

#search-fab.active {
  background: #bdc706;
  color: #fff;
}

/* Pannello ricerca */
#search-panel{
  position: fixed;
  right: 14px;
  bottom: 72px;
  width: min(360px, 88vw);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  display: none;
  z-index: 10001;
}

#search-panel input{
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;              /* un filo di respiro in più */
  font-size: 16px;                 /* ← chiave */
  line-height: 1.25;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


#search-results{
  margin-top: 8px;
  max-height: 40vh;
  overflow: auto;
  border-top: 1px dashed var(--border);
}
#search-results button{
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 6px;
  cursor: pointer;
}
#search-results button:hover{ background: rgba(128,128,128,.15); }

/* Pill di stato nella titlebar */
#flight-status-pill{
  margin-left: .5rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Colori coerenti con legenda */
.pill-0   { background: #ff4d4d; color: #000; }  /* Rosso: 0 m */
.pill-25  { background: #ffb84d; color: #000; }  /* Arancione */
.pill-45  { background: #ffe14d; color: #000; }  /* Giallo */
.pill-60  { background: #66ccff; color: #000; }  /* Celeste */
.pill-120 { background: #ffffff; color: #000; border-color:#999; } /* Quadrato vuoto = bianco */

/* Zebrato per NOTAM/NFZ (0 m con tratteggio) */
.pill-zebra{
  background-image: repeating-linear-gradient(
    45deg,
    #ff4d4d 0 10px,
    #ffffff 10px 20px
  );
  color:#000;
}