/* =============================================================================
 * Aceite do convite de parceiro (/parceiro/convite). Fase 2.
 * Ref.: docs/planos/plano-programa-parceiros-cupons.md §3.2.
 *
 * Página pública e sem sessão: não carrega o CSS do app (sidebar/header), então
 * define o próprio tema. Um card centrado, largura confortável de leitura, e as
 * regras do programa visíveis ANTES do formulário — o parceiro precisa ver o
 * que está aceitando sem rolar atrás.
 *
 * IDENTIDADE: mesma da LANDING (e do painel do parceiro) — fundo petróleo,
 * teal, Roboto Slab nos títulos, Inter no corpo. É a primeira tela do parceiro
 * dentro do produto e precisa parecer a mesma marca que ele viu antes. Tokens
 * espelham landing/src/index.css. Sem tema claro: a landing também não tem.
 * ============================================================================= */

:root {
    --pconv-bg: #003347;          /* --mk-deep */
    --pconv-surface: #00425c;     /* --mk-surface */
    --pconv-surface-2: #004d6b;   /* --mk-mid */
    --pconv-border: rgba(255, 255, 255, .10);
    --pconv-text: #ffffff;
    --pconv-muted: rgba(255, 255, 255, .62);
    --pconv-teal: #00b8a6;        /* --mk-teal */
    --pconv-teal-strong: #4fe0d2;
    --pconv-teal-soft: rgba(0, 184, 166, .18);
    --pconv-danger: #ff8b95;

    --pconv-fonte-titulo: 'Roboto Slab', Georgia, serif;
    --pconv-fonte-corpo: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pconv-body {
    margin: 0;
    min-height: 100vh;
    /* Sem `background-attachment: fixed` — ver a nota em parceiro_painel.css. */
    background:
        radial-gradient(1000px 500px at 50% 0, rgba(0, 184, 166, .12), transparent 60%) no-repeat,
        var(--pconv-bg);
    color: var(--pconv-text);
    font-family: var(--pconv-fonte-corpo);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.pconv-wrap {
    max-width: 620px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

.pconv-card {
    background: var(--pconv-surface);
    border: 1px solid var(--pconv-border);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 1px 2px rgba(0, 38, 52, .06), 0 8px 28px rgba(0, 38, 52, .07);
}

.pconv-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
/* Mesma altura do logo no header do app e da landing em telas pequenas (42px);
   a landing usa 63px no desktop. Ver a nota em parceiro_painel.css. */
.pconv-marca img { height: 42px; width: auto; display: block; }

@media (min-width: 520px) {
    .pconv-marca img { height: 52px; }
}

.pconv-eyebrow {
    font-family: var(--pconv-fonte-titulo);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--pconv-teal-strong);
    padding-left: 10px;
    border-left: 1px solid var(--pconv-border);
}

.pconv-titulo {
    font-family: var(--pconv-fonte-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.pconv-texto { color: var(--pconv-muted); margin: 0 0 18px; }

/* --- Cupom em destaque ---------------------------------------------------- */
.pconv-cupom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--pconv-teal-soft);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.pconv-cupom-rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--pconv-teal-strong); }

.pconv-cupom-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--pconv-teal-strong);
}

/* --- Regras --------------------------------------------------------------- */
.pconv-regras {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font-size: .86rem;
}

.pconv-regras li { position: relative; padding: 4px 0 4px 22px; color: var(--pconv-muted); }
.pconv-regras li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pconv-teal);
}
.pconv-regras strong { color: var(--pconv-text); }

/* --- Formulário ----------------------------------------------------------- */
.pconv-form { display: flex; flex-direction: column; gap: 12px; }
.pconv-linha { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 520px) {
    .pconv-linha { grid-template-columns: 1fr 1fr; }
}

.pconv-campo { display: flex; flex-direction: column; gap: 4px; }

.pconv-campo label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--pconv-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pconv-campo input,
.pconv-campo select {
    /* Campo levemente mais escuro que o card: no fundo petróleo, um input da
       mesma cor da superfície some. */
    background: rgba(0, 0, 0, .22);
    color: var(--pconv-text);
    border: 1px solid var(--pconv-border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: .92rem;
    width: 100%;
}

.pconv-campo input:focus,
.pconv-campo select:focus {
    outline: none;
    border-color: var(--pconv-teal);
    box-shadow: 0 0 0 3px var(--pconv-teal-soft);
}

.pconv-campo input:disabled { background: rgba(255, 255, 255, .06); color: var(--pconv-muted); }
.pconv-obrig { color: var(--pconv-danger); }

.pconv-bloco {
    border: 1px solid var(--pconv-border);
    border-radius: 10px;
    padding: 14px;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pconv-bloco legend {
    font-family: var(--pconv-fonte-titulo);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pconv-teal-strong);
    padding: 0 6px;
    width: auto;
    margin: 0;
    float: none;
}

.pconv-dica { font-size: .76rem; color: var(--pconv-muted); margin: 0; }

.pconv-aceite {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .8rem;
    color: var(--pconv-muted);
    background: rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px;
}

.pconv-aceite input { margin-top: 3px; width: 16px; height: 16px; flex: none; }

.pconv-botao {
    display: block;
    width: 100%;
    background: var(--pconv-teal);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.pconv-botao:hover { background: var(--pconv-teal-strong); color: #fff; }
.pconv-botao:disabled { opacity: .6; cursor: default; }

.pconv-erro {
    background: rgba(255, 107, 122, .16);
    color: var(--pconv-danger);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .82rem;
}

.pconv-sucesso { text-align: center; }
.pconv-sucesso i { font-size: 2.4rem; color: var(--pconv-teal); }

.pconv-rodape { text-align: center; font-size: .72rem; color: var(--pconv-muted); margin-top: 18px; }
.pconv-rodape a, .pconv-texto a, .pconv-aceite a { color: var(--pconv-teal-strong); text-underline-offset: 2px; }

/* --- Página de regras ------------------------------------------------------ */
.pconv-wrap-largo { max-width: 780px; }

.pconv-versao {
    font-size: .74rem;
    color: var(--pconv-muted);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pconv-border);
}

.pconv-documento { font-size: .94rem; line-height: 1.7; }
.pconv-documento h2 { font-family: var(--pconv-fonte-titulo); font-size: 1.35rem; margin: 0 0 6px; }
.pconv-documento h3 {
    font-family: var(--pconv-fonte-titulo);
    font-size: 1.02rem;
    margin: 28px 0 8px;
    color: var(--pconv-teal-strong);
}
.pconv-documento p { margin: 0 0 12px; color: rgba(255, 255, 255, .82); }
.pconv-documento ul { margin: 0 0 14px; padding-left: 20px; color: rgba(255, 255, 255, .82); }
.pconv-documento li { margin-bottom: 6px; }
.pconv-documento strong { color: #fff; }
.pconv-documento em { color: var(--pconv-muted); font-style: normal; }

.d-none { display: none !important; }