/* Telas de plano e pagamento.
   Mobile-first como o resto do app; usa as variaveis de brand.css. */

.mnt-cabecalho {
    display: grid;
    gap: 4px;
}

.mnt-nota {
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* =========================================================================
   Fluxo de pagamento -- prefixo `ckt-`.

   Duas telas, um desenho so: `/assinatura/checkout/<plano>/` (etapas 1 e 2) e
   `/assinatura/pagamento/<id>/` (etapa 3). As duas usam
   `monetizacao/base_checkout.html`, que nao tem menu inferior nem barra
   lateral -- quem esta pagando nao deve ter cinco atalhos para sair.

   Coluna unica e estreita tambem no desktop: e um formulario curto, e
   espalhar em duas colunas so aumenta o caminho dos olhos.
   ========================================================================= */

.app-shell--ckt { background: var(--fxm-gray-100); }
.app-shell--ckt .app-screen { padding-bottom: 40px; }

.ckt {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* O `.button` do app nao zera a borda nem a fonte do elemento <button>;
   nas outras telas ele quase sempre e <a>. Aqui e botao de verdade. */
.ckt .button {
    border: 0;
    font-family: var(--fxm-font);
    font-size: 15px;
    cursor: pointer;
}

/* --- cabecalho ------------------------------------------------------ */

.ckt-topo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.ckt-topo__sair {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-700);
}

.ckt-topo__sair svg { width: 17px; height: 17px; }
.ckt-topo__sair:hover { background: var(--fxm-gray-300); }

.ckt-topo__marca { justify-self: center; display: inline-flex; }

.ckt-topo__seguro {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fxm-green);
    font-size: 11.5px;
    font-weight: 800;
}

.ckt-topo__seguro svg { width: 14px; height: 14px; }

/* --- trilha de etapas ----------------------------------------------- */

.ckt-etapas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2px 0 2px;
    padding: 0;
    list-style: none;
}

.ckt-etapa {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

/* Trilho que liga uma bola a anterior. Fica ATRAS das bolas (z-index) para
   nao cortar o numero. */
.ckt-etapa::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--fxm-gray-300);
}

.ckt-etapa:first-child::before { display: none; }

.ckt-etapa__bola {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fxm-gray-300);
    color: var(--fxm-gray-500);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ckt-etapa__nome {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fxm-gray-500);
}

/* Etapa em curso. O estado vem de `data-ckt-etapa-atual` no <ol>: no checkout
   quem o troca e o JS, sem recarregar; na tela de acompanhamento vem pronto do
   servidor. Um `data-` so, e a mesma marcacao serve as duas. */
.ckt-etapas[data-ckt-etapa-atual="1"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="3"] .ckt-etapa__bola {
    background: var(--fxm-purple);
    color: var(--fxm-white);
    box-shadow: 0 0 0 3px var(--fxm-purple-soft);
}

.ckt-etapas[data-ckt-etapa-atual="1"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__nome,
.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__nome,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="3"] .ckt-etapa__nome {
    color: var(--fxm-gray-900);
}

/* Etapa ja vencida: o numero some e vira confirmacao. */
.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__bola {
    background: var(--fxm-green);
    color: transparent;
}

.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola::after,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola::after,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__bola::after {
    content: '\2713';
    position: absolute;
    color: var(--fxm-white);
    font-size: 13px;
}

.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="2"]::before,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="2"]::before,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="3"]::before {
    background: var(--fxm-green);
}

/* --- resumo do pedido ------------------------------------------------ */

.ckt-pedido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-white);
}

.ckt-pedido__texto { min-width: 0; }

