/*
 * Bloco de convênio injetado na etapa "Selecione sua profissão".
 *
 * Ele vive dentro do card do formulário do app de cadastro, cuja largura útil
 * fica entre ~284px (mobile) e ~364px (desktop). A versão anterior usava um
 * grid de duas colunas (texto | botões) com o fallback de coluna única atrás
 * de `@media (max-width: 680px)` — um breakpoint de VIEWPORT dentro de um
 * componente limitado pelo CONTAINER. No desktop a media query nunca
 * disparava, a coluna de texto ficava com 120px, o título quebrava em 3 linhas
 * e os botões Sim/Não ficavam espremidos.
 *
 * Agora é coluna única em qualquer largura: não existe mais o modo que quebra.
 * A superfície reaproveita o padrão de bloco embutido já usado no app
 * (.url-preview-card): borda de 1px, raio 14px e o mesmo gradiente lilás.
 */

.agentech-signup-profession-extension-slot:empty {
    display: none;
}

.bfcv-signup-question,
.bfcv-signup-skeleton,
.bfcv-signup-question__status {
    /* Roxo da marca Agentech — o mesmo do painel e do resto do cadastro. */
    --bfcv-purple: #4439bd;
    --bfcv-purple-strong: #372fa1;
    --bfcv-purple-faint: #f4f2fe;
    --bfcv-purple-line: #d3cdf5;
    --bfcv-ink: #202440;
    /* Cinza puro sobre a superfície lilás fica em 3.98:1. Este tom puxa o roxo
     * da própria superfície e mede 6.48:1. */
    --bfcv-muted: #5a5478;
    --bfcv-border: #e1e4ef;
    --bfcv-surface: linear-gradient(135deg, #f8f8fd, #f3f1ff);
    --bfcv-danger: #b42318;
    --bfcv-ease: cubic-bezier(.16, 1, .3, 1);
}

.bfcv-signup-question,
.bfcv-signup-skeleton {
    /* A folga de baixo separa a pergunta da barra de ações: são dois grupos
     * distintos, e a pergunta condiciona o "Continuar". */
    margin: 16px 0 6px;
    padding: 14px 15px 15px;
    border: 1px solid var(--bfcv-border);
    border-radius: 14px;
    background: var(--bfcv-surface);
    box-shadow: 0 1px 2px rgba(19, 22, 47, .045);
    color: var(--bfcv-ink);
}

/*
 * A cor vive nos contêineres, não nos elementos de texto: dentro do app de
 * cadastro o reset `#agentech-signup-root h3, p, span, strong { color: inherit }`
 * carrega um ID e vence qualquer seletor de classe daqui. Pintando <section> e
 * <div> — que o reset não toca — o texto herda a cor certa nos dois contextos.
 *
 * A entrada é o único momento animado do bloco: ele aparece em resposta à
 * escolha da profissão, e o resto das mudanças de estado acontece no lugar.
 */
.bfcv-signup-question {
    letter-spacing: -.012em;
    animation: bfcvReveal .42s var(--bfcv-ease) both;
}

/*
 * Escala tipográfica Agentech (a mesma do painel): título de item em 14px/600,
 * texto de apoio em 12px/400. Os pesos do sistema são 400, 500 e 600 — os 780
 * daqui nem existiam na fonte, que para em 700.
 */
.bfcv-signup-question h3 {
    margin: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
}

.bfcv-signup-question__copy {
    margin-top: 5px;
    color: var(--bfcv-muted);
    letter-spacing: 0;
}

.bfcv-signup-question__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    text-wrap: pretty;
}

.bfcv-signup-question__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

/*
 * Botão de escolha, não rádio desenhado.
 *
 * A versão anterior colocava uma bolinha de rádio de 16px ao lado do rótulo,
 * dentro de um botão que já é a própria área clicável. O resultado era um
 * controle contando duas vezes a mesma coisa — a bolinha e o botão inteiro
 * dizendo "selecionado" — e, com o rótulo centralizado, a bolinha caía no meio
 * do botão, sem alinhamento com nada.
 *
 * Agora o estado vive no botão: não selecionado é superfície branca com borda;
 * selecionado é o roxo da marca chapado, com um "check" discreto na borda
 * direita. É o mesmo desenho de estado ativo do painel (aba de período do
 * Dashboard: fundo --ag-primary, texto branco, peso 600). O rótulo permanece
 * centralizado nos dois estados — o padding lateral simétrico reserva o espaço
 * do check, então nada se desloca quando a escolha muda.
 */
.bfcv-signup-choice {
    position: relative;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border: 1px solid #dee3f0;
    border-radius: 10px;
    background: #fff;
    color: #3d4561;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.bfcv-signup-choice strong {
    font: inherit;
}

/*
 * Camada de compatibilidade com o app de cadastro (React).
 *
 * Lá dentro vale o reset `#agentech-signup-root button { font: inherit }`, que
 * carrega um ID e vence qualquer seletor de classe deste arquivo — o mesmo
 * motivo já documentado acima para a cor do texto. Sem estas três linhas o
 * botão herdava os 16px/400 do cartão e o rótulo saía no peso do <strong> do
 * reset, ou seja: a escala daqui simplesmente não chegava a valer no app.
 * São duplicatas do que já está declarado acima, não regras novas.
 */
