/**
 * Mobile Map App - Custom Styles
 * Version: 1.0.0
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Reset & Typography */
* {
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ========================================================================
   RESPONSIVE MAP CONTAINER - 100% Viewport Coverage
   ======================================================================== */

/* Map Container - Always fills entire viewport */
#map {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    z-index: 1;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Ensure Leaflet container is responsive */
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    font-family: 'Inter', sans-serif;
}

/* Mobile viewport optimization */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    #map {
        height: -webkit-fill-available !important;
    }
}

/* Prevent zoom on double-tap (mobile) */
#map {
    touch-action: pan-x pan-y;
}

/* Responsive for all screen sizes */
@media (max-width: 1920px) {
    #map { width: 100vw; height: 100vh; }
}

@media (max-width: 1366px) {
    #map { width: 100vw; height: 100vh; }
}

@media (max-width: 1024px) {
    /* Tablet landscape */
    #map { width: 100vw; height: 100vh; }
}

@media (max-width: 768px) {
    /* Tablet portrait */
    #map { 
        width: 100vw; 
        height: 100vh;
        height: 100dvh; /* Dynamic for mobile browsers */
    }
}

@media (max-width: 640px) {
    /* Mobile landscape */
    #map { 
        width: 100vw; 
        height: 100vh;
        height: 100dvh;
    }
}

@media (max-width: 480px) {
    /* Mobile portrait */
    #map { 
        width: 100vw; 
        height: 100vh;
        height: 100dvh;
    }
}

@media (max-width: 375px) {
    /* Small mobile (iPhone SE, etc) */
    #map { 
        width: 100vw; 
        height: 100vh;
        height: 100dvh;
    }
}

@media (max-width: 320px) {
    /* Very small mobile */
    #map { 
        width: 100vw; 
        height: 100vh;
        height: 100dvh;
    }
}

/* ========================================================================
   Satellite Layer - SIMPLIFIED for maximum compatibility
   ======================================================================== */

/* Minimal satellite tile styling */
.leaflet-tile {
    /* Sharp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Simple fade-in animation */
@keyframes tilefadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Tile container optimization - SIMPLIFIED */
.leaflet-tile-container {
    /* Hardware acceleration */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    
    /* Sharp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* General tile optimization - MINIMAL */
.leaflet-tile {
    /* Crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Map pane optimization */
.leaflet-map-pane,
.leaflet-tile-pane {
    /* Hardware acceleration */
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Zoom animation optimization */
.leaflet-zoom-animated {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide default leaflet routing panel for cleaner mobile UI */
.leaflet-routing-container {
    display: none !important;
}

/* Center Crosshair */
.center-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar {
    width: 4px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Firefox Scrollbar */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* GPS Pulse Animation */
@keyframes gpsPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.pulse-animation {
    animation: gpsPulse 2s infinite;
}

/* Slide Up Animation for Modals */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Spin Animation for Loading */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Custom Leaflet Marker Styles */
.user-gps-marker {
    background: transparent;
    border: none;
}

.custom-wp-icon {
    background: transparent;
    border: none;
}

/* Leaflet Popup Customization */
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 0;
}

.leaflet-popup-content {
    margin: 8px 10px;
    line-height: 1.4;
}

.leaflet-popup-tip-container {
    display: none;
}

/* Search Results Hover Effect */
#search-results > div:hover {
    background-color: #eff6ff;
}

/* Button Active States */
button:active {
    transform: scale(0.95);
}

/* Focus Styles for Accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Smooth Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Backdrop Blur Support */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .backdrop-blur-sm {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    .backdrop-blur-md {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

/* Loading Spinner */
.loading-spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Toast Notification Styles - Bottom Center */
#toast {
    max-width: 90%;
    word-wrap: break-word;
}

/* Toast responsive positioning */
@media (max-width: 640px) {
    #toast {
        bottom: 5rem !important; /* Higher on mobile to avoid button overlap */
        max-width: calc(100vw - 1.5rem);
        font-size: 11px; /* Slightly smaller on mobile */
    }
}

@media (min-width: 641px) {
    #toast {
        bottom: 5rem; /* 80px from bottom on desktop */
    }
}

/* Modal Overlay Click Protection */
.modal-overlay {
    cursor: pointer;
}

.modal-content {
    cursor: default;
}

/* Waypoint Badge Positioning */
#waypoint-badge {
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Input Field Styles */
input[type="text"],
textarea {
    -webkit-appearance: none;
    appearance: none;
}

input[type="text"]::placeholder,
textarea::placeholder {
    color: #9ca3af;
}

/* Button Disabled State */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Search Results Empty State */
#search-results:empty {
    display: none;
}

/* Drawer Slide Animation */
#drawer-waypoints {
    display: none; /* Hidden by default */
}

#drawer-waypoints:not(.hidden) {
    display: flex !important; /* Show when not hidden */
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* iOS Safe Area Support */
@supports (padding: max(0px)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .fixed.top-3 {
        top: max(0.75rem, env(safe-area-inset-top));
    }
    
    .fixed.bottom-0 {
        bottom: env(safe-area-inset-bottom);
    }
}

/* ========================================================================
   RESPONSIVE UI CONTROLS - Mobile & Desktop Optimization
   ======================================================================== */

/* Top UI Container - Always Centered at All Sizes */
/* Desktop: max-width 420px centered */
/* Mobile: responsive but always centered */

/* Search Bar & Refresh Button - Always Centered */
.fixed.top-3 {
    /* Force center positioning on all screen sizes */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

/* Search results always centered below search bar */
#search-results {
    margin-left: auto;
    margin-right: auto;
}

/* App info button positioning */
.fixed.bottom-3.left-3 {
    pointer-events: auto;
}

/* Refresh Button - Always visible and centered */
.fixed.top-3 > button[aria-label="Refresh"] {
    pointer-events: auto;
}

/* Search Bar Enhanced Visibility */
#search-input {
    font-weight: 500;
}

