/*
 * D.E.P.K03.22 - header/searchbar.css
 * DEP-ID: LP-859460E8D1
 */
/**
 * header/searchbar.css
 * Busca da header: pílula com localização (padraoSistema) e painel de resultados no visual do portal lojasProximas.
 * Cores pelos tokens do gestor de Aparência (--lp-*), com reserva; funciona no tema claro e no escuro.
 */

/* ---------- pílula com localização (só padraoSistema: .hd-sb) ---------- */
.hd-sb{ position:relative; display:flex; align-items:center; gap:0; width:100%; height:50px; padding:0 5px;
    background:var(--lp-campo-bg,#fff); border:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14)); border-radius:999px;
    box-shadow:0 6px 22px rgba(var(--lp-shadow-rgb,11,39,59),.07); transition:border-color var(--lp-dur,.2s), box-shadow var(--lp-dur,.2s); }
.hd-sb:focus-within{ border-color:var(--lp-heading,#073b60); box-shadow:0 8px 26px rgba(var(--lp-shadow-rgb,11,39,59),.12); }
.hd-busca .hd-sb input, .hd-sb input{ flex:1 1 auto; min-width:0; height:100%; padding:0 14px; border:0 !important; outline:0; background:transparent !important;
    box-shadow:none !important; border-radius:0; font:inherit; font-size:15px; color:var(--lp-campo-fg,var(--lp-ink,#102b42)); }
.hd-sb input::-webkit-search-cancel-button{ cursor:pointer; }
.hd-sb__onde{ flex:0 0 auto; max-width:42%; min-width:0; display:flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 10px;
    border:0; border-right:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14)); background:none; cursor:pointer;
    color:var(--lp-heading,#073b60); font:inherit; font-size:14px; font-weight:700; white-space:nowrap; }
.hd-sb__onde i{ color:var(--lp-accent,#ff6a2b); font-size:15px; }
.hd-sb__onde span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hd-sb__onde.is-indefinida span{ color:var(--lp-muted,#536474); font-weight:600; }
.hd-sb__onde:hover span{ text-decoration:underline; }
.hd-sb__btn{ flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
    background:var(--lp-brand,#0b3a5c); color:var(--lp-brandInk,var(--lp-brand-ink,#fff)); transition:transform var(--lp-dur,.2s), filter var(--lp-dur,.2s); }
.hd-sb__btn:hover{ transform:scale(1.05); filter:brightness(1.08); }
@media (max-width:768px){
    .hd-sb{ height:44px; }
    .hd-sb__onde{ max-width:40%; padding:0 8px; font-size:13px; }
}

/* ---------- painel de resultados ---------- */
.searchbar .hd-res, .hd-busca .hd-res{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60; margin:0; padding:8px;
    max-height:min(70vh,560px); overflow:auto; text-align:left; list-style:none;
    background:var(--lp-card-bg,#fff); color:var(--lp-ink,#102b42);
    border:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14)); border-radius:22px;
    box-shadow:0 24px 70px rgba(var(--lp-shadow-rgb,11,39,59),.2); }
.hd-res[hidden]{ display:none !important; }
.hd-res.is-aberto{ display:block; animation:hdResEntra .16s ease; }
@keyframes hdResEntra{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hd-res.is-aberto{ animation:none; } }

.hd-res__topo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 10px 8px; }
.hd-res__titulo{ font-size:13px; color:var(--lp-muted,#536474); }
.hd-res__titulo b{ color:var(--lp-heading,#073b60); }
.hd-res__chips{ display:flex; gap:6px; flex-wrap:wrap; }
.hd-res__chip{ white-space:nowrap; padding:5px 11px; border:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14)); border-radius:999px;
    background:transparent; color:var(--lp-ink,#102b42); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; }
.hd-res__chip span{ opacity:.65; font-weight:600; }
.hd-res__chip:hover:not(:disabled){ border-color:var(--lp-heading,#073b60); }
.hd-res__chip.is-on{ background:var(--lp-brand,#0b3a5c); border-color:var(--lp-brand,#0b3a5c); color:var(--lp-brandInk,var(--lp-brand-ink,#fff)); }
.hd-res__chip:disabled{ opacity:.45; cursor:default; }
.hd-res__grupo{ padding:10px 12px 4px; font-size:11.5px; font-weight:750; letter-spacing:.4px; text-transform:uppercase; color:var(--lp-muted,#536474); }

.hd-res__item{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:16px; text-decoration:none; color:inherit; }
.hd-res__item:hover, .hd-res__item.is-ativo{ background:color-mix(in srgb, var(--lp-heading,#073b60) 7%, transparent); }
.hd-res__item:focus-visible{ outline:2px solid var(--lp-heading,#073b60); outline-offset:-2px; }
.hd-res__ico, .hd-res__thumb{ width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; overflow:hidden;
    background:color-mix(in srgb, var(--lp-heading,#073b60) 8%, transparent); color:var(--lp-heading,#073b60); font-size:19px; }
.hd-res__thumb img{ width:100%; height:100%; object-fit:cover; }
.hd-res__midia{ font-size:13px; font-weight:800; }
.hd-res__main{ flex:1 1 auto; min-width:0; display:grid; gap:3px; }
.hd-res__nome{ font-weight:750; font-size:15px; color:var(--lp-heading,#073b60); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hd-res__nome mark{ background:color-mix(in srgb, var(--lp-accent,#ff941e) 30%, transparent); color:inherit; border-radius:4px; padding:0 1px; }
.hd-res__sub{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:13px; color:var(--lp-muted,#536474); }
.hd-res__tag{ padding:2px 8px; border-radius:999px; background:color-mix(in srgb, var(--lp-heading,#073b60) 8%, transparent);
    color:var(--lp-muted,#536474); font-size:11px; font-weight:750; letter-spacing:.3px; }
.hd-res__lado{ flex:0 0 auto; text-align:right; }
.hd-res__preco{ font-weight:800; font-size:15px; color:var(--lp-ink,#102b42); white-space:nowrap; }
.hd-res__seta{ color:var(--lp-muted,#536474); font-size:12px; }
.hd-res__vazio{ display:grid; justify-items:center; gap:6px; padding:26px 14px; text-align:center; color:var(--lp-muted,#536474); font-size:15px; }
.hd-res__vazio > i{ font-size:20px; opacity:.6; }
.hd-res__vazio small{ font-size:13px; }
.hd-res__vazio b{ color:var(--lp-heading,#073b60); }

@media (max-width:600px){
    .hd-res__ico, .hd-res__thumb{ width:42px; height:42px; }
    .hd-res__item{ gap:11px; padding:9px 8px; }
    .hd-res__nome{ font-size:14px; }
}