/**
 * Planos no painel de agendamento.
 *
 * O bloco vive dentro do painel do Booknetic, então segue a linguagem visual
 * dele (cantos suaves, cinzas neutros) em vez de impor um estilo próprio. O
 * destaque fica só no preço e no botão, que é o que o cliente precisa comparar.
 */

.agss-bp {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #E6E9F0);

    /*
     * O ponto de quebra tem que sair DAQUI, não da janela: o painel de
     * agendamento tem 711px dentro de uma janela de 1366, e ainda muda de
     * largura conforme o trilho lateral do skin apareça ou não. `@media`
     * mediria a janela e nunca dispararia quando quem está apertado é o bloco.
     *
     * ⚠️ Seguro porque o `.agss-bp-modal` é IRMÃO deste elemento, não
     * descendente: `container-type: inline-size` torna o elemento bloco
     * contêiner de qualquer `position: fixed` dentro dele, e a janela de
     * assinatura deixaria de cobrir a viewport. Mesma armadilha que a landing
     * de ativação pagou na 1.15.0 — se algum dia o modal for movido para
     * dentro, esta linha precisa sair junto.
     */
    container-type: inline-size;
    container-name: agssbp;
}

.agss-bp__header {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
}

.agss-bp__title {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.011em;
    color: var(--ink, #1E2337);
}

.agss-bp__subtitle {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted, #6B7288);
}

/**
 * Selo na linha do serviço.
 *
 * Vive DENTRO do título, e é por isso que precisa de `white-space: nowrap` e
 * de vertical-align: o título do serviço já é `text-overflow: ellipsis` numa
 * linha só, e um selo que quebre empurraria o nome para fora.
 */
.agss-bp-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: 1px;
}

