/* World Map Custom Styles - iOS Dark Theme with Blue Ocean */

/* Leaflet Map Customization - Lighter Dark Theme (softer, less black) */
.leaflet-container {
    background: #1a3a52 !important; /* Lighter dark blue ocean - softer than pure dark */
    font-family: 'Inter', sans-serif !important;
}

/* Very subtle gradient overlay */
.leaflet-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(26, 58, 82, 0) 0%,
        rgba(20, 45, 65, 0.2) 50%,
        rgba(15, 35, 50, 0.3) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Make map tiles significantly brighter - lighter dark theme */
.leaflet-tile-container img {
    filter: brightness(1.4) saturate(1.15) contrast(0.95);
}

/* Ensure map tiles are above the ocean overlay */
.leaflet-tile-pane {
    z-index: 2 !important;
}

/* Ensure GeoJSON layers are above tiles */
.leaflet-overlay-pane {
    z-index: 3 !important;
}

/* Ensure markers are on top */
.leaflet-marker-pane {
    z-index: 6 !important;
}

/* Ensure popups are on top */
.leaflet-popup-pane {
    z-index: 7 !important;
}

/* Country polygon enhancements */
.leaflet-interactive {
    transition: all 0.3s ease;
    outline: none !important;
}

/* Remove blue selection box on click */
.leaflet-interactive:focus {
    outline: none !important;
}

/* Remove any path outlines */
path.leaflet-interactive {
    outline: none !important;
}

/* Add glow effect to visited countries - enhanced for dark theme */
.leaflet-interactive[fill="#FFD700"] {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

/* Country highlighted animation - prominent on dark theme */
.country-highlighted {
    animation: countryPulse 2s ease-in-out infinite;
}

@keyframes countryPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(255, 165, 0, 1));
    }
}

/* City Marker Styles */
.city-marker {
    background: transparent;
    border: none;
}

.city-marker-inner {
    position: relative;
    width: 24px;
    height: 24px;
}

.city-marker-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: 2px solid #0a0a0a;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 20px rgba(255, 215, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.city-marker-pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s ease-out infinite;
    z-index: 1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* City Tooltip Styles */
.city-tooltip {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    color: #FFD700 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.city-tooltip::before {
    border-top-color: rgba(255, 215, 0, 0.3) !important;
}

/* City Popup Styles */
.leaflet-popup.city-popup .leaflet-popup-content-wrapper {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.2) !important;
}

.leaflet-popup.city-popup .leaflet-popup-content {
    margin: 0 !important;
    padding: 16px !important;
    font-family: 'Inter', sans-serif !important;
    color: white !important;
}

