/* Homepage — Find Halal Food by City
 * Compact dashboard treatment based on the approved reference.
 */

.thf-home-v2 .thf-city-panel {
	padding: 0 14px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
}

.thf-home-v2 .thf-city-panel__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 10px;
	padding: 0 0 9px;
	border-bottom: 1px solid rgba(255,255,255,.10);
}

.thf-home-v2 .thf-city-panel__heading h2 {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	padding: 0 !important;
	color: #f1f6f4 !important;
	font-size: 13px !important;
	line-height: 1.25 !important;
	font-weight: 750 !important;
	letter-spacing: -.01em;
}

.thf-home-v2 .thf-city-panel__heading h2 i {
	color: var(--thf-accent, #27d98b) !important;
	font-size: 12px;
}

.thf-home-v2 .thf-city-panel__heading > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--thf-accent, #27d98b) !important;
	font-size: 9px;
	line-height: 1;
	font-weight: 750;
	white-space: nowrap;
}

.thf-home-v2 .thf-city-panel__heading > a:hover {
	color: #5ce8aa !important;
}

.thf-home-v2 .thf-city-panel__heading > a i {
	font-size: 8px;
}

.thf-home-v2 .thf-city-panel .thf-all-locations {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.thf-home-v2 .thf-city-panel .thf-all-locations > h2 {
	display: none !important;
}

.thf-home-v2 .thf-city-panel .thf-all-locations ul {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 8px 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.thf-home-v2 .thf-city-panel .thf-all-locations li {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.thf-home-v2 .thf-city-panel .thf-all-locations a {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	min-width: 0;
	height: 34px;
	padding: 0 16px !important;
	margin: 0 !important;
	background: rgba(255,255,255,.025) !important;
	border: 1px solid rgba(130,164,151,.16) !important;
	border-radius: 999px !important;
	box-shadow: none;
	color: #dbe5e1 !important;
	font-size: 9px !important;
	line-height: 1 !important;
	font-weight: 550 !important;
	white-space: nowrap !important;
	overflow: hidden;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

.thf-home-v2 .thf-city-panel .thf-all-locations a i {
	flex: 0 0 auto;
	width: 10px;
	color: var(--thf-accent, #27d98b) !important;
	font-size: 9px !important;
	text-align: center;
}

/* Use the same location-pin language as the reference instead of the old utensil icon. */
.thf-home-v2 .thf-city-panel .thf-all-locations a i::before {
	content: "\f3c5" !important;
}

.thf-home-v2 .thf-city-panel .thf-all-locations a span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.thf-home-v2 .thf-city-panel .thf-all-locations a:hover {
	background: rgba(31,54,48,.72) !important;
	border-color: rgba(39,217,139,.34) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

@media (max-width: 980px) {
	.thf-home-v2 .thf-city-panel {
		padding: 0 12px !important;
	}
	.thf-home-v2 .thf-city-panel .thf-all-locations ul {
		gap: 8px !important;
	}
	.thf-home-v2 .thf-city-panel .thf-all-locations a {
		height: 32px;
		padding: 0 14px !important;
		font-size: 10px !important;
	}
}

@media (max-width: 680px) {
	.thf-home-v2 .thf-city-panel__heading {
		align-items: flex-start;
	}
	.thf-home-v2 .thf-city-panel .thf-all-locations a {
		height: 34px;
		padding: 0 12px !important;
	}
}