/**
 * MOBILE PERFORMANCE OVERRIDES
 * Remove/simplifica efeitos pesados para melhorar FPS e responsividade no mobile
 * 
 * IMPORTANTE: Este arquivo deve ser carregado POR ULTIMO no HTML
 * para garantir que as otimizacoes sobrescrevam outros estilos
 */

@media (max-width: 768px) {
  /* ==================== REMOVER BACKDROP-FILTER (GANHA +150% FPS) ==================== */
  /* backdrop-filter: blur() e muito custoso em GPUs mobile (15-25ms por frame vs 2-3ms desktop) */
  
  .hyper-header,
  .hyper-nav,
  .hyper-card,
  .property-tray,
  .property-tray-overlay,
  .property-tray-nav,
  .city-tray,
  .city-tray-nav,
  .property-details-modal .property-details-overlay,
  .property-details-container,
  .property-details-nav,
  .property-details-image-counter,
  .photo-gallery-overlay,
  .photo-gallery-nav,
  .photo-gallery-close,
  .search-results-container,
  .search-results-overlay,
  .search-result-badge,
  .consultant-modal,
  .consultant-modal-overlay,
  .view-more-photos-btn,
  .map-loading-indicator,
  .city-node-system-header,
  .city-node-close,
  .property-badge,
  .property-badge-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ==================== COMPENSAR COM BACKGROUNDS MAIS OPACOS ==================== */
  /* Aumentar opacidade dos backgrounds para manter legibilidade sem blur */
  
  .hyper-nav,
  .property-details-overlay,
  .photo-gallery-overlay,
  .search-results-overlay,
  .consultant-modal-overlay {
    background: rgba(10, 10, 15, 0.98) !important;
  }

  .property-tray,
  .city-tray,
  .search-results-container,
  .consultant-modal {
    background: rgba(10, 10, 15, 0.96) !important;
  }

  .property-details-container {
    background: rgba(10, 10, 15, 0.94) !important;
  }

  .view-more-photos-btn,
  .property-tray-nav,
  .property-details-nav,
  .photo-gallery-nav {
    background: rgba(0, 0, 0, 0.85) !important;
  }

  .map-loading-indicator,
  .property-details-image-counter {
    background: rgba(10, 10, 15, 0.92) !important;
  }

  /* ==================== SIMPLIFICAR ANIMACOES (REDUZ PAINT TIME) ==================== */
  /* Animacoes mais rapidas e menos complexas no mobile */
  /* NOTA: .benefit-card excluido para preservar animacoes do stack layers */
  
  *:not(.benefit-card) {
    transition-duration: 0.2s !important;
  }

  /* Simplificar animacao de carimbo VENDIDO (menos GPU intensive) */
  @keyframes stampPulse {
    0%, 100% { 
      transform: rotate(-5deg) scale(1);
      box-shadow: 0 4px 15px rgba(211, 47, 47, 0.5);
    }
    50% { 
      transform: rotate(-5deg) scale(1.02);
      box-shadow: 0 5px 18px rgba(211, 47, 47, 0.6);
    }
  }

  /* ==================== OTIMIZAR SOMBRAS (REDUZ COMPOSITE LAYERS) ==================== */
  /* box-shadow e mais leve que backdrop-filter, mas ainda pode ser otimizado */
  /* NOTA: .benefit-card excluido para preservar estilos do stack layers */
  
  .hyper-card,
  .property-card,
  .search-result-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  .property-details-container,
  .search-results-container,
  .city-tray,
  .property-tray {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }
}

/* ==================== MOBILE PEQUENO (< 480px) ==================== */
@media (max-width: 480px) {
  /* Remover sombras completamente em telas muito pequenas */
  .property-card,
  .search-result-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  /* Animacoes ainda mais rapidas */
  * {
    transition-duration: 0.15s !important;
  }
}

/* ==================== FORCAR 100VW EM TODOS OS CONTAINERS MOBILE ==================== */
/* Corrige problema de containers com 1162px em telas de 360px */
@media (max-width: 1024px) {
  /* Garantir que html/body nao causam overflow */
  html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Search results (lista de busca) - FORCAR 100VW */
  .search-results-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(0) translateY(100%) !important;
  }
  
  .search-results-container.is-open {
    transform: translateX(0) translateY(0) !important;
  }
  
  .search-results-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .search-result-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* City tray (bandeja de cidade) - FORCAR 100VW */
  .city-tray {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  
  .city-tray-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .city-tray-carousel {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Property tray (detalhes do imovel) - FORCAR 100VW */
  .property-tray {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  
  .property-tray-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Property details modal - FORCAR 100VW */
  .property-details-container {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* DESABILITAR botao mobile-map-exit (causava bug, X da lista e suficiente) */
  .mobile-map-exit {
    display: none !important;
    pointer-events: none !important;
  }
  
  /* ==================== SECOES RURAIS/URBANOS - RESPONSIVIDADE ==================== */
  /* CRITICO: Forcar largura correta e evitar overflow */
  .rural-section-wrapper,
  .urban-section-wrapper {
    margin-bottom: 2rem !important;
    padding: 0 !important;
    min-height: 320px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  /* Galeria section - reservar espaco e evitar overflow */
  #galeria {
    min-height: 700px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 2rem 0 !important;
  }
  
  #galeria > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    overflow: hidden !important;
  }
  
  /* Nav toggle - altura fixa */
  .nav-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  .section-title-row {
    margin-bottom: 1rem !important;
    padding: 0 1rem !important;
  }
  
  .rural-section-title,
  .urban-section-title {
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
  }
  
  .rural-section-title i,
  .urban-section-title i {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }
  
  /* Properties scroll wrapper - CRITICO para responsividade */
  .properties-scroll-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }
  
  /* Container de scroll horizontal - FORCAR 100% largura */
  .properties-horizontal-scroll {
    width: 100% !important;
    max-width: 100% !important;
    gap: 1rem !important;
    padding: 1rem !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Loading states - CENTRALIZADO */
  .properties-horizontal-scroll .loading,
  .rural-loading,
  .urban-loading {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 3rem 1rem !important;
    min-height: 200px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 15px !important;
    margin: 0 auto !important;
  }
  
  .properties-horizontal-scroll .loading i,
  .rural-loading i,
  .urban-loading i {
    font-size: 2rem !important;
    color: #00d4ff !important;
    margin-bottom: 1rem !important;
  }
  
  .properties-horizontal-scroll .loading p,
  .rural-loading p,
  .urban-loading p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem !important;
    margin: 0 !important;
  }
  
  /* Cards responsivos no scroll */
  .property-card {
    min-width: calc(85vw - 2rem) !important;
    max-width: calc(85vw - 2rem) !important;
    scroll-snap-align: start !important;
  }
  
  .property-card .property-image-container {
    height: clamp(180px, 45vw, 250px) !important;
  }
  
  .property-card-content {
    padding: 1rem !important;
  }
  
  .property-card-content h3 {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
    line-height: 1.3 !important;
  }
  
  .property-price {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
    margin-bottom: 0.5rem !important;
  }
  
  .property-description {
    font-size: clamp(0.85rem, 3vw, 0.95rem) !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .property-address {
    font-size: clamp(0.8rem, 2.8vw, 0.9rem) !important;
    margin-bottom: 0.75rem !important;
  }
  
  .property-btn {
    padding: 0.6rem 1rem !important;
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
  }
  
  /* View more photos btn dentro dos cards */
  .view-more-photos-btn {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
    padding: 0.4rem 0.8rem !important;
  }
}