#search-input::placeholder {
    font-weight: 400;
    opacity: 0.7;
}

@media (max-width: 640px) {
    /* Mobile: maintain centered positioning */
    .fixed.top-3 {
        max-width: calc(100vw - 1.5rem) !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
    
    /* Ensure right side controls stay on right */
    .fixed.right-3.bottom-6 {
        right: 0.75rem !important;
        left: auto !important;
    }
    
    /* Info button position on mobile */
    .fixed.bottom-3.left-3 {
        bottom: 0.5rem !important;
        left: 0.5rem !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    /* Tablet: keep centered */
    .fixed.top-3 {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        max-width: 420px !important;
    }
}

@media (max-width: 375px) {
    /* Small mobile: maintain center, adjust spacing */
    .fixed.top-3 {
        top: 0.5rem !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        max-width: calc(100vw - 1rem) !important;
    }
    
    /* Right controls on small mobile */
    .fixed.right-3.bottom-6 {
        right: 0.5rem !important;
    }
}

/* Bottom controls responsive */
.fixed.bottom-6 {
    max-width: calc(100vw - 1.5rem);
}

@media (max-width: 640px) {
    .fixed.bottom-6 {
        bottom: 1rem;
        left: 0.5rem;
        right: 0.5rem;
    }
}

/* Button controls - responsive sizing */
button {
    min-width: 44px; /* Touch target size */
    min-height: 44px;
}

@media (max-width: 640px) {
    button {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (max-width: 375px) {
    button {
        min-width: 38px;
        min-height: 38px;
        font-size: 0.875rem;
    }
}

/* Text responsive sizing */
@media (max-width: 640px) {
    .text-sm { font-size: 0.8125rem; }
    .text-xs { font-size: 0.7rem; }
}

@media (max-width: 375px) {
    .text-base { font-size: 0.9375rem; }
    .text-sm { font-size: 0.75rem; }
    .text-xs { font-size: 0.6875rem; }
}

/* Modal responsive */
.modal-content {
    max-width: min(90vw, 600px);
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .modal-content {
        max-width: 95vw;
        max-height: 85vh;
    }
}

@media (max-width: 375px) {
    .modal-content {
        max-width: 98vw;
        max-height: 80vh;
    }
}

/* Print Styles */
@media print {
    .fixed,
    button,
    nav {
        display: none !important;
    }
    
    #map {
        height: 100vh;
        break-inside: avoid;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    button {
        border: 2px solid currentColor;
    }
    
    .border {
        border-width: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode in future */
    /*
    body {
        background-color: #1f2937;
        color: #f3f4f6;
    }
    */
}

/* Custom POI Markers (Lokasi baru yang belum di OSM) */
.custom-poi-icon {
    background: transparent;
    border: none;
}

.custom-poi-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    animation: poiDrop 0.5s ease-out;
}

@keyframes poiDrop {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.poi-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: poiBounce 2s ease-in-out infinite;
}

@keyframes poiBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.poi-label {
    background: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-top: -8px;
    border: 1px solid #e5e7eb;
}

/* Label Overlay on Satellite Mode - Removed blend mode for crisp satellite imagery */
.label-overlay {
    /* mix-blend-mode removed to keep satellite imagery sharp and unfiltered */
}

/* Route Tracking Polyline */
.route-tracking-line {
    animation: dashMove 1s linear infinite;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -15;
    }
}

/* Measurement Crosshair (for measurement tools) */
.measurement-crosshair {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.crosshair-horizontal,
.crosshair-vertical {
    position: absolute;
    background: rgba(234, 88, 12, 0.8);
}

.crosshair-horizontal {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.crosshair-vertical {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.crosshair-center {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(234, 88, 12, 0.9);
    border: 2px solid white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Route Measurement Marker Styles */
.route-measure-marker {
    background: transparent;
    border: none;
}

/* Temp Pin Marker Styles */
.temp-pin-marker {
    background: transparent;
    border: none;
}

.temp-pin-marker svg {
    filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.4));
    transition: all 0.3s ease;
}

.temp-pin-marker:hover svg {
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.6));
}

/* Custom Utility Classes */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive Typography */
@media (max-width: 640px) {
    .text-xs {
        font-size: 0.7rem;
    }
}

/* Loading State for Search */
#search-input:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

/* Waypoint List Item Hover */
#waypoints-list-container > div {
    transition: all 0.2s ease;
}

#waypoints-list-container > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Custom Focus Ring */
.focus-ring:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Installation Prompt Styles (for PWA) */
.install-prompt {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 90%;
    animation: slideUp 0.3s ease-out;
}

.install-prompt button {
    white-space: nowrap;
}

/* Offline Indicator */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ef4444;
    color: white;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    z-index: 9999;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Success State */
.success-animation {
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Error State */
.error-shake {
    animation: shake 0.5s ease-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}


/* ============================================================================
   PWA Update Banner
   ============================================================================ */

#update-banner {
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slideDown 0.4s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-in forwards;
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* Update banner responsive */
@media (max-width: 640px) {
    #update-banner {
        left: 0.5rem;
        right: 0.5rem;
        top: 5rem;
        padding: 0.75rem;
    }
    
    #update-banner .text-sm {
        font-size: 0.8125rem;
    }
    
    #update-banner .text-xs {
        font-size: 0.6875rem;
    }
}


