/* ── Editor Quill (campos rich-HTML da oferta) ──────────────────────────────
   Compartilhado por: cadastro de oferta (admin + parceiro) e edição (admin).
   Objetivo: editor com aparência de .form-control — bordas contínuas entre
   toolbar e área de texto, alinhado às colunas/linhas-guia do grid do form,
   sem quebra nas bordas nem estouro de conteúdo. */

.quill-editor-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* BOX do editor (.quill-field): wrapper criado pela JS que agrupa a .ql-toolbar
   (irmão anterior) + o .ql-container num único campo delimitado, como um form-control.
   Isso dá a cada editor uma "caixa" clara e separação entre um editor e o próximo —
   resolve o visual "solto"/empilhado da aba Oferta. */
.quill-field {
  border: 1px solid var(--bs-border-color, var(--color-bs-gray-300));
  border-radius: var(--bs-border-radius, 0.375rem);
  background-color: var(--bs-body-bg, var(--color-surface-card));
  overflow: hidden; /* clipa os cantos da toolbar/área para o arredondado do box */
}

/* Toolbar dentro do box: só divisor inferior, sem bordas próprias nem cantos. */
.quill-field .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--bs-border-color, var(--color-bs-gray-300));
  border-radius: 0;
  background-color: var(--bs-tertiary-bg, var(--color-bs-gray-100));
}

/* Área de edição dentro do box: sem bordas próprias (o box já delimita). */
.quill-field .quill-editor-container.ql-container.ql-snow {
  border: 0;
  border-radius: 0;
  background-color: var(--bs-body-bg, var(--color-surface-card));
  font-family: inherit;
  font-size: 0.9375rem;
}

.quill-editor-container.ql-container,
.quill-editor-container .ql-editor {
  height: auto;
}

/* Altura mínima derivada do rows da textarea original (ver quill-editor.js).
   Reduzidas para não deixar caixas altas e vazias na edição da oferta (PT/EN lado a lado). */
.quill-editor-container--compact .ql-editor {
  min-height: 4.5em;
}

.quill-editor-container--standard .ql-editor {
  min-height: 7em;
}

.quill-editor-container--tall .ql-editor {
  min-height: 9em;
}

/* Conteúdo nunca estoura a coluna do grid: quebra palavras/URLs longas. */
.quill-editor-container .ql-editor {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Imagens inseridas por URL não podem estourar a largura do editor. */
.quill-editor-container .ql-editor img {
  max-width: 100%;
  height: auto;
}

/* Prompt de URL não-nativo (inserir imagem por link). */
.quill-url-prompt {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--color-surface-300);
  border: 1px solid var(--color-surface-600);
  border-radius: 8px;
}

.quill-url-prompt__input {
  flex: 1 1 auto;
}