/* ============================================================
   Romao Imóveis — CSS Customizado
   ============================================================ */

/* Variáveis CSS */
:root {
  --primary:     #1B4F72;
  --primary-light: #2471a3;
  --primary-dark: #154360;
  --secondary:   #D4A017;
  --whatsapp:    #25D366;
  --bg:          #F8F9FA;
  --text:        #2C3E50;
}

/* ---- Tipografia ---- */
body {
  color: var(--text);
  background-color: var(--bg);
}

/* ---- HTMX indicator ---- */
.htmx-indicator { display: none !important; }
.htmx-request .htmx-indicator { display: flex !important; }
.htmx-request.htmx-indicator { display: flex !important; }

/* ---- Swiper customizações ---- */
.swiper-pagination-bullet-active {
  background: var(--secondary) !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: white !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.2rem !important;
}

/* ---- Cards imóveis: line-clamp ---- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Prose (conteúdo blog/descrição) ---- */
.prose h2 { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 1.5rem 0 0.75rem; }
.prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--primary); margin: 1.2rem 0 0.5rem; }
.prose p  { margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; }
.prose a  { color: var(--primary); text-decoration: underline; }
.prose strong { font-weight: 600; }
.prose img { max-width: 100%; border-radius: 0.75rem; margin: 1rem 0; }

/* ---- Leaflet z-index fix ---- */
.leaflet-pane,
.leaflet-control,
.leaflet-top,
.leaflet-bottom {
  z-index: 10 !important;
}

/* ---- Mapa container ---- */
#mapa, #mapa-contato {
  z-index: 0;
  position: relative;
}

/* ---- Botão WhatsApp flutuante ---- */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  animation: wa-bounce 2s infinite;
}
@keyframes wa-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ---- Scrollbar customizada (Chrome) ---- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: #f1f1f1; }
::-webkit-scrollbar-thumb  { background: var(--primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* ---- Animações suaves ---- */
.transition { transition: all 0.2s ease; }

/* ---- Galeria thumbnail ativa ---- */
.swiper-slide-thumb-active img {
  opacity: 1 !important;
  border: 2px solid var(--primary);
  border-radius: 6px;
}

/* ---- Admin: highlight ativo na sidebar ---- */
.admin-nav-active {
  background: rgba(255,255,255,0.2);
  color: white;
  font-weight: 600;
}

/* ---- EasyMDE ajustes ---- */
.EasyMDEContainer { border-radius: 8px; overflow: hidden; }
.EasyMDEContainer .CodeMirror { min-height: 300px; font-size: 14px; }

/* ---- Toastify customizado ---- */
.toastify {
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

/* ---- Responsive fixes ---- */
@media (max-width: 640px) {
  .hero-swiper { height: 360px !important; }
}

/* ---- Print ---- */
@media print {
  header, footer, .wa-float { display: none !important; }
}