body {
  font-family: 'Nunito', sans-serif;
  background-color: #F8F9FA;
}

.banner {
    background-image: url('/content/images/forms-capa.jpg');
    background-size: cover;
    background-position: center;
    max-height: 300px;
    height: 300px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0 0 15px 5px #ddd;
}

.config-panel,
.props-panel,
.details,
.builder {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
  min-width: 0;
}


#logoPreview {
    width: 200px;
    height: 200px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.details {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.builder {
  background-color: white;
  min-height: 400px;
  padding: 20px;
}

.builder .element {
  margin-bottom: 10px;
}

.builder .element.selected {
  border: 2px solid #007bff;
  background-color: #cce5ff;
}

input:not([type="hidden"]),
select,
textarea {
  margin-bottom: 20px;
}

input[type="hidden"] {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: block;
  height: 0;
  overflow: hidden;
}

label {
  font-weight: bold;
}

.SumoSelect, .optWrapper, .select-all, .btnOk, .btnCancel, .SelectBox {
    border-radius: 4px !important;
}

ul.ui-autocomplete {
    max-height: 260px;
    overflow-y: auto;
    z-index: 5000 !important;
}

/* Legado: HTML antigo ainda tinha select.cf-pd-linha — não exibir (linha só no painel CD540) */
.builder .element[data-type="produtoDefeito"] select.cf-pd-linha {
    display: none !important;
}
.builder .element[data-type="produtoDefeito"] label:has(+ select.cf-pd-linha) {
    display: none !important;
}

/* Bloco produto / produto só catálogo / defeito (pré-visualização do gerador) */
.builder .element[data-type="produtoDefeito"] > label,
.builder .element[data-type="produtoCatalogo"] > label {
    display: block;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.builder .element[data-type="produtoDefeito"] .cf-pd-defeito-wrap > label,
.builder .element[data-type="defeitoReclamado"] .cf-pd-defeito-wrap > label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}
.builder .element[data-type="produtoDefeito"] select.cf-no-sumo,
.builder .element[data-type="defeitoReclamado"] select.cf-no-sumo {
    margin-bottom: 10px;
}

/* Defeito só após escolher produto (bloco único legado) */
#builder .element[data-type="produtoDefeito"] .cf-pd-defeito-wrap,
#form_post .element[data-type="produtoDefeito"] .cf-pd-defeito-wrap {
    display: none;
}
#builder .element[data-type="produtoDefeito"] .cf-pd-defeito-wrap.cf-pd-defeito-visivel,
#form_post .element[data-type="produtoDefeito"] .cf-pd-defeito-wrap.cf-pd-defeito-visivel {
    display: block;
}

/* Formulário público: bloco inteiro "Defeito reclamado" (separado) oculto até existir produto escolhido */
#form_post .element[data-type="defeitoReclamado"]:not(.cf-pd-dr-mostrar) {
    display: none !important;
}

/* CD540 (#builder): defeito reclamado (separado) sempre visível ao adicionar o campo */
#builder .element[data-type="defeitoReclamado"] .cf-pd-defeito-wrap {
    display: block !important;
}

/* Gerador CD540 (#builder): campo oculto continua visível para edição; só some no público */
#builder .element[data-hidden="true"] {
    outline: 2px dashed #adb5bd;
    outline-offset: 2px;
    background-color: #f8f9fa;
}
#builder .element[data-hidden="true"]::after {
    content: 'Oculto no formulário público';
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 6px;
    font-weight: normal;
}

/* Formulário público: blocos salvos com atributo hidden no HTML */
#form_post .element[hidden] {
    display: none !important;
}

/* Painel direito CD540: labels e grupos com respiro (Bootstrap 5 sem .form-group) */
.props-panel #elementProperties .form-group {
    margin-bottom: 1rem;
}
.props-panel #elementProperties label {
    display: block;
    margin-bottom: 0.35rem;
}

/* CD540 gerador: position:fixed nos painéis laterais fazia .btn-block usar 100% da viewport (botões “vazando”) */
.config-panel .cd540-sidebar-sticky,
.props-panel .cd540-sidebar-sticky {
    position: sticky;
    top: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.props-panel .cd540-sidebar-sticky .btn,
.props-panel .cd540-sidebar-sticky .btn-block,
.config-panel .cd540-sidebar-sticky .btn,
.config-panel .cd540-sidebar-sticky .btn-block {
    max-width: 100%;
    box-sizing: border-box;
}

.props-panel .cd540-sidebar-sticky #elementProperties {
    max-width: 100% !important;
}

.props-panel .cd540-sidebar-sticky #elementProperties .form-control {
    max-width: 100%;
    box-sizing: border-box;
}

/* CD540 painel: Sumo multiselect vazio não pode sumir (altura mínima no caption) */
.props-panel #elementProperties .SumoSelect > p.CaptionCont.SelectBox {
    min-height: 2.4rem;
}
.props-panel #elementProperties .cf-pd-painel-familias .SumoSelect,
.props-panel #elementProperties .cf-pd-painel-linhas .SumoSelect {
    width: 100%;
    max-width: 100%;
}