/* ============================================================================
   PWA Install Banner
   ============================================================================ */

#install-banner {
    animation: slideUpFromBottom 0.4s ease-out;
}

@keyframes slideUpFromBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUpFromBottom 0.4s ease-out;
}

.animate-slide-down-out {
    animation: slideDownOut 0.3s ease-in forwards;
}

@keyframes slideDownOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Install banner responsive */
@media (max-width: 640px) {
    #install-banner {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 5rem;
        padding: 0.75rem;
    }
    
    #install-banner .text-sm {
        font-size: 0.8125rem;
    }
    
    #install-banner .text-xs {
        font-size: 0.6875rem;
    }
}


/* ============================================================================
   Route Recording Modal Animation
   ============================================================================ */

.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ============================================================================
   GPS Route Recording Indicator
   ============================================================================ */

#btn-tracking-mode.recording {
    animation: recordingPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
}

@keyframes recordingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* Recording polyline style */
.leaflet-interactive.recording-route {
    stroke: #dc2626;
    stroke-width: 4;
    stroke-dasharray: 10, 5;
    animation: dashAnimation 1s linear infinite;
}

@keyframes dashAnimation {
    to {
        stroke-dashoffset: -15;
    }
}


/* ============================================================================
   Zoom Controls Styling (Bottom Left)
   ============================================================================ */

/* Hide Leaflet zoom controls completely */
.leaflet-control-zoom {
    display: none !important;
}

.leaflet-bottom.leaflet-left {
    display: none !important;
}

/* All controls consolidated in right side container */
/* No standalone button positioning needed anymore */

/* Responsive layout - all buttons stay in right container */

