/* ============================================================
   Near Me – Modern UI (CSS-only, scoped to .lw-nearme-page)
   ============================================================ */

.lw-nearme-page {
	--nm-primary:         var(--lw-primary-color, #e10b2d);
	--nm-primary-rgb:     225, 11, 45;
	--nm-radius:          18px;
	--nm-radius-sm:       12px;
	--nm-radius-xs:       8px;
	--nm-gap:             16px;
	--nm-surface:         #f4f5f8;
	--nm-surface-2:       #ffffff;
	--nm-border:          rgba(0,0,0,0.07);
	--nm-shadow-sm:       0 2px 8px rgba(0,0,0,0.07);
	--nm-shadow-md:       0 8px 24px rgba(0,0,0,0.10);
	--nm-shadow-lg:       0 16px 40px rgba(0,0,0,0.13);
	--nm-chip-bg:         rgba(var(--nm-primary-rgb), 0.09);
	--nm-chip-border:     rgba(var(--nm-primary-rgb), 0.22);
	--nm-chip-text:       #1a1a2e;
	--nm-text-muted:      #7a7a9a;
	--nm-avatar-size:     46px;
	--nm-transition:      all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Page title ─────────────────────────────────────────── */
.lw-nearme-page .d-sm-flex.align-items-center.justify-content-between.mb-4 {
	margin-bottom: 20px !important;
}
.lw-nearme-page .h5.h5 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: var(--nm-chip-text);
}
.lw-nearme-page .text-gray-200 {
	color: var(--nm-chip-text) !important;
}

/* ── Outer card ─────────────────────────────────────────── */
.lw-nearme-page .card {
	border-radius: var(--nm-radius);
	border: 1px solid var(--nm-border);
	overflow: visible !important;
	background: var(--nm-surface-2);
	box-shadow: var(--nm-shadow-md);
}

/* ── Card header (filter bar) ───────────────────────────── */
/* user-pages-modern.css loads AFTER this file, so we need specificity > 0,4,0 to win.
   .lw-nearme-page .shadow.card > .card-header.py-3 = 5 classes = 0,5,0 → beats 0,4,0 */
.lw-nearme-page .shadow.card > .card-header.py-3 {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%) !important;
	border-bottom: none !important;
	border-radius: var(--nm-radius) var(--nm-radius) 0 0 !important;
	padding: 18px 20px !important;
	gap: var(--nm-gap);
	flex-wrap: wrap;
	display: flex !important;
	align-items: flex-start !important;
	overflow: visible !important;
}
/* Filter controls wrapper — take full row width when title wraps, never collapse */
.lw-nearme-page .card-header > .d-flex.align-items-center.flex-wrap {
	flex: 1 1 auto;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.lw-nearme-page .card-header .font-weight-bold {
	font-weight: 700;
	font-size: 1rem;
	color: #ffffff;
}
.lw-nearme-page .card-header .font-weight-bold.text-primary {
	color: #ffffff !important;
	background: linear-gradient(90deg, var(--nm-primary), #ff6b6b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── Filter chips ───────────────────────────────────────── */
.lw-nearme-page #lwNearMeRadiusFilter,
.lw-nearme-page #lwNearMeAgeFilter,
.lw-nearme-page #lwNearMeGenderFilter {
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;
	padding: 8px 14px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	gap: 8px;
	min-width: 0 !important;
}
.lw-nearme-page #lwNearMeRadiusFilter label,
.lw-nearme-page #lwNearMeAgeFilter label,
.lw-nearme-page #lwNearMeGenderFilter label {
	color: rgba(255,255,255,0.80);
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
	margin-bottom: 0;
}

/* Toggle switches */
.lw-nearme-page .custom-control.custom-switch {
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;
	padding: 8px 14px 8px 38px;
	margin: 0;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.lw-nearme-page .custom-control.custom-switch .custom-control-label {
	color: rgba(255,255,255,0.85);
	font-weight: 600;
	font-size: 0.78rem;
}

/* ── Range slider ───────────────────────────────────────── */
.lw-nearme-page #lwNearMeRadius {
	accent-color: var(--nm-primary);
	height: 4px;
	cursor: pointer;
	max-width: 180px;
}

/* Radius value highlight */
#lwNearMeRadiusValue {
	display: inline-block;
	min-width: 5ch;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: rgba(255,255,255,0.95);
	font-weight: 700;
}

/* ── Form controls inside header ────────────────────────── */
.lw-nearme-page .card-header .form-control,
.lw-nearme-page .card-header select.form-control {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.22);
	color: #ffffff;
	border-radius: var(--nm-radius-xs);
	font-size: 0.8rem;
	height: 32px;
	padding: 4px 8px;
}
.lw-nearme-page .card-header .form-control::placeholder {
	color: rgba(255,255,255,0.45);
}
.lw-nearme-page .card-header .form-control:focus,
.lw-nearme-page .card-header select.form-control:focus {
	background: rgba(255,255,255,0.18);
	border-color: rgba(255,255,255,0.45);
	color: #ffffff;
	box-shadow: 0 0 0 3px rgba(var(--nm-primary-rgb), 0.25);
	outline: none;
}
.lw-nearme-page .card-header select.form-control option {
	background: #1a1a2e;
	color: #ffffff;
}
.lw-nearme-page .card-header .text-muted {
	color: rgba(255,255,255,0.65) !important;
}

