/*
Copyright (C) The Greek Directory, 2025-present. All rights reserved.
This source code is proprietary and no part may not be used, reproduced, or distributed 
without written permission from The Greek Directory. Unauthorized use, copying, modification, 
or distribution of this code will result in legal action to the fullest extent permitted by law.
*/

/* ============================================
   LISTINGS PAGE - COMPLETE FIXED CSS
   ============================================ */

:root {
    --primary-blue: #045093;
    --secondary-gold: #D4AF37;
    --text-dark: #1a1a1a;
    --text-light: #666;
    --border-color: #e5e7eb;
    --bg-light: #f9fafb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: white;
}

/* ============================================
   CRITICAL TOUCHSCREEN FIXES - COMPLETE
   Ensures ALL interactive elements respond to taps
   ============================================ */

a, button, input, select, textarea,
.star-button, .map-control-btn,
#filterBtn, #mapBtn, #refreshBtn, #mapBtnDesktop,
#gridViewBtn, #gridViewBtn2, #listViewBtn, #listViewBtn2,
#loadMoreBtn, #splitFiltersBtn, #splitViewBtn,
.subcategory-tag, .location-search-result,
.leaflet-popup-close-button, .toggle-option,
.category-btn,
.bg-white.rounded-lg.shadow,
.bg-white.rounded-lg.shadow a,
.listing-card,
.listing-card a,
#headerStarBtn,
#hamburgerBtn,
#navHome, #navListings, #navAbout,
#dropHome, #dropListings, #dropAbout,
header a, header button,
.split-listing-visit-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
}

/* Header Styles */
header {
    background: white;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.2s;
}

.logo-link:hover {
    color: var(--primary-blue);
}

/* Utility Classes */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   PROPER WORD WRAPPING WITH HYPHENS
   ============================================ */

.map-popup-title,
.map-popup-tagline,
h3,
.split-listing-item h3,
.listing-card h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.map-popup-title {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.map-popup-title svg {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ============================================
   SVG ICON COLORS - ALL #045093
   ============================================ */

.relative.mb-4 .pointer-events-none svg {
    color: #045093 !important;
    stroke: #045093 !important;
}

#filterBtn svg,
#desktopFilterToggleBtn svg,
#splitFiltersBtn svg {
    color: #045093 !important;
    stroke: #045093 !important;
}

#mapBtn svg,
#mapBtnDesktop svg {
    color: #045093 !important;
    stroke: #045093 !important;
}

#gridViewBtn svg path,
#gridViewBtn2 svg path {
    fill: #045093 !important;
}

#listViewBtn svg,
#listViewBtn2 svg {
    color: #045093 !important;
    stroke: #045093 !important;
}

#splitViewBtn svg,
.map-controls #splitViewToggleBtn svg {
    fill: #045093 !important;
}

#resetMapBtn svg,
#splitResetMapBtn svg {
    color: #045093 !important;
    stroke: #045093 !important;
}

#locateBtnIcon,
#splitLocateBtnIcon {
    fill: #045093 !important;
}

.bg-white.rounded-lg.shadow svg.w-4.h-4 {
    color: #045093 !important;
    stroke: #045093 !important;
}

.map-popup-details svg {
    stroke: #045093 !important;
}

.listing-image-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 55%);
}

/* ============================================
   CURRENT LOCATION BUTTON — ACTIVE STATE
   ============================================ */
.map-control-btn.locate-active,
.map-control-btn.active {
    background: #045093 !important;
    border-color: #045093 !important;
    color: white !important;
}

.map-control-btn.locate-active svg,
.map-control-btn.active svg {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

/* ============================================
   VIEW TOGGLE BUTTONS - SHOW SELECTED STATE
   ============================================ */

#gridViewBtn.active,
#gridViewBtn2.active,
#listViewBtn.active,
#listViewBtn2.active {
    background: #045093 !important;
}

#gridViewBtn.active svg path,
#gridViewBtn2.active svg path {
    fill: white !important;
}

#listViewBtn.active svg,
#listViewBtn2.active svg {
    stroke: white !important;
}

/* ============================================
   SEARCH INPUT
   ============================================ */
#searchInput {
    color: #045093;
}

/* Map Styles */
#map {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 600px;
    min-height: 400px;
}