/* Zoom controls hidden - no styling needed */

/* ========================================================================
   Navigation Settings Modal Styles
   ======================================================================== */

/* Modal content responsive */
#modal-nav-settings .bg-white {
    /* Desktop: max-w-lg with scrollable content */
    /* Mobile: full width, slide up from bottom */
}

/* Scrollable area styling */
#modal-nav-settings .overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#modal-nav-settings .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

#modal-nav-settings .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

#modal-nav-settings .overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

#modal-nav-settings .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.7);
}

/* Vehicle, Route, Traffic option styling */
.vehicle-option.selected,
.vehicle-option[data-vehicle].bg-blue-50 {
    border-color: #3b82f6 !important;
    background-color: #dbeafe !important;
}

.route-option.selected,
.route-option[data-route].bg-green-50 {
    border-color: #10b981 !important;
    background-color: #d1fae5 !important;
}

.traffic-option[data-traffic="smooth"].bg-green-50 {
    border-color: #10b981 !important;
    background-color: #d1fae5 !important;
}

.traffic-option[data-traffic="congested"].bg-red-50 {
    border-color: #ef4444 !important;
    background-color: #fee2e2 !important;
}

/* Hover effects for option buttons */
.vehicle-option:hover,
.route-option:hover,
.traffic-option:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vehicle-option:active,
.route-option:active,
.traffic-option:active {
    transform: scale(0.98);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    #modal-nav-settings .bg-white {
        max-height: 90vh !important;
    }
    
    /* Adjust grid for small screens */
    #modal-nav-settings .grid-cols-3 {
        gap: 0.5rem;
    }
    
    /* Smaller buttons on mobile */
    #modal-nav-settings .vehicle-option,
    #modal-nav-settings .traffic-option {
        padding: 0.625rem !important;
    }
    
    #modal-nav-settings .vehicle-option i,
    #modal-nav-settings .traffic-option i {
        font-size: 1.125rem !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 375px) {
    #modal-nav-settings .bg-white {
        max-height: 92vh !important;
    }
    
    #modal-nav-settings .vehicle-option span,
    #modal-nav-settings .traffic-option span {
        font-size: 0.65rem !important;
    }
}

/* ========================================================================
   Navigation Banner Responsive Styles
   ======================================================================== */

#navigation-banner {
    max-width: calc(100vw - 1.5rem) !important;
}

/* Ensure text truncation works properly */
#nav-info-text,
#nav-info-detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    #navigation-banner {
        top: 7rem !important; /* Lower on mobile to avoid coordinate display */
        left: 0.5rem;
        right: 0.5rem;
        max-width: calc(100vw - 1rem) !important;
    }
    
    #navigation-banner .p-3 {
        padding: 0.625rem; /* 10px */
    }
}

/* Small mobile adjustments */
@media (max-width: 375px) {
    #navigation-banner {
        top: 6.5rem !important;
    }
    
    #navigation-banner .w-9 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    #navigation-banner .text-lg {
        font-size: 0.875rem !important;
    }
}

/* Tablet: keep it lower */
@media (min-width: 641px) and (max-width: 768px) {
    #navigation-banner {
        top: 8.5rem !important; /* 136px - below coordinate display */
    }
}

/* Desktop: limit max width and center */
@media (min-width: 769px) {
    #navigation-banner {
        top: 8.5rem !important; /* 136px - consistent spacing */
        max-width: 600px !important;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* Large desktop: even more conservative */
@media (min-width: 1024px) {
    #navigation-banner {
        max-width: 500px !important;
    }
}

/* ========================================================================
   Map Interaction Fix - Ensure map is always draggable
   ======================================================================== */

/* Ensure map fills viewport and is draggable */
#map {
    touch-action: none; /* Allow map pan/zoom */
    -ms-touch-action: none;
}

/* All fixed overlays should not block map interaction by default */
.fixed {
    pointer-events: auto;
}

/* Coordinate display should not block clicks */
#center-coords-display,
.center-crosshair,
#measurement-crosshair {
    pointer-events: none !important;
}

/* Navigation banner should allow clicks only on itself */
#navigation-banner {
    pointer-events: auto;
}

/* Ensure viewport is properly constrained */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* Desktop: ensure no elements escape viewport */
@media (min-width: 768px) {
    /* Ensure all fixed elements stay within viewport */
    .fixed {
        max-height: 100vh;
    }
    
    /* Prevent any element from causing scrollbars */
    * {
        max-width: 100vw;
    }
}


