/** * Leaflet Map Picker - Reusable Styles */ .leaflet-map-picker-container { width: 100%; } .leaflet-map-picker { height: 400px; width: 100%; cursor: crosshair; border-radius: 0.5rem; } .leaflet-map-picker-search { position: relative; margin-bottom: 1rem; } .leaflet-map-picker-search-input { width: 100%; padding-left: 2.5rem; } .leaflet-map-picker-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; } .leaflet-map-picker-clear-btn { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; transition: color 0.2s; } .leaflet-map-picker-clear-btn:hover { color: #4b5563; } .leaflet-map-picker-results { position: absolute; left: 0; right: 0; margin-top: 0.25rem; background-color: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); max-height: 16rem; overflow-y: auto; z-index: 9999; } .leaflet-map-picker-results.hidden { display: none; } .leaflet-map-picker-result-item { padding: 0.75rem; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: background-color 0.2s; } .leaflet-map-picker-result-item:last-child { border-bottom: none; } .leaflet-map-picker-result-item:hover { background-color: #f9fafb; } .leaflet-map-picker-help-text { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; } /* Loading spinner */ .leaflet-map-picker-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: leaflet-map-picker-spin 0.6s linear infinite; } @keyframes leaflet-map-picker-spin { to { transform: rotate(360deg); } } /* Responsive adjustments */ @media (max-width: 768px) { .leaflet-map-picker { height: 300px; } }