/* ==========================================================================
   Gráfica Batista — estilos das interações criadas pelo JS da /sacolas
   (dono: gb-form.js e gb-vitrine.js; depende dos tokens de gb-base.css)
   1. Formulário: pílula da escolha (oferta ou modelo) + "Trocar" + escolha rápida
   2. Vitrine: estados em movimento (.is-auto, .is-solto, .is-arrastando)
   ========================================================================== */

/* ---------- 1. Pílula + Trocar (o #formOferta vem do HTML; o resto o gb-form.js cria) ----------
   Uma caixa só: o texto à esquerda (quebra em duas linhas se a legenda for longa) e o "Trocar" à direita. */
.form__escolha {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 4px 4px 4px 14px;
    border-radius: 14px;
    background: var(--nevoa);
}
.form__escolha[hidden], .form__troca[hidden] { display: none; }
.form__escolha .form__oferta {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    border-radius: 0;
    background: none;
    line-height: 1.35;
}
.form__trocar {
    flex: none;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--azul);
    font-family: var(--f-texto);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.form__trocar:hover { color: var(--azul-escuro); background: rgba(21, 101, 168, .08); }
.form__trocar[aria-expanded="true"] { text-decoration: none; }

/* Escolha rápida: abre ali mesmo, por cima da etapa atual (que continua do jeito que estava) */
.form__troca {
    margin: -8px 0 22px;
    padding: 14px;
    border: 1.5px solid var(--linha);
    border-radius: 14px;
    background: var(--papel-cinza);
}
.form__troca-titulo {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
}
.form__troca .chips--coluna { gap: 8px; }
.form__troca .chips--coluna .chip { min-height: 48px; padding: 10px 14px; }

/* Opção marcada com medida ao lado (etapa do tamanho e escolha rápida): texto branco no azul, inclusive
   com hover (o .chip--link:hover da página pinta de tinta; no celular o hover fica preso depois do toque) */
.chip--link[aria-pressed="true"],
.chip--link[aria-pressed="true"]:hover { color: #FFFFFF; }
.chip--link[aria-pressed="true"] span { color: rgba(255, 255, 255, .88); }

@media (prefers-reduced-motion: no-preference) {
    .form__troca:not([hidden]) { animation: gb-troca-abre 160ms var(--ease-sai); }
}
@keyframes gb-troca-abre { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- 2. Vitrine (carrossel) ----------
   A rolagem lateral, o snap e o tamanho dos cards são da página (sacolas-nova.css).
   Aqui só o que muda com o movimento: enquanto anda sozinha, durante o arrasto e até encaixar
   num card, o snap e a rolagem suave ficam desligados (senão brigam com o JS). */
[data-vitrine].is-auto,
[data-vitrine].is-solto,
[data-vitrine].is-arrastando { scroll-snap-type: none; scroll-behavior: auto; }
[data-vitrine].is-auto [data-vitrine-trilho] { will-change: transform; }
[data-vitrine] img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
[data-vitrine].is-arrastando { -webkit-user-select: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
    [data-vitrine] { cursor: grab; }
    [data-vitrine].is-arrastando,
    [data-vitrine].is-arrastando button,
    [data-vitrine].is-arrastando a { cursor: grabbing; }
}