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

textarea.drag-over {
  border: 2px dashed #0d6efd !important;
  background-color: #e7f3ff !important;
  outline: none;
}

.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 Editor - Toolbar Sticky */
.quote-editor-toolbar {
  position: sticky;
  top: 73px;
  z-index: 99;
  background-color: var(--falcon-card-bg, #fff);
  padding: 0.75rem 0;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--falcon-border-color, #dee2e6);
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

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