/* Foi necessário manter esse css personalizado para que o cabeçalho do orçamento exibisse a imagem com o gradiente por cima. */
.quote-header {
  background-image: url("/assets/header-quote-f0ff4e63.png"), linear-gradient(to bottom, rgba(74,144,226,0) 0%, rgba(74,144,226,0) 100%);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  min-height: 200px;

  h3 {
    font-size: 2rem;
    line-height: 1.5;
  }

  h5 {
    font-size: 1.25rem;
    line-height: 1.5;
  }
}

.quote-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 4px;
  cursor: pointer;
}

/* Quote Image Carousel */
.quote-image-carousel {
  margin: 1.5rem auto;
  max-width: 100%;
  position: relative;
}

/* Fixed height prevents layout shift when switching between images of different proportions.
   JS (adjustCarouselHeight) overrides this with the correct height based on the tallest
   image's aspect ratio once images have loaded. */
.quote-image-carousel .carousel-inner {
  border-radius: 8px;
  background-color: #f8f9fa;
  height: 350px;
  touch-action: pan-y;
}

.quote-image-carousel .carousel-item {
  text-align: center;
  height: 100%;
}

.quote-image-carousel .carousel-item.active,
.quote-image-carousel .carousel-item.carousel-item-next,
.quote-image-carousel .carousel-item.carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* picture wraps the img — both need to fill the fixed-height slot */
.quote-image-carousel .carousel-item picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.quote-image-carousel .carousel-item picture img,
.quote-image-carousel .carousel-item > img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}

.quote-image-carousel .carousel-control-prev,
.quote-image-carousel .carousel-control-next {
  width: 8%;
  opacity: 0.5;
}

.quote-image-carousel .carousel-control-prev:hover,
.quote-image-carousel .carousel-control-next:hover {
  opacity: 0.8;
}

.quote-image-carousel .carousel-control-prev-icon,
.quote-image-carousel .carousel-control-next-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  padding: 0.35rem;
}

/* Dots: dark pill overlay always on top of image, at the fixed bottom of the carousel */
.quote-image-carousel .carousel-indicators {
  position: absolute;
  right: auto;
  bottom: 0.75rem;
  left: 50%;
  z-index: 2;
  width: auto;
  margin: 0;
  padding: 0.2rem 0.35rem;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  gap: 0.35rem;
}

.quote-image-carousel .carousel-indicators button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1;
  border: none;
  margin: 0;
  transition: background-color 0.15s ease;
}

.quote-image-carousel .carousel-indicators button.active {
  background-color: #fff !important;
}

.quote-image.loading-lazy {
  width: 100%;
  min-height: 200px;
  background-color: #f0f0f0;
}

/* Quote Details - tables */
.quote-table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.quote-table th,
.quote-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--falcon-border-color, #dee2e6);
  text-align: left;
  vertical-align: top;
}

/* O editor visual grava a linha de cabeçalho no corpo da tabela, sem `thead`. */
.quote-table th {
  background-color: var(--falcon-gray-200, #edf2f9);
  font-weight: 600;
}

.quote-table th > p:last-child,
.quote-table td > p:last-child {
  margin-bottom: 0;
}

.quote-table tbody tr:nth-child(even) {
  background-color: var(--falcon-gray-100, #f9fafd);
}

/* Quote Editor - Preview Modal */
#quotePreviewModal .modal-content {
  background-color: #fff;
}

#quotePreviewModal .modal-header {
  background-color: var(--falcon-card-bg, #fff);
  border-bottom: 1px solid var(--falcon-border-color, #dee2e6);
  color: var(--falcon-heading-color, #000);
}

#quotePreviewModal .modal-title,
#quotePreviewModal .modal-title *,
#quotePreviewModal .modal-header h5 {
  color: var(--falcon-heading-color, #000) !important;
}

#quotePreviewModal .modal-body {
  padding: 1.5rem;
  background-color: #fff;
}

#quotePreviewModal .preview-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.6;
  background-color: #fff;
}

#quotePreviewModal .preview-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.6;
}

#quotePreviewModal .preview-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

#quotePreviewModal .preview-content h4 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

/* Subtítulo dos detalhes do orçamento: em negrito, menor que o título e maior que o texto. */
[data-quote-config-target="detailsTemplate"] h4,
#quotePreviewModal .preview-content h4,
.quote-visual-editor-prose h4 {
  font-weight: 600;
}

#quotePreviewModal .preview-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #212529;
}

#quotePreviewModal .preview-content ul,
#quotePreviewModal .preview-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
  color: #212529;
}

#quotePreviewModal .preview-content li {
  margin-bottom: 0.5rem;
}

#quotePreviewModal .preview-content a {
  color: #0d6efd;
  text-decoration: underline;
}

#quotePreviewModal .preview-content a:hover {
  text-decoration: none;
}

#quotePreviewModal .preview-content blockquote {
  border-left: 4px solid #dee2e6;
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: #6c757d;
  font-style: italic;
}

