/* ==========================================================================
   World Whisky Atlas — buscador global (Fase 5)
   Dropdown premium anclado bajo el input del nav (label.search).
   Complementa atlas.css: usa sus tokens (--gold, --line-strong, --shadow…).
   ========================================================================== */

.search{position:relative}

/* ---- Dropdown ---- */
.bsc-drop{
  position:absolute;top:calc(100% + .6rem);right:0;
  width:min(30rem,88vw);max-height:min(31rem,72vh);overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,#1b1710,#141009);
  border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(230,198,125,.12);
  z-index:80;display:none;padding-bottom:.35rem;
  scrollbar-width:thin;scrollbar-color:rgba(201,162,74,.35) transparent;
}
.bsc-drop.open{display:block;animation:bscIn .18s ease both}
@keyframes bscIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.bsc-drop::-webkit-scrollbar{width:6px}
.bsc-drop::-webkit-scrollbar-thumb{background:rgba(201,162,74,.3);border-radius:3px}
.bsc-drop::-webkit-scrollbar-track{background:transparent}
/* filete dorado superior */
.bsc-drop::before{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.55;
}

/* ---- Encabezados de grupo ---- */
.bsc-h{
  display:flex;align-items:center;gap:.6rem;
  padding:.75rem .95rem .3rem;
  font-family:var(--serif-display);font-size:.62rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}
.bsc-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- Resultados ---- */
.bsc-item{
  display:block;padding:.48rem .95rem .52rem;
  border-left:2px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.bsc-n{
  display:block;font-family:var(--serif-body);font-size:1.06rem;font-weight:600;
  color:var(--cream);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bsc-s{
  display:block;font-size:.66rem;color:var(--muted-2);letter-spacing:.05em;margin-top:.12rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bsc-item.sel,.bsc-item:hover{
  background:rgba(201,162,74,.09);border-left-color:var(--gold);
}
.bsc-item.sel .bsc-n{color:var(--gold-bright)}

/* match dorado */
.bsc-drop mark{
  background:rgba(201,162,74,.16);color:var(--gold-bright);
  border-radius:2px;padding:0 .04em;
  text-shadow:0 0 10px rgba(201,162,74,.35);
}

/* ---- Mensajes (cargando / sin resultados) ---- */
.bsc-msg{
  padding:1.15rem 1rem 1.2rem;text-align:center;
  font-family:var(--serif-body);font-style:italic;font-size:1.02rem;color:var(--muted);
}
.bsc-msg-sub{
  display:block;margin-top:.3rem;font-family:var(--sans);font-style:normal;
  font-size:.66rem;letter-spacing:.06em;color:var(--muted-2);
}
.bsc-cargando .bsc-orn{
  display:inline-block;margin-right:.55rem;color:var(--gold);
  animation:bscPulse 1.2s ease-in-out infinite;
}
@keyframes bscPulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}

/* ---- Pie de atajos ---- */
.bsc-keys{
  display:flex;justify-content:center;gap:1.1rem;
  margin-top:.35rem;padding:.5rem .95rem .3rem;
  border-top:1px solid var(--line);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}

/* ---- Mobile: ancho completo bajo el nav ---- */
@media (max-width:560px){
  .bsc-drop{
    position:fixed;left:0;right:0;top:var(--bsc-top,58px);
    width:auto;max-height:calc(100vh - var(--bsc-top,58px) - .75rem);
    border-left:none;border-right:none;border-radius:0 0 14px 14px;
  }
  .bsc-keys{display:none}
}

/* ---- Movimiento reducido: fade simple ---- */
@media (prefers-reduced-motion:reduce){
  .bsc-drop.open{animation:bscFade .15s ease both}
  @keyframes bscFade{from{opacity:0}to{opacity:1}}
  .bsc-cargando .bsc-orn{animation:none}
  .bsc-item{transition:none}
}