.ckt-pedido__rotulo {
    margin: 0;
    color: var(--fxm-gray-500);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ckt-pedido__nome { margin: 3px 0 0; font-size: 16px; font-weight: 800; line-height: 1.2; }

.ckt-pedido__prazo {
    margin: 4px 0 0;
    color: var(--fxm-gray-500);
    font-size: 12px;
    line-height: 1.4;
}

.ckt-pedido__preco {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    color: var(--fxm-gray-900);
}

.ckt-pedido__preco span { font-size: 13px; font-weight: 700; }

.ckt-pedido__preco strong {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* --- blocos de etapa ------------------------------------------------- */

.ckt-fluxo { display: grid; }

.ckt-bloco {
    padding: 18px 16px 20px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-lg);
    background: var(--fxm-white);
}

.ckt-bloco__titulo { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }

.ckt-ajuda {
    margin: 12px 0 0;
    color: var(--fxm-gray-700);
    font-size: 13.5px;
    line-height: 1.5;
}

.ckt-rodape {
    margin: 16px 0 0;
    color: var(--fxm-gray-500);
    font-size: 11.5px;
    line-height: 1.45;
    text-align: center;
}

/* --- etapa 1: escolha do metodo -------------------------------------- */

.ckt-metodos { display: grid; gap: 10px; margin: 14px 0 16px; }

.ckt-metodo {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.ckt-metodo:hover { border-color: var(--fxm-purple); }

/* O radio continua no DOM e focavel pelo teclado -- so nao e ele que se ve. */
.ckt-metodo input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ckt-metodo__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-700);
}

.ckt-metodo__icone svg { width: 21px; height: 21px; }

.ckt-metodo__texto { display: grid; gap: 2px; min-width: 0; }
.ckt-metodo__texto b { font-size: 15px; font-weight: 800; }

.ckt-metodo__texto small {
    color: var(--fxm-gray-500);
    font-size: 12.5px;
    line-height: 1.4;
}

.ckt-metodo__marca {
    width: 20px;
    height: 20px;
    border: 2px solid var(--fxm-gray-300);
    border-radius: 50%;
}

.ckt-metodo:has(input:checked) {
    border-color: var(--fxm-purple);
    box-shadow: 0 0 0 3px var(--fxm-purple-soft);
}

.ckt-metodo:has(input:checked) .ckt-metodo__icone {
    background: var(--fxm-purple-soft);
    color: var(--fxm-purple);
}

.ckt-metodo:has(input:checked) .ckt-metodo__marca {
    border-color: var(--fxm-purple);
    background: radial-gradient(circle, var(--fxm-purple) 0 45%, transparent 47%);
}

.ckt-metodo:has(input:focus-visible) {
    outline: 2px solid var(--fxm-purple);
    outline-offset: 2px;
}

.ckt-avancar { width: 100%; }

.ckt-cupom {
    margin: 14px 0 18px;
    padding: 14px;
    border: 1px solid var(--fxm-gray-200);
    border-radius: var(--fxm-radius-md);
    background: #f8f9fc;
}

.ckt-cupom > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.ckt-cupom__linha { display: flex; gap: 8px; }
.ckt-cupom__linha input { min-width: 0; flex: 1; }
.ckt-cupom [data-ckt-cupom-mensagem] { min-height: 1em; margin: 7px 0 0; color: var(--fxm-gray-700); font-size: 12px; }
.ckt-cupom [data-ckt-cupom-mensagem]:not(:empty) { line-height: 1.4; }

@media (max-width: 420px) {
    .ckt-cupom__linha { flex-direction: column; }
}

/* --- etapa 2: pagamento ---------------------------------------------- */

.ckt-escolhido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fxm-gray-100);
}

.ckt-escolhido__voltar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fxm-purple);
    font-family: var(--fxm-font);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}

.ckt-escolhido__voltar svg { width: 15px; height: 15px; }

.ckt-escolhido__nome {
    color: var(--fxm-gray-700);
    font-size: 13.5px;
    font-weight: 700;
}

/* --- etapa 3: desfecho ----------------------------------------------- */

.ckt-desfecho {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 18px 24px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-lg);
    background: var(--fxm-white);
    text-align: center;
}

.ckt-marca {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-700);
}

.ckt-marca svg { width: 28px; height: 28px; }
.ckt-marca--ok { background: var(--fxm-green-soft); color: var(--fxm-green); }
.ckt-marca--erro { background: var(--fxm-red-soft); color: var(--fxm-red); }

.ckt-desfecho__titulo { margin: 4px 0 0; font-size: 21px; font-weight: 800; line-height: 1.2; }

.ckt-desfecho__texto {
    max-width: 36ch;
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
    line-height: 1.55;
}

.ckt-desfecho__acao { width: 100%; margin-top: 8px; }

