/* Busca rápida de produtos: busca.aspx (PT), busqueda-rapida.aspx (ES) e Search.aspx (EN) usam o mesmo layout.
   Cabeçalho e rodapé são do tema do site (cssNVersao/style.css); aqui só o bloco de busca e o resultado. */

.bs-area {
    --bs-cor: #229d8f;
    --bs-cor-escura: #1a7d72;
    --bs-cor-clara: #e4f4f2;
    --bs-borda: #d5dadf;
    --bs-borda-suave: #e9ecef;
    --bs-texto: #1f2429;
    --bs-texto-suave: #6b7178;
    padding: 40px 0 56px;
    background: #f5f7f8;
    color: var(--bs-texto);
}

    /* O tema deixa títulos em maiúsculas e com outra fonte de corpo; aqui não. */
    .bs-area h1,
    .bs-area h2 {
        text-transform: none;
        letter-spacing: normal;
    }

/* ---------- Cabeçalho da página ---------- */

.bs-cabecalho {
    margin-bottom: 22px;
}

.bs-titulo {
    margin: 0 0 6px;
    color: var(--bs-texto);
    font-size: 28px;
    line-height: 1.2;
}

.bs-sub {
    margin: 0;
    color: var(--bs-texto-suave);
    font-size: 15px;
}

/* ---------- Cartão de busca ---------- */

.bs-card {
    padding: 24px 24px 20px;
    background: #fff;
    border: 1px solid #e3e6e9;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
}

.bs-bloco + .bs-bloco {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--bs-borda-suave);
}

.bs-bloco-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--bs-texto);
    font-size: 16px;
    font-weight: 700;
}

    .bs-bloco-titulo i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--bs-cor-clara);
        color: var(--bs-cor-escura);
        font-size: 15px;
    }

/* Código + tipo de código lado a lado; no celular, um embaixo do outro. */
.bs-codigo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

    .bs-codigo .bs-campo-icone {
        flex: 1 1 320px;
    }

.bs-campo label {
    display: block;
    margin: 0 0 6px;
    color: #3a4047;
    font-size: 13px;
    font-weight: 700;
}

.bs-area .form-control {
    height: 46px;
    border: 1px solid var(--bs-borda);
    border-radius: 8px;
    box-shadow: none;
    color: var(--bs-texto);
    font-size: 15px;
}

    .bs-area .form-control:focus {
        border-color: var(--bs-cor);
        box-shadow: 0 0 0 3px rgba(34, 157, 143, .18);
    }

    .bs-area .form-control:disabled {
        background: #f1f3f5;
        color: #9aa1a8;
        cursor: not-allowed;
    }

.bs-area select.form-control {
    padding-left: 12px;
    padding-right: 28px;
    text-overflow: ellipsis;
}

/* Campo de texto com lupa à esquerda. */
.bs-campo-icone {
    position: relative;
}

    .bs-campo-icone > i {
        position: absolute;
        left: 15px;
        top: 23px;
        transform: translateY(-50%);
        color: #9aa1a8;
        pointer-events: none;
    }

    .bs-campo-icone .form-control {
        padding-left: 42px;
    }

.bs-maiusculas {
    text-transform: uppercase;
}

    .bs-maiusculas::placeholder {
        text-transform: none;
    }

/* Código Iguaçu / referência original: botões de opção com cara de seletor. */
.bs-segmento {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    background: #f1f3f5;
    border: 1px solid var(--bs-borda);
    border-radius: 10px;
}

    .bs-segmento input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .bs-segmento label {
        display: flex;
        align-items: center;
        height: 38px;
        margin: 0;
        padding: 0 16px;
        border-radius: 8px;
        color: var(--bs-texto-suave);
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .15s, color .15s;
    }

    .bs-segmento input:checked + label {
        background: #fff;
        box-shadow: 0 1px 3px rgba(16, 24, 32, .15);
        color: var(--bs-cor-escura);
    }

    .bs-segmento input:focus-visible + label {
        box-shadow: 0 0 0 3px rgba(34, 157, 143, .35);
    }

/* Veículo: nome + seis listas em grade. */
.bs-veiculo-nome {
    margin-bottom: 14px;
}

.bs-filtros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

/* ---------- Botões ---------- */

.bs-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--bs-borda-suave);
}

.bs-btn {
    min-width: 140px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid var(--bs-borda);
    border-radius: 8px;
    background: #fff;
    color: var(--bs-texto);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

    .bs-btn:hover {
        background: #f1f3f5;
    }

    .bs-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(34, 157, 143, .3);
    }

.bs-btn-principal {
    border-color: var(--bs-cor);
    background: var(--bs-cor);
    color: #fff;
}

    .bs-btn-principal:hover {
        border-color: var(--bs-cor-escura);
        background: var(--bs-cor-escura);
    }

/* ---------- Sugestões do AutoComplete (a lista é criada pelo AjaxControlToolkit, fora do cartão) ---------- */

.bs-autocompletar {
    z-index: 1000 !important;
    max-height: 300px;
    margin: 4px 0 0 !important;
    padding: 4px !important;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #cfd4d9;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    font-family: inherit;
}

.bs-autocompletar-item,
.bs-autocompletar-ativo {
    padding: 8px 10px;
    border-radius: 6px;
    color: #1f2429;
    font-size: 14px;
    cursor: pointer;
}

.bs-autocompletar-ativo {
    background: #e4f4f2;
    color: #1a7d72;
}

/* ---------- Carregando (UpdateProgress) ---------- */

.bs-carregando {
    position: fixed;
    inset: 0;
    z-index: 10000000;   /* acima do cabeçalho fixo do tema */
    cursor: progress;
    background: transparent;
}

