/* ================================================================
 *  POI Suggestions — Panel, categories, results, map markers
 *  Loaded only on the Create/Edit route page.
 *  Uses var(--mot-*, fallback) for standalone compatibility.
 * ============================================================= */

/* ── Panel layout (replaces form in sidebar) ─────────────────── */
.mrm-poi-panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4, 1rem);
}

.mrm-poi-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mrm-poi-panel__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--mot-text, #f2f2f2);
}

.mrm-poi-panel__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border: none;
	background: none;
	color: var(--mot-text-muted, #9b9b9b);
	font-family: var(--mot-font, system-ui, -apple-system, sans-serif);
	font-size: .8125rem;
	cursor: pointer;
	border-radius: var(--mot-radius-sm, 6px);
	transition: all var(--mot-transition, .18s ease);
}
.mrm-poi-panel__back:hover {
	background: var(--mot-bg-raised, #2a2a2a);
	color: var(--mot-text, #f2f2f2);
}
.mrm-poi-panel__back svg {
	width: 14px;
	height: 14px;
}

/* ── Filters section ─────────────────────────────────────────── */
.mrm-poi-filters {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4, 1rem);
}

.mrm-poi-fetch-btn {
	width: 100%;
	justify-content: center;
}

.mrm-poi-hint {
	margin: 0;
	font-size: .8125rem;
	color: var(--mot-text-muted, #9b9b9b);
	line-height: 1.4;
}

/* ── Category toggle chips ───────────────────────────────────── */
.mrm-poi-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mrm-poi-cat-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: 20px;
	background: transparent;
	color: var(--mot-text-muted, #9b9b9b);
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--mot-transition, .18s ease);
	user-select: none;
}
.mrm-poi-cat-toggle:hover {
	border-color: var(--mot-text-muted, #9b9b9b);
}
.mrm-poi-cat-toggle svg {
	width: 14px;
	height: 14px;
}

.mrm-poi-cat-toggle__input {
	display: none;
}

/* Active state per category — canonical POI colors from design-system.css */
.mrm-poi-cat-toggle--active.mrm-poi-cat-toggle--fuel {
	background: rgba(249, 115, 22, .15);
	border-color: var(--mot-poi-fuel, #f97316);
	color: var(--mot-poi-fuel, #f97316);
}
.mrm-poi-cat-toggle--active.mrm-poi-cat-toggle--food {
	background: rgba(245, 158, 11, .15);
	border-color: var(--mot-poi-food, #f59e0b);
	color: var(--mot-poi-food, #f59e0b);
}
.mrm-poi-cat-toggle--active.mrm-poi-cat-toggle--viewpoint {
	background: rgba(20, 184, 166, .15);
	border-color: var(--mot-poi-viewpoint, #14b8a6);
	color: var(--mot-poi-viewpoint, #14b8a6);
}
.mrm-poi-cat-toggle--active.mrm-poi-cat-toggle--hotel {
	background: rgba(59, 130, 246, .15);
	border-color: var(--mot-poi-hotel, #3b82f6);
	color: var(--mot-poi-hotel, #3b82f6);
}
.mrm-poi-cat-toggle--active.mrm-poi-cat-toggle--repair {
	background: rgba(139, 92, 246, .15);
	border-color: var(--mot-poi-repair, #8b5cf6);
	color: var(--mot-poi-repair, #8b5cf6);
}

/* ── Results section ─────────────────────────────────────────── */
.mrm-poi-results__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-3, .75rem);
	font-size: .8125rem;
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-poi-results__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mrm-poi-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 400px;
	overflow-y: auto;
	margin-bottom: var(--sp-3, .75rem);
	scrollbar-width: thin;
	scrollbar-color: var(--mot-border, rgba(255,255,255,.08)) transparent;
}
.mrm-poi-list::-webkit-scrollbar {
	width: 6px;
}
.mrm-poi-list::-webkit-scrollbar-track {
	background: transparent;
}
.mrm-poi-list::-webkit-scrollbar-thumb {
	background: var(--mot-border, rgba(255,255,255,.08));
	border-radius: 3px;
}

/* ── POI item row ────────────────────────────────────────────── */
.mrm-poi-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: var(--mot-radius-sm, 6px);
	cursor: pointer;
	transition: background var(--mot-transition, .18s ease);
}
.mrm-poi-item:hover {
	background: var(--mot-bg-raised, #2a2a2a);
}
.mrm-poi-item.is-saved {
	opacity: .55;
	cursor: default;
	background: transparent;
}
.mrm-poi-item.is-saved:hover {
	background: transparent;
}
.mrm-poi-item__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--mot-green, #00875A);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	vertical-align: middle;
}

.mrm-poi-item__check {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.mrm-poi-check {
	width: 16px;
	height: 16px;
	accent-color: var(--mot-accent, #ff6b35);
	cursor: pointer;
}

/* Category icon circle */
.mrm-poi-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}
.mrm-poi-item__icon svg {
	width: 16px;
	height: 16px;
}

.mrm-poi-item__icon--fuel {
	background: rgba(249, 115, 22, .15);
	color: var(--mot-poi-fuel, #f97316);
}
.mrm-poi-item__icon--food {
	background: rgba(245, 158, 11, .15);
	color: var(--mot-poi-food, #f59e0b);
}
.mrm-poi-item__icon--viewpoint {
	background: rgba(20, 184, 166, .15);
	color: var(--mot-poi-viewpoint, #14b8a6);
}
.mrm-poi-item__icon--hotel {
	background: rgba(59, 130, 246, .15);
	color: var(--mot-poi-hotel, #3b82f6);
}
.mrm-poi-item__icon--repair {
	background: rgba(139, 92, 246, .15);
	color: var(--mot-poi-repair, #8b5cf6);
}

/* Item info */
.mrm-poi-item__info {
	flex: 1;
	min-width: 0;
}
.mrm-poi-item__name {
	font-size: .875rem;
	font-weight: 500;
	color: var(--mot-text, #f2f2f2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mrm-poi-item__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	font-size: .75rem;
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-poi-item__cat {
	text-transform: capitalize;
}
.mrm-poi-item__dist::before {
	content: '·';
	margin-right: 8px;
}

/* Empty state */
.mrm-poi-empty {
	padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem);
	text-align: center;
	color: var(--mot-text-muted, #9b9b9b);
	font-size: .875rem;
}

/* Save button full width */
.mrm-poi-results .mrm-poi-save,
#mrm-poi-save {
	width: 100%;
	justify-content: center;
}

/* ── Loading state ───────────────────────────────────────────── */
.mrm-poi-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3, .75rem);
	padding: var(--sp-8, 2rem) var(--sp-4, 1rem);
	color: var(--mot-text-muted, #9b9b9b);
	font-size: .875rem;
}

/* Map marker: uses .mot-poi-marker from design-system.css */
.mrm-poi-marker-container {
	background: none !important;
	border: none !important;
	cursor: pointer !important;
}
.mrm-poi-marker-container .mot-poi-marker {
	transition: transform .15s ease;
}

/* ── Leaflet tooltip override for POI markers ────────────────── */
.mrm-poi-marker-container .leaflet-tooltip {
	background: var(--mot-bg-card, #1f1f1f);
	color: var(--mot-text, #f2f2f2);
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius-sm, 6px);
	font-size: .75rem;
	padding: 4px 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.mrm-poi-marker-container .leaflet-tooltip-top::before {
	border-top-color: var(--mot-border, rgba(255,255,255,.08));
}

/* ── Mobile: hide POI header (slide-up panel header handles it) ──── */
@media (max-width: 959px) {
	.mrm-poi-panel__header { display: none; }
}