.ckt-desfecho__link {
    margin-top: 2px;
    color: var(--fxm-gray-500);
    font-size: 13.5px;
    font-weight: 700;
}

.ckt-pix { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 6px; }

.ckt-pix__qr {
    width: 100%;
    max-width: 230px;
    height: auto;
    border-radius: var(--fxm-radius-sm);
}

.ckt-pix__campo { width: 100%; text-align: left; }

.ckt-pix__copiar {
    width: 100%;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-900);
}

.ckt-pix__validade { margin: 0; color: var(--fxm-gray-500); font-size: 12.5px; }

@media (min-width: 760px) {
    .ckt { gap: 16px; }
    .ckt-bloco { padding: 24px 22px 26px; }
    .ckt-desfecho { padding: 34px 26px 28px; }
    .ckt-etapa__nome { font-size: 12.5px; }
}

.mnt-link-secundario {
    display: inline-block;
    margin-top: 12px;
    color: var(--fxm-gray-500);
    font-size: 14px;
    font-weight: 700;
}

/* --- Avisos --- */

.mnt-aviso {
    border-radius: var(--fxm-radius-md);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}

.mnt-aviso--ok {
    background: var(--fxm-green-soft);
    color: #0f7a48;
}

.mnt-aviso--atencao {
    background: var(--fxm-orange-soft);
    color: #8a5a06;
}

.mnt-aviso code {
    font-size: 12.5px;
    word-break: break-all;
}

.mnt-erro {
    margin: 0;
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-red-soft);
    color: #a3283a;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* --- Cards de preco --- */

.mnt-precos {
    display: grid;
    gap: 14px;
}

.mnt-preco {
    position: relative;
    display: grid;
    gap: 6px;
    background: var(--fxm-white);
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-lg);
    padding: 20px 18px;
}

.mnt-preco--destaque {
    border-color: var(--fxm-purple);
    border-width: 2px;
    box-shadow: var(--fxm-shadow-soft);
}

.mnt-selo {
    position: absolute;
    top: -11px;
    left: 18px;
    background: var(--fxm-purple);
    color: var(--fxm-white);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.mnt-preco__nome {
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
    font-weight: 700;
}

.mnt-preco__mensal {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
    color: var(--fxm-ink);
}

.mnt-preco__cifra {
    font-size: 17px;
    font-weight: 700;
}

.mnt-preco__valor {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.mnt-preco__por {
    color: var(--fxm-gray-500);
    font-size: 15px;
    font-weight: 700;
}

.mnt-preco__total {
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
}

.mnt-preco__desconto {
    margin: 2px 0 0;
    display: inline-block;
    width: fit-content;
    background: var(--fxm-green-soft);
    color: #0f7a48;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 700;
}

.mnt-preco__chamada {
    margin: 4px 0 0;
    color: var(--fxm-gray-500);
    font-size: 13.5px;
    line-height: 1.5;
}

.mnt-preco__cta {
    margin-top: 12px;
    width: 100%;
    text-transform: capitalize;
}

/* --- Listas de recurso --- */

.mnt-lista {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.mnt-lista__item {
    position: relative;
    padding-left: 26px;
    color: var(--fxm-gray-700);
    font-size: 14.5px;
    line-height: 1.45;
}

.mnt-lista__item::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.mnt-lista__item--sim::before {
    content: '\2713';
    color: var(--fxm-green);
}

.mnt-lista__item--nao {
    color: var(--fxm-gray-500);
}

.mnt-lista__item--nao::before {
    content: '\2715';
    color: var(--fxm-gray-500);
}

.mnt-gratuito {
    border-style: dashed;
}

/* --- Checkout --- */

.mnt-resumo__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
}

.mnt-resumo__linha strong {
    font-size: 20px;
    font-weight: 800;
}

.mnt-resumo__nota {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.mnt-resumo__aviso {
    margin: 10px 0 0;
    color: #0f7a48;
    font-size: 13px;
    line-height: 1.5;
}

.mnt-abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--fxm-gray-100);
    border-radius: var(--fxm-radius-md);
    padding: 5px;
}

.mnt-aba {
    border: 0;
    background: transparent;
    border-radius: var(--fxm-radius-sm);
    padding: 11px 8px;
    color: var(--fxm-gray-500);
    font-family: var(--fxm-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mnt-aba--ativa {
    background: var(--fxm-white);
    color: var(--fxm-ink);
    box-shadow: 0 1px 3px rgba(20, 20, 31, 0.12);
}

.mnt-carregando {
    margin: 0;
    color: var(--fxm-gray-500);
    font-size: 14px;
    text-align: center;
}

/* --- Formularios --- */

.mnt-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.mnt-campo {
    display: grid;
    gap: 6px;
}

.mnt-campo > span {
    color: var(--fxm-gray-700);
    font-size: 13px;
    font-weight: 700;
}

.mnt-campo input,
.mnt-campo textarea {
    width: 100%;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-sm);
    padding: 12px 14px;
    background: var(--fxm-white);
    color: var(--fxm-ink);
    font-family: var(--fxm-font);
    /* 16px evita o zoom automatico do Safari no iOS ao focar o campo. */
    font-size: 16px;
}

.mnt-campo input:focus,
.mnt-campo textarea:focus {
    outline: 2px solid var(--fxm-purple);
    outline-offset: 1px;
    border-color: var(--fxm-purple);
}

.mnt-submit {
    width: 100%;
    margin-top: 4px;
}

.mnt-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* --- Pix --- */

.mnt-pix {
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
}

.mnt-pix .mnt-campo {
    width: 100%;
    text-align: left;
}

.mnt-pix__qr {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: var(--fxm-radius-sm);
}

.mnt-pix__codigo {
    resize: none;
    font-size: 12.5px;
    word-break: break-all;
}

.mnt-pix__validade {
    margin: 0;
    font-size: 13px;
}

.mnt-pix__espera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
    font-weight: 600;
}

.mnt-pulso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fxm-green);
    animation: mnt-pulsar 1.4s ease-in-out infinite;
}