/* ========================================================================
   ORIENTATION RESPONSIVE - Landscape & Portrait
   ======================================================================== */

/* Portrait orientation */
@media (orientation: portrait) {
    #map {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
    }
    
    /* Adjust UI for portrait */
    .fixed.top-3 {
        gap: 0.5rem;
    }
}

/* Landscape orientation */
@media (orientation: landscape) {
    #map {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
    }
    
    /* Optimize for landscape */
    .fixed.top-3 {
        gap: 0.75rem;
    }
}

/* Mobile landscape specific */
@media (max-width: 896px) and (orientation: landscape) {
    /* Compact UI for mobile landscape */
    .fixed.top-3 {
        top: 0.375rem;
        gap: 0.375rem;
    }
    
    .fixed.bottom-6 {
        bottom: 0.5rem;
    }
    
    /* Smaller buttons in landscape */
    button {
        padding: 0.5rem;
    }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #map {
        width: 100vw;
        height: 100vh;
    }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #map {
        width: 100vw;
        height: 100vh;
    }
}

/* ========================================================================
   DEVICE SPECIFIC OPTIMIZATIONS
   ======================================================================== */

/* iPhone SE & small devices (320px - 375px) */
@media (max-width: 375px) {
    #map { 
        font-size: 14px;
    }
}

/* Standard mobile (375px - 414px) */
@media (min-width: 375px) and (max-width: 414px) {
    #map {
        font-size: 15px;
    }
}

/* Large mobile (414px - 480px) */
@media (min-width: 414px) and (max-width: 480px) {
    #map {
        font-size: 16px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #map {
        font-size: 16px;
    }
}

/* Desktop (>1024px) */
@media (min-width: 1024px) {
    #map {
        font-size: 16px;
    }
}

/* ========================================================================
   ULTRA WIDE & LARGE SCREENS
   ======================================================================== */

/* Large desktop (1920px+) */
@media (min-width: 1920px) {
    #map {
        width: 100vw;
        height: 100vh;
    }
}

/* Ultra wide (2560px+) */
@media (min-width: 2560px) {
    #map {
        width: 100vw;
        height: 100vh;
    }
}

/* 4K and above */
@media (min-width: 3840px) {
    #map {
        width: 100vw;
        height: 100vh;
    }
}

/* ========================================================================
   RESPONSIVE FIXES - Prevent Overflow
   ======================================================================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    position: fixed;
}

/* Ensure all elements stay within viewport */
* {
    max-width: 100vw;
}

/* Fixed elements should not cause overflow */
.fixed {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Leaflet controls positioning */
.leaflet-control-container {
    pointer-events: none;
}

.leaflet-control-container * {
    pointer-events: auto;
}

/* ========================================================================
   TOUCH OPTIMIZATION FOR MOBILE
   ======================================================================== */

/* Better touch targets */
@media (hover: none) and (pointer: coarse) {
    /* Mobile/touch devices */
    button, a, .clickable {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Desktop/mouse devices */
@media (hover: hover) and (pointer: fine) {
    button:hover {
        transform: scale(1.02);
    }
}

/* ========================================================================
   RESPONSIVE IMAGES & TILES
   ======================================================================== */

/* Ensure tiles are responsive but not distorted */
.leaflet-tile {
    display: block;
}

/* Allow tile container to expand fully - NO restrictions */
.leaflet-tile-container {
    /* Remove max-width/max-height restrictions */
    /* Tiles need to fill entire map viewport */
}

/* ========================================================================
   RESPONSIVE DEBUGGING (Comment out in production)
   ======================================================================== */

/* Uncomment to debug viewport issues
#map::before {
    content: 'Mobile';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10000;
    font-size: 12px;
}

@media (min-width: 768px) {
    #map::before { content: 'Tablet'; }
}

@media (min-width: 1024px) {
    #map::before { content: 'Desktop'; }
}
*/


/* ========================================================================
   SATELLITE MODE - SIMPLIFIED FIX
   ======================================================================== */

/* Remove problematic size restrictions - let Leaflet handle positioning */
.leaflet-tile-container {
    /* Remove max-width/max-height - tiles need full space */
}

/* Ensure map and container fill viewport */
#map,
.leaflet-container {
    width: 100vw !important;
    height: 100vh !important;
}

/* Elevasi Close Button - Responsive positioning */
#elevasi-close-btn {
    /* Default: bottom-left as defined in HTML inline styles */
}

@media (max-width: 768px) {
    #elevasi-close-btn {
        bottom: 1rem !important;
        left: 1rem !important;
        width: 2.5rem !important; /* 40px */
        height: 2.5rem !important; /* 40px */
    }
}


/* ========================================================================
   QIBLA CORRECTION COMPASS MODAL STYLES
   ======================================================================== */

/* Modal Animation */
#qibla-correction-modal {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Compass SVG */
#qibla-correction-modal svg {
    animation: zoomIn 0.5s ease-out;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Correction Arrow Animation */
#correction-arrow {
    animation: arrowPulse 2s ease-in-out infinite;
    transform-origin: 200px 200px;
}