.agss-bp-tag--livre {
    background: color-mix(in srgb, #1F9D5F 13%, transparent);
    color: #16794A;
}

.agss-bp-tag--esgotado,
.agss-bp-tag--sem_credito {
    background: color-mix(in srgb, #B4531A 13%, transparent);
    color: #B4531A;
}

/* Segundo cabeçalho: quando o visitante já assina, "Outros planos" vem depois
   do saldo dele e precisa de ar para não colar na lista de cima. */
.agss-bp__header--second {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line, #E6E9F0);
}

/**
 * O QUE O ASSINANTE JÁ TEM.
 *
 * Lista compacta, não linhas do tamanho das de serviço: aqui não há ação nem
 * escolha — é leitura. Dar a elas o mesmo peso visual das opções clicáveis
 * faria o cliente tentar clicar no que já é dele.
 */
.agss-bp-mine {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agss-bp-mine__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 13px;
    border-radius: var(--r-md, 9px);
    font-size: 13px;
    line-height: 1.45;
}

.agss-bp-mine__mark {
    flex: none;
    /* `translateY` porque o alinhamento é por linha de base do texto: sem isso
       o ícone flutua acima das letras. */
    transform: translateY(2px);
}

.agss-bp-mine__name {
    font-weight: 600;
    color: var(--ink, #1E2337);
}

.agss-bp-mine__detail {
    margin-left: auto;
    text-align: right;
    color: var(--muted, #6B7288);
}

/* Disponível: verde discreto. O destaque forte fica para o que está bloqueado —
   é essa a informação que muda o que o cliente vai fazer agora. */
.agss-bp-mine__item--livre .agss-bp-mine__mark { color: #1F9D5F; }

.agss-bp-mine__item--esgotado,
.agss-bp-mine__item--sem_credito {
    background: color-mix(in srgb, #B4531A 8%, transparent);
}

.agss-bp-mine__item--esgotado .agss-bp-mine__mark,
.agss-bp-mine__item--sem_credito .agss-bp-mine__mark {
    color: #B4531A;
}

.agss-bp-mine__item--esgotado .agss-bp-mine__detail,
.agss-bp-mine__item--sem_credito .agss-bp-mine__detail {
    color: #B4531A;
    font-weight: 600;
}

/* Bloqueado com o nome apagado pareceria desativado por outro motivo; o que
   está indisponível é a vez, não o serviço. */
.agss-bp-mine__item--esgotado .agss-bp-mine__name,
.agss-bp-mine__item--sem_credito .agss-bp-mine__name {
    color: var(--ink, #1E2337);
}

/**
 * A LINHA do plano — mesma forma do item de serviço logo acima.
 *
 * Os valores não são inventados: são os do `.afb-opt` do skin do painel
 * (`agendamento-for-booknetic`), que é o item que o cliente vê na lista.
 * Círculo de 42, `gap` 12, `padding` 11/13, `margin-bottom` 6.
 *
 * ⚠️ **Por que consumir as variáveis do skin em vez de vestir `.afb-opt`.**
 * Pôr a classe dele na nossa marcação faria os dois conjuntos de regras
 * incidirem no mesmo elemento, e aí qualquer ajuste nosso vira disputa de
 * especificidade com um arquivo de outro plugin. Lendo `var(--x, fallback)` a
 * regra é só nossa: **com** o skin herda a paleta dele — inclusive a cor de
 * marca do próprio negócio, que vem do módulo Appearance — e **sem** o skin
 * cai nos neutros do Booknetic nativo. Um conjunto de regras, dois ambientes.
 */
.agss-bp__list {
    display: block;
}

.agss-bp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 6px;
    background: var(--card, #FFFFFF);
    border: 1px solid var(--line, #E6E9F0);
    border-radius: var(--r-md, 9px);
    text-align: left;
    transition: border-color 150ms cubic-bezier(.22, 1, .36, 1);
}

.agss-bp-card:last-child {
    margin-bottom: 0;
}

.agss-bp-card:hover {
    border-color: var(--line-2, #C7D2FE);
}

/* Mesmo diâmetro e mesmo redondo da foto do serviço, para as linhas
   alinharem pela coluna da esquerda. */
.agss-bp-card__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg, #F4F5F9);
    color: var(--brand, #4F46E5);
}

.agss-bp-card__body {
    flex: 1;
    min-width: 0;
    display: block;
}

.agss-bp-card__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.011em;
    color: var(--ink, #1E2337);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ocupa o lugar da duração do serviço. Uma linha, com reticências: a lista
   inteira de bullets é o que fazia o bloco crescer para 304px de altura. */
.agss-bp-card__meta {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted, #6B7288);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Espelha o `.afb-opt__note` do serviço: no máximo duas linhas. */
.agss-bp-card__note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted, #6B7288);
}

.agss-bp-card__price {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.25;
}

.agss-bp-card__price strong {
    font-size: 14px;
    font-weight: 650;
    color: var(--ink, #1E2337);
}

.agss-bp-card__price small {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted, #6B7288);
    white-space: nowrap;
}

/* `flex: none` é o que impede o botão de virar a barra roxa de antes: na
   coluna ele esticava para 100% da largura do card. */
.agss-bp .agss-bp-card__btn {
    flex: none;
    cursor: pointer;
}

/**
 * Sem o skin do painel (`afb-btn`) a vitrine desenha o próprio botão. Com
 * ele, quem manda é o skin: assim o botão sai na cor do próprio negócio,
 * igual ao "Continuar" logo abaixo.
 */
.agss-bp .agss-bp-card__btn:not(.afb-btn) {
    padding: 0 15px;
    height: 36px;
    border: 0;
    border-radius: var(--r-md, 8px);
    background: var(--brand, #4F46E5);
    color: var(--brand-ink, #FFFFFF);
    font-size: 13px;
    font-weight: 600;
    transition: filter .18s ease;
}

.agss-bp .agss-bp-card__btn:not(.afb-btn):hover {
    filter: brightness(.92);
}

/**
 * Bloco estreito: o preço e o botão descem para uma segunda linha em vez de
 * espremer o nome. O círculo sai — com pouca largura ele custa 54px que o
 * nome precisa mais.
 */
@container agssbp (max-width: 520px) {
    .agss-bp-card {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .agss-bp-card__icon {
        display: none;
    }

    .agss-bp-card__body {
        flex: 1 0 100%;
    }

    .agss-bp-card__price {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .agss-bp .agss-bp-card__btn {
        margin-left: auto;
    }
}

/* Janela de assinatura ----------------------------------------------------- */

.agss-bp-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.agss-bp-modal[hidden] {
    display: none;
}

.agss-bp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 35, .55);
}

.agss-bp-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 20, 35, .28);
    overflow: hidden;
}

.agss-bp-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #E6E9F0;
    font-size: 15px;
    font-weight: 700;
    color: #1E2337;
}

.agss-bp-modal__close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #6B7288;
    cursor: pointer;
}

.agss-bp-modal__body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agss-bp-modal__plan {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    /* Segue a marca do negócio, como o botão de confirmar (`afb-btn--p`) já
       fazia — antes o título saía índigo ao lado de um botão magenta. */
    color: var(--brand, #4F46E5);
}

.agss-bp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* O skin do painel repinta `span` com cinza claro; o rótulo do campo precisa
   continuar legível (contraste mínimo de texto). */
.agss-bp-modal .agss-bp-field > span {
    font-size: 13px;
    font-weight: 500;
    color: #414A63;
}

.agss-bp-modal .agss-bp-modal__note,
.agss-bp-modal .agss-bp-modal__plan {
    color: #414A63;
}

.agss-bp-modal .agss-bp-modal__plan {
    color: var(--brand, #4F46E5);
}

/**
 * Os campos da janela vivem dentro do TEMA do site, não só do painel — e o
 * tema tem regra própria para `input`. É por isso que tudo aqui é declarado
 * explicitamente e com folga de especificidade.
 *
 * ⚠️ **O defeito de 28/08, e a conta que o explica.** O campo ficava PRETO ao
 * receber foco. O `Booknetic-for-Theme` define `--bft-color-surface: #080b18`
 * (escuro) e pinta input com ele em duas regras:
 *
 *   `.bft-v4 :where(input…)`         -> (0,1,0)  perde da nossa (0,1,1)
 *   `.bft-v4 :where(input…):focus`   -> (0,2,0)  GANHAVA da nossa (0,1,1)
 *
 * `:where()` não soma especificidade, então a diferença entre as duas é só o
 * `:focus`. Em repouso o campo saía branco e no foco virava `#080b18` a 94% —
 * com o nosso texto escuro por cima, ilegível. O nosso `:focus` não declarava
 * fundo nenhum, então não havia o que disputar.
 *
 * Daí o prefixo `.agss-bp-modal` em tudo: leva a base para (0,2,1) e o foco
 * para (0,3,1), com folga sobre as regras genéricas do tema — sem `!important`,
 * que só empurraria a disputa para o próximo round.
 */
.agss-bp-modal .agss-bp-field input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line, #DDE1EA);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink, #1E2337);
    background: var(--card, #FFFFFF);
}

/**
 * ⚠️ **Fundo e cor precisam ser REDECLARADOS no foco**, mesmo idênticos aos de
 * repouso: é a regra `:focus` do tema que eles existem para vencer. Apagar
 * estas duas linhas por parecerem redundantes traz o campo preto de volta.
 *
 * ⚠️ **E o anel é `outline`, não `box-shadow`** — por dois motivos. O tema já
 * usa `box-shadow` no `:focus-visible` dele, e a neutralização de
 * preenchimento automático (logo abaixo) também depende de `box-shadow`. Três
 * coisas na mesma propriedade é uma se apagando pela outra.
 */
.agss-bp-modal .agss-bp-field input:focus {
    background: var(--card, #FFFFFF);
    color: var(--ink, #1E2337);

    /* Navegador sem `color-mix` descarta a declaração inteira e ficaria SEM
       anel de foco — o que quebra a navegação por teclado. A linha de cima é o
       piso; a de baixo assume onde `color-mix` existe. */
    outline: 3px solid rgba(79, 70, 229, .22);
    outline: 3px solid color-mix(in srgb, var(--brand, #4F46E5) 22%, transparent);
    outline-offset: 0;
    border-color: #4F46E5;
    border-color: var(--brand, #4F46E5);
}

/**
 * Preenchimento automático do navegador.
 *
 * ⚠️ Isto **não** era a causa do campo preto de 28/08 — aquilo era o tema, na
 * regra acima. Mas o fundo que o Chrome pinta em campo autopreenchido de fato
 * ignora `background-color`, e a única forma de cobri-lo é uma sombra interna
 * que tampa o campo. O skin do painel tem a dele em `.afb input:-webkit-autofill`;
 * depender dela seria depender de estarmos dentro da ilha React **e** de o skin
 * estar instalado. Sem o skin não existe `.afb` nenhum.
 *
 * A transição de 9999s é o truque conhecido para impedir o fundo nativo de
 * reaparecer quando a animação do navegador termina.
 */
.agss-bp-modal input:-webkit-autofill,
.agss-bp-modal input:-webkit-autofill:hover,
.agss-bp-modal input:-webkit-autofill:focus,
.agss-bp-modal input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--card, #FFFFFF) inset;
    box-shadow: 0 0 0 1000px var(--card, #FFFFFF) inset;
    -webkit-text-fill-color: var(--ink, #1E2337);
    caret-color: var(--ink, #1E2337);
    transition: background-color 9999s ease-in-out 0s;
}

.agss-bp-modal__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6B7288;
}

.agss-bp-modal__error {
    padding: 10px 12px;
    border-radius: 8px;
    background: #FEE2E2;
    color: #B91C1C;
    font-size: 13px;
}

.agss-bp-modal__error[hidden] {
    display: none;
}

.agss-bp-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #E6E9F0;
    background: #F8F9FC;
}

/* Com o skin do painel (`afb-btn`) os botões herdam a cor do negócio; sem ele,
   a janela desenha os próprios. */
.agss-bp-modal__cancel,
.agss-bp-modal__confirm {
    cursor: pointer;
}

.agss-bp-modal__cancel:not(.afb-btn),
.agss-bp-modal__confirm:not(.afb-btn) {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

.agss-bp-modal__cancel:not(.afb-btn) {
    background: #FFFFFF;
    border-color: #DDE1EA;
    color: #414A63;
}

.agss-bp-modal__confirm:not(.afb-btn) {
    background: #4F46E5;
    color: #FFFFFF;
}

.agss-bp-modal__confirm:not(.afb-btn):hover {
    background: #4338CA;
}

@media (max-width: 480px) {
    .agss-bp__grid {
        grid-template-columns: 1fr;
    }
}