* {
    box-sizing: border-box;
}
/* Custom styles for the application */
        body {
            font-family: 'Poppins', sans-serif;
            overflow: hidden; /* Prevent body scroll */
        }
        
        #map {
            height: 100%;
            width: 100%;
            cursor: crosshair;
        }
        
        /* Styling for the pins on the map */
        .pin-icon {
            background: #3B82F6;
            border: 3px solid white;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }
        
        .pin-icon.start {
            background: #10B981;
        }
        
        .pin-icon.start.flag {
            font-size: 18px;
        }
        
        .pin-icon.selected {
            border-color: #F59E0B;
            border-width: 4px;
        }

        /* Styling for the smaller pins in the address list */
        .address-list-pin {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3B82F6;
            border: 0.15em solid white;
            border-radius: 50%;
            width: 2.0em;
            height: 2.0em;
            color: white;
            font-weight: bold;
            font-size: 0.8em;
            line-height: 1; /* Ensure text is vertically centered */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            flex-shrink: 0; /* Prevent the pin from shrinking */
        }

        .address-list-pin.start {
            background: #10B981;
        }

        .address-list-pin.flag {
            /* font-size is intentionally omitted to keep the icon size consistent. */
        }

        /* Fade out animation for messages */
        .message-fade {
            animation: fadeOut 5s forwards;
        }
        
        @keyframes fadeOut {
            0% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; display: none; }
        }

        /* Custom scrollbar for the stats panel */
        #stats-panel::-webkit-scrollbar {
            width: 8px;
        }
        #stats-panel::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        #stats-panel::-webkit-scrollbar-thumb {
            background: #a8a8a8;
            border-radius: 4px;
        }
        #stats-panel::-webkit-scrollbar-thumb:hover {
            background: #888;
        }

        /* Custom scrollbar for the address list */
        #addressList::-webkit-scrollbar {
            width: 6px;
        }
        #addressList::-webkit-scrollbar-track {
            background: transparent;
        }
        #addressList::-webkit-scrollbar-thumb {
            background: #a8a8a8;
            border-radius: 3px;
        }
        #addressList::-webkit-scrollbar-thumb:hover {
            background: #888;
        }
        #addressList {
            max-height: min(45vh, 440px); /* Scalable max-height */
        }

        /* Common button style */
        .action-button {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(200, 200, 200, 0.4);
            border-radius: 0.5rem;
            padding: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-button:hover:not(:disabled) {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform: translateY(-1px);
        }
        
        /* Menu panel styles */
        .menu-panel {
            position: absolute;
            top: 5.5rem; /* Adjusted for new button layout */
            right: 1rem;
            z-index: 2000;
            padding: 1rem;
            min-width: 18.75rem;
        }

        #addressPanel {
            overflow: hidden; /* Ensure content never spills out */
        }
        
        .menu-hidden {
            display: none;
        }

        /* --- STYLES FOR GLASS PANELS (BOTTOM & MENU) --- */
        .glass-panel {
            background: rgba(255, 255, 255, 0.1); /* Increased transparency */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(200, 200, 200, 0.4);
        }

        #bottomPanel {
            height: 45vh; /* Default height for mobile */
            border-top-width: 1px; /* Keep only top border */
            border-left-width: 0; border-right-width: 0; border-bottom-width: 0;
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 -4px 30px rgba(0,0,0,0.1);
        }
        
        @media (min-width: 1024px) {
            #bottomPanel {
                height: 25vh;
            }
        }
        
        #bottomPanel.is-visible {
            transform: translateY(0);
        }

        /* Tooltip styles for estimated duration and toggles */
        .info-tooltip {
            position: absolute;
            background: #1f2937;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            white-space: nowrap;
            z-index: 10000;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            max-width: 300px;
            word-wrap: break-word;
            white-space: normal;
        }
        
        .info-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #1f2937 transparent transparent transparent;
        }
        
        /* Styles for search suggestions */
        #search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #d1d5db;
            border-top: none;
            border-radius: 0 0 0.375rem 0.375rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 2100;
            max-height: 200px;
            overflow-y: auto;
        }
        
        #search-suggestions li {
            padding: 0.75rem 1rem;
            cursor: pointer;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #search-suggestions li:last-child {
            border-bottom: none;
        }
        
        #search-suggestions li:hover, #search-suggestions li.highlighted {
            background-color: #eff6ff; /* bg-blue-50 */
        }
        
        /* Hide default clear button for search input */
        #search-input::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
        }
        
        /* NEW: Tooltip for search results */
        .search-result-tooltip {
            position: absolute;
            background: #1f2937;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            z-index: 10000;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            max-width: 250px;
            white-space: normal; /* Allow wrapping */
        }

        /* Context Menu Styles */
        #contextMenu {
            background: rgba(255, 255, 255, 0.8); /* Transparent white */
            backdrop-filter: blur(10px); /* Blur effect */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            border: 1px solid rgba(200, 200, 200, 0.4);
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 0.5rem;
            z-index: 5000; /* Ensure it's on top of other elements */
            min-width: 220px;
            transform-origin: top left; /* For potential future animations */
            transition: opacity 0.1s ease-out;
        }

        .elevation-highlight-marker {
            background: #F59E0B;
            border: 2px solid white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        /* MapLibre/MapTiler SDK compatibility styles */
        .maptiler-ctrl-group {
            background: rgba(255, 255, 255, 0.8) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(200, 200, 200, 0.4) !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        }
        .maptiler-ctrl button {
            background-color: transparent !important;
            width: 30px !important;
            height: 30px !important;
        }
        .maptiler-ctrl-top-left {
            left: 1rem;
            top: 90px; /* Position below address button */
        }

        .drag-handle {
            cursor: move;
        }
        .resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 15px;
            height: 15px;
            cursor: nwse-resize;
            z-index: 10;
        }
        .resize-handle::after {
            content: '';
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            border-bottom: 2px solid rgba(0,0,0,0.3);
            border-right: 2px solid rgba(0,0,0,0.3);
        }

        .sortable-chosen {
            background-color: #eff6ff; /* bg-blue-50 */
            border: 1px solid #3B82F6; /* border-blue-500 */
        }



        /* --- FONT SCALING FOR ALL DISPLAYS --- */
        html {
            /* 
            This formula provides a base font size and adds a scaling factor 
            based on the viewport width. This allows for better scaling on all
            screen sizes, with improved readability on very small screens.
            The base size has been adjusted to make the overall UI smaller.
            */
            font-size: calc(5px + 0.5vw);
        }

        /* Shine effect for bottomPanel */
        @keyframes shine-effect {
            to {
                transform: translateX(100%);
            }
        }

        #bottomPanel {
            overflow: hidden; /* Ensure the shine effect is contained */
        }

        #bottomPanel.is-opening::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 65%);
            animation: shine-effect 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Duration 3.5s, No Delay */
            z-index: 1; /* To be on top of the panel's content but below the hide button */
            pointer-events: none; /* So it doesn't interfere with mouse events */
        }

        .map-style-container {
            position: relative;
            display: flex;
            align-items: flex-start;
        }

        .map-style-item {
            cursor: pointer;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease-in-out;
            border: 1px solid white;
            width: 3rem;
            height: 3rem;
            flex-shrink: 0;
            position: relative; /* For label positioning */
        }

        .map-style-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .map-style-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .map-style-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.625rem;
            font-weight: 600;
            color: white;
            padding: 0.25rem 0.125rem;
            background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }

        #active-map-style {
            border-color: #3B82F6;
        }

        .map-style-menu {
            position: absolute;
            left: 100%;
            top: 0;
    padding: 0;
            border-radius: 0.5rem;
            display: flex;
            gap: 0.5rem;
            opacity: 0;
            transform: translateX(-10px);
            transition: opacity 0.2s ease-out, transform 0.2s ease-out;
            pointer-events: none; /* Hidden by default */
        }
        
        .map-style-container.menu-visible .map-style-menu {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto; /* Clickable when visible */
        }