@keyframes arrowPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Compass Marks */
#compass-marks line {
    transition: stroke 0.2s ease;
}

/* Responsive */
@media (max-width: 640px) {
    #qibla-correction-modal svg {
        max-width: 260px;
    }
}


/* ========================================================================
   SATELLITE MODE - ZOOM-BASED FILTER
   ======================================================================== */

/* Clear Mode: Zoom < 20.5 - No filter for clear satellite imagery */
#map.satellite-clear .leaflet-tile-pane {
    filter: none !important;
}

#map.satellite-clear .leaflet-tile {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Enhanced Mode: Zoom >= 20.5 - Enhanced filter for high zoom clarity */
#map.satellite-enhanced .leaflet-tile-pane {
    filter: brightness(1.1) contrast(1.15) saturate(1.12);
}

#map.satellite-enhanced .leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Label overlay remains visible in both modes with maximum contrast */
.label-overlay {
    pointer-events: none !important;
    z-index: 1000 !important;
    position: relative !important;
}

/* Ensure label tiles are visible */
.leaflet-layer.label-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enhanced contrast for labels on satellite imagery */
#map.satellite-clear .label-overlay,
#map.satellite-enhanced .label-overlay {
    /* Add slight brightness boost for better readability */
    filter: brightness(1.15) contrast(1.2);
}

/* Additional text shadow effect for maximum readability (applies to label images) */
.leaflet-tile-container.label-overlay {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) 
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}


/* ========================================================================
   GOOGLE SATELLITE WATERMARK REMOVAL - CSS MASKING
   ======================================================================== */

/* Hide Google watermark "API KEY REQUIRED" using CSS overlay */
.google-satellite-clean img {
    /* Create a clean overlay to hide watermark text */
    position: relative;
}

/* Method 1: Filter to remove text-like patterns */
.google-satellite-clean img {
    filter: contrast(1.05) saturate(1.1);
}

/* Method 2: Clip watermark area (bottom-right where it usually appears) */
.leaflet-tile-container.google-satellite-clean::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 100px;
    background: linear-gradient(to top, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
    z-index: 10;
}

/* Method 3: Hide specific tile patterns with watermark */
.google-satellite-clean .leaflet-tile[src*="lyrs=s"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: blur(0px);
    z-index: -1;
}

/* Method 4: Cover watermark with clean tile overlay - MOST EFFECTIVE */
.leaflet-tile-container {
    position: relative;
}

/* Add a semi-transparent overlay to dilute watermark visibility */
.google-satellite-clean {
    position: relative;
}

.google-satellite-clean::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.02); /* Very subtle darkening to hide light watermark */
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply; /* Blend to reduce watermark visibility */
}

/* Ensure map content stays above overlay */
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-control {
    z-index: 100 !important;
}

/* Hide watermark specifically when it appears as tile overlay */
.leaflet-tile-container img[src*="lyrs=s"] {
    /* Increase contrast to make watermark less visible */
    filter: contrast(1.08) brightness(1.02);
}

/* Alternative: Complete tile replacement strategy */
.google-satellite-clean .leaflet-tile {
    /* Apply subtle filter to reduce watermark text visibility */
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

/* FINAL METHOD: CSS Mask to hide bottom watermark area */
.leaflet-tile-pane.google-satellite-clean {
    -webkit-mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,1) 90%, 
        rgba(0,0,0,0.3) 98%, 
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,1) 90%, 
        rgba(0,0,0,0.3) 98%, 
        rgba(0,0,0,0) 100%);
}


