/* Sitemap Popup Styles - 3D Interactive Map with Admin-Controllable CSS Custom Properties */

/* Admin-Controllable CSS Custom Properties */
:root {
    /* Timing Controls */
    --sitemap-auto-start-delay: 300ms; /* sitemap-style-timing-auto-start-delay */
    --sitemap-home-tooltip-pause: 1500ms; /* sitemap-style-timing-home-tooltip-pause */
    --sitemap-node-display-time: 2500ms; /* sitemap-style-timing-node-display-time */
    --sitemap-logo-transition-time: 1.5s; /* sitemap-style-timing-logo-transition-time */
    --sitemap-logo-transform-duration: 800ms; /* sitemap-style-timing-logo-transform-duration */
    
    /* Color Controls */
    --sitemap-home-color: #2563eb; /* sitemap-style-color-node-home */
    --sitemap-about-color: #7c3aed; /* sitemap-style-color-node-about */
    --sitemap-services-color: #06b6d4; /* sitemap-style-color-node-services */
    --sitemap-products-color: #10b981; /* sitemap-style-color-node-products */
    --sitemap-blog-color: #f59e0b; /* sitemap-style-color-node-blog */
    --sitemap-contact-color: #ef4444; /* sitemap-style-color-node-contact */
    --sitemap-support-color: #8b5cf6; /* sitemap-style-color-node-support */
    --sitemap-faq-color: #14b8a6; /* sitemap-style-color-node-faq */
    
    /* Animation Controls */
    --sitemap-animation-timing: cubic-bezier(0.4, 0, 0.2, 1); /* sitemap-style-animation-timing-function */
    --sitemap-tooltip-fade-duration: 0.4s; /* sitemap-style-animation-tooltip-fade-duration */
    
    /* Layout Controls */
    --sitemap-center-tooltip-top: 144px; /* sitemap-style-layout-center-tooltip-top */
    --sitemap-center-tooltip-left: 20px; /* sitemap-style-layout-center-tooltip-left */
    --sitemap-center-tooltip-width: 320px; /* sitemap-style-layout-center-tooltip-width */
    --sitemap-header-tooltip-left: 38px; /* sitemap-style-layout-header-tooltip-left */
    --sitemap-header-tooltip-right: 38px; /* sitemap-style-layout-header-tooltip-right */
    --sitemap-header-tooltip-vertical-offset: 48px; /* sitemap-style-layout-header-tooltip-vertical-offset */
    
    /* Overlay Controls */
    --sitemap-overlay-background: rgba(15, 23, 42, 0.9); /* sitemap-style-overlay-background-color */
    --sitemap-overlay-blur: blur(15px); /* sitemap-style-overlay-backdrop-blur */
    --sitemap-overlay-zindex: 10000; /* sitemap-style-overlay-z-index */
    --sitemap-overlay-perspective: 1200px; /* sitemap-style-overlay-perspective */
    
    /* Container Controls */
    --sitemap-container-max-width-vw: 95vw; /* sitemap-style-container-max-width-viewport */
    --sitemap-container-max-height-vh: 90vh; /* sitemap-style-container-max-height-viewport */
    --sitemap-container-max-width-px: 1200px; /* sitemap-style-container-max-width-pixels */
    --sitemap-container-margin-top: -50px; /* sitemap-style-container-margin-top */
    
    /* Card Controls */
    --sitemap-card-background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #334155 100%); /* sitemap-style-card-background-gradient */
    --sitemap-card-border-radius: 28px; /* sitemap-style-card-border-radius */
    --sitemap-card-border-color: rgba(6, 182, 212, 0.2); /* sitemap-style-card-border-color */
    --sitemap-card-border-width: 2px; /* sitemap-style-card-border-width */
    
    /* Close Button Controls */
    --sitemap-close-button-size: 55px; /* sitemap-style-close-button-size */
    --sitemap-close-button-background: radial-gradient(circle, #dc2626 0%, #991b1b 100%); /* sitemap-style-close-button-background */
    --sitemap-close-button-border-radius: 50%; /* sitemap-style-close-button-border-radius */
    --sitemap-close-button-font-size: 22px; /* sitemap-style-close-button-font-size */
    
    /* Header Controls */
    --sitemap-header-padding: 30px 40px 20px; /* sitemap-style-header-padding */
    --sitemap-header-background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%); /* sitemap-style-header-background-gradient */
    --sitemap-header-border-bottom: 3px solid #06b6d4; /* sitemap-style-header-border-bottom */
    
    /* Icon Controls */
    --sitemap-icon-size: 90px; /* sitemap-style-icon-size */
    --sitemap-icon-background: linear-gradient(135deg, #06b6d4 0%, #2563eb 50%, #7c3aed 100%); /* sitemap-style-icon-background-gradient */
    --sitemap-icon-border-radius: 25px; /* sitemap-style-icon-border-radius */
    --sitemap-icon-font-size: 40px; /* sitemap-style-icon-font-size */
    
    /* Typography Controls */
    --sitemap-title-font-size: 32px; /* sitemap-style-title-font-size */
    --sitemap-title-font-weight: 900; /* sitemap-style-title-font-weight */
    --sitemap-title-color: #f1f5f9; /* sitemap-style-title-color */
    --sitemap-subtitle-font-size: 18px; /* sitemap-style-subtitle-font-size */
    --sitemap-subtitle-color: #cbd5e1; /* sitemap-style-subtitle-color */
    
    /* Map Container Controls */
    --sitemap-map-height: 450px; /* sitemap-style-map-height */
    --sitemap-map-background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%); /* sitemap-style-map-background-gradient */
    --sitemap-map-border-radius: 20px; /* sitemap-style-map-border-radius */
    --sitemap-map-border: 2px solid rgba(6, 182, 212, 0.3); /* sitemap-style-map-border */
    
    /* Node Controls */
    --sitemap-node-size: 80px; /* sitemap-style-node-size */
    --sitemap-node-icon-size: 50px; /* sitemap-style-node-icon-size */
    --sitemap-node-icon-background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); /* sitemap-style-node-icon-background */
    --sitemap-node-icon-font-size: 20px; /* sitemap-style-node-icon-font-size */
    --sitemap-node-label-font-size: 11px; /* sitemap-style-node-label-font-size */
    --sitemap-node-label-color: #94a3b8; /* sitemap-style-node-label-color */
    
    /* Logo Traveler Controls */
    --sitemap-logo-traveler-size: 50px; /* sitemap-style-logo-traveler-size */
    --sitemap-logo-traveler-border: 3px solid rgba(6, 182, 212, 0.5); /* sitemap-style-logo-traveler-border */
    
    /* Legend Controls */
    --sitemap-legend-background: rgba(15, 23, 42, 0.3); /* sitemap-style-legend-background */
    --sitemap-legend-border-radius: 12px; /* sitemap-style-legend-border-radius */
    --sitemap-legend-padding: 15px; /* sitemap-style-legend-padding */
    --sitemap-legend-title-font-size: 16px; /* sitemap-style-legend-title-font-size */
    --sitemap-legend-title-color: #06b6d4; /* sitemap-style-legend-title-color */
    --sitemap-legend-text-font-size: 14px; /* sitemap-style-legend-text-font-size */
    --sitemap-legend-text-color: #94a3b8; /* sitemap-style-legend-text-color */
}