.map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-blue);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Badge Styles */
.badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

.badge-open {
    background: #10b981;
    color: white;
}

.badge-closed {
    background: #ef4444;
    color: white;
}

.badge-opening-soon {
    background: #fbbf24;
    color: #78350f;
}

.badge-closing-soon {
    background: #f59e0b;
    color: white;
}

.badge-featured {
    background: #fbbf24;
    color: #78350f;
}

.badge-premium {
    background: #7c3aed;
    color: #ffffff;
}

.badge-coming-soon {
    background: #ea580c;
    color: #fff;
}

.claimed-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #10b981;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.claimed-checkmark svg {
    width: 12px;
    height: 12px;
    fill: white;
}

/* Image Protection */
img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

button,
a {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

button:not([type="range"]),
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
a,
.share-button {
    outline: none !important;
    box-shadow: none;
}

#clearFiltersBtn,
#clearFiltersBtn2,
#typoSuggestion button,
#toggleFilterPosition {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Filter Panel Styles */
#filterPanel {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#filterPanel .space-y-4 > div:last-child {
    padding-bottom: 40px;
}

/* Map Container */
#mapContainer {
    position: relative;
    z-index: 50;
}

/* ============================================
   CUSTOM MARKER STYLES WITH Z-INDEX PRIORITY
   Higher tier = higher z-index
   ============================================ */
.custom-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--primary-blue);
    overflow: hidden;
    background: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Z-index priority by tier */
.custom-marker.tier-free {
    z-index: 100 !important;
}

.custom-marker.tier-premium {
    z-index: 200 !important;
}

.custom-marker.tier-featured {
    z-index: 300 !important;
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}

.custom-marker.tier-premium {
    z-index: 400 !important;
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}

.custom-marker:hover {
    transform: scale(1.1);
    z-index: 1000 !important;
}

.custom-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Marker Cluster Styles */
.marker-cluster {
    background: rgba(5, 81, 147, 0.6);
    border: 3px solid var(--primary-blue);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
}

.marker-cluster:hover {
    transform: scale(1.1);
    background: rgba(5, 81, 147, 0.8);
}

.marker-cluster-small {
    width: 40px;
    height: 40px;
}

.marker-cluster-medium {
    width: 50px;
    height: 50px;
    font-size: 16px;
}

.marker-cluster-large {
    width: 60px;
    height: 60px;
    font-size: 18px;
}

