/* A pesquisa da barra: vidro escuro, igual nos três modelos. */

.busca {
  --b-papel: #f3efe9;
  --b-saida: cubic-bezier(.16, 1, .3, 1);
  position: relative; z-index: 2;
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  color: var(--b-papel);
  pointer-events: auto;
}

.busca-campo {
  display: flex; align-items: center; gap: 10px;
  width: 248px; height: 40px; padding: 0 12px 0 14px;
  border-radius: 16px; border: 1px solid rgba(243, 239, 233, .22);
  background: rgba(18, 10, 20, .52);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  cursor: text;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.busca-campo:hover { border-color: rgba(243, 239, 233, .45); }
.busca-campo:focus-within { border-color: var(--b-papel); background: rgba(18, 10, 20, .78); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.busca-campo svg { flex: none; opacity: .75; }
.busca-campo input {
  all: unset; flex: 1; min-width: 0; height: 100%;
  font-size: 13px; letter-spacing: .02em; color: var(--b-papel);
  user-select: text; -webkit-user-select: text;
}
.busca-campo input::placeholder { color: rgba(243, 239, 233, .6); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-campo kbd {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid rgba(243, 239, 233, .25); font: 500 10px/1 inherit; opacity: .6;
  transition: opacity .2s;
}
.busca-campo:focus-within kbd { opacity: 0; }

.busca-lista {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 24px);
  margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; border: 1px solid rgba(243, 239, 233, .16);
  background: rgba(18, 10, 20, .86);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  animation: busca-entra .35s var(--b-saida);
}
.busca-lista[hidden] { display: none; }
@keyframes busca-entra { from { opacity: 0; transform: translateY(-8px); } }

.busca-lista [role="option"] {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  padding: 6px 12px 6px 6px; border-radius: 12px; cursor: pointer;
  transition: background .2s;
}
.busca-lista [aria-selected="true"] { background: rgba(243, 239, 233, .1); }
.busca-lista img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }
.busca-lista b { display: block; font: 400 13px/1.1 'Designer', 'Roboto', 'Segoe UI', sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.busca-lista small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.busca-lista i { font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .35s var(--b-saida); }
.busca-lista [aria-selected="true"] i { opacity: 1; transform: none; }
.busca-titulo, .busca-vazio { padding: 10px 12px 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .5; }
.busca-vazio { padding: 16px 12px; letter-spacing: .06em; text-transform: none; font-size: 13px; opacity: .75; line-height: 1.45; }

/* telemóvel: fica só a lupa; ao tocar, o campo toma a largura do ecrã */
@media (max-width: 760px) {
  .busca-campo { width: 40px; padding: 0; justify-content: center; }
  .busca-campo input { position: absolute; width: 1px; opacity: 0; }
  .busca-campo kbd { display: none; }
  .busca-campo:focus-within {
    position: fixed; left: 12px; right: 12px; top: 10px; width: auto; height: 46px; z-index: 30;
    padding: 0 14px; justify-content: flex-start; background: rgba(18, 10, 20, .94);
  }
  .busca-campo:focus-within input { position: static; width: auto; opacity: 1; font-size: 16px; }
  .busca-lista { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; z-index: 30; }
}

@media (prefers-reduced-motion: reduce) { .busca-lista { animation: none; } }