/* Overlay */
.sitemap-popup-overlay {
    position: fixed; /* sitemap-style-overlay-position */
    top: 0; /* sitemap-style-overlay-top */
    left: 0; /* sitemap-style-overlay-left */
    width: 100%; /* sitemap-style-overlay-width */
    height: 100%; /* sitemap-style-overlay-height */
    background: var(--sitemap-overlay-background); /* sitemap-style-overlay-background */
    backdrop-filter: var(--sitemap-overlay-blur); /* sitemap-style-overlay-backdrop-filter */
    display: none; /* sitemap-style-overlay-display */
    justify-content: center; /* sitemap-style-overlay-justify-content */
    align-items: center; /* sitemap-style-overlay-align-items */
    z-index: var(--sitemap-overlay-zindex); /* sitemap-style-overlay-z-index */
    opacity: 0; /* sitemap-style-overlay-opacity */
    transition: all 0.4s var(--sitemap-animation-timing); /* sitemap-style-overlay-transition */
    perspective: var(--sitemap-overlay-perspective); /* sitemap-style-overlay-perspective */
}

.sitemap-popup-overlay.active {
    opacity: 1; /* sitemap-style-overlay-active-opacity */
}

/* Main Container - Larger for map display */
.sitemap-popup-container {
    max-width: var(--sitemap-container-max-width-vw); /* sitemap-style-container-max-width-vw */
    max-height: var(--sitemap-container-max-height-vh); /* sitemap-style-container-max-height-vh */
    width: 100%; /* sitemap-style-container-width */
    max-width: var(--sitemap-container-max-width-px); /* sitemap-style-container-max-width-px */
    margin-top: var(--sitemap-container-margin-top); /* sitemap-style-container-margin-top */
    transform: translateZ(-150px) rotateX(20deg) rotateY(10deg) scale(0.7); /* sitemap-style-container-transform-initial */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* sitemap-style-container-transition */
    transform-style: preserve-3d; /* sitemap-style-container-transform-style */
}

