/* Mobile Property Details View - Only applies below 992px */
@media (max-width: 992px) {
    /* Hide the desktop property view */
    .property-content {
      display: none !important;
    }
    
    /* Show mobile version */
    .mobile-property-content {
      display: block;
    }
    
    /* Main container styles */
    .mobile-property-content {
      font-family: "Inter", "Helvetica Neue", "Neue Haas Grotesk", Arial, system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
      background-color: var(--bg);
      color: #333;
      line-height: 1.5;
      overflow-x: hidden;
    }
    
    /* Mobile header */
    .mobile-property-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      z-index: 1000;
    }
    
    .mobile-back-btn, .mobile-share-btn {
      background: none;
      border: none;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #333;
      border-radius: 50%;
    }
    
    .mobile-back-btn:active, .mobile-share-btn:active {
      background-color: #f5f5f5;
    }
    
    .mobile-header-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    /* Property gallery */
    .mobile-property-gallery {
      margin-top: 0px;
      position: relative;
    }
    
    .mobile-property-gallery .carousel-item img {
      height: 280px;
      object-fit: cover;
    }
    
    .carousel-indicators {
      margin-bottom: 10px;
    }
    
    .carousel-indicators button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.5;
    }
    
    .carousel-indicators button.active {
      opacity: 1;
    }
    /* Gallery controls for back and share buttons */
    /* Use safe-area-inset-top so buttons are visible on notched phones (avoids "page starts upwards" clipping) */
    .mobile-gallery-controls {
        position: absolute;
        top: max(16px, env(safe-area-inset-top, 16px));
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        padding: 0 16px;
    }
    
    .mobile-gallery-back-btn,
    .mobile-gallery-share-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .mobile-gallery-back-btn:active,
    .mobile-gallery-share-btn:active {
        background-color: rgba(0, 0, 0, 0.7);
    }
    /* Price section */
    .mobile-property-price-section {
      padding: 16px;
      display: flex;
      align-items: center;
    }
    
    .mobile-property-price {
      font-size: 24px;
      font-weight: 700;
      color: #222;
      margin: 0;
      margin-right: 12px;
    }
    
    .mobile-transaction-badge {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
    }
    
    .mobile-transaction-badge.rent {
      background-color: #22c55e;
    }
    
    .mobile-transaction-badge.sale {
      background-color: #3b82f6;
    }
    
    /* Address */
    .mobile-property-address {
      padding: 12px 16px;
      display: flex;
      align-items: flex-start;
      gap: 10px;

    }
    
    .mobile-property-address i {
      color: #3b82f6;
      font-size: 18px;
      margin-top: 3px;
    }
    
    .address-text {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
    
    .city-text {
      font-size: 13px;
      color: #666;
    }
    
    /* Property highlights */
    .mobile-property-highlights {
      display: flex;
      padding: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .highlight-item {
      flex: 1;
      min-width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .highlight-item i {
      color: #3b82f6;
      font-size: 20px;
      margin-bottom: 6px;
    }
    
    .highlight-value {
      font-size: 16px;
      font-weight: 700;
      color: #333;
      margin-bottom: 2px;
    }
    
    .highlight-label {
      font-size: 11px;
      color: #666;
    }
    
    /* Monthly costs */
    .mobile-costs-card {
      margin: 16px;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .mobile-costs-card h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 16px;
    }
    
    .mobile-costs-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .mobile-cost-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .mobile-cost-item div {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .mobile-cost-item i {
      color: #3b82f6;
      font-size: 16px;
    }
    
    .mobile-cost-item span {
      font-size: 14px;
      color: #666;
    }
    
    .cost-value {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
    
    .mobile-cost-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding-top: 12px;
      border-top: 1px solid #eee;
    }
    
    .mobile-cost-total span {
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }
    
    .total-value {
      font-size: 15px;
      font-weight: 700;
      color: #3b82f6;
    }
    
    /* Description */
    .mobile-description-section {
      margin: 16px;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .mobile-description-section h2 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    
    .mobile-description-text {
      font-size: 14px;
      color: #555;
      line-height: 1.6;
    }
    
    /* Features */
    .mobile-features-section {
      margin: 16px;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .mobile-features-section h2 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    
    .mobile-features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    
    .mobile-feature-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      background-color: #f5f7fa;
      border-radius: 6px;
    }
    
    .mobile-feature-item i {
      color: #3b82f6;
      font-size: 14px;
    }
    
    .mobile-feature-item span {
      font-size: 13px;
      color: #555;
    }
    
    /* Contact buttons */
    .mobile-contact-buttons {
      display: flex;
      gap: 10px;
      margin: 16px;
    }
    
    .mobile-btn-call, .mobile-btn-message {
      flex: 1;
      padding: 12px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: none;
    }
    
    .mobile-btn-call {
      background-color: #3b82f6;
      color: #fff;
    }
    
    .mobile-btn-message {
      background-color: #fff;
      color: #3b82f6;
      border: 1px solid #3b82f6;
    }
    
    /* Broker info */
    .mobile-broker-info {
      margin: 0px 16px 16px 16px;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .mobile-broker-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #eee;
    }
    
    .mobile-broker-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .mobile-broker-details h4 {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin: 0 0 4px 0;
    }
    
    .mobile-broker-details p {
      font-size: 13px;
      color: #666;
      margin: 0;
    }
    
    /* =============================
    Mobile Navigation Bar sticky [begin]
    ============================= */
    
    .mobile-property-nav {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        background-color: var(--bg) !important;
        transform: translateZ(0) !important; /* Forces a new stacking context */
    }
    
    

    /* Add shadow when scrolled */
    .mobile-property-nav.scrolled {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Enhanced mobile summary bar styling */
    .mobile-property-summary-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid #e5e7eb !important;
        visibility: hidden ;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .property-thumbnail {
        width: 50px;
        height: 30px;
        border-radius: 4px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .property-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-property-summary-bar .badge {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        color: white;
    }

    .price-text {
        font-size: 14px;
        font-weight: 700;
        color: #1a1a1a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .property-details-close {
        border: none;
        padding: 4px;
    }

    .property-details-close i {
        font-size: 18px;
    }

    .mobile-nav-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 8px;
    }

    .mobile-nav-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-nav-tab {
        padding: 12px 0;
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        white-space: nowrap;
        text-decoration: none;
        min-width: max-content;
    }

    .mobile-nav-tab.active {
        color: #3b82f6;
        font-weight: 600;
        border-bottom: 2px solid #3b82f6;
    }
    
    /* =============================
    Mobile Navigation Bar sticky [end]
    ============================= */

    /* =============================
    Mobile Navigation sections [begin]
    ============================= */
    .mobile-section {
      margin-bottom: 24px !important;
      margin-top: 20px !important;
      padding: 2px 0px !important;
    }
    /* Section content */
    .mobile-nav-sections {
        padding: 16px;
    }
      
    .mobile-section h2 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    /* safety-summary card compact – Location, Green Score, Walkability/POI (992px base) */
    .mobile-section .safety-summary {
      margin-bottom: 20px !important;
    }
    .mobile-section .safety-score-card {
      margin-bottom: 10px !important;
      padding: 12px 14px !important;
      border-radius: 10px !important;
    }
    .mobile-section .safety-score-card.overall {
      margin-bottom: 16px !important;
    }
    .mobile-section .safety-score-bubble {
      width: 52px !important;
      height: 52px !important;
      margin-right: 12px !important;
    }
    .mobile-section .safety-score-bubble .score {
      font-size: 1.1rem !important;
    }
    .mobile-section .safety-score-bubble .max {
      font-size: 0.7rem !important;
    }
    .mobile-section .safety-label h3 { font-size: 1.05rem !important; }
    .mobile-section .safety-label h4 { font-size: 0.95rem !important; }
    .mobile-section .safety-label p { font-size: 0.85rem !important; }
    .mobile-section .rank-label { font-size: 0.85rem !important; }
    .mobile-section .safety-details {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      max-width: 100% !important;
    }
    .mobile-section .safety-details .safety-score-card {
      width: 100% !important;
      max-width: 100% !important;
      margin-bottom: 0 !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    .mobile-section .safety-summary,
    .mobile-section .neighborhood-safety {
      max-width: 100% !important;
      min-width: 0 !important;
    }
    .mobile-section .safety-score-card {
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    .mobile-section .safety-label {
      min-width: 0 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }
    
    .mobile-section-content {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    /* Mobile price analysis */
    .mobile-price-range {
      margin-bottom: 20px;
    }
    
    .mobile-price-position {
      font-size: 14px;
      text-align: center;
      margin-bottom: 12px;
    }
    
    .mobile-price-position .highlight {
      font-weight: 700;
      color: #3b82f6;
    }
    
    .mobile-range-bar {
      height: 8px;
      background-color: #e9ecef;
      border-radius: 4px;
      position: relative;
      margin-bottom: 12px;
    }
    
    .mobile-range-fill {
      height: 8px;
      background-color: #3b82f6;
      border-radius: 4px;
    }
    
    .mobile-range-marker {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #3b82f6;
      top: -4px;
      transform: translateX(-50%);
      border: 2px solid #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .mobile-range-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
    }
    
    .mobile-metrics {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .mobile-metric-card {
      background-color: #f8fafc;
      border-radius: 6px;
      padding: 12px;
    }
    
    .metric-title {
      font-size: 13px;
      color: #666;
      margin-bottom: 6px;
    }
    
    .metric-value {
      font-size: 15px;
      font-weight: 600;
      color: #333;
    }

    /* =============================
       #mobile-valuations resizing only (Property Valuations) – mobile-only, desktop untouched
       ============================= */
    /* Section spacing inherited from .mobile-section */
    #mobile-valuations > h2 {
      font-size: 16px !important;
      font-weight: 600;
      margin-bottom: 2px !important;
    }
    #mobile-valuations .section-subtitle {
      font-size: 12px !important;
      margin-bottom: 14px !important;
    }
    #mobile-valuations .price-range-container {
      padding: 0 12px !important;
      margin-bottom: 14px !important;
    }
    #mobile-valuations .price-position-text {
      font-size: 14px !important;
      margin-bottom: 10px !important;
    }
    #mobile-valuations .price-percentile-value {
      font-size: 15px !important;
    }
    #mobile-valuations .range-bar {
      height: 8px !important;
      margin-bottom: 18px !important;
    }
    #mobile-valuations .range-fill {
      height: 8px !important;
    }
    #mobile-valuations .range-marker {
      width: 16px !important;
      height: 16px !important;
      top: -4px !important;
      border-width: 2px !important;
    }
    #mobile-valuations .price-indicators {
      top: 8px !important;
      height: 22px !important;
    }
    #mobile-valuations .indicator-label {
      font-size: 10px !important;
    }
    #mobile-valuations .range-min,
    #mobile-valuations .range-max {
      font-size: 11px !important;
    }
    #mobile-valuations .competitive-metrics {
      gap: 10px !important;
      margin-bottom: 16px !important;
    }
    #mobile-valuations .metric-row {
      padding: 10px 12px !important;
      gap: 10px !important;
    }
    #mobile-valuations .metric-icon {
      font-size: 18px !important;
    }

    /* Mobile Rentability - mirror mobile-valuations for consistent layout */
    #mobile-rentability {
      overflow: visible;
    }
    #mobile-rentability > .rental-price-section > h2,
    #mobile-rentability .section-title {
      font-size: 16px !important;
      font-weight: 600;
      margin-bottom: 2px !important;
    }
    #mobile-rentability .section-subtitle {
      font-size: 12px !important;
      margin-bottom: 14px !important;
    }
    #mobile-rentability .rental-price-range-container {
      padding: 0 12px !important;
      margin-bottom: 14px !important;
      overflow: visible;
    }
    #mobile-rentability .price-position-text {
      font-size: 14px !important;
      margin-bottom: 10px !important;
    }
    #mobile-rentability .price-percentile-value {
      font-size: 15px !important;
    }
    #mobile-rentability .range-bar {
      height: 8px !important;
      margin-bottom: 18px !important;
      overflow: visible;
    }
    #mobile-rentability .rental-range-fill,
    #mobile-rentability .range-fill {
      height: 8px !important;
    }
    #mobile-rentability .rental-range-marker,
    #mobile-rentability .range-marker {
      width: 16px !important;
      height: 16px !important;
      top: -4px !important;
    }
    #mobile-rentability .price-indicators {
      top: 8px !important;
      height: 22px !important;
    }
    #mobile-rentability .indicator-label {
      font-size: 10px !important;
    }
    #mobile-rentability .rental-range-min,
    #mobile-rentability .rental-range-max,
    #mobile-rentability .range-min,
    #mobile-rentability .range-max {
      font-size: 11px !important;
    }
    #mobile-rentability .rental-competitive-metrics {
      gap: 10px !important;
      margin-bottom: 16px !important;
    }
    #mobile-rentability .rental-competitive-metrics .metric-row {
      padding: 10px 12px !important;
      gap: 10px !important;
    }
    #mobile-rentability .rental-competitive-metrics .metric-icon {
      font-size: 18px !important;
    }
    #mobile-rentability .rental-competitive-metrics .metric-icon ion-icon {
      width: 18px;
      height: 18px;
    }
    #mobile-rentability .rental-competitive-metrics .metric-title {
      font-size: 12px !important;
      margin-bottom: 3px !important;
    }
    #mobile-rentability .rental-competitive-metrics .metric-value {
      font-size: 14px !important;
      margin-bottom: 3px !important;
    }
    #mobile-rentability .rental-competitive-metrics .metric-description {
      font-size: 11px !important;
      line-height: 1.4 !important;
    }
    @media (max-width: 480px) {
      #mobile-rentability .rental-competitive-metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
      }
    }

    /* ROI section – native mobile look, aligned with brand and other mobile components */
    #mobile-rentability .roi-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #e5e7eb;
    }
    #mobile-rentability .roi-section .section-title {
      font-size: 16px !important;
      font-weight: 600;
      margin-bottom: 2px !important;
    }
    #mobile-rentability .roi-section .section-subtitle {
      font-size: 12px !important;
      margin-bottom: 16px !important;
    }
    #mobile-rentability .selectors-container {
      flex-direction: column;
      gap: 16px;
      margin-bottom: 20px;
    }
    #mobile-rentability .rent-selector,
    #mobile-rentability .occupancy-selector {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 0;
    }
    #mobile-rentability .selector-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 8px;
      margin-right: 0;
      min-width: 0;
    }
    /* Segmented control – native iOS/Android style, brand colors */
    #mobile-rentability .button-group {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: #f5f5f7;
      border-radius: 10px;
      width: 100%;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    #mobile-rentability .rent-btn,
    #mobile-rentability .occupancy-btn {
      flex: 1;
      min-height: 44px;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: #6e6e73;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    #mobile-rentability .rent-btn:active,
    #mobile-rentability .occupancy-btn:active {
      background: rgba(59, 130, 246, 0.1);
    }
    #mobile-rentability .rent-btn.active,
    #mobile-rentability .occupancy-btn.active {
      background: #fff;
      color: #3b82f6;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    /* ROI cards – grid: Rentabilidade Anual (thin, full width) on top; Retorno Mensal + Payback in two columns below */
    #mobile-rentability .roi-overview {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 14px;
      margin-bottom: 20px;
    }
    #mobile-rentability .roi-card {
      background: #fff;
      border-radius: 10px;
      padding: 18px 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      margin: 0;
      text-align: left;
      min-height: 100px;
    }
    #mobile-rentability .roi-card.highlight {
      grid-column: 1 / -1;
      grid-row: 1;
      padding: 14px 16px;
      min-height: 0;
      border: 2px solid rgba(59, 130, 246, 0.35);
      background: linear-gradient(to bottom, rgba(59, 130, 246, 0.04), #fff);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(59, 130, 246, 0.1);
    }
    #mobile-rentability .roi-card:not(.highlight):nth-child(1) {
      grid-column: 1;
      grid-row: 2;
    }
    #mobile-rentability .roi-card:not(.highlight):nth-child(3) {
      grid-column: 2;
      grid-row: 2;
    }
    #mobile-rentability .roi-card-title {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 8px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    #mobile-rentability .roi-card-value {
      font-size: 22px;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 6px;
      line-height: 1.2;
    }
    #mobile-rentability .roi-card.highlight .roi-card-value {
      color: #3b82f6;
      font-size: 24px;
    }
    #mobile-rentability .roi-card-details {
      font-size: 12px;
      color: #6b7280;
      line-height: 1.4;
    }
    #mobile-rentability .chart-container {
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 12px;
      margin-top: 0;
    }

    #mobile-valuations .metric-icon ion-icon {
      width: 18px;
      height: 18px;
    }
    #mobile-valuations .metric-title {
      font-size: 12px !important;
      margin-bottom: 3px !important;
    }
    #mobile-valuations .metric-value {
      font-size: 14px !important;
      margin-bottom: 3px !important;
    }
    #mobile-valuations .metric-description {
      font-size: 11px !important;
      line-height: 1.4 !important;
    }
    #mobile-valuations .comparables-summary {
      margin-bottom: 16px !important;
    }
    #mobile-valuations .comparables-summary h4 {
      font-size: 13px !important;
      margin-bottom: 10px !important;
    }
    #mobile-valuations .comparable-property-card {
      min-width: 240px !important;
      max-width: 240px !important;
    }
    #mobile-valuations .comparable-property-card:hover {
      transform: none !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    }
    #mobile-valuations .comparable-card-title {
      font-size: 12px !important;
    }
    #mobile-valuations .comparable-card-subtitle {
      font-size: 10px !important;
    }
    #mobile-valuations .property-price-section {
      margin-bottom: 8px !important;
    }
    #mobile-valuations .price-badge-inline,
    #mobile-valuations .price-badge-compact {
      font-size: 10px !important;
      padding: 3px 8px !important;
    }
    #mobile-valuations .comparable-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    #mobile-valuations .comparable-properties-carousel-nav {
      bottom: 24px !important;
    }
    #mobile-valuations .comparable-properties-carousel-prev,
    #mobile-valuations .comparable-properties-carousel-next {
      width: 32px !important;
      height: 32px !important;
      font-size: 14px !important;
    }
    /* Comparable card body: price, specs, metrics, button */
    #mobile-valuations .comparable-property-card .property-details {
      padding: 10px 12px !important;
    }
    #mobile-valuations .comparable-property-card .property-price {
      font-size: 14px !important;
      font-weight: 700;
    }
    #mobile-valuations .comparable-property-card .property-specs {
      font-size: 11px !important;
    }
    #mobile-valuations .comparable-property-card .property-specs i {
      width: 12px;
      height: 12px;
    }
    #mobile-valuations .comparable-property-card .property-metrics .metric-label {
      font-size: 10px !important;
    }
    #mobile-valuations .comparable-property-card .property-metrics .metric-value {
      font-size: 12px !important;
    }
    #mobile-valuations .comparable-property-card .view-listing-btn {
      font-size: 12px !important;
      padding: 8px 12px !important;
    }

    /* =============================
       #mobile-amenities resizing only – mobile-only, desktop untouched
       ============================= */
    /* Section spacing inherited from .mobile-section */
    #mobile-amenities > h2 {
      font-size: 16px !important;
      font-weight: 600;
      margin-bottom: 2px !important;
    }
    #mobile-amenities .section-subtitle {
      font-size: 12px !important;
      margin-bottom: 14px !important;
    }
    #mobile-amenities .amenities-container {
      padding: 10px 12px !important;
    }
    #mobile-amenities .amenities-comparison-card {
      height: 320px !important;
      border-radius: 6px !important;
    }
    #mobile-amenities .table-headers {
      font-size: 10px !important;
    }
    #mobile-amenities .table-headers > div {
      padding: 10px 12px !important;
    }
    #mobile-amenities .table-row > div:first-child {
      padding: 10px 12px !important;
      font-size: 12px !important;
    }
    #mobile-amenities .table-row > div:first-child > div:first-child {
      font-size: 12px !important;
    }
    #mobile-amenities .table-row > div:first-child > div:last-child {
      font-size: 11px !important;
      line-height: 1.3 !important;
    }
    #mobile-amenities .table-row > div:nth-child(2) {
      padding: 10px 12px !important;
    }
    #mobile-amenities .table-row > div:nth-child(2) span {
      font-size: 10px !important;
      padding: 3px 6px !important;
      border-radius: 8px !important;
    }
    #mobile-amenities .table-row > div:last-child {
      padding: 10px 12px !important;
      font-size: 12px !important;
    }
    #mobile-amenities .table-footer {
      padding: 8px 12px !important;
      font-size: 11px !important;
    }
    #mobile-amenities .table-footer > div > div > div {
      width: 8px !important;
      height: 8px !important;
    }
    #mobile-amenities #amenities-comparables svg {
      max-height: 280px !important;
    }
    /* Amenities summary stats (competitive-metrics) - mobile */
    #mobile-amenities .amenities-competitive-metrics {
      gap: 10px !important;
      margin-bottom: 16px !important;
    }
    #mobile-amenities .amenities-competitive-metrics .metric-row {
      padding: 10px 12px !important;
      gap: 10px !important;
    }
    #mobile-amenities .amenities-competitive-metrics .metric-icon {
      font-size: 18px !important;
    }
    #mobile-amenities .amenities-competitive-metrics .metric-icon ion-icon {
      width: 18px;
      height: 18px;
    }
    #mobile-amenities .amenities-competitive-metrics .metric-title {
      font-size: 12px !important;
      margin-bottom: 3px !important;
    }
    #mobile-amenities .amenities-competitive-metrics .metric-value {
      font-size: 14px !important;
      margin-bottom: 3px !important;
    }
    #mobile-amenities .amenities-competitive-metrics .metric-description {
      font-size: 11px !important;
      line-height: 1.4 !important;
    }
    @media (max-width: 480px) {
      #mobile-amenities .amenities-competitive-metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
      }
    }
    /* Amenities carousel + cards (view B) - mobile */
    #mobile-amenities .amenities-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    #mobile-amenities .amenity-card {
      min-width: 220px !important;
      max-width: 220px !important;
    }
    #mobile-amenities .amenity-card-title {
      font-size: 14px !important;
    }
    #mobile-amenities .amenity-card-description {
      font-size: 12px !important;
    }
    #mobile-amenities .amenities-carousel-prev,
    #mobile-amenities .amenities-carousel-next {
      width: 32px !important;
      height: 32px !important;
      font-size: 14px !important;
    }
    /* Hide carousel controls on mobile – users can swipe instead */
    #mobile-amenities .amenities-carousel-nav {
      display: none !important;
    }

    /* =============================
       #mobile-building-transactions resizing only – mobile-only, desktop untouched
       ============================= */
    /* Section spacing inherited from .mobile-section */
    #mobile-building-transactions > h2 {
      font-size: 16px !important;
      font-weight: 600;
      margin-bottom: 2px !important;
    }
    #mobile-building-transactions .section-subtitle {
      font-size: 12px !important;
      margin-bottom: 14px !important;
    }
    #mobile-building-transactions .content-placeholder {
      border-radius: 8px !important;
    }
    #mobile-building-transactions #transaction-history-chart-container {
      height: 340px !important;
      min-height: 340px !important;
      overflow: visible !important;
      border-radius: 12px !important;
      margin-bottom: 12px !important;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      padding: 10px !important;
      padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    #mobile-building-transactions .transactions-table {
      height: 220px !important;
      margin-top: 12px !important;
      border-radius: 6px !important;
    }
    #mobile-building-transactions .transactions-table th {
      padding: 8px 10px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
    }
    #mobile-building-transactions .transactions-table td {
      padding: 8px 10px !important;
      font-size: 12px !important;
    }
    /* Unit/transaction cards inside building transactions: hide carousel controls (prev/next) only, cards stay in carousel */
    #mobile-building-transactions .transactions-table .tr-carousel-nav {
      display: none !important;
    }
    #mobile-building-transactions .transactions-table .tr-properties-carousel {
      height: auto !important;
      min-height: auto !important;
    }
    #mobile-building-transactions .transactions-table .tr-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    #mobile-building-transactions .transactions-table .tr-properties-slider {
      height: auto !important;
      gap: 12px !important;
    }
    /* All tr-properties carousels in building-transactions (unlock-data, report-upsell, etc.) */
    #mobile-building-transactions .tr-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    #mobile-building-transactions .tr-property-card {
      min-width: 280px !important;
      margin-right: 12px !important;
      border-radius: 6px !important;
    }
    #mobile-building-transactions .tr-property-header {
      padding: 8px 10px !important;
    }
    #mobile-building-transactions .tr-property-address {
      font-size: 13px !important;
      font-weight: 700 !important;
    }
    #mobile-building-transactions .tr-property-count {
      font-size: 11px !important;
    }
    #mobile-building-transactions .tr-property-details {
      height: fit-content !important;
      padding: 8px 10px !important;
      gap: 6px !important;
    }
    #mobile-building-transactions .tr-growth-header {
      font-size: 12px !important;
      margin-bottom: 4px !important;
    }
    #mobile-building-transactions .tr-transaction-highlights {
      gap: 8px !important;
      margin-bottom: 8px !important;
    }
    #mobile-building-transactions .tr-highlight-section {
      padding: 6px 8px !important;
      border-radius: 4px !important;
    }
    #mobile-building-transactions .tr-highlight-label {
      font-size: 9px !important;
      margin-bottom: 2px !important;
    }
    #mobile-building-transactions .tr-highlight-value {
      font-size: 13px !important;
      margin-bottom: 2px !important;
    }
    #mobile-building-transactions .tr-highlight-date,
    #mobile-building-transactions .tr-highlight-unit {
      font-size: 10px !important;
    }
    #mobile-building-transactions .tr-transaction-period {
      padding-top: 6px !important;
      font-size: 10px !important;
    }
    #mobile-building-transactions .tr-distribution-label {
      font-size: 12px !important;
    }
    #mobile-building-transactions .tr-distribution-legend {
      font-size: 11px !important;
    }
    #mobile-building-transactions .tr-carousel-prev-btn,
    #mobile-building-transactions .tr-carousel-next-btn {
      width: 32px !important;
      height: 32px !important;
    }

    /* =============================
       #mobile-transaction-history resizing only – mobile-only, desktop untouched
       Graph + cards carousel, same layout pattern as building-transactions
       ============================= */
    /* Section spacing inherited from .mobile-section */
    #mobile-transaction-history > h2 {
      font-size: 16px !important;
      font-weight: 600;
      margin-bottom: 2px !important;
    }
    #mobile-transaction-history .section-subtitle {
      font-size: 12px !important;
      margin-bottom: 14px !important;
    }
    #mobile-transaction-history #transaction-history-region-container {
      height: 340px !important;
      min-height: 340px !important;
      overflow: visible !important;
      border-radius: 12px !important;
      margin-bottom: 12px !important;
      background: #fff !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      padding: 10px !important;
      padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    #mobile-transaction-history #transaction-region-container {
      height: auto !important;
      min-height: auto !important;
      overflow: visible !important;
      border-radius: 8px !important;
    }
    #mobile-transaction-history .tr-carousel-nav.regional-tr-carousel-nav {
      margin-top: 12px !important;
    }
    #mobile-transaction-history .tr-carousel-prev-btn,
    #mobile-transaction-history .tr-carousel-next-btn {
      width: 32px !important;
      height: 32px !important;
    }

    /* Mobile chart overrides – iOS-native, minimal, interactive */
    #mobile-building-transactions .apexcharts-tooltip,
    #mobile-transaction-history .apexcharts-tooltip {
      font-size: 10px !important;
      padding: 6px 10px !important;
      min-width: 0 !important;
      max-width: 200px !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      line-height: 1.3 !important;
      -webkit-font-smoothing: antialiased;
    }
    #mobile-building-transactions .apexcharts-legend,
    #mobile-transaction-history .apexcharts-legend {
      padding-top: 8px !important;
    }
    #mobile-building-transactions .apexcharts-canvas,
    #mobile-transaction-history .apexcharts-canvas {
      touch-action: manipulation;
    }
    #mobile-transaction-history .tr-properties-carousel {
      height: auto !important;
      min-height: auto !important;
    }
    #mobile-transaction-history .tr-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    #mobile-transaction-history .tr-properties-slider {
      height: auto !important;
      gap: 12px !important;
    }
    #mobile-transaction-history .tr-property-card {
      min-width: 280px !important;
      margin-right: 12px !important;
      border-radius: 6px !important;
    }
    #mobile-transaction-history .tr-property-header {
      padding: 8px 10px !important;
    }
    #mobile-transaction-history .tr-property-address {
      font-size: 13px !important;
      font-weight: 700 !important;
    }
    #mobile-transaction-history .tr-property-count {
      font-size: 11px !important;
    }
    #mobile-transaction-history .tr-property-details {
      height: fit-content !important;
      padding: 8px 10px !important;
      gap: 6px !important;
    }
    #mobile-transaction-history .tr-growth-header {
      font-size: 12px !important;
      margin-bottom: 4px !important;
    }
    #mobile-transaction-history .tr-transaction-highlights {
      gap: 8px !important;
      margin-bottom: 8px !important;
    }
    #mobile-transaction-history .tr-highlight-section {
      padding: 6px 8px !important;
      border-radius: 4px !important;
    }
    #mobile-transaction-history .tr-highlight-label {
      font-size: 9px !important;
      margin-bottom: 2px !important;
    }
    #mobile-transaction-history .tr-highlight-value {
      font-size: 13px !important;
      margin-bottom: 2px !important;
    }
    #mobile-transaction-history .tr-highlight-date,
    #mobile-transaction-history .tr-highlight-unit {
      font-size: 10px !important;
    }
    #mobile-transaction-history .tr-transaction-period {
      padding-top: 6px !important;
      font-size: 10px !important;
    }
    #mobile-transaction-history .tr-distribution-label {
      font-size: 12px !important;
    }
    #mobile-transaction-history .tr-distribution-legend {
      font-size: 11px !important;
    }
    #mobile-transaction-history .transactions-note {
      font-size: 11px !important;
    }

    /* POI carousel – hide controls on mobile (scroll via touch) */
    #mobile-poi .poi-carousel-nav,
    .poi-wrapper .poi-carousel-nav {
      display: none !important;
    }

    /* Report upsell carousel – native touch scroll, same pattern as building-transactions */
    #mobile-report-in-progress-section .report-upsell-carousel,
    #report-in-progress-section .report-upsell-carousel {
      height: auto !important;
      min-height: auto !important;
    }
    #mobile-report-in-progress-section .report-upsell-carousel .tr-properties-wrapper,
    #report-in-progress-section .report-upsell-carousel .tr-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      touch-action: manipulation;
      scroll-snap-type: x mandatory;
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    #mobile-report-in-progress-section .report-upsell-carousel .tr-properties-wrapper::-webkit-scrollbar,
    #report-in-progress-section .report-upsell-carousel .tr-properties-wrapper::-webkit-scrollbar {
      display: none;
    }
    #mobile-report-in-progress-section .report-upsell-carousel .tr-properties-slider,
    #report-in-progress-section .report-upsell-carousel .tr-properties-slider {
      height: auto !important;
      gap: 12px !important;
    }
    #mobile-report-in-progress-section .report-upsell-carousel .tr-property-card.nearby-report-upsell-card,
    #report-in-progress-section .report-upsell-carousel .tr-property-card.nearby-report-upsell-card {
      min-width: 280px !important;
      width: 280px !important;
      max-width: 280px !important;
      margin-right: 12px !important;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    #mobile-report-in-progress-section .report-upsell-carousel-nav,
    #report-in-progress-section .report-upsell-carousel-nav {
      display: none !important;
    }

    /* #mobile-historical-roi: same height + same top alignment + content in same place */
    #mobile-historical-roi .roi-header {
      align-items: flex-start !important;
    }
    #mobile-historical-roi .roi-vs {
      display: none !important;
    }
    #mobile-historical-roi .roi-summary-card {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 0 !important;
      min-width: 0 !important;
      min-height: 160px !important;
      align-self: stretch !important;
    }
    #mobile-historical-roi .roi-summary-card h3 {
      min-height: 2.6em !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }
  }
  
  /* Extra small devices */
  @media (max-width: 480px) {
    .mobile-property-gallery .carousel-item img {
      height: 240px;
    }
    
    .mobile-metrics {
      grid-template-columns: 1fr;
    }
  }