/* --- Marquee Effect for Long Map Style Labels --- */
.map-style-label {
    overflow: hidden;
    white-space: nowrap;
}

.map-style-label > span {
    display: inline-block;
    transform: translateX(0);
}



/* From Uiverse.io by Nawsome */ 
.pl {
  display: block;
  width: 9.375em;
  height: 9.375em;
}

.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pl__arrows {
  animation-name: arrows42;
  transform: rotate(45deg);
  transform-origin: 16px 52px;
}

.pl__ring-rotate,
.pl__ring-stroke {
  transform-origin: 80px 80px;
}

.pl__ring-rotate {
  animation-name: ringRotate42;
}

.pl__ring-stroke {
  animation-name: ringStroke42;
  transform: rotate(-45deg);
}

.pl__tick {
  animation-name: tick42;
}

.pl__tick:nth-child(2) {
  animation-delay: -1.75s;
}

.pl__tick:nth-child(3) {
  animation-delay: -1.5s;
}

.pl__tick:nth-child(4) {
  animation-delay: -1.25s;
}

.pl__tick:nth-child(5) {
  animation-delay: -1s;
}

.pl__tick:nth-child(6) {
  animation-delay: -0.75s;
}

.pl__tick:nth-child(7) {
  animation-delay: -0.5s;
}

