html {
			height: 100%;
		}

		body {
			height: 100%;
			overflow: hidden;
			margin: 0;
			padding: 0;
			font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
			font-size: 16px;
			color: #FFFFFF;
			background-color: #000000;
		}

		/* Leaflet fixes */
		.leaflet-container { pointer-events: auto !important; }
		
		/* Routing Panel Container */
		.routing-panel-container {
			background-color: white; padding: 12px; max-height: 140px;
			overflow-y: auto; font-size: 12px; border-radius: 10px;
			box-shadow: 0 8px 24px rgba(0,0,0,0.3);
			margin: 10px !important; width: 240px !important;
			z-index: 9999 !important;
			pointer-events: auto !important;
		}

		/* Route Info display */
		.route-info {
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background: white;
			padding: 10px 20px;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
			z-index: 10000;
			font-size: 14px;
			font-weight: bold;
			color: #333;
		}

		/* Show Standard Panel Button */
		.show-standard-panel-btn {
			position: absolute;
			top: 10px;
			right: 10px;
			background: white;
			padding: 10px 15px;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.3);
			cursor: pointer;
			font-size: 13px;
			font-weight: bold;
			color: #007AFF;
			z-index: 9999;
			transition: all 0.2s;
			user-select: none;
		}
		.show-standard-panel-btn:hover {
			background: #007AFF;
			color: white;
			transform: scale(1.05);
		}
		.show-standard-panel-btn:active {
			transform: scale(0.95);
		}

		.leaflet-routing-container {
			transition: opacity 0.3s, transform 0.3s;
		}
		.leaflet-routing-container,
		.leaflet-routing-container *,
		.leaflet-routing-alt,
		.leaflet-routing-alt * {
			color: #333 !important;
			background-color: white !important;
		}
		.leaflet-routing-container.hidden {
			display: none !important;
		}

		#routing-footer {
			height: 75px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ffffff;
			border-top: 1px solid #f0f0f0;
			padding: 0 20px;
		}
		.routing-close-btn {
			width: 100%;
			max-width: 400px;
			height: 50px;
			background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
			color: white;
			border-radius: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 16px;
			cursor: pointer;
			box-shadow: 0 4px 15px rgba(0,122,255,0.3);
			transition: all 0.2s ease;
		}
		.routing-close-btn:hover {
			transform: scale(1.02);
			box-shadow: 0 6px 20px rgba(0,122,255,0.4);
			background: linear-gradient(135deg, #0084ff 0%, #0066d6 100%);
		}
		.routing-close-btn:active {
			transform: scale(0.98);
		}
		.routing-close-btn i {
			margin-right: 8px;
			font-size: 20px;
		}

		/* Custom Directions - Draggable & Collapsible */
		.custom-directions {
			position: absolute;
			top: 100px; /* Lowered to avoid overlap with zoom buttons */
			left: 10px;
			background: white;
			padding: 0;
			border-radius: 10px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
			max-width: 280px;
			max-height: 300px;
			z-index: 9999;
			font-size: 13px;
			color: #333;
			user-select: none;
		}
		.custom-directions h4 {
			margin: 0;
			padding: 12px;
			font-size: 14px;
			color: #007AFF;
			background: linear-gradient(to bottom, #f8f8f8, #eeeeee);
			border-bottom: 2px solid #007AFF;
			border-radius: 10px 10px 0 0;
			cursor: move;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.custom-directions h4:hover {
			background: linear-gradient(to bottom, #e8f4ff, #d0e8ff);
		}
		.toggle-btn {
			cursor: pointer;
			font-size: 18px;
			padding: 0 5px;
			transition: transform 0.3s;
		}
		.toggle-btn.collapsed {
			transform: rotate(-90deg);
		}
		.directions-content {
			max-height: 250px;
			overflow-y: auto;
			overflow-x: hidden;
			padding: 12px;
			scroll-behavior: smooth;
			-webkit-overflow-scrolling: touch;
		}
		.directions-content.collapsed {
			display: none;
		}
		.directions-content::-webkit-scrollbar { width: 8px; }
		.directions-content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
		.directions-content::-webkit-scrollbar-thumb { background: #007AFF; border-radius: 10px; }
		.directions-content::-webkit-scrollbar-thumb:hover { background: #0056b3; }
		.direction-step {
			margin: 8px 0;
			padding: 8px;
			background: #f5f5f5;
			border-radius: 6px;
			transition: all 0.2s;
			cursor: pointer;
		}
		.direction-step:hover {
			background: #e8f4ff;
			transform: translateX(3px);
			box-shadow: 0 2px 6px rgba(0,122,255,0.2);
		}
		.direction-step.active {
			background: #007AFF;
			color: white;
			font-weight: bold;
		}
		.step-marker {
			background: #007AFF; color: white; border: 3px solid white;
			border-radius: 50%; width: 30px; height: 30px;
			display: flex; align-items: center; justify-content: center;
			font-weight: bold; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
		}
		.pulse-ring {
			position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%);
			width: 18px; height: 18px; border: 2px solid #007AFF;
			border-radius: 50%; animation: pulse 2s ease-out infinite; z-index: 1;
		}
		@keyframes pulse {
			0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
			100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
		}
		.destination-marker:hover, .current-location-marker:hover {
			transform: scale(1.1); transition: transform 0.2s;
		}

		/* Floating HTML UI Buttons */
		.floating-ui-button {
			position: absolute;
			width: 50px;
			height: 50px;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
			cursor: pointer;
			z-index: 150000; /* Topmost */
			transition: all 0.2s ease;
			color: #333;
			user-select: none;
			border: 1px solid rgba(0,0,0,0.1);
		}
		.floating-ui-button:hover {
			transform: scale(1.05);
			background: #ffffff;
			box-shadow: 0 6px 16px rgba(0,0,0,0.4);
		}
		.floating-ui-button:active {
			transform: scale(0.95);
			background: #f0f0f0;
		}
		.floating-ui-button i {
			font-family: 'Material Symbols Rounded';
			font-size: 30px;
			font-style: normal;
			line-height: 1;
		}

		/* Spot Popup Modal Styles */
		#spot-popup-overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.85);
			z-index: 90000; /* Behind buttons/routing */
		}

		#spot-popup-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			max-width: 500px;
			max-height: 90vh;
			background: #fff;
			border-radius: 20px;
			overflow: hidden;
			box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			color: #333;
			transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), top 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		}

		#spot-popup-header {
			padding: 15px 15px 10px 15px; /* Adjust padding for indicator */
			background: #ffffff;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			user-select: none;
			position: relative;
		}

		#spot-popup-title {
			font-weight: 800;
			font-size: 16px;
			color: #1a1a1a;
			margin-left: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 80%;
		}

		/* Slide Indicator Icon */
		#slide-indicator {
			display: none;
			position: absolute;
			top: 2px;
			left: 50%;
			transform: translateX(-50%);
			color: #ccc;
			font-size: 18px;
			transition: transform 0.3s;
		}

		#spot-popup-container.is-peek #slide-indicator {
			transform: translateX(-50%) translateY(0);
			animation: bounce-up 2s infinite;
		}

		#spot-popup-container.is-expanded #slide-indicator {
			transform: translateX(-50%) rotate(180deg);
		}

		@keyframes bounce-up {
			0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
			40% {transform: translateX(-50%) translateY(-3px);}
			60% {transform: translateX(-50%) translateY(-1px);}
		}

		/* Peek/Scroll Hint - now relative to content start */
		#scroll-hint {
			display: none;
			margin: -10px auto 10px auto;
			text-align: center;
			color: #007aff;
			font-size: 36px;
			pointer-events: none;
			animation: pulse-up 1.5s infinite;
			z-index: 5;
		}

		@keyframes pulse-up {
			0% { transform: translateY(0); opacity: 0.6; }
			50% { transform: translateY(-8px); opacity: 1; }
			100% { transform: translateY(0); opacity: 0.6; }
		}

		#spot-popup-body {
			padding: 0;
			overflow-y: auto;
			overflow-x: hidden; /* Prevent horizontal swaying */
			flex-grow: 1;
			-webkit-overflow-scrolling: touch;
			background: #f8f9fa;
		}

		#insta-container {
			width: 100.5%;
			margin-left: -0.25%;
			background: #fff;
			min-height: 400px; /* Placeholder height to prevent jumps */
			overflow: hidden;
			position: relative;
		}

		/* Skeleton Loader (Shimmer Effect) */
		#insta-container.is-loading::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
			background-size: 200% 100%;
			animation: shimmer 1.5s infinite;
			z-index: 1;
		}

		@keyframes shimmer {
			0% { background-position: -200% 0; }
			100% { background-position: 200% 0; }
		}

		#spot-insta-iframe {
			width: 100%;
			border: none;
			display: block;
			min-height: 420px;
		}

		.spot-info-section {
			padding: 20px 16px 30px 16px; /* Reduced bottom padding */
			background-color: #f8f9fa;
			opacity: 0;
			transform: translateY(10px);
			transition: opacity 0.8s ease, transform 0.8s ease;
		}

		.spot-info-section.is-visible {
			opacity: 1;
			transform: translateY(0);
		}

		/* Smooth Fade-in - applied to the container's children once rendered */
		.instagram-media {
			margin: 0 !important;
			border-radius: 0 !important;
			min-width: 100% !important;
			width: 100% !important;
			box-shadow: none !important;
		}

		.info-card {
			background: #fff;
			border-radius: 16px;
			padding: 20px;
			box-shadow: 0 4px 15px rgba(0,0,0,0.08);
			margin-bottom: 20px;
			border: 1px solid rgba(0,0,0,0.05);
		}

		.info-card.remarks-card {
			background: #fff;
			border-left: 4px solid #6366f1; /* Indigo accent for remarks */
		}

		#spot-memo {
			font-size: 15px;
			font-weight: 500;
			line-height: 1.6;
			color: #444;
			word-break: break-all;
		}

		.spot-actions {
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin-top: 10px;
		}

		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 14px;
			border-radius: 12px;
			text-decoration: none;
			font-weight: bold;
			font-size: 15px;
			transition: all 0.2s;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
		}

		.action-btn i {
			margin-right: 10px;
			font-size: 20px;
		}

		.btn-phone {
			background-color: #00A8B7; /* Teal/Cyan for distinction */
			color: white;
		}

		.btn-line {
			background-color: #06C755; /* Official LINE Green */
			color: white;
		}

		.btn-web {
			background-color: #007aff;
			color: white;
		}

		.btn-gmap {
			background-color: #374151; /* Neutral Deep Slate */
			color: white;
		}

		#spot-popup-close {
			position: absolute;
			top: 8px;
			right: 12px;
			width: 40px;
			height: 40px;
			background: #f1f3f5;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 26px;
			color: #adb5bd;
			transition: all 0.2s;
			z-index: 100; /* Ensure it stays above everything */
			-webkit-tap-highlight-color: transparent; /* Remove active flash on iOS */
		}

		#spot-popup-close:hover {
			background: #e9ecef;
			color: #495057;
		}

		/* Mobile Bottom Sheet Styles */
		@media (max-width: 480px) {
			#spot-popup-container {
				width: 100%;
				max-width: none;
				border-radius: 24px 24px 0 0;
				left: 0;
				right: 0;
				bottom: 0;
				top: auto;
				transform: translateY(100%);
				max-height: 85vh;
			}

			#slide-indicator {
				display: block;
			}

			#spot-popup-container.is-peek {
				transform: translateY(calc(100% - 65px));
			}

			#spot-popup-container.is-expanded {
				transform: translateY(0);
			}

			#spot-popup-overlay {
				background-color: transparent;
				pointer-events: none;
			}
			
			#spot-popup-overlay.is-active {
				pointer-events: auto;
			}

			#spot-popup-overlay.is-expanded::before {
				content: '';
				position: absolute;
				top: 0; left: 0; width: 100%; height: 100%;
				background: rgba(0,0,0,0.4);
			}
		}