.sitemap-popup-overlay.active .sitemap-popup-container {
    transform: translateZ(0) rotateX(0deg) rotateY(0deg) scale(1); /* sitemap-style-container-transform-active */
}

/* 3D Wrapper */
.sitemap-popup-3d-wrapper {
    transform-style: preserve-3d;
    position: relative;
}

/* Main Card */
.sitemap-popup-card {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    border-radius: 28px;
    box-shadow: 
        0 35px 80px -15px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(6, 182, 212, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    height: auto;
    transform-style: preserve-3d;
    border: 2px solid rgba(6, 182, 212, 0.2);
}

.sitemap-popup-card::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: linear-gradient(90deg, #06b6d4 0%, #2563eb 25%, #7c3aed 50%, #ec4899 75%, #06b6d4 100%);
    border-radius: 32px;
    z-index: -1;
    animation: borderGlow 8s linear infinite;
}

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

.sitemap-popup-card::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: conic-gradient(from 0deg, transparent, rgba(6, 182, 212, 0.1), transparent, rgba(37, 99, 235, 0.1), transparent);
    pointer-events: none;
    animation: mapShimmer 12s ease-in-out infinite;
}

@keyframes mapShimmer {
    0%, 100% { opacity: 0.2; transform: rotate(0deg) scale(1); }
    50% { opacity: 0.5; transform: rotate(0deg) scale(1.1); }
}

/* Close Button */
.sitemap-popup-close {
    position: absolute; /* sitemap-style-close-position */
    top: 15px; /* sitemap-style-close-top */
    right: 15px; /* sitemap-style-close-right */
    width: var(--sitemap-close-button-size); /* sitemap-style-close-width */
    height: var(--sitemap-close-button-size); /* sitemap-style-close-height */
    border: none; /* sitemap-style-close-border */
    background: var(--sitemap-close-button-background) !important; /* sitemap-style-close-background */
    border-radius: var(--sitemap-close-button-border-radius); /* sitemap-style-close-border-radius */
    color: white; /* sitemap-style-close-color */
    font-size: var(--sitemap-close-button-font-size); /* sitemap-style-close-font-size */
    font-weight: bold; /* sitemap-style-close-font-weight */
    cursor: pointer; /* sitemap-style-close-cursor */
    z-index: 1000; /* sitemap-style-close-z-index */
    display: flex; /* sitemap-style-close-display */
    align-items: center; /* sitemap-style-close-align-items */
    justify-content: center; /* sitemap-style-close-justify-content */
    transition: all 0.3s var(--sitemap-animation-timing); /* sitemap-style-close-transition */
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4); /* sitemap-style-close-box-shadow */
}

.sitemap-popup-close:hover {
    transform: scale(1.15) rotate(90deg); /* sitemap-style-close-hover-transform */
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.6); /* sitemap-style-close-hover-box-shadow */
}