/* ── Action buttons in header ───────────────────────────── */
.lw-nearme-page #lwNearMeRecenter {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	color: #ffffff;
	border-radius: 999px;
	padding: 6px 16px;
	font-weight: 700;
	font-size: 0.8rem;
	transition: var(--nm-transition);
}
.lw-nearme-page #lwNearMeRecenter:hover {
	background: rgba(255,255,255,0.22);
}
.lw-nearme-page #lwNearMeUpdateCurrentLocation {
	background: linear-gradient(135deg, var(--nm-primary), #ff6b6b);
	border: none;
	color: #ffffff;
	border-radius: 999px;
	padding: 6px 16px;
	font-weight: 700;
	font-size: 0.8rem;
	box-shadow: 0 4px 14px rgba(var(--nm-primary-rgb), 0.38);
	transition: var(--nm-transition);
}
.lw-nearme-page #lwNearMeUpdateCurrentLocation:hover {
	opacity: 0.9;
	box-shadow: 0 6px 20px rgba(var(--nm-primary-rgb), 0.50);
}

/* ── Card body ──────────────────────────────────────────── */
.lw-nearme-page .card-body {
	background: var(--nm-surface);
	padding: 20px;
}

/* ── Help alert ─────────────────────────────────────────── */
.lw-nearme-page #lwNearMeHelp.alert {
	border-radius: var(--nm-radius-sm);
	border: 1px solid rgba(var(--nm-primary-rgb), 0.2);
	background: rgba(var(--nm-primary-rgb), 0.07);
	color: var(--nm-chip-text);
	font-size: 0.88rem;
}

/* ── Map container ──────────────────────────────────────── */
.lw-nearme-page #lwNearMeMap {
	border-radius: var(--nm-radius) !important;
	border: none !important;
	background: var(--nm-surface);
	box-shadow: var(--nm-shadow-sm);
	overflow: hidden;
}
.lw-nearme-page #lwNearMeLoading {
	border-radius: var(--nm-radius);
	background: rgba(26,26,46,0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.lw-nearme-page #lwNearMeLoading .spinner-border {
	color: var(--nm-primary) !important;
}
.lw-nearme-page #lwNearMeLoading .text-muted {
	color: rgba(255,255,255,0.78) !important;
}

/* ── Right list panel container ─────────────────────────── */
.lw-nearme-page .col-12.col-lg-4 > .border.rounded {
	border-radius: var(--nm-radius) !important;
	border: none !important;
	background: var(--nm-surface);
	overflow: hidden !important;
	display: flex;
	flex-direction: column;
	height: 70vh;
	min-height: 380px;
	box-shadow: var(--nm-shadow-sm);
}

/* List panel header */
.lw-nearme-page .col-12.col-lg-4 > .border.rounded > .p-3.border-bottom {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border-bottom: none !important;
	padding: 14px 18px !important;
	flex: 0 0 auto;
	border-radius: var(--nm-radius) var(--nm-radius) 0 0;
}
.lw-nearme-page .col-12.col-lg-4 > .border.rounded > .p-3.border-bottom .text-muted {
	color: rgba(255,255,255,0.70) !important;
	font-size: 0.80rem;
}
.lw-nearme-page .col-12.col-lg-4 > .border.rounded > .p-3.border-bottom strong,
.lw-nearme-page #lwNearMeCount {
	color: #ffffff;
	font-size: 1rem;
}

/* Scroll region – flex:1 + min-height:0 lets the child scroll within a fixed-height flex parent */
.lw-nearme-page #lwNearMeList,
.lw-nearme-page #lwNearMeEmpty {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto !important;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.lw-nearme-page #lwNearMeList {
	background: var(--nm-surface);
	padding: 12px 12px 16px !important;
	/* replace list-group stacking with a proper flex gap layout */
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	/* allow content to overflow so scroll kicks in */
	min-height: 0;
	height: 100%;
}
.lw-nearme-page #lwNearMeEmpty {
	background: var(--nm-surface);
	padding: 24px 16px;
	color: var(--nm-text-muted);
	font-size: 0.88rem;
	text-align: center;
}

/* ── User list items (cards) ─────────────────────────────── */
/* Bootstrap list-group-flush zeros out radius/borders – override everything */
.lw-nearme-page #lwNearMeList .list-group-item,
.lw-nearme-page #lwNearMeList .list-group-item:first-child,
.lw-nearme-page #lwNearMeList .list-group-item:last-child {
	border: none !important;
	border-radius: var(--nm-radius-sm) !important;
	margin: 0;
	padding: 14px 16px !important;
	background: var(--nm-surface-2) !important;
	box-shadow: var(--nm-shadow-sm);
	transition: var(--nm-transition);
	position: relative;
	overflow: hidden;
	width: 100%;
	/* CRITICAL: prevent flex from squashing items – forces overflow+scroll instead */
	flex-shrink: 0;
	flex-grow: 0;
}

