/* ===================================================================
   P8W PUBLIC · pub-search-bar
   Componente unificado de busca/análise para o front público.
   Substitui as 9+ variações de input que existiam em rotas distintas.

   Uso:
     <form class="pub-search-bar" role="search">
       <span class="pub-search-bar__icon" aria-hidden="true">⌕</span>
       <input class="pub-search-bar__field" placeholder="…">
       <button class="pub-search-bar__btn" type="submit">Buscar</button>
     </form>

   Variantes (composição por slots):
     • SOLO         → icon + field + btn
     • SELECT-PREFIX → select + divider + field + btn
     • SELECT-SUFFIX → icon + field + divider + select + btn
     • DUAL         → icon + field + divider + icon + field + btn
     • URL-CHECK    → icon(🌐) + field(URL) + btn
     • VOICE        → icon + field + action(mic) + btn(arrow)
     • SEARCH-ONLY  → icon + field   (sem botão)
     • SM           → modificador .pub-search-bar--sm

   Tokens consumidos:
     --pub-bg-card, --pub-bg-card-solid, --pub-border, --pub-text,
     --pub-text-dim, --pub-text-muted, --pub-accent, --pub-accent-glow,
     --pub-accent-subtle, --pub-gradient-1, --pub-radius-full,
     --pub-radius-md, --pub-shadow-md, --pub-transition-fast,
     --pub-transition-spring

   Acessibilidade:
     • role="search" no wrapper
     • aria-label nos botões só com ícone
     • :focus-within ativa o halo (incluindo navegação por teclado)
     • prefers-reduced-motion respeitado
   =================================================================== */

.pub-search-bar {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--pub-space-1) var(--pub-space-1) var(--pub-space-1) var(--pub-space-2);
    height: var(--pub-h-search-bar);
    background: var(--pub-bg-card-solid);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-pill);
    box-shadow: var(--pub-shadow-md);
    transition:
        border-color var(--pub-transition-fast),
        box-shadow var(--pub-transition-spring);
    position: relative;
}

.pub-search-bar:focus-within {
    border-color: var(--pub-accent);
    box-shadow:
        0 0 0 4px var(--pub-accent-subtle),
        0 0 24px var(--pub-accent-glow);
}

/* Ícone leading (busca, lupa, globo, etc.) */
.pub-search-bar__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0 14px;
    height: 100%;
    color: var(--pub-text-muted);
    font-size: 16px;
    line-height: 1;
}

.pub-search-bar__icon svg {
    width: 18px;
    height: 18px;
}

/* Campo de input */
.pub-search-bar__field {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 0;
    border: none;
    background: transparent;
    color: var(--pub-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
}

.pub-search-bar__field::placeholder {
    color: var(--pub-text-dim);
}

.pub-search-bar__field:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Divider sutil entre slots */
.pub-search-bar__divider {
    flex-shrink: 0;
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: var(--pub-border);
}

/* Select (segmented) */
.pub-search-bar__select {
    flex-shrink: 0;
    height: 100%;
    padding: 0 28px 0 14px;
    border: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--pub-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pub-search-bar__select:hover {
    color: var(--pub-accent);
}

/* Botão de submit principal */
.pub-search-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pub-space-2);
    height: var(--pub-h-btn-md);
    padding: 0 var(--pub-space-6);
    border: none;
    border-radius: var(--pub-radius-pill);
    background: var(--pub-gradient-1);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--pub-fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--pub-accent-glow);
    transition:
        filter var(--pub-transition-fast),
        transform var(--pub-transition-fast),
        box-shadow var(--pub-transition-fast);
    white-space: nowrap;
}

.pub-search-bar__btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--pub-accent-glow);
}

.pub-search-bar__btn:active {
    transform: translateY(0);
}

.pub-search-bar__btn:focus-visible {
    outline: 2px solid var(--pub-accent);
    outline-offset: 3px;
}

.pub-search-bar__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Botão circular de ação (mic, send, etc.) */
.pub-search-bar__action {
    flex-shrink: 0;
    width: var(--pub-h-btn-md);
    height: var(--pub-h-btn-md);
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pub-text-muted);
    font-family: inherit;
    font-size: var(--pub-fs-base);
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--pub-transition-fast),
        background var(--pub-transition-fast);
}

.pub-search-bar__action:hover {
    color: var(--pub-accent);
    background: var(--pub-accent-subtle);
}

.pub-search-bar__action:focus-visible {
    outline: 2px solid var(--pub-accent);
    outline-offset: 2px;
}

