/* ============================================================
   Pedindo Online — Programa de Afiliados (área pública)
   Design alinhado ao tema (navy + gold, clean/AAA).
   v1.1 — contraste de texto aprimorado (26/08)
   ============================================================ */

/* Raiz: paleta de texto com contraste melhorado */
:root {
	--poa-navy:    #0f2350;
	--poa-navy-2:  #1c3faa;
	--poa-gold:    #b8860b;   /* dourado escuro p/ contraste em fundo claro */
	--poa-gold-bg: #f2c94c;   /* dourado p/ CTA sobre navy */
	--poa-ink:     #1a2233;   /* texto principal forte */
	--poa-body:    #2d3748;   /* corpo legível */
	--poa-muted:   #526079;   /* secundário (contraste >= 4.5:1) */
	--poa-faint:   #6b7a93;   /* terciário leve, ainda legível */
	--poa-ok:      #15803d;   /* verde acessível */
	--poa-bad:     #b91c1c;   /* vermelho acessível */
}

.poa-landing, .poa-auth, .poa-area { max-width: 1080px; margin: 0 auto; padding: 40px 20px; color: var(--poa-body); }

/* ---------- Hero (landing) ---------- */
.poa-hero { background: linear-gradient(135deg, #0f2350 0%, #1c3faa 100%); color: #fff; border-radius: 20px; padding: 48px 36px; text-align: center; }
.poa-hero-badge { display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #f2c94c; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 18px; }
/* Títulos/parágrafos do hero: cor explícita p/ VENCER a regra do tema
   h1..h6{color:var(--po-text)} (que aplica direto e vence herança). */
.poa-hero h1, .poa-hero h2, .poa-hero h3, .poa-hero h4 { color: #fff !important; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.01em; }
.poa-hero h1 strong { color: #f2c94c !important; }
.poa-hero-sub { font-size: 18px; max-width: 640px; margin: 0 auto 28px; opacity: .95; color: #fff !important; }
.poa-hero-sub strong { color: #f2c94c !important; }
.poa-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.poa-hero-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.poa-kpi { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 10px; }
.poa-kpi-num { display: block; font-size: 26px; font-weight: 800; color: #f2c94c; }
.poa-kpi-label { display: block; font-size: 12px; margin-top: 4px; opacity: .92; }

/* ---------- Botões ---------- */
.poa-btn { display: inline-block; text-decoration: none; border: 1px solid transparent; border-radius: 10px; padding: 12px 22px; font-weight: 700; font-size: 15px; cursor: pointer; transition: .18s; line-height: 1.2; background: none; }
a.poa-btn { color: inherit; }
.poa-btn-primary { background: #f2c94c; color: #0f2350; }
.poa-btn-primary:hover { background: #ffd95e; color: #0f2350; }
.poa-btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.poa-btn-ghost:hover { background: rgba(255,255,255,.12); }
.poa-btn-block { display: block; width: 100%; text-align: center; }
.poa-btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.poa-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Seções ---------- */
.poa-section { padding: 44px 8px; }
.poa-section h2 { font-size: 28px; margin: 0 0 26px; color: var(--poa-navy); letter-spacing: -.01em; }
.poa-section-alt { background: #f6f8fc; border-radius: 16px; padding: 44px 28px; }
.poa-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.poa-step { background: #fff; border: 1px solid #e6ebf5; border-radius: 14px; padding: 22px; }
.poa-step-n { width: 34px; height: 34px; border-radius: 50%; background: #1c3faa; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.poa-step h3 { margin: 0 0 8px; font-size: 18px; color: var(--poa-navy); }
.poa-step p { margin: 0; color: var(--poa-body); font-size: 15px; line-height: 1.62; }

/* ---------- Tabelas ---------- */
.poa-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e6ebf5; border-radius: 12px; overflow: hidden; font-size: 15px; }
.poa-table th { background: #f0f4fc; color: var(--poa-navy); text-align: left; padding: 12px 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.poa-table td { padding: 13px 16px; border-top: 1px solid #eef2f9; color: var(--poa-ink); }
.poa-table tr:hover td { background: #fafbff; }
.poa-tar { text-align: right; }
.poa-pos { color: var(--poa-ok); font-weight: 700; }
.poa-neg { color: var(--poa-bad); }

/* ---------- Badges ---------- */
.poa-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.poa-b-pago { background: #e6f4ea; color: #15803d; }
.poa-b-atrasado { background: #fdf3e3; color: #92500a; }
.poa-b-cancelado { background: #fdecea; color: #b91c1c; }
.poa-b-pendente { background: #eef1f7; color: #475569; }
.poa-b-disponivel { background: #e0f2fe; color: #075985; }
.poa-b-aprovado { background: #e6f4ea; color: #15803d; }
.poa-b-recusado { background: #fdecea; color: #b91c1c; }

/* ---------- Notas / alertas ---------- */
.poa-note { color: var(--poa-muted); font-size: 14px; margin: 14px 0 0; line-height: 1.6; }
.poa-alert { border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 14px; line-height: 1.55; }
.poa-alert-error { background: #fdecea; color: #991b1b; border: 1px solid #f7c6c2; }
.poa-alert-success { background: #e6f4ea; color: #166534; border: 1px solid #bfe3c9; }
.poa-alert-info { background: #fef6e0; color: #6b4a08; border: 1px solid #e6c75e; }
.poa-empty { text-align: center; color: var(--poa-muted); padding: 40px 20px; background: #fafbff; border: 1px dashed #d5deee; border-radius: 12px; }

/* ---------- Checklist (transparência) ---------- */
.poa-checklist { list-style: none; padding: 0; margin: 0; }
.poa-checklist li { padding: 10px 0 10px 30px; position: relative; color: var(--poa-ink); font-size: 16px; line-height: 1.55; }
.poa-checklist li::before { content: "✓"; position: absolute; left: 0; top: 10px; color: var(--poa-ok); font-weight: 800; }
.poa-checklist-dark li { color: #2d3748; }
.poa-cta-bottom { margin: 10px 0 30px; }

/* ============================================================
   Landing expandida (rich detail) — novas seções
   ============================================================ */
/* Eyebrow (rótulo acima do título) */
.poa-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--poa-navy-2); margin-bottom: 10px; }
.poa-eyebrow-dark { color: var(--poa-gold); }
.poa-section h2 { position: relative; }
.poa-lead { font-size: 17px; line-height: 1.72; color: var(--poa-ink); max-width: 820px; }
.poa-lead strong { color: var(--poa-navy-2); font-weight: 800; }
.poa-lead-dark { color: var(--poa-ink); }

/* Grade de cards de características */
.poa-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.poa-fcard { background: #fff; border: 1px solid #e6ebf5; border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(15,35,80,.04); }
.poa-fcard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,35,80,.08); }
.poa-fcard-icon { font-size: 26px; display: block; margin-bottom: 12px; }
.poa-fcard h4 { margin: 0 0 6px; font-size: 16px; color: var(--poa-navy); }
.poa-fcard p { margin: 0; font-size: 14px; color: var(--poa-body); line-height: 1.6; }

/* 4 passos: mantém 3 colunas por padrão, vira 4 quando amplo */
.poa-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.poa-steps-3 { grid-template-columns: repeat(3, 1fr); }
.poa-step-n { font-size: 15px; } /* aceita emoji nos passos de rastreio */

/* Caixa de exemplo (recorrência) */
.poa-example { margin-top: 30px; background: linear-gradient(160deg, #f0f4fc, #f8fafc); border: 1px solid #e0e7f5; border-radius: 16px; padding: 24px; }
.poa-example-head { font-weight: 800; font-size: 16px; color: var(--poa-navy); margin-bottom: 6px; }
.poa-example-num { font-size: 14px; color: var(--poa-body); margin-bottom: 14px; }
.poa-example .poa-table { box-shadow: 0 1px 3px rgba(15,35,80,.06); }

/* Público-alvo (grid de 2) */
.poa-aud { background: #fff; border: 1px solid #e6ebf5; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.poa-aud strong { font-size: 16px; color: var(--poa-navy-2); }
.poa-aud span { font-size: 14px; color: var(--poa-body); line-height: 1.6; }

/* FAQ (accordion) */
.poa-faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.poa-faq-item { background: #fff; border: 1px solid #e6ebf5; border-radius: 12px; overflow: hidden; }
.poa-faq-item summary { padding: 16px 20px; font-weight: 700; color: var(--poa-navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.poa-faq-item summary::-webkit-details-marker { display: none; }
.poa-faq-item summary::after { content: "+"; font-size: 20px; color: var(--poa-navy-2); transition: .2s; }
.poa-faq-item[open] summary::after { content: "–"; }
.poa-faq-item p { margin: 0; padding: 0 20px 18px; color: var(--poa-body); font-size: 15px; line-height: 1.68; }

/* CTA final (fundo navy) — cor explícita p/ vencer h2{color} do tema */
.poa-cta-final { text-align: center; background: linear-gradient(135deg, #0f2350 0%, #1c3faa 100%); border-radius: 20px; padding: 56px 28px; color: #fff; margin: 10px 0 20px; }
.poa-cta-final h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 10px; color: #fff !important; }
.poa-cta-final p { font-size: 17px; max-width: 560px; margin: 0 auto 24px; opacity: .94; color: #fff !important; }

/* Responsivo expandido */
@media (max-width: 900px) {
	.poa-features { grid-template-columns: repeat(2, 1fr); }
	.poa-steps-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.poa-features { grid-template-columns: 1fr; }
}

/* ---------- Auth (login/cadastro) — formulários ---------- */
.poa-auth form label { display: block; font-size: 13px; font-weight: 700; color: var(--poa-navy); margin: 14px 0 6px; }
.poa-auth form input, .poa-auth form select { width: 100%; padding: 11px 13px; border: 1px solid #cdd7ea; border-radius: 9px; font-size: 15px; color: var(--poa-ink); }
.poa-auth form input:focus, .poa-auth form select:focus { outline: none; border-color: #1c3faa; box-shadow: 0 0 0 3px rgba(28,63,170,.12); }
.poa-auth form .poa-btn { margin-top: 18px; }
.poa-auth-alt { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--poa-body); }
.poa-auth-alt a { color: var(--poa-navy-2); font-weight: 700; text-decoration: none; }
.poa-auth-alt a:hover { text-decoration: underline; }
.poa-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Área do afiliado ---------- */
.poa-area-head { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.poa-area-head-actions { display: flex; gap: 10px; }
.poa-area-head-actions .poa-btn { border-color: #cdd7ea; color: var(--poa-navy-2); background: #fff; }
.poa-area-head-actions .poa-btn:hover { background: #f0f4fc; }
.poa-area-sub { margin: 4px 0 0; color: var(--poa-muted); }

/* ============================================================
   Página (login / cadastro / área) — hero navy alinhado ao site
   ============================================================ */
.poa-page { max-width: 1080px; margin: 0 auto; padding: 24px 20px 40px; }
.poa-page-hero {
	background: linear-gradient(135deg, #0f2350 0%, #1c3faa 100%);
	color: #fff; border-radius: 20px; padding: 40px 32px; text-align: center; margin-bottom: 18px;
	position: relative; overflow: hidden;
}
.poa-page-hero::before {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(circle at 12% 20%, rgba(242,201,76,.14), transparent 42%),
		radial-gradient(circle at 88% 85%, rgba(242,201,76,.10), transparent 42%);
	pointer-events: none;
}
.poa-page-hero > * { position: relative; }
.poa-page-hero-badge {
	display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
	color: #f2c94c; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.poa-page-hero h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; margin: 0 0 8px; color: #fff !important; }
.poa-page-hero p { font-size: 16px; opacity: .94; margin: 0 auto; max-width: 560px; color: #fff !important; }
.poa-page-hero p strong { color: #f2c94c; }
.poa-page-hero--gold { background: linear-gradient(135deg, #1c3faa 0%, #2b56d6 55%, #1c3faa 100%); }
.poa-page-hero--area { padding: 34px 32px; }

.poa-auth { display: flex; justify-content: center; margin-top: 6px; }
.poa-auth-card { background: #fff; border: 1px solid #e6ebf5; border-radius: 18px; padding: 32px; width: 100%; max-width: 460px; box-shadow: 0 12px 34px rgba(15,35,80,.08); }
.poa-auth-card-wide { max-width: 560px; }
.poa-auth-card h2 { margin: 0 0 8px; color: var(--poa-navy); font-size: 24px; }
.poa-auth-sub { margin: 0 0 22px; color: var(--poa-body); }

/* Link de indicação (na área) */
.poa-link { display: flex; align-items: center; gap: 10px; background: #f0f4fc; border: 1px solid #dbe4f5; border-radius: 12px; padding: 12px 14px; margin: 22px 0; }
.poa-link > span { font-weight: 700; color: var(--poa-navy); font-size: 14px; white-space: nowrap; }
.poa-link input { flex: 1; border: 1px solid #cdd7ea; border-radius: 8px; padding: 9px 12px; font-size: 14px; background: #fff; color: var(--poa-ink); }
.poa-link button { white-space: nowrap; }

/* Tabs */
.poa-tabs { display: flex; gap: 6px; border-bottom: 2px solid #e6ebf5; margin: 24px 0 26px; flex-wrap: wrap; }
.poa-tab { padding: 12px 20px; font-weight: 700; color: var(--poa-muted); text-decoration: none; border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent; transition: .15s; }
.poa-tab:hover { color: var(--poa-navy-2); background: #fafbff; }
.poa-tab.is-active { color: var(--poa-navy-2); border-bottom-color: #f2c94c; background: #fafbff; }

/* Cards financeiros */
.poa-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.poa-cards-ref .poa-card { background: #fafbff; }
.poa-card { background: #fff; border: 1px solid #e6ebf5; border-radius: 14px; padding: 18px; }
.poa-card-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--poa-muted); font-weight: 700; }
.poa-card-val { display: block; font-size: 26px; font-weight: 800; color: var(--poa-navy); margin: 6px 0 2px; }
.poa-card-sub { display: block; font-size: 12px; color: var(--poa-faint); }

/* Painéis internos */
.poa-panel { background: #fff; border: 1px solid #e6ebf5; border-radius: 14px; padding: 24px; margin-top: 16px; }
.poa-panel h3 { margin: 0 0 12px; color: var(--poa-navy); font-size: 19px; }
.poa-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--poa-muted); font-size: 13px; font-weight: 700; }
.poa-panel-narrow { max-width: 560px; }
.poa-perfil-wrap, .poa-saque-wrap { }
.poa-saque-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .poa-saque-wrap { grid-template-columns: 1fr; } }
.poa-saque-box { background: #fff; border: 1px solid #e6ebf5; border-radius: 14px; padding: 24px; }
.poa-saque-box h3 { margin: 0 0 10px; color: var(--poa-navy); }
.poa-saque-saldo { margin: 0 0 8px; font-size: 15px; color: var(--poa-body); }
.poa-saque-box label { display: block; font-size: 13px; font-weight: 700; color: var(--poa-navy); margin: 14px 0 6px; }
.poa-saque-box input, .poa-saque-box select { width: 100%; padding: 11px 13px; border: 1px solid #cdd7ea; border-radius: 9px; font-size: 15px; color: var(--poa-ink); }
.poa-perfil-wrap .poa-panel label { display: block; font-size: 13px; font-weight: 700; color: var(--poa-navy); margin: 14px 0 6px; }
.poa-perfil-wrap .poa-panel input, .poa-perfil-wrap .poa-panel select { width: 100%; padding: 11px 13px; border: 1px solid #cdd7ea; border-radius: 9px; font-size: 15px; color: var(--poa-ink); }

/* Responsivo */
@media (max-width: 760px) {
	.poa-hero-kpis, .poa-cards { grid-template-columns: repeat(2, 1fr); }
	.poa-steps { grid-template-columns: 1fr; }
	.poa-grid2 { grid-template-columns: 1fr; }
	.poa-link { flex-wrap: wrap; }
	.poa-link input { min-width: 100%; }
	.poa-table { font-size: 14px; }
	.poa-table th, .poa-table td { padding: 10px 10px; }
}