/* HEADER */

.areas-header {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 20px;

	flex-wrap: wrap;

	gap: 12px;

}



.areas-title {

	margin: 0;

	font-size: 26px;

	font-weight: 600;

}



.search-box {

	position: relative;

	flex-shrink: 0;

}

.search-box input {

	width: 260px;

	padding: 10px 35px 10px 12px;

	border: 1px solid #ccc;

	border-radius: 6px;

}

.search-icon {

	position: absolute;

	right: 10px;

	top: 9px;

	font-size: 18px;

	color: #777;

}



/* WRAPPER */

.browse-wrapper {

	display: flex;

	gap: 25px;

	background: #fafafa;

	border: 1px solid #d5d8dc;

	padding-bottom: 10px;

	margin-bottom: 40px;

}



/* LEFT SIDEBAR */

.browse-sidebar {

	min-width: 160px;

	border-right: 1px solid #d5d8dc;

	background: #f2f2f2;

}



/* STATE NAV */

.area-nav {

	list-style: none;

	margin: 0;

	padding: 0;

}

.state-title {

	padding: 12px;

	border-bottom: 1px solid #ddd;

	cursor: pointer;

	position: relative;

	font-weight: 600;

	font-size: 15px;

	transition: 0.2s;

}

.state-title.active { 

	background: #fafafa;

	width: 101%;

}



/* RIGHT CONTENT */

.browse-content {

	flex: 1;

}



/* STATE CONTENT */

.state-content {

	display: none;

	padding: 16px;

	background: #fafafa;

}

.state-content.active { display: block; }



/* GRID CITY LIST — MOBILE FIXED */

.city-content {

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

	gap: 12px;

	padding: 10px 5px;

	list-style: none;

}



.city-item {

	padding: 10px 12px;

	background: var(--e-global-color-67aaf7f);

	border: 1px solid var(--e-global-color-secondary);

	border-radius: 6px;

	cursor: pointer;

	position: relative;

	transition: 0.2s;

}

.city-item:hover {

	background: var(--e-global-color-a1f9373);
	
	color: var(--e-global-color-text);

}



/* CITY POPOVER */

.city-pages {

	font-weight: 500;

	display: none;

	position: absolute;

	left: 0;

	top: 50px;

	background: #ffffff;

	border: 1px solid var(--e-global-color-bcc096e);

	border-top: 3px solid var(--e-global-color-primary);

	width: 300px;

	z-index: 999;

	box-shadow: 0 20px 17px rgba(0, 0, 0, 0.15);

	border-radius: 6px;

	padding: 12px 18px;

}



.city-pages::before {

	height: 10px;

	width: 10px;

	display: block;

	top: -13px;

	left: 20%;

	position: absolute;

	content: '';

	border-left: 8px solid transparent;

	border-right: 8px solid transparent;

	border-bottom: 8px solid var(--e-global-color-primary);

}



.city-pages ul { margin: 0; padding: 0; padding-left: 10px; list-style: disc; }

.city-pages li { padding: 3px 0; }

.city-pages a { color: var(--e-global-color-primary); text-decoration: none; transition: all .3s linear; }

.city-pages a:hover { color: var(--e-global-color-accent); text-decoration: underline; }



/* ilocal-map.css - interactive USA map styles */



.ilocal-map-wrap {

	max-width: 1200px;

	margin: 0 auto;

	padding: 30px 20px;

	box-sizing: border-box;

}



div#usa-map-wrapper {

	width: 700px;

	margin: auto;

}

/* inline SVG container gets responsive width */

#usa-map-wrapper svg {

	width: 100%;

	height: auto;

	display: block;

}



/* default state style */

#usa-map-wrapper svg  path{

	fill: #e6e9ec;

	stroke: #9aa0a6;

	stroke-width: 1;

	transition: fill 180ms ease, transform 120ms ease, filter 180ms ease;

}

#usa-map-wrapper svg path:hover { fill: #cfe3ff; transform: translateY(-2px); }

/* label text */

#usa-map-wrapper .state-label {

	fill: #222;

	font-size: 12px;

	font-weight: 600;

	pointer-events: none;

}



/* served state (highlight) */

#usa-map-wrapper path.served{ 

	fill: #d93b3b !important;

	stroke: #7f1e1e;

	cursor: pointer;

	filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12));

}



/* tooltip & side panel (floating card) */

.ilocal-map-panel {

	position: fixed;

	right: 18px;

	top: 110px;

	width: 320px;

	max-width: calc(100% - 40px);

	background: #fff;

	border-radius: 8px;

	box-shadow: 0 18px 46px rgba(0,0,0,0.12);

	border: 1px solid #e7e7e7;

	padding: 14px 16px;

	display: none;

	z-index: 99999;

}



.ilocal-map-panel.open { display:block; }

.ilocal-map-panel .panel-title { margin:0 0 10px; font-size:18px; color:#0a0a0a; }

.ilocal-map-panel .panel-pages { margin:0; padding-left:18px; list-style: disc; }

.ilocal-map-panel .panel-pages li { margin:8px 0; }

.ilocal-map-panel .panel-pages a { color:#d03b4a; text-decoration:none; }

.ilocal-map-panel .close-panel { position:absolute; top:8px; right:8px; background:transparent; border:0; font-size:16px; cursor:pointer; }



/* small screens: make panel stack under map */

@media (max-width: 920px) {

	.ilocal-map-panel { position: static; width: 100%; max-width: 720px; margin: 18px auto 0; }

}





/* ============================

MOBILE RESPONSIVE FIXES

============================ */

@media(max-width: 900px) {

	.browse-wrapper {

		flex-direction: column;

		padding: 0;

	}



	.browse-sidebar {

		width: 100%;

		border-right: none;

		border-bottom: 1px solid #d5d8dc;

	}



	.area-nav .state-title {

		padding: 14px;

		font-size: 16px;

	}



	.browse-content {

		width: 100%;

		padding: 0;

	}

}



@media(max-width: 600px) {



	.areas-title {

		font-size: 22px;

		width: 100%;

	}



	.search-box input {

		width: 100%;

	}



	/* Make popover full width inside the column */

	.city-pages {

		left: 0;

		right: 0;

		box-sizing: border-box;

		top: 55px;

	}



	.city-pages::before {

		left: 30px;

	}



	/* Grid fix — always 2 per row or auto */

	.city-content {

		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));

	}



	.city-item {

		padding: 12px;

	}

}