/* Header Section */
.sitemap-popup-header {
    text-align: center; /* sitemap-style-header-text-align */
    padding: var(--sitemap-header-padding); /* sitemap-style-header-padding */
    position: relative; /* sitemap-style-header-position */
    background: var(--sitemap-header-background); /* sitemap-style-header-background */
    border-bottom: var(--sitemap-header-border-bottom); /* sitemap-style-header-border-bottom */
}

/* Social Corner */
.sitemap-popup-social-corner {
    position: absolute; /* sitemap-style-social-corner-position */
    top: 25px; /* sitemap-style-social-corner-top */
    left: 25px; /* sitemap-style-social-corner-left */
    z-index: 10; /* sitemap-style-social-corner-z-index */
}

.sitemap-social-links {
    display: flex; /* sitemap-style-social-links-display */
    gap: 15px; /* sitemap-style-social-links-gap */
}

.sitemap-social-link {
    width: 45px; /* sitemap-style-social-link-width */
    height: 45px; /* sitemap-style-social-link-height */
    background: rgba(6, 182, 212, 0.2); /* sitemap-style-social-link-background */
    border-radius: 15px; /* sitemap-style-social-link-border-radius */
    display: flex; /* sitemap-style-social-link-display */
    align-items: center; /* sitemap-style-social-link-align-items */
    justify-content: center; /* sitemap-style-social-link-justify-content */
    transition: all 0.3s var(--sitemap-animation-timing); /* sitemap-style-social-link-transition */
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2); /* sitemap-style-social-link-box-shadow */
    backdrop-filter: blur(10px); /* sitemap-style-social-link-backdrop-filter */
    border: 1px solid rgba(6, 182, 212, 0.3); /* sitemap-style-social-link-border */
}

.sitemap-social-link:hover {
    transform: translateY(-5px) scale(1.1) rotateY(15deg); /* sitemap-style-social-link-hover-transform */
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.4); /* sitemap-style-social-link-hover-box-shadow */
    background: rgba(6, 182, 212, 0.3); /* sitemap-style-social-link-hover-background */
}

.sitemap-social-icon {
    width: 22px; /* sitemap-style-social-icon-width */
    height: 22px; /* sitemap-style-social-icon-height */
    object-fit: contain; /* sitemap-style-social-icon-object-fit */
}

/* Header Icon */
.sitemap-popup-icon-container {
    margin-bottom: 25px; /* sitemap-style-icon-container-margin-bottom */
}

.sitemap-popup-icon-3d {
    width: var(--sitemap-icon-size); /* sitemap-style-icon-3d-width */
    height: var(--sitemap-icon-size); /* sitemap-style-icon-3d-height */
    background: var(--sitemap-icon-background); /* sitemap-style-icon-3d-background */
    border-radius: var(--sitemap-icon-border-radius); /* sitemap-style-icon-3d-border-radius */
    margin: 0 auto; /* sitemap-style-icon-3d-margin */
    display: flex; /* sitemap-style-icon-3d-display */
    align-items: center; /* sitemap-style-icon-3d-align-items */
    justify-content: center; /* sitemap-style-icon-3d-justify-content */
    color: white; /* sitemap-style-icon-3d-color */
    font-size: var(--sitemap-icon-font-size); /* sitemap-style-icon-3d-font-size */
    box-shadow: 
        0 30px 60px rgba(6, 182, 212, 0.4),
        0 0 0 4px rgba(255, 255, 255, 0.1),
        inset 0 3px 0 rgba(255, 255, 255, 0.3); /* sitemap-style-icon-3d-box-shadow */
    transform: perspective(600px) rotateX(20deg) rotateY(-10deg); /* sitemap-style-icon-3d-transform */
    animation: mapIconFloat 6s ease-in-out infinite; /* sitemap-style-icon-3d-animation */
    border: 3px solid rgba(255, 255, 255, 0.2); /* sitemap-style-icon-3d-border */
}

@keyframes mapIconFloat {
    0%, 100% { transform: perspective(600px) rotateX(20deg) rotateY(-20deg) translateY(-8px); }
    50% { transform: perspective(600px) rotateX(20deg) rotateY(20deg) translateY(-15px); }
}

