/* --- Custom Base Styles - Luxury Gold Theme --- */
        :root {
            --color-primary: #b19b6b;
            --color-primary-dark: #8a7654;
            --color-primary-light: #d4c49a;
            --color-secondary: #c9ad7a;
            --color-accent: #d4af37;
            --color-dark: #0f172a;
            --color-light: #1e293b;
            --color-surface: #1e293b;
            --color-surface-light: #334155;
            --color-text-primary: #f1f5f9;
            --color-text-secondary: #cbd5e0;
            --color-text-muted: #94a3b8;
            --color-border: #334155;
            --color-border-light: #475569;
            --color-gold-shine: #f4e4bc;
            --color-bronze: #8b7355;
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
            --shadow-gold: 0 4px 20px rgba(177, 155, 107, 0.3);
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --transition-slow: 0.5s ease;
        }
        
        body {
            font-family: 'Poppins', sans-serif !important;
            background-color: var(--color-dark) !important;
            color: var(--color-text-primary) !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background-color var(--transition-normal);
            overflow-x: hidden;
            padding-top: env(safe-area-inset-top, 0);
            padding-bottom: env(safe-area-inset-bottom, 0);
            background-image: radial-gradient(circle at 50% 50%, rgba(177, 155, 107, 0.08) 0%, transparent 60%) !important;
        }
        
        /* Forçar tema dark sobrescrevendo Tailwind */
        body.dark-theme,
        .dark-theme {
            background-color: #0f172a !important;
            color: #f1f5f9 !important;
        }
        
        /* Forçar containers principais para tema dark */
        .container {
            background-color: transparent !important;
        }
        
        /* Sobrescrever classes comuns do Tailwind para tema dark */
        .bg-gray-50,
        .bg-white {
            background-color: var(--color-surface) !important;
            color: var(--color-text-primary) !important;
        }
        
        .text-gray-800,
        .text-gray-600,
        .text-gray-500,
        .text-gray-400 {
            color: var(--color-text-secondary) !important;
        }
        
        .border-gray-200,
        .border-gray-300 {
            border-color: var(--color-border) !important;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
        }

        /* --- Layout --- */
        .main-content {
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 90px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .left-column {
            width: 100%;
            transition: all var(--transition-normal);
        }
        .right-column {
            width: 100%;
            height: 450px;
            margin-top: 1.5rem;
            transition: all var(--transition-normal);
            position: relative;
        }

        /* Desktop Layout (lg breakpoint) */
        @media (min-width: 1024px) {
            .main-content {
                padding-bottom: 0;
            }
            .left-column {
                width: 60%;
                padding-right: 1.5rem;
            }
            .right-column {
                width: 40%;
                height: calc(100vh - 180px);
                position: sticky;
                top: 5.5rem; /* Ajustado para considerar a barra de menu */
                margin-top: 0;
            }
        }

        /* Melhorias de responsividade */
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            .card-details {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .card-details span {
                margin-right: 0.5rem;
            }
        }

        @media (max-width: 640px) {
            .listing-image-wrapper {
                height: 200px;
            }
        }

        /* --- Map View Active State (Mobile) --- */
        @media (max-width: 1023px) {
            body.map-view-active .listings-column {
                display: none !important;
            }
            
            body.map-view-active .map-column {
                display: block !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                margin: 0 !important;
                padding: 0 !important;
                z-index: 1000 !important;
                background: #fff !important;
            }
            
            body.map-view-active .map-column .sticky {
                position: static !important;
                height: 100vh !important;
                width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                top: 0 !important;
            }
            
            body.map-view-active .map-column #map {
                height: 100vh !important;
                width: 100vw !important;
                border-radius: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
            }
            
            /* Ocultar elementos desnecessários no modo mapa */
            body.map-view-active .map-column .flex.justify-end,
            body.map-view-active .map-column .relative.rounded-lg {
                display: contents !important;
            }
            
            body.map-view-active .map-column .flex.justify-end {
                position: absolute !important;
                top: 20px !important;
                right: 20px !important;
                z-index: 1001 !important;
            }
        }
        
        @media (max-width: 1023px) {
            body.map-view-active #mobile-action-buttons {
                z-index: 1001 !important;
                position: fixed !important;
                bottom: 20px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                gap: 20px !important;
                width: calc(100% - 40px) !important;
                max-width: 500px !important;
                padding: 12px 20px !important;
                border-radius: 25px !important;
                background: rgba(30, 41, 59, 0.95) !important;
                backdrop-filter: blur(15px) !important;
                border: 1px solid rgba(255, 215, 0, 0.3) !important;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button {
                /* Manter design elegante - usar variáveis CSS ao invés de cores hardcoded */
                background-color: var(--color-surface) !important;
                color: var(--color-text-secondary) !important;
                border: 1px solid var(--color-border) !important;
                
                /* Fazer botões expandirem para ocupar largura total */
                flex: 1 !important;
                white-space: nowrap !important;
                min-width: 0 !important;
                padding: 12px 16px !important;
                border-radius: 20px !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                text-align: center !important;
                
                /* Transições suaves */
                transition: all 0.3s ease !important;
                
                /* Manter sombra elegante */
                box-shadow: var(--shadow-sm) !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button:hover,
            body.map-view-active #mobile-action-buttons .action-button:active {
                /* Hover elegante com tema dourado */
                background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
                color: white !important;
                transform: translateY(-2px) !important;
                box-shadow: var(--shadow-md), var(--shadow-gold) !important;
                border-color: var(--color-primary) !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button i {
                color: var(--color-primary) !important;
                margin-right: 6px !important;
                font-size: 14px !important;
                transition: color 0.3s ease !important;
            }
            
            /* Ícone no hover */
            body.map-view-active #mobile-action-buttons .action-button:hover i,
            body.map-view-active #mobile-action-buttons .action-button:active i {
                color: white !important;
            }
        }
        
        /* Ocultar contador do mapa quando não estiver em modo mapa ativo */
        body:not(.map-view-active) .map-column #map-count {
            display: none;
        }
        
        /* Mostrar contador do mapa quando estiver em modo mapa ativo no mobile */
        @media (max-width: 1023px) {
            body.map-view-active #map-count {
                display: flex !important;
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 1001;
                background: rgba(30, 41, 59, 0.95) !important;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 215, 0, 0.3);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                border-radius: 8px;
                padding: 8px 12px;
                font-size: 14px;
                font-weight: 600;
                color: #ffd700;
            }
        }
        
        /* Ocultar container de Stories quando o mapa estiver ativo em dispositivos móveis */
        body.map-view-active #imobz-stories-container {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            z-index: 1;
            pointer-events: none;
        }
        
        /* Transição suave para o mapa */
        body.map-transition .listings-column,
        body.map-transition .map-column {
            transition: all 0.3s ease-in-out;
        }
        
        body.map-transition #map {
            transition: border-radius 0.3s ease-in-out;
        }

        /* --- Map Styling --- */
        #map {
            height: 100%;
            width: 100%;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            z-index: 10;
            background-color: var(--color-surface);
            overflow: hidden;
            transition: border-radius var(--transition-normal), box-shadow var(--transition-normal);
        }

        /* Estilos para os marcadores personalizados */
        .custom-map-marker {
            background: transparent;
            border: none;
        }

        .marker-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 42px;
            transition: all 0.3s ease;
        }

        .marker-icon i {
            color: var(--color-primary);
            font-size: 30px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
            transition: all 0.3s ease;
        }

        /* Marcadores prioritários */
        .custom-map-marker.high-priority .marker-icon {
            position: relative;
        }

        .custom-map-marker.high-priority .marker-icon i {
            color: #FFD700; /* Dourado para marcadores prioritários */
            font-size: 32px;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
        }

        .priority-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #000;
            font-size: 12px;
            font-weight: bold;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            animation: priority-pulse 2s infinite;
        }

        @keyframes priority-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* Hover effect para marcadores prioritários */
        .custom-map-marker.high-priority .marker-icon:hover i {
            color: #FFA500;
            transform: scale(1.1);
        }

        .marker-hover i {
            color: var(--color-accent);
            transform: scale(1.2) translateY(-4px);
            filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.5));
        }
        
        /* Marcador temporário com destaque especial */
        .temp-marker .marker-icon i {
            color: var(--color-accent) !important;
            animation: pulse-marker 2s ease-in-out infinite;
            filter: drop-shadow(0 3px 10px rgba(212, 175, 55, 0.6));
        }
        
        @keyframes pulse-marker {
            0%, 100% { 
                transform: scale(1);
                opacity: 1;
            }
            50% { 
                transform: scale(1.1);
                opacity: 0.8;
            }
        }

        /* Leaflet Popup Customization */
        .leaflet-popup-content-wrapper {
            border-radius: var(--radius-md) !important;
            box-shadow: var(--shadow-md);
            border: none;
            overflow: hidden;
            padding: 0 !important;
        }
        
        /* Garantir que o popup seja estável em mobile */
        @media (max-width: 768px) {
            .leaflet-popup {
                z-index: 1000 !important;
            }
            
            .leaflet-popup-content-wrapper {
                border-radius: 8px !important;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
                border: 1px solid rgba(177, 155, 107, 0.2) !important;
            }
            
            .leaflet-popup-tip-container {
                display: block !important;
            }
        }

        .custom-popup .leaflet-popup-content-wrapper {
            padding: 0;
            overflow: hidden;
            border-radius: 12px !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .custom-popup .leaflet-popup-content {
            margin: 0 !important;
            width: 100% !important;
            min-width: 280px;
            max-width: 320px;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }
        
        /* Responsividade para popups em dispositivos móveis */
        @media (max-width: 480px) {
            .custom-popup .leaflet-popup-content {
                min-width: 240px !important;
                max-width: 280px !important;
            }
            
            .popup-image-container {
                height: 140px !important;
            }
            
            .popup-title {
                font-size: 1rem !important;
                line-height: 1.2 !important;
            }
            
            .popup-price {
                font-size: 1.1rem !important;
            }
            
            .popup-details {
                gap: 0.5rem !important;
                margin-bottom: 1rem !important;
            }
            
            .popup-details span {
                font-size: 0.75rem !important;
                padding: 0.25rem 0.5rem !important;
            }
        }
        
        @media (max-width: 360px) {
            .custom-popup .leaflet-popup-content {
                min-width: 200px !important;
                max-width: 240px !important;
            }
            
            .popup-image-container {
                height: 120px !important;
            }
            
            .popup-title {
                font-size: 0.9rem !important;
            }
            
            .popup-price {
                font-size: 1rem !important;
            }
            
            .popup-address {
                font-size: 0.8rem !important;
            }
        }

        .custom-popup .leaflet-popup-tip {
            background: white;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        .leaflet-popup-content {
            margin: 0 !important;
            width: auto !important;
            min-width: 280px;
            font-size: 14px;
            font-family: 'Poppins', sans-serif;
        }
        
        /* Estilos adicionais para mobile */
        @media (max-width: 480px) {
            .leaflet-popup-content {
                min-width: 240px !important;
                font-size: 13px !important;
            }
        }
        
        @media (max-width: 360px) {
            .leaflet-popup-content {
                min-width: 200px !important;
                font-size: 12px !important;
            }
        }
        
        .leaflet-popup-close-button {
            padding: 8px 10px 0 0 !important;
            color: #ffffff !important;
            z-index: 10;
            font-size: 20px !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            opacity: 0.9;
            right: 5px !important;
            top: 5px !important;
        }
        .leaflet-popup-close-button:hover {
            color: #ffffff !important;
            opacity: 1;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
        }
        
        /* Melhorar botão de fechar em mobile */
        @media (max-width: 768px) {
            .leaflet-popup-close-button {
                padding: 10px 12px 8px 8px !important;
                font-size: 22px !important;
                right: 3px !important;
                top: 3px !important;
                background: rgba(0, 0, 0, 0.3) !important;
                border-radius: 50% !important;
                width: 32px !important;
                height: 32px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                color: #ffffff !important;
                opacity: 0.9 !important;
                text-decoration: none !important;
                transition: all 0.3s ease !important;
            }
            
            .leaflet-popup-close-button:hover,
            .leaflet-popup-close-button:active {
                background: rgba(0, 0, 0, 0.5) !important;
                opacity: 1 !important;
                transform: scale(1.1) !important;
            }
        }

        /* Conteúdo melhorado do popup */
        .popup-content {
            border-radius: var(--radius-md);
            overflow: hidden;
            background-color: var(--color-surface);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }
        
        /* Padding interno responsivo para mobile */
        @media (max-width: 480px) {
            .popup-content .p-3 {
                padding: 0.75rem !important;
            }
        }
        
        @media (max-width: 360px) {
            .popup-content .p-3 {
                padding: 0.5rem !important;
            }
        }

        .popup-image-container {
            position: relative;
            width: 100%;
            height: 180px;
            overflow: hidden;
        }

        .popup-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .popup-image:hover {
            transform: scale(1.05);
        }

        .popup-gradient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.7) 100%);
            pointer-events: none;
        }

        .popup-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--color-dark);
            font-family: 'Montserrat', sans-serif;
            line-height: 1.3;
        }

        .popup-price {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--color-primary);
        }

        .popup-address {
            font-size: 0.9rem;
            color: #4A5568;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .popup-details {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
        }

        .popup-details span {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.85rem;
            color: #4A5568;
            background-color: #EDF2F7;
            padding: 0.35rem 0.6rem;
            border-radius: 5px;
            font-weight: 500;
        }

        .popup-details i {
            color: var(--color-primary);
            font-size: 0.95em;
        }

        .popup-link {
            display: inline-block;
            color: #ffffff;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.95rem;
            transition: all var(--transition-fast);
            padding: 0.6rem 0.75rem;
            border-radius: var(--radius-sm);
            background-color: var(--color-primary);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 100%;
            margin-top: 0.5rem;
            letter-spacing: 0.02em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .popup-link:hover {
            color: #ffffff;
            background-color: var(--color-primary-dark);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
            transform: translateY(-3px);
        }
        .popup-link i {
            font-size: 0.8rem;
            margin-left: 0.35rem;
            vertical-align: middle;
            transition: transform var(--transition-fast);
        }
        .popup-link:hover i {
            transform: translateX(3px);
        }
        
        /* Estilo específico para botão do popup */
        .popup-details-btn {
            border: none;
            cursor: pointer;
            font-family: inherit;
        }
        .popup-details-btn:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

        /* --- Filter Panel --- */
        #filter-panel {
            transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
            background: rgba(30, 41, 59, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 99999 !important; /* Valor mais alto que qualquer outro elemento, incluindo o menu fixo */
        }
        #filter-panel:not(.hidden) {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
        #filter-panel-content {
            max-height: calc(100% - 130px);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--color-text-muted) var(--color-surface);
        }
        #filter-panel-content::-webkit-scrollbar { width: 6px; }
        #filter-panel-content::-webkit-scrollbar-track { background: var(--color-surface); border-radius: 3px; }
        #filter-panel-content::-webkit-scrollbar-thumb { background-color: var(--color-text-muted); border-radius: 3px; }

        /* --- Listing Card --- */
        .listing-card {
            background-color: var(--color-surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease-in-out, background-color 0.3s ease;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-border);
            cursor: pointer;
            position: relative;
            height: 100%;
        }
        .listing-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg), var(--shadow-gold);
            background-color: var(--color-surface-light);
            border-color: var(--color-primary);
        }
        .listing-image-wrapper {
            height: 240px;
            overflow: hidden;
            position: relative;
        }
        .listing-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
            background-color: #e2e8f0;
        }
        .listing-card:hover .listing-image {
            transform: scale(1.08);
        }
        
        /* Tag Styles */
        .listing-tag-container {
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            z-index: 15;
        }
        .listing-tag {
            display: inline-block;
            background: rgba(30, 41, 59, 0.85);
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.3rem 0.7rem;
            border-radius: var(--radius-sm);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transform: translateY(0);
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .listing-card:hover .listing-tag {
            transform: translateY(-3px);
        }
        .listing-tag.new {
            background: linear-gradient(135deg, rgba(177, 155, 107, 0.9), rgba(138, 118, 84, 0.9));
        }
        .listing-tag.price {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(177, 155, 107, 0.9));
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
        }
        
        /* --- Card Content --- */
        .card-content {
            padding: 1.25rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 5;
        }
        .card-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--color-text-primary);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 2.8em;
            transition: color var(--transition-fast);
        }
        .listing-card:hover .card-title {
            color: var(--color-primary-light);
        }
        .card-address {
            font-size: 0.875rem;
            color: var(--color-text-muted);
            margin-bottom: 1rem;
            line-height: 1.5;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .card-price {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--color-primary-light);
            margin-bottom: 1rem;
            transition: transform var(--transition-fast);
        }
        .listing-card:hover .card-price {
            transform: scale(1.05);
        }
        .card-details {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            margin-bottom: 1.25rem;
        }
        .card-details span {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            transition: transform var(--transition-normal);
        }
        .listing-card:hover .card-details span {
            transform: translateY(-2px);
        }
        .card-details .icon {
            color: var(--color-text-muted);
            width: 1.1rem;
            height: 1.1rem;
        }
        .card-code {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            margin-top: auto;
            padding-top: 0.75rem;
            border-top: 1px solid var(--color-border);
        }
        /* Card Actions Container */
        .card-actions-container {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            margin-top: 1rem;
        }

        /* Card Action Button Base */
        .card-action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-align: center;
            font-weight: 600;
            padding: 0.75rem 1rem;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
            font-size: 0.9rem;
            border: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
            cursor: pointer;
            text-decoration: none;
            flex: 1;
        }

        /* Primary Action Button (Ver Detalhes) */
        .card-action-primary {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
        }

        .card-action-primary:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary));
            transition: all 0.4s ease-in-out;
            z-index: -1;
        }

        .card-action-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(177, 155, 107, 0.25);
        }

        .card-action-primary:hover:before {
            left: 0;
        }

        /* WhatsApp Action Button - Dourado para manter consistência */
        .card-action-whatsapp {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            flex: 0 0 auto;
            min-width: 48px;
            padding: 0.75rem;
        }

        .card-action-whatsapp:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-accent));
            transition: all 0.4s ease-in-out;
            z-index: -1;
        }

        .card-action-whatsapp:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(177, 155, 107, 0.25);
        }

        .card-action-whatsapp:hover:before {
            left: 0;
        }

        .card-action-whatsapp i {
            font-size: 1.1rem;
            color: #ffffff; /* Ícone branco sobre fundo dourado */
        }

        .card-action-button:disabled {
            background: var(--color-border);
            cursor: not-allowed;
            color: var(--color-text-muted);
        }

        /* Responsividade para botões */
        @media (max-width: 480px) {
            .card-actions-container {
                gap: 0.5rem;
            }
            
            .card-action-button {
                font-size: 0.8rem;
                padding: 0.6rem 0.8rem;
            }
            
            .card-action-whatsapp {
                padding: 0.6rem;
                min-width: 44px;
            }
        }

        /* --- Controls & Forms --- */
        .listing-controls {
            margin-bottom: 1.5rem;
            margin-top: 0;
        }
        .listing-summary {
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-text-secondary);
        }
        .filter-input, select.filter-input {
            width: 100%;
            padding: 0.7rem 0.9rem;
            font-size: 0.9rem;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            background-color: var(--color-surface-light);
            color: var(--color-text-primary);
            transition: all var(--transition-fast);
            appearance: none;
            line-height: 1.5;
        }
        
        /* Prevenir zoom automático no mobile */
        @media (max-width: 768px) {
            .filter-input, 
            select.filter-input,
            input[type="text"],
            input[type="number"],
            input[type="email"],
            input[type="tel"],
            input[type="search"],
            textarea,
            select {
                font-size: 16px !important; /* Mínimo 16px para prevenir zoom no iOS */
                transform: translateZ(0); /* Força aceleração de hardware */
                -webkit-appearance: none; /* Remove estilos nativos do iOS */
            }
            
            /* Ajustar padding para compensar font-size maior */
            .filter-input, select.filter-input {
                padding: 0.6rem 0.8rem;
            }
            
            /* Ajustar labels para melhor proporção */
            label {
                font-size: 14px;
                margin-bottom: 0.3rem;
            }
            
            /* Garantir que placeholders sejam legíveis */
            .filter-input::placeholder,
            select.filter-input::placeholder {
                font-size: 16px;
                opacity: 0.7;
            }
        }
        .filter-input:focus, select.filter-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(177, 155, 107, 0.3);
            background-color: var(--color-surface);
        }
        
        /* Feedback visual para busca */
        .filter-input.search-has-results {
            border-color: #10b981;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        }
        
        .filter-input.search-no-results {
            border-color: #f59e0b;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
        }
        
        /* Animação suave para transições de feedback */
        .filter-input {
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        select.filter-input {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.75rem center;
            background-repeat: no-repeat;
            background-size: 1.25em 1.25em;
            padding-right: 2.8rem;
        }
        label {
            display: block;
            margin-bottom: 0.4rem;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--color-text-secondary);
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }

        /* --- Buttons --- */
        .action-button {
            padding: 0.65rem 1.1rem;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            cursor: pointer;
            border: 1px solid transparent;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .action-button:active {
            transform: translateY(0px);
            box-shadow: var(--shadow-sm);
        }
        .action-button i {
            font-size: 0.85em;
            opacity: 0.9;
            transition: transform var(--transition-fast);
        }
        .action-button:hover i {
            transform: translateX(2px);
        }
        
        .action-button-primary {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            color: white;
            border-color: var(--color-primary);
        }
        .action-button-primary:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary));
            transition: all 0.4s ease-in-out;
            z-index: -1;
        }
        .action-button-primary:hover:before {
            left: 0;
        }

        .action-button-secondary {
            background-color: var(--color-surface);
            color: var(--color-text-secondary);
            border-color: var(--color-border);
            transition: all var(--transition-normal);
        }
        .action-button-secondary:hover {
            background-color: var(--color-surface-light);
            border-color: var(--color-primary);
            color: var(--color-primary-light);
        }
        
        /* Estilos para os botões móveis */
        #mobile-action-buttons {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid var(--color-border);
            padding: 0.75rem 1rem;
            background-color: rgba(30, 41, 59, 0.95);
        }
        
        #mobile-action-buttons .action-button {
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-size: 0.9rem;
            padding: 0.8rem 1rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--color-border);
            background-color: var(--color-surface);
            color: var(--color-text-secondary);
            transition: all 0.25s ease;
            white-space: nowrap;
            min-width: auto;
            flex-shrink: 0;
        }
        
        #mobile-action-buttons .action-button:hover,
        #mobile-action-buttons .action-button:active {
            background-color: var(--color-surface-light);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
            color: var(--color-text-primary);
        }
        
        #mobile-action-buttons .action-button i {
            color: var(--color-primary);
            margin-right: 0.4rem;
            font-size: 1rem;
        }

        /* --- Loading & Messages --- */
        .loading-spinner {
            border: 3px solid rgba(177, 155, 107, 0.2);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border-left-color: var(--color-primary);
            animation: spin 1s linear infinite;
            margin: 2.5rem auto;
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        
        /* Spinner com efeito de pulsação */
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        #load-more-indicator {
            display: none;
            text-align: center;
            padding: 1.5rem 0;
            color: #718096;
        }
        #load-more-indicator.visible {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        #load-more-indicator .loading-spinner-small {
            border: 3px solid rgba(177, 155, 107, 0.3);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border-left-color: var(--color-primary);
            animation: spin 0.8s linear infinite, pulse 2s ease-in-out infinite;
            margin: 0 auto 0.5rem auto;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .message-box {
            text-align: center;
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: var(--radius-md);
            font-size: 0.95rem;
            animation: slideIn 0.4s ease-out;
        }
        .error-message {
            background-color: rgba(239, 68, 68, 0.1);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        .no-results-message {
            background-color: rgba(177, 155, 107, 0.1);
            color: var(--color-primary-light);
            border: 1px solid rgba(177, 155, 107, 0.3);
        }

        /* --- Footer --- */
        .site-footer {
            margin-top: 3rem;
            padding: 2rem 1rem;
            background: linear-gradient(135deg, var(--color-surface), var(--color-surface-light));
            color: var(--color-text-muted);
            text-align: center;
            font-size: 0.875rem;
            border-top: 1px solid var(--color-border);
        }
        .site-footer i {
            color: #ef4444;
            margin: 0 0.2rem;
            animation: heartbeat 1.5s ease-in-out infinite;
        }
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        /* --- Utility --- */
        .icon {
            width: 1rem;
            height: 1rem;
            display: inline-block;
            vertical-align: middle;
        }
        
        /* Glassmorphism para elementos flutuantes */
        .glass-effect {
            background: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(71, 85, 105, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        /* Adicionando estilos para animações AOS */
        [data-aos] {
            pointer-events: none;
        }
        [data-aos].aos-animate {
            pointer-events: auto;
        }
        
        /* Estilos adicionais para garantir compatibilidade total com tema dark */
        .popup-details span {
            background-color: rgba(51, 65, 85, 0.6) !important;
            color: var(--color-text-primary) !important;
        }
        
        .popup-content {
            background-color: var(--color-surface) !important;
        }
        
        .popup-title {
            color: var(--color-text-primary) !important;
        }
        
        .popup-address {
            color: var(--color-text-muted) !important;
        }
        
        /* Melhorias no contador do mapa */
        #map-count {
            background-color: var(--color-surface) !important;
            color: var(--color-text-primary) !important;
            border: 1px solid var(--color-border) !important;
        }
        
        /* Ajustes nos placeholders das imagens */
        .listing-image, .popup-image {
            background-color: var(--color-surface-light);
        }
        
        /* Melhorias de luxo para o tema dourado */
        .card-price {
            text-shadow: 0 2px 4px rgba(177, 155, 107, 0.3);
        }
        
        .action-button-primary:hover {
            box-shadow: var(--shadow-md), var(--shadow-gold);
        }
        
        .listing-card:hover .card-price {
            color: var(--color-accent);
            text-shadow: 0 4px 8px rgba(212, 175, 55, 0.4);
        }
        
        /* Efeito de brilho dourado para elementos premium */
        .premium-glow {
            box-shadow: 0 0 20px rgba(177, 155, 107, 0.2), inset 0 1px 0 rgba(244, 228, 188, 0.1);
        }
        
        /* Gradiente dourado para botões especiais */
        .gold-gradient {
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
        }
        
        .gold-gradient:hover {
            background: linear-gradient(135deg, var(--color-accent), var(--color-primary-light));
        }

        /* Marker Cluster Customization - Usando tons dourados */
        .marker-cluster {
            transition: all var(--transition-normal);
            background: linear-gradient(135deg, rgba(177, 155, 107, 0.6), rgba(201, 173, 122, 0.6));
        }
        .marker-cluster div {
            transition: background-color var(--transition-normal);
            font-weight: 600;
            font-size: 13px;
            background: linear-gradient(135deg, rgba(177, 155, 107, 0.9), rgba(212, 175, 55, 0.9));
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        .marker-cluster:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(177, 155, 107, 0.4);
        }
        .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
            background: linear-gradient(135deg, rgba(177, 155, 107, 0.7), rgba(212, 175, 55, 0.7)) !important;
        }
        .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
            background: linear-gradient(135deg, rgba(177, 155, 107, 0.9), rgba(212, 175, 55, 0.9)) !important;
            color: white !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* ========================================
           SISTEMA DE STORIES - SIMPLES E ESTÁVEL
        ======================================== */
        
        /* Container principal dos Stories */
        #imobz-stories-container {
            transition: opacity 0.3s ease, visibility 0.3s ease;
            position: relative;
            z-index: 100; /* Z-index baixo para não interferir com menu fixo */
            margin: 0 0 24px 0; /* Margem ajustada para posicionamento no topo */
            padding: 0 16px;
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            /* Garantir que o container se ajuste perfeitamente */
            box-sizing: border-box;
        }
        
        /* Melhorar o scroll horizontal */
        #imobz-stories-container::-webkit-scrollbar {
            height: 4px;
        }
        
        #imobz-stories-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
        }
        
        #imobz-stories-container::-webkit-scrollbar-thumb {
            background: var(--color-primary);
            border-radius: 2px;
        }
        
        #imobz-stories-container::-webkit-scrollbar-thumb:hover {
            background: var(--color-primary-dark);
        }
        
        /* Preview dos Stories */
        .story-preview {
            transition: transform 0.3s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            flex-shrink: 0; /* Evitar que os stories encolham */
            width: 90px; /* Largura fixa para consistência */
            min-width: 90px; /* Garantir largura mínima */
        }
        
        .story-preview:hover {
            transform: scale(1.05);
        }
        
        .story-preview:active {
            transform: scale(0.98);
        }
        
        .story-preview-image {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        
        /* Anel dourado dos Stories */
        .story-ring {
            background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
            width: 80px;
            height: 80px;
            border-radius: 50%;
            padding: 2px;
            margin: 0 auto 8px auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Stories visualizados */
        .story-viewed .story-ring {
            background: #e2e8f0;
        }
        
        /* Viewer dos Stories - Z-index corrigido */
        #imobz-story-viewer {
            z-index: 9999 !important; /* Abaixo do menu fixo (10000+) mas acima de tudo mais */
            touch-action: manipulation;
            -webkit-overflow-scrolling: touch;
        }

        /* Navegação dos Stories */
        .story-nav {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            z-index: 10;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }

        .story-nav-prev {
            left: 0;
        }

        .story-nav-next {
            right: 0;
        }

        .story-nav::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: rgba(255, 255, 255, 0.8);
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .story-nav-prev::before {
            content: '‹';
            left: 20px;
        }

        .story-nav-next::before {
            content: '›';
            right: 20px;
        }

        .story-nav:hover::before {
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

        .story-nav.touch-active::before {
            opacity: 1;
            transform: translateY(-50%) scale(1.2);
        }

        /* Responsividade para Mobile */
        @media (max-width: 768px) {
            #imobz-stories-container {
                margin: 16px 0 20px 0;
                padding: 0 12px;
            }
            
            .story-preview {
                width: 75px;
                min-width: 75px;
            }
            
            .story-ring {
                width: 65px;
                height: 65px;
            }
            
            .story-preview p {
                font-size: 0.7rem;
            }
            
            .story-nav::before {
                font-size: 32px;
            }
            
            .story-nav-prev::before {
                left: 16px;
            }
            
            .story-nav-next::before {
                right: 16px;
            }
        }
        
        /* Responsividade para telas pequenas */
        @media (max-width: 480px) {
            #imobz-stories-container {
                margin: 12px 0 16px 0;
                padding: 0 8px;
            }
            
            .story-preview {
                width: 70px;
                min-width: 70px;
            }
            
            .story-ring {
                width: 60px;
                height: 60px;
            }
            
            .story-preview p {
                font-size: 0.65rem;
            }
        }
        
        /* Responsividade para telas muito pequenas */
        @media (max-width: 360px) {
            .story-preview {
                width: 65px;
                min-width: 65px;
            }
            
            .story-ring {
                width: 55px;
                height: 55px;
            }
            
            .story-preview p {
                font-size: 0.6rem;
            }
        }
        
        /* Garantir que o body não role quando Stories estiver ativo */
        body.stories-active {
            overflow: hidden !important;
            height: 100% !important;
            position: fixed !important;
            width: 100% !important;
        }
        
        html.stories-active {
            overflow: hidden !important;
            height: 100% !important;
        }
        
        /* Estados especiais - quando o mapa está ativo */
        body.map-view-active #imobz-stories-container {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            z-index: -1;
            pointer-events: none;
            display: none !important;
        }

        /* Garantir que o contador de imóveis no mapa nunca apareça em dispositivos móveis */
        #map-count {
            display: none !important; /* Força ocultação por padrão */
        }
        @media (min-width: 1024px) {
            #map-count {
                display: flex !important; /* Exibe apenas em telas grandes */
            }
            
            /* Garantir que o contador só apareça quando o mapa estiver visível */
            body:not(.map-view-active) #map-count {
                opacity: 1; /* Sempre visível em desktop quando o mapa está aberto */
            }
        }

        /* Adicionar regra especial para garantir que o contador também fica oculto 
           em modo mobile quando o mapa é fechado */
        body.map-view-active #map-count {
            display: flex !important; /* Quando o mapa está ativo em mobile */
        }
        body:not(.map-view-active) #map-count {
            display: none !important; /* Quando o mapa não está ativo em nenhum modo */
        }

        /* Estilos específicos para os botões de ação mobile */
        #mobile-action-buttons {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #toggle-map-btn-mobile, #toggle-filters-btn-mobile {
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            /* Garantir que as transições sejam suaves em todos os estados */
            background-color: var(--color-surface);
            color: var(--color-text-secondary);
            border: 1px solid var(--color-border);
        }
        
        #toggle-map-btn-mobile i, #toggle-filters-btn-mobile i {
            color: var(--color-primary);
            transition: color 0.3s ease;
        }
        
        /* Hover para botões mobile no estado normal */
        #toggle-map-btn-mobile:hover, #toggle-filters-btn-mobile:hover {
            background-color: var(--color-surface-light);
            border-color: var(--color-primary);
            color: var(--color-primary-light);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        
        #toggle-map-btn-mobile:hover i, #toggle-filters-btn-mobile:hover i {
            color: var(--color-primary-light);
        }

        /* Estado ativo do botão ver mapa (quando o mapa está aberto) */
        body.map-view-active #toggle-map-btn-mobile {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
            color: white !important;
            border-color: var(--color-primary) !important;
            box-shadow: var(--shadow-md), var(--shadow-gold) !important;
        }
        
        body.map-view-active #toggle-map-btn-mobile i {
            color: white !important;
        }
        
        /* Estilo para a classe de botão ativo - harmonizado */
        .map-view-active-btn {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
            color: white !important;
            border-color: var(--color-primary) !important;
            box-shadow: var(--shadow-md), var(--shadow-gold) !important;
        }
        
        .map-view-active-btn i {
            color: white !important;
        }

        /* Efeito ao clicar nos botões */
        #toggle-map-btn-mobile:active, #toggle-filters-btn-mobile:active {
            transform: translateY(1px);
        }

        /* ========================================
           MOBILE UX ENHANCEMENTS
        ======================================== */
        
        /* Efeito sutil de hover para cards mobile */
        @media (max-width: 1023px) {
            .listing-card:active {
                transform: scale(0.98);
                transition: transform 0.1s ease;
            }
            
            /* Indicador visual sutil para imagem clicável */
            .listing-image-wrapper {
                position: relative;
            }
            
            .listing-image-wrapper::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 40px;
                height: 40px;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
                backdrop-filter: blur(5px);
            }
            
            .listing-image-wrapper::before {
                content: '⋯';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 20px;
                font-weight: bold;
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
                z-index: 1;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }
            
                         /* Mostrar indicador ao tocar e segurar */
             .listing-image-wrapper:active::after,
             .listing-image-wrapper:active::before {
                 opacity: 1;
             }
         }
         
         /* Indicador para desktop - mais sutil */
         @media (min-width: 1024px) {
             .listing-image-wrapper {
                 cursor: pointer;
                 position: relative;
             }
             
             .listing-image-wrapper::after {
                 content: '';
                 position: absolute;
                 top: 8px;
                 right: 8px;
                 width: 24px;
                 height: 24px;
                 background: rgba(0, 0, 0, 0.6);
                 border-radius: 50%;
                 opacity: 0;
                 transition: opacity 0.3s ease;
                 pointer-events: none;
                 backdrop-filter: blur(5px);
             }
             
             .listing-image-wrapper::before {
                 content: '⋯';
                 position: absolute;
                 top: 8px;
                 right: 8px;
                 width: 24px;
                 height: 24px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 color: white;
                 font-size: 14px;
                 font-weight: bold;
                 opacity: 0;
                 transition: opacity 0.3s ease;
                 pointer-events: none;
                 z-index: 1;
                 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
             }
             
             /* Mostrar indicador ao passar o mouse */
             .listing-card:hover .listing-image-wrapper::after,
             .listing-card:hover .listing-image-wrapper::before {
                 opacity: 1;
             }
         }
        
        /* Menu de contexto mobile */
        .mobile-context-menu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 10000;
            display: flex;
            align-items: flex-end;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .mobile-context-menu.visible {
            opacity: 1;
            visibility: visible;
        }
        
        .mobile-context-menu-content {
            width: 100%;
            background: var(--color-surface);
            border-radius: 20px 20px 0 0;
            padding: 0;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
        }
        
                 .mobile-context-menu.visible .mobile-context-menu-content {
             transform: translateY(0);
         }
         
         /* Menu de contexto desktop */
         .desktop-context-menu {
             position: fixed;
             z-index: 10000;
             opacity: 0;
             visibility: hidden;
             transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
             transform: scale(0.95) translateY(-10px);
         }
         
         .desktop-context-menu.visible {
             opacity: 1;
             visibility: visible;
             transform: scale(1) translateY(0);
         }
         
         .desktop-context-menu-content {
             background: var(--color-surface);
             border: 1px solid var(--color-border);
             border-radius: var(--radius-lg);
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
             overflow: hidden;
             min-width: 220px;
             backdrop-filter: blur(10px);
         }
         
         .desktop-context-menu-header {
             padding: 1rem 1.25rem 0.75rem;
             border-bottom: 1px solid var(--color-border);
             background: var(--color-surface-light);
         }
         
         .desktop-context-menu-header h4 {
             margin: 0;
             font-size: 0.95rem;
             font-weight: 600;
             color: var(--color-text-primary);
             font-family: 'Montserrat', sans-serif;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             max-width: 180px;
         }
         
         .desktop-context-menu-actions {
             padding: 0.5rem 0;
         }
         
         .desktop-context-action {
             display: flex;
             align-items: center;
             gap: 0.75rem;
             width: 100%;
             padding: 0.75rem 1.25rem;
             background: none;
             border: none;
             color: var(--color-text-primary);
             font-size: 0.9rem;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.2s ease;
             text-align: left;
         }
         
         .desktop-context-action:hover {
             background: var(--color-surface-light);
             color: var(--color-primary);
         }
         
         .desktop-context-action:active {
             background: var(--color-primary-light);
             transform: scale(0.98);
         }
         
         .desktop-context-action i {
             font-size: 1rem;
             color: var(--color-primary);
             width: 16px;
             text-align: center;
             flex-shrink: 0;
         }
         
         .desktop-context-action span {
             flex: 1;
         }
         
         /* Hover específico para ações */
         .desktop-context-action:hover i {
             color: var(--color-accent);
             transform: scale(1.1);
         }
        
        .mobile-context-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 1.5rem 1rem;
            border-bottom: 1px solid var(--color-border);
        }
        
        .mobile-context-menu-header h4 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-text-primary);
            font-family: 'Montserrat', sans-serif;
        }
        
        .mobile-context-menu-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--color-text-muted);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.2s ease;
        }
        
        .mobile-context-menu-close:hover {
            background: var(--color-surface-light);
            color: var(--color-text-primary);
        }
        
        .mobile-context-menu-actions {
            padding: 1rem 0 2rem;
        }
        
        .mobile-context-action {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;
            padding: 1rem 1.5rem;
            background: none;
            border: none;
            color: var(--color-text-primary);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }
        
        .mobile-context-action:hover {
            background: var(--color-surface-light);
        }
        
        .mobile-context-action:active {
            background: var(--color-primary-light);
            transform: scale(0.98);
        }
        
                 .mobile-context-action i {
             font-size: 1.1rem;
             color: var(--color-primary);
             width: 20px;
             text-align: center;
         }
         
         /* Manter ícones na cor dourada para consistência estética */
         .mobile-context-action[data-action="whatsapp"] i {
             color: var(--color-primary); /* Dourado para manter estética */
         }
        
        /* Toast Notifications */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 0;
            box-shadow: var(--shadow-lg);
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transform: translateX(100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 280px;
            max-width: 400px;
        }
        
        .toast.visible {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }
        
        .toast-content {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.25rem;
        }
        
        .toast-content i {
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        
        .toast-content span {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-text-primary);
        }
        
        .toast-success {
            border-left: 4px solid #10b981;
        }
        
        .toast-success .toast-content i {
            color: #10b981;
        }
        
        .toast-error {
            border-left: 4px solid #ef4444;
        }
        
        .toast-error .toast-content i {
            color: #ef4444;
        }
        
        .toast-warning {
            border-left: 4px solid #f59e0b;
        }
        
        .toast-warning .toast-content i {
            color: #f59e0b;
        }
        
        .toast-info {
            border-left: 4px solid var(--color-primary);
        }
        
        .toast-info .toast-content i {
            color: var(--color-primary);
        }
        
        /* Ícone de favorito nos cards */
        .favorite-heart {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 5;
        }
        
        .favorite-heart i {
            color: #ffffff;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .favorite-heart.favorited {
            background: rgba(239, 68, 68, 0.9);
        }
        
        .favorite-heart.favorited i {
            color: #ffffff;
            transform: scale(1.1);
        }
        
        .favorite-heart:hover {
            transform: scale(1.1);
            background: rgba(239, 68, 68, 0.8);
        }
        
        /* Melhorias de acessibilidade mobile */
        @media (max-width: 768px) {
            .toast {
                top: 10px;
                right: 10px;
                left: 10px;
                min-width: auto;
                max-width: none;
            }
            
            .mobile-context-action {
                padding: 1.25rem 1.5rem;
                font-size: 1.1rem;
            }
            
            .mobile-context-action i {
                font-size: 1.2rem;
            }
            
            /* Aumentar área de toque */
            .favorite-heart {
                width: 44px;
                height: 44px;
            }
            
            .favorite-heart i {
                font-size: 1.1rem;
            }
        }
        
        /* Animações de entrada para cards */
        .listing-card {
            animation: fadeInUp 0.6s ease-out;
        }
        
        .listing-card:nth-child(even) {
            animation-delay: 0.1s;
        }
        
        .listing-card:nth-child(3n) {
            animation-delay: 0.2s;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Melhorias no feedback visual de toque */
        .listing-card {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .mobile-context-action {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        /* Indicador de carregamento melhorado */
        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-border);
            border-top: 2px solid var(--color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Melhorias no botão de toggle do mapa mobile */
        .toggle-map-btn-mobile {
            position: relative;
            overflow: hidden;
        }
        
        .toggle-map-btn-mobile::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }
        
        .toggle-map-btn-mobile:active::before {
            width: 100px;
            height: 100px;
        }
        
        /* Melhorias na responsividade dos filtros */
        @media (max-width: 480px) {
            .mobile-context-menu-header {
                padding: 1.25rem 1.25rem 0.75rem;
            }
            
            .mobile-context-menu-header h4 {
                font-size: 1rem;
                line-height: 1.3;
            }
            
            .mobile-context-action {
                padding: 1rem 1.25rem;
            }
        }
        
        /* Suporte para modo escuro do sistema */
        @media (prefers-color-scheme: dark) {
            .toast {
                background: var(--color-surface);
                border-color: var(--color-border);
            }
            
            .mobile-context-menu {
                background: rgba(0, 0, 0, 0.8);
            }
        }
        
        /* Otimizações de performance */
        .listing-card,
        .mobile-context-menu,
        .toast {
            will-change: transform, opacity;
        }
        
        /* Melhorias na acessibilidade */
        .mobile-context-action:focus {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
        
        .favorite-heart:focus {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
        
        /* Suporte para dispositivos com pouca memória */
        @media (max-resolution: 150dpi) {
            .listing-card {
                animation: none;
            }
        }

                 /* ========================================
            LIGHTBOX PARA DETALHES DO IMÓVEL
         ======================================== */
         
         .property-lightbox {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             z-index: 10001;
             opacity: 0;
             visibility: hidden;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
         .property-lightbox.visible {
             opacity: 1;
             visibility: visible;
         }
         
         .lightbox-overlay {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: rgba(0, 0, 0, 0.8);
             backdrop-filter: blur(5px);
         }
         
         .lightbox-container {
             position: relative;
             width: 95%;
             height: 95%;
             max-width: 1200px;
             margin: 2.5% auto;
             background: var(--color-surface);
             border-radius: var(--radius-lg);
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.2);
             display: flex;
             flex-direction: column;
             overflow: hidden;
             transform: scale(0.9) translateY(50px);
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
         .lightbox-container::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             border-radius: var(--radius-lg);
             padding: 1px;
             background: linear-gradient(135deg, var(--color-primary), transparent, var(--color-accent));
             mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
             mask-composite: exclude;
             pointer-events: none;
             opacity: 0.3;
         }
         
         .property-lightbox.visible .lightbox-container {
             transform: scale(1) translateY(0);
         }
         
         .lightbox-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 1.5rem 2rem;
             background: linear-gradient(135deg, var(--color-surface-light), var(--color-surface));
             border-bottom: 1px solid var(--color-border);
             flex-shrink: 0;
             position: relative;
         }
         
         .lightbox-header::before {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
             opacity: 0.6;
         }
         
         .lightbox-title h3 {
             margin: 0;
             font-size: 1.3rem;
             font-weight: 600;
             color: var(--color-text-primary);
             font-family: 'Montserrat', sans-serif;
             line-height: 1.3;
         }
         
         .lightbox-price {
             margin: 0.25rem 0 0;
             font-size: 1.1rem;
             font-weight: 700;
             color: var(--color-primary);
         }
         
         .lightbox-controls {
             display: flex;
             gap: 0.75rem;
             align-items: center;
         }
         
         .lightbox-controls::before {
             content: '';
             width: 1px;
             height: 30px;
             background: var(--color-border);
             margin-right: 0.5rem;
         }
         
         .lightbox-btn {
             width: 44px;
             height: 44px;
             border: none;
             border-radius: 50%;
             background: var(--color-surface);
             color: var(--color-text-primary);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.2s ease;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         
         .lightbox-btn:hover {
             color: white;
             transform: scale(1.1);
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
         
         .lightbox-whatsapp:hover {
             background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
         }
         
         .lightbox-back:hover {
             background: #6366f1;
         }
         
         .lightbox-share:hover {
             background: var(--color-primary);
         }
         
         .lightbox-close:hover {
             background: #ef4444;
         }
         
         .lightbox-content {
             flex: 1;
             position: relative;
             overflow: hidden;
         }
         
         .lightbox-loading {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             background: linear-gradient(135deg, var(--color-surface), var(--color-surface-light));
             color: var(--color-text-primary);
             gap: 1.5rem;
         }
         
         .lightbox-loading::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.02"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.02"/><circle cx="50" cy="10" r="1" fill="%23ffffff" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
             opacity: 0.3;
         }
         
         .lightbox-loading p {
             margin: 0;
             font-size: 1.1rem;
             color: var(--color-text-secondary);
             font-weight: 500;
             position: relative;
             z-index: 1;
         }
         
         .lightbox-loading .loading-text {
             display: flex;
             align-items: center;
             gap: 0.5rem;
             position: relative;
             z-index: 1;
         }
         
         .lightbox-loading .loading-dots {
             display: inline-flex;
             gap: 0.2rem;
         }
         
         .lightbox-loading .loading-dots span {
             width: 4px;
             height: 4px;
             background: var(--color-primary);
             border-radius: 50%;
             animation: loadingDots 1.4s infinite ease-in-out;
         }
         
         .lightbox-loading .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
         .lightbox-loading .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
         .lightbox-loading .loading-dots span:nth-child(3) { animation-delay: 0s; }
         
         @keyframes loadingDots {
             0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
             40% { transform: scale(1.2); opacity: 1; }
         }
         
         .lightbox-iframe {
             width: 100%;
             height: 100%;
             border: none;
             display: none;
             background: white;
         }
         
         .error-content {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 1rem;
             color: var(--color-text-secondary);
         }
         
         .error-content i {
             font-size: 3rem;
             color: #f59e0b;
         }
         
         .lightbox-retry {
             padding: 0.75rem 1.5rem;
             background: var(--color-primary);
             color: white;
             border: none;
             border-radius: var(--radius-md);
             cursor: pointer;
             font-weight: 600;
             transition: all 0.2s ease;
         }
         
         .lightbox-retry:hover {
             background: var(--color-accent);
             transform: translateY(-2px);
         }
         
         /* Responsividade para mobile */
         @media (max-width: 768px) {
             .lightbox-container {
                 width: 100%;
                 height: 100%;
                 margin: 0;
                 border-radius: 0;
                 max-width: none;
             }
             
             .lightbox-header {
                 padding: 1rem 1.5rem;
             }
             
             .lightbox-title h3 {
                 font-size: 1.1rem;
             }
             
             .lightbox-price {
                 font-size: 1rem;
             }
             
             .lightbox-btn {
                 width: 40px;
                 height: 40px;
             }
             
             .lightbox-controls {
                 gap: 0.5rem;
             }
         }
         
         @media (max-width: 480px) {
             .lightbox-header {
                 padding: 0.75rem 1rem;
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 0.75rem;
             }
             
             .lightbox-title {
                 flex: 1;
                 width: 100%;
             }
             
             .lightbox-title h3 {
                 font-size: 1rem;
                 line-height: 1.2;
             }
             
             .lightbox-controls {
                 align-self: flex-end;
                 gap: 0.5rem;
             }
             
             .lightbox-controls::before {
                 display: none;
             }
             
             .lightbox-btn {
                 width: 36px;
                 height: 36px;
                 font-size: 0.9rem;
             }
         }
         
         /* Animações de loading */
         .lightbox-loading .loading-spinner {
             width: 40px;
             height: 40px;
             border: 3px solid var(--color-border);
             border-top: 3px solid var(--color-primary);
             border-right: 3px solid var(--color-accent);
             border-radius: 50%;
             animation: spin 1s linear infinite, pulse 2s ease-in-out infinite;
             position: relative;
             z-index: 1;
         }
         
         @keyframes pulse {
             0%, 100% { transform: scale(1); }
             50% { transform: scale(1.05); }
         }
         
         /* Otimizações de performance */
         .property-lightbox {
             will-change: opacity, visibility;
         }
         
         .lightbox-container {
             will-change: transform;
         }
         
         /* Suporte para modo escuro */
         @media (prefers-color-scheme: dark) {
             .lightbox-iframe {
                 background: var(--color-surface);
             }
         }

        /* ========================================

        /* ===== PÁGINAS INDIVIDUAIS DE IMÓVEIS ===== */
        .individual-property-page {
            min-height: 100vh;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 20px 0;
        }

        .property-navigation {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }

        .back-button {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(177, 155, 107, 0.3);
        }

        .back-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(177, 155, 107, 0.4);
        }

        .property-breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: #64748b;
        }

        .property-breadcrumb a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .property-breadcrumb a:hover {
            color: var(--primary-dark);
        }

        .property-breadcrumb i {
            font-size: 12px;
            opacity: 0.6;
        }

        /* Loading para páginas individuais */
        .individual-property-loading {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }

        .individual-property-loading .loading-container {
            text-align: center;
            padding: 40px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 400px;
            width: 90%;
        }

        .individual-property-loading i {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 20px;
            animation: spin 1.5s linear infinite;
        }

        .individual-property-loading h2 {
            color: #1e293b;
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: 600;
        }

        .individual-property-loading p {
            color: #64748b;
            font-size: 16px;
            margin: 0;
        }

        /* Erro para páginas individuais */
        .individual-property-error {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }

        .individual-property-error .error-container {
            text-align: center;
            padding: 40px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 500px;
            width: 90%;
        }

        .individual-property-error i {
            font-size: 48px;
            color: #ef4444;
            margin-bottom: 20px;
        }

        .individual-property-error h2 {
            color: #1e293b;
            margin-bottom: 15px;
            font-size: 24px;
            font-weight: 600;
        }

        .individual-property-error p {
            color: #64748b;
            font-size: 16px;
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .individual-property-error .error-details {
            background: #fef2f2;
            color: #dc2626;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            margin: 15px 0;
            border-left: 4px solid #ef4444;
        }

        .error-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 25px;
            flex-wrap: wrap;
        }

        .retry-button, .home-button {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .retry-button {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(177, 155, 107, 0.3);
        }

        .retry-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(177, 155, 107, 0.4);
        }

        .home-button {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
        }

        .home-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(100, 116, 139, 0.4);
        }

        /* Responsividade para páginas individuais */
        @media (max-width: 768px) {
            .property-navigation {
                flex-direction: column;
                align-items: stretch;
                text-align: center;
            }
            
            .property-breadcrumb {
                justify-content: center;
            }
            
            .error-actions {
                flex-direction: column;
                align-items: stretch;
            }
            
            .retry-button, .home-button {
                justify-content: center;
            }
        }

        /* Animação de spin */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* ========================================
           LAYOUT DE DUAS COLUNAS COM MAPA INLINE
        ======================================== */
        
        /* Layout principal com duas colunas */
        .listings-column {
            min-height: 600px;
        }
        
        .map-column {
            position: relative;
        }
        
        /* Mapa inline sticky */
        .map-column .sticky {
            position: sticky;
            top: 80px; /* Ajustar conforme altura do header fixo */
            z-index: 10;
        }
        
        /* Container do mapa inline */
        .map-column #map {
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .map-column #map:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }
        
        /* Header do mapa inline */
        .map-column .flex.justify-between {
            border-radius: 12px 12px 0 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        /* Responsividade para tablets */
        @media (max-width: 1024px) {
            .map-column {
                display: none !important;
            }
            
            .listings-column {
                grid-column: 1 / -1;
            }
            

        }
        
        /* Ajustes para mobile */
        @media (max-width: 768px) {
            .listings-column #listings-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
        
        /* Melhorias no grid de imóveis para layout de duas colunas */
        @media (min-width: 1024px) {
            .listings-column #listings-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            /* Cards menores para caber melhor na coluna */
            .listings-column .listing-card {
                max-width: none;
            }
            
            .listings-column .listing-image-wrapper {
                height: 200px;
            }
        }
        
        /* Ajustes para telas muito grandes */
        @media (min-width: 1440px) {
            .listings-column #listings-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .map-column {
                position: relative;
            }
            
            .map-column .sticky {
                top: 100px;
            }
        }

        /* ========================================
           MARCADORES COM LOGO DA IMOBILIÁRIA
        ======================================== */
        
        .custom-logo-marker {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        
        .marker-container {
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .marker-logo {
            width: 40px;
            height: 40px;
            object-fit: contain;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
            transition: all 0.3s ease;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            image-rendering: pixelated;
            -ms-interpolation-mode: nearest-neighbor;
        }
        
        .marker-pulse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background: rgba(177, 155, 107, 0.3);
            border-radius: 50%;
            animation: markerPulse 2s infinite;
            z-index: -1;
        }
        
        .marker-hover .marker-logo {
            transform: scale(1.2);
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
        }
        
        .marker-hover .marker-pulse {
            animation: markerPulseHover 1s infinite;
        }
        
        @keyframes markerPulse {
            0%, 100% { 
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.4;
            }
            50% { 
                transform: translate(-50%, -50%) scale(1.5);
                opacity: 0;
            }
        }
        
        @keyframes markerPulseHover {
            0%, 100% { 
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.6;
            }
            50% { 
                transform: translate(-50%, -50%) scale(2);
                opacity: 0;
            }
        }

        /* ========================================
           CARDS DOS IMÓVEIS NO POPUP DO MAPA
        ======================================== */
        
        .property-card-popup {
            max-width: 320px;
            background-color: var(--color-surface);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--color-border);
            cursor: pointer;
            position: relative;
            height: 100%;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease-in-out, background-color 0.3s ease;
        }
        
        .property-card-popup:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg), var(--shadow-gold);
            background-color: var(--color-surface-light);
            border-color: var(--color-primary);
        }
        
        .property-card-header {
            position: relative;
        }
        
        .property-image-container {
            position: relative;
            width: 100%;
            height: 240px;
            overflow: hidden;
        }
        
        .property-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
            background-color: #e2e8f0;
        }
        
        .property-card-popup:hover .property-image {
            transform: scale(1.08);
        }
        
        .property-price-badge {
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(177, 155, 107, 0.9));
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.3rem 0.7rem;
            border-radius: var(--radius-sm);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
            transform: translateY(0);
            transition: transform 0.3s ease, background-color 0.3s ease;
            z-index: 15;
        }
        
        .property-card-popup:hover .property-price-badge {
            transform: translateY(-3px);
        }
        
        .property-price-badge small {
            display: block;
            font-size: 11px;
            opacity: 0.9;
            margin-top: 2px;
        }
        
        .property-card-content {
            padding: 1.25rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 5;
        }
        
        .property-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--color-text-primary);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 2.8em;
            transition: color var(--transition-fast);
        }
        
        .property-card-popup:hover .property-title {
            color: var(--color-primary-light);
        }
        
        .property-address {
            font-size: 0.875rem;
            color: var(--color-text-muted);
            margin-bottom: 1rem;
            line-height: 1.5;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .property-address i {
            color: var(--color-text-muted);
            width: 1.1rem;
            height: 1.1rem;
        }
        
        .property-features {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            margin-bottom: 1.25rem;
        }
        
        .property-features .feature {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            transition: transform var(--transition-normal);
        }
        
        .property-card-popup:hover .property-features .feature {
            transform: translateY(-2px);
        }
        
        .property-features .feature i {
            color: var(--color-text-muted);
            width: 1.1rem;
            height: 1.1rem;
        }
        
        .property-actions {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            margin-top: 1rem;
        }
        
        .btn-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-align: center;
            font-weight: 600;
            padding: 0.75rem 1rem;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
            font-size: 0.9rem;
            border: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
            cursor: pointer;
            text-decoration: none;
            flex: 1;
        }
        
        .btn-details {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
        }
        
        .btn-details:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary));
            transition: all 0.4s ease-in-out;
            z-index: -1;
        }
        
        .btn-details:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(177, 155, 107, 0.25);
        }
        
        .btn-details:hover:before {
            left: 0;
        }
        
        .btn-whatsapp {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            flex: 0 0 auto;
            min-width: 48px;
            padding: 0.75rem;
        }
        
        .btn-whatsapp:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-accent));
            transition: all 0.4s ease-in-out;
            z-index: -1;
        }
        
        .btn-whatsapp:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(177, 155, 107, 0.25);
        }
        
        .btn-whatsapp:hover:before {
            left: 0;
        }
        
        .btn-whatsapp i {
            font-size: 1.1rem;
            color: #ffffff;
        }
        
        .btn-action:disabled {
            background: var(--color-border);
            cursor: not-allowed;
            color: var(--color-text-muted);
        }
        
        .property-extras {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            margin-top: auto;
            padding-top: 0.75rem;
            border-top: 1px solid var(--color-border);
        }
        
        .property-id {
            font-size: 0.75rem;
            color: var(--color-text-muted);
        }
        
        /* Responsividade para mobile */
        @media (max-width: 480px) {
            .property-card-popup {
                max-width: 260px;
            }
            
            .property-image-container {
                height: 200px;
            }
            
            .property-card-content {
                padding: 1rem;
            }
            
            .property-actions {
                gap: 0.5rem;
            }
            
            .btn-action {
                font-size: 0.8rem;
            }
            
            .btn-whatsapp {
                padding: 0.75rem;
            }
        }
        
        /* Animações para os cards do mapa */
        .property-card-popup {
            animation: fadeInUp 0.6s ease-out;
        }
        
        .property-card-popup:nth-child(even) {
            animation-delay: 0.1s;
        }
        
        .property-card-popup:nth-child(3n) {
            animation-delay: 0.2s;
        }

        /* Responsividade aprimorada para botões mobile quando mapa ativo */
        @media (max-width: 480px) {
            body.map-view-active #mobile-action-buttons {
                bottom: 15px !important;
                width: calc(100% - 30px) !important;
                max-width: 400px !important;
                padding: 10px 15px !important;
                gap: 15px !important;
                border-radius: 20px !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button {
                padding: 10px 12px !important;
                font-size: 13px !important;
                border-radius: 16px !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button i {
                font-size: 13px !important;
                margin-right: 4px !important;
            }
        }
        
        @media (max-width: 360px) {
            body.map-view-active #mobile-action-buttons {
                bottom: 12px !important;
                width: calc(100% - 24px) !important;
                max-width: 320px !important;
                padding: 8px 12px !important;
                gap: 12px !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button {
                padding: 8px 10px !important;
                font-size: 12px !important;
                border-radius: 14px !important;
            }
            
            body.map-view-active #mobile-action-buttons .action-button i {
                font-size: 12px !important;
                margin-right: 3px !important;
            }
        }