#agentech-signup-root .bfcv-signup-choice {
    font-size: 14px;
    font-weight: 500;
}

#agentech-signup-root .bfcv-signup-choice.is-selected {
    font-weight: 600;
}

#agentech-signup-root .bfcv-signup-choice strong {
    font: inherit;
}

.bfcv-signup-choice:hover:not(:disabled) {
    border-color: var(--bfcv-purple-line);
    background: var(--bfcv-purple-faint);
    color: var(--bfcv-purple);
}

.bfcv-signup-choice:focus-visible {
    /* O app inteiro marca foco com anel em box-shadow para respeitar o raio; o
     * outline transparente preserva o foco no modo de alto contraste. */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--bfcv-purple);
    box-shadow: 0 0 0 3px rgba(68, 57, 189, .18);
}

.bfcv-signup-choice.is-selected {
    border-color: var(--bfcv-purple);
    background: var(--bfcv-purple);
    color: #fff;
    font-weight: 600;
}

.bfcv-signup-choice.is-selected:hover:not(:disabled) {
    border-color: var(--bfcv-purple-strong);
    background: var(--bfcv-purple-strong);
    color: #fff;
}

.bfcv-signup-choice:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/*
 * O <span> do marcador continua no DOM (o JS o cria e o marca como decorativo);
 * aqui ele deixa de ser bolinha e passa a ser o "check" do estado selecionado.
 * Máscara em vez de <svg> para não mexer no JS: a cor vem de currentColor, e o
 * ícone acompanha o rótulo em qualquer estado.
 */
.bfcv-signup-choice__marker {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s var(--bfcv-ease);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.bfcv-signup-choice.is-selected .bfcv-signup-choice__marker {
    opacity: 1;
    transform: none;
}

.bfcv-signup-question__feedback {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--bfcv-danger);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.bfcv-signup-question__feedback[hidden] {
    display: none;
}

.bfcv-signup-question__feedback svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: .5px;
}

.bfcv-signup-question__feedback.is-busy {
    color: var(--bfcv-muted);
    font-weight: 400;
}

.bfcv-signup-spinner {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    border: 2px solid rgba(68, 57, 189, .22);
    border-top-color: var(--bfcv-purple);
    border-radius: 50%;
    animation: bfcvSpin .8s linear infinite;
}

/* ---------- Estado de carregamento ---------- */

/*
 * Esqueleto com a mesma silhueta do bloco final (título, duas linhas de apoio,
 * dois botões). O bloco entra no fluxo logo acima de "Continuar": um status de
 * uma linha empurraria a barra de ações quando a resposta chegasse.
 */
.bfcv-signup-skeleton {
    display: grid;
    gap: 5px;
}

.bfcv-signup-skeleton span {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e9e7f6 25%, #f5f4fc 45%, #e9e7f6 65%);
    background-size: 200% 100%;
    animation: bfcvShimmer 1.4s ease-in-out infinite;
}

/* As margens abaixo alinham a altura do esqueleto (~147px) à do bloco já
 * resolvido, para a barra de ações não pular quando a resposta chega. */
.bfcv-signup-skeleton span:nth-child(1) { width: 62%; height: 13px; }
.bfcv-signup-skeleton span:nth-child(2) { width: 100%; margin-top: 8px; }
.bfcv-signup-skeleton span:nth-child(3) { width: 74%; }
.bfcv-signup-skeleton span:nth-child(4) { height: 46px; border-radius: 10px; margin-top: 14px; }

/* ---------- Estado de erro sem contexto ---------- */

.bfcv-signup-question__status {
    margin: 16px 0 6px;
    padding: 14px 15px;
    border: 1px solid var(--bfcv-border);
    border-radius: 14px;
    background: var(--bfcv-surface);
    color: var(--bfcv-muted);
    font-size: 12px;
    line-height: 1.5;
}

.bfcv-signup-question__status.is-error {
    border-color: #f3cdc7;
    background: #fdf5f4;
    color: #8f2018;
}

.bfcv-signup-question__status p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.bfcv-signup-retry {
    /* Este é o único caminho de volta quando o contexto falha; no toque ele
     * precisa do alvo cheio, mesmo que a pílula equivalente do app pare em 37px. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 16px;
    border: 1px solid #e6bdb7;
    border-radius: 999px;
    background: #fff;
    color: #8f2018;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: border-color .18s ease, background-color .18s ease;
}

.bfcv-signup-retry:hover {
    border-color: #d79a92;
    background: #fff8f7;
}

.bfcv-signup-retry:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .16);
}

@keyframes bfcvReveal {
    from { opacity: 0; transform: translateY(6px); }
}

@keyframes bfcvShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes bfcvSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bfcv-signup-question,
    .bfcv-signup-choice,
    .bfcv-signup-choice__marker,
    .bfcv-signup-retry,
    .bfcv-signup-skeleton span {
        animation: none;
        transition: none;
    }

    /* O spinner é o único sinal de que a gravação está em curso: em vez de
     * removê-lo, desacelera. */
    .bfcv-signup-spinner {
        animation-duration: 2.4s;
    }

    /* Sem transição, o check do estado selecionado precisa nascer no lugar. */
    .bfcv-signup-choice.is-selected .bfcv-signup-choice__marker {
        transform: none;
    }
}