.pl__tick:nth-child(8) {
  animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows42 {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
  }
}

@keyframes ringRotate42 {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(720deg);
  }
}

@keyframes ringStroke42 {
  from,
	to {
    stroke-dashoffset: 452;
    transform: rotate(-45deg);
  }

  50% {
    stroke-dashoffset: 169.5;
    transform: rotate(-180deg);
  }
}

@keyframes tick42 {

  from,

	3%,

	47%,

	to {

    stroke-dashoffset: -12;

  }



  14%,

	36% {

    stroke-dashoffset: 0;

  }

}



/* Custom Map Controls */
#left-controls-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2000;
}
#custom-map-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.action-button.active {
    box-shadow: 0 0 10px 3px #3B82F6, 0 0 15px 5px rgba(59, 130, 246, 0.6), 0 0 0 2px #3B82F6;
}

.action-button.active:hover:not(:disabled) {
    box-shadow: 0 0 12px 5px #3B82F6, 0 0 20px 8px rgba(59, 130, 246, 0.8), 0 0 0 2px #3B82F6;
    transform: translateY(-2px);
}

/* Pressed effect for specific action buttons */
#custom-zoom-in:active,
#custom-zoom-out:active,
#custom-reset-bearing:active,
#custom-fit-bounds:active,
#custom-toggle-terrain:active,
#roundTripToggle:active,
#steepUphillToggle:active,
#menuToggle:active,
#clearRoute:active,
#recalculateRoute:active,
#undoButton:active,
#addressToggle:active,
#addressPanelClose:active,
#downloadGPX:active,
#uploadGPX:active,
#downloadPDF:active,
#shareButton:active,
#show-panel-button:active,
#hide-panel-button:active,
#addWaypointBtn:active,
#removePinBtn:active,
#pdf-open-confirm:active,
#pdf-open-cancel:active,
#editRouteNameBtn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}







/* --- RESPONSIVE MAP STYLE SWITCHER --- */
@media (max-width: 520px) {
    .map-style-menu {
        /* Position it below the main button */
        top: 100%;
        left: 0;
        
        /* Stack items vertically */
        flex-direction: column;
        
        /* Adjust transform for vertical animation */
        transform: translateY(-10px);

        /* Add a small margin on top and ensure no horizontal offset */
        margin-top: 0.5rem; 
        margin-left: 0 !important; /* Override ml-2 class */
    }

    .map-style-container.menu-visible .map-style-menu {
        /* Adjust transform for vertical animation */
        transform: translateY(0);
    }
}