/**
 * Landing pública "Programa de Afiliados" (vistonvisa.com/{locale}/afiliados).
 * Porte fiel de test.vistonvisa.com/affiliates/affiliates.css (estilo limpo,
 * minimalista, grayscale — combina com o eligibility-test, cor base #111827).
 *
 * Adaptado à realidade do portal (Fase 7), SEM mudar o visual:
 *  - O portal público NÃO carrega o app.css/Vite, e o tailwind-built.css é o
 *    build PURGADO do tema WP. A landing de afiliados da origem usa utilitários
 *    Tailwind crus (não classes semânticas), então este arquivo é AUTOCONTIDO:
 *    porta as classes próprias (.feature-card, .tier-card, .channel-chip, layout
 *    de 2 colunas) e faz o BACKFILL exato dos utilitários que faltam no build
 *    purgado (paletas amber/green/red, animações, alguns spacings/grids).
 *  - Campos e botões do formulário seguem o padrão do form de criação de conta
 *    (.vnv-field / .vnv-btn-primary), definidos aqui em hex literal.
 *  - CSP estrita (sem inline): copiar código/link e feedback rodam por módulo
 *    Vite (affiliates.js como theme asset), nunca onclick/script inline.
 *  - Ícones são <x-ui.icon> (SVG inline) → os seletores de cor de ícone do
 *    channel-chip cobrem `svg` (a origem usava <i> lucide).
 */

/* ── Backfill de utilitários Tailwind ausentes do build purgado ─────────────
 * (confirmado por grep no tailwind-built.css; rule duplicada é inofensiva) */
