/* Map Section - Final Fix */
.company-map-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #193B7B;
}

/* 
   DESKTOP DEFAULT STYLES 
   - Full screen cover
   - No dragging
   - No zoom controls
*/
.map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; 
    /* Disable drag interaction on desktop */
    pointer-events: none; 
}

.map-movable-layer {
    width: 100%;
    height: 100%;
    /* Reset transforms and positioning */
    transform: none !important;
    position: absolute;
    top: 0;
    left: 0;
    background: #193B7B;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 18%, #000 82%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 18%, #000 82%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* The Map Image & SVG - Object Fit Cover for Desktop */
.map-image-base,
.map-svg-container {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures it covers the screen without gray/blue bars */
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.map-svg-container svg {
    width: 100%;
    height: 100%;
}

/* Info Card - Desktop */
.map-info-card {
    position: fixed; /* Changed to fixed for easier dynamic positioning relative to viewport */
    top: 50%;
    left: 50%;
    width: 320px; /* Reduced width */
    
    background: rgba(255, 255, 255, 0.1); /* #FFFFFF1A */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Gradient Border Trick */
    border: 1px solid rgba(207, 207, 207, 0.3); /* Fallback */
    
    border-radius: 24px;
    padding: 20px; /* Reduced padding */
    color: #fff;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, top 0.1s, left 0.1s; /* Faster transition for hover movement */
    pointer-events: none; /* Let clicks pass through if it overlaps? Or auto? */
}

.map-info-card.visible {
    opacity: 1;
    visibility: visible;
}

.map-card-id {
    font-size: 32px; /* Reduced size */
    font-weight: 700;
    color: #FFD600;
    margin-bottom: 10px;
    line-height: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.map-card-content h3 {
    font-size: 16px; /* Reduced size */
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
}

#mapCardDesc {
    font-size: 14px; /* Reduced size */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* Hide Zoom Controls Globally */
.map-zoom-controls {
    display: none !important;
}

/* Scroll Hint (Hidden by default) */
.map-scroll-hint {
    display: none;
}

/* Zone Styles - Desktop */
/* Since wrapper has pointer-events: none, we need to re-enable them for the SVG zones if we want hover effects?
   Actually, user said "remove interactive like moving here and there".
   If they still want to click zones, we need pointer-events: auto on .map-svg-container.
*/
.map-svg-container {
    pointer-events: auto; /* Enable clicking on zones */
}

.map-zone-path {
    cursor: pointer;
}

.map-zone-path:is(rect, path),
.map-zone-path > :is(rect, path):first-child {
    transition: fill-opacity 0.2s ease, filter 0.2s ease, stroke-opacity 0.2s ease;
    stroke: #FFFD00;
    stroke-width: 2px;
    stroke-opacity: 0;
    paint-order: stroke;
}
.map-zone-path:hover {
    filter: drop-shadow(0 0 8px #FFFD0099) drop-shadow(0 0 20px #FFFD0066) drop-shadow(0 0 40px #FFFD0033);
}
.map-zone-path.active {
    filter: drop-shadow(0 0 10px #FFFD00B3) drop-shadow(0 0 26px #FFFD0080) drop-shadow(0 0 52px #FFFD0033);
}

.map-zone-path:hover:is(rect, path),
.map-zone-path:hover > :is(rect, path):first-child {
    fill: #FFFD00 !important;
    fill-opacity: 0.12 !important;
    stroke-opacity: 0.65;
}

.map-zone-path.active:is(rect, path),
.map-zone-path.active > :is(rect, path):first-child {
    fill: #FFFD00 !important;
    fill-opacity: 0.16 !important;
    stroke-opacity: 0.8;
}


/* =========================================
   MOBILE / TABLET STYLES (Max Width 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .company-map-section {
        height: 100svh;
        min-height: 100vh;
        display: block; /* Back to block/relative */
        background: #0f1a30;
        overflow: hidden; /* Crop overflow */
        position: relative;
    }

    .map-wrapper {
        display: flex;
        align-items: center; 
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        height: 100%; /* Full height of section */
        width: 100%;
        position: relative;
        scrollbar-width: none;
    }

    .map-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* The Content Layer */
    .map-movable-layer {
        position: relative;
        height: 100%; 
        width: auto; 
        aspect-ratio: 1920/729;
        flex-shrink: 0;
        transform: none !important;
    }

    /* Images inside must fill the calculated layer size */
    .map-image-base,
    .map-svg-container {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: fill; 
    }

    /* Info Card - TABLET/MOBILE DESIGN MATCH */
    .map-info-card {
        /* Position relative to the SECTION, not viewport, to allow scrolling if needed, but here section is 100vh */
        position: absolute !important; 
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        
        width: auto !important; /* Full width minus margins */
        max-width: 420px; /* Limit width on tablets */
        margin: 0 auto; /* Center if max-width hit */
        padding: 24px;
        
        /* Glassmorphism matches image */
        background: rgba(30, 41, 59, 0.6); /* Slightly darker blue */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 24px; /* Large rounded corners */
        
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        z-index: 100;
        transform: none !important;
        min-height: auto;
        max-height: min(45svh, 420px);
        overflow: auto;
    }
    
    /* Mobile Override for very small screens */
    @media (max-width: 600px) {
        .map-info-card {
            width: auto !important;
            left: 16px !important;
            right: 16px !important;
            bottom: calc(16px + env(safe-area-inset-bottom)) !important;
            max-width: none;
        }
    }

    .map-card-id {
        font-size: 32px; /* Adjusted size */
        font-weight: 700;
        margin-bottom: 12px;
        padding-bottom: 12px;
        color: #FFD600; /* Yellow */
        display: inline-block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        line-height: 1;
    }
    
    .map-card-content h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #fff;
        line-height: 1.3;
    }
    
    #mapCardDesc {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Scroll Hint - Positioned ABOVE the card centered */
    .map-scroll-hint {
        position: absolute;
        top: calc(16px + env(safe-area-inset-top));
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        z-index: 50;
        pointer-events: none;
        background: transparent;
        padding: 0;
        border-radius: 0;
        backdrop-filter: none;
        width: max-content;
    }
    
    /* Adjust hint position for small screens dynamically if possible, or stick to safe area */
    @media (max-width: 600px) {
        .map-scroll-hint {
             top: calc(12px + env(safe-area-inset-top));
        }
    }

    .map-scroll-hint span {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-weight: 400;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        max-width: 200px;
        line-height: 1.2;
    }
    .map-scroll-hint svg {
        width: 28px;
        height: 28px;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }

    /* Disable fancy effects on mobile */
    .map-zone-path.active {
        filter: none !important;
        fill-opacity: 0.5 !important;
    }
}