.bs-carregando-barra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(34, 157, 143, .15);
}

    .bs-carregando-barra::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 35%;
        background: #229d8f;
        animation: bs-carregando 1.1s ease-in-out infinite;
    }

@keyframes bs-carregando {
    from { left: -35%; }
    to { left: 100%; }
}

.bs-carregando-aviso {
    position: fixed;
    right: 16px;
    bottom: 16px;
    padding: 10px 14px;
    background: #2b3035;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Resultado ---------- */

.bs-resultado {
    margin-top: 28px;
    scroll-margin-top: 100px;   /* não fica atrás do cabeçalho fixo ao rolar até aqui */
}

.bs-resultado-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 12px;
}

.bs-resultado-titulo {
    margin: 0;
    color: var(--bs-texto);
    font-size: 20px;
}

.bs-total {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bs-cor-clara);
    color: var(--bs-cor-escura);
    font-size: 13px;
    font-weight: 700;
}

    .bs-total:empty {
        display: none;
    }

.bs-dica {
    margin: 10px 2px 0;
    color: var(--bs-texto-suave);
    font-size: 13px;
}

.bs-tabela-rolagem {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e3e6e9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .06);
}

.bs-tabela {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

    .bs-tabela th {
        padding: 12px 10px;
        background: #f1f5f6;
        border-bottom: 1px solid #e3e6e9;
        color: #3a4047;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .bs-tabela td {
        padding: 10px;
        border-bottom: 1px solid var(--bs-borda-suave);
        color: var(--bs-texto);
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;   /* motor e ano não quebram ("1.0 8V FIRE", "04-12"); a tabela rola para o lado */
    }

    /* Observação pode ser longa: só ela quebra linha (data-label vem do Scripts/Busca.js). */
    .bs-tabela td[data-label="OBS."] {
        min-width: 160px;
        white-space: normal;
    }

    .bs-tabela tr:last-child td {
        border-bottom: 0;
    }

    .bs-tabela tr:hover td {
        background: #fafbfb;
    }

    /* Linha de grupos (Sensor de temperatura, Termo-interruptor…), montada no servidor. */
    .bs-tabela tr.bs-grupos th {
        background: #fff;
        border-bottom: 2px solid var(--bs-cor);
        color: var(--bs-cor-escura);
        font-size: 12px;
    }

    .bs-tabela tr.bs-grupos th + th {
        border-left: 1px solid var(--bs-borda-suave);
    }

    /* Código do produto: abre a imagem. */
    .bs-tabela a {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 6px;
        background: var(--bs-cor-clara);
        color: var(--bs-cor-escura);
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
    }

        .bs-tabela a:hover,
        .bs-tabela a:focus-visible {
            background: var(--bs-cor);
            color: #fff;
        }

        .bs-tabela a:empty {
            display: none;
        }

.bs-imagem {
    display: inline-flex;
    padding: 0;
    border: 1px solid var(--bs-borda-suave);
    border-radius: 8px;
    background: #fff;
    cursor: zoom-in;
}

    .bs-imagem img {
        display: block;
        width: 64px;
        height: 64px;
        object-fit: contain;
        border-radius: 8px;
    }

    .bs-imagem:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(34, 157, 143, .35);
    }

/* Coluna técnica escondida no fim de cada tabela. */
.AlignGrid {
    display: none;
}

/* ---------- Tablet ---------- */

@media (max-width: 991px) {
    .bs-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Celular: cada linha do resultado vira um cartão ---------- */

@media (max-width: 767px) {
    .bs-area {
        padding: 24px 0 40px;
    }

    .bs-titulo {
        font-size: 22px;
    }

    .bs-card {
        padding: 18px 16px 16px;
        border-radius: 12px;
    }

    .bs-segmento {
        display: flex;
        width: 100%;
    }

        .bs-segmento label {
            flex: 1;
            justify-content: center;
            padding: 0 8px;
        }

    .bs-acoes {
        flex-direction: column-reverse;
    }

    .bs-btn {
        width: 100%;
    }

    .bs-tabela-rolagem {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .bs-tabela,
    .bs-tabela tbody,
    .bs-tabela tr,
    .bs-tabela td {
        display: block;
        width: 100%;
    }

        .bs-tabela tr.bs-cabecalho-linha {
            display: none;
        }

        .bs-tabela tr {
            margin-bottom: 12px;
            padding: 6px 14px;
            background: #fff;
            border: 1px solid #e3e6e9;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(16, 24, 32, .05);
        }

            .bs-tabela tr:hover td {
                background: transparent;
            }

        .bs-tabela td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 0;
            border-bottom: 0;
            text-align: right;
        }

            /* Divisória em cima (e não embaixo): a última célula é a coluna técnica escondida. */
            .bs-tabela td + td {
                border-top: 1px solid var(--bs-borda-suave);
            }

            .bs-tabela td::before {
                content: attr(data-label);
                flex: 0 0 auto;
                max-width: 50%;
                color: var(--bs-texto-suave);
                font-size: 12px;
                font-weight: 700;
                text-align: left;
                text-transform: uppercase;
            }

            .bs-tabela td.bs-vazia,
            .bs-tabela td.AlignGrid {
                display: none;
            }

            /* Imagem do produto em destaque no topo do cartão. */
            .bs-tabela td.bs-celula-imagem {
                justify-content: center;
            }

                .bs-tabela td.bs-celula-imagem::before {
                    content: none;
                }
}

@media (prefers-reduced-motion: reduce) {
    .bs-carregando-barra::before {
        animation: none;
        left: 0;
        width: 100%;
    }
}