/* Left accent strip – reveals on hover */
.lw-nearme-page #lwNearMeList .list-group-item::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--nm-primary), #ff6b6b);
	opacity: 0;
	transition: opacity 0.18s ease;
	border-radius: 4px 0 0 4px;
}
.lw-nearme-page #lwNearMeList .list-group-item:hover {
	box-shadow: var(--nm-shadow-md);
	transform: translateY(-2px);
}
.lw-nearme-page #lwNearMeList .list-group-item:hover::before {
	opacity: 1;
}
.lw-nearme-page #lwNearMeList .list-group-item:focus-visible {
	outline: 2px solid var(--nm-primary);
	outline-offset: 2px;
}

/* Avatar – inline style width/height must be beaten with !important */
.lw-nearme-page #lwNearMeList img.rounded-circle {
	width: 46px !important;
	height: 46px !important;
	min-width: 46px;
	object-fit: cover;
	border: 2.5px solid rgba(var(--nm-primary-rgb), 0.30) !important;
	box-shadow: 0 0 0 3px rgba(var(--nm-primary-rgb), 0.08);
	transition: var(--nm-transition);
	flex-shrink: 0;
	margin-right: 12px !important;
}
.lw-nearme-page #lwNearMeList .list-group-item:hover img.rounded-circle {
	border-color: var(--nm-primary) !important;
	box-shadow: 0 0 0 4px rgba(var(--nm-primary-rgb), 0.18);
}

/* Name text – JS builds this with class="font-weight-bold text-white" */
.lw-nearme-page #lwNearMeList .text-white,
.lw-nearme-page #lwNearMeList .font-weight-bold.text-white {
	color: #1a1a2e !important;
	font-weight: 700 !important;
	font-size: 0.88rem;
	line-height: 1.3;
}

/* Secondary link row spacing */
.lw-nearme-page #lwNearMeList .mt-1 {
	margin-top: 8px !important;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Remove Bootstrap's ml-3 from chat link since we use gap */
.lw-nearme-page #lwNearMeList a[data-action="chat"].ml-3 {
	margin-left: 0 !important;
}

/* Badges */
.lw-nearme-page #lwNearMeList .badge-success {
	background: linear-gradient(135deg, #11998e, #38ef7d);
	border-radius: 999px;
	font-size: 0.65rem;
	padding: 2px 8px;
	font-weight: 700;
	color: #fff;
}
.lw-nearme-page #lwNearMeList .badge-light {
	background: rgba(var(--nm-primary-rgb), 0.10);
	color: var(--nm-primary);
	border-radius: 999px;
	font-size: 0.65rem;
	padding: 2px 8px;
	font-weight: 700;
	border: 1px solid rgba(var(--nm-primary-rgb), 0.18);
}

/* Action pill buttons */
.lw-nearme-page #lwNearMeList a[data-action="profile"],
.lw-nearme-page #lwNearMeList a[data-action="chat"] {
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	padding: 4px 12px;
	border-radius: 999px;
	transition: var(--nm-transition);
}
.lw-nearme-page #lwNearMeList a[data-action="profile"] {
	background: rgba(var(--nm-primary-rgb), 0.09);
	border: 1px solid rgba(var(--nm-primary-rgb), 0.20);
	color: var(--nm-primary) !important;
}
.lw-nearme-page #lwNearMeList a[data-action="profile"]:hover {
	background: rgba(var(--nm-primary-rgb), 0.17);
}
.lw-nearme-page #lwNearMeList a[data-action="chat"] {
	background: linear-gradient(135deg, var(--nm-primary), #ff6b6b);
	border: none;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(var(--nm-primary-rgb), 0.30);
}
.lw-nearme-page #lwNearMeList a[data-action="chat"]:hover {
	opacity: 0.88;
	box-shadow: 0 5px 16px rgba(var(--nm-primary-rgb), 0.45);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 575.98px) {
	.lw-nearme-page .shadow.card > .card-header.py-3 {
		padding: 14px !important;
		align-items: flex-start !important;
	}
	.lw-nearme-page #lwNearMeRadiusFilter,
	.lw-nearme-page #lwNearMeAgeFilter,
	.lw-nearme-page #lwNearMeGenderFilter,
	.lw-nearme-page .custom-control.custom-switch {
		border-radius: var(--nm-radius-xs);
		font-size: 0.75rem;
	}
	.lw-nearme-page #lwNearMeMap {
		height: 48vh !important;
		min-height: 300px !important;
	}
	.lw-nearme-page .col-12.col-lg-4 > .border.rounded {
		height: 44vh !important;
		min-height: 260px !important;
	}
}