/* ================================
   DPO • Popup – CSS COMPLETO (escopado)
   ================================ */

/* Variáveis locais do popup */
.dpo-modal {
  --dpo-primary: #2e5797;        /* cor principal */
  --dpo-text: #333;
  --dpo-muted: #656565;
  --dpo-border: #dfdfdf;
  --dpo-error: #ba330a;
}

/* Botão de abrir (fora do modal) */
#dpoOpen.dpo-btn { margin: 24px; }

/* Camadas (overlay + backdrop) */
#dpoOverlay,
.dpo-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
}
#dpoOverlay.show,
.dpo-overlay.show { display: block; }

.dpo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-tap-highlight-color: transparent;
}

/* Janela */
.dpo-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(92vw, 680px);
  background: #fff;
  color: var(--dpo-text);
  border: 1px solid var(--dpo-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Cabeçalho */
.dpo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dpo-border);
  background: #f9f9f9;
  border-radius: 10px 10px 0 0;
}
.dpo-title { margin: 0; font-weight: 700; letter-spacing: .2px; color: var(--dpo-text); }

/* "Alterar opção" no cabeçalho empurra o Fechar para a direita */
.dpo-alt { /* ficará escondido na tela de opções e visível na tela do formulário */ }

/* Fechar sempre à direita */
.dpo-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent; border: 0; color: #535353; font-weight: 700;
  padding: .25rem .5rem; border-radius: 8px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dpo-close span { font-size: 18px; line-height: 1; transform: translateY(-1px); }
.dpo-close:hover, .dpo-close:focus { background: #f0f0f0; color: #070707; outline: 0; }

/* Corpo */
.dpo-body { padding: 16px; }
.dpo-subtitle {
  margin: 0 0 .5rem; color: var(--dpo-muted); font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
.dpo-pill {
  display: inline-block; padding: .2rem .6rem; background: #eef2ff; color: #1e40af;
  border: 1px solid #e5e7ff; border-radius: 999px; font-weight: 700; line-height: 1.1;
}

/* Lista de opções (um por linha) */
.dpo-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.dpo-option {
  width: 100%; text-align: left; background: #ffffff; color: #333333;
  border: 1px solid #2e5797 !important;  /* borda #2e5797 */
  border-radius: 10px !important;         /* raio 10px */
  padding: .75rem 1rem;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
  cursor: pointer;
}
.dpo-option:hover, .dpo-option:focus {
  color: #ffffff !important;              /* texto branco no hover */
  background: #2e5797 !important;
  border-color: #2e5797 !important;
  outline: 0;
}

/* Formulário */
.dpo-form-row { margin-bottom: 12px; }
.dpo-label { display: block; font-weight: 600; color: var(--dpo-text); margin-bottom: 6px; }
.dpo-input, .dpo-textarea {
  width: 100%; background: #ffffff; color: #727272; height: 53px; padding: 15px 20px;
  border: 1px solid #2e5797 !important;   /* borda #2e5797 sempre */
  border-radius: 10px !important;         /* raio 10px */
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.dpo-textarea { height: 148px; resize: vertical; }
.dpo-input:hover, .dpo-textarea:hover, .dpo-input:focus, .dpo-textarea:focus {
  border-color: #2e5797 !important; box-shadow: none !important; outline: 0;
}
/* Erro */
.dpo-input.error, .dpo-textarea.error { border-color: var(--dpo-error) !important; }

/* Ações e botões */
.dpo-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.dpo-btn {
  display: inline-block; font-weight: 700; border-radius: 10px; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.dpo-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Botão primário (Enviar / Preencha para enviar) */
.dpo-btn-primary {
  background: #2e5797 !important; border: 1px solid #2e5797 !important; color: #ffffff !important; padding: .6rem 1.2rem;
}
.dpo-btn-primary:hover, .dpo-btn-primary:focus {
  color: #ffffff !important; background: #2e5797 !important; border-color: #2e5797 !important; outline: 0;
}

/* Botões link (Limpar dados e Alterar opção) – borda e hover branco */
.dpo-btn-link,
#dpoLimpar,
#dpoHeaderAlterar {
  border: 1px solid #2e5797 !important;
  color: #2e5797 !important;
  background: #ffffff !important;
  padding: .45rem .8rem !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}
.dpo-btn-link:hover,
.dpo-btn-link:focus,
#dpoLimpar:hover,
#dpoLimpar:focus,
#dpoHeaderAlterar:hover,
#dpoHeaderAlterar:focus {
  color: #ffffff !important;
  background: #2e5797 !important;
  border-color: #2e5797 !important;
  text-decoration: none !important;
  outline: 0;
}

/* Feedback e aviso */
.dpo-feedback {
  margin-top: 12px; padding: 10px 12px; border-left: 4px solid #2e5797;
  background: #f6f8ff; color: #333; display: none;
}
.dpo-feedback.show { display: block; }

.dpo-warn {
  border-left: 4px solid #fde428; background: #fffbe6; color: #333;
  padding: 10px 12px; margin: 0 0 10px; display: none;
}
.dpo-warn.show { display: block; }

/* Utilitário */
.dpo-hidden { display: none !important; }

/* Responsivo */
@media (max-width: 420px) {
  .dpo-body { padding: 12px; }
  .dpo-input, .dpo-textarea { padding: 12px 14px; height: 50px; }
  .dpo-textarea { height: 130px; }
}