/* css/doacao.css - pagina /apoiar.
 *
 * Direcao: a pessoa acabou de resolver um prazo. A pagina agradece e facilita, sem
 * parecer checkout. Layout de duas faixas: a ESQUERDA conduz (valor -> o que cobre ->
 * duvidas) e a DIREITA carrega o pagamento em coluna STICKY, entao o QR acompanha a
 * leitura e nunca some da tela.
 *
 * Roda sem o painel branco global do site ($pageDisableMainContainer), por isso
 * define o proprio respiro e a propria largura.
 */

/* RAIZ DO SCROLL LATERAL (bronca 22/Jul): sem box-sizing:border-box, um input com
   width:100% + padding + borda fica MAIOR que o pai e empurra a pagina. Aplicado a
   tudo dentro da pagina, mais um cinto de seguranca de overflow no wrapper. */
.cp-doar, .cp-doar *, .cp-doar *::before, .cp-doar *::after { box-sizing: border-box; }
/* Sem overflow-x aqui: alem de desnecessario (o box-sizing acima resolveu o
   estouro), overflow em ancestral atrapalha position:sticky. */
.cp-doar { max-width: 100%; }

.cp-doar {
    --doar-borda: #e5e8ee;
    --doar-tinta: #0f172a;
    --doar-suave: #64748b;
    width: min(1040px, 100% - clamp(24px, 5vw, 64px));
    margin: clamp(28px, 5vw, 56px) auto clamp(48px, 7vw, 88px);
}

.cp-doar__trilha {
    margin: 0 0 clamp(18px, 3vw, 30px);
    font-size: .84rem;
    color: var(--doar-suave);
}
.cp-doar__trilha a { color: var(--doar-suave); text-decoration: none; }
.cp-doar__trilha a:hover { color: var(--primary-color, #007AFF); text-decoration: underline; }
.cp-doar__trilha span[aria-hidden] { margin: 0 6px; opacity: .6; }

/* ---------- Hero ---------- */
.cp-doar__hero { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 44px); }
.cp-doar__hero h1 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--doar-tinta);
}
.cp-doar__lede {
    margin: 0;
    font-size: clamp(1.02rem, .97rem + .35vw, 1.16rem);
    line-height: 1.65;
    color: #475569;
}

/* ---------- Grid: conteudo + pagamento sticky ---------- */
.cp-doar__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(28px, 3vw, 44px);
    align-items: start;
}
.cp-doar__main { min-width: 0; }
/* STICKY (bronca 22/Jul): o grid usa align-items:start, o que encolhia o aside ate a
   altura do proprio cartao - o sticky ficava com ZERO curso e parecia desligado.
   align-self:stretch devolve a altura da linha e da espaco para ele correr. */
.cp-doar__aside { align-self: stretch; }
.cp-doar__sticky { position: sticky; top: 96px; }