.leaflet-popup.city-popup .leaflet-popup-tip {
    background: rgba(26, 26, 26, 0.95) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

.city-popup-content {
    min-width: 200px;
}

.city-popup-content .material-icons {
    font-size: 14px;
}

/* City Popup Close Button */
.leaflet-popup.city-popup .leaflet-popup-close-button {
    color: #FFD700 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    padding: 8px !important;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.leaflet-popup.city-popup .leaflet-popup-close-button:hover {
    opacity: 1;
    color: #FFA500 !important;
}

/* Custom Leaflet Controls - Glassmorphism Style */
.leaflet-control-zoom {
    border: none !important;
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        0 0 20px rgba(255, 215, 0, 0.2) !important;
}

.leaflet-control-zoom a {
    background: rgba(26, 26, 26, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    color: #FFD700 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 26px !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.leaflet-control-zoom a:hover {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #0a0a0a !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.leaflet-control-zoom a:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom: none !important;
}

.leaflet-control-zoom a:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Attribution Control - Glassmorphism */
.leaflet-control-attribution {
    background: rgba(26, 26, 26, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        0 0 15px rgba(255, 215, 0, 0.15) !important;
}

.leaflet-control-attribution a {
    color: #FFD700 !important;
}

/* Ensure country layers are above the blue overlay */
.leaflet-overlay-pane {
    z-index: 400 !important;
}

/* Country Styles - iOS-inspired with modern effects */
.country-layer {
    fill-opacity: 0.7;
    stroke: #666;
    stroke-width: 1;
    stroke-opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.country-layer:hover {
    fill-opacity: 0.9;
    stroke: #FFD700;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

.country-visited {
    fill: #FFD700 !important;
    fill-opacity: 0.75 !important;
    stroke: #B8860B !important;
    stroke-width: 2 !important;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}

.country-visited:hover {
    fill: #FFA500 !important;
    fill-opacity: 0.9 !important;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5));
}

.country-not-visited {
    fill: #404040 !important;
    fill-opacity: 0.5 !important;
}

.country-highlighted {
    fill: #FFA500 !important;
    fill-opacity: 0.9 !important;
    stroke: #FFD700 !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

/* Custom Popup Styles - Glassmorphism */
.leaflet-popup-content-wrapper {
    background: rgba(26, 26, 26, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 215, 0, 0.1) !important;
    color: #fff !important;
}

.leaflet-popup-content {
    margin: 16px !important;
    font-family: 'Inter', sans-serif !important;
}

.leaflet-popup-tip {
    background: rgba(26, 26, 26, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-top: none !important;
    border-right: none !important;
}

.leaflet-popup-close-button {
    color: #FFD700 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 8px !important;
    transition: all 0.2s ease !important;
}

.leaflet-popup-close-button:hover {
    color: #FFA500 !important;
    transform: scale(1.1);
}

/* Custom Tooltip Styles - Glassmorphism */
.leaflet-tooltip {
    background: rgba(26, 26, 26, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 10px !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 215, 0, 0.1) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
}

.leaflet-tooltip-top:before {
    border-top-color: rgba(255, 215, 0, 0.3) !important;
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: rgba(255, 215, 0, 0.3) !important;
}

.leaflet-tooltip-left:before {
    border-left-color: rgba(255, 215, 0, 0.3) !important;
}

.leaflet-tooltip-right:before {
    border-right-color: rgba(255, 215, 0, 0.3) !important;
}

/* Map Tiles Custom Filter - iOS Dark Style with Blue Ocean */
.leaflet-tile-pane {
    filter: brightness(0.75) contrast(1.1) saturate(1.4);
}

/* Blue tint overlay for ocean areas */
.map-tiles-dark {
    opacity: 1;
}

/* Add blue ocean overlay */
.leaflet-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(15, 45, 90, 0.15) 0%,
        rgba(20, 60, 120, 0.2) 50%,
        rgba(10, 40, 80, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* Ensure tile labels are visible and styled */
.leaflet-tile-container {
    mix-blend-mode: normal;
}

/* Make map labels more visible on dark background */
.leaflet-tile-pane img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Custom Search Results - Glassmorphism */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.15);
}

.search-result-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-result-item:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateX(4px);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-name {
    color: #fff;
    font-weight: 500;
}

.search-result-region {
    color: #FFD700;
    font-size: 12px;
    margin-top: 2px;
}

/* Loading Animation */
.map-loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Custom Scrollbar for Search Results - Modern Style */
.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: rgba(64, 64, 64, 0.3);
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .leaflet-control-zoom {
        margin-right: 10px !important;
        margin-top: 10px !important;
    }
    
    .leaflet-control-attribution {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }
    
    .leaflet-popup-content-wrapper {
        max-width: 250px !important;
    }
    
    .country-layer:hover {
        stroke-width: 3;
    }
}

/* Accessibility */
.leaflet-container:focus {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .country-layer {
        stroke-width: 2 !important;
    }
    
    .country-visited {
        stroke-width: 3 !important;
    }
    
    .leaflet-popup-content-wrapper {
        border-width: 3px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .country-layer,
    .leaflet-control-zoom a {
        transition: none !important;
    }
    
    .map-loading {
        animation: none !important;
    }
}

/* Print styles */
@media print {
    .leaflet-control-zoom,
    .leaflet-control-attribution {
        display: none !important;
    }
    
    .leaflet-container {
        background: white !important;
    }
    
    .country-layer {
        stroke: #000 !important;
    }
    
    .country-visited {
        fill: #666 !important;
    }
}