@media (max-width: 768px) {
  .listings-main-container {
      margin-top: 70px !important;
  }
}

/* Dark theme overrides for mobile property details */
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-property-content,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-nav-sections {
  color: #e6e6e6;
}

html[data-theme="dark"] body.has-v2-header.listings-page .mobile-property-header,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-costs-card,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-description-section,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-features-section,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-broker-info,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-section-content,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-metric-card,
html[data-theme="dark"] body.has-v2-header.listings-page #mobile-rentability .roi-card {
  background: #0b0b0b !important;
  border: 1px solid #262626 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.has-v2-header.listings-page .mobile-feature-item,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-broker-avatar {
  background: #111111 !important;
  border-color: #262626 !important;
}

html[data-theme="dark"] body.has-v2-header.listings-page .mobile-property-price,
html[data-theme="dark"] body.has-v2-header.listings-page .address-text,
html[data-theme="dark"] body.has-v2-header.listings-page .highlight-value,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-costs-card h3,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-description-section h2,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-features-section h2,
html[data-theme="dark"] body.has-v2-header.listings-page .metric-value,
html[data-theme="dark"] body.has-v2-header.listings-page .price-text {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] body.has-v2-header.listings-page .city-text,
html[data-theme="dark"] body.has-v2-header.listings-page .highlight-label,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-cost-item span,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-cost-total span,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-description-text,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-feature-item span,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-broker-details p,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-nav-tab,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-range-labels,
html[data-theme="dark"] body.has-v2-header.listings-page .metric-title {
  color: #a3a3a3 !important;
}