/* Typography */
.sitemap-popup-title {
    font-size: var(--sitemap-title-font-size); /* sitemap-style-title-font-size */
    font-weight: var(--sitemap-title-font-weight); /* sitemap-style-title-font-weight */
    color: var(--sitemap-title-color); /* sitemap-style-title-color */
    margin-bottom: 15px; /* sitemap-style-title-margin-bottom */
    background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); /* sitemap-style-title-background-gradient */
    -webkit-background-clip: text; /* sitemap-style-title-webkit-background-clip */
    -webkit-text-fill-color: transparent; /* sitemap-style-title-webkit-text-fill-color */
    background-clip: text; /* sitemap-style-title-background-clip */
    text-shadow: 0 2px 10px rgba(6, 182, 212, 0.3); /* sitemap-style-title-text-shadow */
}

.sitemap-popup-subtitle {
    font-size: var(--sitemap-subtitle-font-size); /* sitemap-style-subtitle-font-size */
    color: var(--sitemap-subtitle-color); /* sitemap-style-subtitle-color */
    line-height: 1.6; /* sitemap-style-subtitle-line-height */
    max-width: 500px; /* sitemap-style-subtitle-max-width */
    margin: 0 auto; /* sitemap-style-subtitle-margin */
}

/* Content Section */
.sitemap-popup-content {
    padding: 20px 40px 30px; /* sitemap-style-content-padding */
}

/* 3D Map Container */
.sitemap-3d-map-container {
    position: relative; /* sitemap-style-map-container-position */
    width: 100%; /* sitemap-style-map-container-width */
    height: var(--sitemap-map-height); /* sitemap-style-map-container-height */
    background: var(--sitemap-map-background); /* sitemap-style-map-container-background */
    border-radius: var(--sitemap-map-border-radius); /* sitemap-style-map-container-border-radius */
    border: var(--sitemap-map-border); /* sitemap-style-map-container-border */
    overflow: hidden; /* sitemap-style-map-container-overflow */
    margin-bottom: 25px; /* sitemap-style-map-container-margin-bottom */
    box-shadow: 
        inset 0 2px 10px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(6, 182, 212, 0.2); /* sitemap-style-map-container-box-shadow */
}

/* Map Background Grid */
.sitemap-map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sitemap-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Connection Lines */
.sitemap-connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.sitemap-connection-lines::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 2px;
    height: 55%;
    background: linear-gradient(to bottom, #06b6d4, transparent);
    transform: translateX(-50%);
}

.sitemap-connection-lines::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 20%;
    width: 60%;
    height: 2px;
    background: linear-gradient(to right, #06b6d4, transparent, #06b6d4);
    transform: translateY(-50%);
}

/* PDL Logo Traveler */
.sitemap-logo-traveler {
    position: absolute; /* sitemap-style-logo-traveler-position */
    left: 50%; /* sitemap-style-logo-traveler-left */
    top: 20%; /* sitemap-style-logo-traveler-top */
    width: var(--sitemap-logo-traveler-size); /* sitemap-style-logo-traveler-width */
    height: var(--sitemap-logo-traveler-size); /* sitemap-style-logo-traveler-height */
    z-index: 10; /* sitemap-style-logo-traveler-z-index */
    transform: translate(-50%, -50%); /* sitemap-style-logo-traveler-transform */
    filter: drop-shadow(0 8px 20px rgba(6, 182, 212, 0.6)); /* sitemap-style-logo-traveler-filter */
    animation: logoGlow 3s ease-in-out infinite; /* sitemap-style-logo-traveler-animation */
}

@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 8px 20px rgba(6, 182, 212, 0.4)); }
    50% { filter: drop-shadow(0 12px 30px rgba(6, 182, 212, 0.8)); }
}

