/* [hgl_network_map] shortcode styling — Leaflet-powered interactive map. */

#network .eyebrow.center,
#network .h-section.center {
	text-align: center;
}

#network .eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--brand-primary );
	margin: 0 0 12px;
}

#network .h-section {
	font-size: 32px;
	font-weight: 700;
	color: var( --wp--preset--color--text-primary );
	margin: 0;
}

/* ---------- Map shell ---------- */

.map-shell {
	position: relative;
	background: #212121; /* shows briefly while tiles are still loading */
	border: 1px solid var( --wp--preset--color--border-hairline );
	border-radius: var( --wp--custom--radius--lg, 16px );
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 640px;
    width: 100%;
}

.map-shell.is-expanded {
	position: fixed;
	inset: 24px;
	z-index: 100000;
	max-height: none;
	aspect-ratio: auto;
}

.map-canvas {
	position: absolute;
	inset: 0;
	background: #212121;
}

/* ---------- Leaflet overrides (scoped to this map only) ---------- */

.map-canvas.leaflet-container {
	font-family: inherit;
	background: #212121;
}

/* L.divIcon() always adds Leaflet's own "leaflet-div-icon" class
 * alongside our custom one, and that class ships with a default white
 * background + border box in Leaflet's own CSS — without resetting it
 * here, the actual transparent SVG pin below renders behind/inside an
 * unstyled white box instead of looking like a real map pin. */
.leaflet-div-icon.hgl-map-pin-wrap {
	background: transparent;
	border: none;
}

.hgl-map-pin-wrap {
	filter: drop-shadow( 0 4px 6px rgba( 0, 0, 0, 0.4 ) );
	transition: transform 0.15s ease;
}

.hgl-map-pin-wrap:hover {
	transform: scale( 1.15 );
}

/* Pakistan province/state and city name labels — see
 * SHOW_STATE_LABELS in network-map.js. leaflet-div-icon's default
 * white box background is reset the same way as the pin icon above. */
.leaflet-div-icon.hgl-state-label {
	background: transparent;
	border: none;
}

.hgl-state-label {
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba( 223, 227, 223, 0.55 );
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
	pointer-events: none;
}

/* Cities are smaller/lighter than province names, matching how most
 * real maps distinguish the two levels of label. */
.hgl-state-label--city {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	color: rgba( 223, 227, 223, 0.4 );
}

.hgl-map-popup .leaflet-popup-content-wrapper {
	background: var( --wp--preset--color--bg-surface-raised );
	border: 1.5px solid var( --wp--preset--color--brand-primary );
	border-radius: var( --wp--custom--radius--md, 12px );
	box-shadow: 0 6px 10px rgba( 0, 0, 0, 0.45 );
	color: var( --wp--preset--color--text-primary );
	padding: 2px;
}

.hgl-map-popup .leaflet-popup-content {
	margin: 12px 14px;
}

.hgl-map-popup .leaflet-popup-tip {
	background: var( --wp--preset--color--brand-primary );
	border: 1.5px solid var( --wp--preset--color--brand-primary );
	box-shadow: none;
}

.hgl-map-popup .leaflet-popup-close-button {
	color: var( --wp--preset--color--text-muted );
}

.hgl-map-popup__name {
	font-size: 15px;
	font-weight: 500;
	color: var( --wp--preset--color--text-primary );
	margin-bottom: 6px;
}

.hgl-map-popup__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var( --wp--preset--color--text-secondary );
	margin-bottom: 8px;
}

.hgl-map-popup__meta--city + .hgl-map-popup__meta--address {
	margin-top: -4px;
}

.hgl-map-popup__chargers {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hgl-map-popup__charger {
	border-top: 1px solid var( --wp--preset--color--border-hairline );
}

.hgl-map-popup__charger:first-child {
	padding-top: 0;
	border-top: 0;
}

.hgl-map-popup__charger-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var( --wp--preset--color--text-secondary );
	text-transform: uppercase;
	/* letter-spacing: 0.02em; */
	margin-bottom: 0px;
}

