/* 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;
  }
}

/* Capa do guia com o título já desenhado na arte: aparece inteira. A altura tem teto, para a arte vertical
   (a de story) não ocupar a tela toda do celular antes do conteúdo. */
.guide-cover-art {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.guide-cover-preview {
  max-width: 320px;
  max-height: 180px;
  object-fit: cover;
}

.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;
}

/* Blocos do guia. Na página, as classes vêm do renderizador; no editor, o atributo gravado. */
.guide-highlight,
.quote-visual-editor-prose [data-block="highlight"] {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--falcon-primary, #2c7be5);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
}

.guide-banner,
.quote-visual-editor-prose [data-block="banner"] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 16rem;
  margin: 1.5rem 0;
  padding: 2rem 1.5rem;
  overflow: hidden;
  border-radius: 4px;
  background: #343a40;
  color: #fff;
  text-align: center;
}

/* A primeira imagem da seção fica atrás do texto, coberta por uma camada escura, como na capa. */
.guide-banner > picture,
.guide-banner > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

.guide-banner::after {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  content: "";
}

.guide-banner > :not(picture) {
  position: relative;
  z-index: 1;
  color: #fff !important;
}

/* O link pega a cor do Bootstrap e sumiria na camada escura. */
.guide-banner a {
  color: inherit;
}

.guide-columns,
.quote-visual-editor-prose [data-block="columns"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0;
}

.guide-column > :last-child,
.guide-highlight > :last-child,
.guide-banner > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .guide-columns,
  .quote-visual-editor-prose [data-block="columns"] {
    grid-template-columns: 1fr;
  }
}

/* No editor, cada bloco mostra o nome dele, para quem escreve saber onde está o cursor. */
.quote-visual-editor-prose [data-block="column"] {
  min-width: 0;
  padding: 0.5rem;
  border: 1px dashed var(--falcon-border-color);
  border-radius: 4px;
}

.quote-visual-editor-prose :is([data-block="highlight"], [data-block="banner"], [data-block="columns"])::before {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

.quote-visual-editor-prose [data-block="columns"]::before {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.quote-visual-editor-prose [data-block="highlight"]::before { content: var(--guide-block-highlight); }
.quote-visual-editor-prose [data-block="banner"]::before { content: var(--guide-block-banner); }
.quote-visual-editor-prose [data-block="columns"]::before { content: var(--guide-block-columns); }

/* 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);
}

/* Rodapé da aba da galeria, preso ao pé do modal: ele desce sobre o espaçamento do corpo do modal, senão as imagens
   apareceriam passando por baixo dele. */
.quote-gallery-search-footer {
  bottom: calc(-1 * var(--falcon-modal-padding, 1rem));
}

/* Imagem escolhida na aba da galeria: contorno e o número da ordem em que ela entra no editor. */
.quote-gallery-search-item .quote-gallery-search-order {
  position: absolute;
  top: 0.375rem;
  right: 0.5rem;
  left: auto;
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--falcon-primary);
  color: var(--falcon-white);
  font-weight: 600;
  line-height: 1.75rem;
  text-align: center;
}

.quote-gallery-search-item[aria-pressed="true"] img {
  outline: 3px solid var(--falcon-primary);
}

.quote-gallery-search-item[aria-pressed="true"] .quote-gallery-search-order {
  display: block;
}