/**
 * Map-based pickup location picker — frontend (cart / checkout).
 * Renders a Leaflet map above the existing pickup-location dropdown.
 */

.alp-map-picker {
	display: block;
	margin: 0 0 14px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.alp-map-picker-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 10px 12px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 13px;
}

.alp-map-locate-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #1d4ed8;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
	/* Keep "Use my location" on a single line even when the toolbar
	   has limited horizontal space (e.g. inside a narrow cart-totals
	   column). */
	white-space: nowrap;
	flex-shrink: 0;
}
.alp-map-locate-btn:hover {
	background: #eff6ff;
	border-color: #93c5fd;
}
.alp-map-locate-btn:active {
	transform: translateY(1px);
}
.alp-map-locate-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	color: #1d4ed8;
}

.alp-map-locate-status {
	color: #4b5563;
	font-size: 12.5px;
	line-height: 1.4;
}
.alp-map-locate-status.is-error {
	color: #b91c1c;
}

.alp-map-canvas {
	height: 320px;
	width: 100%;
	background: #f3f4f6;
}

/* ---------- Leaflet popup styling ---------- */

/* Cap the popup at a fixed max width so the long address text wraps
   instead of pushing the popup off the right edge of the map. Combined
   with Leaflet's autoPan option (set in JS), the popup will always fit
   fully within the visible map area. */
.leaflet-container .leaflet-popup-content {
	max-width: 240px !important;
	margin: 12px 14px !important;
}

.leaflet-container .alp-map-popup {
	font-family: inherit;
	font-size: 13px;
	line-height: 1.45;
	color: #1f2937;
	min-width: 0;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.leaflet-container .alp-map-popup strong {
	font-size: 14px;
	color: #111827;
	display: block;
	margin-bottom: 4px;
}
.leaflet-container .alp-map-popup small {
	color: #6b7280;
	display: block;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.alp-map-distance {
	display: inline-block;
	margin: 6px 0 0;
	padding: 2px 10px;
	background: #dbeafe;
	color: #1d4ed8;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.alp-map-select-btn {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 7px 12px;
	border-radius: 6px;
	border: 0;
	background: #1d4ed8;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s;
	text-align: center;
}
.alp-map-select-btn:hover {
	filter: brightness(0.95);
}

/* Selected marker highlight — a glowing halo + slight saturation pump so the
   chosen pin remains visibly distinct from the others even at small zoom
   levels. Multiple stacked drop-shadows fake a soft "ring" around the icon
   without needing a wrapper element (Leaflet uses inline `transform` on the
   icon for positioning, so we deliberately avoid `transform` here to keep
   the marker anchored to its lat/lng). */
.leaflet-marker-icon.alp-map-selected {
	filter:
		drop-shadow( 0 0 3px #1d4ed8 )
		drop-shadow( 0 0 6px #1d4ed8 )
		drop-shadow( 0 0 14px rgba( 29, 78, 216, 0.75 ) )
		saturate( 1.35 )
		brightness( 1.05 );
	z-index: 1000 !important;
}

/* ---------- z-index fix: datepicker must float above the map ----------
   Leaflet uses these z-index values on its internal panes:
       tile-pane     200
       overlay-pane  400
       shadow-pane   500
       marker-pane   600
       tooltip-pane  650
       popup-pane    700
       controls      800+
   jQuery UI Datepicker defaults to z-index: 1, so when the user opens
   the calendar to pick an appointment date BELOW the map, the calendar
   gets hidden behind the map's tile/marker layers. Bump the datepicker
   up to 10000 so it always sits above every Leaflet layer (and above
   our popups too). Same fix for the select2 dropdown the plugin uses
   for time-slot selection, and for any other popover the appointment
   UI might inject. */

.ui-datepicker {
	z-index: 10000 !important;
}

/* Belt-and-suspenders: also raise select2's dropdown layer (used by
   the appointment time-slot select on some themes) and the plugin's
   own custom popups so nothing intended for the user is ever covered
   by the map. */
.select2-container--open,
.select2-dropdown,
.alp-popup,
.popupwrapper {
	z-index: 10000 !important;
}

/* ---------- Responsive ---------- */

@media ( max-width: 600px ) {
	.alp-map-canvas {
		height: 240px;
	}
	.alp-map-picker-header {
		flex-wrap: wrap;
		gap: 8px;
	}
}