.sitemap-traveler-icon {
    width: 100%; /* sitemap-style-traveler-icon-width */
    height: 100%; /* sitemap-style-traveler-icon-height */
    object-fit: contain; /* sitemap-style-traveler-icon-object-fit */
    border-radius: 50%; /* sitemap-style-traveler-icon-border-radius */
    border: var(--sitemap-logo-traveler-border); /* sitemap-style-traveler-icon-border */
    background: rgba(255, 255, 255, 0.1); /* sitemap-style-traveler-icon-background */
    animation: logoRotate 8s linear infinite; /* sitemap-style-traveler-icon-animation */
}

@keyframes logoRotate {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Map Nodes */
.sitemap-nodes-container {
    position: absolute; /* sitemap-style-nodes-container-position */
    top: 0; /* sitemap-style-nodes-container-top */
    left: 0; /* sitemap-style-nodes-container-left */
    width: 100%; /* sitemap-style-nodes-container-width */
    height: 100%; /* sitemap-style-nodes-container-height */
    z-index: 5; /* sitemap-style-nodes-container-z-index */
}

.sitemap-node {
    position: absolute; /* sitemap-style-node-position */
    width: var(--sitemap-node-size); /* sitemap-style-node-width */
    height: var(--sitemap-node-size); /* sitemap-style-node-height */
    transform: translate(-50%, -50%); /* sitemap-style-node-transform */
    display: flex; /* sitemap-style-node-display */
    flex-direction: column; /* sitemap-style-node-flex-direction */
    align-items: center; /* sitemap-style-node-align-items */
    justify-content: center; /* sitemap-style-node-justify-content */
    transition: all 0.3s var(--sitemap-animation-timing); /* sitemap-style-node-transition */
    cursor: pointer; /* sitemap-style-node-cursor */
}

.sitemap-node-icon {
    width: var(--sitemap-node-icon-size); /* sitemap-style-node-icon-width */
    height: var(--sitemap-node-icon-size); /* sitemap-style-node-icon-height */
    background: var(--sitemap-node-icon-background); /* sitemap-style-node-icon-background */
    border-radius: 50%; /* sitemap-style-node-icon-border-radius */
    display: flex; /* sitemap-style-node-icon-display */
    align-items: center; /* sitemap-style-node-icon-align-items */
    justify-content: center; /* sitemap-style-node-icon-justify-content */
    font-size: var(--sitemap-node-icon-font-size); /* sitemap-style-node-icon-font-size */
    margin-bottom: 8px; /* sitemap-style-node-icon-margin-bottom */
    border: 2px solid rgba(6, 182, 212, 0.3); /* sitemap-style-node-icon-border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* sitemap-style-node-icon-box-shadow */
    transition: all 0.3s ease; /* sitemap-style-node-icon-transition */
}

.sitemap-node-label {
    font-size: var(--sitemap-node-label-font-size); /* sitemap-style-node-label-font-size */
    color: var(--sitemap-node-label-color); /* sitemap-style-node-label-color */
    font-weight: 600; /* sitemap-style-node-label-font-weight */
    text-align: center; /* sitemap-style-node-label-text-align */
    background: rgba(15, 23, 42, 0.8); /* sitemap-style-node-label-background */
    padding: 2px 8px; /* sitemap-style-node-label-padding */
    border-radius: 8px; /* sitemap-style-node-label-border-radius */
    border: 1px solid rgba(6, 182, 212, 0.2); /* sitemap-style-node-label-border */
}

.sitemap-node:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.sitemap-node:hover .sitemap-node-icon {
    background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
    border-color: #06b6d4;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
    transform: rotateY(15deg);
}

.sitemap-node:hover .sitemap-node-label {
    color: #f1f5f9;
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
}

.sitemap-node.highlighted {
    animation: nodeHighlight 2s ease-in-out;
}

@keyframes nodeHighlight {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

.sitemap-node.highlighted .sitemap-node-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: #f59e0b;
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.6);
}



/* Map Legend */
.sitemap-legend {
    text-align: center; /* sitemap-style-legend-text-align */
    background: var(--sitemap-legend-background); /* sitemap-style-legend-background */
    border-radius: var(--sitemap-legend-border-radius); /* sitemap-style-legend-border-radius */
    padding: var(--sitemap-legend-padding); /* sitemap-style-legend-padding */
    border: 1px solid rgba(6, 182, 212, 0.2); /* sitemap-style-legend-border */
    margin-top: 20px; /* sitemap-style-legend-margin-top */
}