html[data-theme="dark"] body.has-v2-header.listings-page .mobile-cost-total,
html[data-theme="dark"] body.has-v2-header.listings-page .mobile-property-summary-bar,
html[data-theme="dark"] body.has-v2-header.listings-page #mobile-rentability .roi-section {
  border-color: #262626 !important;
}

@media (max-width: 576px) {
  .listings-main-container {
      margin-top: 76px !important;
  }
}
@media (max-width: 768px) {
  /* Improved mobile listings header */
  .listings-header {
      padding: 0px 23px;
      margin-bottom: 10px;
  }
  
  .listings-count {
      font-size: 16px;
  }
  
  .listings-count .small {
      font-size: 11px;
  }
  
  .sort-btn {
      padding: 4px 10px;
      font-size: 12px;
  }
  
  .sort-btn i {
      font-size: 12px;
  }
  }

  @media (max-width: 480px) {
  /* Further optimization for very small screens */
  .listings-header {
      flex-wrap: wrap;
      gap: 5px;
  }
  
  .sort-container {
      margin-left: auto;
  }
  }
/* Add to your mobile-property-details.css file */
@media (max-width: 992px) {
    .mobile-property-content {
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    .property-details-view {
      padding: 0 !important;
      height: auto !important;
      max-height: calc(100vh - 140px) !important;
      padding-top: 0px !important;
    }
    
    
    .map-container {
        height: 100%;
        margin: 0 !important;
        min-height: 100%;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .map-column {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10 !important;
        display: none;
        transition: all 0.3s ease;
        height: 100vh !important;
    }
    .map-active .map-column {
        display: block;
        height: 100vh !important;
        max-height: none !important;
    }
    
    
  }
@media (max-width: 768px) {
    .map-nav {
        position: fixed !important;
        bottom: 38% !important;
        top: auto !important;
        left: auto !important;
        right: 8px !important;
        transform: translateY(50%) !important;
        z-index: 10 !important;
        background-color: rgba(255, 255, 255, 0.959) !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
}

@media (max-width: 992px) {
  .air-quality-card {
    padding: 0 !important;
  }

  .air-quality-container {
    padding: 0 !important;
  }

  .temperature-container {
    font-family: sans-serif !important;
    max-width: 100% !important;
    height: 81% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    background-color: #f8fafc !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    min-height: 237px !important;
}
.temp-value{
  font-size: 38px !important;
}
}
@media (max-width: 992px) {
  .roi-header {
    gap: 12px;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  .roi-summary-card {
      border-radius: 12px;
      padding: 20px;
      width: 206px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      text-align: center;
      position: relative;
      transition: transform 0.2s ease;
  }
  .roi-value{
    display: none;
  }
  .roi-date{
    display: none;
  }
  .roi-vs{
    display: none;
  }
  .roi-tab{
    font-size: 13px;
    padding: 10px 10px;
  }
  .roi-details{
    padding: 0 !important;
  }
  .roi-summary-card h3{
    font-size: 14px !important;
  }
  .roi-percentage{
    font-size: 20px !important;
  }

}
@media (max-width: 992px) {
  .selectors-container{
    flex-direction: column;
    margin-bottom: 0;
  }
  .rent-selector{
    width: 56%;
    flex-wrap: wrap;
  }
  .stats-grid{
    display: flex;
    gap: 10px; 
    margin-bottom: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .roi-overview {
      display: flex;
      gap: 0px 0px;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
  }
  .roi-card-value{
    font-size: 21px;
  }

}

@media screen and (max-width: 992px) {
  .tr-properties-carousel {
      height: 450px !important;
  }
  .tr-properties-wrapper {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
  }

  .tr-property-card {
      min-width: 280px !important;
      margin-right: 12px !important;
  }

  .tr-property-header {
      padding: 12px !important;
  }

  .tr-property-address {
      font-size: 16px !important;
  }

  .tr-property-details {
      padding: 12px !important;
      height: 250px !important;
  }

  .tr-distribution-section {
      margin-bottom: 12px !important;
  }

  .tr-distribution-label {
      font-size: 13px !important;
  }

  .tr-distribution-container {
      height: 10px !important;
  }

  .tr-transaction-highlights {
      gap: 12px !important;
      margin-bottom: 12px !important;
  }

  .tr-highlight-section {
      padding: 8px !important;
      height: 100px !important;
      min-height: 90px !important;
      justify-content: space-between !important;
  }

  .tr-highlight-label {
      font-size: 10px !important;
      margin-bottom: 4px !important;
  }

  .tr-highlight-value {
      font-size: 14px !important;
      margin-bottom: 4px !important;
  }

  .tr-highlight-date, 
  .tr-highlight-unit {
      font-size: 11px !important;
      margin-bottom: 2px !important;
  }

  .tr-properties-slider {
      height: 450px !important;
  }
  .tr-carousel-prev-btn, .tr-carousel-next-btn { display: none !important; }

  .ut-carousel-track{
    flex-wrap: nowrap !important;
  }


  .tr-growth-section {
      margin-bottom: 12px !important;
      padding: 8px !important;
  }

  .tr-growth-header {
      font-size: 13px !important;
  }

  .tr-growth-value {
      font-size: 13px !important;
  }
  .tr-no-data-note{
    font-size: 10px !important;
  }
}
@media (max-width: 992px) {
  .ut-carousel-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ut-carousel-track {
    flex-wrap: nowrap !important;
    gap: 12px !important; /* Reduced gap */
  }
  
  .ut-card {
    min-width: 240px !important; /* Slightly smaller width */
    width: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important; /* Reduced padding */
    height: 336px !important; /* Slightly reduced height */
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .ut-header {
    padding-bottom: 6px !important; /* Reduced padding */
    margin-bottom: 8px !important; /* Reduced margin */
    height: auto !important;

  }
  
  .ut-header h3 {
    font-size: 14px !important; /* Smaller font */
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    line-height: 1.2 !important;
  }
  
  .ut-transaction-count {
    padding: 2px 6px !important; /* Reduced padding */
    font-size: 10px !important; /* Smaller font */
    width: 136px !important;
  }
  
  .ut-transaction-list {
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    margin-bottom: 8px !important; /* Reduced margin */
    height: 113px !important; /* Allow shrinking */
  }
  
  .ut-transaction-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 3px !important; /* Reduced gap */
    padding: 8px 0 !important; /* Reduced padding */
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  .ut-transaction-item:last-child {
    border-bottom: none !important;
  }
  
  .ut-transaction-date {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: 11px !important; /* Smaller font */
    color: #666 !important;
  }
  
  .ut-transaction-values {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 3px 0 !important; /* Reduced margin */
  }
  
  .ut-transaction-flag {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 3px 0 0 0 !important; /* Reduced margin */
    text-align: left !important;
    font-size: 10px !important; /* Smaller font */
    width: fit-content !important;
  }
  
  .ut-value-row {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 2px !important; /* Reduced margin */
    width: 100% !important;
    overflow: hidden !important; /* Prevent overflow */
  }
  
  .ut-value {
    font-size: 10px !important; /* Smaller font */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 45% !important; /* Limit width */
  }
  
  .ut-value-label {
    font-size: 10px !important; /* Smaller font */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 50% !important; /* Limit width */
    color: #777 !important;
  }
  
  .ut-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Reduced gap */
    margin-top: auto !important; /* Push to bottom of card */
    padding-top: 8px !important; /* Reduced padding */
    border-top: 1px solid #e0e0e0 !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
    min-height: 80px !important; /* Ensure minimum height */
  }
  
  .ut-highlight-section {
    padding: 4px 0 !important; /* Reduced padding */
    width: 100% !important;
  }
  
  .ut-highlight-section:first-child {
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding-bottom: 6px !important; /* Reduced padding */
    margin-bottom: 4px !important;
  }
  
  .ut-highlight-section h4 {
    font-size: 11px !important; /* Smaller font */
    margin: 0 0 3px 0 !important; /* Reduced margin */
    font-weight: normal !important;
    color: #777 !important;
    line-height: 1.2 !important;
  }
  
  .ut-highlight-date {
    font-size: 10px !important; /* Smaller font */
    color: #999 !important;
    margin-bottom: 2px !important; /* Reduced margin */
  }
  
  .ut-highlight-value {
    font-size: 12px !important; /* Smaller font */
    font-weight: bold !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}




@media (max-width: 992px) {
  .full-height-section {
    height: 100% !important;
    overflow: visible !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
    min-height: 100% !important;
  }

  .listings-column, .map-column {
      height: auto !important;
      /*min-height: calc(100vh - 140px) !important;  FIXED: was 120vh */
      max-height: calc(100vh - 140px) !important;
  }
  .map-active .map-column {
      height: 100vh !important;
      max-height: none !important;
  }
    
  .listings-scroll-container {
      height: auto !important;
      min-height: calc(100vh - 200px) !important; /* FIXED: was 120vh */
      max-height: none !important;
      overflow-y: auto !important;
      padding-bottom: 120px !important; /* FIXED: was 400px */
  }

  .listings-main-container {
      height: auto !important;
      /* min-height: calc(100vh - 140px) !important;  FIXED: was 120vh */
      padding-bottom: 80px !important; /* FIXED: was 400px */
      margin-top: 0 !important; /* Ensure no conflicting margin */
  }



  .row[style*="height: calc(100vh - 180px)"] {
      height: auto !important;
  }
  .info-cards-grid {
      grid-template-columns: repeat(6, 1fr);
  }

  .info-card.large {
      grid-column: span 6;
  }

  .info-card.medium, 
  .info-card.small,
  .info-card.tall {
      grid-column: span 3;
  }
  .footer-social, .footer-apps {
      justify-content: flex-start;
      margin-top: 20px;
  }

  .footer-brand-container {
      margin-top: 20px;
  }
  .mobile-toggle-view {
      display: flex;
      align-items: center;
  }

  .col-lg-7.listings-column, 
  .col-lg-5.map-column {
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
  }

  

  .listings-column {
      padding: 0px !important;
      z-index: 5 !important;
  }

  .map-active .listings-column {
      display: none;
  }

  

  .search-section-container {
      z-index: 15 !important;
      position: relative;
      background-color: rgba(255, 255, 255, 0);
      border-bottom: none !important;
      box-shadow: none !important;
      padding: 0px 0 15px 0px !important; /* FIXED: was 0, now adds proper spacing */
  }

  .filter-scrollable {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      padding-right: 15px;
  }

  .search-container {
      padding-right: 15px;
  }

  .filter-nav-button {
      display: none;
  }
}


@media (max-width: 768px) {
  .filter-scrollable {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
      margin-bottom: -6px; /* Compensate for padding to avoid extra space */
      scrollbar-width: none; /* Hide scrollbar for Firefox */
      -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  }

  .filter-scrollable::-webkit-scrollbar {
      display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
  }

  .filter-button {
      font-size: 12px;
      padding: 6px 12px;
      margin-right: 8px;
      height: 34px;
  }

  .filter-button i {
      font-size: 12px;
  }

  .search-input {
      font-size: 12px;
      height: 36px;
  }

  .search-btn {
      height: 36px;
  }

  .property-info {
      flex-wrap: wrap;
      gap: 8px;
  }

  .property-info span {
      flex: 1 0 auto;
      min-width: 0;
  }


  /* Fix for property cards on small screens */
  .property-card {
      width: 100%;
      max-width: 100%;
  }

  /* Ensure property details don't overflow */
  .property-details {
      padding: 12px;
  }
  .info-cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
  }

  .info-card.large,
  .info-card.medium,
  .info-card.wide {
      grid-column: span 2;
      grid-row: span 1;
  }

  .info-card.small,
  .info-card.tall {
      grid-column: span 1;
      grid-row: span 1;
  }
  .site-footer {
      padding: 40px 0 20px;
  }

  .footer-heading {
      margin-top: 20px;
  }


  .features-grid,
  .additional-info-content {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .calculator-section {
    flex-direction: column;
    gap: 15px;
  }
  
  .calculator-field {
    width: 100%;
  }
  
  .term-buttons {
    flex-wrap: wrap;
  }
  
  .term-button {
    min-width: 45%;
  }

  /* =============================
     Mobile Financing (new styles)
     ============================= */
  #mobile-financing .mobile-financing-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 20px;
  }

  #mobile-financing .mobile-financing-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  #mobile-financing .mobile-financing-header .section-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    width: 100%;
    order: 3;
  }

  #mobile-financing .mobile-financing-powered {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
  }

  #mobile-financing .mobile-financing-powered a {
    display: flex;
    align-items: center;
  }

  #mobile-financing .mobile-financing-powered img {
    height: 18px;
    margin-left: 6px;
  }

  #mobile-financing .mobile-financing-calculator {
    background: transparent;
  }

  #mobile-financing .calculator-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  #mobile-financing .mobile-financing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  #mobile-financing .mobile-financing-card {
    padding: 1rem 1rem;
    margin-bottom: 0;
  }

  #mobile-financing .financing-input-wrapper,
  #mobile-financing .financing-term-input-wrapper {
    min-height: 44px;
  }

  #mobile-financing .financing-input {
    font-size: 16px;
    min-height: 44px;
  }

  #mobile-financing .financing-term-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  #mobile-financing .financing-preset-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    padding: 0.5rem 0.625rem;
    font-size: 0.7rem;
  }

  #mobile-financing .financing-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #mobile-financing .financing-toggle-option {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  #mobile-financing .financing-submit-wrapper {
    margin-top: 8px;
    padding: 0;
  }

  #mobile-financing .financing-submit-btn {
    width: 100%;
    max-width: none;
    padding: 0.875rem 1.25rem;
  }

  #mobile-financing .financing-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
  }

  #mobile-financing .mobile-financing-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }

  #mobile-financing .mobile-financing-results-header h5 {
    font-size: 1rem;
  }

  #mobile-financing .mobile-financing-result-card {
    padding: 1rem 1rem;
  }

  #mobile-financing .financing-result-value-large {
    font-size: 1.5rem;
  }

  #mobile-financing .mobile-financing-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
  }

  #mobile-financing .mobile-financing-summary-grid h5 {
    font-size: 0.9375rem;
  }

  #mobile-financing .mobile-financing-cta {
    margin-top: 8px;
  }

  #mobile-financing .mobile-financing-cta .contact-bank-btn {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
  }
  .price-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .table-header, .table-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .table-header .table-cell:nth-child(4),
  .table-header .table-cell:nth-child(5),
  .table-row .table-cell:nth-child(4),
  .table-row .table-cell:nth-child(5) {
    display: none;
  }
  /* =============================
     safety-summary card compact (Location, Green Score, Walkability/POI)
     ============================= */
  .safety-summary,
  .neighborhood-safety {
    margin-bottom: 16px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .safety-score-card {
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .safety-score-card.overall {
    margin-bottom: 12px !important;
    padding: 10px 12px !important;
  }

  .safety-label {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .safety-score-bubble {
    width: 44px !important;
    height: 44px !important;
    margin-right: 10px !important;
  }

  .safety-score-bubble .score {
    font-size: 1rem !important;
  }

  .safety-score-bubble .max {
    font-size: 0.65rem !important;
  }

  .safety-label h3 {
    font-size: 1rem !important;
    margin: 0 0 2px 0 !important;
  }

  .safety-label h4 {
    font-size: 0.9rem !important;
    margin: 0 0 2px 0 !important;
  }

  .safety-label p {
    font-size: 0.8rem !important;
    color: #666 !important;
  }

  .rank-label {
    font-size: 0.8rem !important;
  }

  .safety-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  .safety-details .safety-score-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
  }

  /* Safety comparison bar chart - compact for mobile */
  .safety-comparison,
  .safety-insights {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .safety-comparison {
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 10px;
  }

  .neighborhood-bar {
    margin-bottom: 8px;
    min-width: 0 !important;
  }

  .bar-container {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .safety-comparison h3 {
    margin-bottom: 12px;
    font-size: 1rem;
  }

  .comparison-chart {
    margin-top: 10px;
    max-width: 100% !important;
  }

  .bar-label {
    width: 90px;
    min-width: 90px;
    font-size: 0.75rem;
    padding-right: 8px;
  }

  .bar-container {
    height: 18px;
    border-radius: 9px;
  }

  .bar {
    border-radius: 9px;
  }

  .bar-score {
    width: 32px;
    min-width: 32px;
    padding-left: 8px;
    font-size: 0.8rem;
  }

  .comparable-property-card {
      min-width: 240px;
      max-width: 240px;
  }

  

  
  .chart-container {
    height: 300px;
  }

  
  .occupancy-selector {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .selector-label {
    margin-bottom: 10px;
  }
  
  .button-group {
    width: 100%;
    justify-content: space-between;
  }
  /* Life controls – mobile: search + transport in one row, traffic below when needed */
  .life-controls-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 10px;
      padding: 0;
      margin-bottom: 20px;
  }

  /* Mapbox geocoder: force smaller width on mobile so transport fits */
  #mobile-life .search-wrapper .mapboxgl-ctrl,
  #mobile-life .search-wrapper .mapboxgl-ctrl-geocoder {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
  }

  /* 1. Search – fixed smaller width so transport has room */
  #mobile-life .life-controls-row .search-wrapper {
      flex: 0 1 auto;
      min-width: 0;
      width: 50%;
      max-width: 55%;
      border: none;
      border-radius: 10px;
      height: 50px;
  }

  #mobile-life .life-controls-row .life-search-input {
      width: 100%;
      min-width: 0;
      flex: 1;
      font-size: 16px;
      padding: 0 10px;
      height: 48px;
  }

  #mobile-life .life-controls-row .search-action-btn {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
  }

  /* 2. Transport – compact, to the right of search */
  #mobile-life .life-controls-row .transport-selector {
      display: flex;
      gap: 4px;
      background: #f5f5f7;
      border-radius: 10px;
      padding: 4px;
      flex-shrink: 0;
  }

  #mobile-life .life-controls-row .transport-option {
      width: 44px;
      height: 42px;
      min-width: 44px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: #6e6e73;
      box-shadow: none;
      transition: background 0.2s, color 0.2s;
  }

  #mobile-life .life-controls-row .transport-option.selected {
      background: #fff;
      color: #007aff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  #mobile-life .life-controls-row .transport-option ion-icon {
      font-size: 20px;
  }

  /* 3. Traffic – full width below, only when car selected */
  #mobile-life .life-controls-row .life-traffic-toggle {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: #f5f5f7;
      border-radius: 10px;
  }

  #mobile-life .life-controls-row .life-traffic-label {
      font-size: 15px;
      color: #1d1d1f;
  }

  #mobile-life .section-subtitle {
      font-size: 14px;
      color: #6e6e73;
      margin: 2px 0 16px 0;
  }

  .location-cards {
      grid-template-columns: 1fr;
  }

  .summary-stats {
      flex-direction: column;
      gap: 20px;
  }
  .search-container .row {
      flex-direction: column;
  }

  .col-lg-3.col-md-4,
  .col-lg-9.col-md-8 {
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
  }

  .filter-button {
      flex: 0 0 auto;
      font-size: 12px;
      padding: 6px 12px;
  }

  .map-nav {
      bottom: 272px !important;
  }

  .map-nav-btn span {
      display: none;
  }

  .map-nav-btn {
      padding: 8px;
      min-width: auto;
  }
  .traffic-container {
      grid-template-columns: repeat(1, 1fr);
  }

  .traffic-quality, .time-distribution, .top-streets, .time-analysis, .full-width {
      grid-column: span 1;
  }

  .time-chart {
      height: 150px;
  }

  .time-bar {
      width: 60px;
  }

  .traffic-summary-metrics {
      flex-direction: column;
  }

  .summary-traffic-metric {
      margin: 0.5rem 0;
  }
}