#quotePreviewModal .preview-content hr {
  border: none;
  border-top: 1px solid #6c757d;
  margin: 1.5rem 0;
  opacity: 0.6;
}

#quotePreviewModal .preview-content code {
  background-color: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

#quotePreviewModal .preview-content pre {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}

#quotePreviewModal .preview-content pre code {
  background-color: transparent;
  padding: 0;
}

#quotePreviewModal .preview-content img,
#quotePreviewModal .preview-content picture {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 4px;
}

#quotePreviewModal .preview-content picture img {
  cursor: default;
  border-radius: 4px;
}

/* Responsividade Mobile */
@media (max-width: 576px) {
  #quotePreviewModal .modal-dialog {
    margin: 0.5rem;
  }

  #quotePreviewModal .modal-body {
    padding: 1rem;
  }

  #quotePreviewModal .preview-content {
    font-size: 0.875rem;
  }

  #quotePreviewModal .preview-content h3 {
    font-size: 1.25rem;
  }

  #quotePreviewModal .preview-content h4 {
    font-size: 1.1rem;
  }

  .quote-image-carousel .carousel-inner {
    height: 220px;
  }

  .quote-image-carousel .carousel-control-prev-icon,
  .quote-image-carousel .carousel-control-next-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .quote-image-carousel .carousel-indicators button {
    width: 6px;
    height: 6px;
  }
}

/* Com o texto longo, os botões sairiam da tela: a barra fica presa abaixo da barra de navegação enquanto
   o campo está à vista, e some junto com ele. A barra de navegação passa da altura mínima do tema
   (`--falcon-top-nav-height`, 69px) por causa do conteúdo dela, e mede 73px. */
.quote-visual-editor-toolbar {
  position: sticky;
  top: 73px;
  z-index: 3;
  padding-top: 0.5rem;
  background-color: var(--falcon-card-bg);
}

/* Nas configurações, o modelo padrão fica num fundo terciário: a barra presa acompanha o fundo dele. */
.bg-body-tertiary .quote-visual-editor-toolbar {
  background-color: var(--falcon-tertiary-bg);
}

/* Editor visual dos detalhes: a área de edição cresce com o texto. */
.quote-visual-editor-content {
  min-height: 10rem;
  height: auto;
  cursor: text;
}

/* Na tela de toque, o navegador deixa o último botão tocado em :hover, e no tema o :hover tem o mesmo
   visual do botão ativo: o negrito desligado pelo toque continuaria parecendo ligado. Sem mouse, só a
   formatação ativa pinta o botão. */
@media (hover: none) {
  .quote-visual-editor .btn-toolbar .btn-outline-secondary:not(.active) {
    --falcon-btn-hover-color: var(--falcon-btn-color);
    --falcon-btn-hover-bg: var(--falcon-btn-bg);
    --falcon-btn-hover-border-color: var(--falcon-btn-border-color);
  }
}

/* O foco fica no texto editável, dentro do campo: o contorno vai no campo, como nos demais. */
.quote-visual-editor-content:focus-within {
  border-color: var(--falcon-primary);
  box-shadow: 0 0 0 var(--falcon-focus-ring-width) var(--falcon-focus-ring-color);
}

.quote-visual-editor-prose {
  min-height: 9rem;
  outline: none;
}

.quote-visual-editor-prose > :last-child,
.quote-visual-editor-prose li > p,
.quote-visual-editor-prose th > p,
.quote-visual-editor-prose td > p {
  margin-bottom: 0;
}

.quote-visual-editor-prose img {
  display: inline-block;
  max-width: 100%;
  max-height: 16rem;
  margin: 0.25rem;
  border-radius: 4px;
  vertical-align: bottom;
}

/* Imagens que viram carrossel na página do orçamento: contorno tracejado e uma etiqueta antes delas. */
.quote-visual-editor-prose img.quote-visual-editor-carousel-image {
  outline: 2px dashed var(--falcon-primary);
  outline-offset: 2px;
}

/* A etiqueta (um badge do tema) fica numa linha só dela, acima das imagens, para não desalinhar o grupo. */
.quote-visual-editor-carousel-label {
  display: block;
  width: fit-content;
  margin: 0.25rem;
  user-select: none;
}

.quote-visual-editor-prose img.ProseMirror-selectednode {
  outline: 3px solid var(--falcon-primary);
}

.quote-visual-editor-prose img.quote-visual-editor-uploading {
  opacity: 0.5;
}

.quote-visual-editor-prose table {
  width: 100%;
  margin: 0.5rem 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.quote-visual-editor-prose th,
.quote-visual-editor-prose td {
  min-width: 4rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--falcon-border-color);
  vertical-align: top;
}

.quote-visual-editor-prose .selectedCell {
  background-color: var(--falcon-primary-bg-subtle);
}

.quote-visual-editor-prose.ProseMirror-focused .ProseMirror-gapcursor:after {
  border-top-color: var(--falcon-body-color);
}