.md\:grid-cols-1,
.md\:grid-cols-4 { /* placeholders sobrescritos abaixo no breakpoint md */ }
@media (min-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.underline { text-decoration-line: underline; }
.resize-y { resize: vertical; }
.mb-24 { margin-bottom: 6rem; }
.mt-24 { margin-top: 6rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-2\.5 { gap: 0.625rem; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-400 { border-color: #9ca3af; }
.bg-gray-200 { background-color: #e5e7eb; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-gray-800:hover { background-color: #1f2937; }
.hover\:border-gray-300:hover { border-color: #d1d5db; }
.hover\:border-gray-400:hover { border-color: #9ca3af; }

/* Paleta amber (estado "em análise") */
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }

/* Paleta green (estado "ativo" / sucesso) */
.bg-green-100 { background-color: #dcfce7; }
.text-green-500 { color: #22c55e; }
.border-green-200 { border-color: #bbf7d0; }

/* Paleta red (estado "recusado" / erro) */
.bg-red-50 { background-color: #fef2f2; }
.text-red-500 { color: #ef4444; }
.text-red-700 { color: #b91c1c; }
.border-red-200 { border-color: #fecaca; }
.border-red-300 { border-color: #fca5a5; }

/* ===== LUCIDE / SVG ICONS ===== */
.lucide { stroke-width: 1.5px; }

/* ===== FEATURE CARD STYLES ===== */
.feature-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ===== TIER CARD STYLES ===== */
.tier-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ===== HERO SECONDARY LINK (combina com "How it works" de partners) ===== */
.affiliates-hero-how-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #9ca3af;
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #9ca3af;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.affiliates-hero-how-link:hover {
    color: #6b7280;
    border-color: #6b7280;
}

.affiliates-hero-how-link svg { color: #d1d5db; }
.affiliates-hero-how-link:hover svg { color: #9ca3af; }

/* ===== BUTTON STATES ===== */
.affiliates-page button,
.affiliates-page a.inline-flex {
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.affiliates-page button:active,
.affiliates-page a.inline-flex:active {
    transform: scale(0.98);
}

/* ===== COPY BUTTON FEEDBACK ===== */
.copy-success { animation: vnvPulse 0.5s ease-in-out; }

@keyframes vnvPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ===== FADE ANIMATION ===== */
@keyframes vnvAffFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: vnvAffFadeIn 0.3s ease forwards; }

@keyframes vnvSpin { to { transform: rotate(360deg); } }
.animate-spin { animation: vnvSpin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .copy-success, .animate-fade-in, .animate-spin { animation: none; }
}

/* ===== CHANNEL CHIPS — clica no ícone+texto, sem checkbox visível ===== */
.channel-chip input[type="checkbox"]:checked + div {
    border-color: #111827;
    background-color: #f9fafb;
}

.channel-chip input[type="checkbox"]:checked + div svg {
    color: #111827;
}

.channel-chip input[type="checkbox"]:checked + div span {
    color: #111827;
}

/* ===== APPLICATION FORM — layout de duas colunas =========================
 * Guest = DOIS forms irmãos (login + criar conta) dentro do .affiliate-form-layout
 * (normal-POST não permite form aninhado), por isso o seletor é standalone e não
 * mais escopado por #affiliateApplicationForm. */
.affiliate-form-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .affiliate-form-layout {
        flex-direction: row;
        gap: 2rem;
        align-items: flex-start;
    }
    .affiliate-form-layout .affiliate-login-col {
        width: 20rem;
        flex-shrink: 0;
    }
    .affiliate-form-layout .affiliate-login-col .affiliate-login-sticky {
        position: sticky;
        top: 6rem;
    }
    .affiliate-form-layout .affiliate-register-col {
        flex: 1;
        min-width: 0;
    }
}

@media (min-width: 1280px) {
    .affiliate-form-layout .affiliate-login-col {
        width: 24rem;
    }
}

/* Honeypot offscreen (espelha .partners-honeypot). */
.affiliates-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ===== CAMPOS DO FORMULÁRIO (padrão do form de criação de conta) =========
 * Fonte única do .vnv-field do app.css, reproduzida aqui em hex literal porque
 * o portal público não carrega o app.css. Compacto no mobile (~36px) e
 * confortável no desktop (44px). O widget de telefone (intl-tel-input via
 * portal-phone.css) abre 5.5rem à esquerda quando o input tem .vnv-field. */
.vnv-field {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.375rem;
    color: #111827;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vnv-field::placeholder { color: #9ca3af; }

.vnv-field:focus {
    outline: none;
    border-color: #374151;
    box-shadow: 0 0 0 2px rgb(55 65 81 / 0.15);
}

.vnv-field:disabled {
    background-color: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
    box-shadow: none;
    cursor: not-allowed;
}

.vnv-field[aria-invalid="true"] {
    border-color: #ef4444;
}

.vnv-field[aria-invalid="true"]:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgb(239 68 68 / 0.30);
}

@media (min-width: 40rem) {
    .vnv-field {
        min-height: 2.75rem;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

textarea.vnv-field {
    min-height: 6rem;
    resize: vertical;
}

/* Select com chevron (escopado p/ não afetar selects do chrome). */
.vnv-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.vnv-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.vnv-help {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.vnv-checkbox {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    accent-color: #030712;
}

.vnv-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(55 65 81 / 0.30);
}

/* Botão primário (padrão do botão de criar conta: #030712 → hover #1f2937). */
.vnv-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    background: #030712;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.vnv-btn-primary:hover {
    background: #1f2937;
    color: #fff;
    text-decoration: none;
}

.vnv-btn-primary:active { transform: scale(0.98); }

.vnv-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

/* ===== TIER "Your Tier" BADGE (origem: -top-2 left-1/2 -translate-x-1/2) ===== */
.aff-tier__badge {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 0.125rem 0.625rem;
    background: #030712;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ===== CONSENTIMENTOS (termos + LGPD) — espelha page-partners.css ===== */
.vnv-consents {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* O opt-in de comunicações (.vnv-consent solto, vindo do partial) e o bloco
   .vnv-consents (termos + privacidade) são irmãos diretos sob form.space-y-6,
   herdando 1.5rem de margin entre si — um vão bem maior que o gap interno
   (0.875rem) e que deixava o trio de checkboxes "distante". Aproxima para um
   espaçamento coeso e uniforme. !important vence o utilitário space-y do tema. */
.vnv-consent + .vnv-consents {
    margin-top: 0.875rem !important;
}

.vnv-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #4b5563;
    line-height: 1.5;
}

.vnv-consent a { color: #111827; text-decoration: underline; }

/* ===== ALERTAS (sucesso / erros de validação) — espelha page-partners.css ===== */
.vnv-alert {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.vnv-alert--success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.vnv-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vnv-alert--error ul { margin: 0; padding-left: 1.25rem; list-style: disc; }

/* Autocomplete de país (mesmo visual do checkout/parcerias, classes .vnv-*
   próprias). O input visível usa .vnv-field; aqui só o dropdown e os itens. */
.vnv-country-autocomplete {
    position: relative;
}

.vnv-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
}

.vnv-country-dropdown.hidden {
    display: none;
}

.vnv-country-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5625rem 0.875rem;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    transition: background-color 0.15s ease;
}

.vnv-country-item:hover,
.vnv-country-item:focus,
.vnv-country-item.active {
    background-color: #f9fafb;
    outline: none;
}

.vnv-country-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.vnv-country-item span {
    font-size: 0.875rem;
    color: #374151;
}

/* =========================================================================
 * DARK MODE — escopado em html.dark (carvão neutro; rampa de tokens de
 * /assets/vnv-dark.css). Regra Pablo 2026-06-22: NENHUM elemento com fundo
 * branco/claro no dark, nem campos de formulário. Só botões de ação podem ter
 * fundo claro — e SUAVE (brand-800 #d2d2d2, nunca branco puro). Badges/chips
 * decorativos ficam em superfície ESCURA elevada. color-scheme:dark
 * (vnv-dark.css) já escurece os controles nativos.
 * ========================================================================= */

/* ── Bordas e estados de status SEM cobertura global → escurece na página
 *    (escopado por .affiliates-page; o arquivo já só carrega aqui) ── */
html.dark .affiliates-page .border-gray-200 { border-color: var(--color-brand-200); }
html.dark .affiliates-page .border-gray-300 { border-color: var(--color-brand-300); }
html.dark .affiliates-page .border-gray-100 { border-color: var(--color-brand-200); }

/* Estado "ativo / aprovado" (verde) */
html.dark .affiliates-page .bg-green-50,
html.dark .affiliates-page .bg-green-100 { background-color: var(--color-success-50); }
html.dark .affiliates-page .border-green-200 { border-color: var(--color-success-700); }
html.dark .affiliates-page .text-green-500,
html.dark .affiliates-page .text-green-600,
html.dark .affiliates-page .text-green-700 { color: var(--color-success-500); }

/* Estado "em análise" (âmbar) */
html.dark .affiliates-page .bg-amber-50,
html.dark .affiliates-page .bg-amber-100 { background-color: var(--color-warning-50); }
html.dark .affiliates-page .border-amber-200,
html.dark .affiliates-page .border-amber-300 { border-color: var(--color-warning-600); }
html.dark .affiliates-page .text-amber-500,
html.dark .affiliates-page .text-amber-600,
html.dark .affiliates-page .text-amber-700 { color: var(--color-warning-500); }

/* Estado "recusado" (vermelho) */
html.dark .affiliates-page .bg-red-50 { background-color: var(--color-danger-50); }
html.dark .affiliates-page .border-red-200,
html.dark .affiliates-page .border-red-300 { border-color: var(--color-danger-700); }
html.dark .text-red-500,
html.dark .affiliates-page .text-red-700 { color: var(--color-danger-500); }

/* ── FEATURE / TIER CARDS ── */
html.dark .feature-card {
    background: var(--color-brand-50);
    border-color: var(--color-brand-200);
}
html.dark .feature-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -1px rgb(0 0 0 / 0.4);
}
html.dark .tier-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -2px rgb(0 0 0 / 0.4);
}

/* ── HERO SECONDARY LINK ── */
html.dark .affiliates-hero-how-link {
    color: var(--color-brand-500);
    border-color: var(--color-brand-500);
}
html.dark .affiliates-hero-how-link:hover {
    color: var(--color-brand-700);
    border-color: var(--color-brand-700);
}
html.dark .affiliates-hero-how-link svg { color: var(--color-brand-500); }
html.dark .affiliates-hero-how-link:hover svg { color: var(--color-brand-700); }

/* ── CHANNEL CHIP (selecionado = superfície escura elevada + borda clara) ── */
html.dark .channel-chip input[type="checkbox"]:checked + div {
    border-color: var(--color-brand-600);
    background-color: var(--color-brand-100);
}
html.dark .channel-chip input[type="checkbox"]:checked + div svg,
html.dark .channel-chip input[type="checkbox"]:checked + div span {
    color: var(--color-brand-900);
}

/* ── CAMPOS DO FORMULÁRIO (afundados, nunca brancos) ── */
html.dark .vnv-field {
    color: var(--color-brand-900);
    background-color: #121212;
    border-color: var(--color-brand-300);
    box-shadow: none;
}
html.dark .vnv-field::placeholder { color: var(--color-brand-400); }
html.dark .vnv-field:focus {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 2px rgb(158 158 158 / 0.25);
}
html.dark .vnv-field:disabled {
    background-color: var(--color-brand-100);
    color: var(--color-brand-500);
    border-color: var(--color-brand-200);
}
html.dark .vnv-field[aria-invalid="true"] { border-color: var(--color-danger-500); }
html.dark .vnv-field[aria-invalid="true"]:focus {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 2px rgb(248 113 113 / 0.30);
}
html.dark .vnv-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── LABELS / HELP ── */
html.dark .vnv-label { color: var(--color-brand-800); }
html.dark .vnv-help { color: var(--color-brand-500); }

/* ── CHECKBOX ── */
html.dark .vnv-checkbox {
    border-color: var(--color-brand-300);
    accent-color: var(--color-brand-900);
}
html.dark .vnv-checkbox:focus {
    box-shadow: 0 0 0 2px rgb(196 196 196 / 0.30);
}

/* ── BOTÃO PRIMÁRIO (único fundo claro permitido — suave, nunca branco) ── */
html.dark .vnv-btn-primary {
    background: var(--color-brand-800);
    color: #141414;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
html.dark .vnv-btn-primary:hover {
    background: var(--color-brand-700);
    color: #141414;
}

/* ── TIER BADGE "SEU NÍVEL" (decorativo → escuro elevado, não claro) ── */
html.dark .aff-tier__badge {
    background: var(--color-brand-300);
    color: var(--color-brand-900);
}

/* ── CONSENTS ── */
html.dark .vnv-consent { color: var(--color-brand-500); }
html.dark .vnv-consent a { color: var(--color-brand-900); }

/* ── ALERTAS ── */
html.dark .vnv-alert--success {
    background: var(--color-success-50);
    border-color: var(--color-success-700);
    color: var(--color-success-500);
}
html.dark .vnv-alert--error {
    background: var(--color-danger-50);
    border-color: var(--color-danger-700);
    color: var(--color-danger-500);
}

/* ── AUTOCOMPLETE DE PAÍS ── */
html.dark .vnv-country-dropdown {
    background: var(--color-brand-50);
    border-color: var(--color-brand-200);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -1px rgb(0 0 0 / 0.4);
}
html.dark .vnv-country-item:hover,
html.dark .vnv-country-item:focus,
html.dark .vnv-country-item.active {
    background-color: var(--color-brand-100);
}
html.dark .vnv-country-item span { color: var(--color-brand-800); }