/*
 * Filtro de canal e de loja com o selo da marca.
 *
 * O <select> nativo nao aceita imagem dentro da <option>, entao o realce
 * monta um botao + painel por cima dele. O select continua no DOM com o
 * mesmo name e value: quem envia o formulario nao percebe a diferenca.
 */

/*
 * O involucro recebe a classe do proprio select (form-select, sv-select...),
 * entao ele ja chega com a largura, a borda e a seta certas — e ocupa o mesmo
 * lugar na linha de filtros. So o essencial e forcado aqui.
 */
.mkt-select {
    position: relative !important;
    display: flex; align-items: center;
    /* Sem isto o involucro vira item de flex com min-width:auto e cresce com o
       nome da loja, empurrando a linha de filtros. O rotulo e quem corta. */
    min-width: 0;
    cursor: pointer;
}
.mkt-select.is-open {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .18);
}

/*
 * O select nativo fica invisivel mas ocupando a mesma caixa do botao.
 * Nao pode ser clip/display:none: campo obrigatorio sem caixa renderizada faz
 * o Chrome recusar o submit em silencio ("invalid form control is not
 * focusable"). Com opacity 0 ele continua focavel e o balao de validacao
 * aparece no lugar certo.
 */
.mkt-select__native {
    position: absolute !important;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* O botao so carrega o conteudo: a moldura e do involucro. */
.mkt-select__btn {
    display: flex; align-items: center; gap: .45rem;
    width: 100%; padding: 0; margin: 0;
    background: none; border: 0; color: inherit;
    font: inherit; line-height: inherit; text-align: left;
    cursor: pointer;
}
.mkt-select__btn:focus { outline: 0; }
/* Clique no rotulo nao pode deixar o texto selecionado. */
.mkt-select__btn { -webkit-user-select: none; user-select: none; }
.mkt-select__btn:disabled { cursor: not-allowed; opacity: .65; }
.mkt-select__btn .mkt-logo { flex: 0 0 auto; }
.mkt-select__label {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-select__panel {
    position: fixed;
    z-index: 1080;                /* acima de modal (1055) e offcanvas */
    max-height: 320px; overflow-y: auto;
    padding: .3rem;
    background: #fff;
    border: 1px solid #e2e8f0; border-radius: .6rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.mkt-select__panel[hidden] { display: none; }

.mkt-select__group {
    padding: .4rem .55rem .2rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #94a3b8;
}

.mkt-select__opt {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; padding: .4rem .55rem;
    border: 0; border-radius: .45rem; background: none;
    font-size: .86rem; color: #0f172a; text-align: left;
    cursor: pointer;
}
.mkt-select__opt:hover,
.mkt-select__opt.is-active { background: #eef2ff; }
.mkt-select__opt[aria-selected="true"] { font-weight: 600; }
.mkt-select__opt[aria-selected="true"]::after {
    content: ""; margin-left: auto; flex: 0 0 auto;
    width: 14px; height: 14px;
    background: currentColor;
    -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5'  fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: #4f46e5;
}
.mkt-select__opt:disabled { opacity: .5; cursor: not-allowed; }
.mkt-select__opt .mkt-logo { flex: 0 0 auto; }

/* Espaco do selo quando a opcao nao e de marketplace ("Todas as lojas"). */
.mkt-select__spacer { flex: 0 0 auto; width: 18px; height: 18px; }

@media (prefers-color-scheme: dark) {
    .mkt-select__panel { background: #0f172a; border-color: #1e293b; }
    .mkt-select__opt { color: #e2e8f0; }
    .mkt-select__opt:hover,
    .mkt-select__opt.is-active { background: #1e293b; }
}