/* Map Controls */
.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-control-btn {
    background: white;
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.map-control-btn:hover {
    background: #f5f5f5;
    border-color: var(--primary-blue);
}

.map-control-btn img {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Radius Value */
.radius-value {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

/* Range Input */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #ddd;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-blue);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-blue);
    cursor: pointer;
    border: none;
}

/* Map Popup */
.map-popup {
    max-width: 320px;
}

.map-popup-hero {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.map-popup-content {
    padding: 12px;
    display: flex;
    gap: 12px;
}

.map-popup-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.map-popup-info {
    flex: 1;
    min-width: 0;
}

.map-popup-badges {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.map-popup-title {
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-blue);
    margin-bottom: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.map-popup-title:hover {
    text-decoration: underline;
}

.map-popup-tagline {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.map-popup-details {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
}

/* Leaflet Popup Close Button */
.leaflet-popup-close-button {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    border: 2px solid #ccc !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #666 !important;
}

.leaflet-popup-close-button:hover {
    background: #f0f0f0 !important;
    border-color: #999 !important;
    color: #333 !important;
}

/* Subcategory Tags */
.subcategory-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 4px;
    background: #e5e7eb;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.subcategory-tag:hover {
    background: #d1d5db;
}

.subcategory-tag.selected {
    background: var(--primary-blue);
    color: white;
}

/* ============================================
   STAR BUTTON - ENHANCED DESIGN
   ============================================ */
.star-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0,0,0,0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.star-button:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(0,0,0,0.06);
    background: rgba(255, 255, 255, 1);
}

.star-button:active {
    transform: scale(0.92);
}

.star-icon {
    width: 17px;
    height: 17px;
    fill: #d1d5db;
    stroke: #9ca3af;
    stroke-width: 1.8;
    transition: fill 0.15s ease, stroke 0.15s ease;
    pointer-events: none;
}

.star-button.starred {
    background: rgba(255, 253, 235, 0.97);
    border-color: rgba(234, 179, 8, 0.5);
    box-shadow: 0 2px 10px rgba(202, 138, 4, 0.30), 0 0 0 1px rgba(234,179,8,0.15);
}

.star-button.starred .star-icon {
    fill: #facc15;
    stroke: #ca8a04;
}

.star-button.starred:hover {
    box-shadow: 0 4px 16px rgba(202, 138, 4, 0.40), 0 0 0 1px rgba(234,179,8,0.2);
}

/* ============================================
   SPLIT VIEW STYLES
   ============================================ */
.split-view-container {
    display: flex;
    height: calc(100vh - 200px);
    position: relative;
    z-index: 30;
}

.split-view-listings {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    border-right: 2px solid #e5e7eb;
}

.split-view-map {
    flex: 1;
    position: relative;
}

.split-view-map #map,
.split-view-map #splitMap {
    height: 100%;
    max-height: none;
}

/* Split view listing item */
.split-listing-item {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    align-items: stretch;
}

.listing-card-hover {
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.listing-card-hover:hover {
    transform: translateY(-2px) scale(1.015) !important;
}

.split-listing-item.selected-listing {
    border-left: 4px solid #045093 !important;
    background-color: #eff6ff !important;
}

.split-listing-content {
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 12px;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    align-items: flex-start;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: inherit;
}

.split-listing-item.selected-listing .split-listing-content {
    max-width: calc(100% - 96px);
}

/* Visit button in split view */
.split-listing-visit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #045093;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    align-self: stretch;
    min-width: 80px;
}

.split-listing-visit-btn:hover {
    background: #033d7a;
}

/* Toggle Group */
.toggle-group {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}

.toggle-option {
    padding: 4px 12px;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.toggle-option:not(:last-child) {
    border-right: 1px solid #d1d5db;
}

.toggle-option:hover {
    background: #f3f4f6;
}

.toggle-option.active {
    background: var(--primary-blue);
    color: white;
}

/* Desktop Layout */
@media (min-width: 1024px) {
    .desktop-layout.with-left-filters {
        display: flex;
        gap: 24px;
    }
    
.desktop-filters {
    width: 280px;
    flex-shrink: 0;
}

#desktopFilterPanel.desktop-sidebar {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
}
    
    .desktop-content {
        flex: 1;
        min-width: 0;
    }
    
    #filterPanel.desktop-sidebar {
        display: block !important;
        position: sticky;
        top: 80px;
        height: fit-content;
        max-height: calc(100vh - 100px);
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        background: white;
    }
    
    .listings-2-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .listings-3-col {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #filterPanel.desktop-topbar-compact {
        max-height: calc(100vh - 120px);
    }

    #filterPanel.desktop-topbar-compact #categoryFilters,
    #filterPanel.desktop-topbar-compact #categoryFilters2 {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    #filterPanel.desktop-topbar-compact #categoryFilters button,
    #filterPanel.desktop-topbar-compact #categoryFilters2 button {
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
        white-space: nowrap;
        line-height: 1.4;
    }

    #filterPanel.desktop-topbar-compact .subcategory-tag {
        padding: 3px 8px;
        font-size: 11px;
        margin: 2px;
    }

    #filterPanel.desktop-topbar-compact input[type="text"],
    #filterPanel.desktop-topbar-compact select {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    #filterPanel.desktop-topbar-compact .space-y-2 {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px 16px !important;
    }

    #filterPanel.desktop-topbar-compact .space-y-2 label {
        margin: 0;
    }

    #filterPanel.desktop-topbar-compact label.block {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    #filterPanel.desktop-topbar-compact .space-y-4 {
        gap: 10px !important;
    }

    #filterPanel.desktop-topbar-compact input[type="range"] {
        height: 6px;
    }
}

/* Desktop filters overlay */
.desktop-filters-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 200;
    background: white;
    box-shadow: 4px 0 12px rgba(0,0,0,0.15);
}

#desktopFiltersBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 199;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .split-view-container {
        flex-direction: column;
    }
    
    .split-view-listings {
        border-right: none;
        border-bottom: 2px solid #e5e7eb;
        max-height: 50%;
    }
    
    .map-control-btn span.desktop-only {
        display: none;
    }
}