/* ========================================================================
   QIBLA RULER & MOSQUE CALIBRATION MARKERS
   ======================================================================== */

/* Qibla Custom Panes - Always on Top */
.leaflet-qibla-pane {
    z-index: 650 !important;
    pointer-events: none !important;
}

.leaflet-qibla-marker-pane {
    z-index: 651 !important;
    pointer-events: auto !important;
}

/* Calibration Marker Styles */
.calibration-marker {
    z-index: 1000 !important;
}

.calibration-marker > div {
    animation: markerPop 0.3s ease-out;
}

@keyframes markerPop {
    0% {
        transform: scale(0) translateY(20px);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Pin pointer triangle smooth rendering */
.calibration-marker .border-t-blue-600,
.calibration-marker .border-t-purple-600 {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Pin head glow effect */
.calibration-marker .bg-blue-600,
.calibration-marker .bg-purple-600 {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.calibration-marker .bg-purple-600 {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}

/* Label smooth appearance */
.calibration-marker .whitespace-nowrap {
    animation: labelFadeIn 0.4s ease-out 0.2s both;
}

@keyframes labelFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Qibla Preview Line - Smooth cursor following */
.leaflet-pane .leaflet-overlay-pane svg path[stroke="#dc2626"] {
    transition: d 0.05s ease-out;
    pointer-events: none;
}

/* Mosque Calibration Preview Line */
.leaflet-pane .leaflet-overlay-pane svg path[stroke="#a78bfa"] {
    transition: d 0.05s ease-out;
    pointer-events: none;
}

/* Ensure Qibla lines and markers are always visible above other layers */
.leaflet-qibla-pane svg,
.leaflet-qibla-pane canvas {
    pointer-events: none !important;
}

.leaflet-qibla-marker-pane .leaflet-marker-icon {
    z-index: 1000 !important;
}

/* Qibla marker icon styling */
.qibla-marker-icon {
    z-index: 1000 !important;
}

.qibla-marker-icon > div {
    animation: markerPulse 2s ease-in-out infinite;
}

@keyframes markerPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}


/* ========================================================================
   CURSOR TRACKING ENHANCEMENT
   ======================================================================== */

/* Qibla ruler mode - no special cursor */
.leaflet-container.leaflet-crosshair-cursor {
    cursor: default !important;
}

/* Ensure smooth line rendering */
.leaflet-qibla-pane path,
.leaflet-overlay-pane path[stroke="#dc2626"],
.leaflet-overlay-pane path[stroke="#a78bfa"] {
    shape-rendering: geometricPrecision;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Optimize SVG rendering for smooth updates */
.leaflet-qibla-pane svg,
.leaflet-overlay-pane svg {
    will-change: auto;
    transform: translateZ(0);
}


/* ========================================================================
   QIBLA CROSSHAIR CURSOR
   ======================================================================== */

/* Crosshair marker styling */
.qibla-crosshair {
    z-index: 1000 !important;
    pointer-events: none !important;
}

.qibla-crosshair > div {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

/* No special cursor styling needed */
.leaflet-container.leaflet-crosshair-cursor {
    cursor: default !important;
}

/* ========================================================================
   CALIBRATION CROSSHAIR (All Devices)
   ======================================================================== */

.calibration-crosshair-marker {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
    animation: calibrationCrosshairPulse 2s ease-in-out infinite;
}

@keyframes calibrationCrosshairPulse {
    0%, 100% {
        opacity: 0.95;
    }
    50% {
        opacity: 1;
    }
}

/* Ensure crosshair is visible on all backgrounds */
.calibration-crosshair-marker > div {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}


/* ========================================================================
   QIBLA ENDPOINT MARKER
   ======================================================================== */

/* Endpoint marker at guideline end */
.qibla-endpoint {
    z-index: 1001 !important;
    pointer-events: none !important;
}

.qibla-endpoint > div {
    animation: endpointPulse 1.5s ease-in-out infinite;
}

@keyframes endpointPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}


/* ========================================================================
   SATELLITE LABEL LAYER ENHANCEMENT
   ======================================================================== */

/* Ensure satellite label tiles render properly */
.satellite-labels {
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Make label tiles load with higher priority */
.satellite-labels img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Ensure tiles are positioned correctly */
.leaflet-tile-container .satellite-labels {
    pointer-events: none; /* Labels don't block map interactions */
}


/* ========================================================================
   CUSTOM PIN MARKERS - Navigation & Preview
   ======================================================================== */

/* Navigation Start Pin (Blue - Lokasi Anda) */
.custom-nav-start-icon {
    background: transparent !important;
    border: none !important;
}

.custom-nav-start-icon > div {
    animation: pulseBlue 2s infinite;
}

@keyframes pulseBlue {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Navigation Destination Pin (Red - Tujuan) */
.custom-nav-dest-icon {
    background: transparent !important;
    border: none !important;
}

.custom-nav-dest-icon > div {
    animation: pulseRed 2s infinite;
}

@keyframes pulseRed {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Preview Waypoint Pin (Yellow/Orange - Preview Sebelum Save) */
.custom-preview-pin-icon {
    background: transparent !important;
    border: none !important;
}

.custom-preview-pin-icon > div {
    animation: bounceAndGlow 1.5s infinite;
}

@keyframes bounceAndGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

/* Waypoint Saved Pin (Red - Waypoint Tersimpan) */
.custom-wp-icon {
    background: transparent !important;
    border: none !important;
}

.custom-wp-icon > div {
    transition: transform 0.2s ease;
}

.custom-wp-icon:hover > div {
    transform: scale(1.15);
}

/* Pin Drop Animation */
@keyframes pinDrop {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    50% {
        transform: translateY(5px);
    }
    70% {
        transform: translateY(-3px);
    }
    85% {
        transform: translateY(2px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.pin-drop-animation {
    animation: pinDrop 0.6s ease-out;
}

/* Ping Animation for Preview Pin */
@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Bounce Animation for Preview Pin */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(-12px);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Shadow for pins */
.custom-nav-start-icon > div > div,
.custom-nav-dest-icon > div > div,
.custom-preview-pin-icon > div > div,
.custom-wp-icon > div {
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Label text on pins */
.custom-nav-start-icon .bg-blue-600,
.custom-nav-dest-icon .bg-red-600,
.custom-preview-pin-icon .bg-amber-500 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Z-index management for pins */
.leaflet-marker-icon.custom-nav-start-icon {
    z-index: 2000 !important;
}

.leaflet-marker-icon.custom-nav-dest-icon {
    z-index: 2000 !important;
}

.leaflet-marker-icon.custom-preview-pin-icon {
    z-index: 3000 !important;
}

.leaflet-marker-icon.custom-wp-icon {
    z-index: 1500 !important;
}

/* Hover effects for interactive pins */
.leaflet-marker-icon.custom-nav-start-icon:hover,
.leaflet-marker-icon.custom-nav-dest-icon:hover,
.leaflet-marker-icon.custom-wp-icon:hover {
    z-index: 2500 !important;
    cursor: pointer;
}

.leaflet-marker-icon.custom-preview-pin-icon:hover {
    z-index: 3500 !important;
}


/* ========================================================================
   PREVIEW ROUTE PINS (untuk tombol "Lihat")
   ======================================================================== */

/* Preview Start Pin (Blue circle - lokasi Anda saat preview) */
.custom-preview-start-icon {
    background: transparent !important;
    border: none !important;
}

.custom-preview-start-icon > div {
    transition: transform 0.3s ease;
}

.custom-preview-start-icon:hover > div {
    transform: scale(1.2);
}

/* Preview Destination Pin (Red with pulse - lokasi tujuan yang di-preview) */
.custom-preview-dest-icon {
    background: transparent !important;
    border: none !important;
}

.custom-preview-dest-icon > div {
    animation: pulsePreview 2s infinite;
}

@keyframes pulsePreview {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Z-index for preview pins */
.leaflet-marker-icon.custom-preview-start-icon {
    z-index: 1800 !important;
}

.leaflet-marker-icon.custom-preview-dest-icon {
    z-index: 1900 !important;
}

/* Preview route line (dashed amber) */
.leaflet-routing-container {
    display: none; /* Hide routing instructions panel */
}

/* Dashed line for preview route */
path[stroke="#f59e0b"] {
    stroke-dasharray: 10, 10;
    animation: dashAnimation 20s linear infinite;
}

@keyframes dashAnimation {
    to {
        stroke-dashoffset: -1000;
    }
}