/* ---------- Valores ---------- */
.cp-doar__valores { border: 0; padding: 0; margin: 0 0 clamp(30px, 4vw, 42px); }
.cp-doar__valores legend {
    padding: 0;
    margin: 0 0 16px;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--doar-tinta);
}
.cp-doar__chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.cp-doar__chip {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    border: 1.5px solid var(--doar-borda);
    border-radius: 14px;
    background: #fff;
    color: var(--doar-tinta);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.cp-doar__chip-icone {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: #eef4ff; color: var(--primary-color, #007AFF); font-size: 1.02rem;
    transition: background-color .18s ease, color .18s ease;
}
.cp-doar__chip.is-active .cp-doar__chip-icone { background: rgba(255, 255, 255, .2); color: #fff; }
.cp-doar__chip-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-doar__chip-valor { font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.cp-doar__chip:hover { border-color: #aab3c2; }
.cp-doar__chip:active { transform: translateY(0); }
.cp-doar__chip.is-active {
    border-color: var(--primary-color, #007AFF);
    background: var(--primary-color, #007AFF);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(0, 122, 255, .55);
}
.cp-doar__chip--outro .cp-doar__chip-valor { font-size: 1rem; font-weight: 600; }
.cp-doar__chip-rotulo {
    font-size: .84rem;
    line-height: 1.25;
    color: var(--doar-suave);
}
.cp-doar__chip.is-active .cp-doar__chip-rotulo { color: rgba(255, 255, 255, .88); }
.cp-doar__tag {
    justify-self: end;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: .6rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; line-height: 1; white-space: nowrap;
}

/* ---------- Valor livre ---------- */
.cp-doar__livre { margin-top: 20px; }
.cp-doar__livre > label {
    display: block; font-size: .92rem; font-weight: 600;
    color: var(--doar-tinta); margin-bottom: 8px;
}
.cp-doar__livre-row { display: flex; align-items: stretch; gap: 9px; }
.cp-doar__cifrao { display: flex; align-items: center; font-weight: 600; color: var(--doar-suave); }
.cp-doar__livre-row input {
    flex: 1 1 auto; min-width: 0; max-width: 190px;
    padding: 12px 14px;
    border: 1.5px solid var(--doar-borda); border-radius: 11px;
    font-size: 1.02rem; font-family: inherit; color: var(--doar-tinta);
}
.cp-doar__livre-row input:focus-visible {
    outline: none; border-color: var(--primary-color, #007AFF);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .16);
}
.cp-doar__btn-gerar {
    flex: 0 0 auto; padding: 12px 20px; border: 0; border-radius: 11px;
    background: var(--doar-tinta); color: #fff;
    font-family: inherit; font-size: .94rem; font-weight: 600; cursor: pointer;
    transition: background-color .18s ease;
}
.cp-doar__btn-gerar:hover { background: #1e293b; }
.cp-doar__btn-gerar:disabled { opacity: .6; cursor: default; }
.cp-doar__hint { font-size: .84rem; color: var(--doar-suave); margin: 9px 0 0; }
.cp-doar__erro { font-size: .88rem; color: #b42318; font-weight: 600; margin: 9px 0 0; }

/* ---------- O que o apoio cobre ---------- */
.cp-doar__cobre-titulo {
    font-size: 1.22rem; margin: 0 0 14px; color: var(--doar-tinta); letter-spacing: -.01em;
}
.cp-doar__cobre {
    list-style: none; margin: 0 0 clamp(32px, 4vw, 46px); padding: 0;
    display: grid; gap: 16px;
}
.cp-doar__cobre li {
    display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 12px;
    font-size: .95rem; line-height: 1.55; color: #475569;
}
.cp-doar__cobre i {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: #eef4ff; color: var(--primary-color, #007AFF); font-size: .88rem;
}
.cp-doar__cobre strong { color: var(--doar-tinta); font-weight: 600; }

/* ---------- FAQ ---------- */
.cp-doar__faq-titulo {
    font-size: 1.22rem; margin: 0 0 6px; color: var(--doar-tinta); letter-spacing: -.01em;
}
.cp-doar__faq { border-bottom: 1px solid var(--doar-borda); }
.cp-doar__faq summary {
    padding: 15px 26px 15px 0; position: relative; cursor: pointer;
    font-size: .97rem; font-weight: 600; color: var(--doar-tinta); list-style: none;
}
.cp-doar__faq summary::-webkit-details-marker { display: none; }
.cp-doar__faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; font-weight: 400; color: var(--doar-suave); line-height: 1;
}
.cp-doar__faq[open] summary::after { content: "\2212"; }
.cp-doar__faq p { margin: 0 0 16px; font-size: .94rem; line-height: 1.65; color: #475569; }

/* ---------- Pagamento (aside sticky) ---------- */
/* [hidden] tem display:none do user-agent, que QUALQUER regra de display abaixo
   sobrescreveria: foi assim que os 4 QR apareceram empilhados (bronca 21/Jul). */
.cp-doar__qr[hidden], .cp-doar__livre[hidden] { display: none !important; }
.cp-doar__qr {
    display: flex; flex-direction: column; align-items: center;
    padding: 26px 22px 22px;
    border: 1px solid var(--doar-borda); border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -22px rgba(15, 23, 42, .28);
    animation: cpDoarEntra .34s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cpDoarEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-doar__qr { animation: none; } }

.cp-doar__qr-img { line-height: 0; }
.cp-doar__qr-img svg { width: 100%; max-width: 188px; height: auto; display: block; }
.cp-doar__qr-valor {
    margin: 18px 0 2px; font-size: 1.6rem; font-weight: 700;
    letter-spacing: -.02em; color: var(--doar-tinta);
}
.cp-doar__qr-instrucao { margin: 0; font-size: .87rem; color: var(--doar-suave); text-align: center; }

.cp-doar__copia { width: 100%; margin-top: 18px; }
.cp-doar__copia input {
    display: block;
    width: 100%; max-width: 100%; min-width: 0;
    padding: 9px 11px; margin-bottom: 9px;
    border: 1px solid var(--doar-borda); border-radius: 10px;
    background: #f7f8fa; color: var(--doar-suave);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem; text-overflow: ellipsis;
}
.cp-doar__copiar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px;
    border: 1.5px solid var(--doar-borda); border-radius: 11px;
    background: #fff; color: var(--doar-tinta);
    font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.cp-doar__copiar:hover { border-color: #aab3c2; }
.cp-doar__copiar.is-copiado { background: #067647; border-color: #067647; color: #fff; }

.cp-doar__equivale {
    display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px;
    margin: 18px 0 0; padding: 13px 14px;
    border-radius: 12px; background: #f8fafc;
    font-size: .87rem; line-height: 1.5; color: #475569;
}
.cp-doar__equivale i { color: #b45309; font-size: 1rem; justify-self: center; }
.cp-doar__nota { margin: 12px 0 0; font-size: .78rem; color: var(--doar-suave); text-align: center; }

/* ---------- Apoio mensal ---------- */
.cp-doar__recorrente {
    grid-column: 1 / -1;
    padding: 24px 26px; border: 1px solid var(--doar-borda); border-radius: 16px; margin: 8px 0 0;
}
.cp-doar__recorrente h2 { margin-top: 0; font-size: 1.15rem; }

/* ---------- Responsivo ---------- */
/* Sem espaco para as duas faixas, o QR desce e fica LOGO ABAIXO dos botoes de valor
   (nao no fim da pagina): display:contents promove os filhos do main a itens do grid,
   o que permite intercalar o aside entre a escolha do valor e o resto. */
@media (max-width: 940px) {
    .cp-doar__grid { grid-template-columns: 1fr; }
    .cp-doar__main { display: contents; }
    .cp-doar__valores    { order: 1; margin-bottom: 0; }
    .cp-doar__aside      { order: 2; }
    .cp-doar__cobre-titulo { order: 3; margin-top: clamp(28px, 5vw, 40px); }
    .cp-doar__cobre      { order: 4; }
    .cp-doar__faq-titulo { order: 5; }
    .cp-doar__faq        { order: 6; }
    .cp-doar__recorrente { order: 7; }
    .cp-doar__grid { gap: 22px; }
    .cp-doar__sticky { position: static; }
    .cp-doar__qr { max-width: 380px; margin: 0 auto; }
    .cp-doar__equivale, .cp-doar__nota { max-width: 380px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
    .cp-doar__livre-row { flex-wrap: wrap; }
    .cp-doar__livre-row input { max-width: none; }
    .cp-doar__btn-gerar { width: 100%; }
}

/* ---------- Dark mode ---------- */
body.dark-mode .cp-doar {
    --doar-borda: #26303f;
    --doar-tinta: #f1f5f9;
    --doar-suave: #94a3b8;
}
body.dark-mode .cp-doar__lede,
body.dark-mode .cp-doar__cobre li,
body.dark-mode .cp-doar__faq p,
body.dark-mode .cp-doar__equivale { color: #a8b3c4; }
body.dark-mode .cp-doar__chip { background: #18202c; color: #e5e7eb; }
body.dark-mode .cp-doar__chip:hover { border-color: #3b4759; }
body.dark-mode .cp-doar__chip.is-active {
    background: var(--primary-color, #007AFF); border-color: var(--primary-color, #007AFF); color: #fff;
}
body.dark-mode .cp-doar__livre-row input { background: #0d131b; color: #e5e7eb; }
body.dark-mode .cp-doar__btn-gerar { background: var(--primary-color, #007AFF); }
body.dark-mode .cp-doar__cobre i,
body.dark-mode .cp-doar__chip-icone { background: #16233a; }
body.dark-mode .cp-doar__qr { background: #131a24; box-shadow: none; }
/* QR sempre em fundo claro: a leitura pela camera depende de contraste alto. */
body.dark-mode .cp-doar__qr-img { background: #fff; padding: 12px; border-radius: 12px; }
body.dark-mode .cp-doar__copia input { background: #0d131b; }
body.dark-mode .cp-doar__copiar { background: #18202c; color: #e5e7eb; }
body.dark-mode .cp-doar__equivale { background: #0d131b; }