/* /public/css/builder/components/form-block.css */
.body-builder .builder-form-block{
  position: relative;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 8px;
}

.body-builder .builder-form-block .builder-form-message{
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 140%;
}

.body-builder .builder-form-block .builder-form-message--success{
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.body-builder .builder-form-block .builder-form-message--error{
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.body-builder .builder-form-block[data-form-state="success"] > .builder-el,
.body-builder .builder-form-block[data-form-state="error"] > .builder-el{
  display: none !important;
}

/* Etichetta campo (blocco Label nel form) */
.body-builder .builder-form-label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #64748b;
  margin: 0 0 6px 0;
  letter-spacing: 0.01em;
}

:where(.builder-form-label){
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #64748b;
  margin: 0 0 6px 0;
  letter-spacing: 0.01em;
}

/* Controlli: canvas stage — espliciti perché frame-defaults ha color-scheme: dark */
#builderPage.builder-page .builder-form-input,
#builderPage.builder-page .builder-form-textarea,
#builderPage.builder-page .builder-form-select,
.body-builder .builder-form-input,
.body-builder .builder-form-textarea,
.body-builder .builder-form-select,
:where(.builder-form-input),
:where(.builder-form-textarea),
:where(.builder-form-select){
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.45;
  font-family: inherit;
  color: #0f172a;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  color-scheme: light;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#builderPage.builder-page .builder-form-input,
#builderPage.builder-page .builder-form-textarea,
.body-builder .builder-form-input,
.body-builder .builder-form-textarea,
:where(.builder-form-input),
:where(.builder-form-textarea){
  -webkit-appearance: none;
  appearance: none;
}

#builderPage.builder-page .builder-form-input::placeholder,
#builderPage.builder-page .builder-form-textarea::placeholder,
.body-builder .builder-form-input::placeholder,
.body-builder .builder-form-textarea::placeholder,
:where(.builder-form-input)::placeholder,
:where(.builder-form-textarea)::placeholder{
  color: #94a3b8;
}

#builderPage.builder-page .builder-form-input:hover,
#builderPage.builder-page .builder-form-textarea:hover,
#builderPage.builder-page .builder-form-select:hover,
.body-builder .builder-form-input:hover,
.body-builder .builder-form-textarea:hover,
.body-builder .builder-form-select:hover,
:where(.builder-form-input):hover,
:where(.builder-form-textarea):hover,
:where(.builder-form-select):hover{
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

#builderPage.builder-page .builder-form-input:focus,
#builderPage.builder-page .builder-form-textarea:focus,
#builderPage.builder-page .builder-form-select:focus,
.body-builder .builder-form-input:focus,
.body-builder .builder-form-textarea:focus,
.body-builder .builder-form-select:focus,
:where(.builder-form-input):focus,
:where(.builder-form-textarea):focus,
:where(.builder-form-select):focus{
  outline: none;
  border-color: #6366f1;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 0 0 3px rgba(99, 102, 241, 0.22);
}

#builderPage.builder-page .builder-form-textarea,
.body-builder .builder-form-textarea,
:where(.builder-form-textarea){
  min-height: 100px;
  resize: vertical;
}

#builderPage.builder-page .builder-form-select,
.body-builder .builder-form-select,
:where(.builder-form-select){
  height: auto;
  min-height: 46px;
  cursor: pointer;
}

.body-builder .builder-form-checkbox{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0f172a;
}

:where(.builder-form-checkbox){
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0f172a;
}

.body-builder .builder-form-checkbox input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: #4f46e5;
  cursor: pointer;
}

:where(.builder-form-checkbox) input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: #4f46e5;
  cursor: pointer;
}

/* Default visivo = button-block (#0d6efd…); :where() tiene specificità bassa così vincono gli stili inspector (.el-*). */
:where(#builderPage.builder-page .builder-form-button),
:where(.body-builder .builder-form-button),
:where(.builder-form-button){
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  width: auto;
  min-height: 0;
  font-family: inherit;
  letter-spacing: normal;
  color: #ffffff;
  cursor: pointer;
  background-color: #0d6efd;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.15s ease, background-color 0.15s ease;
}

:where(#builderPage.builder-page .builder-form-button):hover,
:where(.body-builder .builder-form-button):hover,
:where(.builder-form-button):hover{
  filter: brightness(0.93);
}

:where(#builderPage.builder-page .builder-form-button):focus,
:where(.body-builder .builder-form-button):focus,
:where(.builder-form-button):focus{
  outline: none;
}

:where(#builderPage.builder-page .builder-form-button):focus-visible,
:where(.body-builder .builder-form-button):focus-visible,
:where(.builder-form-button):focus-visible{
  outline: 2px solid rgba(13, 110, 253, 0.55);
  outline-offset: 2px;
}

:where(#builderPage.builder-page .builder-form-button):active,
:where(.body-builder .builder-form-button):active,
:where(.builder-form-button):active{
  filter: brightness(0.88);
}

:where(#builderPage.builder-page .builder-form-button):disabled,
:where(.body-builder .builder-form-button):disabled,
:where(.builder-form-button):disabled{
  opacity: 0.65;
  cursor: not-allowed;
  filter: grayscale(0.08);
}

:where(#builderPage.builder-page .builder-form-button).is-preview-hover,
:where(.body-builder .builder-form-button).is-preview-hover,
:where(.builder-form-button).is-preview-hover{
  filter: brightness(0.93);
}