/* Variante: botão circular de envio (substitui o btn em VOICE/quick-send) */
.pub-search-bar__btn--circle {
    width: 44px;
    padding: 0;
    border-radius: 50%;
}

/* ===================================================================
   Variante SM (compacta — para uso em headers/sidebars)
   =================================================================== */
.pub-search-bar.pub-search-bar--sm {
    height: 48px;
    padding: 5px;
}

.pub-search-bar.pub-search-bar--sm .pub-search-bar__btn {
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
}

.pub-search-bar.pub-search-bar--sm .pub-search-bar__action {
    width: 38px;
    height: 38px;
}

/* ===================================================================
   Responsivo
   =================================================================== */
@media (max-width: 640px) {
    .pub-search-bar {
        flex-wrap: wrap;
        height: auto;
        padding: 6px;
        border-radius: var(--pub-radius-lg, 0.75rem);
    }

    .pub-search-bar__field {
        flex: 1 1 100%;
        height: 40px;
        padding: 0 12px;
    }

    .pub-search-bar__divider {
        display: none;
    }

    .pub-search-bar__select {
        flex: 1 1 50%;
        height: 40px;
        padding: 0 28px 0 12px;
    }

    .pub-search-bar__btn {
        flex: 1 1 100%;
        height: 44px;
    }

    .pub-search-bar__icon {
        padding: 0 8px;
    }

    .pub-search-bar:focus-within {
        box-shadow:
            0 0 0 3px var(--pub-accent-subtle),
            0 0 16px var(--pub-accent-glow);
    }
}

/* ===================================================================
   COMPAT · Mapeia o padrão antigo .bdir-search-* para .pub-search-bar.
   Usado em ~14 views públicas que ainda não foram migradas estruturalmente.
   Resultado: aparência idêntica à .pub-search-bar sem editar cada view.
   Quando as views forem migradas, este bloco pode ser removido.
   =================================================================== */
.bdir-search-wrap {
    /* o wrapper externo vira invisível — só passa filhos */
    display: contents;
}

.bdir-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--pub-space-1) var(--pub-space-1) var(--pub-space-1) var(--pub-space-2);
    height: var(--pub-h-search-bar);
    background: var(--pub-bg-card-solid);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-pill);
    box-shadow: var(--pub-shadow-md);
    transition:
        border-color var(--pub-transition-fast),
        box-shadow var(--pub-transition-spring);
    position: relative;
}

.bdir-search-form:focus-within {
    border-color: var(--pub-accent);
    box-shadow:
        0 0 0 4px var(--pub-accent-subtle),
        0 0 24px var(--pub-accent-glow);
}

.bdir-search-input-wrap {
    /* wrapper interno: vira flex-row pra acomodar ícone + input lado a lado */
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.bdir-search-icon {
    flex-shrink: 0;
    padding: 0 14px;
    color: var(--pub-text-muted);
    font-size: 16px;
    line-height: 1;
}

.bdir-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--pub-space-3) 0 0;
    border: none;
    background: transparent;
    color: var(--pub-text);
    font-family: inherit;
    font-size: var(--pub-fs-sm);
    line-height: 1.4;
    outline: none;
}

.bdir-search-input::placeholder {
    color: var(--pub-text-dim);
}

/* Quando .bdir-search-input é um <select> (filtro lateral) */
select.bdir-search-input {
    flex: 0 0 auto;
    padding: 0 28px 0 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-left: 1px solid var(--pub-border);
}

.bdir-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pub-space-2);
    height: var(--pub-h-btn-md);
    padding: 0 var(--pub-space-6);
    border: none;
    border-radius: var(--pub-radius-pill);
    background: var(--pub-gradient-1);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--pub-fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--pub-accent-glow);
    transition:
        filter var(--pub-transition-fast),
        transform var(--pub-transition-fast),
        box-shadow var(--pub-transition-fast);
    white-space: nowrap;
}

.bdir-search-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--pub-accent-glow);
}

@media (max-width: 640px) {
    .bdir-search-form {
        flex-wrap: wrap;
        height: auto;
        border-radius: var(--pub-radius-lg);
    }
    .bdir-search-input-wrap { flex: 1 1 100%; height: 40px; }
    select.bdir-search-input { flex: 1 1 50%; height: 40px; border-left: none; }
    .bdir-search-btn { flex: 1 1 100%; height: 44px; }
}

/* ===================================================================
   prefers-reduced-motion
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pub-search-bar,
    .pub-search-bar__btn,
    .pub-search-bar__action,
    .bdir-search-form,
    .bdir-search-btn {
        transition: none;
    }

    .pub-search-bar__btn:hover,
    .bdir-search-btn:hover {
        transform: none;
    }
}