.hgl-map-popup__details {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hgl-map-popup__row {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-size: 12px;
}

.hgl-map-popup__row-label {
	color: var( --wp--preset--color--text-muted );
	white-space: nowrap;
}

.hgl-map-popup__row-value {
	color: var( --wp--preset--color--text-primary );
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.leaflet-control-attribution {
	background: rgba( 8, 10, 8, 0.6 ) !important;
	color: var( --wp--preset--color--text-muted ) !important;
	font-size: 10px !important;
	padding: 2px 6px !important;
}

.leaflet-control-attribution a {
	color: var( --wp--preset--color--text-secondary ) !important;
}

/* ---------- Search bar ---------- */

.map-search {
	position: absolute;
	z-index: 1; /* above Leaflet's own panes */
	top: 19px;
	left: 19px;
	display: none;
	/* display: flex; */
	align-items: center;
	gap: 12px;
	width: 380px;
	max-width: calc( 100% - 38px );
	height: 52px;
	padding: 8px 8px 8px 16px;
	background: var( --wp--preset--color--bg-surface-raised );
	border: 1px solid var( --wp--preset--color--border-hairline );
	border-radius: var( --wp--custom--radius--md, 12px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.45 );
	color: var( --wp--preset--color--text-muted );
}

.map-search svg {
	flex-shrink: 0;
}

.map-search input {
	flex: 1 1 0%;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--text-primary );
	font-size: 14px;
	line-height: 1.4;
	font-family: inherit;
}

.map-search input::placeholder {
	color: var( --wp--preset--color--text-muted );
}

.map-search input:focus {
	outline: none;
}
.leaflet-container{
    z-index: 1;
}

.map-search__filter {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid var( --wp--preset--color--brand-primary );
	border-radius: var( --wp--custom--radius--sm, 8px );
	color: var( --wp--preset--color--text-primary );
	cursor: pointer;
}
.map-search__filter{
    display: none !important;

}

.map-search__filter:hover {
	background: rgba( 50, 151, 72, 0.12 );
}

/* ---------- Map controls (right side, stacked) ---------- */

.map-controls {
	position: absolute;
	z-index: 1;
	top: 19px;
	right: 19px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.map-control {
	background: var( --wp--preset--color--bg-surface-raised );
	border: 1px solid var( --wp--preset--color--border-hairline );
	border-radius: var( --wp--custom--radius--md, 12px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.45 );
	color: var( --wp--preset--color--text-primary );
}

.map-control--expand,
.map-control--locate {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.map-control--expand:hover,
.map-control--locate:hover {
	color: var( --wp--preset--color--brand-primary );
}

.map-control--locate.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.map-control--zoom {
	width: 44px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
}
.map-control--reset{
	width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.map-controls button:focus{
	outline: none !important;
}

.map-control--zoom button {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--text-primary );
	cursor: pointer;
}

.map-control--zoom button:hover {
	color: var( --wp--preset--color--brand-primary );
	background: rgba( 50, 151, 72, 0.12 );
}

.map-control__divider {
	display: block;
	width: 100%;
	height: 1px;
	background: var( --wp--preset--color--border-hairline );
}

/* ---------- Attribution (our own label, in addition to Leaflet's own required one) ---------- */

.map-attr {
	position: absolute;
	z-index: 1;
	bottom: 20px;
	left: 20px;
	font-size: 12px;
	color: var( --wp--preset--color--text-muted );
	pointer-events: none;
}
.hgl-map-popup__details{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.leaflet-bottom.leaflet-right{
    display: none;
}

/* ---------- Marker clusters ---------- */

.hgl-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hgl-cluster-inner {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --wp--preset--color--brand-primary );
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: 50%;
	border: 3px solid rgba( 255, 255, 255, 0.85 );
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.45 );
	transition: transform 0.15s ease;
}

.hgl-cluster:hover .hgl-cluster-inner {
	transform: scale( 1.08 );
}

.hgl-cluster--medium .hgl-cluster-inner {
	font-size: 15px;
}

.hgl-cluster--large .hgl-cluster-inner {
	font-size: 16px;
}

/* The "spider legs" markercluster draws when spreading out an
 * over-zoomed cluster — recolored to match the theme instead of the
 * plugin's default black. */
.leaflet-cluster-spider-leg {
	stroke: var( --wp--preset--color--text-muted ) !important;
}

.map-control--expand{
    display: none;
}
@media ( max-width: 800px ) {
.map-search {


    width: 270px;
    max-width: calc(100% - 38px);
}
}

@media ( max-width: 600px ) {
	.map-shell { aspect-ratio: 3 / 4; }
	.map-search { width: calc( 100% - 38px ); }
	.map-attr { display: none; }
}

/* ---------- Bottom sheet (mobile station info) ---------- */

/* Hidden above the mobile breakpoint at all times, so it can never
 * interfere with the desktop Leaflet-popup experience even if the
 * open/close JS classes get toggled unexpectedly. */
.map-bottom-sheet {
	display: none;
}


@media ( max-width: 600px ) {
	.map-bottom-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100001; /* above .map-shell.is-expanded's 100000 */
		visibility: hidden;
		pointer-events: none;
	}

	.map-bottom-sheet.is-open {
		visibility: visible;
		pointer-events: auto;
	}

	.map-bottom-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: rgba( 0, 0, 0, 0.5 );
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.map-bottom-sheet.is-open .map-bottom-sheet__backdrop {
		opacity: 1;
	}

	.map-bottom-sheet__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 75vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var( --wp--preset--color--bg-surface-raised );
		border: 1.5px solid var( --wp--preset--color--brand-primary );
		border-bottom: none;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.5 );
		padding: 8px 20px 28px;
		transform: translateY( 100% );
		transition: transform 0.28s cubic-bezier( 0.32, 0.72, 0, 1 );
	}

	.map-bottom-sheet.is-open .map-bottom-sheet__panel {
		transform: translateY( 0 );
	}

	
	.map-bottom-sheet.is-dragging .map-bottom-sheet__panel {
		transition: none;
	}

	.map-bottom-sheet__handle {
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: var( --wp--preset--color--border-hairline );
		margin: 6px auto 14px;
		cursor: grab;
		touch-action: none;
	}

	.map-bottom-sheet__close {
		position: absolute;
		top: 10px;
		right: 12px;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		color: var( --wp--preset--color--text-muted );
		cursor: pointer;
	}

	.map-bottom-sheet__close:hover {
		color: var( --wp--preset--color--text-primary );
	}

	
	.map-bottom-sheet__content .hgl-map-popup__name {
		font-size: 17px;
	}
    .map-control--zoom, .map-control--locate{
        display: none;
    }
}