/* Modelo Padrão — estilos base. Cores via variáveis CSS preenchidas no install
   (SITE_COR_PRIMARIA / SITE_COR_SECUNDARIA). Edite livremente após instalar. */

:root {
  --pd-cor-primaria: #005da8;
  --pd-cor-secundaria: #f39c12;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Montserrat', Arial, sans-serif; color: #222; }

/* ---------- Header ---------- */
.pd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--pd-topbar-fundo, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 100;
}
.pd-logo img { height: auto; width: auto; display: block; } /* tamanho real vem do max-width/max-height inline (aba Site → Configurações) */
.pd-nav { display: flex; align-items: center; gap: 18px; }
.pd-nav a { color: var(--pd-topbar-link, #333); text-decoration: none; font-size: 14px; font-weight: 600; }
.pd-nav a:hover { color: var(--pd-topbar-link-hover, var(--pd-cor-primaria)); }
.pd-nav a:active { color: var(--pd-topbar-link-ativo, var(--pd-cor-secundaria)); }
.pd-nav-cta {
  background: var(--pd-topbar-cta-fundo, var(--pd-cor-primaria)); color: var(--pd-topbar-cta-texto, #fff) !important; padding: 8px 16px;
  border-radius: 20px;
}
.pd-menu-btn { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; }
.pd-menu-btn span { width: 24px; height: 2px; background: var(--pd-topbar-link, #333); }

@media (max-width: 880px) {
  .pd-menu-btn { display: flex; }
  .pd-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--pd-topbar-fundo, #fff); flex-direction: column; padding: 16px; gap: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
  }
  .pd-nav.pd-nav-aberto { display: flex; }
}

/* ---------- Hero ---------- */
.pd-hero { position: relative; }
.pd-hero img { width: 100%; display: block; }
.pd-hero-conteudo {
  position: absolute; left: 6%; bottom: 8%; color: #fff; max-width: 520px;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.pd-hero-conteudo h1 { font-size: 32px; margin: 0 0 8px; }
.pd-hero-ctas { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pd-btn { border-radius: 24px !important; font-weight: 700 !important; }

/* ---------- Passo a passo ---------- */
.pd-passos { padding: 56px 24px; text-align: center; background: #fafafa; }
.pd-passos h2 { margin-bottom: 32px; }
.pd-passos-grid { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; max-width: 960px; margin: 0 auto; }
.pd-passo { max-width: 260px; }
.pd-passo-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--pd-cor-primaria);
  color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 12px;
}

/* ---------- CTA secundária ---------- */
.pd-cta-secundaria {
  padding: 40px 24px; text-align: center; background: var(--pd-cor-secundaria);
  color: #fff;
}
.pd-cta-secundaria p { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ---------- Banner (slider quando há 2+ imagens) ---------- */
.pd-banner-slider { display: block; }
.pd-banner-slide { display: none; }
.pd-banner-slide--ativo { display: block; }
.pd-banner-slider--multi .pd-banner-slide { transition: opacity .4s ease; }
.pd-banner-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px;
}
.pd-banner-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.4);
  cursor: pointer; padding: 0;
}
.pd-banner-dot--ativo { background: #fff; }

/* ---------- Seções da Home (aba Site → Seções da Home) ---------- */
.pd-secao-home { padding: 40px 24px; }
.pd-secao-home:nth-of-type(even) { background: #fafafa; }
.pd-secao-home img { max-width: 100%; display: block; margin: 0 auto; }

/* ---------- Patrocinadores ---------- */
.pd-patrocinadores { padding: 48px 24px; text-align: center; }
.pd-patrocinadores-grid { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; align-items: center; }
.pd-patrocinadores-grid img { max-height: 60px; }

/* ---------- Páginas internas (cadastro, lojas, etc.) ---------- */
.pd-pagina { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; }
.pd-pagina-texto { line-height: 1.7; }
/* Título de página — mesmo visual do banner do Regulamento (.pd-titulo-banner),
   só que "avulso" (com cantos arredondados nos 4 lados e espaço embaixo) pra
   páginas que não têm o conteúdo inteiro dentro de um card tipo documento. */
.pd-pagina-titulo {
  background: var(--pd-cor-primaria); color: #fff; padding: 22px 28px;
  font-size: 26px; font-weight: 800; border-radius: 10px; margin: 0 0 24px;
}
.pd-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 24px; margin-bottom: 24px; }
.pd-form-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-form-inline input { flex: 1; min-width: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.pd-card-cadastro form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.pd-card-cadastro form input:not([type="checkbox"]) { display: block; width: 100%; padding: 10px; margin-top: 4px; border: 1px solid #ddd; border-radius: 6px; font-weight: 400; }
.pd-checkbox-line,
.pd-card-cadastro form label.pd-checkbox-line { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.pd-checkbox-line input,
.pd-card-cadastro form input.pd-checkbox-line,
.pd-card-cadastro form label.pd-checkbox-line input[type="checkbox"] { display: inline-block; width: auto !important; margin-top: 0; }
.pd-ajuda { color: #888; font-size: 14px; }

.pd-numeros-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pd-numero-chip {
  background: var(--pd-cor-primaria); color: #fff; padding: 8px 14px;
  border-radius: 20px; font-weight: 700; font-size: 13px;
}

.pd-produtos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.pd-produto-card {
  position: relative; border: 1px solid #eee; border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.pd-selo-multiplicador {
  position: absolute; top: -10px; right: -10px; background: var(--pd-cor-secundaria);
  color: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}

.pd-tabela-wrap { overflow-x: auto; }

/* ---------- Documento (Regulamento) ---------- */
.pd-card-documento {
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08);
  background: #fff; margin-bottom: 20px;
}
.pd-titulo-banner {
  background: var(--pd-cor-primaria); color: #fff; padding: 26px 32px;
  font-size: 30px; font-weight: 800;
}
.pd-documento-corpo { padding: 24px; }
.pd-documento-frame { width: 100%; height: 80vh; border: 0; display: block; }
.pd-documento-fallback { text-align: center; color: #888; font-size: 13px; margin: 14px 0 0; }

/* ---------- Chat trigger ---------- */
.pd-chat-trigger {
  position: fixed; bottom: 20px; right: 20px; background: var(--pd-cor-primaria);
  color: #fff; padding: 12px 18px; border-radius: 24px; text-decoration: none;
  font-weight: 700; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 90;
}

/* ---------- Cupom Físico (cadastro de cupom + número da sorte) ----------
   O formulário e a lista usam componentes nativos do UIkit (uk-modal, uk-card,
   uk-grid) — só o que é específico da campanha fica aqui. */
.pd-card-documento { scroll-margin-top: 90px; }

.pd-cupom-resultado {
  background: linear-gradient(135deg, var(--pd-cor-primaria), var(--pd-cor-secundaria));
  color: #fff; border-radius: 14px; padding: 24px; text-align: center; margin-top: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.pd-cupom-resultado p { margin: 0; font-size: 12px; opacity: .9; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.pd-cupom-resultado .pd-cupom-numero { font-size: 26px; font-weight: 800; letter-spacing: 1px; margin-top: 8px; }

.pd-cupom-status-pendente {
  display: inline-block; font-size: 11.5px; color: #c98a00; background: #fff3d6;
  padding: 5px 11px; border-radius: 20px; font-weight: 700;
}
.pd-cupom-card-numero {
  display: inline-block; background: var(--pd-cor-primaria); color: #fff; font-weight: 800;
  font-size: 20px; padding: 10px 20px; border-radius: 24px;
}
.pd-cupom-card-codigo { margin-top: 12px; color: #222; font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.pd-cupom-card-data { margin-top: 6px; color: #ccc; font-size: 11px; }

/* ---------- Footer ---------- */
.pd-footer { padding: 32px 24px; background: #f4f4f4; text-align: center; }
.pd-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pd-footer-inner img { height: 28px; }
.pd-footer-inner span { font-size: 12px; color: #777; }