.sitemap-legend-title {
    font-size: var(--sitemap-legend-title-font-size); /* sitemap-style-legend-title-font-size */
    font-weight: 700; /* sitemap-style-legend-title-font-weight */
    color: var(--sitemap-legend-title-color); /* sitemap-style-legend-title-color */
    margin-bottom: 8px; /* sitemap-style-legend-title-margin-bottom */
}

.sitemap-legend-text {
    font-size: var(--sitemap-legend-text-font-size); /* sitemap-style-legend-text-font-size */
    color: var(--sitemap-legend-text-color); /* sitemap-style-legend-text-color */
    line-height: 1.5; /* sitemap-style-legend-text-line-height */
    margin: 0; /* sitemap-style-legend-text-margin */
}

/* Responsive Design */
@media (max-width: 768px) {
    .sitemap-popup-container {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .sitemap-popup-header {
        padding: 25px 20px 15px;
    }
    
    .sitemap-popup-content {
        padding: 15px 20px 20px;
    }
    
    .sitemap-3d-map-container {
        height: 350px;
    }
    
    .sitemap-header-tooltip {
        width: 220px;
        padding: 15px;
    }
    
    .sitemap-header-tooltip.tooltip-left {
        left: var(--sitemap-header-tooltip-left);
    }
    
    .sitemap-header-tooltip.tooltip-right {
        right: var(--sitemap-header-tooltip-right);
    }
}

/* Dynamic Header Tooltip */
.sitemap-header-tooltip {
    position: absolute;
    top: calc(50% + var(--sitemap-header-tooltip-vertical-offset));
    transform: translateY(-50%);
    width: 280px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    border-radius: 15px;
    padding: 20px;
    border: 2px solid rgba(6, 182, 212, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 15;
    backdrop-filter: blur(10px);
}

.sitemap-header-tooltip.tooltip-left {
    left: var(--sitemap-header-tooltip-left);
    transform: translateY(-50%) translateX(0);
}

.sitemap-header-tooltip.tooltip-right {
    right: var(--sitemap-header-tooltip-right);
    transform: translateY(-50%) translateX(0);
}

.sitemap-tooltip-content {
    text-align: left;
}

.sitemap-tooltip-title {
    font-size: 18px;
    font-weight: 700;
    color: #06b6d4;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sitemap-tooltip-text {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.5;
    margin: 0;
}

/* Center Map Tooltip */
.sitemap-center-tooltip {
    position: absolute;
    top: var(--sitemap-center-tooltip-top);
    left: var(--sitemap-center-tooltip-left);
    width: var(--sitemap-center-tooltip-width);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    border-radius: 20px;
    padding: 25px;
    border: 3px solid rgba(6, 182, 212, 0.6);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    backdrop-filter: blur(15px);
}

.sitemap-center-tooltip-content {
    text-align: left;
}

.sitemap-center-tooltip-title {
    font-size: 20px;
    font-weight: bold;
    color: #06b6d4;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
    text-align: center;
}

.sitemap-center-tooltip-text {
    font-size: 15px;
    color: #e2e8f0;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.sitemap-center-tooltip-close {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    opacity: 0.8;
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 768px) {
    :root {
        --sitemap-center-tooltip-width: 280px;
        --sitemap-center-tooltip-top: 139px;
        --sitemap-center-tooltip-left: 15px;
        --sitemap-header-tooltip-left: 28px;
        --sitemap-header-tooltip-right: 28px;
    }
    
    .sitemap-center-tooltip {
        width: var(--sitemap-center-tooltip-width);
        padding: 20px;
        top: var(--sitemap-center-tooltip-top);
        left: var(--sitemap-center-tooltip-left);
    }
    
    .sitemap-center-tooltip-title {
        font-size: 18px;
    }
    
    .sitemap-center-tooltip-text {
        font-size: 14px;
    }
}