/* cdp-style.css - styles para Canal de Denúncias (versão corrigida)
   Colocar em: wp-content/plugins/canal-denuncias/assets/cdp-style.css
   Backup o arquivo antigo antes de substituir.
*/

/* ---------- Base inputs ---------- */
.cdp-form-wrap input[type="text"],
.cdp-form-wrap input[type="email"],
.cdp-form-wrap input[type="tel"],
.cdp-form-wrap input[type="number"],
.cdp-form-wrap select,
.cdp-form-wrap textarea {
    border:1px solid #ddd;
    padding:8px;
    border-radius:4px;
    box-sizing:border-box;
}

/* espaçamento entre campos */
.cdp-form-wrap p { margin-bottom:10px; }

/* ---------- Inline option groups (radios / checkboxes) ---------- */
/* O grupo ocupa a linha (display:flex) — evita que flutue ao lado de outros elementos */
.cdp-form-wrap .inline-options {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  margin: 6px 0 6px 0 !important;
  padding: 0 !important;
  width: 100% !important; /* ocupa a linha inteira, garantindo o comportamento esperado */
}

/* Cada label interno fica inline dentro do flex, sem forçar largura nem float */
.cdp-form-wrap .inline-options > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Inputs pequenos (radios/checkboxes) não crescem e se alinham corretamente */
.cdp-form-wrap .inline-options label input[type="radio"],
.cdp-form-wrap .inline-options label input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  margin: 0 6px 0 0 !important;
  display: inline-block !important;
}

/* ---------- Evitar regra global perigosa ----------
   NÃO usar display:block !important em labels — isso quebrou o comportamento.
   Se o tema aplicar label { display:block }, não forçamos !important aqui.
*/

/* Se necessário, force p e .cdp-field a serem block, mas sem !important */
.cdp-form-wrap p,
.cdp-form-wrap .cdp-field {
  display: block;
}

/* Caso CF7 ou outro plugin envolva inputs em spans, mantenha inline nesses spans */
.cdp-form-wrap .inline-options span,
.cdp-form-wrap .inline-options .wpcf7-list-item,
.cdp-form-wrap .inline-options .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Remove margens/ paddings indesejadas que empurrem itens */
.cdp-form-wrap .inline-options label > * { margin: 0 !important; padding: 0 !important; }

/* ---------- Mensagens do chat ---------- */
.cdp-messages .cdp-msg {
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:8px;
    max-width:80%;
    word-wrap:break-word;
}
.cdp-messages .cdp-msg.denunciante { background:#eef6ff; border:1px solid #cfe6ff; margin-left:0; }
.cdp-messages .cdp-msg.empresa { background:#ecffef; border:1px solid #dff5dd; margin-left:auto; }
.cdp-messages .cdp-msg.admin { background:#fff4e6; border:1px solid #f1d9b8; margin-left:auto; }

/* loading do chat - margem ajustada */
.cdp-loading { margin: 10px 0 15px 15px; color:#666; font-style:italic; }

/* resultado do envio */
#cdp-result.cdp-error { color:#b02a37; background:#ffe6e6; padding:8px; border-radius:4px; }
#cdp-result.cdp-success { color:#1f6f3b; background:#e8f8ee; padding:8px; border-radius:4px; }

/* pequenas melhorias responsivas */
@media (max-width:600px){
  .inline-options { gap:8px; }
  .cdp-messages .cdp-msg { max-width:100%; }
}

@media (max-width:420px) {
  .cdp-form-wrap .inline-options { gap:8px !important; }
  .cdp-form-wrap .inline-options label { white-space: normal !important; }
}