@keyframes mnt-pulsar {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mnt-pulso { animation: none; opacity: 1; }
}

/* --- Desfecho --- */

.mnt-final {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    padding: 26px 18px;
}

.mnt-final__icone {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
    background: var(--fxm-green-soft);
    color: var(--fxm-green);
    font-size: 26px;
    font-weight: 800;
}

.mnt-final .button {
    margin-top: 8px;
    width: 100%;
}

/* --- Telas maiores --- */

@media (min-width: 620px) {
    .mnt-precos {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .mnt-final .button,
    .mnt-preco__cta {
        width: auto;
        min-width: 220px;
        justify-self: center;
    }
}


.mnt-planos { display: grid; gap: 16px; }

.mnt-premium { display: grid; gap: 0; }

/* ---------- Premium: um produto, dois periodos ----------
   Os dois planos pagos liberam os mesmos recursos e limites; muda so o preco
   por mes. Dois cards lado a lado sugeririam produtos diferentes e mandariam
   o aluno procurar uma diferenca de recurso que nao existe. */

.mnt-premium__frase { margin: 6px 0 16px; font-size: 14.5px; line-height: 1.55; }
.mnt-premium__frase strong { color: var(--fxm-gray-900); }

.mnt-periodos { display: grid; gap: 10px; }

.mnt-periodo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 14px;
    padding: 15px 16px;
    border: 1.5px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-white);
    color: var(--fxm-ink);
}
.mnt-periodo:hover { border-color: var(--fxm-purple); }
.mnt-periodo--melhor { border-color: var(--fxm-purple); border-width: 2px; }

.mnt-periodo__quando { font-size: 15.5px; font-weight: 800; }
.mnt-periodo__mes {
    grid-column: 2; grid-row: 1;
    text-align: right;
    font-size: 20px; font-weight: 800; letter-spacing: -.02em;
}
.mnt-periodo__mes span { font-size: 12.5px; font-weight: 700; color: var(--fxm-gray-500); }
.mnt-periodo__total { grid-column: 1 / -1; font-size: 13px; color: var(--fxm-gray-700); }

.mnt-periodo__eco {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fxm-green-soft);
    color: #0f7a48;
    font-size: 11.5px;
    font-weight: 800;
    vertical-align: middle;
}

.mnt-premium__economia {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--fxm-radius-sm);
    background: var(--fxm-gray-100);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fxm-gray-700);
}
.mnt-premium__economia strong { color: var(--fxm-gray-900); }