@media (max-width: 480px) {
  .price-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .table-header, .table-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .table-header .table-cell:nth-child(3),
  .table-row .table-cell:nth-child(3) {
    display: none;
  }

  /* Life controls – compact on small phones */
  #mobile-life .life-controls-row {
    gap: 16px;
  }

  #mobile-life .life-controls-row .transport-option ion-icon {
    font-size: 20px;
  }

  /* safety-summary cards – extra compact on very small screens */
  .safety-score-card {
    padding: 8px 10px !important;
  }

  .safety-score-card.overall {
    padding: 8px 10px !important;
  }

  .safety-score-bubble {
    width: 38px !important;
    height: 38px !important;
    margin-right: 8px !important;
  }

  .safety-score-bubble .score {
    font-size: 0.9rem !important;
  }

  .safety-label h3 {
    font-size: 0.95rem !important;
  }

  .safety-label h4 {
    font-size: 0.85rem !important;
  }

  .safety-label p {
    font-size: 0.75rem !important;
  }

  .safety-details {
    gap: 6px !important;
  }

  .safety-comparison,
  .safety-insights {
    padding: 10px 12px !important;
  }

  .safety-comparison h3,
  .safety-insights h3 {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
  }
}


/* Hide desktop load more button on mobile */
@media (max-width: 992px) {
  .load-more-btn {
    display: none !important;
  }
}
/* Inline infinite scroll loading indicator */
.infinite-scroll-loading {
  padding: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 20px 0;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.infinite-scroll-loading .spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Show only on mobile */
@media (max-width: 992px) {
  .infinite-scroll-loading {
      display: block !important;
  }
}

/* Hide on desktop */
@media (min-width: 993px) {
  .infinite-scroll-loading {
      display: none !important;
  }
}

/* Mobile/Tablet Map Legend Modal - Max Width 992px */
@media (max-width: 992px) {
  .map-legend-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .map-legend-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Modal Content Container */
  .map-legend-panel .map-legend-header,
  .map-legend-panel .map-legend-content {
    background: rgba(45, 55, 72, 0.95) !important;
  }

  .map-legend-panel > div {
    width: 100% !important;
    max-width: 400px !important;
    max-height: 80vh !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  }

  .map-legend-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .map-legend-header h6 {
    font-size: 18px !important;
    margin: 0 !important;
  }

  .map-legend-content {
    padding: 20px !important;
    max-height: calc(80vh - 70px) !important;
    overflow-y: auto !important;
  }

  .legend-title {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .legend-description {
    margin-top: 10px !important;
  }

  .full-desc {
    font-size: 14px !important;
    padding: 12px !important;
    margin: 8px 0 0 0 !important;
  }

  .expand-btn {
    font-size: 13px !important;
  }

  .scale-labels {
    font-size: 12px !important;
  }

  .scale-bar {
    height: 8px !important;
    margin-bottom: 8px !important;
  }

  .value-scale {
    margin: 10px 0 !important;
  }

  .legend-info {
    margin-bottom: 20px !important;
  }

  .legend-info:last-child {
    margin-bottom: 0 !important;
  }
}

/* For smaller mobile screens */
@media (max-width: 768px) {
  .map-legend-panel {
    padding: 15px !important;
  }

  .map-legend-panel > div {
    max-height: 85vh !important;
  }

  .map-legend-content {
    max-height: calc(85vh - 70px) !important;
    padding: 16px !important;
  }

  .legend-title {
    font-size: 15px !important;
  }

  .full-desc {
    font-size: 13px !important;
  }

  /* Street View - reduced height on mobile */
  #mobile-street-view #street-view-container {
    height: 280px !important;
  }
}

/*==========================================================================
 Mobile Filter Offcanvas (lp_listings, listing-manager)
 - Compact, minimalistic layout for many filter values
 - Touch-friendly, readable, no excess whitespace
==========================================================================*/
@media (max-width: 768px) {
  /* Offcanvas container max-width: 340px;*/
  .mobile-filter-offcanvas.offcanvas {
    width: 100%;
    top: 60px !important;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    border-radius: 0;
    border-left: 1px solid #e6e6e6;
  }

  .mobile-filter-offcanvas .offcanvas-header {
    flex-shrink: 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #c7c7c7;
  }

  .mobile-filter-offcanvas .filter-offcanvas-title {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
  }

  .mobile-filter-offcanvas .filter-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-filter-offcanvas .filter-header-actions .reset-filters-mobile-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mobile-filter-offcanvas .filter-header-actions .reset-filters-mobile-btn:hover {
    background: #f8f9fa;
    color: #333;
    border-color: #ccc;
  }

  .mobile-filter-offcanvas .filter-header-actions .reset-filters-mobile-btn i {
    font-size: 14px;
  }

  .mobile-filter-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 16px;
  }

  /* Filter section: compact, minimal separator */
  .mobile-filter-offcanvas .filter-section {
    padding: 18px 0;
  }

  .mobile-filter-offcanvas .filter-section:last-of-type {
    border-bottom: none;
  }

  .mobile-filter-offcanvas .filter-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-filter-offcanvas .filter-section-title i {
    font-size: 18px;
    color: #64748B;
    flex-shrink: 0;
  }

  .mobile-filter-offcanvas .filter-options {
    margin: 0;
  }

  /* Radio/checkbox rows: compact, touch-friendly (min 44px tap) */
  .mobile-filter-offcanvas .filter-options .form-check {
    min-height: 44px;
    padding: 8px 0;
    margin: 0;
    display: flex;
    align-items: center;
  }

  .mobile-filter-offcanvas .filter-options .form-check-input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 10px;
  }

  .mobile-filter-offcanvas .filter-options .form-check-label {
    font-size: 14px;
    color: #333;
    flex: 1;
    cursor: pointer;
  }

  /* Range sliders: compact labels */
  .mobile-filter-offcanvas .filter-options .form-label {
    font-size: 12px;
    color: #666;
    margin: 0 0 4px;
  }

  .mobile-filter-offcanvas .filter-options .form-range {
    margin: 4px 0 4px;
    padding: 0;
  }

  .mobile-filter-offcanvas .filter-options .d-flex.justify-content-between {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
  }

  .mobile-filter-offcanvas .filter-options .mt-3 {
    margin-top: 10px !important;
  }

  /* Tipo de Listagem - pill toggle (blue-toggle design, black selected) */
  .mobile-filter-offcanvas .mobile-listing-type-toggle {
    width: 100%;
  }

  .mobile-filter-offcanvas .mobile-listing-type-track {
    display: flex;
    position: relative;
    min-height: 51px;
  }

  .mobile-filter-offcanvas .mobile-listing-type-slider {
    position: absolute;
    top: 0px;
    left: 0px;
    height: calc(100% - 0px);
    background: #000000;
    border-radius: 999px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
  }

  .mobile-filter-offcanvas .mobile-listing-type-segment {
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 10px 14px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    color: #1a1a1a;
    transition: color 0.25s ease;
    margin-bottom: 0px !important;
  }

  .mobile-filter-offcanvas .mobile-listing-type-segment:hover {
    color: #333;
  }

  /* Selected segment: white text on black slider */
  .mobile-filter-offcanvas #buyOptionMobile:checked ~ .mobile-listing-type-track .mobile-listing-type-segment:nth-child(2),
  .mobile-filter-offcanvas #rentOptionMobile:checked ~ .mobile-listing-type-track .mobile-listing-type-segment:nth-child(3),
  .mobile-filter-offcanvas #bothOptionMobile:checked ~ .mobile-listing-type-track .mobile-listing-type-segment:nth-child(4) {
    color: #ffffff;
  }

  /* Range sliders: inputs side by side + one dual-thumb slider */
  .mobile-filter-offcanvas .mobile-range-slider-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mobile-filter-offcanvas .mobile-range-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .mobile-filter-offcanvas .mobile-range-inputs-single {
    grid-template-columns: 1fr;
  }

  .mobile-filter-offcanvas .mobile-range-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-filter-offcanvas .mobile-range-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .mobile-filter-offcanvas .mobile-range-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #f8f9fa;
    color: #333;
  }

  .mobile-filter-offcanvas .mobile-range-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap {
    position: relative;
    padding: 12px 0;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap.mobile-range-dual {
    padding: 16px 0;
  }

  .mobile-filter-offcanvas .mobile-range-track-fill {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: #e0e0e0;
    border-radius: 3px;
    pointer-events: none;
  }

  .mobile-filter-offcanvas .mobile-range-track-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--fill-left, 0%);
    width: var(--fill-width, 0%);
    height: 100%;
    background: #000000;
    border-radius: 3px;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap .mobile-range-slider {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: 6px;
    margin: 0;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap .mobile-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap .mobile-range-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: 6px;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap.mobile-range-dual .mobile-range-slider {
    pointer-events: auto;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap .mobile-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap .mobile-range-slider::-moz-range-track {
    background: transparent;
  }

  /* Single-thumb slider (fees) */
  .mobile-filter-offcanvas .mobile-range-slider-wrap:not(.mobile-range-dual) .mobile-range-track-fill {
    display: none;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap:not(.mobile-range-dual) .mobile-range-slider {
    position: relative;
    background: #e0e0e0;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap:not(.mobile-range-dual) .mobile-range-slider::-webkit-slider-runnable-track {
    background: #e0e0e0;
  }

  .mobile-filter-offcanvas .mobile-range-slider-wrap:not(.mobile-range-dual) .mobile-range-slider::-moz-range-track {
    background: #e0e0e0;
  }

  .mobile-filter-offcanvas .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }

  /* Horizontal scroll carousels for lists */
  .mobile-filter-offcanvas .filter-carousel-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -4px;
  }

  .mobile-filter-offcanvas .filter-carousel-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Chip carousels (tipos, cidades, bairros): multi-row, side-by-side, horizontal scroll - same as Comodidades */
  .mobile-filter-offcanvas .property-types-list-mobile.filter-carousel-inner,
  .mobile-filter-offcanvas .cities-list-mobile.filter-carousel-inner,
  .mobile-filter-offcanvas .neighborhoods-list-mobile.filter-carousel-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    padding: 4px 0;
  }

  .mobile-filter-offcanvas .filter-carousel-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    min-width: 100%;
  }

  .mobile-filter-offcanvas .filter-carousel-inner {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    flex-wrap: nowrap;
    min-width: min-content;
  }

  /* ============================================================
     VU CAROUSEL/CHIP COLOR PALETTE (use for all filter carousel items)
     - Unselected: VU-outline style = 1px solid #000, bg transparent, color #000
     - Selected: black fill = bg #000, border #000, color #fff
     - Hover: subtle bg rgba(0,0,0,0.06)
     ============================================================ */

  /* Comodidades - horizontal carousel, 3 rows of topic tags (Twitter-style) */
  .mobile-filter-offcanvas .amenities-carousel-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -4px;
  }

  .mobile-filter-offcanvas .amenities-carousel-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Inner: 3 horizontal rows, each row = tags side by side */
  .mobile-filter-offcanvas .amenities-list-mobile.amenities-carousel-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    padding: 4px 0;
  }

  .mobile-filter-offcanvas .amenities-carousel-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    min-width: 100%;
  }

  .mobile-filter-offcanvas .amenity-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid #000000;
    background: transparent;
    color: #000000;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    width: max-content;
  }

  .mobile-filter-offcanvas .amenity-tag:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .mobile-filter-offcanvas .amenity-tag .amenity-tag-text {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .mobile-filter-offcanvas .amenity-tag .amenity-tag-icon {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .mobile-filter-offcanvas .amenity-tag .amenity-tag-icon i,
  .mobile-filter-offcanvas .amenity-tag .amenity-tag-icon svg {
    width: 14px;
    height: 14px;
  }

  .mobile-filter-offcanvas .amenity-tag .amenity-tag-icon {
    color: #000000;
  }

  .mobile-filter-offcanvas .amenity-tag.selected {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
  }

  .mobile-filter-offcanvas .amenity-tag.selected .amenity-tag-icon {
    color: #ffffff;
  }

  /* Chips for property types, cities, neighborhoods - VU outline, selected = black */
  .mobile-filter-offcanvas .filter-chip {
    flex-shrink: 0;
    width: max-content;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 16px;
    border: 1px solid #000000;
    background: transparent;
    color: #000000;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-filter-offcanvas .filter-chip:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .mobile-filter-offcanvas .filter-chip.selected {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
  }

  /* Source cards - carousel with logos: uniform layout, 2/3 logo 1/3 title, light gray outline, no count on mobile */
  .mobile-filter-offcanvas .sources-carousel-mobile .filter-carousel-inner {
    padding-bottom: 8px;
  }

  .mobile-filter-offcanvas .filter-source-card {
    flex-shrink: 0;
    width: 88px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--line, #e6e6e6);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-filter-offcanvas .filter-source-card:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .mobile-filter-offcanvas .filter-source-card.selected {
    border-color: #000000;
    background: #000000;
    box-shadow: none;
  }

  .mobile-filter-offcanvas .filter-source-card.selected .filter-source-card-name {
    color: #ffffff;
  }

  /* Logo area: 2/3 of card */
  .mobile-filter-offcanvas .filter-source-card-logo {
    flex: 2;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px 6px;
    overflow: hidden;
    border-radius: 11px 11px 0 0;
  }

  .mobile-filter-offcanvas .filter-source-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 48px;
  }

  /* Todas card: icon instead of image, same 2/3 area */
  .mobile-filter-offcanvas .filter-source-card-logo-icon {
    color: #333;
  }

  .mobile-filter-offcanvas .filter-source-card-logo-icon .feather,
  .mobile-filter-offcanvas .filter-source-card-logo-icon svg {
    width: 32px;
    height: 32px;
  }

  .mobile-filter-offcanvas .filter-source-card.selected .filter-source-card-logo-icon {
    color: #ffffff;
  }

  /* Title: 1/3 at bottom, larger and readable */
  .mobile-filter-offcanvas .filter-source-card-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.2;
    padding: 6px 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
  }

  .mobile-filter-offcanvas .filter-source-card-count {
    display: none;
  }

  /* Bedroom / Parking: value-only - VU outline, selected = black */
  .mobile-filter-offcanvas .bedroom-btn-mobile,
  .mobile-filter-offcanvas .parking-btn-mobile {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 16px;
    min-width: 44px;
    border: 1px solid #000000 !important;
    background: transparent !important;
    color: #000000 !important;
  }

  .mobile-filter-offcanvas .bedroom-btn-mobile:hover,
  .mobile-filter-offcanvas .parking-btn-mobile:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: #000000 !important;
    color: #000000 !important;
  }

  .mobile-filter-offcanvas .bedroom-btn-mobile.btn-primary,
  .mobile-filter-offcanvas .parking-btn-mobile.btn-primary {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
  }

  .mobile-filter-offcanvas .filter-options.d-flex.flex-wrap.gap-2 {
    gap: 8px !important;
  }

}