/* 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: var(--pd-fonte-familia, 'Montserrat', Arial, sans-serif); color: #222; }

/* ---------- Botões e campos do UIkit sempre com a cor do site ----------
   Sem isso, uk-button-primary/uk-checkbox/foco de input usam o azul padrão
   do UIkit (#1e87f0), ignorando a Cor Primária configurada na aba Site. */
.uk-button-primary { background-color: var(--pd-cor-primaria) !important; border-color: var(--pd-cor-primaria) !important; }
.uk-button-primary:hover, .uk-button-primary:focus { filter: brightness(0.9); }
.uk-button-default { color: var(--pd-cor-primaria) !important; border-color: #ddd !important; }
.uk-button-default:hover { border-color: var(--pd-cor-primaria) !important; }
.uk-checkbox:checked, .uk-radio:checked,
.uk-checkbox:indeterminate { background-color: var(--pd-cor-primaria) !important; border-color: var(--pd-cor-primaria) !important; }
.uk-input:focus, .uk-textarea:focus, .uk-select:focus { border-color: var(--pd-cor-primaria) !important; }
.uk-alert-success { background: #eef9f0; color: #2e7d32; }
.uk-alert-danger { background: #fdeeee; color: #c0392b; }

/* ---------- 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; }

/* ---------- Formulários públicos (cadastro/consulta) ---------- */
/* Caixa central de login (CPF) — primeira coisa que aparece em cadastro.php,
   estilo "entrar ou criar conta", em vez do formulário completo logo de cara. */
.pd-login-wrap { max-width: 420px; margin: 0 auto; }
.pd-login-card { text-align: center; }
.pd-login-titulo { font-size: 19px; margin: 0 0 4px; }
.pd-login-desc { color: #888; font-size: 13px; margin: 0 0 18px; }
.pd-login-card .pd-form-label { text-align: left; }
.pd-login-rodape { font-size: 13px; color: #666; margin: 18px 0 0; }
.pd-login-rodape a { color: var(--pd-cor-primaria); font-weight: 700; text-decoration: none; }
.pd-login-rodape a:hover { text-decoration: underline; }
.pd-voltar-link {
  background: none; border: none; padding: 0; margin-bottom: 18px; cursor: pointer;
  color: var(--pd-cor-primaria); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.pd-voltar-link:hover { text-decoration: underline; }

.pd-form-secao { padding-top: 22px; margin-top: 22px; border-top: 1px solid #f0f0f0; }
.pd-form-secao:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.pd-form-secao-titulo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: #222; margin: 0 0 4px; }
.pd-form-secao-num {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--pd-cor-primaria); color: #fff; font-size: 12.5px; font-weight: 800; flex-shrink: 0;
}
.pd-form-secao-desc { color: #999; font-size: 12.5px; margin: 0 0 16px; }
.pd-form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #333; }
.pd-form-obrigatorio { color: #c0392b; margin-left: 2px; }
.pd-form-ajuda-campo { color: #999; font-size: 11px; margin-top: 5px; display: block; }
.pd-cep-status { font-size: 11.5px; margin-top: 6px; display: block; min-height: 15px; }
.pd-cep-status--ok { color: #2e7d32; }
.pd-cep-status--erro { color: #c0392b; }
.pd-cep-status--buscando { color: #888; }
.pd-form-actions { margin-top: 26px; padding-top: 20px; border-top: 1px solid #f0f0f0; text-align: right; }
@media (max-width: 640px) {
  .pd-form-actions { text-align: stretch; }
  .pd-form-actions .uk-button { width: 100%; }
}

.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-corpo + .pd-documento-corpo { border-top: 1px solid #eee; }
.pd-documento-titulo { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #333; }
.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; }

/* ---------- Cadastro Manual de Cupom: busca de produtos participantes ---------- */
.pd-produto-busca-wrap { position: relative; }
.pd-produto-resultados {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: #fff; border: 1px solid #ddd; border-radius: 8px; max-height: 220px;
  overflow-y: auto; box-shadow: 0 6px 16px rgba(0,0,0,.12); display: none;
}
.pd-produto-resultados div { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.pd-produto-resultados div:hover { background: #f4f4f4; }
.pd-produto-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pd-produto-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #f0f4fa; color: #333;
  padding: 6px 10px; border-radius: 16px; font-size: 12.5px; font-weight: 600;
}
.pd-produto-chip button {
  border: 0; background: transparent; color: #c0392b; font-weight: 800; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
}

/* ---------- 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; }