/* Location Search */
.location-search-container {
    position: relative;
}

.location-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.location-search-result {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.location-search-result:hover {
    background: #f3f4f6;
}

.location-search-result.active {
    background: var(--primary-blue);
    color: white;
}

/* Load More Button */
.load-more-btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 24px auto;
    padding: 12px 24px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.load-more-btn:hover {
    background: #044080;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.load-more-btn:disabled {
    background: #6b7280;
    cursor: not-allowed;
    transform: none;
}

/* Split view filters layout */
.split-view-filters-container {
    display: flex;
    gap: 24px;
    padding: 16px;
}

.split-view-filters-left {
    flex: 0 0 250px;
}

.split-view-filters-right {
    flex: 1;
    min-width: 0;
}

.split-view-filters-left button {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
}

.split-view-filters-left .toggle-group button {
    font-size: 10px !important;
    padding: 4px 8px !important;
}

/* ============================================
   DARK MODE SUPPORT - COMPLETE FIX
   ============================================ */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #e5e5e5;
    }
    
    header {
        background: #2a2a2a !important;
        border-color: #3a3a3a !important;
    }
    
    .bg-white {
        background: #2a2a2a !important;
    }
    
    .bg-gray-50 {
        background: #1a1a1a !important;
    }
    
    .bg-gray-100 {
        background: #3a3a3a !important;
    }
    
    .bg-gray-200 {
        background: #404040 !important;
    }
    
    .text-gray-900 {
        color: #e5e5e5 !important;
    }
    
    .text-gray-700 {
        color: #b0b0b0 !important;
    }
    
    .text-gray-600 {
        color: #999 !important;
    }
    
    .text-gray-500 {
        color: #888 !important;
    }
    
    .text-gray-400 {
        color: #777 !important;
    }
    
    .border-gray-300 {
        border-color: #404040 !important;
    }
    
    .border-gray-200 {
        border-color: #3a3a3a !important;
    }
    
    .shadow-sm,
    .shadow,
    .shadow-lg {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important;
    }
    
    input,
    select,
    textarea {
        background: #2a2a2a !important;
        color: #e5e5e5 !important;
        border-color: #404040 !important;
    }
    
    .hover\:bg-gray-50:hover {
        background: #3a3a3a !important;
    }
    
    .hover\:bg-gray-200:hover {
        background: #4a4a4a !important;
    }
    
    .map-popup {
        background: #2a2a2a;
    }
    
    .map-popup-title {
        color: #4a9fff !important;
    }
    
    .map-popup-tagline,
    .map-popup-details {
        color: #999;
    }
    
    .leaflet-popup-content-wrapper {
        background: #2a2a2a !important;
        color: #e5e5e5 !important;
    }
    
    .leaflet-popup-tip {
        background: #2a2a2a !important;
    }
    
    .map-loading {
        background: #2a2a2a;
        color: #e5e5e5;
    }
    
    .subcategory-tag {
        background: #404040;
        color: #e5e5e5;
    }
    
    .subcategory-tag:hover {
        background: #4a4a4a;
    }
    
    .subcategory-tag.selected {
        background: var(--primary-blue);
        color: white;
    }
    
    .star-button {
        background: rgba(42, 42, 42, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    .star-button.starred {
        background: rgba(234, 179, 8, 0.2) !important;
        border-color: rgba(234, 179, 8, 0.5) !important;
    }
    
    .split-view-listings {
        border-right-color: #404040;
        border-bottom-color: #404040;
    }
    
    #desktopFiltersContainer {
        background: #2a2a2a !important;
        border-color: #404040 !important;
    }
    
    .desktop-filters-overlay {
        background: #2a2a2a !important;
    }
    
    .leaflet-tile {
        filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
    }
    
    .split-listing-visit-btn {
        background: #045093;
        color: white;
    }
    
    .split-listing-visit-btn:hover {
        background: #033d7a;
    }
}

/*
Copyright (C) The Greek Directory, 2025-present. All rights reserved.
This source code is proprietary and no part may not be used, reproduced, or distributed 
without written permission from The Greek Directory. Unauthorized use, copying, modification, 
or distribution of this code can result in legal action to the fullest extent permitted by law.
*/